/* =================================================== TaluZone – Centralized theme system Single source of truth for all design tokens. Usage: set data-theme="dark" or data-theme="light" on the element. Defaults to "dark". =================================================== */ /* --- Layout & typography constants (theme-independent) --- */ :root { --header-height: 60px; --sidebar-width: 240px; --radius: 10px; --border-radius: 8px; --transition: 300ms ease; --font-heading: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Text on accent-colored surfaces (buttons, active pills…) – always white */ --text-on-accent: #fff; } /* =================================================== Dark theme (default) Palette: deep navy bg + steel blue accent derived from the TaluZone logo "Zone" text =================================================== */ [data-theme="dark"] { /* Backgrounds */ --bg-primary: #0c1520; --bg-secondary: #101d2b; --bg-sidebar: #080f18; --bg-header: rgba(8, 15, 24, 0.95); --bg-card: rgba(255, 255, 255, 0.04); --bg-hover: rgba(255, 255, 255, 0.07); /* Decorative background – radial glows */ --bg-glow-1: radial-gradient(ellipse 600px 400px at 15% 10%, rgba(74, 158, 196, 0.06) 0%, transparent 70%); --bg-glow-2: radial-gradient(ellipse 500px 500px at 85% 60%, rgba(58, 126, 160, 0.05) 0%, transparent 70%); --bg-glow-3: radial-gradient(ellipse 400px 300px at 50% 95%, rgba(34, 211, 154, 0.03) 0%, transparent 70%); /* Decorative background – dot grid */ --bg-dot-color: rgba(74, 158, 196, 0.07); --bg-dot-size: 1px; --bg-dot-gap: 28px; /* Decorative background – header & sidebar gradients */ --bg-header-gradient: linear-gradient(90deg, rgba(74, 158, 196, 0.08) 0%, transparent 50%, rgba(74, 158, 196, 0.04) 100%); --bg-sidebar-gradient: linear-gradient(180deg, rgba(74, 158, 196, 0.07) 0%, transparent 45%, rgba(74, 158, 196, 0.03) 100%); /* Accent – steel blue */ --accent-primary: #4a9ec4; --accent-secondary: #3a7ea0; --accent-hover: #5ab0d6; /* Text */ --text-primary: #ddeaf3; --text-secondary: #6b8fa8; /* Status – green */ --success: #22d39a; --success-bg: rgba(34, 211, 154, 0.1); --success-border: rgba(34, 211, 154, 0.3); /* Glass & borders */ --glass-bg: rgba(255, 255, 255, 0.04); --glass-border: rgba(74, 158, 196, 0.18); --border-color: rgba(74, 158, 196, 0.1); /* Glow – for box-shadows on hover */ --glow: rgba(74, 158, 196, 0.3); /* Loading circle track */ --loading-track: rgba(74, 158, 196, 0.15); /* Error state */ --error: #f87171; /* Nav item hover/active backgrounds */ --nav-hover-bg: rgba(74, 158, 196, 0.08); --nav-active-bg: rgba(74, 158, 196, 0.12); } /* =================================================== Light theme Palette: soft blue-grey bg + teal accent (original) =================================================== */ [data-theme="light"] { /* Backgrounds */ --bg-primary: #f0f6f8; --bg-secondary: #e6eff2; --bg-sidebar: #e8f1f4; --bg-header: rgba(234, 243, 246, 0.95); --bg-card: rgba(255, 255, 255, 0.7); --bg-hover: rgba(255, 255, 255, 0.8); /* Decorative background – radial glows */ --bg-glow-1: radial-gradient(ellipse 600px 400px at 15% 10%, rgba(58, 155, 170, 0.06) 0%, transparent 70%); --bg-glow-2: radial-gradient(ellipse 500px 500px at 85% 60%, rgba(44, 122, 135, 0.05) 0%, transparent 70%); --bg-glow-3: radial-gradient(ellipse 400px 300px at 50% 95%, rgba(15, 168, 126, 0.04) 0%, transparent 70%); /* Decorative background – dot grid */ --bg-dot-color: rgba(58, 155, 170, 0.08); --bg-dot-size: 1px; --bg-dot-gap: 28px; /* Decorative background – header & sidebar gradients */ --bg-header-gradient: linear-gradient(90deg, rgba(58, 155, 170, 0.07) 0%, transparent 50%, rgba(58, 155, 170, 0.04) 100%); --bg-sidebar-gradient: linear-gradient(180deg, rgba(58, 155, 170, 0.06) 0%, transparent 45%, rgba(58, 155, 170, 0.03) 100%); /* Accent – teal */ --accent-primary: #3a9baa; --accent-secondary: #2c7a87; --accent-hover: #2d8a9a; /* Text */ --text-primary: #1a2e35; --text-secondary: #5a7a84; /* Status – green */ --success: #0fa87e; --success-bg: rgba(15, 168, 126, 0.1); --success-border: rgba(15, 168, 126, 0.3); /* Glass & borders */ --glass-bg: rgba(255, 255, 255, 0.55); --glass-border: rgba(58, 155, 170, 0.15); --border-color: rgba(58, 155, 170, 0.12); /* Glow – for box-shadows on hover */ --glow: rgba(58, 155, 170, 0.3); /* Loading circle track */ --loading-track: #d0dde2; /* Error state */ --error: #e05c5c; /* Nav item hover/active backgrounds */ --nav-hover-bg: rgba(58, 155, 170, 0.08); --nav-active-bg: rgba(58, 155, 170, 0.10); } /* =================================================== Theme-specific non-variable overrides =================================================== */ /* Logo: dark "Talu" text becomes light-readable on dark header. Replace filter with TaluZoneBanDark.png when asset is available. */ [data-theme="dark"] .header-title-img { filter: invert(1) hue-rotate(180deg); } [data-theme="light"] .header-title-img { filter: none; } /* ------------------------------------------------------- Tech stack badge colors Dark: bright palette for readability on dark bg Light: muted tones for soft background ------------------------------------------------------- */ [data-theme="dark"] .tech-category-card.backend .stack-badge { background: rgba(78, 201, 222, 0.12); border-color: rgba(78, 201, 222, 0.25); color: #4ec9de; } [data-theme="dark"] .tech-category-card.frontend .stack-badge { background: rgba(96, 165, 250, 0.12); border-color: rgba(96, 165, 250, 0.25); color: #60a5fa; } [data-theme="dark"] .tech-category-card.ai .stack-badge { background: rgba(167, 139, 250, 0.12); border-color: rgba(167, 139, 250, 0.25); color: #a78bfa; } [data-theme="dark"] .tech-category-card.trading .stack-badge { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.25); color: #34d399; } [data-theme="dark"] .tech-category-card.architecture .stack-badge { background: rgba(148, 163, 184, 0.1); border-color: rgba(148, 163, 184, 0.2); color: #94a3b8; } [data-theme="dark"] .tech-category-card.devops .stack-badge { background: rgba(251, 146, 60, 0.12); border-color: rgba(251, 146, 60, 0.25); color: #fb923c; } [data-theme="light"] .tech-category-card.backend .stack-badge { background: rgba(44, 122, 135, 0.15); border-color: rgba(44, 122, 135, 0.25); color: #1b5b69; } [data-theme="light"] .tech-category-card.frontend .stack-badge { background: rgba(57, 119, 182, 0.15); border-color: rgba(57, 119, 182, 0.25); color: #0c4a72; } [data-theme="light"] .tech-category-card.ai .stack-badge { background: rgba(123, 92, 173, 0.15); border-color: rgba(123, 92, 173, 0.25); color: #2d1f64; } [data-theme="light"] .tech-category-card.trading .stack-badge { background: rgba(48, 147, 86, 0.15); border-color: rgba(48, 147, 86, 0.25); color: #1d6a44; } [data-theme="light"] .tech-category-card.architecture .stack-badge { background: rgba(95, 114, 128, 0.12); border-color: rgba(95, 114, 128, 0.2); color: #2f3f4d; } [data-theme="light"] .tech-category-card.devops .stack-badge { background: rgba(225, 143, 76, 0.15); border-color: rgba(225, 143, 76, 0.3); color: #5b2b0f; }