Initial public commit
This commit is contained in:
Keysat
@@ -0,0 +1,239 @@
|
||||
/* ============================================================
|
||||
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}
|
||||
}
|
||||
Reference in New Issue
Block a user