/* ============================================================================ OKAMI · DESIGN SYSTEM · okami.css · v0.3.0 ---------------------------------------------------------------------------- Portable stylesheet. Drop into any project to inherit the OKAMI look: dark terminal/cyber surface, geometric display type, contained neon glow. USAGE 1. Load the fonts (Google Fonts) in your : 2. Link this file: 3. Add `class="ok"` to for the canvas + atmosphere (optional). 4. Compose with the .ok-* component classes below. TOKENS are the contract. Everything reads from CSS custom properties, so a project can re-theme by overriding --ok-accent / --ok-glow and nothing else. ============================================================================ */ @import url("fonts/okami-fonts.css"); :root{ /* ---- surfaces / canvas (cool near-black, low saturation) ---------------- */ --ok-bg-0: #060609; /* base canvas */ --ok-bg-1: #0b0b12; /* surface (cards) */ --ok-bg-2: #11111b; /* raised (hover) */ --ok-bg-3: #1a1a26; /* high (controls) */ --ok-line: #1f1f2e; /* hairline border */ --ok-line-soft: #15151f; /* softer divider */ --ok-grid: rgba(255,255,255,0.04); /* atmosphere grid */ /* ---- text --------------------------------------------------------------- */ --ok-fg: #f4f4f8; /* primary text */ --ok-fg-soft: #b9bac8; /* secondary / body */ --ok-fg-mute: #6c6d80; /* captions / labels */ --ok-fg-dim: #3d3e50; /* disabled / faint */ /* ---- brand accents — one OKLCH envelope, hue is the only big variable ---- */ --ok-orange: oklch(72% 0.19 45); /* heat — primary CTA */ --ok-magenta: oklch(70% 0.27 340); /* highlight — secondary */ --ok-cyan: oklch(82% 0.14 200); /* info — data / links */ /* ---- semantic ----------------------------------------------------------- */ --ok-success: oklch(78% 0.16 150); --ok-warning: oklch(82% 0.16 85); --ok-danger: oklch(65% 0.22 25); --ok-info: var(--ok-cyan); /* ---- themeable hooks (override these per-project) ------------------------ */ --ok-accent: var(--ok-orange); /* primary accent */ --ok-accent-2: var(--ok-magenta); /* paired accent */ --ok-glow: 0.55; /* 0 = flat … 1 = full neon */ --ok-glow-px: calc(24px * var(--ok-glow)); /* ---- type --------------------------------------------------------------- */ --ok-display: "Space Grotesk", system-ui, sans-serif; /* headings, UI */ --ok-mono: "JetBrains Mono", ui-monospace, monospace; /* labels, code */ /* ---- spacing scale (4px base) ------------------------------------------- */ --ok-s-1: 4px; --ok-s-2: 8px; --ok-s-3: 12px; --ok-s-4: 16px; --ok-s-5: 20px; --ok-s-6: 24px; --ok-s-7: 32px; --ok-s-8: 40px; --ok-s-9: 56px; --ok-s-10: 72px; --ok-s-11: 96px; --ok-s-12: 128px; /* ---- radii — sharp by default; soft only at the small scale ------------- */ --ok-r-0: 0; --ok-r-1: 2px; --ok-r-2: 4px; --ok-r-3: 8px; --ok-r-pill: 999px; /* ---- motion ------------------------------------------------------------- */ --ok-ease: cubic-bezier(.2,.8,.2,1); --ok-fast: .15s; --ok-mid: .22s; --ok-slow: .3s; } /* ============================================================================ RESET ============================================================================ */ *{ box-sizing: border-box; } .ok, .ok *{ } html{ scroll-behavior: smooth; } /* ============================================================================ CANVAS + ATMOSPHERE (opt-in via ) The grid + scanline overlays are what make a flat page feel "OKAMI". ============================================================================ */ body.ok{ margin: 0; background: radial-gradient(900px 500px at 90% 0%, color-mix(in oklch, var(--ok-accent-2) calc(10% * var(--ok-glow)), transparent), transparent 65%), radial-gradient(700px 400px at -5% 30%, color-mix(in oklch, var(--ok-cyan) calc(8% * var(--ok-glow)), transparent), transparent 65%), radial-gradient(600px 400px at 50% 80%, color-mix(in oklch, var(--ok-accent) calc(5% * var(--ok-glow)), transparent), transparent 70%), var(--ok-bg-0); background-attachment: fixed; color: var(--ok-fg); font-family: var(--ok-display); -webkit-font-smoothing: antialiased; line-height: 1.5; min-height: 100vh; overflow-x: hidden; } body.ok::before{ /* blueprint grid, masked to a soft vignette */ content:""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: linear-gradient(var(--ok-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ok-grid) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 85%); opacity: calc(0.6 + var(--ok-glow) * 0.4); } body.ok::after{ /* CRT scanline */ content:""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,0.012) 2px 3px); mix-blend-mode: overlay; opacity: var(--ok-glow); } body.ok > *{ position: relative; z-index: 2; } .ok-wrap{ max-width: 1280px; margin: 0 auto; padding: 0 var(--ok-s-7); } a{ color: inherit; text-decoration: none; } button{ font: inherit; cursor: pointer; } /* ============================================================================ TYPOGRAPHY Space Grotesk for anything that's "voice"; JetBrains Mono for anything that's "machine" (labels, metadata, code, numbers). Tight tracking on display sizes. ============================================================================ */ .ok-display{ font-family: var(--ok-display); } .ok-mono{ font-family: var(--ok-mono); } .ok-t-display{ font-family: var(--ok-display); font-weight: 500; font-size: clamp(56px, 8vw, 112px); line-height: .92; letter-spacing: -.045em; } .ok-t-h1{ font-family: var(--ok-display); font-weight: 500; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -.035em; } .ok-t-h2{ font-family: var(--ok-display); font-weight: 500; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -.03em; } .ok-t-h3{ font-family: var(--ok-display); font-weight: 500; font-size: 24px; line-height: 1.15; letter-spacing: -.01em; } .ok-t-body{ font-family: var(--ok-display); font-weight: 400; font-size: 17px; line-height: 1.6; color: var(--ok-fg-soft); } .ok-t-small{ font-family: var(--ok-display); font-weight: 400; font-size: 13px; line-height: 1.55; color: var(--ok-fg-mute); } .ok-t-mono{ font-family: var(--ok-mono); font-size: 13px; letter-spacing: .04em; color: var(--ok-cyan); } .ok-t-caps{ font-family: var(--ok-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ok-fg-mute); } /* eyebrow — the mono kicker used above headings, with a leading rule */ .ok-eyebrow{ font-family: var(--ok-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ok-accent); display: inline-flex; align-items: center; gap: 12px; } .ok-eyebrow::before{ content:""; width: 24px; height: 1px; background: currentColor; } /* color helpers */ .ok-accent{ color: var(--ok-accent); } .ok-magenta{ color: var(--ok-magenta); } .ok-cyan{ color: var(--ok-cyan); } .ok-mute{ color: var(--ok-fg-mute); } /* ============================================================================ SECTION HEADER — §NN / label + big title + optional right note ============================================================================ */ .ok-sec-hd{ display: flex; align-items: baseline; justify-content: space-between; gap: 40px; margin-bottom: var(--ok-s-9); position: relative; } .ok-sec-hd .ok-left{ max-width: 720px; } .ok-sec-num{ font-family: var(--ok-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ok-fg-mute); display: inline-flex; align-items: center; gap: 12px; } .ok-sec-num::before{ content:""; width: 24px; height: 1px; background: var(--ok-accent); } .ok-sec-num b{ color: var(--ok-accent); font-weight: 500; background: linear-gradient(90deg, var(--ok-accent), color-mix(in oklch, var(--ok-accent) 50%, var(--ok-magenta))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ok-sec-hd h2{ font-family: var(--ok-display); font-weight: 500; font-size: clamp(32px, 4vw, 56px); letter-spacing: -.03em; line-height: 1.05; margin: 18px 0 0; } .ok-sec-hd h2 em{ color: var(--ok-accent); font-style: normal; } .ok-sec-hd .ok-right{ max-width: 360px; color: var(--ok-fg-soft); font-size: 15px; line-height: 1.6; } .ok-sec-hd::after{ content:""; position: absolute; left: 0; bottom: -16px; height: 1px; width: 80px; background: linear-gradient(90deg, var(--ok-accent), color-mix(in oklch, var(--ok-magenta) 60%, transparent), transparent); opacity: .7; } /* ============================================================================ BUTTONS Square corners. Outline by default; hover floods the --c colour and lights the matching glow. Set tone with .magenta / .cyan / .danger, or override --c. ============================================================================ */ .ok-btn{ --c: var(--ok-accent); font-family: var(--ok-mono); font-size: 12px; letter-spacing: .08em; font-weight: 500; padding: 12px 22px; border: 1px solid var(--c); background: transparent; color: var(--ok-fg); text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; position: relative; white-space: nowrap; transition: all var(--ok-fast); border-radius: var(--ok-r-0); } .ok-btn:hover{ background: var(--c); color: var(--ok-bg-0); font-weight: 600; box-shadow: 0 0 var(--ok-glow-px) -4px color-mix(in oklch, var(--c) 80%, transparent); } .ok-btn.solid{ background: var(--c); color: var(--ok-bg-0); font-weight: 600; } .ok-btn.solid:hover{ box-shadow: 0 0 calc(var(--ok-glow-px) * 1.4) -2px color-mix(in oklch, var(--c) 90%, transparent); } .ok-btn.ghost{ border-color: var(--ok-line); color: var(--ok-fg-soft); } .ok-btn.ghost:hover{ background: transparent; border-color: var(--ok-fg-soft); color: var(--ok-fg); box-shadow: none; font-weight: 500; } .ok-btn.magenta{ --c: var(--ok-magenta); } .ok-btn.cyan{ --c: var(--ok-cyan); } .ok-btn.danger{ --c: var(--ok-danger); } .ok-btn.sm{ padding: 8px 14px; font-size: 11px; } .ok-btn.lg{ padding: 16px 30px; font-size: 13px; } /* ============================================================================ BADGES / TAGS / PILLS — always mono uppercase ============================================================================ */ .ok-badge{ display: inline-flex; align-items: center; gap: 6px; font-family: var(--ok-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--ok-line); background: var(--ok-bg-1); color: var(--ok-fg-soft); } .ok-badge.dot::before{ content:""; width: 6px; height: 6px; background: currentColor; border-radius: 50%; } .ok-badge.orange, .ok-badge.accent{ color: var(--ok-accent); border-color: color-mix(in oklch, var(--ok-accent) 40%, var(--ok-line)); } .ok-badge.magenta{ color: var(--ok-magenta); border-color: color-mix(in oklch, var(--ok-magenta) 40%, var(--ok-line)); } .ok-badge.cyan{ color: var(--ok-cyan); border-color: color-mix(in oklch, var(--ok-cyan) 40%, var(--ok-line)); } .ok-badge.success{ color: var(--ok-success); border-color: color-mix(in oklch, var(--ok-success) 40%, var(--ok-line)); } .ok-badge.danger{ color: var(--ok-danger); border-color: color-mix(in oklch, var(--ok-danger) 40%, var(--ok-line)); } .ok-badge.solid{ background: var(--ok-accent); color: var(--ok-bg-0); border-color: var(--ok-accent); } .ok-badge.pill{ border-radius: var(--ok-r-pill); padding: 4px 12px; } .ok-badge.live::before{ content:""; width: 6px; height: 6px; background: var(--ok-success); border-radius: 50%; animation: ok-pulse 1.8s ease-in-out infinite; } @keyframes ok-pulse{ 0%,100%{ box-shadow: 0 0 0 0 color-mix(in oklch, var(--ok-success) 80%, transparent); } 50%{ box-shadow: 0 0 0 6px color-mix(in oklch, var(--ok-success) 0%, transparent); } } /* ============================================================================ FORMS — focus is cyan, errors magenta, labels mono uppercase ============================================================================ */ .ok-field{ display: block; margin-bottom: var(--ok-s-5); } .ok-field > label{ display: block; font-family: var(--ok-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ok-fg-mute); margin-bottom: 8px; } .ok-field > label .req{ color: var(--ok-magenta); margin-left: 4px; } .ok-input, .ok-select, .ok-textarea{ width: 100%; background: var(--ok-bg-0); border: 1px solid var(--ok-line); color: var(--ok-fg); font-family: var(--ok-mono); font-size: 14px; padding: 12px 14px; border-radius: var(--ok-r-1); outline: none; transition: all var(--ok-fast); } .ok-input:focus, .ok-select:focus, .ok-textarea:focus{ border-color: var(--ok-cyan); box-shadow: 0 0 0 1px var(--ok-cyan), 0 0 calc(18px * var(--ok-glow)) -6px var(--ok-cyan); } .ok-input::placeholder, .ok-textarea::placeholder{ color: var(--ok-fg-dim); } .ok-textarea{ min-height: 100px; resize: vertical; } .ok-input.error{ border-color: var(--ok-magenta); } .ok-hint{ font-family: var(--ok-mono); font-size: 11px; color: var(--ok-fg-mute); margin-top: 6px; letter-spacing: .04em; } .ok-input.error ~ .ok-hint{ color: var(--ok-magenta); } .ok-check, .ok-radio{ display: flex; align-items: center; gap: var(--ok-s-3); font-family: var(--ok-mono); font-size: 13px; color: var(--ok-fg-soft); cursor: pointer; margin-bottom: var(--ok-s-3); } .ok-check input, .ok-radio input{ display: none; } .ok-box{ width: 18px; height: 18px; border: 1px solid var(--ok-line); background: var(--ok-bg-0); position: relative; flex-shrink: 0; } .ok-radio .ok-box{ border-radius: 50%; } .ok-check input:checked + .ok-box{ background: var(--ok-accent); border-color: var(--ok-accent); } .ok-check input:checked + .ok-box::after{ content:""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid var(--ok-bg-0); border-width: 0 2px 2px 0; transform: rotate(45deg); } .ok-radio input:checked + .ok-box{ border-color: var(--ok-cyan); } .ok-radio input:checked + .ok-box::after{ content:""; position: absolute; inset: 3px; background: var(--ok-cyan); border-radius: 50%; } .ok-toggle{ position: relative; width: 44px; height: 24px; background: var(--ok-bg-0); border: 1px solid var(--ok-line); cursor: pointer; transition: all var(--ok-fast); flex-shrink: 0; } .ok-toggle::after{ content:""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--ok-fg-mute); transition: all var(--ok-fast); } .ok-toggle.on{ border-color: var(--ok-accent); } .ok-toggle.on::after{ left: 23px; background: var(--ok-accent); box-shadow: 0 0 calc(10px * var(--ok-glow)) var(--ok-accent); } /* ============================================================================ CARDS — base surface, plus .featured (accent wash) and .glow variants ============================================================================ */ .ok-card{ background: var(--ok-bg-1); border: 1px solid var(--ok-line); padding: var(--ok-s-6); position: relative; transition: all var(--ok-mid); } .ok-card:hover{ border-color: color-mix(in oklch, var(--ok-cyan) 40%, var(--ok-line)); } .ok-card .ok-tag{ font-family: var(--ok-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ok-cyan); margin-bottom: var(--ok-s-4); display: block; } .ok-card h4{ font-family: var(--ok-display); font-weight: 500; font-size: 20px; letter-spacing: -.01em; margin: 0 0 var(--ok-s-3); } .ok-card p{ margin: 0; color: var(--ok-fg-soft); font-size: 14px; line-height: 1.55; } .ok-card.featured{ background: linear-gradient(135deg, color-mix(in oklch, var(--ok-accent) 8%, transparent), transparent 60%), var(--ok-bg-1); border-color: color-mix(in oklch, var(--ok-accent) 35%, var(--ok-line)); } .ok-card.featured .ok-tag{ color: var(--ok-accent); } .ok-card.glow{ border-color: color-mix(in oklch, var(--ok-magenta) 50%, var(--ok-line)); box-shadow: 0 0 calc(32px * var(--ok-glow)) -8px color-mix(in oklch, var(--ok-magenta) 50%, transparent); } .ok-card.glow .ok-tag{ color: var(--ok-magenta); } /* top accent stripe helper (split cyan/magenta) */ .ok-card.striped{ overflow: hidden; } .ok-card.striped::before{ content:""; position: absolute; left: -1px; top: -1px; right: 50%; height: 2px; background: var(--ok-cyan); box-shadow: 0 0 calc(10px * var(--ok-glow)) var(--ok-cyan); } .ok-card.striped::after{ content:""; position: absolute; right: -1px; top: -1px; left: 50%; height: 2px; background: var(--ok-magenta); box-shadow: 0 0 calc(10px * var(--ok-glow)) var(--ok-magenta); } /* ============================================================================ TABS / NAV PILLS ============================================================================ */ .ok-tabs{ display: flex; border-bottom: 1px solid var(--ok-line); font-family: var(--ok-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .ok-tab{ padding: 14px 22px; color: var(--ok-fg-mute); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: all var(--ok-fast); } .ok-tab:hover{ color: var(--ok-fg-soft); } .ok-tab.active{ color: var(--ok-fg); border-bottom-color: var(--ok-accent); } .ok-tab .idx{ color: var(--ok-fg-dim); margin-right: 8px; } .ok-tab.active .idx{ color: var(--ok-accent); } .ok-pills{ display: inline-flex; gap: 4px; border: 1px solid var(--ok-line); padding: 4px; width: fit-content; } .ok-pills .ok-pill{ padding: 8px 14px; font-family: var(--ok-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ok-fg-mute); cursor: pointer; } .ok-pills .ok-pill.active{ background: var(--ok-bg-3); color: var(--ok-fg); } /* ============================================================================ TERMINAL — for snippets, logs, technical CTAs ============================================================================ */ .ok-terminal{ background: var(--ok-bg-0); border: 1px solid var(--ok-line); font-family: var(--ok-mono); font-size: 13px; line-height: 1.7; color: var(--ok-fg-soft); position: relative; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in oklch, var(--ok-cyan) calc(15% * var(--ok-glow)), transparent), 0 0 calc(48px * var(--ok-glow)) -16px color-mix(in oklch, var(--ok-cyan) 60%, transparent), 0 24px 60px -24px rgba(0,0,0,0.7); } .ok-terminal::before{ content:""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,0.018) 2px 3px); } .ok-terminal .topbar{ display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--ok-line); background: linear-gradient(180deg, var(--ok-bg-1), var(--ok-bg-0)); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ok-fg-mute); position: relative; z-index: 2; } .ok-terminal .dots{ display: flex; gap: 6px; } .ok-terminal .dots span{ width: 10px; height: 10px; border: 1px solid var(--ok-line); border-radius: 50%; } .ok-terminal .dots span:nth-child(1){ border-color: var(--ok-orange); box-shadow: 0 0 calc(6px * var(--ok-glow)) var(--ok-orange); } .ok-terminal .dots span:nth-child(2){ border-color: var(--ok-magenta); box-shadow: 0 0 calc(6px * var(--ok-glow)) var(--ok-magenta); } .ok-terminal .dots span:nth-child(3){ border-color: var(--ok-cyan); box-shadow: 0 0 calc(6px * var(--ok-glow)) var(--ok-cyan); } .ok-terminal .status{ margin-left: auto; color: var(--ok-success); } .ok-terminal .body{ padding: 20px 22px 24px; position: relative; z-index: 2; } .ok-terminal .line{ display: flex; gap: 10px; } .ok-terminal .prompt{ color: var(--ok-cyan); flex-shrink: 0; font-weight: 500; } .ok-terminal .cmd{ color: var(--ok-fg); } .ok-terminal .out{ color: var(--ok-fg-soft); } .ok-terminal .out .ok-ok{ color: var(--ok-success); } .ok-terminal .out .ok-err{ color: var(--ok-magenta); } .ok-terminal .out b{ color: var(--ok-accent); font-weight: 500; } .ok-terminal .cursor{ display: inline-block; width: 8px; height: 14px; background: var(--ok-fg); vertical-align: -2px; margin-left: 4px; box-shadow: 0 0 calc(6px * var(--ok-glow)) var(--ok-fg); animation: ok-blink 1s steps(1) infinite; } @keyframes ok-blink{ 50%{ opacity: 0; } } /* ============================================================================ TOAST — left accent bar by status ============================================================================ */ .ok-toast{ display: flex; align-items: flex-start; gap: var(--ok-s-4); padding: var(--ok-s-4) var(--ok-s-5); background: var(--ok-bg-2); border: 1px solid var(--ok-line); font-family: var(--ok-mono); font-size: 12px; max-width: 420px; position: relative; } .ok-toast::before{ content:""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; } .ok-toast.info::before{ background: var(--ok-cyan); } .ok-toast.success::before{ background: var(--ok-success); } .ok-toast.warn::before{ background: var(--ok-warning); } .ok-toast.err::before{ background: var(--ok-magenta); } .ok-toast .ico{ width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid; flex-shrink: 0; font-size: 12px; font-weight: 700; } .ok-toast.info .ico{ color: var(--ok-cyan); border-color: var(--ok-cyan); } .ok-toast.success .ico{ color: var(--ok-success); border-color: var(--ok-success); } .ok-toast.warn .ico{ color: var(--ok-warning); border-color: var(--ok-warning); } .ok-toast.err .ico{ color: var(--ok-magenta); border-color: var(--ok-magenta); } .ok-toast b{ display: block; color: var(--ok-fg); font-weight: 500; margin-bottom: 4px; font-family: var(--ok-display); font-size: 13px; letter-spacing: -.005em; } .ok-toast .body{ color: var(--ok-fg-soft); line-height: 1.5; } /* ============================================================================ DATA TABLE — mono rows, tabular numerals, a "selected" highlighted row ============================================================================ */ .ok-table{ font-family: var(--ok-mono); font-size: 12px; } .ok-table .thead, .ok-table .trow{ display: grid; grid-template-columns: 18px 1fr 70px 1.4fr; gap: 14px; align-items: center; } .ok-table .thead{ padding: 6px 0 10px; border-bottom: 1px solid var(--ok-line); margin-bottom: 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ok-fg-mute); } .ok-table .trow{ padding: 9px 0; border-bottom: 1px dashed var(--ok-line-soft); color: var(--ok-fg-soft); } .ok-table .trow .num{ font-variant-numeric: tabular-nums; text-align: right; color: var(--ok-cyan); } .ok-table .trow .bar{ height: 4px; background: var(--ok-bg-3); position: relative; } .ok-table .trow .bar i{ position: absolute; left: 0; top: 0; bottom: 0; background: var(--ok-magenta); opacity: .55; } .ok-table .trow.selected{ background: linear-gradient(90deg, color-mix(in oklch, var(--ok-accent) 10%, transparent), transparent); position: relative; } .ok-table .trow.selected::after{ content:""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ok-accent); box-shadow: 0 0 calc(10px * var(--ok-glow)) var(--ok-accent); } .ok-table .trow.selected .bar i{ background: var(--ok-accent); opacity: 1; } /* ============================================================================ BAR CHART — labelled horizontal bars (the Insights look) ============================================================================ */ .ok-bars{ display: flex; flex-direction: column; gap: 8px; font-family: var(--ok-mono); } .ok-bar-row{ display: grid; grid-template-columns: minmax(0,170px) 1fr 56px; gap: 12px; align-items: center; font-size: 11px; } .ok-bar-label{ color: var(--ok-fg-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ok-bar-track{ height: 6px; background: var(--ok-bg-2); border-radius: 2px; overflow: hidden; } .ok-bar-fill{ display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, color-mix(in oklch, var(--ok-magenta) 70%, transparent), color-mix(in oklch, var(--ok-magenta) 95%, transparent)); } .ok-bar-row.selected .ok-bar-label{ color: var(--ok-fg); } .ok-bar-row.selected .ok-bar-fill{ background: linear-gradient(90deg, color-mix(in oklch, var(--ok-cyan) 70%, transparent), color-mix(in oklch, var(--ok-cyan) 95%, transparent)); } .ok-bar-value{ text-align: right; color: var(--ok-fg); } /* ============================================================================ DECORATIVE HELPERS ============================================================================ */ /* bracket corners on a relatively-positioned box: */ .ok-corners::before, .ok-corners::after{ content:""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--ok-accent); } .ok-corners::before{ top: 8px; right: 8px; border-bottom: 0; border-left: 0; } .ok-corners::after{ bottom: 8px; left: 8px; border-top: 0; border-right: 0; } /* thin gradient divider */ .ok-rule{ height: 1px; border: 0; background: linear-gradient(90deg, var(--ok-accent), color-mix(in oklch, var(--ok-magenta) 60%, transparent), transparent); opacity: .6; } /* reduced motion: kill the loops */ @media (prefers-reduced-motion: reduce){ *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }