/* ═══════════════════════════════════════════════════════════════════ * KNOX UI KIT — kit.css (token layer + components) * Shared design language for Argus / Chiron / Atlas / Postman / Knox. * * Theming: set data-knox-theme="argus|chiron|atlas|postman|knox" on * (whole app) OR on any element (per-card accent bleed). * Everything below reads the --accent-* custom properties, so accents * cascade to exactly the scope you stamp the attribute on. * * Fonts expected (apps already load these from Google Fonts): * Cinzel (display), JetBrains Mono (numeric/base), Inter (body copy) * ═══════════════════════════════════════════════════════════════════ */ /* ── Base tokens (theme-independent) ─────────────────────────────── */ :root { --bg-deep: #0a0a0f; --bg-card: #15151c; --bg-elevated: #1d1d28; --bg-hover: #25252f; --green: #38d199; --red: #ff4757; --amber: #ffb347; --font-display: 'Cinzel', serif; --font-mono: 'JetBrains Mono', 'SF Mono', monospace; --font-body: 'Inter', 'JetBrains Mono', sans-serif; --radius: 12px; --radius-sm: 8px; --radius-pill: 999px; } /* ── Theme accent sets ──────────────────────────────────────────── * Default (no attribute) = knox unified: deep obsidian + spectral * silver. Per-app themes override the accent trio + glow + text tint. * ────────────────────────────────────────────────────────────────── */ :root, [data-knox-theme="knox"] { --accent-rgb: 205, 211, 224; --accent-1: #cdd3e0; /* spectral silver */ --accent-2: #9aa3b8; /* deeper steel */ --accent-3: #f2f5fc; /* near-white highlight */ --accent-alt: #8ea0c9; /* cool slate secondary */ --glow: rgba(205, 211, 224, 0.45); --glow-soft: rgba(205, 211, 224, 0.14); --glow-faint: rgba(205, 211, 224, 0.06); --border: rgba(205, 211, 224, 0.14); --text-1: #eef0f6; --text-2: #9ba1b0; --text-3: #5d6270; } [data-knox-theme="argus"] { --accent-rgb: 255, 107, 26; --accent-1: #ff6b1a; /* burnt orange */ --accent-2: #e85a14; --accent-3: #ffa64d; --accent-alt: #ffca7a; --glow: rgba(255, 107, 26, 0.55); --glow-soft: rgba(255, 107, 26, 0.18); --glow-faint: rgba(255, 107, 26, 0.07); --border: rgba(255, 107, 26, 0.15); --text-1: #f5f1e8; --text-2: #a89e8e; --text-3: #6b6354; } [data-knox-theme="chiron"] { --accent-rgb: 93, 184, 165; --accent-1: #5db8a5; /* sage */ --accent-2: #3e9c8a; --accent-3: #8fd8c9; --accent-alt: #e6c87e; /* apothecary gold */ --glow: rgba(93, 184, 165, 0.50); --glow-soft: rgba(93, 184, 165, 0.16); --glow-faint: rgba(93, 184, 165, 0.06); --border: rgba(93, 184, 165, 0.16); --text-1: #edf4f0; --text-2: #97a8a1; --text-3: #5b6a64; } [data-knox-theme="atlas"] { --accent-rgb: 146, 99, 255; --accent-1: #9263ff; /* cosmic violet */ --accent-2: #7a3ff2; --accent-3: #c39bff; --accent-alt: #a855f7; /* amethyst */ --glow: rgba(146, 99, 255, 0.52); --glow-soft: rgba(146, 99, 255, 0.17); --glow-faint: rgba(146, 99, 255, 0.07); --border: rgba(146, 99, 255, 0.17); --text-1: #f0edf8; --text-2: #a099b4; --text-3: #625c72; } [data-knox-theme="postman"] { --accent-rgb: 200, 164, 99; --accent-1: #c8a463; /* brass */ --accent-2: #a8854a; --accent-3: #e3c88f; --accent-alt: #962f2f; /* wax-seal red */ --glow: rgba(200, 164, 99, 0.50); --glow-soft: rgba(200, 164, 99, 0.16); --glow-faint: rgba(200, 164, 99, 0.06); --border: rgba(200, 164, 99, 0.17); --text-1: #f4efe4; --text-2: #a99f8c; --text-3: #6b6353; } /* ── Reset + defensive overflow (feedback_css_grid_1fr_overflow) ── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html, body { overflow-x: hidden; max-width: 100vw; background: var(--bg-deep); color: var(--text-1); font-family: var(--font-mono); font-size: 14px; line-height: 1.5; min-height: 100vh; } /* Ambient top glow — the signature Knox atmosphere */ body::before { content: ''; position: fixed; top: -200px; left: 50%; transform: translateX(-50%); width: 640px; height: 420px; background: radial-gradient(circle, var(--glow-soft) 0%, transparent 70%); pointer-events: none; z-index: 0; } body > * { position: relative; z-index: 1; } img, svg, canvas, video { max-width: 100%; } /* ── Grid helpers — ALWAYS minmax(0,1fr), never bare 1fr ─────────── */ .kgrid { display: grid; gap: 20px; } .kgrid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kgrid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kgrid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kgrid > * { min-width: 0; } .kshell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; } .kshell > * { min-width: 0; } @media (max-width: 1100px) { .kgrid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kgrid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .kgrid.cols-2, .kgrid.cols-3, .kgrid.cols-4 { grid-template-columns: minmax(0, 1fr); } .kshell { grid-template-columns: minmax(0, 1fr); } } /* ── Card ─────────────────────────────────────────────────────────── */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: border-color 0.3s, box-shadow 0.3s; position: relative; min-width: 0; } .card:hover { border-color: rgba(var(--accent-rgb), 0.32); box-shadow: 0 0 24px var(--glow-soft); } .card-title { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.25em; color: var(--accent-3); text-transform: uppercase; margin-bottom: 16px; } .card-sub { color: var(--text-2); font-size: 12px; margin-bottom: 16px; font-family: var(--font-body); } .empty-state { color: var(--text-3); font-style: italic; text-align: center; padding: 24px; } /* ── Stat tiles ───────────────────────────────────────────────────── */ .stat-tiles { display: flex; gap: 22px; flex-wrap: wrap; } .stat-tile { text-align: right; min-width: 0; } .stat-num { font-family: var(--font-mono); font-size: 22px; font-weight: 700; line-height: 1.15; background: linear-gradient(135deg, var(--accent-3) 0%, var(--accent-1) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .stat-num.warn { background: linear-gradient(135deg, #ff8a8a 0%, var(--red) 100%); -webkit-background-clip: text; background-clip: text; } .stat-label { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-top: 2px; } /* ── Fill-bar rows (X-Ray primary breakdown) ─────────────────────── */ .fill-row { position: relative; overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 8px; transition: transform 0.25s ease, border-color 0.25s ease; } .fill-row:hover { transform: translateX(2px); border-color: rgba(var(--accent-rgb), 0.4); } .fill-row .fill-bar { position: absolute; inset: 0 auto 0 0; width: 0%; /* set width inline: style="width:63%" */ background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.16) 0%, rgba(var(--accent-rgb), 0.05) 100%); pointer-events: none; } .fill-row.warn { border-color: rgba(255, 71, 87, 0.4); } .fill-row.warn .fill-bar { background: linear-gradient(90deg, rgba(255,71,87,0.18) 0%, rgba(255,71,87,0.05) 100%); } .fill-row-content { position: relative; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto); gap: 12px; align-items: center; } .fill-row-sym { font-weight: 700; color: var(--accent-3); font-size: 13px; } .fill-row.warn .fill-row-sym { color: var(--red); } .fill-row-meta { color: var(--text-2); font-size: 11.5px; font-family: var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fill-row-num { text-align: right; font-weight: 600; font-size: 12.5px; } .fill-row-num small { display: block; color: var(--text-3); font-weight: 400; font-size: 10.5px; } /* ── X-Ray analytical card (Frank's approved pattern) ────────────── */ .xray-card { padding: 0; overflow: hidden; } .xray-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; padding: 22px 24px 18px; border-bottom: 1px solid rgba(var(--accent-rgb), 0.18); } .xray-title-block { min-width: 0; } .xray-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; background: linear-gradient(100deg, #ffffff 0%, var(--accent-3) 55%, var(--accent-1) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.22)); } .xray-sub { color: var(--text-2); font-size: 12.5px; font-family: var(--font-body); max-width: 56ch; margin-top: 4px; } .xray-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 26px; padding: 20px 24px 24px; } .xray-body > * { min-width: 0; } @media (max-width: 1100px) { .xray-body { grid-template-columns: minmax(0, 1fr); } } .xray-pane-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.18em; font-variant: small-caps; color: var(--accent-3); border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 12px; } .xray-pane-head .pane-note { font-family: var(--font-body); font-variant: normal; letter-spacing: 0; font-size: 11px; color: var(--text-3); text-transform: none; } .xray-warnings { margin: 0 24px 20px; background: linear-gradient(90deg, rgba(255,71,87,0.16) 0%, rgba(255,71,87,0.05) 100%); border: 1px solid rgba(255,71,87,0.35); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 12px; color: #ffb3ba; display: flex; gap: 10px; align-items: baseline; } .xray-warnings .warn-label { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--red); white-space: nowrap; } /* ── Donut (secondary visualisation) ─────────────────────────────── */ .kdonut-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; } .kdonut { width: 200px; height: 200px; } .kdonut path { transition: transform 0.25s ease; transform-origin: 100px 100px; cursor: pointer; } .kdonut path:hover { transform: scale(1.04); } .kdonut-centre-num { font-family: var(--font-mono); font-size: 32px; font-weight: 700; fill: var(--text-1); } .kdonut-centre-label { font-family: var(--font-body); font-size: 11.5px; fill: var(--text-2); } .kdonut-legend { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 260px; } .kdonut-legend-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12px; } .kdonut-legend-dot { width: 10px; height: 10px; border-radius: 50%; } .kdonut-legend-name { color: var(--text-2); font-family: var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kdonut-legend-pct { color: var(--text-1); font-weight: 600; } /* ── Tab bar (pill tabs, animated indicator) ─────────────────────── */ .ktabs { position: relative; display: inline-flex; gap: 4px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .ktabs::-webkit-scrollbar { display: none; } .ktab { position: relative; z-index: 1; border: none; background: transparent; color: var(--text-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 18px; border-radius: var(--radius-pill); cursor: pointer; transition: color 0.25s ease; white-space: nowrap; } .ktab:hover { color: var(--text-1); } .ktab.active { color: var(--bg-deep); font-weight: 700; } .ktab-indicator { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--accent-3) 0%, var(--accent-1) 100%); box-shadow: 0 0 14px var(--glow-soft); transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 0; } /* ── Buttons ──────────────────────────────────────────────────────── */ .kbtn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.06em; padding: 9px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-1); cursor: pointer; transition: border-color 0.25s, box-shadow 0.25s, transform 0.15s, background 0.25s; } .kbtn:hover { border-color: rgba(var(--accent-rgb), 0.45); box-shadow: 0 0 16px var(--glow-soft); } .kbtn:active { transform: scale(0.97); } .kbtn:disabled { opacity: 0.45; cursor: default; box-shadow: none; } .kbtn-primary { background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%); border-color: transparent; color: var(--bg-deep); font-weight: 700; } .kbtn-primary:hover { box-shadow: 0 0 22px var(--glow); filter: brightness(1.08); } .kbtn-ghost { background: transparent; } .kbtn-danger { border-color: rgba(255,71,87,0.4); color: var(--red); } .kbtn-danger:hover { border-color: var(--red); box-shadow: 0 0 16px rgba(255,71,87,0.25); } /* ── Form inputs ──────────────────────────────────────────────────── */ .kinput, input.kinput, textarea.kinput, select.kinput { width: 100%; font-family: var(--font-mono); font-size: 13px; color: var(--text-1); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; outline: none; transition: border-color 0.25s, box-shadow 0.25s; } .kinput::placeholder { color: var(--text-3); } .kinput:focus { border-color: rgba(var(--accent-rgb), 0.6); box-shadow: 0 0 0 3px var(--glow-soft), 0 0 18px var(--glow-faint); } .klabel { display: block; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; } .kfield { margin-bottom: 16px; min-width: 0; } /* ── Tables ───────────────────────────────────────────────────────── */ .ktable-wrap { overflow-x: auto; } .ktable { width: 100%; border-collapse: collapse; font-size: 12.5px; } .ktable th { text-align: left; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid rgba(var(--accent-rgb), 0.2); } .ktable td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-1); } .ktable tbody tr { transition: background 0.2s; } .ktable tbody tr:hover { background: var(--bg-hover); } .ktable .num { text-align: right; font-variant-numeric: tabular-nums; } /* ── Badges / pills ───────────────────────────────────────────────── */ .kbadge { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid rgba(var(--accent-rgb), 0.35); color: var(--accent-3); background: rgba(var(--accent-rgb), 0.08); } .kbadge.green { border-color: rgba(56,209,153,0.4); color: var(--green); background: rgba(56,209,153,0.08); } .kbadge.red { border-color: rgba(255,71,87,0.4); color: var(--red); background: rgba(255,71,87,0.08); } .kbadge.amber { border-color: rgba(255,179,71,0.4); color: var(--amber); background: rgba(255,179,71,0.08); } .kbadge.dim { border-color: var(--border); color: var(--text-3); background: transparent; } /* ── Toast ────────────────────────────────────────────────────────── */ .ktoast { position: fixed; bottom: 24px; right: 24px; z-index: 300; max-width: min(360px, calc(100vw - 48px)); background: var(--bg-elevated); border: 1px solid rgba(var(--accent-rgb), 0.4); border-radius: var(--radius-sm); box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 20px var(--glow-faint); padding: 13px 18px; font-size: 13px; color: var(--text-1); opacity: 0; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); pointer-events: none; } .ktoast.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .ktoast.green { border-color: rgba(56,209,153,0.5); } .ktoast.red { border-color: rgba(255,71,87,0.5); } /* ── Info orb (the "eye" button on cards) ─────────────────────────── */ .info-icon { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border: none; padding: 0; background: transparent; cursor: pointer; border-radius: 50%; font-size: 0; color: transparent; z-index: 5; transition: transform 0.2s ease; } .info-icon::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--glow-soft); opacity: 0.6; animation: korb-ring-spin 4s linear infinite; border-top-color: rgba(var(--accent-rgb), 0.55); pointer-events: none; } .info-icon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 62% 62%, #06060a 0%, #06060a 20%, transparent 27%), radial-gradient(circle at 35% 35%, var(--accent-3) 0%, var(--accent-1) 45%, var(--accent-2) 75%, #241206 100%); box-shadow: 0 0 10px var(--glow-soft); transition: box-shadow 0.2s ease; } .info-icon:hover { transform: scale(1.18); } .info-icon:hover::after { box-shadow: 0 0 16px var(--glow); } .info-icon:active { transform: scale(0.92); } @keyframes korb-ring-spin { to { transform: rotate(360deg); } } /* ── Info drawer (slide-in, right side) ───────────────────────────── */ #knox-info-overlay { position: fixed; inset: 0; background: rgba(5, 5, 9, 0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 200; } #knox-info-overlay.visible { opacity: 1; pointer-events: auto; } #knox-info-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--bg-card); border-left: 1px solid rgba(var(--accent-rgb), 0.25); box-shadow: -12px 0 48px rgba(0,0,0,0.6); transform: translateX(102%); transition: transform 0.38s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 201; display: flex; flex-direction: column; overflow: hidden; } #knox-info-drawer.open { transform: translateX(0); } #knox-info-drawer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--accent-1) 50%, transparent 100%); opacity: 0.7; } .info-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid var(--border); flex: 0 0 auto; } .info-head h2 { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-3); min-width: 0; } .info-close { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-2); font-size: 15px; line-height: 1; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .info-close:hover { border-color: rgba(var(--accent-rgb), 0.5); color: var(--text-1); } .info-body { flex: 1 1 auto; overflow-y: auto; padding: 20px 22px 32px; font-family: var(--font-body); font-size: 13.5px; color: var(--text-1); } .info-section { margin-bottom: 22px; } .info-section h3 { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-3); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .info-section p { margin-bottom: 10px; color: var(--text-2); line-height: 1.65; } .info-section p b, .info-section p strong { color: var(--text-1); } .info-intro p:first-child { color: var(--text-1); } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(56,209,153,0.7); animation: klive-pulse 2s ease-in-out infinite; } @keyframes klive-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } body.knox-drawer-open { position: fixed; width: 100%; overflow: hidden; } /* ── Jargon terms + bubble ────────────────────────────────────────── */ jargon { color: var(--accent-3); border-bottom: 1px dotted rgba(var(--accent-rgb), 0.5); cursor: help; } jargon:hover { color: var(--accent-1); } #knox-jargon-bubble { position: absolute; z-index: 260; max-width: min(320px, calc(100vw - 32px)); background: var(--bg-elevated); border: 1px solid rgba(var(--accent-rgb), 0.4); border-radius: var(--radius-sm); box-shadow: 0 10px 36px rgba(0,0,0,0.6); padding: 12px 32px 12px 14px; font-family: var(--font-body); font-size: 12.5px; line-height: 1.55; color: var(--text-1); } #knox-jargon-bubble .bubble-term { font-weight: 700; color: var(--accent-3); display: block; margin-bottom: 4px; text-transform: capitalize; } #knox-jargon-bubble .bubble-def { color: var(--text-2); } #knox-jargon-bubble .bubble-close { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border: none; background: transparent; color: var(--text-3); font-size: 13px; cursor: pointer; } #knox-jargon-bubble .bubble-close:hover { color: var(--text-1); } /* ── Misc utilities ───────────────────────────────────────────────── */ .visually-hidden { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .text-green { color: var(--green); } .text-red { color: var(--red); } .text-dim { color: var(--text-3); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }