/** * REPLICANTS UI KIT * ================== * Design system inspired by Skiv (skiv.com). * Their palette: black (#161612) + slate (#70747B) + silicon (#edf1f3) * Our palette: navy (#1e1b4b) + slate (#6b7280) + silicon (#f0f2f5) * * EVERY new UI element must use these tokens. * DO NOT inline colours, font-sizes, or spacing — use the variables below. * * Font: Inter (already loaded via Google Fonts) * Base font-size: 62.5% on → 1rem = 10px */ /* ══════════════════════════════════════════════ 1. DESIGN TOKENS ══════════════════════════════════════════════ */ :root { /* ── Colour palette ── */ --rk-navy: #1e1b4b; /* Primary — replaces Skiv's black */ --rk-navy-light: #312e81; /* Hover/active states */ --rk-navy-dark: #0f0d2e; /* Deep accents */ --rk-blue: #6366f1; /* Accent / interactive highlight */ --rk-blue-light: #e0e7ff; /* Light blue highlight backgrounds */ --rk-blue-subtle: rgba(99,102,241,0.08); /* Very subtle tint */ --rk-black: #161612; /* Pure text when needed */ --rk-white: #ffffff; --rk-bg: #ffffff; /* Page background */ /* Grays (matched to Skiv's system) */ --rk-slate: #6b7280; /* Secondary text — Skiv uses #70747B */ --rk-slate-light: #9ca3af; /* Tertiary / placeholders */ --rk-gray: #d1d5db; /* Borders, dividers */ --rk-gray-light: #e5e7eb; /* Subtle borders */ --rk-silicon: #f0f2f5; /* Card backgrounds, code blocks — Skiv's #edf1f3 */ --rk-cloud: #f8f9fa; /* Off-white surfaces */ /* Status */ --rk-success: #059669; --rk-success-bg: #ecfdf5; --rk-warning: #d97706; --rk-warning-bg: #fffbeb; --rk-error: #dc2626; --rk-error-bg: #fef2f2; --rk-info: #2563eb; --rk-info-bg: #eff6ff; /* ── Typography ── */ --rk-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --rk-font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; /* Font sizes (rem based on 10px root) */ --rk-text-xs: 11px; /* 11px — micro labels */ --rk-text-sm: 13px; /* 13px — secondary text, captions */ --rk-text-base: 14px; /* 14px — body text (Skiv uses 1.4-1.6rem) */ --rk-text-md: 15px; /* 15px — sidebar items */ --rk-text-lg: 16px; /* 16px — prominent body */ --rk-text-xl: 18px; /* 18px — card titles, sub-headings */ --rk-text-2xl: 24px; /* 24px — section headings */ --rk-text-3xl: 32px; /* 32px — page titles */ /* Font weights (Skiv uses 300/400/500) */ --rk-weight-light: 300; --rk-weight-normal: 400; --rk-weight-medium: 500; --rk-weight-semi: 600; /* Line heights */ --rk-leading-tight: 1.3; --rk-leading-normal: 1.5; --rk-leading-relaxed:1.7; /* ── Spacing (4px grid) ── */ --rk-space-1: 4px; --rk-space-2: 8px; --rk-space-3: 12px; --rk-space-4: 16px; --rk-space-5: 20px; --rk-space-6: 24px; --rk-space-8: 32px; --rk-space-10: 40px; --rk-space-12: 48px; --rk-space-16: 64px; /* ── Borders & Radius ── */ --rk-radius-sm: 6px; --rk-radius-md: 8px; --rk-radius-lg: 10px; /* Skiv's standard (buttons, cards, code boxes) */ --rk-radius-xl: 12px; --rk-radius-pill: 999px; --rk-border: 1px solid var(--rk-gray-light); /* ── Shadows ── */ --rk-shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --rk-shadow-md: 0 4px 12px rgba(0,0,0,0.06); --rk-shadow-lg: 0 8px 32px rgba(0,0,0,0.10); --rk-shadow-hover:0 0 0 .5px #e4e5e9, 0 0 0 1px rgba(228,229,233,0.6), 0 0 0 5.5px #f9f9fb; /* Skiv's glow */ /* ── Transitions ── */ --rk-transition: 0.15s ease-in-out; --rk-transition-fast: 0.1s ease; /* ── Layout ── */ --rk-sidebar-width: 240px; --rk-topbar-height: 60px; --rk-content-max: 1200px; } /* Retina weight adjustment (Skiv pattern) */ @media only screen and (min-resolution: 2dppx), only screen and (-webkit-min-device-pixel-ratio: 2) { :root { --rk-weight-light: 300; --rk-weight-normal: 400; } } @media (max-width: 768px) { :root { --rk-weight-light: 400; } } /* ══════════════════════════════════════════════ 2. BASE RESET ══════════════════════════════════════════════ */ .rk *, .rk *::before, .rk *::after { box-sizing: border-box; font-family: var(--rk-font); } /* ══════════════════════════════════════════════ 3. TYPOGRAPHY ══════════════════════════════════════════════ */ .rk h1 { font-size: var(--rk-text-3xl); font-weight: var(--rk-weight-medium); color: var(--rk-navy); line-height: var(--rk-leading-tight); margin: 0 0 var(--rk-space-4); } .rk h2 { font-size: var(--rk-text-2xl); font-weight: var(--rk-weight-medium); color: var(--rk-navy); line-height: var(--rk-leading-tight); margin: 0 0 var(--rk-space-3); } .rk h3 { font-size: var(--rk-text-xl); font-weight: var(--rk-weight-medium); color: var(--rk-navy); margin: 0 0 var(--rk-space-2); } .rk p, .rk li, .rk span { font-size: var(--rk-text-base); line-height: var(--rk-leading-relaxed); color: var(--rk-slate); font-weight: var(--rk-weight-light); margin: 0; } .rk a { color: var(--rk-blue); text-decoration: none; font-weight: var(--rk-weight-light); transition: var(--rk-transition); } .rk a:hover { color: var(--rk-navy); } .rk .text-xs { font-size: var(--rk-text-xs); } .rk .text-sm { font-size: var(--rk-text-sm); } .rk .text-base { font-size: var(--rk-text-base); } .rk .text-md { font-size: var(--rk-text-md); } .rk .text-lg { font-size: var(--rk-text-lg); } .rk .text-navy { color: var(--rk-navy); } .rk .text-slate { color: var(--rk-slate); } .rk .text-light { color: var(--rk-slate-light); } .rk .fw-light { font-weight: var(--rk-weight-light); } .rk .fw-medium { font-weight: var(--rk-weight-medium); } .rk .fw-semi { font-weight: var(--rk-weight-semi); } /* ══════════════════════════════════════════════ 4. BUTTONS ══════════════════════════════════════════════ */ /* Primary — dark navy pill (Skiv: dark rounded, right arrow) */ .rk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--rk-space-2); padding: var(--rk-space-2) var(--rk-space-4) var(--rk-space-2) var(--rk-space-5); border-radius: var(--rk-radius-lg); cursor: pointer; color: var(--rk-white); background: var(--rk-navy); border: none; font-size: var(--rk-text-base); font-weight: var(--rk-weight-light); font-family: var(--rk-font); min-height: 40px; transition: var(--rk-transition-fast); white-space: nowrap; } .rk-btn:hover { box-shadow: var(--rk-shadow-hover); } .rk-btn:active { transform: scale(0.98); } /* Big CTA button (Skiv: 58px min-height) */ .rk-btn-lg { padding: var(--rk-space-3) var(--rk-space-6) var(--rk-space-3) var(--rk-space-8); font-size: var(--rk-text-lg); min-height: 48px; border-radius: var(--rk-radius-lg); } /* Secondary — ghost / outlined */ .rk-btn-secondary { background: transparent; color: var(--rk-navy); border: 1px solid var(--rk-gray); } .rk-btn-secondary:hover { background: var(--rk-cloud); border-color: var(--rk-gray); } /* Accent — blue */ .rk-btn-accent { background: var(--rk-blue); } .rk-btn-accent:hover { background: #4f46e5; box-shadow: var(--rk-shadow-hover); } /* Ghost — no border, subtle hover */ .rk-btn-ghost { background: transparent; color: var(--rk-slate); border: none; padding: var(--rk-space-2) var(--rk-space-3); } .rk-btn-ghost:hover { background: var(--rk-silicon); color: var(--rk-navy); } /* Small variant */ .rk-btn-sm { min-height: 32px; padding: var(--rk-space-1) var(--rk-space-3); font-size: var(--rk-text-sm); } /* Disabled */ .rk-btn:disabled, .rk-btn.disabled { opacity: 0.4; pointer-events: none; } /* Icon-only */ .rk-btn-icon { padding: var(--rk-space-2); min-height: 36px; min-width: 36px; } /* Arrow indicator (Skiv pattern — "Get started >") */ .rk-btn .rk-arrow::after { content: '›'; font-size: 1.2em; margin-left: var(--rk-space-1); transition: transform var(--rk-transition); } .rk-btn:hover .rk-arrow::after { transform: translateX(2px); } /* ══════════════════════════════════════════════ 5. CARDS ══════════════════════════════════════════════ */ /* Feature card (Skiv's API overview cards) */ .rk-card { background: var(--rk-white); border: var(--rk-border); border-radius: var(--rk-radius-xl); padding: var(--rk-space-5); transition: all var(--rk-transition); } .rk-card:hover { border-color: var(--rk-gray); box-shadow: var(--rk-shadow-md); } /* Card with light tinted background (Skiv's Tools dropdown) */ .rk-card-tinted { background: var(--rk-cloud); border: none; border-radius: var(--rk-radius-xl); padding: var(--rk-space-6); transition: all var(--rk-transition); } .rk-card-tinted:hover { background: var(--rk-silicon); } /* Card icon (top-left, 20-24px) */ .rk-card-icon { font-size: 20px; color: var(--rk-navy); margin-bottom: var(--rk-space-3); display: block; } .rk-card-title { font-size: var(--rk-text-lg); font-weight: var(--rk-weight-medium); color: var(--rk-navy); margin-bottom: var(--rk-space-2); } .rk-card-desc { font-size: var(--rk-text-sm); color: var(--rk-slate); font-weight: var(--rk-weight-light); line-height: var(--rk-leading-relaxed); } /* Card grid (Skiv: 4-col on desktop) */ .rk-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--rk-space-4); } @media (max-width: 768px) { .rk-card-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════ 6. TABS ══════════════════════════════════════════════ */ /* Light pill tabs (Skiv's curl | python | node.js) */ .rk-tabs { display: inline-flex; gap: 0; background: var(--rk-silicon); border-radius: var(--rk-radius-lg); padding: 3px; } .rk-tab { padding: var(--rk-space-2) var(--rk-space-4); border-radius: var(--rk-radius-md); font-size: var(--rk-text-sm); font-weight: var(--rk-weight-normal); color: var(--rk-slate); cursor: pointer; border: none; background: transparent; font-family: var(--rk-font); transition: all var(--rk-transition); white-space: nowrap; } .rk-tab:hover { color: var(--rk-navy); } .rk-tab.active { background: var(--rk-white); color: var(--rk-navy); font-weight: var(--rk-weight-medium); box-shadow: var(--rk-shadow-sm); } /* Underline tabs (alternative) */ .rk-tabs-underline { display: flex; gap: var(--rk-space-6); border-bottom: 1px solid var(--rk-gray-light); } .rk-tab-underline { padding: var(--rk-space-3) 0; font-size: var(--rk-text-base); font-weight: var(--rk-weight-normal); color: var(--rk-slate); cursor: pointer; border: none; background: none; font-family: var(--rk-font); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--rk-transition); } .rk-tab-underline.active { color: var(--rk-navy); font-weight: var(--rk-weight-medium); border-bottom-color: var(--rk-navy); } /* ══════════════════════════════════════════════ 7. SIDEBAR ══════════════════════════════════════════════ */ .rk-sidebar { width: var(--rk-sidebar-width); position: fixed; top: var(--rk-topbar-height); left: 0; bottom: 0; background: var(--rk-bg); overflow-y: auto; overflow-x: hidden; padding: var(--rk-space-5) var(--rk-space-3); z-index: 100; } .rk-sidebar::-webkit-scrollbar { width: 0; } .rk-sidebar:hover::-webkit-scrollbar { width: 4px; } .rk-sidebar::-webkit-scrollbar-thumb { background: var(--rk-gray); border-radius: 4px; } /* Sidebar nav item (Skiv: icon + label, 15px, weight 300) */ .rk-sidebar-item { display: flex; align-items: center; gap: var(--rk-space-3); padding: 7px var(--rk-space-3); border-radius: var(--rk-radius-md); font-size: var(--rk-text-md); font-weight: var(--rk-weight-light); color: var(--rk-navy); cursor: pointer; transition: all var(--rk-transition); text-decoration: none; position: relative; width: 100%; border: none; background: none; text-align: left; font-family: var(--rk-font); } .rk-sidebar-item:hover { background: var(--rk-silicon); } .rk-sidebar-item.active { font-weight: var(--rk-weight-medium); } /* Active indicator — vertical line (Skiv pattern) */ .rk-sidebar-item.active::before { content: ''; position: absolute; left: -4px; top: 6px; width: 2px; height: calc(100% - 12px); background: var(--rk-navy); border-radius: 2px; } .rk-sidebar-item i, .rk-sidebar-item svg { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; color: var(--rk-slate); } .rk-sidebar-item.active i, .rk-sidebar-item.active svg { color: var(--rk-navy); } /* Sidebar group header */ .rk-sidebar-group { font-size: var(--rk-text-xs); font-weight: var(--rk-weight-medium); color: var(--rk-slate-light); text-transform: uppercase; letter-spacing: 0.05em; padding: var(--rk-space-4) var(--rk-space-3) var(--rk-space-2); } /* Nested items (Skiv: indented 14px) */ .rk-sidebar-nested { margin-left: var(--rk-space-4); } .rk-sidebar-nested .rk-sidebar-item { font-size: var(--rk-text-base); } /* ══════════════════════════════════════════════ 8. CODE BLOCKS ══════════════════════════════════════════════ */ .rk-code { background: var(--rk-silicon); border-radius: var(--rk-radius-lg); padding: var(--rk-space-6); font-family: var(--rk-font-mono); font-size: var(--rk-text-sm); line-height: var(--rk-leading-normal); overflow-x: auto; color: var(--rk-navy); } .rk-code-inline { background: var(--rk-silicon); padding: 2px 6px; border-radius: 4px; font-family: var(--rk-font-mono); font-size: 0.9em; color: var(--rk-navy); } /* ══════════════════════════════════════════════ 9. INPUTS ══════════════════════════════════════════════ */ .rk-input { width: 100%; padding: var(--rk-space-3) var(--rk-space-4); border: 1px solid var(--rk-gray-light); border-radius: var(--rk-radius-lg); font-size: var(--rk-text-base); font-family: var(--rk-font); font-weight: var(--rk-weight-light); color: var(--rk-navy); outline: none; transition: border-color var(--rk-transition); background: var(--rk-white); } .rk-input:focus { border-color: var(--rk-blue); } .rk-input::placeholder { color: var(--rk-slate-light); } .rk-textarea { resize: vertical; min-height: 80px; } .rk-label { display: block; font-size: var(--rk-text-sm); font-weight: var(--rk-weight-medium); color: var(--rk-slate); margin-bottom: var(--rk-space-2); } /* ══════════════════════════════════════════════ 10. BADGES & PILLS ══════════════════════════════════════════════ */ .rk-badge { display: inline-flex; align-items: center; padding: 2px var(--rk-space-2); border-radius: var(--rk-radius-pill); font-size: var(--rk-text-xs); font-weight: var(--rk-weight-medium); background: var(--rk-silicon); color: var(--rk-slate); } .rk-badge-success { background: var(--rk-success-bg); color: var(--rk-success); } .rk-badge-warning { background: var(--rk-warning-bg); color: var(--rk-warning); } .rk-badge-error { background: var(--rk-error-bg); color: var(--rk-error); } .rk-badge-info { background: var(--rk-info-bg); color: var(--rk-info); } /* ══════════════════════════════════════════════ 11. DIVIDERS & SPACING ══════════════════════════════════════════════ */ .rk-divider { border: none; border-bottom: 1px solid var(--rk-gray-light); margin: var(--rk-space-6) 0; } /* ══════════════════════════════════════════════ 12. BREADCRUMBS ══════════════════════════════════════════════ */ .rk-breadcrumbs { display: flex; align-items: center; gap: var(--rk-space-3); font-size: var(--rk-text-sm); color: var(--rk-slate-light); margin-bottom: var(--rk-space-2); font-weight: var(--rk-weight-regular); letter-spacing: 0.01em; } .rk-breadcrumbs a { color: var(--rk-slate); font-weight: var(--rk-weight-regular); text-decoration: none; transition: color 0.15s; } .rk-breadcrumbs a:hover { color: var(--rk-navy); } .rk-breadcrumbs .sep { color: var(--rk-gray-light); font-weight: var(--rk-weight-light); } .rk-breadcrumbs span:last-child { color: var(--rk-navy); font-weight: var(--rk-weight-medium); } /* ══════════════════════════════════════════════ 13. TOASTS / ALERTS ══════════════════════════════════════════════ */ .rk-toast { padding: var(--rk-space-3) var(--rk-space-5); border-radius: var(--rk-radius-lg); font-size: var(--rk-text-sm); font-weight: var(--rk-weight-normal); box-shadow: var(--rk-shadow-lg); } /* ══════════════════════════════════════════════ 14. UTILITY HELPERS ══════════════════════════════════════════════ */ .rk-flex { display: flex; } .rk-flex-col { flex-direction: column; } .rk-items-c { align-items: center; } .rk-justify-sb { justify-content: space-between; } .rk-gap-2 { gap: var(--rk-space-2); } .rk-gap-3 { gap: var(--rk-space-3); } .rk-gap-4 { gap: var(--rk-space-4); } .rk-gap-6 { gap: var(--rk-space-6); } .rk-mt-2 { margin-top: var(--rk-space-2); } .rk-mt-4 { margin-top: var(--rk-space-4); } .rk-mt-6 { margin-top: var(--rk-space-6); } .rk-mb-2 { margin-bottom: var(--rk-space-2); } .rk-mb-4 { margin-bottom: var(--rk-space-4); } .rk-mb-6 { margin-bottom: var(--rk-space-6); } @keyframes rk-spin { to { transform: rotate(360deg); } }