spb/khaelor Public

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:root {13  --bg: #0d1017;14  --bg-alt: #12161f;15  --bg-code: #10141d;16  --bg-inline: #1a1f2b;17  --border: #222836;18  --border-soft: #1a1f2a;19  --text: #d8dee9;20  --text-strong: #eceff4;21  --dim: #8b93a5;22  --dimmer: #5c6372;23  --accent: #7aa2f7;24  --accent-soft: rgba(122, 162, 247, 0.12);25  --success: #9ece6a;26  --warning: #e0af68;27  --error: #f7768e;28  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;29  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;30  color-scheme: dark;31}3233html[data-theme="light"] {34  --bg: #fbfbfc;35  --bg-alt: #f3f4f7;36  --bg-code: #f5f6f8;37  --bg-inline: #eceef3;38  --border: #dde0e8;39  --border-soft: #e8eaf0;40  --text: #2a3040;41  --text-strong: #14181f;42  --dim: #646b7a;43  --dimmer: #949bab;44  --accent: #3661c4;45  --accent-soft: rgba(54, 97, 196, 0.09);46  --success: #467a1c;47  --warning: #96660e;48  --error: #c53b58;49  color-scheme: light;50}5152/* ───────────────────────── base ───────────────────────── */5354* { box-sizing: border-box; }5556html { scroll-behavior: smooth; }5758body {59  margin: 0;60  background: var(--bg);61  color: var(--text);62  font-family: var(--sans);63  font-size: 16px;64  line-height: 1.65;65  -webkit-font-smoothing: antialiased;66}6768a { color: var(--accent); text-decoration: none; }69a:hover { text-decoration: underline; }7071h1, h2, h3, h4 {72  color: var(--text-strong);73  line-height: 1.25;74  font-weight: 650;75  margin: 2.2em 0 0.6em;76}77h1 { font-size: 1.9rem; margin-top: 0.5em; }78h2 { font-size: 1.35rem; padding-bottom: 0.35em; border-bottom: 1px solid var(--border-soft); }79h3 { font-size: 1.08rem; }80h4 { font-size: 0.95rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }8182h2 a.anchor, h3 a.anchor {83  color: var(--dimmer);84  margin-left: 0.4em;85  opacity: 0;86  font-weight: 400;87}88h2:hover a.anchor, h3:hover a.anchor { opacity: 1; }8990p.lead { font-size: 1.1rem; color: var(--dim); }9192hr { border: none; border-top: 1px solid var(--border-soft); margin: 2.5rem 0; }9394/* ───────────────────────── code ───────────────────────── */9596code {97  font-family: var(--mono);98  font-size: 0.86em;99  background: var(--bg-inline);100  padding: 0.14em 0.38em;101  border-radius: 4px;102  color: var(--text-strong);103}104105pre {106  position: relative;107  background: var(--bg-code);108  border: 1px solid var(--border-soft);109  border-radius: 8px;110  padding: 0.9rem 1.1rem;111  overflow-x: auto;112  line-height: 1.55;113  margin: 1.1rem 0;114}115pre code {116  background: none;117  padding: 0;118  font-size: 0.83rem;119  color: var(--text);120  display: block;121}122123pre .copy-btn {124  position: absolute;125  top: 0.5rem;126  right: 0.5rem;127  font-family: var(--mono);128  font-size: 0.7rem;129  color: var(--dim);130  background: var(--bg-alt);131  border: 1px solid var(--border);132  border-radius: 5px;133  padding: 0.25rem 0.6rem;134  cursor: pointer;135  opacity: 0;136  transition: opacity 120ms ease;137}138pre:hover .copy-btn, pre .copy-btn:focus { opacity: 1; }139pre .copy-btn:hover { color: var(--text-strong); border-color: var(--dim); }140pre .copy-btn.copied { color: var(--success); border-color: var(--success); }141142/* terminal-flavored blocks (transcripts, panels) */143pre.term {144  background: #0a0d13;145  border-color: #1d2330;146  color: #c6cdda;147}148html[data-theme="light"] pre.term {149  background: #14181f;150  border-color: #14181f;151  color: #c6cdda;152}153pre.term code { color: inherit; }154155.t-dim { color: #6b7280; }156.t-accent { color: #7aa2f7; }157.t-ok { color: #9ece6a; }158.t-warn { color: #e0af68; }159.t-err { color: #f7768e; }160.t-b { font-weight: 700; color: #eceff4; }161162/* ───────────────────────── layout ───────────────────────── */163164.site-header {165  position: sticky;166  top: 0;167  z-index: 10;168  background: color-mix(in srgb, var(--bg) 88%, transparent);169  backdrop-filter: blur(8px);170  border-bottom: 1px solid var(--border-soft);171}172.site-header .inner {173  max-width: 1200px;174  margin: 0 auto;175  padding: 0.7rem 1.4rem;176  display: flex;177  align-items: center;178  gap: 1.6rem;179}180.wordmark {181  font-family: var(--mono);182  font-weight: 700;183  font-size: 0.95rem;184  letter-spacing: 0.22em;185  color: var(--text-strong);186}187.wordmark:hover { text-decoration: none; color: var(--accent); }188.wordmark .glyph { color: var(--accent); margin-right: 0.45em; }189190.site-header nav { display: flex; gap: 1.2rem; margin-left: auto; align-items: center; }191.site-header nav a {192  color: var(--dim);193  font-size: 0.88rem;194}195.site-header nav a:hover { color: var(--text-strong); text-decoration: none; }196.site-header nav a.active { color: var(--text-strong); }197198#theme-toggle {199  background: none;200  border: 1px solid var(--border);201  color: var(--dim);202  border-radius: 6px;203  font-family: var(--mono);204  font-size: 0.75rem;205  padding: 0.28rem 0.6rem;206  cursor: pointer;207}208#theme-toggle:hover { color: var(--text-strong); border-color: var(--dim); }209210.page {211  max-width: 1200px;212  margin: 0 auto;213  padding: 0 1.4rem 4rem;214}215216/* docs two-column */217.docs-layout {218  display: grid;219  grid-template-columns: 230px minmax(0, 1fr);220  gap: 3rem;221  align-items: start;222}223.sidebar {224  position: sticky;225  top: 4.2rem;226  padding-top: 2rem;227  font-size: 0.87rem;228  max-height: calc(100vh - 4.2rem);229  overflow-y: auto;230}231.sidebar .group {232  margin-bottom: 1.4rem;233}234.sidebar .group-title {235  font-family: var(--mono);236  font-size: 0.68rem;237  text-transform: uppercase;238  letter-spacing: 0.12em;239  color: var(--dimmer);240  margin-bottom: 0.5rem;241}242.sidebar a {243  display: block;244  color: var(--dim);245  padding: 0.24rem 0.6rem;246  border-left: 2px solid transparent;247  border-radius: 0 4px 4px 0;248}249.sidebar a:hover { color: var(--text-strong); text-decoration: none; }250.sidebar a.active {251  color: var(--accent);252  border-left-color: var(--accent);253  background: var(--accent-soft);254}255256.content { padding-top: 2rem; min-width: 0; }257.content > :first-child { margin-top: 0; }258259@media (max-width: 860px) {260  .docs-layout { grid-template-columns: 1fr; gap: 0; }261  .sidebar { position: static; max-height: none; border-bottom: 1px solid var(--border-soft); padding-bottom: 1rem; }262  .sidebar .group { margin-bottom: 0.8rem; }263}264265/* ───────────────────────── tables ───────────────────────── */266267table {268  border-collapse: collapse;269  width: 100%;270  margin: 1.2rem 0;271  font-size: 0.88rem;272}273th, td {274  text-align: left;275  padding: 0.5rem 0.8rem;276  border-bottom: 1px solid var(--border-soft);277  vertical-align: top;278}279th {280  color: var(--dim);281  font-weight: 600;282  font-size: 0.78rem;283  text-transform: uppercase;284  letter-spacing: 0.06em;285}286td code { white-space: nowrap; }287td.wrap code { white-space: normal; }288289kbd {290  font-family: var(--mono);291  font-size: 0.78em;292  background: var(--bg-inline);293  border: 1px solid var(--border);294  border-bottom-width: 2px;295  border-radius: 5px;296  padding: 0.1em 0.45em;297  color: var(--text-strong);298  white-space: nowrap;299}300301/* ───────────────────────── callouts ───────────────────────── */302303.note, .warn {304  border-left: 3px solid var(--accent);305  background: var(--accent-soft);306  border-radius: 0 8px 8px 0;307  padding: 0.7rem 1.1rem;308  margin: 1.2rem 0;309  font-size: 0.92rem;310}311.warn {312  border-left-color: var(--warning);313  background: color-mix(in srgb, var(--warning) 9%, transparent);314}315.note > :first-child, .warn > :first-child { margin-top: 0; }316.note > :last-child, .warn > :last-child { margin-bottom: 0; }317318/* ───────────────────────── hero (index) ───────────────────────── */319320.hero {321  padding: 5rem 0 3rem;322  max-width: 780px;323}324.hero .kicker {325  font-family: var(--mono);326  font-size: 0.78rem;327  letter-spacing: 0.28em;328  color: var(--accent);329  margin-bottom: 1.2rem;330}331.hero h1 {332  font-size: 2.6rem;333  margin: 0 0 0.9rem;334  letter-spacing: -0.015em;335}336.hero p.tagline {337  font-size: 1.18rem;338  color: var(--dim);339  margin: 0 0 2.2rem;340  max-width: 620px;341}342.hero .principle {343  font-family: var(--mono);344  font-size: 0.85rem;345  color: var(--dimmer);346  margin-top: 1.6rem;347}348349.install-line {350  display: flex;351  align-items: center;352  gap: 0.8rem;353  background: var(--bg-code);354  border: 1px solid var(--border);355  border-radius: 10px;356  padding: 0.95rem 1.2rem;357  font-family: var(--mono);358  font-size: 0.92rem;359  max-width: 640px;360}361.install-line .prompt { color: var(--success); user-select: none; }362.install-line code { background: none; padding: 0; flex: 1; overflow-x: auto; white-space: nowrap; }363.install-line button {364  font-family: var(--mono);365  font-size: 0.72rem;366  color: var(--dim);367  background: var(--bg-alt);368  border: 1px solid var(--border);369  border-radius: 6px;370  padding: 0.3rem 0.7rem;371  cursor: pointer;372  flex-shrink: 0;373}374.install-line button:hover { color: var(--text-strong); border-color: var(--dim); }375.install-line button.copied { color: var(--success); border-color: var(--success); }376377.hero .cta-row { margin-top: 1.3rem; display: flex; gap: 1.4rem; font-size: 0.9rem; }378379/* feature grid */380.features {381  display: grid;382  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));383  gap: 1rem;384  margin: 2.5rem 0;385}386.feature {387  border: 1px solid var(--border-soft);388  border-radius: 10px;389  padding: 1.1rem 1.2rem;390  background: var(--bg-alt);391}392.feature .glyph {393  font-family: var(--mono);394  color: var(--accent);395  font-size: 0.95rem;396}397.feature h3 { margin: 0.4rem 0 0.35rem; font-size: 0.98rem; }398.feature p { margin: 0; font-size: 0.86rem; color: var(--dim); }399400.section-title {401  font-family: var(--mono);402  font-size: 0.72rem;403  text-transform: uppercase;404  letter-spacing: 0.2em;405  color: var(--dimmer);406  margin: 3.5rem 0 1rem;407}408409/* footer */410.site-footer {411  border-top: 1px solid var(--border-soft);412  margin-top: 2rem;413}414.site-footer .inner {415  max-width: 1200px;416  margin: 0 auto;417  padding: 1.6rem 1.4rem;418  display: flex;419  gap: 1.5rem;420  font-size: 0.82rem;421  color: var(--dimmer);422  flex-wrap: wrap;423}424.site-footer a { color: var(--dim); }425426/* prev/next pager */427.pager {428  display: flex;429  justify-content: space-between;430  margin-top: 3.5rem;431  padding-top: 1.2rem;432  border-top: 1px solid var(--border-soft);433  font-size: 0.9rem;434  gap: 1rem;435}436.pager .label { display: block; font-size: 0.72rem; color: var(--dimmer); text-transform: uppercase; letter-spacing: 0.08em; }437.pager .next { text-align: right; margin-left: auto; }438439@media (max-width: 640px) {440  .hero { padding-top: 3rem; }441  .hero h1 { font-size: 2rem; }442  body { font-size: 15px; }443}444