/** * assets/css/theme.css * Kainuwa Code design tokens. One source of truth for color, referenced * by Tailwind's config (see header.php) so utility classes like bg-surface * or text-ink automatically respond to the active theme. * * Theme is toggled by setting data-theme="dark" | "light" on . * Default (no attribute, or data-theme="dark") = dark. */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* Fallback only, in case JS hasn't run yet — head script always sets data-theme before paint, so this rarely matters in practice. */ --c-bg: 12 11 20; --c-surface: 22 21 31; --c-surface-2: 30 29 44; --c-border: 40 38 56; --c-text: 242 241 247; --c-text-2: 148 146 168; --c-violet: 115 81 255; --c-violet-strong: 148 118 255; --c-amber: 246 193 1; } [data-theme="dark"] { --c-bg: 12 11 20; /* #0C0B14 */ --c-surface: 22 21 31; /* #16151F */ --c-surface-2: 30 29 44; /* #1E1D2C */ --c-border: 40 38 56; /* #282638 */ --c-text: 242 241 247; /* #F2F1F7 */ --c-text-2: 148 146 168; /* #9492A8 */ --c-violet: 115 81 255; /* #7351FF */ --c-violet-strong: 148 118 255; /* lighter, for text/links on dark */ --c-amber: 246 193 1; /* #F6C101 */ } [data-theme="light"] { --c-bg: 247 246 251; /* #F7F6FB */ --c-surface: 255 255 255; /* #FFFFFF */ --c-surface-2: 240 238 247; /* #F0EEF7 */ --c-border: 224 221 235; /* #E0DDEB */ --c-text: 23 22 31; /* #17161F */ --c-text-2: 107 105 119; /* #6B6977 */ --c-violet: 115 81 255; /* #7351FF */ --c-violet-strong: 92 58 219; /* darker, for AA contrast on white */ --c-amber: 189 148 1; /* darker gold, for contrast on white */ } body { font-family: 'Inter', sans-serif; } .font-display { font-family: 'Space Grotesk', sans-serif; } code, pre, .font-mono { font-family: 'JetBrains Mono', monospace; } /* --- Signature element: circuit-pulse streaming indicator --- A thin trace line that lights up while Claude is generating a reply, echoing the circuit/chip motif in the Kainuwa logo. Sits along the top edge of the chat panel, quiet until it's needed. */ .circuit-track { position: relative; height: 2px; background: rgb(var(--c-border)); overflow: hidden; } .circuit-track::after { content: ''; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgb(var(--c-amber)), transparent); transform: translateX(-100%); } .circuit-track.is-active::after { animation: circuit-pulse 1.4s ease-in-out infinite; } @keyframes circuit-pulse { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } @media (prefers-reduced-motion: reduce) { .circuit-track.is-active::after { animation: none; opacity: 0.6; } } /* --- Markdown-rendered assistant messages --- */ .markdown-body h1, .markdown-body h2, .markdown-body h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; margin: 0.75em 0 0.35em; color: rgb(var(--c-text)); } .markdown-body h1 { font-size: 1.15em; } .markdown-body h2 { font-size: 1.05em; } .markdown-body h3 { font-size: 1em; } .markdown-body p { margin: 0.5em 0; } .markdown-body ul, .markdown-body ol { margin: 0.5em 0; padding-left: 1.4em; } .markdown-body li { margin: 0.2em 0; } .markdown-body ul { list-style: disc; } .markdown-body ol { list-style: decimal; } .markdown-body code { font-family: 'JetBrains Mono', monospace; background: rgb(var(--c-surface-2)); padding: 0.1em 0.4em; border-radius: 4px; font-size: 0.85em; } .markdown-body pre { background: rgb(var(--c-bg)); border: 1px solid rgb(var(--c-border)); padding: 0.75em; border-radius: 10px; overflow-x: auto; margin: 0.5em 0; } .markdown-body pre code { background: none; padding: 0; } .markdown-body table { border-collapse: collapse; margin: 0.5em 0; width: 100%; } .markdown-body th, .markdown-body td { border: 1px solid rgb(var(--c-border)); padding: 0.4em 0.6em; text-align: left; } .markdown-body th { background: rgb(var(--c-surface-2)); font-family: 'Space Grotesk', sans-serif; } .markdown-body a { color: rgb(var(--c-violet-strong)); text-decoration: underline; } .markdown-body hr { border-color: rgb(var(--c-border)); margin: 0.75em 0; } .markdown-body strong { font-weight: 600; } /* --- Scrollbars: quiet, theme-matched --- */ * { scrollbar-width: thin; scrollbar-color: rgb(var(--c-border)) transparent; } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-thumb { background: rgb(var(--c-border)); border-radius: 3px; } /* --- Visible keyboard focus, always --- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid rgb(var(--c-violet)); outline-offset: 2px; } /* --- Extended thinking toggle --- */ .thinking-block summary { list-style: none; } .thinking-block summary::-webkit-details-marker { display: none; } .thinking-block summary::before { content: '▸'; display: inline-block; transition: transform 0.15s ease; font-size: 0.7em; } .thinking-block[open] summary::before { transform: rotate(90deg); } /* --- Sidebar / artifacts panel transitions --- Actual show/hide is controlled by ui.js via inline styles (deliberately, so it works even if this stylesheet fails to load). This block only adds the smooth animation on top of whatever ui.js sets. */ #sidebar, #artifacts-panel { transition: width 0.2s ease, transform 0.2s ease, border-color 0.2s ease; }