keysat-docs/docs.css

/* ============================================================
   Keysat docs — shared layout. Inline-only deps allowed.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --navy-950:#0E1F33; --navy-900:#142A47; --navy-800:#1E3A5F; --navy-700:#2A4A75;
  --navy-100:#E4EAF1;
  --cream-50:#FBF9F2; --cream-100:#F5F1E8; --cream-200:#EDE7D7;
  --gold-700:#8A6F3D; --gold-500:#BFA068; --gold-400:#D4B985;
  --ink-900:#0E1F33; --ink-700:#2C3E54; --ink-500:#5A6B7F; --ink-400:#7E8C9D;
  --success:#2D7A5F; --success-bg:#E3F0EA;
  --warning:#B8861F; --warning-bg:#F7EFD7;
  --danger:#B23A3A; --danger-bg:#F4E0E0;
  --border-1:rgba(14,31,51,0.12);
  --border-2:rgba(14,31,51,0.20);
  --font-display:'Manrope','Helvetica Neue',Arial,sans-serif;
  --font-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

*{box-sizing:border-box} html,body{margin:0;padding:0}
body{
  font-family:var(--font-body); color:var(--ink-900); background:var(--cream-100);
  background-image:
    radial-gradient(rgba(14,31,51,0.022) 1px, transparent 1px),
    radial-gradient(rgba(138,111,61,0.020) 1px, transparent 1px);
  background-size:3px 3px, 7px 7px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--navy-800); text-decoration:none}
a:hover{text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px}

/* Top nav */
.topnav{
  position:sticky; top:0; z-index:10;
  background:rgba(245,241,232,0.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-1);
  padding:14px 28px; display:flex; align-items:center; gap:18px;
}
.topnav .brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:500;
  color:var(--navy-900); font-size:14px;
  letter-spacing:0.28em; text-transform:uppercase;
}
.topnav .brand img{width:26px; height:26px}
.topnav .docs-tag{
  font-size:11px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--gold-700);
  padding-left:10px; border-left:1px solid var(--border-2);
}
.topnav nav{margin-left:auto; display:flex; gap:22px; font-size:13.5px; color:var(--ink-700)}
.topnav nav a{color:var(--ink-700)}
.topnav nav a:hover{color:var(--navy-900); text-decoration:none}
.topnav nav a.active{color:var(--navy-900); font-weight:600}

/* Layout */
.layout{
  display:grid; grid-template-columns:240px 1fr 220px;
  max-width:1280px; margin:0 auto; gap:32px;
  padding:28px 28px 64px;
}

aside.side{
  position:sticky; top:74px; align-self:start;
  font-size:13.5px; max-height:calc(100vh - 90px);
  overflow:auto; padding-right:8px;
}
aside.side .group{margin-bottom:18px}
aside.side .group .glabel{
  font-size:10.5px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--gold-700);
  margin:6px 8px 6px;
}
aside.side a{
  display:block; padding:5px 10px; border-radius:5px;
  color:var(--ink-700); line-height:1.4;
}
aside.side a:hover{background:var(--cream-200); text-decoration:none}
aside.side a.active{background:var(--navy-800); color:var(--cream-50); font-weight:600}

main.prose{min-width:0}
.prose .crumb{font-size:12px; color:var(--ink-500); margin-bottom:8px; letter-spacing:0.04em}
.prose h1{
  font-family:var(--font-display); font-weight:500; font-size:38px;
  letter-spacing:-0.022em; color:var(--navy-950);
  margin:0 0 8px; line-height:1.1;
}
.prose .lead{
  font-size:17px; line-height:1.55; color:var(--ink-700);
  margin:0 0 24px; max-width:640px;
}
.prose h2{
  font-family:var(--font-display); font-weight:700; font-size:24px;
  letter-spacing:-0.015em; color:var(--navy-950);
  margin:36px 0 12px;
  padding-top:24px; border-top:1px solid var(--border-1);
}
.prose h3{
  font-family:var(--font-display); font-weight:700; font-size:17px;
  color:var(--navy-950); margin:22px 0 8px; letter-spacing:-0.01em;
}
.prose p{font-size:15px; line-height:1.65; color:var(--ink-700); margin:0 0 14px; max-width:680px}
.prose ul, .prose ol{padding-left:22px; margin:0 0 14px; max-width:680px}
.prose li{font-size:15px; line-height:1.65; color:var(--ink-700); margin-bottom:4px}
.prose code{
  font-family:var(--font-mono); font-size:13px;
  background:var(--cream-200); padding:2px 6px; border-radius:4px;
  color:var(--navy-900);
}
.prose strong{color:var(--navy-950); font-weight:700}
.prose em{color:var(--ink-700)}
.prose a{color:var(--navy-800); font-weight:500}

pre.code{
  background:var(--navy-950); color:var(--cream-50);
  padding:18px 22px; border-radius:10px;
  overflow-x:auto;
  font-family:var(--font-mono); font-size:13px; line-height:1.7;
  margin:14px 0 20px; border:1px solid var(--navy-900);
  max-width:680px;
}
pre.code .c{color:rgba(245,241,232,0.45)}
pre.code .k{color:var(--gold-400)}
pre.code .s{color:#d4b985}
pre.code .f{color:var(--cream-50)}
pre.code .n{color:#a6b7cf}
pre.code .p{color:rgba(245,241,232,0.55)}

.callout{
  border:1px solid var(--border-1); border-left:3px solid var(--gold-500);
  background:var(--cream-50); border-radius:8px;
  padding:14px 16px; margin:14px 0 22px;
  display:flex; gap:12px; align-items:flex-start;
  max-width:680px;
}
.callout [data-lucide]{
  color:var(--gold-700); width:18px; height:18px;
  flex-shrink:0; margin-top:2px;
}
.callout p{margin:0; font-size:14px}
.callout strong{color:var(--navy-950); font-weight:700}
.callout.warn{border-left-color:var(--warning); background:var(--warning-bg)}
.callout.warn [data-lucide]{color:var(--warning)}
.callout.danger{border-left-color:var(--danger); background:var(--danger-bg)}
.callout.danger [data-lucide]{color:var(--danger)}

/* Right TOC */
aside.toc{
  position:sticky; top:74px; align-self:start;
  font-size:12.5px; border-left:1px solid var(--border-1);
  padding:8px 0 8px 18px;
  max-height:calc(100vh - 90px); overflow:auto;
}
aside.toc .label{
  font-size:10.5px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--gold-700); margin-bottom:10px;
}
aside.toc a{
  display:block; padding:4px 0; color:var(--ink-500); line-height:1.4;
}
aside.toc a:hover{color:var(--navy-900); text-decoration:none}
aside.toc a.active{
  color:var(--navy-900); font-weight:600;
  border-left:2px solid var(--gold-500);
  margin-left:-20px; padding-left:18px;
}

/* Tables in prose */
table.t{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--cream-50); border:1px solid var(--border-1);
  border-radius:10px; overflow:hidden; margin:14px 0 20px; max-width:680px;
}
table.t th{
  text-align:left; font-size:11px; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-500);
  padding:12px 16px; background:var(--cream-100);
  border-bottom:1px solid var(--border-1);
}
table.t td{
  padding:12px 16px; border-bottom:1px solid var(--border-1);
  font-size:13.5px; color:var(--ink-700); vertical-align:top;
}
table.t tr:last-child td{border-bottom:0}
table.t code{font-size:12.5px}

/* Cards inside prose for "what's next" links */
.next-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin:18px 0 24px; max-width:680px;
}
.next-card{
  display:block; background:var(--cream-50);
  border:1px solid var(--border-1); border-radius:10px;
  padding:18px; transition:all 120ms;
}
.next-card:hover{
  border-color:var(--border-2); text-decoration:none;
  background:var(--cream-100);
}
.next-card .eyebrow{
  font-size:10.5px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--gold-700);
  margin-bottom:6px; display:block;
}
.next-card h4{
  font-family:var(--font-display); font-weight:700; font-size:15px;
  margin:0 0 4px; letter-spacing:-0.01em; color:var(--navy-950);
}
.next-card p{
  font-size:13px; color:var(--ink-700); line-height:1.5;
  margin:0; max-width:none;
}

/* Code-language tabs (for SDK examples) */
.lang-tabs{
  display:flex; gap:0; margin:14px 0 0; max-width:680px;
  border-bottom:1px solid var(--border-1);
}
.lang-tabs button{
  background:transparent; border:0; cursor:pointer;
  font-family:var(--font-body); font-weight:500; font-size:13px;
  color:var(--ink-500); padding:10px 16px;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.lang-tabs button:hover{color:var(--navy-900)}
.lang-tabs button.active{color:var(--navy-900); font-weight:600; border-bottom-color:var(--gold-500)}

@media (max-width: 980px){
  .layout{grid-template-columns:1fr; gap:18px; padding:18px}
  aside.side, aside.toc{position:static; max-height:none; overflow:visible; border:0; padding:0}
  aside.toc{display:none}
  .topnav nav{display:none}
  .next-grid{grid-template-columns:1fr}
}