/* kobow-brand.css — Kobow Studio shared design system ---------------------------------------------------- Two themes from a single token set: • LIGHT (default) — kobowlotto.com aesthetic. Use for showcase/review pages. • DARK ([data-theme="dark"] on ) — Kobow Dev admin console look. Both share Space Grotesk (display) + Inter (body) + IBM Plex Mono (code) plus the official Kobow orange accent #f97316. Class vocabulary follows the existing kobowlotto.com `klm-*` system so the gamedev pages feel like the same family. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap'); /* ============================================================ LIGHT THEME (default) — same tokens as kobowlotto.com ============================================================ */ :root { /* Surfaces */ --kbw-paper: #fafafa; --kbw-card: #ffffff; --kbw-soft: #f2f2f2; --kbw-ink: #171717; --kbw-line: #e5e7eb; --kbw-line-strong: #d9d9dd; /* Text */ --kbw-muted: #525252; --kbw-muted-2: #6b6b75; /* Brand accent — burnt orange (Kobow font color) is the canonical hue. #c2410c = wordmark/headings; #fb923c = lighter hover; #f97316 = legacy bright. */ --kbw-accent: #c2410c; --kbw-accent-2: #fb923c; --kbw-accent-dim: #9a3308; --kbw-accent-bright: #f97316; --kbw-accent-soft: rgba(194,65,12,.10); --kbw-accent-surface:rgba(194,65,12,.06); /* Status colors */ --kbw-success: #047857; --kbw-success-bg: rgba(16,185,129,.10); --kbw-warn: #a16207; --kbw-warn-bg: rgba(202,138,4,.12); --kbw-danger: #b91c1c; --kbw-danger-bg:rgba(225,50,56,.10); --kbw-info: #0369a1; --kbw-info-bg: rgba(14,165,233,.12); /* Geometry + depth */ --kbw-radius: 12px; --kbw-radius-sm: 6px; --kbw-shadow: 0 2px 8px rgba(0,0,0,.04); --kbw-shadow-hover: 0 8px 24px rgba(0,0,0,.08); --kbw-maxw: 1500px; /* Type */ --kbw-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --kbw-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --kbw-mono: 'IBM Plex Mono', 'SF Mono', Monaco, Menlo, 'Courier New', monospace; /* legacy klm-* aliases so existing klm-section / klm-btn classes work */ --klm-paper: var(--kbw-paper); --klm-card: var(--kbw-card); --klm-soft: var(--kbw-soft); --klm-ink: var(--kbw-ink); --klm-muted: var(--kbw-muted); --klm-muted-2: var(--kbw-muted-2); --klm-accent: var(--kbw-accent); --klm-accent-2: var(--kbw-accent-2); --klm-accent-dim: var(--kbw-accent-dim); --klm-accent-soft: var(--kbw-accent-soft); --klm-accent-surface: var(--kbw-accent-surface); --klm-line: var(--kbw-line); --klm-line-strong: var(--kbw-line-strong); --klm-radius: var(--kbw-radius); --klm-shadow: var(--kbw-shadow); --klm-shadow-hover: var(--kbw-shadow-hover); --klm-font-display: var(--kbw-display); --klm-font-body: var(--kbw-body); --klm-font-mono: var(--kbw-mono); } /* ============================================================ DARK THEME — Kobow Dev admin console Activate by adding data-theme="dark" to ============================================================ */ :root[data-theme="dark"] { --kbw-paper: #0a0a0a; --kbw-card: #141414; --kbw-soft: #1a1a1a; --kbw-ink: #eaeaea; --kbw-line: #2a2a2a; --kbw-line-strong: #383838; --kbw-muted: #888888; --kbw-muted-2: #6b6b75; /* Burnt orange #c2410c (wordmark hue) — keep canonical on dark too for brand consistency. Bumped slightly to #d4500e for legibility on near-black bg. */ --kbw-accent: #d4500e; --kbw-accent-2: #fb923c; --kbw-accent-dim: #c2410c; --kbw-accent-bright: #fb923c; --kbw-accent-soft: rgba(212,80,14,.14); --kbw-accent-surface:rgba(212,80,14,.07); --kbw-success: #34d399; --kbw-success-bg: rgba(16,185,129,.12); --kbw-warn: #fbbf24; --kbw-warn-bg: rgba(202,138,4,.14); --kbw-danger: #f87171; --kbw-danger-bg:rgba(225,50,56,.14); --kbw-info: #38bdf8; --kbw-info-bg: rgba(14,165,233,.14); --kbw-shadow: 0 2px 8px rgba(0,0,0,.5); --kbw-shadow-hover: 0 8px 24px rgba(0,0,0,.6); } /* ============================================================ Reset + base ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 14px; } body { font-family: var(--kbw-body); color: var(--kbw-ink); background: var(--kbw-paper); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; padding: 22px; max-width: var(--kbw-maxw); margin: 0 auto; } a { color: var(--kbw-accent-dim); text-decoration: none; font-weight: 500; } a:hover { color: var(--kbw-accent-2); } /* Typography */ h1, h2, h3, h4 { font-family: var(--kbw-display); color: var(--kbw-ink); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 8px 0; } h1 { font-size: 1.65em; } h2 { font-size: 1.25em; } h3 { font-size: .98em; text-transform: uppercase; letter-spacing: 1px; color: var(--kbw-accent-dim); } h4 { font-size: .9em; } .kbw-eyebrow { font-family: var(--kbw-mono); font-size: .68em; text-transform: uppercase; letter-spacing: 1.5px; color: var(--kbw-muted); font-weight: 600; } .kbw-lede { color: var(--kbw-muted); font-size: .88em; margin: 4px 0 14px; } code, .mono { font-family: var(--kbw-mono); font-size: .88em; } code { background: var(--kbw-soft); padding: 2px 7px; border-radius: 4px; border: 1px solid var(--kbw-line); } /* ============================================================ Layout — sections / containers / cards ============================================================ */ .kbw-section { background: var(--kbw-card); border: 1px solid var(--kbw-line); border-radius: var(--kbw-radius); padding: 16px; box-shadow: var(--kbw-shadow); margin-bottom: 18px; } .kbw-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--kbw-line); } .kbw-section-head .kbw-ico { font-size: 1.3em; } .kbw-section-head h3 { margin: 0; } .kbw-card { background: var(--kbw-card); border: 1px solid var(--kbw-line); border-radius: var(--kbw-radius); padding: 14px; transition: .15s; } .kbw-card:hover { border-color: var(--kbw-accent); box-shadow: var(--kbw-shadow-hover); transform: translateY(-2px); } .kbw-card.hot { border-color: var(--kbw-accent); background: var(--kbw-accent-surface); } .kbw-card .title { font-weight: 700; font-size: .92em; color: var(--kbw-ink); margin-bottom: 4px; } .kbw-card .desc { color: var(--kbw-muted); font-size: .78em; line-height: 1.5; } .kbw-card .meta { color: var(--kbw-muted-2); font-family: var(--kbw-mono); font-size: .68em; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--kbw-line); } .kbw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } /* ============================================================ Buttons + pills + badges ============================================================ */ .kbw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--kbw-accent); color: #fff; border: 1px solid var(--kbw-accent); padding: 9px 16px; border-radius: var(--kbw-radius-sm); cursor: pointer; font-family: var(--kbw-body); font-weight: 700; font-size: .85em; transition: .12s; } .kbw-btn:hover { background: var(--kbw-accent-2); border-color: var(--kbw-accent-2); } .kbw-btn:disabled { opacity: .5; cursor: wait; } .kbw-btn.secondary { background: transparent; color: var(--kbw-accent-dim); border-color: var(--kbw-accent); } .kbw-btn.secondary:hover { background: var(--kbw-accent-soft); } .kbw-btn.ghost { background: transparent; color: var(--kbw-muted); border-color: var(--kbw-line); } .kbw-btn.ghost:hover { color: var(--kbw-ink); border-color: var(--kbw-line-strong); } .kbw-btn.success { background: var(--kbw-success); border-color: var(--kbw-success); } .kbw-btn.danger { background: var(--kbw-danger); border-color: var(--kbw-danger); } .kbw-btn.sm { padding: 4px 10px; font-size: .72em; } .kbw-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .68em; font-weight: 700; font-family: var(--kbw-mono); text-transform: uppercase; letter-spacing: .5px; background: var(--kbw-accent-soft); color: var(--kbw-accent-dim); border: 1px solid var(--kbw-accent-soft); } .kbw-pill.success { background: var(--kbw-success-bg); color: var(--kbw-success); } .kbw-pill.warn { background: var(--kbw-warn-bg); color: var(--kbw-warn); } .kbw-pill.danger { background: var(--kbw-danger-bg); color: var(--kbw-danger); } .kbw-pill.info { background: var(--kbw-info-bg); color: var(--kbw-info); } .kbw-badge { position: absolute; top: 8px; right: 8px; background: var(--kbw-accent); color: #fff; padding: 1px 7px; border-radius: 8px; font-size: .6em; font-weight: 700; font-family: var(--kbw-mono); text-transform: uppercase; letter-spacing: .5px; } /* ============================================================ Forms ============================================================ */ .kbw-label { display: block; font-family: var(--kbw-mono); font-size: .68em; color: var(--kbw-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin: 12px 0 5px; } .kbw-input, .kbw-select, .kbw-textarea { background: var(--kbw-paper); border: 1px solid var(--kbw-line); color: var(--kbw-ink); padding: 8px 11px; border-radius: var(--kbw-radius-sm); font-family: var(--kbw-body); font-size: .85em; width: 100%; transition: .12s; } .kbw-input:focus, .kbw-select:focus, .kbw-textarea:focus { outline: none; border-color: var(--kbw-accent); box-shadow: 0 0 0 3px var(--kbw-accent-soft); } .kbw-textarea { min-height: 80px; resize: vertical; font-family: var(--kbw-mono); font-size: .82em; } /* ============================================================ Status box ============================================================ */ .kbw-status { background: var(--kbw-soft); border-left: 3px solid var(--kbw-success); padding: 9px 12px; border-radius: 0 5px 5px 0; font-size: .82em; margin-top: 10px; display: none; } .kbw-status.show { display: block; } .kbw-status.processing { border-color: var(--kbw-warn); color: var(--kbw-warn); } .kbw-status.error { border-color: var(--kbw-danger); color: var(--kbw-danger); } .kbw-status.success { border-color: var(--kbw-success); color: var(--kbw-success); } /* ============================================================ Footer ============================================================ */ .kbw-foot { text-align: center; color: var(--kbw-muted-2); font-size: .78em; padding: 22px 0 8px; border-top: 1px solid var(--kbw-line); margin-top: 22px; } .kbw-foot a { color: var(--kbw-accent-dim); margin: 0 8px; } /* ============================================================ Tables ============================================================ */ .kbw-table { width: 100%; border-collapse: collapse; font-size: .82em; } .kbw-table th { text-align: left; color: var(--kbw-muted); font-family: var(--kbw-mono); text-transform: uppercase; font-size: .68em; letter-spacing: .5px; padding: 8px; border-bottom: 1px solid var(--kbw-line); } .kbw-table td { padding: 8px; border-bottom: 1px solid var(--kbw-line); } /* ============================================================ Legacy aliases — so existing klm-* classes also pick up theme tokens ============================================================ */ .klm-section { background: var(--kbw-card); border: 1px solid var(--kbw-line); border-radius: var(--kbw-radius); padding: 16px; box-shadow: var(--kbw-shadow); } .klm-btn { background: var(--kbw-accent); color: #fff; border: 0; padding: 9px 16px; border-radius: var(--kbw-radius-sm); cursor: pointer; font-family: var(--kbw-body); font-weight: 700; font-size: .85em; } .klm-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .68em; font-weight: 700; font-family: var(--kbw-mono); background: var(--kbw-accent-soft); color: var(--kbw-accent-dim); } .klm-eyebrow { font-family: var(--kbw-mono); font-size: .68em; text-transform: uppercase; letter-spacing: 1.5px; color: var(--kbw-muted); } /* ============================================================ POLLARD ENTERPRISE SKIN — navy + gold (data-theme="pollard") ============================================================ */ :root[data-theme="pollard"]{ --kbw-paper:#0a1628; --kbw-card:#0f2238; --kbw-soft:#1a2f4a; --kbw-ink:#e8edf2; --kbw-line:rgba(255,255,255,.10); --kbw-line-strong:rgba(212,175,55,.30); --kbw-muted:#b0bdcc; --kbw-muted-2:#7a8a9c; --kbw-accent:#a8862a; --kbw-accent-2:#d4af37; --kbw-accent-dim:#8a6f22; --kbw-accent-bright:#e5c66a; --kbw-accent-soft:rgba(212,175,55,.16); --kbw-accent-surface:rgba(212,175,55,.08); --kbw-success:#34d399; --kbw-success-bg:rgba(16,185,129,.12); --kbw-warn:#fbbf24; --kbw-warn-bg:rgba(202,138,4,.14); --kbw-danger:#f87171; --kbw-danger-bg:rgba(225,50,56,.14); --kbw-info:#3a8fb7; --kbw-info-bg:rgba(58,143,183,.14); --kbw-shadow:0 2px 8px rgba(0,0,0,.5); --kbw-shadow-hover:0 8px 24px rgba(0,0,0,.6); }