Documentation - Free HTML/CSS UI Kit
A premium tech developer portal UI Kit featuring clean layouts, developer violet accents, sleek code boxes, code-focused typography, and extensive developer tools.
Download Full Kit (.zip)
Complete kit with all components & styles
Just need one component?
Download base.css and add the following line to your HTML:
<link rel="stylesheet" href="base.css">
Then grab a component below and add it to your HTML.
Color Palette
Paper White
#FAFAFC
Developer Indigo
#6366F1
Charcoal Black
#111827
Pure White
#FFFFFF
Muted Slate
#4B5563
Typography
Hero Sections
Developer Search Spotlight
HTML
<section class="doc-hero-centered">
<span class="doc-badge doc-badge-primary">Developer Portal Docs</span>
<h1 class="doc-hero-title">How can we help you build today?</h1>
<p class="doc-hero-subtitle">Search our developer guides, interactive API endpoints reference manuals, or discover code snippet helpers.</p>
<!-- Large search block -->
<div class="doc-hero-search-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="doc-search-icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
<input type="text" class="doc-hero-search-input" placeholder="Search guides, APIs, endpoints, error logs...">
<kbd class="doc-hero-kbd">⌘K</kbd>
</div>
<!-- Quick Shortcuts Row -->
<div class="doc-hero-shortcuts">
<span class="doc-shortcut-label">Popular guides:</span>
<a href="#" class="doc-shortcut-tag">Quickstart</a>
<a href="#" class="doc-shortcut-tag">Auth & Keys</a>
<a href="#" class="doc-shortcut-tag">Webhooks</a>
<a href="#" class="doc-shortcut-tag">Node SDK</a>
</div>
</section>
CSS (Component Only)
/* Component: Developer Search Spotlight */
/* NOTE: This component requires base.css to be included in your page. */
.doc-hero-centered {
width: 100%;
max-width: 950px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 4rem 2rem;
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow);
}
.doc-hero-title {
font-family: var(--doc-font-heading);
font-size: 3.25rem;
font-weight: 800;
color: var(--doc-text);
line-height: 1.15;
letter-spacing: -0.02em;
margin-top: 1rem;
margin-bottom: 1rem;
max-width: 800px;
}
.doc-hero-subtitle {
font-size: 1rem;
color: var(--doc-text-muted);
line-height: 1.6;
margin-bottom: 2.5rem;
max-width: 680px;
}
/* Large Search Wrapper */
.doc-hero-search-wrapper {
position: relative;
width: 100%;
max-width: 580px;
display: flex;
align-items: center;
margin-bottom: 2rem;
}
.doc-hero-search-wrapper .doc-search-icon {
position: absolute;
left: 1.25rem;
width: 18px;
height: 18px;
color: var(--doc-text-muted);
pointer-events: none;
}
.doc-hero-search-input {
width: 100%;
background-color: var(--doc-surface-2);
border: 1px solid var(--doc-border-strong);
border-radius: var(--doc-radius-lg);
padding: 0.95rem 1.25rem 0.95rem 3rem;
font-family: var(--doc-font-body);
font-size: 0.95rem;
color: var(--doc-text);
outline: none;
box-shadow: var(--doc-shadow-sm);
transition: var(--doc-transition);
}
.doc-hero-search-input:focus {
border-color: var(--doc-primary);
background-color: var(--doc-surface);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), var(--doc-shadow);
}
.doc-hero-kbd {
position: absolute;
right: 1.25rem;
font-family: var(--doc-font-code);
font-size: 0.75rem;
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
padding: 0.2rem 0.45rem;
border-radius: var(--doc-radius-sm);
color: var(--doc-text-muted);
pointer-events: none;
box-shadow: var(--doc-shadow-sm);
}
/* Quick shortcuts */
.doc-hero-shortcuts {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
}
.doc-shortcut-label {
font-size: 0.8rem;
font-weight: 600;
color: var(--doc-text-light);
}
.doc-shortcut-tag {
font-size: 0.8rem;
font-weight: 600;
color: var(--doc-text-muted);
background-color: var(--doc-surface-2);
border: 1px solid var(--doc-border);
padding: 0.25rem 0.75rem;
border-radius: var(--doc-radius-pill);
text-decoration: none;
transition: var(--doc-transition);
}
.doc-shortcut-tag:hover {
color: var(--doc-primary);
border-color: var(--doc-primary);
background-color: var(--doc-primary-muted);
}
@media (max-width: 768px) {
.doc-hero-title {
font-size: 2.25rem;
}
.doc-hero-subtitle {
font-size: 0.95rem;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap');
/* =========================================
Documentation Design System (doc-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--doc-bg: #FAFAFC; /* Paper White */
--doc-surface: #FFFFFF; /* Pure White */
--doc-surface-2: #F3F4F6; /* Muted Ice */
--doc-code-bg: #0F172A; /* Slate Blue code bg */
/* Brand Palette */
--doc-primary: #6366F1; /* Dev Indigo */
--doc-primary-hover: #4F46E5;
--doc-primary-muted: rgba(99, 102, 241, 0.08);
--doc-accent: #10B981; /* Emerald/Active Accents */
--doc-accent-hover: #059669;
--doc-accent-muted: rgba(16, 185, 129, 0.08);
--doc-danger: #EF4444;
--doc-danger-muted: rgba(239, 68, 68, 0.08);
/* Text */
--doc-text: #111827; /* Charcoal black */
--doc-text-muted: #4B5563; /* Slate grey */
--doc-text-light: #9CA3AF;
/* Borders */
--doc-border: #E5E7EB; /* Clean light border */
--doc-border-strong: #D1D5DB;
--doc-border-glow: rgba(99, 102, 241, 0.25);
/* Geometric Rounded Shapes */
--doc-radius-sm: 4px;
--doc-radius: 8px;
--doc-radius-lg: 12px;
--doc-radius-pill: 999px;
/* Fonts */
--doc-font-heading: 'Outfit', sans-serif;
--doc-font-body: 'Inter', sans-serif;
--doc-font-code: 'Fira Code', monospace;
/* Shadows */
--doc-shadow-sm: 0 2px 8px rgba(0,0,0,0.03);
--doc-shadow: 0 8px 30px rgba(0,0,0,0.05);
--doc-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.08);
/* Transition */
--doc-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--doc-font-body);
color: var(--doc-text);
background-color: var(--doc-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.doc-card {
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow);
padding: 2.25rem;
transition: var(--doc-transition);
}
.doc-card:hover {
border-color: var(--doc-border-strong);
box-shadow: 0 10px 35px rgba(0,0,0,0.06);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--doc-font-heading);
font-weight: 700;
margin: 0;
color: var(--doc-text);
line-height: 1.25;
letter-spacing: -0.01em;
}
p {
font-family: var(--doc-font-body);
color: var(--doc-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.doc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.4rem;
font-family: var(--doc-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--doc-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--doc-transition);
white-space: nowrap;
user-select: none;
}
.doc-btn-primary {
background-color: var(--doc-primary);
color: #fff;
border-color: var(--doc-primary);
}
.doc-btn-primary:hover {
background-color: var(--doc-primary-hover);
border-color: var(--doc-primary-hover);
transform: translateY(-1px);
}
.doc-btn-accent {
background-color: var(--doc-accent);
color: #fff;
border-color: var(--doc-accent);
}
.doc-btn-accent:hover {
background-color: var(--doc-accent-hover);
border-color: var(--doc-accent-hover);
transform: translateY(-1px);
}
.doc-btn-outline {
background-color: var(--doc-surface);
color: var(--doc-text-muted);
border-color: var(--doc-border);
}
.doc-btn-outline:hover {
background-color: var(--doc-surface-2);
border-color: var(--doc-border-strong);
color: var(--doc-text);
}
.doc-btn-ghost {
background-color: transparent;
color: var(--doc-text-muted);
border-color: transparent;
}
.doc-btn-ghost:hover {
background-color: var(--doc-surface-2);
color: var(--doc-text);
}
.doc-btn-sm { padding: 0.45rem 1rem; font-size: 0.8rem; }
.doc-btn-lg { padding: 0.9rem 1.8rem; font-size: 0.95rem; }
.doc-btn-block { width: 100%; }
.doc-btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--doc-radius); }
/* ── Form Controls ────────────── */
.doc-input {
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius);
font-family: var(--doc-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--doc-text);
background-color: var(--doc-surface);
outline: none;
transition: var(--doc-transition);
}
.doc-input::placeholder { color: var(--doc-text-light); }
.doc-input:focus {
border-color: var(--doc-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.doc-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--doc-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--doc-text-muted);
}
/* Custom select */
.doc-select {
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius);
font-family: var(--doc-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--doc-text);
background-color: var(--doc-surface);
outline: none;
transition: var(--doc-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1rem;
cursor: pointer;
}
.doc-select:focus {
border-color: var(--doc-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
/* ── Badges ───────────────────── */
.doc-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.6rem;
border-radius: var(--doc-radius-sm);
font-family: var(--doc-font-code);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
border: 1px solid transparent;
}
.doc-badge-primary { background-color: var(--doc-primary-muted); color: var(--doc-primary); border-color: rgba(99, 102, 241, 0.2); }
.doc-badge-accent { background-color: var(--doc-accent-muted); color: var(--doc-accent); border-color: rgba(16, 185, 129, 0.2); }
.doc-badge-danger { background-color: var(--doc-danger-muted); color: var(--doc-danger); border-color: rgba(239, 68, 68, 0.2); }
.doc-badge-default { background-color: var(--doc-surface-2); color: var(--doc-text-muted); border-color: var(--doc-border); }
/* ── Code Blocks ──────────────── */
.doc-code-block {
background-color: var(--doc-code-bg);
color: #F8FAFC;
font-family: var(--doc-font-code);
font-size: 0.85rem;
padding: 1.25rem 1.5rem;
border-radius: var(--doc-radius-lg);
border: 1px solid #1E293B;
overflow-x: auto;
margin: 0;
position: relative;
}
.doc-code-copy-btn {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94A3B8;
padding: 0.35rem;
border-radius: var(--doc-radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--doc-transition);
}
.doc-code-copy-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.doc-code-copy-btn svg { width: 14px; height: 14px; }
/* ── Divider ──────────────────── */
.doc-divider { border: none; border-top: 1px solid var(--doc-border); margin: 0; }
/* ── Logo ─────────────────────── */
.doc-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--doc-font-heading);
font-size: 1.35rem;
color: var(--doc-text);
font-weight: 800;
letter-spacing: -0.02em;
}
.doc-logo-icon {
width: 28px;
height: 28px;
background-color: var(--doc-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.85rem;
font-weight: 800;
border-radius: var(--doc-radius-sm);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--doc-primary) !important; }
.text-accent { color: var(--doc-accent) !important; }
.text-muted { color: var(--doc-text-muted) !important; }
.text-light { color: var(--doc-text-light) !important; }
/* --- COMPONENT STYLES --- */
.doc-hero-centered {
width: 100%;
max-width: 950px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 4rem 2rem;
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow);
}
.doc-hero-title {
font-family: var(--doc-font-heading);
font-size: 3.25rem;
font-weight: 800;
color: var(--doc-text);
line-height: 1.15;
letter-spacing: -0.02em;
margin-top: 1rem;
margin-bottom: 1rem;
max-width: 800px;
}
.doc-hero-subtitle {
font-size: 1rem;
color: var(--doc-text-muted);
line-height: 1.6;
margin-bottom: 2.5rem;
max-width: 680px;
}
/* Large Search Wrapper */
.doc-hero-search-wrapper {
position: relative;
width: 100%;
max-width: 580px;
display: flex;
align-items: center;
margin-bottom: 2rem;
}
.doc-hero-search-wrapper .doc-search-icon {
position: absolute;
left: 1.25rem;
width: 18px;
height: 18px;
color: var(--doc-text-muted);
pointer-events: none;
}
.doc-hero-search-input {
width: 100%;
background-color: var(--doc-surface-2);
border: 1px solid var(--doc-border-strong);
border-radius: var(--doc-radius-lg);
padding: 0.95rem 1.25rem 0.95rem 3rem;
font-family: var(--doc-font-body);
font-size: 0.95rem;
color: var(--doc-text);
outline: none;
box-shadow: var(--doc-shadow-sm);
transition: var(--doc-transition);
}
.doc-hero-search-input:focus {
border-color: var(--doc-primary);
background-color: var(--doc-surface);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), var(--doc-shadow);
}
.doc-hero-kbd {
position: absolute;
right: 1.25rem;
font-family: var(--doc-font-code);
font-size: 0.75rem;
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
padding: 0.2rem 0.45rem;
border-radius: var(--doc-radius-sm);
color: var(--doc-text-muted);
pointer-events: none;
box-shadow: var(--doc-shadow-sm);
}
/* Quick shortcuts */
.doc-hero-shortcuts {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
}
.doc-shortcut-label {
font-size: 0.8rem;
font-weight: 600;
color: var(--doc-text-light);
}
.doc-shortcut-tag {
font-size: 0.8rem;
font-weight: 600;
color: var(--doc-text-muted);
background-color: var(--doc-surface-2);
border: 1px solid var(--doc-border);
padding: 0.25rem 0.75rem;
border-radius: var(--doc-radius-pill);
text-decoration: none;
transition: var(--doc-transition);
}
.doc-shortcut-tag:hover {
color: var(--doc-primary);
border-color: var(--doc-primary);
background-color: var(--doc-primary-muted);
}
@media (max-width: 768px) {
.doc-hero-title {
font-size: 2.25rem;
}
.doc-hero-subtitle {
font-size: 0.95rem;
}
}
Interactive Code Snippet Split
HTML
<section class="doc-hero-split">
<!-- Left Info Row -->
<div class="doc-split-left">
<div class="doc-show-badge-row">
<span class="doc-badge doc-badge-primary">Quickstart Guide</span>
<span class="doc-badge doc-badge-accent">v2.4.0 active</span>
</div>
<h2 class="doc-split-title">Integrate our client SDK in less than five minutes</h2>
<p class="doc-split-desc">
Indigodocs integrates into your active backend environments seamlessly. Initialize credential keys, import Node modules, and validate server telemetry in a single API loop.
</p>
<!-- Bullet Points Advantage List -->
<ul class="doc-split-features">
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="doc-bullet-icon"><polyline points="20 6 9 17 4 12"></polyline></svg>
Zero external database dependencies.
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="doc-bullet-icon"><polyline points="20 6 9 17 4 12"></polyline></svg>
Automatic thread safety & caching built-in.
</li>
</ul>
<!-- Action triggers -->
<div class="doc-split-actions">
<button class="doc-btn doc-btn-primary">
Explore Full API Reference
</button>
<button class="doc-btn doc-btn-outline">
Contact Support
</button>
</div>
</div>
<!-- Right Column: Premium Code Snippet Container -->
<div class="doc-split-right">
<div class="doc-code-block-wrapper">
<!-- Tabs -->
<div class="doc-code-tabs">
<button class="doc-code-tab active">npm</button>
<button class="doc-code-tab">yarn</button>
<button class="doc-code-tab">pnpm</button>
</div>
<pre class="doc-code-block"><code><span class="code-comment"># Install Indigodocs Node SDK</span>
<span class="code-keyword">npm install</span> @indigodocs/node-sdk
<span class="code-comment"># Initialize dev helper client</span>
<span class="code-keyword">const</span> Indigo = <span class="code-function">require</span>(<span class="code-string">'@indigodocs/node-sdk'</span>);
<span class="code-keyword">const</span> client = <span class="code-keyword">new</span> Indigo({ key: <span class="code-string">'ig_live_4242'</span> });
<span class="code-keyword">await</span> client.telemetry.validate();</code><button class="doc-code-copy-btn" aria-label="Copy code block"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button></pre>
</div>
</div>
</section>
CSS (Component Only)
/* Component: Interactive Code Snippet Split */
/* NOTE: This component requires base.css to be included in your page. */
.doc-hero-split {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 3.5rem;
padding: 3rem 2rem;
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow);
align-items: center;
}
/* Left Content Column */
.doc-split-left {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.doc-show-badge-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.doc-split-title {
font-family: var(--doc-font-heading);
font-size: 2.5rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--doc-text);
}
.doc-split-desc {
font-size: 0.95rem;
color: var(--doc-text-muted);
line-height: 1.6;
}
/* Advantage lists */
.doc-split-features {
list-style: none;
padding: 0;
margin: 0.5rem 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.doc-split-features li {
font-size: 0.9rem;
color: var(--doc-text-muted);
display: flex;
align-items: center;
gap: 0.75rem;
}
.doc-bullet-icon {
width: 16px;
height: 16px;
color: var(--doc-accent);
flex-shrink: 0;
}
/* Actions Row */
.doc-split-actions {
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}
/* Right Code Block Column */
.doc-split-right {
display: flex;
flex-direction: column;
}
.doc-code-block-wrapper {
background-color: var(--doc-code-bg);
border: 1px solid #1E293B;
border-radius: var(--doc-radius-lg);
overflow: hidden;
box-shadow: var(--doc-shadow), 0 20px 40px rgba(15, 23, 42, 0.15);
}
/* Code tabs */
.doc-code-tabs {
display: flex;
background-color: #0B0F19;
border-bottom: 1px solid #1E293B;
padding: 0 1rem;
}
.doc-code-tab {
background: none;
border: none;
padding: 0.75rem 1rem;
font-family: var(--doc-font-code);
font-size: 0.8rem;
font-weight: 600;
color: #64748B;
cursor: pointer;
transition: var(--doc-transition);
position: relative;
}
.doc-code-tab:hover {
color: #94A3B8;
}
.doc-code-tab.active {
color: var(--doc-primary);
}
.doc-code-tab.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background-color: var(--doc-primary);
}
/* Code content syntax highlight overrides */
.doc-code-block {
border-top-left-radius: 0;
border-top-right-radius: 0;
border: none;
}
.code-comment { color: #475569; font-style: italic; }
.code-keyword { color: #F43F5E; font-weight: 600; }
.code-function { color: #38BDF8; }
.code-string { color: #34D399; }
@media (max-width: 992px) {
.doc-hero-split {
grid-template-columns: 1fr;
gap: 3rem;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap');
/* =========================================
Documentation Design System (doc-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--doc-bg: #FAFAFC; /* Paper White */
--doc-surface: #FFFFFF; /* Pure White */
--doc-surface-2: #F3F4F6; /* Muted Ice */
--doc-code-bg: #0F172A; /* Slate Blue code bg */
/* Brand Palette */
--doc-primary: #6366F1; /* Dev Indigo */
--doc-primary-hover: #4F46E5;
--doc-primary-muted: rgba(99, 102, 241, 0.08);
--doc-accent: #10B981; /* Emerald/Active Accents */
--doc-accent-hover: #059669;
--doc-accent-muted: rgba(16, 185, 129, 0.08);
--doc-danger: #EF4444;
--doc-danger-muted: rgba(239, 68, 68, 0.08);
/* Text */
--doc-text: #111827; /* Charcoal black */
--doc-text-muted: #4B5563; /* Slate grey */
--doc-text-light: #9CA3AF;
/* Borders */
--doc-border: #E5E7EB; /* Clean light border */
--doc-border-strong: #D1D5DB;
--doc-border-glow: rgba(99, 102, 241, 0.25);
/* Geometric Rounded Shapes */
--doc-radius-sm: 4px;
--doc-radius: 8px;
--doc-radius-lg: 12px;
--doc-radius-pill: 999px;
/* Fonts */
--doc-font-heading: 'Outfit', sans-serif;
--doc-font-body: 'Inter', sans-serif;
--doc-font-code: 'Fira Code', monospace;
/* Shadows */
--doc-shadow-sm: 0 2px 8px rgba(0,0,0,0.03);
--doc-shadow: 0 8px 30px rgba(0,0,0,0.05);
--doc-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.08);
/* Transition */
--doc-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--doc-font-body);
color: var(--doc-text);
background-color: var(--doc-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.doc-card {
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow);
padding: 2.25rem;
transition: var(--doc-transition);
}
.doc-card:hover {
border-color: var(--doc-border-strong);
box-shadow: 0 10px 35px rgba(0,0,0,0.06);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--doc-font-heading);
font-weight: 700;
margin: 0;
color: var(--doc-text);
line-height: 1.25;
letter-spacing: -0.01em;
}
p {
font-family: var(--doc-font-body);
color: var(--doc-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.doc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.4rem;
font-family: var(--doc-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--doc-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--doc-transition);
white-space: nowrap;
user-select: none;
}
.doc-btn-primary {
background-color: var(--doc-primary);
color: #fff;
border-color: var(--doc-primary);
}
.doc-btn-primary:hover {
background-color: var(--doc-primary-hover);
border-color: var(--doc-primary-hover);
transform: translateY(-1px);
}
.doc-btn-accent {
background-color: var(--doc-accent);
color: #fff;
border-color: var(--doc-accent);
}
.doc-btn-accent:hover {
background-color: var(--doc-accent-hover);
border-color: var(--doc-accent-hover);
transform: translateY(-1px);
}
.doc-btn-outline {
background-color: var(--doc-surface);
color: var(--doc-text-muted);
border-color: var(--doc-border);
}
.doc-btn-outline:hover {
background-color: var(--doc-surface-2);
border-color: var(--doc-border-strong);
color: var(--doc-text);
}
.doc-btn-ghost {
background-color: transparent;
color: var(--doc-text-muted);
border-color: transparent;
}
.doc-btn-ghost:hover {
background-color: var(--doc-surface-2);
color: var(--doc-text);
}
.doc-btn-sm { padding: 0.45rem 1rem; font-size: 0.8rem; }
.doc-btn-lg { padding: 0.9rem 1.8rem; font-size: 0.95rem; }
.doc-btn-block { width: 100%; }
.doc-btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--doc-radius); }
/* ── Form Controls ────────────── */
.doc-input {
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius);
font-family: var(--doc-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--doc-text);
background-color: var(--doc-surface);
outline: none;
transition: var(--doc-transition);
}
.doc-input::placeholder { color: var(--doc-text-light); }
.doc-input:focus {
border-color: var(--doc-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.doc-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--doc-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--doc-text-muted);
}
/* Custom select */
.doc-select {
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius);
font-family: var(--doc-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--doc-text);
background-color: var(--doc-surface);
outline: none;
transition: var(--doc-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1rem;
cursor: pointer;
}
.doc-select:focus {
border-color: var(--doc-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
/* ── Badges ───────────────────── */
.doc-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.6rem;
border-radius: var(--doc-radius-sm);
font-family: var(--doc-font-code);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
border: 1px solid transparent;
}
.doc-badge-primary { background-color: var(--doc-primary-muted); color: var(--doc-primary); border-color: rgba(99, 102, 241, 0.2); }
.doc-badge-accent { background-color: var(--doc-accent-muted); color: var(--doc-accent); border-color: rgba(16, 185, 129, 0.2); }
.doc-badge-danger { background-color: var(--doc-danger-muted); color: var(--doc-danger); border-color: rgba(239, 68, 68, 0.2); }
.doc-badge-default { background-color: var(--doc-surface-2); color: var(--doc-text-muted); border-color: var(--doc-border); }
/* ── Code Blocks ──────────────── */
.doc-code-block {
background-color: var(--doc-code-bg);
color: #F8FAFC;
font-family: var(--doc-font-code);
font-size: 0.85rem;
padding: 1.25rem 1.5rem;
border-radius: var(--doc-radius-lg);
border: 1px solid #1E293B;
overflow-x: auto;
margin: 0;
position: relative;
}
.doc-code-copy-btn {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94A3B8;
padding: 0.35rem;
border-radius: var(--doc-radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--doc-transition);
}
.doc-code-copy-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.doc-code-copy-btn svg { width: 14px; height: 14px; }
/* ── Divider ──────────────────── */
.doc-divider { border: none; border-top: 1px solid var(--doc-border); margin: 0; }
/* ── Logo ─────────────────────── */
.doc-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--doc-font-heading);
font-size: 1.35rem;
color: var(--doc-text);
font-weight: 800;
letter-spacing: -0.02em;
}
.doc-logo-icon {
width: 28px;
height: 28px;
background-color: var(--doc-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.85rem;
font-weight: 800;
border-radius: var(--doc-radius-sm);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--doc-primary) !important; }
.text-accent { color: var(--doc-accent) !important; }
.text-muted { color: var(--doc-text-muted) !important; }
.text-light { color: var(--doc-text-light) !important; }
/* --- COMPONENT STYLES --- */
.doc-hero-split {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 3.5rem;
padding: 3rem 2rem;
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow);
align-items: center;
}
/* Left Content Column */
.doc-split-left {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.doc-show-badge-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.doc-split-title {
font-family: var(--doc-font-heading);
font-size: 2.5rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--doc-text);
}
.doc-split-desc {
font-size: 0.95rem;
color: var(--doc-text-muted);
line-height: 1.6;
}
/* Advantage lists */
.doc-split-features {
list-style: none;
padding: 0;
margin: 0.5rem 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.doc-split-features li {
font-size: 0.9rem;
color: var(--doc-text-muted);
display: flex;
align-items: center;
gap: 0.75rem;
}
.doc-bullet-icon {
width: 16px;
height: 16px;
color: var(--doc-accent);
flex-shrink: 0;
}
/* Actions Row */
.doc-split-actions {
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}
/* Right Code Block Column */
.doc-split-right {
display: flex;
flex-direction: column;
}
.doc-code-block-wrapper {
background-color: var(--doc-code-bg);
border: 1px solid #1E293B;
border-radius: var(--doc-radius-lg);
overflow: hidden;
box-shadow: var(--doc-shadow), 0 20px 40px rgba(15, 23, 42, 0.15);
}
/* Code tabs */
.doc-code-tabs {
display: flex;
background-color: #0B0F19;
border-bottom: 1px solid #1E293B;
padding: 0 1rem;
}
.doc-code-tab {
background: none;
border: none;
padding: 0.75rem 1rem;
font-family: var(--doc-font-code);
font-size: 0.8rem;
font-weight: 600;
color: #64748B;
cursor: pointer;
transition: var(--doc-transition);
position: relative;
}
.doc-code-tab:hover {
color: #94A3B8;
}
.doc-code-tab.active {
color: var(--doc-primary);
}
.doc-code-tab.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background-color: var(--doc-primary);
}
/* Code content syntax highlight overrides */
.doc-code-block {
border-top-left-radius: 0;
border-top-right-radius: 0;
border: none;
}
.code-comment { color: #475569; font-style: italic; }
.code-keyword { color: #F43F5E; font-weight: 600; }
.code-function { color: #38BDF8; }
.code-string { color: #34D399; }
@media (max-width: 992px) {
.doc-hero-split {
grid-template-columns: 1fr;
gap: 3rem;
}
}
Forms
Access Key Entry Portal
HTML
<div class="doc-login-card">
<div class="doc-login-header">
<span class="doc-logo-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="width:14px;height:14px;"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
</span>
<h2 class="doc-login-title">Sign In with Access Key</h2>
<p class="doc-login-desc">Enter your secret access credentials to sync developer environments, generate tokens, and review endpoint stats.</p>
</div>
<form class="doc-login-form" onsubmit="return false;">
<div class="doc-form-group">
<label for="email" class="doc-label">Developer Email</label>
<input type="email" id="email" class="doc-input" placeholder="[email protected]" required>
</div>
<div class="doc-form-group">
<div class="doc-label-row">
<label for="password" class="doc-label">Access Token Key</label>
<a href="#" class="doc-form-link">Need a new key?</a>
</div>
<input type="password" id="password" class="doc-input" placeholder="ig_live_••••••••••••" required>
</div>
<div class="doc-form-remember">
<label class="doc-checkbox-wrapper">
<input type="checkbox" name="remember" class="doc-checkbox" checked>
<span class="doc-checkbox-label">Keep session authenticated on this workstation</span>
</label>
</div>
<button type="submit" class="doc-btn doc-btn-primary doc-btn-block">
Start Environment Sync
</button>
<div class="doc-login-footer">
<span class="doc-signup-prompt">Need client accounts? <a href="#" class="doc-signup-link">Register developer team.</a></span>
</div>
</form>
</div>
CSS (Component Only)
/* Component: Access Key Entry Portal */
/* NOTE: This component requires base.css to be included in your page. */
.doc-login-card {
max-width: 420px;
margin: 0 auto;
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow);
padding: 3rem 2.5rem;
}
.doc-login-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 2rem;
}
.doc-login-header .doc-logo-icon {
margin-bottom: 1rem;
width: 44px;
height: 44px;
font-size: 1.25rem;
}
.doc-login-title {
font-family: var(--doc-font-heading);
font-size: 1.75rem;
font-weight: 800;
margin-bottom: 0.5rem;
color: var(--doc-text);
}
.doc-login-desc {
font-size: 0.825rem;
color: var(--doc-text-muted);
line-height: 1.5;
}
.doc-login-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.doc-form-group {
display: flex;
flex-direction: column;
align-items: stretch;
}
.doc-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.45rem;
}
.doc-label-row .doc-label {
margin-bottom: 0;
}
.doc-form-link {
font-size: 0.75rem;
font-weight: 600;
color: var(--doc-text-muted);
text-decoration: none;
transition: var(--doc-transition);
}
.doc-form-link:hover {
color: var(--doc-primary);
text-decoration: underline;
}
/* Custom Checkbox */
.doc-form-remember {
display: flex;
align-items: center;
}
.doc-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.doc-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--doc-border-strong);
border-radius: var(--doc-radius-sm);
outline: none;
background-color: var(--doc-surface-2);
cursor: pointer;
transition: var(--doc-transition);
position: relative;
flex-shrink: 0;
}
.doc-checkbox:checked {
background-color: var(--doc-primary);
border-color: var(--doc-primary);
}
.doc-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.doc-checkbox-label {
font-size: 0.8rem;
color: var(--doc-text-muted);
}
/* Footer sign up prompt */
.doc-login-footer {
border-top: 1px solid var(--doc-border);
padding-top: 1.25rem;
margin-top: 0.5rem;
text-align: center;
}
.doc-signup-prompt {
font-size: 0.8rem;
color: var(--doc-text-muted);
}
.doc-signup-link {
color: var(--doc-text);
font-weight: 700;
text-decoration: none;
transition: var(--doc-transition);
}
.doc-signup-link:hover {
color: var(--doc-primary);
text-decoration: underline;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap');
/* =========================================
Documentation Design System (doc-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--doc-bg: #FAFAFC; /* Paper White */
--doc-surface: #FFFFFF; /* Pure White */
--doc-surface-2: #F3F4F6; /* Muted Ice */
--doc-code-bg: #0F172A; /* Slate Blue code bg */
/* Brand Palette */
--doc-primary: #6366F1; /* Dev Indigo */
--doc-primary-hover: #4F46E5;
--doc-primary-muted: rgba(99, 102, 241, 0.08);
--doc-accent: #10B981; /* Emerald/Active Accents */
--doc-accent-hover: #059669;
--doc-accent-muted: rgba(16, 185, 129, 0.08);
--doc-danger: #EF4444;
--doc-danger-muted: rgba(239, 68, 68, 0.08);
/* Text */
--doc-text: #111827; /* Charcoal black */
--doc-text-muted: #4B5563; /* Slate grey */
--doc-text-light: #9CA3AF;
/* Borders */
--doc-border: #E5E7EB; /* Clean light border */
--doc-border-strong: #D1D5DB;
--doc-border-glow: rgba(99, 102, 241, 0.25);
/* Geometric Rounded Shapes */
--doc-radius-sm: 4px;
--doc-radius: 8px;
--doc-radius-lg: 12px;
--doc-radius-pill: 999px;
/* Fonts */
--doc-font-heading: 'Outfit', sans-serif;
--doc-font-body: 'Inter', sans-serif;
--doc-font-code: 'Fira Code', monospace;
/* Shadows */
--doc-shadow-sm: 0 2px 8px rgba(0,0,0,0.03);
--doc-shadow: 0 8px 30px rgba(0,0,0,0.05);
--doc-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.08);
/* Transition */
--doc-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--doc-font-body);
color: var(--doc-text);
background-color: var(--doc-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.doc-card {
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow);
padding: 2.25rem;
transition: var(--doc-transition);
}
.doc-card:hover {
border-color: var(--doc-border-strong);
box-shadow: 0 10px 35px rgba(0,0,0,0.06);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--doc-font-heading);
font-weight: 700;
margin: 0;
color: var(--doc-text);
line-height: 1.25;
letter-spacing: -0.01em;
}
p {
font-family: var(--doc-font-body);
color: var(--doc-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.doc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.4rem;
font-family: var(--doc-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--doc-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--doc-transition);
white-space: nowrap;
user-select: none;
}
.doc-btn-primary {
background-color: var(--doc-primary);
color: #fff;
border-color: var(--doc-primary);
}
.doc-btn-primary:hover {
background-color: var(--doc-primary-hover);
border-color: var(--doc-primary-hover);
transform: translateY(-1px);
}
.doc-btn-accent {
background-color: var(--doc-accent);
color: #fff;
border-color: var(--doc-accent);
}
.doc-btn-accent:hover {
background-color: var(--doc-accent-hover);
border-color: var(--doc-accent-hover);
transform: translateY(-1px);
}
.doc-btn-outline {
background-color: var(--doc-surface);
color: var(--doc-text-muted);
border-color: var(--doc-border);
}
.doc-btn-outline:hover {
background-color: var(--doc-surface-2);
border-color: var(--doc-border-strong);
color: var(--doc-text);
}
.doc-btn-ghost {
background-color: transparent;
color: var(--doc-text-muted);
border-color: transparent;
}
.doc-btn-ghost:hover {
background-color: var(--doc-surface-2);
color: var(--doc-text);
}
.doc-btn-sm { padding: 0.45rem 1rem; font-size: 0.8rem; }
.doc-btn-lg { padding: 0.9rem 1.8rem; font-size: 0.95rem; }
.doc-btn-block { width: 100%; }
.doc-btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--doc-radius); }
/* ── Form Controls ────────────── */
.doc-input {
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius);
font-family: var(--doc-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--doc-text);
background-color: var(--doc-surface);
outline: none;
transition: var(--doc-transition);
}
.doc-input::placeholder { color: var(--doc-text-light); }
.doc-input:focus {
border-color: var(--doc-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.doc-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--doc-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--doc-text-muted);
}
/* Custom select */
.doc-select {
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius);
font-family: var(--doc-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--doc-text);
background-color: var(--doc-surface);
outline: none;
transition: var(--doc-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1rem;
cursor: pointer;
}
.doc-select:focus {
border-color: var(--doc-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
/* ── Badges ───────────────────── */
.doc-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.6rem;
border-radius: var(--doc-radius-sm);
font-family: var(--doc-font-code);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
border: 1px solid transparent;
}
.doc-badge-primary { background-color: var(--doc-primary-muted); color: var(--doc-primary); border-color: rgba(99, 102, 241, 0.2); }
.doc-badge-accent { background-color: var(--doc-accent-muted); color: var(--doc-accent); border-color: rgba(16, 185, 129, 0.2); }
.doc-badge-danger { background-color: var(--doc-danger-muted); color: var(--doc-danger); border-color: rgba(239, 68, 68, 0.2); }
.doc-badge-default { background-color: var(--doc-surface-2); color: var(--doc-text-muted); border-color: var(--doc-border); }
/* ── Code Blocks ──────────────── */
.doc-code-block {
background-color: var(--doc-code-bg);
color: #F8FAFC;
font-family: var(--doc-font-code);
font-size: 0.85rem;
padding: 1.25rem 1.5rem;
border-radius: var(--doc-radius-lg);
border: 1px solid #1E293B;
overflow-x: auto;
margin: 0;
position: relative;
}
.doc-code-copy-btn {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94A3B8;
padding: 0.35rem;
border-radius: var(--doc-radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--doc-transition);
}
.doc-code-copy-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.doc-code-copy-btn svg { width: 14px; height: 14px; }
/* ── Divider ──────────────────── */
.doc-divider { border: none; border-top: 1px solid var(--doc-border); margin: 0; }
/* ── Logo ─────────────────────── */
.doc-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--doc-font-heading);
font-size: 1.35rem;
color: var(--doc-text);
font-weight: 800;
letter-spacing: -0.02em;
}
.doc-logo-icon {
width: 28px;
height: 28px;
background-color: var(--doc-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.85rem;
font-weight: 800;
border-radius: var(--doc-radius-sm);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--doc-primary) !important; }
.text-accent { color: var(--doc-accent) !important; }
.text-muted { color: var(--doc-text-muted) !important; }
.text-light { color: var(--doc-text-light) !important; }
/* --- COMPONENT STYLES --- */
.doc-login-card {
max-width: 420px;
margin: 0 auto;
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow);
padding: 3rem 2.5rem;
}
.doc-login-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 2rem;
}
.doc-login-header .doc-logo-icon {
margin-bottom: 1rem;
width: 44px;
height: 44px;
font-size: 1.25rem;
}
.doc-login-title {
font-family: var(--doc-font-heading);
font-size: 1.75rem;
font-weight: 800;
margin-bottom: 0.5rem;
color: var(--doc-text);
}
.doc-login-desc {
font-size: 0.825rem;
color: var(--doc-text-muted);
line-height: 1.5;
}
.doc-login-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.doc-form-group {
display: flex;
flex-direction: column;
align-items: stretch;
}
.doc-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.45rem;
}
.doc-label-row .doc-label {
margin-bottom: 0;
}
.doc-form-link {
font-size: 0.75rem;
font-weight: 600;
color: var(--doc-text-muted);
text-decoration: none;
transition: var(--doc-transition);
}
.doc-form-link:hover {
color: var(--doc-primary);
text-decoration: underline;
}
/* Custom Checkbox */
.doc-form-remember {
display: flex;
align-items: center;
}
.doc-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.doc-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--doc-border-strong);
border-radius: var(--doc-radius-sm);
outline: none;
background-color: var(--doc-surface-2);
cursor: pointer;
transition: var(--doc-transition);
position: relative;
flex-shrink: 0;
}
.doc-checkbox:checked {
background-color: var(--doc-primary);
border-color: var(--doc-primary);
}
.doc-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.doc-checkbox-label {
font-size: 0.8rem;
color: var(--doc-text-muted);
}
/* Footer sign up prompt */
.doc-login-footer {
border-top: 1px solid var(--doc-border);
padding-top: 1.25rem;
margin-top: 0.5rem;
text-align: center;
}
.doc-signup-prompt {
font-size: 0.8rem;
color: var(--doc-text-muted);
}
.doc-signup-link {
color: var(--doc-text);
font-weight: 700;
text-decoration: none;
transition: var(--doc-transition);
}
.doc-signup-link:hover {
color: var(--doc-primary);
text-decoration: underline;
}
Credentials Settings Manager
HTML
<div class="doc-dispatch-card">
<div class="doc-dispatch-header">
<span class="doc-dispatch-tag">API Settings</span>
<h2 class="doc-dispatch-title">Credentials Settings</h2>
<p class="doc-dispatch-desc">Generate active client credentials, configure environment endpoints, and scope client SDK tokens.</p>
</div>
<form class="doc-dispatch-form" onsubmit="return false;">
<!-- Selection dropdown -->
<div class="doc-form-group">
<label for="plan-tier" class="doc-label">Selected Project Environment</label>
<select id="plan-tier" class="doc-select">
<option value="basic">Development Sandbox v2</option>
<option value="premium" selected>Production Live API Feed (Live)</option>
<option value="fellow">Staging Environment Mirror</option>
</select>
</div>
<div class="doc-form-group">
<label class="doc-label">Active Scopes Assigned</label>
<div class="doc-checkbox-grid">
<label class="doc-checkbox-wrapper">
<input type="checkbox" class="doc-checkbox" checked>
<span class="doc-checkbox-label">Write: Telemetry Nodes</span>
</label>
<label class="doc-checkbox-wrapper">
<input type="checkbox" class="doc-checkbox" checked>
<span class="doc-checkbox-label">Read: Credentials Stats</span>
</label>
<label class="doc-checkbox-wrapper">
<input type="checkbox" class="doc-checkbox">
<span class="doc-checkbox-label">Execute: Sandbox Tasks</span>
</label>
<label class="doc-checkbox-wrapper">
<input type="checkbox" class="doc-checkbox">
<span class="doc-checkbox-label">Admin: API Keys Revocation</span>
</label>
</div>
</div>
<button type="submit" class="doc-btn doc-btn-primary doc-btn-block">
Save Credentials Config
</button>
<span class="doc-form-privacy">API tokens expire every 90 days. Next key cycle begins on August 19, 2026.</span>
</form>
</div>
CSS (Component Only)
/* Component: Credentials Settings Manager */
/* NOTE: This component requires base.css to be included in your page. */
.doc-dispatch-card {
max-width: 480px;
margin: 0 auto;
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow);
padding: 3rem 2.5rem;
}
.doc-dispatch-header {
text-align: center;
margin-bottom: 2rem;
}
.doc-dispatch-tag {
font-family: var(--doc-font-heading);
font-size: 0.75rem;
font-weight: 700;
color: var(--doc-primary);
text-transform: uppercase;
letter-spacing: 0.08em;
display: inline-block;
margin-bottom: 0.5rem;
}
.doc-dispatch-title {
font-family: var(--doc-font-heading);
font-size: 1.75rem;
font-weight: 800;
margin-bottom: 0.75rem;
color: var(--doc-text);
}
.doc-dispatch-desc {
font-size: 0.85rem;
color: var(--doc-text-muted);
line-height: 1.6;
}
.doc-dispatch-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.doc-checkbox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
background-color: var(--doc-surface-2);
border: 1px solid var(--doc-border);
padding: 1.25rem;
border-radius: var(--doc-radius);
margin-top: 0.25rem;
}
/* Custom checkbox styling same as login */
.doc-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.doc-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--doc-border-strong);
border-radius: var(--doc-radius-sm);
outline: none;
background-color: var(--doc-surface);
cursor: pointer;
transition: var(--doc-transition);
position: relative;
flex-shrink: 0;
}
.doc-checkbox:checked {
background-color: var(--doc-primary);
border-color: var(--doc-primary);
}
.doc-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.doc-checkbox-label {
font-size: 0.8rem;
color: var(--doc-text-muted);
line-height: 1.2;
}
.doc-form-privacy {
font-size: 0.725rem;
color: var(--doc-text-light);
text-align: center;
display: block;
line-height: 1.4;
}
@media (max-width: 576px) {
.doc-checkbox-grid {
grid-template-columns: 1fr;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap');
/* =========================================
Documentation Design System (doc-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--doc-bg: #FAFAFC; /* Paper White */
--doc-surface: #FFFFFF; /* Pure White */
--doc-surface-2: #F3F4F6; /* Muted Ice */
--doc-code-bg: #0F172A; /* Slate Blue code bg */
/* Brand Palette */
--doc-primary: #6366F1; /* Dev Indigo */
--doc-primary-hover: #4F46E5;
--doc-primary-muted: rgba(99, 102, 241, 0.08);
--doc-accent: #10B981; /* Emerald/Active Accents */
--doc-accent-hover: #059669;
--doc-accent-muted: rgba(16, 185, 129, 0.08);
--doc-danger: #EF4444;
--doc-danger-muted: rgba(239, 68, 68, 0.08);
/* Text */
--doc-text: #111827; /* Charcoal black */
--doc-text-muted: #4B5563; /* Slate grey */
--doc-text-light: #9CA3AF;
/* Borders */
--doc-border: #E5E7EB; /* Clean light border */
--doc-border-strong: #D1D5DB;
--doc-border-glow: rgba(99, 102, 241, 0.25);
/* Geometric Rounded Shapes */
--doc-radius-sm: 4px;
--doc-radius: 8px;
--doc-radius-lg: 12px;
--doc-radius-pill: 999px;
/* Fonts */
--doc-font-heading: 'Outfit', sans-serif;
--doc-font-body: 'Inter', sans-serif;
--doc-font-code: 'Fira Code', monospace;
/* Shadows */
--doc-shadow-sm: 0 2px 8px rgba(0,0,0,0.03);
--doc-shadow: 0 8px 30px rgba(0,0,0,0.05);
--doc-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.08);
/* Transition */
--doc-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--doc-font-body);
color: var(--doc-text);
background-color: var(--doc-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.doc-card {
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow);
padding: 2.25rem;
transition: var(--doc-transition);
}
.doc-card:hover {
border-color: var(--doc-border-strong);
box-shadow: 0 10px 35px rgba(0,0,0,0.06);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--doc-font-heading);
font-weight: 700;
margin: 0;
color: var(--doc-text);
line-height: 1.25;
letter-spacing: -0.01em;
}
p {
font-family: var(--doc-font-body);
color: var(--doc-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.doc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.4rem;
font-family: var(--doc-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--doc-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--doc-transition);
white-space: nowrap;
user-select: none;
}
.doc-btn-primary {
background-color: var(--doc-primary);
color: #fff;
border-color: var(--doc-primary);
}
.doc-btn-primary:hover {
background-color: var(--doc-primary-hover);
border-color: var(--doc-primary-hover);
transform: translateY(-1px);
}
.doc-btn-accent {
background-color: var(--doc-accent);
color: #fff;
border-color: var(--doc-accent);
}
.doc-btn-accent:hover {
background-color: var(--doc-accent-hover);
border-color: var(--doc-accent-hover);
transform: translateY(-1px);
}
.doc-btn-outline {
background-color: var(--doc-surface);
color: var(--doc-text-muted);
border-color: var(--doc-border);
}
.doc-btn-outline:hover {
background-color: var(--doc-surface-2);
border-color: var(--doc-border-strong);
color: var(--doc-text);
}
.doc-btn-ghost {
background-color: transparent;
color: var(--doc-text-muted);
border-color: transparent;
}
.doc-btn-ghost:hover {
background-color: var(--doc-surface-2);
color: var(--doc-text);
}
.doc-btn-sm { padding: 0.45rem 1rem; font-size: 0.8rem; }
.doc-btn-lg { padding: 0.9rem 1.8rem; font-size: 0.95rem; }
.doc-btn-block { width: 100%; }
.doc-btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--doc-radius); }
/* ── Form Controls ────────────── */
.doc-input {
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius);
font-family: var(--doc-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--doc-text);
background-color: var(--doc-surface);
outline: none;
transition: var(--doc-transition);
}
.doc-input::placeholder { color: var(--doc-text-light); }
.doc-input:focus {
border-color: var(--doc-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.doc-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--doc-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--doc-text-muted);
}
/* Custom select */
.doc-select {
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius);
font-family: var(--doc-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--doc-text);
background-color: var(--doc-surface);
outline: none;
transition: var(--doc-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1rem;
cursor: pointer;
}
.doc-select:focus {
border-color: var(--doc-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
/* ── Badges ───────────────────── */
.doc-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.6rem;
border-radius: var(--doc-radius-sm);
font-family: var(--doc-font-code);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
border: 1px solid transparent;
}
.doc-badge-primary { background-color: var(--doc-primary-muted); color: var(--doc-primary); border-color: rgba(99, 102, 241, 0.2); }
.doc-badge-accent { background-color: var(--doc-accent-muted); color: var(--doc-accent); border-color: rgba(16, 185, 129, 0.2); }
.doc-badge-danger { background-color: var(--doc-danger-muted); color: var(--doc-danger); border-color: rgba(239, 68, 68, 0.2); }
.doc-badge-default { background-color: var(--doc-surface-2); color: var(--doc-text-muted); border-color: var(--doc-border); }
/* ── Code Blocks ──────────────── */
.doc-code-block {
background-color: var(--doc-code-bg);
color: #F8FAFC;
font-family: var(--doc-font-code);
font-size: 0.85rem;
padding: 1.25rem 1.5rem;
border-radius: var(--doc-radius-lg);
border: 1px solid #1E293B;
overflow-x: auto;
margin: 0;
position: relative;
}
.doc-code-copy-btn {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94A3B8;
padding: 0.35rem;
border-radius: var(--doc-radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--doc-transition);
}
.doc-code-copy-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.doc-code-copy-btn svg { width: 14px; height: 14px; }
/* ── Divider ──────────────────── */
.doc-divider { border: none; border-top: 1px solid var(--doc-border); margin: 0; }
/* ── Logo ─────────────────────── */
.doc-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--doc-font-heading);
font-size: 1.35rem;
color: var(--doc-text);
font-weight: 800;
letter-spacing: -0.02em;
}
.doc-logo-icon {
width: 28px;
height: 28px;
background-color: var(--doc-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.85rem;
font-weight: 800;
border-radius: var(--doc-radius-sm);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--doc-primary) !important; }
.text-accent { color: var(--doc-accent) !important; }
.text-muted { color: var(--doc-text-muted) !important; }
.text-light { color: var(--doc-text-light) !important; }
/* --- COMPONENT STYLES --- */
.doc-dispatch-card {
max-width: 480px;
margin: 0 auto;
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow);
padding: 3rem 2.5rem;
}
.doc-dispatch-header {
text-align: center;
margin-bottom: 2rem;
}
.doc-dispatch-tag {
font-family: var(--doc-font-heading);
font-size: 0.75rem;
font-weight: 700;
color: var(--doc-primary);
text-transform: uppercase;
letter-spacing: 0.08em;
display: inline-block;
margin-bottom: 0.5rem;
}
.doc-dispatch-title {
font-family: var(--doc-font-heading);
font-size: 1.75rem;
font-weight: 800;
margin-bottom: 0.75rem;
color: var(--doc-text);
}
.doc-dispatch-desc {
font-size: 0.85rem;
color: var(--doc-text-muted);
line-height: 1.6;
}
.doc-dispatch-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.doc-checkbox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
background-color: var(--doc-surface-2);
border: 1px solid var(--doc-border);
padding: 1.25rem;
border-radius: var(--doc-radius);
margin-top: 0.25rem;
}
/* Custom checkbox styling same as login */
.doc-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.doc-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--doc-border-strong);
border-radius: var(--doc-radius-sm);
outline: none;
background-color: var(--doc-surface);
cursor: pointer;
transition: var(--doc-transition);
position: relative;
flex-shrink: 0;
}
.doc-checkbox:checked {
background-color: var(--doc-primary);
border-color: var(--doc-primary);
}
.doc-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.doc-checkbox-label {
font-size: 0.8rem;
color: var(--doc-text-muted);
line-height: 1.2;
}
.doc-form-privacy {
font-size: 0.725rem;
color: var(--doc-text-light);
text-align: center;
display: block;
line-height: 1.4;
}
@media (max-width: 576px) {
.doc-checkbox-grid {
grid-template-columns: 1fr;
}
}
Cards
Interactive Topic Cards
HTML
<div class="doc-cards-grid">
<!-- Card 1: Guides -->
<article class="doc-topic-card doc-card">
<div class="doc-topic-icon-wrapper doc-badge-primary">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
</div>
<div class="doc-card-body">
<div class="doc-card-meta">
<span class="doc-card-tag text-primary">Security Guide</span>
<span class="doc-bullet">•</span>
<span>5 Min Read</span>
</div>
<h3 class="doc-card-title">
<a href="#" class="doc-card-link">Authentication Handshakes & Credential Rotation</a>
</h3>
<p class="doc-card-excerpt">Learn how to configure automated oauth handshakes, refresh sandbox keys, and prevent token hijacking leaks across production sockets.</p>
<div class="doc-card-footer">
<span class="doc-card-path">guides/auth-handshakes</span>
<span class="doc-watch-cta">Read Manual</span>
</div>
</div>
</article>
<!-- Card 2: SDK API Reference -->
<article class="doc-topic-card-horizontal doc-card">
<div class="doc-topic-icon-wrapper doc-badge-accent">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
</div>
<div class="doc-card-body">
<div class="doc-card-meta">
<span class="doc-card-tag text-accent">API Reference</span>
<span class="doc-bullet">•</span>
<span class="doc-badge-uhd">Node SDK</span>
</div>
<h3 class="doc-card-title">
<a href="#" class="doc-card-link">Telemetry Client Webhooks & Events</a>
</h3>
<p class="doc-card-excerpt">Complete documentation of client socket events, heartbeat responses, and webhook retry telemetry strategies.</p>
<div class="doc-card-footer">
<span class="doc-card-path">reference/node/telemetry-webhooks</span>
<span class="doc-watch-cta">Explore SDK</span>
</div>
</div>
</article>
</div>
CSS (Component Only)
/* Component: Interactive Topic Cards */
/* NOTE: This component requires base.css to be included in your page. */
.doc-cards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
max-width: 1100px;
margin: 0 auto;
}
/* Common Card Base styles */
.doc-topic-card, .doc-topic-card-horizontal {
display: flex;
flex-direction: column;
overflow: hidden;
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow-sm);
padding: 2.5rem !important; /* override default card padding */
transition: var(--doc-transition);
gap: 1.5rem;
}
.doc-topic-card:hover, .doc-topic-card-horizontal:hover {
border-color: var(--doc-primary);
box-shadow: var(--doc-shadow);
transform: translateY(-2px);
}
.doc-topic-icon-wrapper {
width: 48px;
height: 48px;
border-radius: var(--doc-radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.doc-topic-icon-wrapper svg {
width: 22px;
height: 22px;
}
/* Body */
.doc-card-body {
display: flex;
flex-direction: column;
gap: 0.85rem;
flex: 1;
}
.doc-card-meta {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--doc-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.doc-badge-uhd {
border: 1px solid var(--doc-border-strong);
padding: 0.1rem 0.35rem;
font-size: 0.65rem;
border-radius: var(--doc-radius-sm);
}
.doc-bullet {
color: var(--doc-border);
}
.doc-card-title {
font-family: var(--doc-font-heading);
font-size: 1.35rem;
font-weight: 800;
line-height: 1.3;
}
.doc-card-link {
color: var(--doc-text);
text-decoration: none;
transition: var(--doc-transition);
}
.doc-card-link:hover {
color: var(--doc-primary-hover);
}
.doc-card-excerpt {
font-size: 0.85rem;
color: var(--doc-text-muted);
line-height: 1.5;
margin-bottom: 0.5rem;
}
/* Footer cast info */
.doc-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--doc-border);
padding-top: 1.25rem;
margin-top: auto;
}
.doc-card-path {
font-family: var(--doc-font-code);
font-size: 0.725rem;
color: var(--doc-text-muted);
}
.doc-watch-cta {
font-family: var(--doc-font-heading);
font-size: 0.75rem;
font-weight: 700;
color: var(--doc-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: var(--doc-transition);
}
.doc-topic-card-horizontal:hover .doc-watch-cta,
.doc-topic-card:hover .doc-watch-cta {
color: var(--doc-primary-hover);
}
@media (max-width: 992px) {
.doc-cards-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap');
/* =========================================
Documentation Design System (doc-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--doc-bg: #FAFAFC; /* Paper White */
--doc-surface: #FFFFFF; /* Pure White */
--doc-surface-2: #F3F4F6; /* Muted Ice */
--doc-code-bg: #0F172A; /* Slate Blue code bg */
/* Brand Palette */
--doc-primary: #6366F1; /* Dev Indigo */
--doc-primary-hover: #4F46E5;
--doc-primary-muted: rgba(99, 102, 241, 0.08);
--doc-accent: #10B981; /* Emerald/Active Accents */
--doc-accent-hover: #059669;
--doc-accent-muted: rgba(16, 185, 129, 0.08);
--doc-danger: #EF4444;
--doc-danger-muted: rgba(239, 68, 68, 0.08);
/* Text */
--doc-text: #111827; /* Charcoal black */
--doc-text-muted: #4B5563; /* Slate grey */
--doc-text-light: #9CA3AF;
/* Borders */
--doc-border: #E5E7EB; /* Clean light border */
--doc-border-strong: #D1D5DB;
--doc-border-glow: rgba(99, 102, 241, 0.25);
/* Geometric Rounded Shapes */
--doc-radius-sm: 4px;
--doc-radius: 8px;
--doc-radius-lg: 12px;
--doc-radius-pill: 999px;
/* Fonts */
--doc-font-heading: 'Outfit', sans-serif;
--doc-font-body: 'Inter', sans-serif;
--doc-font-code: 'Fira Code', monospace;
/* Shadows */
--doc-shadow-sm: 0 2px 8px rgba(0,0,0,0.03);
--doc-shadow: 0 8px 30px rgba(0,0,0,0.05);
--doc-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.08);
/* Transition */
--doc-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--doc-font-body);
color: var(--doc-text);
background-color: var(--doc-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.doc-card {
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow);
padding: 2.25rem;
transition: var(--doc-transition);
}
.doc-card:hover {
border-color: var(--doc-border-strong);
box-shadow: 0 10px 35px rgba(0,0,0,0.06);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--doc-font-heading);
font-weight: 700;
margin: 0;
color: var(--doc-text);
line-height: 1.25;
letter-spacing: -0.01em;
}
p {
font-family: var(--doc-font-body);
color: var(--doc-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.doc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.4rem;
font-family: var(--doc-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--doc-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--doc-transition);
white-space: nowrap;
user-select: none;
}
.doc-btn-primary {
background-color: var(--doc-primary);
color: #fff;
border-color: var(--doc-primary);
}
.doc-btn-primary:hover {
background-color: var(--doc-primary-hover);
border-color: var(--doc-primary-hover);
transform: translateY(-1px);
}
.doc-btn-accent {
background-color: var(--doc-accent);
color: #fff;
border-color: var(--doc-accent);
}
.doc-btn-accent:hover {
background-color: var(--doc-accent-hover);
border-color: var(--doc-accent-hover);
transform: translateY(-1px);
}
.doc-btn-outline {
background-color: var(--doc-surface);
color: var(--doc-text-muted);
border-color: var(--doc-border);
}
.doc-btn-outline:hover {
background-color: var(--doc-surface-2);
border-color: var(--doc-border-strong);
color: var(--doc-text);
}
.doc-btn-ghost {
background-color: transparent;
color: var(--doc-text-muted);
border-color: transparent;
}
.doc-btn-ghost:hover {
background-color: var(--doc-surface-2);
color: var(--doc-text);
}
.doc-btn-sm { padding: 0.45rem 1rem; font-size: 0.8rem; }
.doc-btn-lg { padding: 0.9rem 1.8rem; font-size: 0.95rem; }
.doc-btn-block { width: 100%; }
.doc-btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--doc-radius); }
/* ── Form Controls ────────────── */
.doc-input {
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius);
font-family: var(--doc-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--doc-text);
background-color: var(--doc-surface);
outline: none;
transition: var(--doc-transition);
}
.doc-input::placeholder { color: var(--doc-text-light); }
.doc-input:focus {
border-color: var(--doc-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.doc-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--doc-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--doc-text-muted);
}
/* Custom select */
.doc-select {
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius);
font-family: var(--doc-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--doc-text);
background-color: var(--doc-surface);
outline: none;
transition: var(--doc-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1rem;
cursor: pointer;
}
.doc-select:focus {
border-color: var(--doc-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
/* ── Badges ───────────────────── */
.doc-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.6rem;
border-radius: var(--doc-radius-sm);
font-family: var(--doc-font-code);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
border: 1px solid transparent;
}
.doc-badge-primary { background-color: var(--doc-primary-muted); color: var(--doc-primary); border-color: rgba(99, 102, 241, 0.2); }
.doc-badge-accent { background-color: var(--doc-accent-muted); color: var(--doc-accent); border-color: rgba(16, 185, 129, 0.2); }
.doc-badge-danger { background-color: var(--doc-danger-muted); color: var(--doc-danger); border-color: rgba(239, 68, 68, 0.2); }
.doc-badge-default { background-color: var(--doc-surface-2); color: var(--doc-text-muted); border-color: var(--doc-border); }
/* ── Code Blocks ──────────────── */
.doc-code-block {
background-color: var(--doc-code-bg);
color: #F8FAFC;
font-family: var(--doc-font-code);
font-size: 0.85rem;
padding: 1.25rem 1.5rem;
border-radius: var(--doc-radius-lg);
border: 1px solid #1E293B;
overflow-x: auto;
margin: 0;
position: relative;
}
.doc-code-copy-btn {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94A3B8;
padding: 0.35rem;
border-radius: var(--doc-radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--doc-transition);
}
.doc-code-copy-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.doc-code-copy-btn svg { width: 14px; height: 14px; }
/* ── Divider ──────────────────── */
.doc-divider { border: none; border-top: 1px solid var(--doc-border); margin: 0; }
/* ── Logo ─────────────────────── */
.doc-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--doc-font-heading);
font-size: 1.35rem;
color: var(--doc-text);
font-weight: 800;
letter-spacing: -0.02em;
}
.doc-logo-icon {
width: 28px;
height: 28px;
background-color: var(--doc-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.85rem;
font-weight: 800;
border-radius: var(--doc-radius-sm);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--doc-primary) !important; }
.text-accent { color: var(--doc-accent) !important; }
.text-muted { color: var(--doc-text-muted) !important; }
.text-light { color: var(--doc-text-light) !important; }
/* --- COMPONENT STYLES --- */
.doc-cards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
max-width: 1100px;
margin: 0 auto;
}
/* Common Card Base styles */
.doc-topic-card, .doc-topic-card-horizontal {
display: flex;
flex-direction: column;
overflow: hidden;
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow-sm);
padding: 2.5rem !important; /* override default card padding */
transition: var(--doc-transition);
gap: 1.5rem;
}
.doc-topic-card:hover, .doc-topic-card-horizontal:hover {
border-color: var(--doc-primary);
box-shadow: var(--doc-shadow);
transform: translateY(-2px);
}
.doc-topic-icon-wrapper {
width: 48px;
height: 48px;
border-radius: var(--doc-radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.doc-topic-icon-wrapper svg {
width: 22px;
height: 22px;
}
/* Body */
.doc-card-body {
display: flex;
flex-direction: column;
gap: 0.85rem;
flex: 1;
}
.doc-card-meta {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--doc-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.doc-badge-uhd {
border: 1px solid var(--doc-border-strong);
padding: 0.1rem 0.35rem;
font-size: 0.65rem;
border-radius: var(--doc-radius-sm);
}
.doc-bullet {
color: var(--doc-border);
}
.doc-card-title {
font-family: var(--doc-font-heading);
font-size: 1.35rem;
font-weight: 800;
line-height: 1.3;
}
.doc-card-link {
color: var(--doc-text);
text-decoration: none;
transition: var(--doc-transition);
}
.doc-card-link:hover {
color: var(--doc-primary-hover);
}
.doc-card-excerpt {
font-size: 0.85rem;
color: var(--doc-text-muted);
line-height: 1.5;
margin-bottom: 0.5rem;
}
/* Footer cast info */
.doc-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--doc-border);
padding-top: 1.25rem;
margin-top: auto;
}
.doc-card-path {
font-family: var(--doc-font-code);
font-size: 0.725rem;
color: var(--doc-text-muted);
}
.doc-watch-cta {
font-family: var(--doc-font-heading);
font-size: 0.75rem;
font-weight: 700;
color: var(--doc-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: var(--doc-transition);
}
.doc-topic-card-horizontal:hover .doc-watch-cta,
.doc-topic-card:hover .doc-watch-cta {
color: var(--doc-primary-hover);
}
@media (max-width: 992px) {
.doc-cards-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
API Service Analytics
HTML
<div class="doc-stats-row">
<!-- Stat 1 -->
<div class="doc-stat-card doc-card">
<div class="doc-stat-icon-wrapper doc-badge-primary">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect><line x1="7" y1="2" x2="7" y2="22"></line><line x1="17" y1="2" x2="17" y2="22"></line><line x1="2" y1="12" x2="22" y2="12"></line></svg>
</div>
<div class="doc-stat-details">
<span class="doc-stat-label">API Heartbeat Volume</span>
<div class="doc-stat-value-group">
<span class="doc-stat-value">1.45M</span>
<span class="doc-stat-change positive">Requests</span>
</div>
<span class="doc-stat-desc">Total API requests synchronized this season across production live grids.</span>
</div>
</div>
<!-- Stat 2 -->
<div class="doc-stat-card doc-card">
<div class="doc-stat-icon-wrapper doc-badge-accent">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
</div>
<div class="doc-stat-details">
<span class="doc-stat-label">Average Server Latency</span>
<div class="doc-stat-value-group">
<span class="doc-stat-value">142ms</span>
<span class="doc-stat-change positive">Fast</span>
</div>
<span class="doc-stat-desc">Average gateway response duration coordinates measured across global nodes.</span>
</div>
</div>
<!-- Stat 3 -->
<div class="doc-stat-card doc-card">
<div class="doc-stat-icon-wrapper doc-badge-danger">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="7" x2="12" y2="14"></line><line x1="12" y1="16" x2="12" y2="18"></line></svg>
</div>
<div class="doc-stat-details">
<span class="doc-stat-label">Client Error Rate</span>
<div class="doc-stat-value-group">
<span class="doc-stat-value">0.04%</span>
<span class="doc-stat-change positive">Perfect</span>
</div>
<!-- Progress mini bar representing proportion of successful matches -->
<div class="doc-stat-progress-wrapper">
<div class="doc-stat-progress-bar" style="width: 99.96%;"></div>
</div>
<span class="doc-stat-desc">Ratio of HTTP status codes matching successful 200 responses.</span>
</div>
</div>
</div>
CSS (Component Only)
/* Component: API Service Analytics */
/* NOTE: This component requires base.css to be included in your page. */
.doc-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
max-width: 1100px;
margin: 0 auto;
}
.doc-stat-card {
display: flex;
align-items: flex-start;
gap: 1.25rem;
}
.doc-stat-icon-wrapper {
width: 44px;
height: 44px;
border-radius: var(--doc-radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.doc-stat-icon-wrapper svg {
width: 20px;
height: 20px;
}
.doc-stat-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
min-width: 0;
}
.doc-stat-label {
font-family: var(--doc-font-body);
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--doc-text-light);
}
.doc-stat-value-group {
display: flex;
align-items: baseline;
gap: 0.75rem;
}
.doc-stat-value {
font-family: var(--doc-font-heading);
font-size: 2rem;
font-weight: 800;
color: var(--doc-text);
line-height: 1;
}
.doc-stat-change {
font-size: 0.75rem;
font-weight: 700;
border-radius: var(--doc-radius-sm);
}
.doc-stat-change.positive {
color: var(--doc-primary);
}
.doc-stat-desc {
font-size: 0.725rem;
color: var(--doc-text-muted);
line-height: 1.4;
}
/* Progress Bar */
.doc-stat-progress-wrapper {
width: 100%;
height: 4px;
background-color: var(--doc-surface-2);
border-radius: var(--doc-radius-pill);
overflow: hidden;
margin: 0.25rem 0;
}
.doc-stat-progress-bar {
height: 100%;
background-color: var(--doc-primary);
border-radius: var(--doc-radius-pill);
box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
}
@media (max-width: 992px) {
.doc-stats-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap');
/* =========================================
Documentation Design System (doc-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--doc-bg: #FAFAFC; /* Paper White */
--doc-surface: #FFFFFF; /* Pure White */
--doc-surface-2: #F3F4F6; /* Muted Ice */
--doc-code-bg: #0F172A; /* Slate Blue code bg */
/* Brand Palette */
--doc-primary: #6366F1; /* Dev Indigo */
--doc-primary-hover: #4F46E5;
--doc-primary-muted: rgba(99, 102, 241, 0.08);
--doc-accent: #10B981; /* Emerald/Active Accents */
--doc-accent-hover: #059669;
--doc-accent-muted: rgba(16, 185, 129, 0.08);
--doc-danger: #EF4444;
--doc-danger-muted: rgba(239, 68, 68, 0.08);
/* Text */
--doc-text: #111827; /* Charcoal black */
--doc-text-muted: #4B5563; /* Slate grey */
--doc-text-light: #9CA3AF;
/* Borders */
--doc-border: #E5E7EB; /* Clean light border */
--doc-border-strong: #D1D5DB;
--doc-border-glow: rgba(99, 102, 241, 0.25);
/* Geometric Rounded Shapes */
--doc-radius-sm: 4px;
--doc-radius: 8px;
--doc-radius-lg: 12px;
--doc-radius-pill: 999px;
/* Fonts */
--doc-font-heading: 'Outfit', sans-serif;
--doc-font-body: 'Inter', sans-serif;
--doc-font-code: 'Fira Code', monospace;
/* Shadows */
--doc-shadow-sm: 0 2px 8px rgba(0,0,0,0.03);
--doc-shadow: 0 8px 30px rgba(0,0,0,0.05);
--doc-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.08);
/* Transition */
--doc-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--doc-font-body);
color: var(--doc-text);
background-color: var(--doc-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.doc-card {
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow);
padding: 2.25rem;
transition: var(--doc-transition);
}
.doc-card:hover {
border-color: var(--doc-border-strong);
box-shadow: 0 10px 35px rgba(0,0,0,0.06);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--doc-font-heading);
font-weight: 700;
margin: 0;
color: var(--doc-text);
line-height: 1.25;
letter-spacing: -0.01em;
}
p {
font-family: var(--doc-font-body);
color: var(--doc-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.doc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.4rem;
font-family: var(--doc-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--doc-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--doc-transition);
white-space: nowrap;
user-select: none;
}
.doc-btn-primary {
background-color: var(--doc-primary);
color: #fff;
border-color: var(--doc-primary);
}
.doc-btn-primary:hover {
background-color: var(--doc-primary-hover);
border-color: var(--doc-primary-hover);
transform: translateY(-1px);
}
.doc-btn-accent {
background-color: var(--doc-accent);
color: #fff;
border-color: var(--doc-accent);
}
.doc-btn-accent:hover {
background-color: var(--doc-accent-hover);
border-color: var(--doc-accent-hover);
transform: translateY(-1px);
}
.doc-btn-outline {
background-color: var(--doc-surface);
color: var(--doc-text-muted);
border-color: var(--doc-border);
}
.doc-btn-outline:hover {
background-color: var(--doc-surface-2);
border-color: var(--doc-border-strong);
color: var(--doc-text);
}
.doc-btn-ghost {
background-color: transparent;
color: var(--doc-text-muted);
border-color: transparent;
}
.doc-btn-ghost:hover {
background-color: var(--doc-surface-2);
color: var(--doc-text);
}
.doc-btn-sm { padding: 0.45rem 1rem; font-size: 0.8rem; }
.doc-btn-lg { padding: 0.9rem 1.8rem; font-size: 0.95rem; }
.doc-btn-block { width: 100%; }
.doc-btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--doc-radius); }
/* ── Form Controls ────────────── */
.doc-input {
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius);
font-family: var(--doc-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--doc-text);
background-color: var(--doc-surface);
outline: none;
transition: var(--doc-transition);
}
.doc-input::placeholder { color: var(--doc-text-light); }
.doc-input:focus {
border-color: var(--doc-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.doc-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--doc-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--doc-text-muted);
}
/* Custom select */
.doc-select {
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius);
font-family: var(--doc-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--doc-text);
background-color: var(--doc-surface);
outline: none;
transition: var(--doc-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1rem;
cursor: pointer;
}
.doc-select:focus {
border-color: var(--doc-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
/* ── Badges ───────────────────── */
.doc-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.6rem;
border-radius: var(--doc-radius-sm);
font-family: var(--doc-font-code);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
border: 1px solid transparent;
}
.doc-badge-primary { background-color: var(--doc-primary-muted); color: var(--doc-primary); border-color: rgba(99, 102, 241, 0.2); }
.doc-badge-accent { background-color: var(--doc-accent-muted); color: var(--doc-accent); border-color: rgba(16, 185, 129, 0.2); }
.doc-badge-danger { background-color: var(--doc-danger-muted); color: var(--doc-danger); border-color: rgba(239, 68, 68, 0.2); }
.doc-badge-default { background-color: var(--doc-surface-2); color: var(--doc-text-muted); border-color: var(--doc-border); }
/* ── Code Blocks ──────────────── */
.doc-code-block {
background-color: var(--doc-code-bg);
color: #F8FAFC;
font-family: var(--doc-font-code);
font-size: 0.85rem;
padding: 1.25rem 1.5rem;
border-radius: var(--doc-radius-lg);
border: 1px solid #1E293B;
overflow-x: auto;
margin: 0;
position: relative;
}
.doc-code-copy-btn {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94A3B8;
padding: 0.35rem;
border-radius: var(--doc-radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--doc-transition);
}
.doc-code-copy-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.doc-code-copy-btn svg { width: 14px; height: 14px; }
/* ── Divider ──────────────────── */
.doc-divider { border: none; border-top: 1px solid var(--doc-border); margin: 0; }
/* ── Logo ─────────────────────── */
.doc-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--doc-font-heading);
font-size: 1.35rem;
color: var(--doc-text);
font-weight: 800;
letter-spacing: -0.02em;
}
.doc-logo-icon {
width: 28px;
height: 28px;
background-color: var(--doc-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.85rem;
font-weight: 800;
border-radius: var(--doc-radius-sm);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--doc-primary) !important; }
.text-accent { color: var(--doc-accent) !important; }
.text-muted { color: var(--doc-text-muted) !important; }
.text-light { color: var(--doc-text-light) !important; }
/* --- COMPONENT STYLES --- */
.doc-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
max-width: 1100px;
margin: 0 auto;
}
.doc-stat-card {
display: flex;
align-items: flex-start;
gap: 1.25rem;
}
.doc-stat-icon-wrapper {
width: 44px;
height: 44px;
border-radius: var(--doc-radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.doc-stat-icon-wrapper svg {
width: 20px;
height: 20px;
}
.doc-stat-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
min-width: 0;
}
.doc-stat-label {
font-family: var(--doc-font-body);
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--doc-text-light);
}
.doc-stat-value-group {
display: flex;
align-items: baseline;
gap: 0.75rem;
}
.doc-stat-value {
font-family: var(--doc-font-heading);
font-size: 2rem;
font-weight: 800;
color: var(--doc-text);
line-height: 1;
}
.doc-stat-change {
font-size: 0.75rem;
font-weight: 700;
border-radius: var(--doc-radius-sm);
}
.doc-stat-change.positive {
color: var(--doc-primary);
}
.doc-stat-desc {
font-size: 0.725rem;
color: var(--doc-text-muted);
line-height: 1.4;
}
/* Progress Bar */
.doc-stat-progress-wrapper {
width: 100%;
height: 4px;
background-color: var(--doc-surface-2);
border-radius: var(--doc-radius-pill);
overflow: hidden;
margin: 0.25rem 0;
}
.doc-stat-progress-bar {
height: 100%;
background-color: var(--doc-primary);
border-radius: var(--doc-radius-pill);
box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
}
@media (max-width: 992px) {
.doc-stats-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
Tables
API Parameters Schema Table
HTML
<div class="doc-table-wrapper doc-card">
<div class="doc-table-header">
<h3 class="doc-table-title">API Parameter Reference Schema</h3>
<p class="doc-table-desc">Request payloads parameters, type requirements, default fallback constraints, and developer validation paths.</p>
</div>
<div class="doc-table-scroll">
<table class="doc-table">
<thead>
<tr>
<th>Parameter Name</th>
<th>Type</th>
<th>Required</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<!-- Row 1 -->
<tr>
<td class="doc-title-cell">
<span class="doc-parameter-title">client_key</span>
</td>
<td><span class="doc-badge doc-badge-primary">string</span></td>
<td><span class="doc-badge doc-badge-danger">Required</span></td>
<td><code>null</code></td>
<td class="doc-table-desc-cell">
Your unique developer authorization key passcode generated inside standard client portal profiles. Must start with <code>ig_live_</code>.
</td>
</tr>
<!-- Row 2 -->
<tr>
<td class="doc-title-cell">
<span class="doc-parameter-title">concurrent_limit</span>
</td>
<td><span class="doc-badge doc-badge-accent">integer</span></td>
<td><span class="doc-badge doc-badge-default">Optional</span></td>
<td><code>4</code></td>
<td class="doc-table-desc-cell">
Defines the concurrent streams limit capacity thresholds. Allowed range is between <code>1</code> and <code>24</code> screens.
</td>
</tr>
<!-- Row 3 -->
<tr>
<td class="doc-title-cell">
<span class="doc-parameter-title">telemetry_sync</span>
</td>
<td><span class="doc-badge doc-badge-primary">boolean</span></td>
<td><span class="doc-badge doc-badge-default">Optional</span></td>
<td><code>true</code></td>
<td class="doc-table-desc-cell">
Configures whether the local Node client logs performance heartbeat telemetry streams back to central gateways.
</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS (Component Only)
/* Component: API Parameters Schema Table */
/* NOTE: This component requires base.css to be included in your page. */
.doc-table-wrapper {
max-width: 1000px;
margin: 0 auto;
width: 100%;
}
.doc-table-header {
margin-bottom: 1.5rem;
}
.doc-table-title {
font-family: var(--doc-font-heading);
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 0.35rem;
color: var(--doc-text);
}
.doc-table-desc {
font-size: 0.85rem;
color: var(--doc-text-muted);
}
.doc-table-scroll {
width: 100%;
overflow-x: auto;
}
.doc-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-family: var(--doc-font-body);
}
.doc-table th {
font-family: var(--doc-font-body);
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--doc-text-light);
border-bottom: 2px solid var(--doc-border);
padding: 1rem;
}
.doc-table td {
padding: 1.25rem 1rem;
border-bottom: 1px solid var(--doc-border);
font-size: 0.85rem;
color: var(--doc-text-muted);
vertical-align: middle;
}
.doc-table tr:hover td {
background-color: var(--doc-surface-2);
}
/* Specific Cells */
.doc-title-cell {
white-space: nowrap;
}
.doc-parameter-title {
font-family: var(--doc-font-code);
font-size: 0.95rem;
font-weight: 600;
color: var(--doc-primary);
}
.doc-table-desc-cell {
font-size: 0.825rem;
line-height: 1.5;
color: var(--doc-text-muted);
}
.doc-table-desc-cell code {
font-family: var(--doc-font-code);
font-size: 0.75rem;
background-color: var(--doc-surface-2);
padding: 0.15rem 0.35rem;
border-radius: var(--doc-radius-sm);
color: var(--doc-text);
border: 1px solid var(--doc-border);
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap');
/* =========================================
Documentation Design System (doc-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--doc-bg: #FAFAFC; /* Paper White */
--doc-surface: #FFFFFF; /* Pure White */
--doc-surface-2: #F3F4F6; /* Muted Ice */
--doc-code-bg: #0F172A; /* Slate Blue code bg */
/* Brand Palette */
--doc-primary: #6366F1; /* Dev Indigo */
--doc-primary-hover: #4F46E5;
--doc-primary-muted: rgba(99, 102, 241, 0.08);
--doc-accent: #10B981; /* Emerald/Active Accents */
--doc-accent-hover: #059669;
--doc-accent-muted: rgba(16, 185, 129, 0.08);
--doc-danger: #EF4444;
--doc-danger-muted: rgba(239, 68, 68, 0.08);
/* Text */
--doc-text: #111827; /* Charcoal black */
--doc-text-muted: #4B5563; /* Slate grey */
--doc-text-light: #9CA3AF;
/* Borders */
--doc-border: #E5E7EB; /* Clean light border */
--doc-border-strong: #D1D5DB;
--doc-border-glow: rgba(99, 102, 241, 0.25);
/* Geometric Rounded Shapes */
--doc-radius-sm: 4px;
--doc-radius: 8px;
--doc-radius-lg: 12px;
--doc-radius-pill: 999px;
/* Fonts */
--doc-font-heading: 'Outfit', sans-serif;
--doc-font-body: 'Inter', sans-serif;
--doc-font-code: 'Fira Code', monospace;
/* Shadows */
--doc-shadow-sm: 0 2px 8px rgba(0,0,0,0.03);
--doc-shadow: 0 8px 30px rgba(0,0,0,0.05);
--doc-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.08);
/* Transition */
--doc-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--doc-font-body);
color: var(--doc-text);
background-color: var(--doc-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.doc-card {
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow);
padding: 2.25rem;
transition: var(--doc-transition);
}
.doc-card:hover {
border-color: var(--doc-border-strong);
box-shadow: 0 10px 35px rgba(0,0,0,0.06);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--doc-font-heading);
font-weight: 700;
margin: 0;
color: var(--doc-text);
line-height: 1.25;
letter-spacing: -0.01em;
}
p {
font-family: var(--doc-font-body);
color: var(--doc-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.doc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.4rem;
font-family: var(--doc-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--doc-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--doc-transition);
white-space: nowrap;
user-select: none;
}
.doc-btn-primary {
background-color: var(--doc-primary);
color: #fff;
border-color: var(--doc-primary);
}
.doc-btn-primary:hover {
background-color: var(--doc-primary-hover);
border-color: var(--doc-primary-hover);
transform: translateY(-1px);
}
.doc-btn-accent {
background-color: var(--doc-accent);
color: #fff;
border-color: var(--doc-accent);
}
.doc-btn-accent:hover {
background-color: var(--doc-accent-hover);
border-color: var(--doc-accent-hover);
transform: translateY(-1px);
}
.doc-btn-outline {
background-color: var(--doc-surface);
color: var(--doc-text-muted);
border-color: var(--doc-border);
}
.doc-btn-outline:hover {
background-color: var(--doc-surface-2);
border-color: var(--doc-border-strong);
color: var(--doc-text);
}
.doc-btn-ghost {
background-color: transparent;
color: var(--doc-text-muted);
border-color: transparent;
}
.doc-btn-ghost:hover {
background-color: var(--doc-surface-2);
color: var(--doc-text);
}
.doc-btn-sm { padding: 0.45rem 1rem; font-size: 0.8rem; }
.doc-btn-lg { padding: 0.9rem 1.8rem; font-size: 0.95rem; }
.doc-btn-block { width: 100%; }
.doc-btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--doc-radius); }
/* ── Form Controls ────────────── */
.doc-input {
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius);
font-family: var(--doc-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--doc-text);
background-color: var(--doc-surface);
outline: none;
transition: var(--doc-transition);
}
.doc-input::placeholder { color: var(--doc-text-light); }
.doc-input:focus {
border-color: var(--doc-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.doc-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--doc-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--doc-text-muted);
}
/* Custom select */
.doc-select {
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius);
font-family: var(--doc-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--doc-text);
background-color: var(--doc-surface);
outline: none;
transition: var(--doc-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1rem;
cursor: pointer;
}
.doc-select:focus {
border-color: var(--doc-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
/* ── Badges ───────────────────── */
.doc-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.6rem;
border-radius: var(--doc-radius-sm);
font-family: var(--doc-font-code);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
border: 1px solid transparent;
}
.doc-badge-primary { background-color: var(--doc-primary-muted); color: var(--doc-primary); border-color: rgba(99, 102, 241, 0.2); }
.doc-badge-accent { background-color: var(--doc-accent-muted); color: var(--doc-accent); border-color: rgba(16, 185, 129, 0.2); }
.doc-badge-danger { background-color: var(--doc-danger-muted); color: var(--doc-danger); border-color: rgba(239, 68, 68, 0.2); }
.doc-badge-default { background-color: var(--doc-surface-2); color: var(--doc-text-muted); border-color: var(--doc-border); }
/* ── Code Blocks ──────────────── */
.doc-code-block {
background-color: var(--doc-code-bg);
color: #F8FAFC;
font-family: var(--doc-font-code);
font-size: 0.85rem;
padding: 1.25rem 1.5rem;
border-radius: var(--doc-radius-lg);
border: 1px solid #1E293B;
overflow-x: auto;
margin: 0;
position: relative;
}
.doc-code-copy-btn {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94A3B8;
padding: 0.35rem;
border-radius: var(--doc-radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--doc-transition);
}
.doc-code-copy-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.doc-code-copy-btn svg { width: 14px; height: 14px; }
/* ── Divider ──────────────────── */
.doc-divider { border: none; border-top: 1px solid var(--doc-border); margin: 0; }
/* ── Logo ─────────────────────── */
.doc-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--doc-font-heading);
font-size: 1.35rem;
color: var(--doc-text);
font-weight: 800;
letter-spacing: -0.02em;
}
.doc-logo-icon {
width: 28px;
height: 28px;
background-color: var(--doc-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.85rem;
font-weight: 800;
border-radius: var(--doc-radius-sm);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--doc-primary) !important; }
.text-accent { color: var(--doc-accent) !important; }
.text-muted { color: var(--doc-text-muted) !important; }
.text-light { color: var(--doc-text-light) !important; }
/* --- COMPONENT STYLES --- */
.doc-table-wrapper {
max-width: 1000px;
margin: 0 auto;
width: 100%;
}
.doc-table-header {
margin-bottom: 1.5rem;
}
.doc-table-title {
font-family: var(--doc-font-heading);
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 0.35rem;
color: var(--doc-text);
}
.doc-table-desc {
font-size: 0.85rem;
color: var(--doc-text-muted);
}
.doc-table-scroll {
width: 100%;
overflow-x: auto;
}
.doc-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-family: var(--doc-font-body);
}
.doc-table th {
font-family: var(--doc-font-body);
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--doc-text-light);
border-bottom: 2px solid var(--doc-border);
padding: 1rem;
}
.doc-table td {
padding: 1.25rem 1rem;
border-bottom: 1px solid var(--doc-border);
font-size: 0.85rem;
color: var(--doc-text-muted);
vertical-align: middle;
}
.doc-table tr:hover td {
background-color: var(--doc-surface-2);
}
/* Specific Cells */
.doc-title-cell {
white-space: nowrap;
}
.doc-parameter-title {
font-family: var(--doc-font-code);
font-size: 0.95rem;
font-weight: 600;
color: var(--doc-primary);
}
.doc-table-desc-cell {
font-size: 0.825rem;
line-height: 1.5;
color: var(--doc-text-muted);
}
.doc-table-desc-cell code {
font-family: var(--doc-font-code);
font-size: 0.75rem;
background-color: var(--doc-surface-2);
padding: 0.15rem 0.35rem;
border-radius: var(--doc-radius-sm);
color: var(--doc-text);
border: 1px solid var(--doc-border);
}
Lists
Step Getting Started list
HTML
<div class="doc-activity-wrapper doc-card">
<div class="doc-activity-header">
<h3 class="doc-activity-title">Step-by-Step SDK Quickstart</h3>
<p class="doc-activity-desc">Follow the structural setup directions to activate your API environment, sync telemetry keys, and deploy live.</p>
</div>
<div class="doc-timeline">
<!-- Step 1 -->
<div class="doc-timeline-item">
<div class="doc-timeline-icon doc-timeline-comment">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
</div>
<div class="doc-timeline-content">
<div class="doc-timeline-meta">
<span class="doc-activity-user">Step 1</span>
<span class="doc-activity-action">initialize sandbox</span>
<span class="doc-activity-timestamp">Required</span>
<span class="doc-activity-time">Setup Gateway</span>
</div>
<div class="doc-timeline-text">
Create a free account inside Indigodocs client portal, navigate to live dashboard coordinates, and copy the secret sandbox keys starting with <code>ig_live_</code>.
</div>
</div>
</div>
<!-- Step 2 -->
<div class="doc-timeline-item">
<div class="doc-timeline-icon doc-timeline-bookmark">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
</div>
<div class="doc-timeline-content">
<div class="doc-timeline-meta">
<span class="doc-activity-user">Step 2</span>
<span class="doc-activity-action">deploy package dependencies</span>
<span class="doc-activity-timestamp">Installation</span>
<span class="doc-activity-time">NPM Client</span>
</div>
<div class="doc-timeline-text">
Install developer client package module to your local directories:
<pre style="margin: 0.5rem 0 0; background: var(--doc-code-bg); padding: 0.5rem 0.75rem; border-radius: var(--doc-radius); border: 1px solid #1E293B;"><code style="font-family: var(--doc-font-code); color: #fff; font-size: 0.8rem;">npm install @indigodocs/node-sdk</code></pre>
</div>
</div>
</div>
<!-- Step 3 -->
<div class="doc-timeline-item">
<div class="doc-timeline-icon doc-timeline-reply">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
</div>
<div class="doc-timeline-content">
<div class="doc-timeline-meta">
<span class="doc-activity-user text-primary">Step 3</span>
<span class="doc-activity-action">validate thread heartbeats</span>
<span class="doc-activity-timestamp">Verification</span>
<span class="doc-activity-time">Live Status</span>
</div>
<div class="doc-timeline-text">
Launch local runtime scripts, execute test endpoints handshakes, and confirm successful status codes <code>HTTP 200 OK</code> inside credentials portals dashboard charts.
</div>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Step Getting Started list */
/* NOTE: This component requires base.css to be included in your page. */
.doc-activity-wrapper {
max-width: 720px;
margin: 0 auto;
width: 100%;
}
.doc-activity-header {
margin-bottom: 2rem;
}
.doc-activity-title {
font-family: var(--doc-font-heading);
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 0.35rem;
color: var(--doc-text);
}
.doc-activity-desc {
font-size: 0.85rem;
color: var(--doc-text-muted);
}
/* Timeline Wrapper */
.doc-timeline {
position: relative;
display: flex;
flex-direction: column;
}
.doc-timeline-item {
position: relative;
padding-left: 3rem;
padding-bottom: 2.25rem;
}
.doc-timeline-item:last-child {
padding-bottom: 0;
}
/* Perfect bulletproof timeline vertical connecting line */
.doc-timeline-item::before {
content: '';
position: absolute;
left: 1rem;
top: 2rem; /* Start right below the icon center */
bottom: 0;
width: 2px;
background-color: var(--doc-border);
}
.doc-timeline-item:last-child::before {
display: none; /* Hide line below the bottom element */
}
/* Icons */
.doc-timeline-icon {
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 32px;
border-radius: var(--doc-radius-pill);
display: flex;
align-items: center;
justify-content: center;
color: var(--doc-text);
border: 1px solid var(--doc-border);
background-color: var(--doc-surface);
z-index: 2;
}
.doc-timeline-icon svg {
width: 14px;
height: 14px;
}
/* Icon specific color shifts */
.doc-timeline-comment {
background-color: var(--doc-primary-muted);
color: var(--doc-primary);
border-color: var(--doc-primary);
}
.doc-timeline-bookmark {
background-color: var(--doc-accent-muted);
color: var(--doc-accent);
border-color: var(--doc-accent);
}
.doc-timeline-reply {
background-color: var(--doc-primary-muted);
color: var(--doc-primary);
border-color: var(--doc-primary);
}
/* Contents */
.doc-timeline-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.doc-timeline-meta {
font-size: 0.8rem;
color: var(--doc-text-muted);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem;
}
.doc-activity-user {
font-weight: 700;
color: var(--doc-text);
}
.doc-activity-action {
color: var(--doc-text-light);
}
.doc-activity-timestamp {
font-family: var(--doc-font-heading);
font-weight: 700;
font-size: 0.75rem;
color: var(--doc-primary);
background-color: var(--doc-surface-2);
padding: 0.15rem 0.45rem;
border-radius: var(--doc-radius-sm);
}
.doc-activity-time {
color: var(--doc-text-light);
font-size: 0.725rem;
margin-left: auto;
}
.doc-timeline-text {
font-size: 0.85rem;
color: var(--doc-text-muted);
line-height: 1.5;
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
padding: 1rem 1.25rem;
border-radius: var(--doc-radius-lg);
margin: 0;
}
.doc-timeline-text code {
font-family: var(--doc-font-code);
font-size: 0.75rem;
background-color: var(--doc-surface-2);
padding: 0.15rem 0.35rem;
border-radius: var(--doc-radius-sm);
color: var(--doc-text);
border: 1px solid var(--doc-border);
}
.doc-timeline-text pre {
background-color: #0F172A !important;
border: 1px solid #1E293B !important;
padding: 0.75rem 1rem !important;
border-radius: var(--doc-radius) !important;
margin: 0.5rem 0 0 0 !important;
overflow-x: auto;
}
.doc-timeline-text pre code {
background-color: transparent !important;
color: #F8FAFC !important;
border: none !important;
padding: 0 !important;
font-size: 0.8rem !important;
}
@media (max-width: 576px) {
.doc-activity-time {
margin-left: 0;
width: 100%;
margin-top: 0.15rem;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap');
/* =========================================
Documentation Design System (doc-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--doc-bg: #FAFAFC; /* Paper White */
--doc-surface: #FFFFFF; /* Pure White */
--doc-surface-2: #F3F4F6; /* Muted Ice */
--doc-code-bg: #0F172A; /* Slate Blue code bg */
/* Brand Palette */
--doc-primary: #6366F1; /* Dev Indigo */
--doc-primary-hover: #4F46E5;
--doc-primary-muted: rgba(99, 102, 241, 0.08);
--doc-accent: #10B981; /* Emerald/Active Accents */
--doc-accent-hover: #059669;
--doc-accent-muted: rgba(16, 185, 129, 0.08);
--doc-danger: #EF4444;
--doc-danger-muted: rgba(239, 68, 68, 0.08);
/* Text */
--doc-text: #111827; /* Charcoal black */
--doc-text-muted: #4B5563; /* Slate grey */
--doc-text-light: #9CA3AF;
/* Borders */
--doc-border: #E5E7EB; /* Clean light border */
--doc-border-strong: #D1D5DB;
--doc-border-glow: rgba(99, 102, 241, 0.25);
/* Geometric Rounded Shapes */
--doc-radius-sm: 4px;
--doc-radius: 8px;
--doc-radius-lg: 12px;
--doc-radius-pill: 999px;
/* Fonts */
--doc-font-heading: 'Outfit', sans-serif;
--doc-font-body: 'Inter', sans-serif;
--doc-font-code: 'Fira Code', monospace;
/* Shadows */
--doc-shadow-sm: 0 2px 8px rgba(0,0,0,0.03);
--doc-shadow: 0 8px 30px rgba(0,0,0,0.05);
--doc-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.08);
/* Transition */
--doc-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--doc-font-body);
color: var(--doc-text);
background-color: var(--doc-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.doc-card {
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow);
padding: 2.25rem;
transition: var(--doc-transition);
}
.doc-card:hover {
border-color: var(--doc-border-strong);
box-shadow: 0 10px 35px rgba(0,0,0,0.06);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--doc-font-heading);
font-weight: 700;
margin: 0;
color: var(--doc-text);
line-height: 1.25;
letter-spacing: -0.01em;
}
p {
font-family: var(--doc-font-body);
color: var(--doc-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.doc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.4rem;
font-family: var(--doc-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--doc-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--doc-transition);
white-space: nowrap;
user-select: none;
}
.doc-btn-primary {
background-color: var(--doc-primary);
color: #fff;
border-color: var(--doc-primary);
}
.doc-btn-primary:hover {
background-color: var(--doc-primary-hover);
border-color: var(--doc-primary-hover);
transform: translateY(-1px);
}
.doc-btn-accent {
background-color: var(--doc-accent);
color: #fff;
border-color: var(--doc-accent);
}
.doc-btn-accent:hover {
background-color: var(--doc-accent-hover);
border-color: var(--doc-accent-hover);
transform: translateY(-1px);
}
.doc-btn-outline {
background-color: var(--doc-surface);
color: var(--doc-text-muted);
border-color: var(--doc-border);
}
.doc-btn-outline:hover {
background-color: var(--doc-surface-2);
border-color: var(--doc-border-strong);
color: var(--doc-text);
}
.doc-btn-ghost {
background-color: transparent;
color: var(--doc-text-muted);
border-color: transparent;
}
.doc-btn-ghost:hover {
background-color: var(--doc-surface-2);
color: var(--doc-text);
}
.doc-btn-sm { padding: 0.45rem 1rem; font-size: 0.8rem; }
.doc-btn-lg { padding: 0.9rem 1.8rem; font-size: 0.95rem; }
.doc-btn-block { width: 100%; }
.doc-btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--doc-radius); }
/* ── Form Controls ────────────── */
.doc-input {
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius);
font-family: var(--doc-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--doc-text);
background-color: var(--doc-surface);
outline: none;
transition: var(--doc-transition);
}
.doc-input::placeholder { color: var(--doc-text-light); }
.doc-input:focus {
border-color: var(--doc-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.doc-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--doc-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--doc-text-muted);
}
/* Custom select */
.doc-select {
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius);
font-family: var(--doc-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--doc-text);
background-color: var(--doc-surface);
outline: none;
transition: var(--doc-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1rem;
cursor: pointer;
}
.doc-select:focus {
border-color: var(--doc-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
/* ── Badges ───────────────────── */
.doc-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.6rem;
border-radius: var(--doc-radius-sm);
font-family: var(--doc-font-code);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
border: 1px solid transparent;
}
.doc-badge-primary { background-color: var(--doc-primary-muted); color: var(--doc-primary); border-color: rgba(99, 102, 241, 0.2); }
.doc-badge-accent { background-color: var(--doc-accent-muted); color: var(--doc-accent); border-color: rgba(16, 185, 129, 0.2); }
.doc-badge-danger { background-color: var(--doc-danger-muted); color: var(--doc-danger); border-color: rgba(239, 68, 68, 0.2); }
.doc-badge-default { background-color: var(--doc-surface-2); color: var(--doc-text-muted); border-color: var(--doc-border); }
/* ── Code Blocks ──────────────── */
.doc-code-block {
background-color: var(--doc-code-bg);
color: #F8FAFC;
font-family: var(--doc-font-code);
font-size: 0.85rem;
padding: 1.25rem 1.5rem;
border-radius: var(--doc-radius-lg);
border: 1px solid #1E293B;
overflow-x: auto;
margin: 0;
position: relative;
}
.doc-code-copy-btn {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94A3B8;
padding: 0.35rem;
border-radius: var(--doc-radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--doc-transition);
}
.doc-code-copy-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.doc-code-copy-btn svg { width: 14px; height: 14px; }
/* ── Divider ──────────────────── */
.doc-divider { border: none; border-top: 1px solid var(--doc-border); margin: 0; }
/* ── Logo ─────────────────────── */
.doc-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--doc-font-heading);
font-size: 1.35rem;
color: var(--doc-text);
font-weight: 800;
letter-spacing: -0.02em;
}
.doc-logo-icon {
width: 28px;
height: 28px;
background-color: var(--doc-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.85rem;
font-weight: 800;
border-radius: var(--doc-radius-sm);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--doc-primary) !important; }
.text-accent { color: var(--doc-accent) !important; }
.text-muted { color: var(--doc-text-muted) !important; }
.text-light { color: var(--doc-text-light) !important; }
/* --- COMPONENT STYLES --- */
.doc-activity-wrapper {
max-width: 720px;
margin: 0 auto;
width: 100%;
}
.doc-activity-header {
margin-bottom: 2rem;
}
.doc-activity-title {
font-family: var(--doc-font-heading);
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 0.35rem;
color: var(--doc-text);
}
.doc-activity-desc {
font-size: 0.85rem;
color: var(--doc-text-muted);
}
/* Timeline Wrapper */
.doc-timeline {
position: relative;
display: flex;
flex-direction: column;
}
.doc-timeline-item {
position: relative;
padding-left: 3rem;
padding-bottom: 2.25rem;
}
.doc-timeline-item:last-child {
padding-bottom: 0;
}
/* Perfect bulletproof timeline vertical connecting line */
.doc-timeline-item::before {
content: '';
position: absolute;
left: 1rem;
top: 2rem; /* Start right below the icon center */
bottom: 0;
width: 2px;
background-color: var(--doc-border);
}
.doc-timeline-item:last-child::before {
display: none; /* Hide line below the bottom element */
}
/* Icons */
.doc-timeline-icon {
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 32px;
border-radius: var(--doc-radius-pill);
display: flex;
align-items: center;
justify-content: center;
color: var(--doc-text);
border: 1px solid var(--doc-border);
background-color: var(--doc-surface);
z-index: 2;
}
.doc-timeline-icon svg {
width: 14px;
height: 14px;
}
/* Icon specific color shifts */
.doc-timeline-comment {
background-color: var(--doc-primary-muted);
color: var(--doc-primary);
border-color: var(--doc-primary);
}
.doc-timeline-bookmark {
background-color: var(--doc-accent-muted);
color: var(--doc-accent);
border-color: var(--doc-accent);
}
.doc-timeline-reply {
background-color: var(--doc-primary-muted);
color: var(--doc-primary);
border-color: var(--doc-primary);
}
/* Contents */
.doc-timeline-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.doc-timeline-meta {
font-size: 0.8rem;
color: var(--doc-text-muted);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem;
}
.doc-activity-user {
font-weight: 700;
color: var(--doc-text);
}
.doc-activity-action {
color: var(--doc-text-light);
}
.doc-activity-timestamp {
font-family: var(--doc-font-heading);
font-weight: 700;
font-size: 0.75rem;
color: var(--doc-primary);
background-color: var(--doc-surface-2);
padding: 0.15rem 0.45rem;
border-radius: var(--doc-radius-sm);
}
.doc-activity-time {
color: var(--doc-text-light);
font-size: 0.725rem;
margin-left: auto;
}
.doc-timeline-text {
font-size: 0.85rem;
color: var(--doc-text-muted);
line-height: 1.5;
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
padding: 1rem 1.25rem;
border-radius: var(--doc-radius-lg);
margin: 0;
}
.doc-timeline-text code {
font-family: var(--doc-font-code);
font-size: 0.75rem;
background-color: var(--doc-surface-2);
padding: 0.15rem 0.35rem;
border-radius: var(--doc-radius-sm);
color: var(--doc-text);
border: 1px solid var(--doc-border);
}
.doc-timeline-text pre {
background-color: #0F172A !important;
border: 1px solid #1E293B !important;
padding: 0.75rem 1rem !important;
border-radius: var(--doc-radius) !important;
margin: 0.5rem 0 0 0 !important;
overflow-x: auto;
}
.doc-timeline-text pre code {
background-color: transparent !important;
color: #F8FAFC !important;
border: none !important;
padding: 0 !important;
font-size: 0.8rem !important;
}
@media (max-width: 576px) {
.doc-activity-time {
margin-left: 0;
width: 100%;
margin-top: 0.15rem;
}
}
Modals
Credentials Generator Modal
HTML
<div class="doc-modal-overlay">
<div class="doc-modal-card">
<!-- Close Button -->
<button class="doc-modal-close" aria-label="Close dialog">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
<div class="doc-modal-body">
<!-- Key Badge -->
<div class="doc-modal-badge-wrapper">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg>
</div>
<span class="doc-modal-tag">API Secret Key Generator</span>
<h2 class="doc-modal-title">Generate Live Secret Credentials Key</h2>
<p class="doc-modal-desc">
Your new secret key can authorize standard Node client handshakes. For high security, do not expose this token inside public code branches.
</p>
<!-- Key display -->
<div class="doc-plan-box">
<div class="doc-plan-details">
<span class="doc-plan-name">ig_live_4242_x9y2z...</span>
<span class="doc-plan-desc">Generated on May 19, 2026</span>
</div>
<button class="doc-btn doc-btn-outline doc-btn-sm" aria-label="Copy key">
Copy Key
</button>
</div>
<div class="doc-modal-actions">
<button class="doc-btn doc-btn-primary doc-btn-block">
Save Key Coordinates
</button>
<button class="doc-btn doc-btn-outline doc-btn-block">
Configure Keys Scopes
</button>
</div>
<a href="#" class="doc-modal-cancel">Cancel and Return</a>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Credentials Generator Modal */
/* NOTE: This component requires base.css to be included in your page. */
.doc-modal-overlay {
width: 100%;
max-width: 500px;
margin: 0 auto;
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow);
position: relative;
overflow: hidden;
}
.doc-modal-card {
padding: 3rem 2.5rem;
}
.doc-modal-close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
background: none;
border: none;
cursor: pointer;
color: var(--doc-text-light);
display: flex;
align-items: center;
justify-content: center;
padding: 0.35rem;
border-radius: var(--doc-radius);
transition: var(--doc-transition);
}
.doc-modal-close:hover {
background-color: var(--doc-surface-2);
color: var(--doc-text);
}
.doc-modal-close svg {
width: 18px;
height: 18px;
}
.doc-modal-body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.25rem;
}
.doc-modal-badge-wrapper {
width: 56px;
height: 56px;
border-radius: var(--doc-radius-pill);
background-color: var(--doc-primary-muted);
color: var(--doc-primary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
box-shadow: var(--doc-shadow-glow);
}
.doc-modal-badge-wrapper svg {
width: 24px;
height: 24px;
}
.doc-modal-tag {
font-family: var(--doc-font-heading);
font-size: 0.75rem;
font-weight: 700;
color: var(--doc-primary);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.doc-modal-title {
font-family: var(--doc-font-heading);
font-size: 1.85rem;
font-weight: 800;
line-height: 1.2;
margin: 0;
color: var(--doc-text);
}
.doc-modal-desc {
font-size: 0.85rem;
color: var(--doc-text-muted);
line-height: 1.6;
margin: 0;
}
/* Plan Box */
.doc-plan-box {
width: 100%;
background-color: var(--doc-surface-2);
border: 1px solid var(--doc-border);
padding: 1.25rem 1.5rem;
border-radius: var(--doc-radius-lg);
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
}
.doc-plan-details {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.doc-plan-name {
font-family: var(--doc-font-code);
font-size: 1rem;
font-weight: 600;
color: var(--doc-primary);
}
.doc-plan-desc {
font-size: 0.75rem;
color: var(--doc-text-light);
}
/* Actions */
.doc-modal-actions {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-top: 0.5rem;
}
.doc-modal-cancel {
font-size: 0.8rem;
font-weight: 600;
color: var(--doc-text-light);
text-decoration: none;
transition: var(--doc-transition);
}
.doc-modal-cancel:hover {
color: var(--doc-text-muted);
text-decoration: underline;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap');
/* =========================================
Documentation Design System (doc-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Surfaces */
--doc-bg: #FAFAFC; /* Paper White */
--doc-surface: #FFFFFF; /* Pure White */
--doc-surface-2: #F3F4F6; /* Muted Ice */
--doc-code-bg: #0F172A; /* Slate Blue code bg */
/* Brand Palette */
--doc-primary: #6366F1; /* Dev Indigo */
--doc-primary-hover: #4F46E5;
--doc-primary-muted: rgba(99, 102, 241, 0.08);
--doc-accent: #10B981; /* Emerald/Active Accents */
--doc-accent-hover: #059669;
--doc-accent-muted: rgba(16, 185, 129, 0.08);
--doc-danger: #EF4444;
--doc-danger-muted: rgba(239, 68, 68, 0.08);
/* Text */
--doc-text: #111827; /* Charcoal black */
--doc-text-muted: #4B5563; /* Slate grey */
--doc-text-light: #9CA3AF;
/* Borders */
--doc-border: #E5E7EB; /* Clean light border */
--doc-border-strong: #D1D5DB;
--doc-border-glow: rgba(99, 102, 241, 0.25);
/* Geometric Rounded Shapes */
--doc-radius-sm: 4px;
--doc-radius: 8px;
--doc-radius-lg: 12px;
--doc-radius-pill: 999px;
/* Fonts */
--doc-font-heading: 'Outfit', sans-serif;
--doc-font-body: 'Inter', sans-serif;
--doc-font-code: 'Fira Code', monospace;
/* Shadows */
--doc-shadow-sm: 0 2px 8px rgba(0,0,0,0.03);
--doc-shadow: 0 8px 30px rgba(0,0,0,0.05);
--doc-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.08);
/* Transition */
--doc-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--doc-font-body);
color: var(--doc-text);
background-color: var(--doc-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.doc-card {
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow);
padding: 2.25rem;
transition: var(--doc-transition);
}
.doc-card:hover {
border-color: var(--doc-border-strong);
box-shadow: 0 10px 35px rgba(0,0,0,0.06);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--doc-font-heading);
font-weight: 700;
margin: 0;
color: var(--doc-text);
line-height: 1.25;
letter-spacing: -0.01em;
}
p {
font-family: var(--doc-font-body);
color: var(--doc-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.doc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.4rem;
font-family: var(--doc-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--doc-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--doc-transition);
white-space: nowrap;
user-select: none;
}
.doc-btn-primary {
background-color: var(--doc-primary);
color: #fff;
border-color: var(--doc-primary);
}
.doc-btn-primary:hover {
background-color: var(--doc-primary-hover);
border-color: var(--doc-primary-hover);
transform: translateY(-1px);
}
.doc-btn-accent {
background-color: var(--doc-accent);
color: #fff;
border-color: var(--doc-accent);
}
.doc-btn-accent:hover {
background-color: var(--doc-accent-hover);
border-color: var(--doc-accent-hover);
transform: translateY(-1px);
}
.doc-btn-outline {
background-color: var(--doc-surface);
color: var(--doc-text-muted);
border-color: var(--doc-border);
}
.doc-btn-outline:hover {
background-color: var(--doc-surface-2);
border-color: var(--doc-border-strong);
color: var(--doc-text);
}
.doc-btn-ghost {
background-color: transparent;
color: var(--doc-text-muted);
border-color: transparent;
}
.doc-btn-ghost:hover {
background-color: var(--doc-surface-2);
color: var(--doc-text);
}
.doc-btn-sm { padding: 0.45rem 1rem; font-size: 0.8rem; }
.doc-btn-lg { padding: 0.9rem 1.8rem; font-size: 0.95rem; }
.doc-btn-block { width: 100%; }
.doc-btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--doc-radius); }
/* ── Form Controls ────────────── */
.doc-input {
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius);
font-family: var(--doc-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--doc-text);
background-color: var(--doc-surface);
outline: none;
transition: var(--doc-transition);
}
.doc-input::placeholder { color: var(--doc-text-light); }
.doc-input:focus {
border-color: var(--doc-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.doc-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--doc-font-heading);
font-weight: 600;
font-size: 0.8rem;
color: var(--doc-text-muted);
}
/* Custom select */
.doc-select {
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius);
font-family: var(--doc-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--doc-text);
background-color: var(--doc-surface);
outline: none;
transition: var(--doc-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1rem;
cursor: pointer;
}
.doc-select:focus {
border-color: var(--doc-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
/* ── Badges ───────────────────── */
.doc-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.6rem;
border-radius: var(--doc-radius-sm);
font-family: var(--doc-font-code);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
border: 1px solid transparent;
}
.doc-badge-primary { background-color: var(--doc-primary-muted); color: var(--doc-primary); border-color: rgba(99, 102, 241, 0.2); }
.doc-badge-accent { background-color: var(--doc-accent-muted); color: var(--doc-accent); border-color: rgba(16, 185, 129, 0.2); }
.doc-badge-danger { background-color: var(--doc-danger-muted); color: var(--doc-danger); border-color: rgba(239, 68, 68, 0.2); }
.doc-badge-default { background-color: var(--doc-surface-2); color: var(--doc-text-muted); border-color: var(--doc-border); }
/* ── Code Blocks ──────────────── */
.doc-code-block {
background-color: var(--doc-code-bg);
color: #F8FAFC;
font-family: var(--doc-font-code);
font-size: 0.85rem;
padding: 1.25rem 1.5rem;
border-radius: var(--doc-radius-lg);
border: 1px solid #1E293B;
overflow-x: auto;
margin: 0;
position: relative;
}
.doc-code-copy-btn {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94A3B8;
padding: 0.35rem;
border-radius: var(--doc-radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--doc-transition);
}
.doc-code-copy-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.doc-code-copy-btn svg { width: 14px; height: 14px; }
/* ── Divider ──────────────────── */
.doc-divider { border: none; border-top: 1px solid var(--doc-border); margin: 0; }
/* ── Logo ─────────────────────── */
.doc-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--doc-font-heading);
font-size: 1.35rem;
color: var(--doc-text);
font-weight: 800;
letter-spacing: -0.02em;
}
.doc-logo-icon {
width: 28px;
height: 28px;
background-color: var(--doc-primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.85rem;
font-weight: 800;
border-radius: var(--doc-radius-sm);
}
/* ── Utilities ────────────────── */
.text-primary { color: var(--doc-primary) !important; }
.text-accent { color: var(--doc-accent) !important; }
.text-muted { color: var(--doc-text-muted) !important; }
.text-light { color: var(--doc-text-light) !important; }
/* --- COMPONENT STYLES --- */
.doc-modal-overlay {
width: 100%;
max-width: 500px;
margin: 0 auto;
background-color: var(--doc-surface);
border: 1px solid var(--doc-border);
border-radius: var(--doc-radius-lg);
box-shadow: var(--doc-shadow);
position: relative;
overflow: hidden;
}
.doc-modal-card {
padding: 3rem 2.5rem;
}
.doc-modal-close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
background: none;
border: none;
cursor: pointer;
color: var(--doc-text-light);
display: flex;
align-items: center;
justify-content: center;
padding: 0.35rem;
border-radius: var(--doc-radius);
transition: var(--doc-transition);
}
.doc-modal-close:hover {
background-color: var(--doc-surface-2);
color: var(--doc-text);
}
.doc-modal-close svg {
width: 18px;
height: 18px;
}
.doc-modal-body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.25rem;
}
.doc-modal-badge-wrapper {
width: 56px;
height: 56px;
border-radius: var(--doc-radius-pill);
background-color: var(--doc-primary-muted);
color: var(--doc-primary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
box-shadow: var(--doc-shadow-glow);
}
.doc-modal-badge-wrapper svg {
width: 24px;
height: 24px;
}
.doc-modal-tag {
font-family: var(--doc-font-heading);
font-size: 0.75rem;
font-weight: 700;
color: var(--doc-primary);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.doc-modal-title {
font-family: var(--doc-font-heading);
font-size: 1.85rem;
font-weight: 800;
line-height: 1.2;
margin: 0;
color: var(--doc-text);
}
.doc-modal-desc {
font-size: 0.85rem;
color: var(--doc-text-muted);
line-height: 1.6;
margin: 0;
}
/* Plan Box */
.doc-plan-box {
width: 100%;
background-color: var(--doc-surface-2);
border: 1px solid var(--doc-border);
padding: 1.25rem 1.5rem;
border-radius: var(--doc-radius-lg);
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
}
.doc-plan-details {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.doc-plan-name {
font-family: var(--doc-font-code);
font-size: 1rem;
font-weight: 600;
color: var(--doc-primary);
}
.doc-plan-desc {
font-size: 0.75rem;
color: var(--doc-text-light);
}
/* Actions */
.doc-modal-actions {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-top: 0.5rem;
}
.doc-modal-cancel {
font-size: 0.8rem;
font-weight: 600;
color: var(--doc-text-light);
text-decoration: none;
transition: var(--doc-transition);
}
.doc-modal-cancel:hover {
color: var(--doc-text-muted);
text-decoration: underline;
}