/* ========================================================================== KALM COMPANY — THEME -------------------------------------------------------------------------- Derived from the mark: a brushed-silver K with a PCB trace through its counter, set on a frosted glass tile, rim-lit electric azure, floating over a near-black navy field with diagonal etching behind it. Two governing rules: 1. LIGHT COMES FROM EDGES, NOT FROM FILLS. 2. SURFACES ARE PANES, NOT PAPER — every plate is glass with a lit field behind it, so the field must always be there to show through. Dark is the native theme. Light is a full, deliberate second theme. ========================================================================== */ /* ========================================================================== 1. TOKENS — dark (native) ========================================================================== */ :root { color-scheme: dark; /* --- Brand constants: sampled from the mark, identical in both themes --- */ --k-void: #04070E; /* the field behind the tile */ --k-navy: #122E60; /* the K's counter block */ --k-azure: #2B7BFC; /* the rim light */ --k-ice: #9AD0FD; /* the hot spot inside the glow */ --k-silver: #A4A8B3; /* the brushed face of the mark */ --k-silver-hi: #D9DEE8; /* where the brush catches */ --k-silver-lo: #6E7686; /* where it falls away */ /* --- Solid ramp. The glass tokens below are what components actually use; these stay as the opaque equivalents, for the no-blur fallback and for anywhere a true flat colour is required. --- */ --k-bg: #05090F; --k-bg-rgb: 5,9,15; --k-plate-1: #0A1120; --k-plate-2: #101A2D; --k-plate-3: #17233A; --k-plate-sunk: #03060C; /* --- GLASS ----------------------------------------------------------- Alpha is tuned so body text clears 12:1 over the brightest part of the atmosphere. Do not push these below .55. */ --k-glass-1: rgba(13, 22, 41, 0.64); /* plate */ --k-glass-2: rgba(20, 32, 56, 0.70); /* raised */ --k-glass-sunk: rgba(2, 6, 14, 0.55); /* wells, inputs */ --k-glass-btn: rgba(23, 36, 61, 0.58); /* controls */ --k-glass-prime: rgba(16, 37, 82, 0.74); /* primary control */ --k-glass-blur: blur(20px) saturate(155%); --k-glass-blur-sm: blur(10px) saturate(140%); /* The specular: light raking across the pane from the upper left. */ --k-glass-sheen: linear-gradient( 152deg, rgba(255, 255, 255, 0.115) 0%, rgba(255, 255, 255, 0.038) 26%, rgba(255, 255, 255, 0.000) 54% ); /* --- Edges. Glass catches light on top and goes dark underneath. --- */ --k-edge: rgba(180, 206, 255, 0.15); --k-edge-strong: rgba(180, 206, 255, 0.28); --k-bevel-hi: rgba(255, 255, 255, 0.18); --k-bevel-side: rgba(255, 255, 255, 0.05); --k-bevel-lo: rgba(0, 0, 0, 0.40); --k-trace: rgba(180, 199, 232, 0.28); /* --- Ink --- */ --k-ink: #E8ECF4; --k-ink-2: #BAC5D9; --k-ink-muted: #8E9BB2; --k-ink-faint: #7A879E; --k-ink-invert: #060B14; /* --- Accent: the rim light. Two values, and the split matters. --k-accent lights edges, dots and glows. --k-accent-text is the same hue lifted until it clears AA as TYPE on translucent glass, which sits lighter than the raw ground. Azure at #2B7BFC only reaches 4.4:1 on a pane. --- */ --k-accent: #2B7BFC; --k-accent-rgb: 43, 123, 252; --k-accent-text: #6BA4FF; /* 6.8:1 on a plate */ --k-accent-soft: #6BA4FF; --k-accent-deep: #0E1B36; --k-accent-ink: #DFEAFF; /* label on primary glass — 11.8:1 */ /* --- Practice lines. Three stay inside the mark's own family; violet is the single deliberate departure, for games. Each carries its own type-safe value for the same reason. --- */ --k-platform: #2B7BFC; --k-platform-rgb: 43, 123, 252; --k-platform-text: #6BA4FF; --k-consulting: #AEBACF; --k-consulting-rgb: 174, 186, 207; --k-consulting-text: #AEBACF; --k-custom: #3FC9E8; --k-custom-rgb: 63, 201, 232; --k-custom-text: #3FC9E8; --k-games: #7C5CFF; --k-games-rgb: 124, 92, 255; --k-games-text: #A78BFF; /* --- Semantic. Held apart from accent: state is not brand. --- */ --k-ok: #3DD68C; --k-ok-rgb: 61, 214, 140; --k-warn: #F2B33D; --k-warn-rgb: 242, 179, 61; --k-crit: #FF6B6B; --k-crit-rgb: 255, 107, 107; --k-info: #2B7BFC; --k-info-rgb: 43, 123, 252; --k-focus: #9AD0FD; /* The K mark on a dark ground: its navy stem sits close to the page colour, so a hairline of ice outlines it and the K reads whole. None on light. */ --k-mark-rim: drop-shadow(0 0 .6px rgba(154, 208, 253, .7)); /* --- The elevation model: four inset lines describe the pane's thickness, then the drop describes how far it floats. --- */ --k-bevel: inset 0 1px 0 var(--k-bevel-hi), inset 1px 0 0 var(--k-bevel-side), inset -1px 0 0 var(--k-bevel-side), inset 0 -1px 0 var(--k-bevel-lo); --k-lift-1: 0 1px 2px rgba(0,0,0,.45), 0 12px 32px -20px rgba(0,0,0,.95); --k-lift-2: 0 2px 6px rgba(0,0,0,.5), 0 28px 60px -28px rgba(0,0,0,1); /* Rim light: a hot line on the edge, a close bloom, and a far halo. */ --k-rimlight: 0 0 0 1px rgba(var(--k-accent-rgb), .38), 0 0 30px -8px rgba(var(--k-accent-rgb), .60), 0 0 90px -34px rgba(var(--k-accent-rgb), .85); --k-rimlight-hot: 0 0 0 1px rgba(var(--k-accent-rgb), .68), 0 0 38px -6px rgba(var(--k-accent-rgb), .78), 0 0 110px -30px rgba(var(--k-accent-rgb), 1); /* --- The field the glass sits over. Fixed, so panes slide across it. --- */ --k-atmosphere: radial-gradient(88% 55% at 74% -8%, rgba(43,123,252,.22), transparent 62%), radial-gradient(62% 46% at 4% 12%, rgba(18,46,96,.50), transparent 64%), radial-gradient(70% 50% at 52% 104%, rgba(43,123,252,.10), transparent 58%), repeating-linear-gradient(-38deg, transparent 0 2px, rgba(154,208,253,.05) 2px 3px, transparent 3px 64px); } /* ========================================================================== 2. TOKENS — light. Same architecture, re-pitched: frosted white over a cool paper field. Declared twice so an OS preference and an explicit choice both win. ========================================================================== */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --k-bg: #EDF1F8; --k-bg-rgb: 237,241,248; --k-plate-1: #FFFFFF; --k-plate-2: #FAFBFD; --k-plate-3: #E9EEF6; --k-plate-sunk: #E3E9F3; --k-glass-1: rgba(255, 255, 255, 0.68); --k-glass-2: rgba(255, 255, 255, 0.82); --k-glass-sunk: rgba(222, 230, 242, 0.62); --k-glass-btn: rgba(255, 255, 255, 0.72); --k-glass-prime: rgba(14, 42, 94, 0.94); --k-glass-sheen: linear-gradient( 152deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.30) 28%, rgba(255, 255, 255, 0.00) 58% ); --k-edge: rgba(17, 38, 76, 0.14); --k-edge-strong: rgba(17, 38, 76, 0.28); --k-bevel-hi: rgba(255, 255, 255, 0.95); --k-bevel-side: rgba(255, 255, 255, 0.55); --k-bevel-lo: rgba(17, 38, 76, 0.09); --k-trace: rgba(17, 38, 76, 0.22); --k-ink: #0B1424; --k-ink-2: #33415A; --k-ink-muted: #56647C; --k-ink-faint: #58657B; --k-ink-invert: #FFFFFF; --k-mark-rim: none; --k-accent: #1558D6; --k-accent-rgb: 21, 88, 214; --k-accent-text: #1558D6; --k-accent-soft: #3E7BEE; --k-accent-deep: #0E2A5E; --k-accent-ink: #FFFFFF; --k-platform: #1558D6; --k-platform-rgb: 21, 88, 214; --k-platform-text: #1558D6; --k-consulting: #55637C; --k-consulting-rgb: 85, 99, 124; --k-consulting-text: #55637C; --k-custom: #0C6E86; --k-custom-rgb: 12, 110, 134; --k-custom-text: #0C6E86; --k-games: #5B3FD6; --k-games-rgb: 91, 63, 214; --k-games-text: #5B3FD6; --k-ok: #0E734D; --k-ok-rgb: 14, 115, 77; --k-warn: #8A5D00; --k-warn-rgb: 138, 93, 0; --k-crit: #C6362F; --k-crit-rgb: 198, 54, 47; --k-info: #1558D6; --k-info-rgb: 21, 88, 214; --k-focus: #1558D6; --k-lift-1: 0 1px 2px rgba(17,38,76,.07), 0 14px 30px -22px rgba(17,38,76,.40); --k-lift-2: 0 2px 8px rgba(17,38,76,.09), 0 30px 56px -32px rgba(17,38,76,.50); --k-rimlight: 0 0 0 1px rgba(var(--k-accent-rgb), .42), 0 0 26px -10px rgba(var(--k-accent-rgb), .50), 0 0 70px -36px rgba(var(--k-accent-rgb), .60); --k-rimlight-hot: 0 0 0 1px rgba(var(--k-accent-rgb), .72), 0 0 32px -8px rgba(var(--k-accent-rgb), .60), 0 0 86px -32px rgba(var(--k-accent-rgb), .70); --k-atmosphere: radial-gradient(88% 55% at 76% -10%, rgba(43,123,252,.16), transparent 62%), radial-gradient(60% 44% at 2% 8%, rgba(120,150,205,.22), transparent 64%), radial-gradient(70% 50% at 50% 106%, rgba(43,123,252,.07), transparent 58%), repeating-linear-gradient(-38deg, transparent 0 2px, rgba(17,38,76,.035) 2px 3px, transparent 3px 64px); } } :root[data-theme="light"] { color-scheme: light; --k-bg: #EDF1F8; --k-bg-rgb: 237,241,248; --k-plate-1: #FFFFFF; --k-plate-2: #FAFBFD; --k-plate-3: #E9EEF6; --k-plate-sunk: #E3E9F3; --k-glass-1: rgba(255, 255, 255, 0.68); --k-glass-2: rgba(255, 255, 255, 0.82); --k-glass-sunk: rgba(222, 230, 242, 0.62); --k-glass-btn: rgba(255, 255, 255, 0.72); --k-glass-prime: rgba(14, 42, 94, 0.94); --k-glass-sheen: linear-gradient( 152deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.30) 28%, rgba(255, 255, 255, 0.00) 58% ); --k-edge: rgba(17, 38, 76, 0.14); --k-edge-strong: rgba(17, 38, 76, 0.28); --k-bevel-hi: rgba(255, 255, 255, 0.95); --k-bevel-side: rgba(255, 255, 255, 0.55); --k-bevel-lo: rgba(17, 38, 76, 0.09); --k-trace: rgba(17, 38, 76, 0.22); --k-ink: #0B1424; --k-ink-2: #33415A; --k-ink-muted: #56647C; --k-ink-faint: #58657B; --k-ink-invert: #FFFFFF; --k-mark-rim: none; --k-accent: #1558D6; --k-accent-rgb: 21, 88, 214; --k-accent-text: #1558D6; --k-accent-soft: #3E7BEE; --k-accent-deep: #0E2A5E; --k-accent-ink: #FFFFFF; --k-platform: #1558D6; --k-platform-rgb: 21, 88, 214; --k-platform-text: #1558D6; --k-consulting: #55637C; --k-consulting-rgb: 85, 99, 124; --k-consulting-text: #55637C; --k-custom: #0C6E86; --k-custom-rgb: 12, 110, 134; --k-custom-text: #0C6E86; --k-games: #5B3FD6; --k-games-rgb: 91, 63, 214; --k-games-text: #5B3FD6; --k-ok: #0E734D; --k-ok-rgb: 14, 115, 77; --k-warn: #8A5D00; --k-warn-rgb: 138, 93, 0; --k-crit: #C6362F; --k-crit-rgb: 198, 54, 47; --k-info: #1558D6; --k-info-rgb: 21, 88, 214; --k-focus: #1558D6; --k-lift-1: 0 1px 2px rgba(17,38,76,.07), 0 14px 30px -22px rgba(17,38,76,.40); --k-lift-2: 0 2px 8px rgba(17,38,76,.09), 0 30px 56px -32px rgba(17,38,76,.50); --k-rimlight: 0 0 0 1px rgba(var(--k-accent-rgb), .42), 0 0 26px -10px rgba(var(--k-accent-rgb), .50), 0 0 70px -36px rgba(var(--k-accent-rgb), .60); --k-rimlight-hot: 0 0 0 1px rgba(var(--k-accent-rgb), .72), 0 0 32px -8px rgba(var(--k-accent-rgb), .60), 0 0 86px -32px rgba(var(--k-accent-rgb), .70); --k-atmosphere: radial-gradient(88% 55% at 76% -10%, rgba(43,123,252,.16), transparent 62%), radial-gradient(60% 44% at 2% 8%, rgba(120,150,205,.22), transparent 64%), radial-gradient(70% 50% at 50% 106%, rgba(43,123,252,.07), transparent 58%), repeating-linear-gradient(-38deg, transparent 0 2px, rgba(17,38,76,.035) 2px 3px, transparent 3px 64px); } /* ========================================================================== 3. NO BACKDROP-FILTER — one override, and every component falls back to the opaque ramp. Nothing else needs to know. ========================================================================== */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --k-glass-1: #0D1629; --k-glass-2: #141F35; --k-glass-sunk: #04080F; --k-glass-btn: #172440; --k-glass-prime: #102452; } :root[data-theme="light"] { --k-glass-1: #FFFFFF; --k-glass-2: #FFFFFF; --k-glass-sunk: #E3E9F3; --k-glass-btn: #FFFFFF; --k-glass-prime: #0E2A5E; } } @media (prefers-color-scheme: light) { @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root:not([data-theme="dark"]) { --k-glass-1: #FFFFFF; --k-glass-2: #FFFFFF; --k-glass-sunk: #E3E9F3; --k-glass-btn: #FFFFFF; --k-glass-prime: #0E2A5E; } } } /* ========================================================================== 4. TOKENS — theme-independent: type, space, radius, motion ========================================================================== */ :root { --k-font-display: "Outfit", "Century Gothic", "Avenir Next", system-ui, sans-serif; --k-font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --k-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --k-text-xs: 0.75rem; --k-text-sm: 0.8125rem; --k-text-base: 0.9375rem; --k-text-lg: 1.0625rem; --k-text-xl: 1.25rem; --k-text-2xl: 1.5rem; --k-text-3xl: 1.875rem; --k-display-m: clamp(1.9rem, 1.3rem + 1.7vw, 2.6rem); --k-display-l: clamp(2.4rem, 1.5rem + 2.9vw, 3.75rem); --k-track-tight: -0.025em; --k-track-eyebrow: 0.18em; --k-space-1: 4px; --k-space-2: 8px; --k-space-3: 12px; --k-space-4: 16px; --k-space-5: 24px; --k-space-6: 32px; --k-space-7: 48px; --k-space-8: 64px; --k-space-9: 96px; /* The mark's tile sets the radius ratio: generous, never a pill. */ --k-radius-xs: 4px; --k-radius-sm: 8px; --k-radius-md: 12px; --k-radius-lg: 18px; --k-radius-xl: 26px; --k-dur-fast: 140ms; --k-dur-base: 220ms; --k-dur-slow: 380ms; --k-ease: cubic-bezier(.2, .7, .2, 1); } @media (prefers-reduced-motion: reduce) { :root { --k-dur-fast: 1ms; --k-dur-base: 1ms; --k-dur-slow: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } } /* ========================================================================== 5. BASE — the lit field. Fixed, so the panes slide across it. ========================================================================== */ body { margin: 0; background-color: var(--k-bg); background-image: var(--k-atmosphere); background-attachment: fixed; background-repeat: no-repeat; color: var(--k-ink); font-family: var(--k-font-sans); font-size: var(--k-text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; } :where(h1, h2, h3, .k-display) { font-family: var(--k-font-display); letter-spacing: var(--k-track-tight); text-wrap: balance; margin: 0; } :where(a) { color: var(--k-accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--k-focus); outline-offset: 2px; border-radius: var(--k-radius-xs); } /* ========================================================================== 6. THE TRACE — the mark's circuit grammar, made structural ========================================================================== */ /* A section rule: a node terminal, then a hairline that fades out. */ .k-rule { display: flex; align-items: center; gap: var(--k-space-3); margin: 0; border: 0; } .k-rule::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--k-accent); box-shadow: 0 0 0 3px rgba(var(--k-accent-rgb), .16), 0 0 12px rgba(var(--k-accent-rgb), .7); } .k-rule::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, var(--k-edge-strong), transparent); } /* A node bullet: the same grammar, running down a list. */ .k-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--k-space-3); } .k-list > li { position: relative; padding-left: 22px; color: var(--k-ink-2); } .k-list > li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--k-accent); background: var(--k-bg); box-shadow: 0 0 10px -1px rgba(var(--k-accent-rgb), .55); } .k-list > li::after { content: ""; position: absolute; left: 3.5px; top: calc(0.55em + 9px); bottom: -0.6em; width: 1px; background: var(--k-trace); } .k-list > li:last-child::after { display: none; } /* A registration tick: two hairlines in a corner, as on a machined part. */ .k-tick { position: relative; } .k-tick::before, .k-tick::after { content: ""; position: absolute; background: rgba(var(--k-accent-rgb), .55); pointer-events: none; } .k-tick::before { top: 14px; left: 14px; width: 12px; height: 1px; } .k-tick::after { top: 14px; left: 14px; width: 1px; height: 12px; } /* ========================================================================== 7. PANES — the elevation model Every plate is three layers: the specular sheen, the tinted glass, and the blurred field showing through it. ========================================================================== */ .k-plate { background-image: var(--k-glass-sheen); background-color: var(--k-glass-1); -webkit-backdrop-filter: var(--k-glass-blur); backdrop-filter: var(--k-glass-blur); border: 1px solid var(--k-edge); border-radius: var(--k-radius-lg); box-shadow: var(--k-bevel), var(--k-lift-1); } .k-plate--raised { background-color: var(--k-glass-2); box-shadow: var(--k-bevel), var(--k-lift-2); } .k-plate--sunk { background-image: none; background-color: var(--k-glass-sunk); -webkit-backdrop-filter: var(--k-glass-blur-sm); backdrop-filter: var(--k-glass-blur-sm); box-shadow: inset 0 1px 4px var(--k-bevel-lo), inset 0 -1px 0 var(--k-bevel-side); } .k-plate--lit { border-color: rgba(var(--k-accent-rgb), .30); box-shadow: var(--k-bevel), var(--k-lift-1), var(--k-rimlight); } .k-plate--interactive { transition: box-shadow var(--k-dur-base) var(--k-ease), border-color var(--k-dur-base) var(--k-ease), background-color var(--k-dur-base) var(--k-ease), transform var(--k-dur-base) var(--k-ease); } .k-plate--interactive:hover { border-color: rgba(var(--k-accent-rgb), .38); background-color: var(--k-glass-2); box-shadow: var(--k-bevel), var(--k-lift-2), var(--k-rimlight); transform: translateY(-1px); } /* The hero pane: the logo's own tile, at full strength. */ .k-pane-hero { background-image: linear-gradient(152deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 60%), linear-gradient(150deg, rgba(64,84,120,.55) 0%, rgba(20,32,58,.45) 48%, rgba(8,14,30,.55) 100%); -webkit-backdrop-filter: var(--k-glass-blur); backdrop-filter: var(--k-glass-blur); border: 1px solid var(--k-edge-strong); border-radius: var(--k-radius-xl); box-shadow: var(--k-bevel), var(--k-rimlight-hot); } /* ========================================================================== 8. TYPE ROLES ========================================================================== */ .k-eyebrow { font-family: var(--k-font-mono); font-size: var(--k-text-xs); font-weight: 500; letter-spacing: var(--k-track-eyebrow); text-transform: uppercase; color: var(--k-ink-muted); margin: 0; } .k-lede { font-size: var(--k-text-lg); line-height: 1.6; color: var(--k-ink-2); max-width: 62ch; } .k-data { font-family: var(--k-font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; } /* ========================================================================== 9. CONTROLS Primary is a navy pane wearing the rim light — not an azure fill. The mark treats azure as a light source; so does the button. ========================================================================== */ .k-btn { display: inline-flex; align-items: center; gap: var(--k-space-2); padding: 10px 18px; border-radius: var(--k-radius-sm); border: 1px solid var(--k-edge-strong); background-image: var(--k-glass-sheen); background-color: var(--k-glass-btn); -webkit-backdrop-filter: var(--k-glass-blur-sm); backdrop-filter: var(--k-glass-blur-sm); color: var(--k-ink); font-family: var(--k-font-sans); font-size: var(--k-text-base); font-weight: 500; line-height: 1.2; cursor: pointer; box-shadow: var(--k-bevel); transition: box-shadow var(--k-dur-fast) var(--k-ease), border-color var(--k-dur-fast) var(--k-ease), background-color var(--k-dur-fast) var(--k-ease); } .k-btn:hover { border-color: var(--k-accent); box-shadow: var(--k-bevel), var(--k-rimlight); } .k-btn:active { transform: translateY(1px); } .k-btn--primary { background-color: var(--k-glass-prime); color: var(--k-accent-ink); border-color: rgba(var(--k-accent-rgb), .55); box-shadow: var(--k-bevel), var(--k-rimlight); } .k-btn--primary:hover { box-shadow: var(--k-bevel), var(--k-rimlight-hot); } .k-btn--ghost { background-image: none; background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; color: var(--k-ink-2); box-shadow: none; } .k-btn--ghost:hover { background-image: var(--k-glass-sheen); background-color: var(--k-glass-btn); -webkit-backdrop-filter: var(--k-glass-blur-sm); backdrop-filter: var(--k-glass-blur-sm); border-color: var(--k-edge); box-shadow: var(--k-bevel); color: var(--k-ink); } .k-btn--danger { border-color: rgba(var(--k-crit-rgb), .5); color: var(--k-crit); } .k-btn--danger:hover { border-color: var(--k-crit); box-shadow: var(--k-bevel), 0 0 0 1px rgba(var(--k-crit-rgb), .5), 0 0 26px -8px rgba(var(--k-crit-rgb), .65); } .k-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; } /* --- Fields: a recess cut into the pane --- */ .k-field { width: 100%; box-sizing: border-box; padding: 10px 14px; background-color: var(--k-glass-sunk); -webkit-backdrop-filter: var(--k-glass-blur-sm); backdrop-filter: var(--k-glass-blur-sm); border: 1px solid var(--k-edge); border-radius: var(--k-radius-sm); color: var(--k-ink); font-family: var(--k-font-sans); font-size: var(--k-text-base); box-shadow: inset 0 1px 4px var(--k-bevel-lo), inset 0 -1px 0 var(--k-bevel-side); transition: border-color var(--k-dur-fast) var(--k-ease), box-shadow var(--k-dur-fast) var(--k-ease); } .k-field::placeholder { color: var(--k-ink-faint); } .k-field:focus { outline: none; border-color: var(--k-accent); box-shadow: inset 0 1px 4px var(--k-bevel-lo), 0 0 0 3px rgba(var(--k-accent-rgb), .22), 0 0 26px -10px rgba(var(--k-accent-rgb), .7); } .k-label { display: block; font-size: var(--k-text-sm); font-weight: 500; color: var(--k-ink-2); margin-bottom: var(--k-space-2); } /* ========================================================================== 10. STATUS — state reads as form, not only as colour ========================================================================== */ .k-pill { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 8px; border-radius: var(--k-radius-xs); border: 1px solid rgba(var(--k-accent-rgb), .35); background: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,0)), rgba(var(--k-accent-rgb), .12); color: var(--k-accent-text); font-family: var(--k-font-mono); font-size: var(--k-text-xs); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.10); } .k-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; } .k-pill--ok { --k-accent-rgb: var(--k-ok-rgb); color: var(--k-ok); } .k-pill--warn { --k-accent-rgb: var(--k-warn-rgb); color: var(--k-warn); } .k-pill--crit { --k-accent-rgb: var(--k-crit-rgb); color: var(--k-crit); } .k-pill--idle { border-color: var(--k-edge-strong); background: transparent; color: var(--k-ink-muted); box-shadow: none; } /* ========================================================================== 11. TABLE — enterprise data: tabular figures, hairlines, no zebra stripes ========================================================================== */ .k-table-wrap { overflow-x: auto; border-radius: var(--k-radius-md); } .k-table { width: 100%; border-collapse: collapse; font-size: var(--k-text-sm); min-width: 540px; } .k-table th { text-align: left; padding: 10px 16px; font-family: var(--k-font-mono); font-size: var(--k-text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-ink-muted); border-bottom: 1px solid var(--k-edge-strong); white-space: nowrap; } .k-table td { padding: 12px 16px; border-bottom: 1px solid var(--k-edge); color: var(--k-ink-2); vertical-align: middle; } .k-table tr:last-child td { border-bottom: 0; } .k-table tbody tr { transition: background-color var(--k-dur-fast) var(--k-ease); } .k-table tbody tr:hover { background-color: rgba(var(--k-accent-rgb), .06); } .k-table .k-num { font-family: var(--k-font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--k-ink); } /* ========================================================================== 12. PRACTICE LINES — one scoped accent swap; everything else inherits ========================================================================== */ .k-line-platform { --k-accent: var(--k-platform); --k-accent-rgb: var(--k-platform-rgb); --k-accent-text: var(--k-platform-text); } .k-line-consulting { --k-accent: var(--k-consulting); --k-accent-rgb: var(--k-consulting-rgb); --k-accent-text: var(--k-consulting-text); } .k-line-custom { --k-accent: var(--k-custom); --k-accent-rgb: var(--k-custom-rgb); --k-accent-text: var(--k-custom-text); } .k-line-games { --k-accent: var(--k-games); --k-accent-rgb: var(--k-games-rgb); --k-accent-text: var(--k-games-text); } /* ========================================================================== 13. LOCAL LIGHT — a hotspot behind a pane, for hero zones only ========================================================================== */ .k-field-etch { position: relative; isolation: isolate; /* the glow below bleeds 10% past each side; on a full-width element that bleed becomes a horizontal scrollbar. clip (not hidden) contains it without cutting off position:sticky inside. The gradients reach full transparency at 68%, so the clipped tail is already invisible. */ overflow-x: clip; } .k-field-etch::before { content: ""; position: absolute; inset: -20% -10%; z-index: -1; background: radial-gradient(52% 60% at 22% 40%, rgba(var(--k-accent-rgb), .20), transparent 68%), radial-gradient(40% 50% at 78% 20%, rgba(154,208,253,.10), transparent 70%); pointer-events: none; }