/* ============================================================ EMPIIHA — Design System Kinetic Obsidian Theme Bootstrap 5 + Custom CSS ============================================================ */ /* Inter + Geist Mono are self-hosted now (see /static/fonts/fonts.css, linked separately in before this file) -- this used to @import them from fonts.googleapis.com directly, which was a second, easy-to-miss live CDN dependency alongside the tag in the HTML. */ /* ── CSS Custom Properties (Dark Mode Default) ─────────────── */ :root { /* Background & Surface */ --clr-bg: #050505; --clr-surface: #131313; --clr-surface-dim: #131313; --clr-surface-low: #1c1b1b; --clr-surface-container: #201f1f; --clr-surface-high: #2a2a2a; --clr-surface-highest: #353534; --clr-surface-bright: #3a3939; /* Text */ --clr-on-surface: #e5e2e1; --clr-on-surface-variant: #9aada0; --clr-outline: #86948a; --clr-outline-variant: #3c4a42; /* Brand */ --clr-primary: #4edea3; --clr-primary-dim: #10b981; --clr-primary-container: rgba(78, 222, 163, 0.12); --clr-on-primary: #003824; --clr-secondary: #44e2cd; --clr-secondary-container: rgba(68, 226, 205, 0.12); --clr-on-secondary: #003731; --clr-tertiary: #adc6ff; --clr-tertiary-container: rgba(173, 198, 255, 0.12); /* States */ --clr-error: #ff6b6b; --clr-error-container: rgba(255, 107, 107, 0.12); --clr-warning: #fbbf24; --clr-warning-container: rgba(251, 191, 36, 0.12); --clr-success: #4edea3; --clr-success-container: rgba(78, 222, 163, 0.12); --clr-info: #adc6ff; /* Glass */ --glass-bg: rgba(18, 18, 18, 0.75); --glass-border: rgba(255, 255, 255, 0.07); --glass-border-top: rgba(255, 255, 255, 0.12); --glass-blur: 20px; /* Glow */ --glow-primary: 0 0 40px -8px rgba(78, 222, 163, 0.18); --glow-secondary: 0 0 40px -8px rgba(68, 226, 205, 0.18); --glow-primary-sm: 0 0 16px -4px rgba(78, 222, 163, 0.25); /* Typography */ --ff-sans: 'Inter', system-ui, -apple-system, sans-serif; --ff-mono: 'Geist Mono', 'Fira Code', monospace; /* Radii */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; --r-pill: 9999px; /* Spacing */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 40px; --sp-2xl: 64px; /* Sidebar */ --sidebar-w: 260px; --topbar-h: 72px; /* Transitions */ --tr-fast: all 0.15s ease; --tr-base: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); --tr-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Scrollbar */ scrollbar-color: var(--clr-surface-high) var(--clr-bg); scrollbar-width: thin; } /* ── Light Mode Overrides ─────────────────────────────────── */ [data-theme="light"] { /* Green-tinted background palette for brand consistency + depth */ --clr-bg: #edf7f2; --clr-surface: #f6fcf9; --clr-surface-dim: #e2f0e9; --clr-surface-low: #f0faf5; --clr-surface-container: #e6f4ec; --clr-surface-high: #d4e9dc; --clr-surface-highest: #c5e0ce; --clr-surface-bright: #fbfffe; --clr-on-surface: #0f1f17; --clr-on-surface-variant: #3a4d42; --clr-outline: #5e7268; --clr-outline-variant: #b0cab8; --clr-primary: #006c49; --clr-primary-dim: #007f56; --clr-primary-container: rgba(0, 108, 73, 0.10); --clr-on-primary: #ffffff; --clr-secondary: #005047; --clr-secondary-container: rgba(0, 80, 71, 0.10); --clr-on-secondary: #ffffff; --clr-tertiary: #004395; --clr-tertiary-container: rgba(0, 67, 149, 0.09); --clr-error: #ba1a1a; --clr-error-container: rgba(186, 26, 26, 0.09); --clr-warning: #b45309; --clr-warning-container: rgba(180, 83, 9, 0.09); --glass-bg: rgba(240, 250, 245, 0.88); --glass-border: rgba(0, 80, 40, 0.09); --glass-border-top: rgba(255, 255, 255, 0.75); --glow-primary: 0 4px 24px rgba(0, 108, 73, 0.14); --glow-primary-sm: 0 2px 12px rgba(0, 108, 73, 0.20); scrollbar-color: var(--clr-surface-high) var(--clr-bg); } /* ── Global Reset & Base ──────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* overflow-x on html + body together keeps the viewport as the scroll container, which is required for position:fixed children to work. If only body has overflow-x:hidden the body becomes the scroll container and fixed elements scroll along with the page. */ overflow-x: hidden; } body { font-family: var(--ff-sans); background-color: var(--clr-bg); color: var(--clr-on-surface); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; min-height: 100vh; transition: background-color 0.3s ease, color 0.3s ease; } /* ── Scrollbar ────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--clr-bg); } ::-webkit-scrollbar-thumb { background: var(--clr-surface-high); border-radius: var(--r-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--clr-surface-bright); } /* ── Typography Scale ─────────────────────────────────────── */ .text-display { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; } .text-headline-lg { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; } .text-headline-md { font-size: 1.25rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; } .text-headline-sm { font-size: 1rem; font-weight: 600; line-height: 1.5; letter-spacing: -0.005em; } .text-body-lg { font-size: 1rem; line-height: 1.6; } .text-body-md { font-size: 0.875rem; line-height: 1.5; } .text-body-sm { font-size: 0.75rem; line-height: 1.4; } .text-label { font-family: var(--ff-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .text-mono { font-family: var(--ff-mono); font-size: 0.8125rem; } .text-amount { font-family: var(--ff-mono); font-weight: 600; letter-spacing: -0.02em; } /* ── Color Utilities ──────────────────────────────────────── */ .text-primary { color: var(--clr-primary) !important; } .text-secondary { color: var(--clr-secondary) !important; } .text-tertiary { color: var(--clr-tertiary) !important; } .text-muted { color: var(--clr-on-surface-variant) !important; } .text-error { color: var(--clr-error) !important; } .text-warning { color: var(--clr-warning) !important; } .text-on-surface { color: var(--clr-on-surface) !important; } .bg-primary-subtle { background-color: var(--clr-primary-container) !important; } .bg-secondary-subtle { background-color: var(--clr-secondary-container) !important; } .bg-error-subtle { background-color: var(--clr-error-container) !important; } .bg-warning-subtle { background-color: var(--clr-warning-container) !important; } .bg-surface { background-color: var(--clr-surface) !important; } .bg-surface-low { background-color: var(--clr-surface-low) !important; } .bg-surface-container { background-color: var(--clr-surface-container) !important; } /* ── Gradient Text ────────────────────────────────────────── */ .gradient-text { background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Glow Utilities ───────────────────────────────────────── */ .glow-primary { box-shadow: var(--glow-primary); } .glow-sm { box-shadow: var(--glow-primary-sm); } .glow-text { text-shadow: 0 0 20px rgba(78, 222, 163, 0.5); } /* ── Links ────────────────────────────────────────────────── */ a { color: var(--clr-primary); text-decoration: none; transition: var(--tr-fast); } a:hover { color: var(--clr-secondary); } /* ── Selection ────────────────────────────────────────────── */ ::selection { background: var(--clr-primary-container); color: var(--clr-on-surface); } /* ── Focus Visible ────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; border-radius: var(--r-xs); } /* ── Transitions for theme ────────────────────────────────── */ .transition-theme { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }