spb/khaelor Public
KHAELOR — a terminal-native autonomous engineering agent powered by Anthropic.
TypeScript 82.9%
HTML 14.9%
CSS 1.1%
JavaScript 0.7%
1/*2 * KHAELOR3 * File: website/public/styles.css4 * Description: Single stylesheet for the KHAELOR documentation site — dark default, light variant, terminal-calm aesthetic.5 *6 * Author: Simon-Pierre Boucher7 * Contact: contact@spboucher.ai8 */910/* ───────────────────────── tokens ───────────────────────── */1112/* Khaelis — obsidian + magma. The ember flows through the whole site (TUI v2 §1). */13:root {14 --bg: #0b0e14;15 --bg-alt: #10141d;16 --bg-code: #0e121a;17 --bg-inline: #171c28;18 --border: #202636;19 --border-soft: #181d2a;20 --text: #c9d1e3;21 --text-strong: #eceff4;22 --dim: #8b93a5;23 --dimmer: #5b657a;24 --accent: #ff6b35;25 --accent2: #ffb86b;26 --teal: #2dd4bf;27 --accent-soft: rgba(255, 107, 53, 0.12);28 --teal-soft: rgba(45, 212, 191, 0.1);29 --success: #7ee787;30 --warning: #f0b429;31 --error: #ff5c57;32 --ember-gradient: linear-gradient(100deg, #ff6b35 0%, #ffb86b 55%, #ff6b35 100%);33 --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;34 --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;35 color-scheme: dark;36}3738/* Legendary light — warm paper + ink + ember. Terminal blocks stay obsidian:39 the contrast between a bright modern page and dark living terminals IS the look. */40html[data-theme="light"] {41 --bg: #faf8f3;42 --bg-alt: #ffffff;43 --bg-code: #f3efe7;44 --bg-inline: #eee8dd;45 --border: #e5ddce;46 --border-soft: #ede7da;47 --text: #3b362e;48 --text-strong: #1c1811;49 --dim: #6f695e;50 --dimmer: #9d968a;51 --accent: #d84a10;52 --accent2: #b06718;53 --teal: #0d7c72;54 --accent-soft: rgba(216, 74, 16, 0.08);55 --teal-soft: rgba(13, 124, 114, 0.08);56 --success: #3f7d18;57 --warning: #92650a;58 --error: #c23a55;59 --ember-gradient: linear-gradient(100deg, #d84a10 0%, #e8862e 55%, #d84a10 100%);60 --shadow: 0 1px 2px rgba(28, 24, 17, 0.05), 0 10px 30px rgba(28, 24, 17, 0.08);61 color-scheme: light;62}63html[data-theme="light"] .card { box-shadow: var(--shadow); border-color: var(--border-soft); }64html[data-theme="light"] .termwrap { box-shadow: 0 2px 6px rgba(28, 24, 17, 0.12), 0 18px 48px rgba(28, 24, 17, 0.18); }65html[data-theme="light"] .pitch { box-shadow: var(--shadow); }66html[data-theme="light"] .site-header { background: color-mix(in srgb, #faf8f3 82%, transparent); }6768/* ───────────────────────── base ───────────────────────── */6970* { box-sizing: border-box; }7172html { scroll-behavior: smooth; }7374body {75 margin: 0;76 background: var(--bg);77 color: var(--text);78 font-family: var(--sans);79 font-size: 16px;80 line-height: 1.65;81 -webkit-font-smoothing: antialiased;82}8384a { color: var(--accent); text-decoration: none; }85a:hover { text-decoration: underline; }8687h1, h2, h3, h4 {88 color: var(--text-strong);89 line-height: 1.25;90 font-weight: 650;91 margin: 2.2em 0 0.6em;92}93h1 { font-size: 1.9rem; margin-top: 0.5em; }94h2 { font-size: 1.35rem; padding-bottom: 0.35em; border-bottom: 1px solid var(--border-soft); }95h3 { font-size: 1.08rem; }96h4 { font-size: 0.95rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }9798h2 a.anchor, h3 a.anchor {99 color: var(--dimmer);100 margin-left: 0.4em;101 opacity: 0;102 font-weight: 400;103}104h2:hover a.anchor, h3:hover a.anchor { opacity: 1; }105106p.lead { font-size: 1.1rem; color: var(--dim); }107108hr { border: none; border-top: 1px solid var(--border-soft); margin: 2.5rem 0; }109110/* ───────────────────────── code ───────────────────────── */111112code {113 font-family: var(--mono);114 font-size: 0.86em;115 background: var(--bg-inline);116 padding: 0.14em 0.38em;117 border-radius: 4px;118 color: var(--text-strong);119}120121pre {122 position: relative;123 background: var(--bg-code);124 border: 1px solid var(--border-soft);125 border-radius: 8px;126 padding: 0.9rem 1.1rem;127 overflow-x: auto;128 line-height: 1.55;129 margin: 1.1rem 0;130}131pre code {132 background: none;133 padding: 0;134 font-size: 0.83rem;135 color: var(--text);136 display: block;137}138139pre .copy-btn {140 position: absolute;141 top: 0.5rem;142 right: 0.5rem;143 font-family: var(--mono);144 font-size: 0.7rem;145 color: var(--dim);146 background: var(--bg-alt);147 border: 1px solid var(--border);148 border-radius: 5px;149 padding: 0.25rem 0.6rem;150 cursor: pointer;151 opacity: 0;152 transition: opacity 120ms ease;153}154pre:hover .copy-btn, pre .copy-btn:focus { opacity: 1; }155pre .copy-btn:hover { color: var(--text-strong); border-color: var(--dim); }156pre .copy-btn.copied { color: var(--success); border-color: var(--success); }157158/* terminal-flavored blocks (transcripts, panels) */159pre.term {160 background: #0a0d13;161 border-color: #1d2330;162 color: #c6cdda;163}164html[data-theme="light"] pre.term {165 background: #14181f;166 border-color: #14181f;167 color: #c6cdda;168}169pre.term code { color: inherit; }170171.t-dim { color: #6b7280; }172.t-accent { color: #7aa2f7; }173.t-ok { color: #9ece6a; }174.t-warn { color: #e0af68; }175.t-err { color: #f7768e; }176.t-b { font-weight: 700; color: #eceff4; }177178/* ───────────────────────── layout ───────────────────────── */179180.site-header {181 position: sticky;182 top: 0;183 z-index: 10;184 background: color-mix(in srgb, var(--bg) 88%, transparent);185 backdrop-filter: blur(8px);186 border-bottom: 1px solid var(--border-soft);187}188.site-header .inner {189 max-width: 1200px;190 margin: 0 auto;191 padding: 0.7rem 1.4rem;192 display: flex;193 align-items: center;194 gap: 1.6rem;195}196.wordmark {197 font-family: var(--mono);198 font-weight: 700;199 font-size: 0.95rem;200 letter-spacing: 0.22em;201 color: var(--text-strong);202}203.wordmark:hover { text-decoration: none; color: var(--accent); }204.wordmark .glyph { color: var(--accent); margin-right: 0.45em; }205206.site-header nav { display: flex; gap: 1.2rem; margin-left: auto; align-items: center; }207.site-header nav a {208 color: var(--dim);209 font-size: 0.88rem;210}211.site-header nav a:hover { color: var(--text-strong); text-decoration: none; }212.site-header nav a.active { color: var(--text-strong); }213214#theme-toggle {215 background: none;216 border: 1px solid var(--border);217 color: var(--dim);218 border-radius: 6px;219 font-family: var(--mono);220 font-size: 0.75rem;221 padding: 0.28rem 0.6rem;222 cursor: pointer;223}224#theme-toggle:hover { color: var(--text-strong); border-color: var(--dim); }225226.page {227 max-width: 1200px;228 margin: 0 auto;229 padding: 0 1.4rem 4rem;230}231232/* docs two-column */233.docs-layout {234 display: grid;235 grid-template-columns: 230px minmax(0, 1fr);236 gap: 3rem;237 align-items: start;238}239.sidebar {240 position: sticky;241 top: 4.2rem;242 padding-top: 2rem;243 font-size: 0.87rem;244 max-height: calc(100vh - 4.2rem);245 overflow-y: auto;246}247.sidebar .group {248 margin-bottom: 1.4rem;249}250.sidebar .group-title {251 font-family: var(--mono);252 font-size: 0.68rem;253 text-transform: uppercase;254 letter-spacing: 0.12em;255 color: var(--dimmer);256 margin-bottom: 0.5rem;257}258.sidebar a {259 display: block;260 color: var(--dim);261 padding: 0.24rem 0.6rem;262 border-left: 2px solid transparent;263 border-radius: 0 4px 4px 0;264}265.sidebar a:hover { color: var(--text-strong); text-decoration: none; }266.sidebar a.active {267 color: var(--accent);268 border-left-color: var(--accent);269 background: var(--accent-soft);270}271272.content { padding-top: 2rem; min-width: 0; }273.content > :first-child { margin-top: 0; }274275@media (max-width: 860px) {276 .docs-layout { grid-template-columns: 1fr; gap: 0; }277 .sidebar { position: static; max-height: none; border-bottom: 1px solid var(--border-soft); padding-bottom: 1rem; }278 .sidebar .group { margin-bottom: 0.8rem; }279}280281/* ───────────────────────── tables ───────────────────────── */282283table {284 border-collapse: collapse;285 width: 100%;286 margin: 1.2rem 0;287 font-size: 0.88rem;288}289th, td {290 text-align: left;291 padding: 0.5rem 0.8rem;292 border-bottom: 1px solid var(--border-soft);293 vertical-align: top;294}295th {296 color: var(--dim);297 font-weight: 600;298 font-size: 0.78rem;299 text-transform: uppercase;300 letter-spacing: 0.06em;301}302td code { white-space: nowrap; }303td.wrap code { white-space: normal; }304305kbd {306 font-family: var(--mono);307 font-size: 0.78em;308 background: var(--bg-inline);309 border: 1px solid var(--border);310 border-bottom-width: 2px;311 border-radius: 5px;312 padding: 0.1em 0.45em;313 color: var(--text-strong);314 white-space: nowrap;315}316317/* ───────────────────────── callouts ───────────────────────── */318319.note, .warn {320 border-left: 3px solid var(--accent);321 background: var(--accent-soft);322 border-radius: 0 8px 8px 0;323 padding: 0.7rem 1.1rem;324 margin: 1.2rem 0;325 font-size: 0.92rem;326}327.warn {328 border-left-color: var(--warning);329 background: color-mix(in srgb, var(--warning) 9%, transparent);330}331.note > :first-child, .warn > :first-child { margin-top: 0; }332.note > :last-child, .warn > :last-child { margin-bottom: 0; }333334/* ───────────────────────── hero (index) ───────────────────────── */335336.hero {337 padding: 5rem 0 3rem;338 max-width: 780px;339}340.hero .kicker {341 font-family: var(--mono);342 font-size: 0.78rem;343 letter-spacing: 0.28em;344 color: var(--accent);345 margin-bottom: 1.2rem;346}347.hero h1 {348 font-size: 2.6rem;349 margin: 0 0 0.9rem;350 letter-spacing: -0.015em;351}352.hero p.tagline {353 font-size: 1.18rem;354 color: var(--dim);355 margin: 0 0 2.2rem;356 max-width: 620px;357}358.hero .principle {359 font-family: var(--mono);360 font-size: 0.85rem;361 color: var(--dimmer);362 margin-top: 1.6rem;363}364365.install-line {366 display: flex;367 align-items: center;368 gap: 0.8rem;369 background: var(--bg-code);370 border: 1px solid var(--border);371 border-radius: 10px;372 padding: 0.95rem 1.2rem;373 font-family: var(--mono);374 font-size: 0.92rem;375 max-width: 640px;376}377.install-line .prompt { color: var(--success); user-select: none; }378.install-line code { background: none; padding: 0; flex: 1; overflow-x: auto; white-space: nowrap; }379.install-line button {380 font-family: var(--mono);381 font-size: 0.72rem;382 color: var(--dim);383 background: var(--bg-alt);384 border: 1px solid var(--border);385 border-radius: 6px;386 padding: 0.3rem 0.7rem;387 cursor: pointer;388 flex-shrink: 0;389}390.install-line button:hover { color: var(--text-strong); border-color: var(--dim); }391.install-line button.copied { color: var(--success); border-color: var(--success); }392393.hero .cta-row { margin-top: 1.3rem; display: flex; gap: 1.4rem; font-size: 0.9rem; }394395/* feature grid */396.features {397 display: grid;398 grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));399 gap: 1rem;400 margin: 2.5rem 0;401}402.feature {403 border: 1px solid var(--border-soft);404 border-radius: 10px;405 padding: 1.1rem 1.2rem;406 background: var(--bg-alt);407}408.feature .glyph {409 font-family: var(--mono);410 color: var(--accent);411 font-size: 0.95rem;412}413.feature h3 { margin: 0.4rem 0 0.35rem; font-size: 0.98rem; }414.feature p { margin: 0; font-size: 0.86rem; color: var(--dim); }415416.section-title {417 font-family: var(--mono);418 font-size: 0.72rem;419 text-transform: uppercase;420 letter-spacing: 0.2em;421 color: var(--dimmer);422 margin: 3.5rem 0 1rem;423}424425/* footer */426.site-footer {427 border-top: 1px solid var(--border-soft);428 margin-top: 2rem;429}430.site-footer .inner {431 max-width: 1200px;432 margin: 0 auto;433 padding: 1.6rem 1.4rem;434 display: flex;435 gap: 1.5rem;436 font-size: 0.82rem;437 color: var(--dimmer);438 flex-wrap: wrap;439}440.site-footer a { color: var(--dim); }441442/* prev/next pager */443.pager {444 display: flex;445 justify-content: space-between;446 margin-top: 3.5rem;447 padding-top: 1.2rem;448 border-top: 1px solid var(--border-soft);449 font-size: 0.9rem;450 gap: 1rem;451}452.pager .label { display: block; font-size: 0.72rem; color: var(--dimmer); text-transform: uppercase; letter-spacing: 0.08em; }453.pager .next { text-align: right; margin-left: auto; }454455@media (max-width: 640px) {456 .hero { padding-top: 3rem; }457 .hero h1 { font-size: 2rem; }458 body { font-size: 15px; }459}460461/* ───────────────────────── v2 "Terminal Cinema" additions ───────────────────────── */462463/* Ember gradient wordmark + headings — the signature. */464.g-ember {465 background: var(--ember-gradient);466 background-size: 200% 100%;467 -webkit-background-clip: text;468 background-clip: text;469 color: transparent;470 animation: emberflow 6s linear infinite;471}472@keyframes emberflow {473 from { background-position: 0% 0; }474 to { background-position: 200% 0; }475}476@media (prefers-reduced-motion: reduce) {477 .g-ember { animation: none; }478 .breath { animation: none !important; }479}480481/* Phase ribbon (the cockpit, TUI v2 §3). */482.phase-ribbon {483 display: inline-flex;484 gap: 0.6rem;485 align-items: baseline;486 font-family: var(--mono);487 font-size: 0.82rem;488}489.phase-ribbon .active { color: var(--accent); font-weight: 700; }490.phase-ribbon .done { color: var(--dimmer); text-decoration: line-through; }491.phase-ribbon .todo { color: var(--dimmer); }492.phase-ribbon .sep { color: var(--dimmer); }493494/* Terminal mock accents */495.term .t-ember { color: var(--accent); }496.term .t-glow { color: var(--accent2); }497.term .t-teal { color: var(--teal); }498.term .t-ok { color: var(--success); }499.term .t-err { color: var(--error); }500.term .t-warn { color: var(--warning); }501502/* Design-panel mock: bordered, breathing while pending. */503.term.panel { border: 1px solid rgba(255, 107, 53, 0.45); }504.breath { animation: breathe 2.4s ease-in-out infinite; }505@keyframes breathe {506 0%, 100% { border-color: rgba(255, 107, 53, 0.35); }507 50% { border-color: rgba(255, 184, 107, 0.75); }508}509510/* Feature grid v2 */511.grid3 {512 display: grid;513 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));514 gap: 1rem;515 margin: 1.4rem 0 2.6rem;516}517.card {518 border: 1px solid var(--border);519 border-radius: 10px;520 background: var(--bg-alt);521 padding: 1.1rem 1.2rem;522}523.card h3 {524 margin: 0 0 0.45rem;525 font-size: 0.98rem;526 color: var(--text-strong);527 display: flex;528 align-items: baseline;529 gap: 0.5rem;530}531.card h3 .glyph { color: var(--accent); font-family: var(--mono); }532.card p { margin: 0; font-size: 0.88rem; color: var(--dim); line-height: 1.55; }533.card code { font-size: 0.8rem; }534.card:hover { border-color: rgba(255, 107, 53, 0.45); }535536/* The pitch band */537.pitch {538 margin: 3rem 0;539 padding: 2rem 1.6rem;540 border: 1px solid var(--border);541 border-left: 3px solid var(--accent);542 border-radius: 10px;543 background: var(--bg-alt);544}545.pitch p { margin: 0 0 0.8rem; font-size: 1.05rem; color: var(--text-strong); line-height: 1.65; }546.pitch p:last-child { margin: 0; }547.pitch .motto { color: var(--accent2); font-family: var(--mono); font-size: 0.92rem; }548549/* Context gauge mock */550.gauge { font-family: var(--mono); color: var(--teal); }551.gauge.hot { color: var(--error); }552553/* Comparison table accent */554table.vs td:first-child { color: var(--text-strong); }555556/* ───────────────────────── legendary pass: terminal windows, gallery, hero glow ───────────────────────── */557558/* Terminal window chrome — every mock reads as a living terminal. */559.termwrap {560 border: 1px solid #1d2330;561 border-radius: 12px;562 overflow: hidden;563 background: #0a0d13;564 margin: 1.1rem 0;565}566.termbar {567 display: flex;568 align-items: center;569 gap: 0.45rem;570 padding: 0.55rem 0.85rem;571 background: #0e121a;572 border-bottom: 1px solid #171c28;573}574.termbar .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }575.termbar .dot.r { background: #ff5f57; }576.termbar .dot.y { background: #febc2e; }577.termbar .dot.g { background: #28c840; }578.termbar .title {579 margin-left: 0.55rem;580 font-family: var(--mono);581 font-size: 0.72rem;582 color: #5b657a;583 white-space: nowrap;584 overflow: hidden;585 text-overflow: ellipsis;586}587.termwrap pre.term, .termwrap pre {588 border: none;589 border-radius: 0;590 margin: 0;591 background: #0a0d13;592}593594/* The interface gallery */595.gallery {596 display: grid;597 grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));598 gap: 1.2rem;599 margin: 1.4rem 0 2.6rem;600 align-items: start;601}602.gallery figure { margin: 0; min-width: 0; }603.gallery .termwrap { margin: 0; }604.gallery figcaption {605 font-size: 0.84rem;606 color: var(--dim);607 padding: 0.55rem 0.2rem 0;608 line-height: 1.5;609}610.gallery figcaption b { color: var(--text-strong); font-weight: 600; }611@media (max-width: 880px) { .gallery { grid-template-columns: 1fr; } }612613/* Hero glow — the magma under the obsidian. */614.hero { position: relative; }615.hero::before {616 content: "";617 position: absolute;618 top: -6rem;619 left: -12%;620 width: 70%;621 height: 22rem;622 background: radial-gradient(closest-side, rgba(255, 107, 53, 0.14), transparent 72%);623 pointer-events: none;624 z-index: -1;625}626html[data-theme="light"] .hero::before {627 background: radial-gradient(closest-side, rgba(216, 74, 16, 0.10), transparent 72%);628}629630/* Stats band under the hero */631.stats {632 display: flex;633 flex-wrap: wrap;634 gap: 2.2rem;635 margin: 2.4rem 0 0.6rem;636}637.stats .stat b {638 display: block;639 font-family: var(--mono);640 font-size: 1.45rem;641 color: var(--text-strong);642 line-height: 1.2;643}644.stats .stat span {645 font-size: 0.78rem;646 color: var(--dimmer);647 text-transform: uppercase;648 letter-spacing: 0.08em;649}650651/* Palette / selector mocks */652.term .sel { background: rgba(255, 107, 53, 0.18); color: #eceff4; }653.term .match { color: #ff6b35; font-weight: 700; }654.term .cursor { background: #c9d1e3; color: #0a0d13; }655656/* Intra-line diff emphasis */657.term .d-add { background: rgba(126, 231, 135, 0.16); }658.term .d-del { background: rgba(255, 92, 87, 0.16); }659.term .d-add-hi { background: rgba(126, 231, 135, 0.42); color: #eceff4; }660.term .d-del-hi { background: rgba(255, 92, 87, 0.42); color: #eceff4; }661