/* ============================================================ THEME.CSS — Shared styles + color themes for all pages Change theme via the ⬡ THEME button (bottom-right corner) or set data-theme on : Options: "cyber" | "ember" | "forest" | "void" | "aurora" ============================================================ */ /* ── CYBER (default — blue/cyan) ── */ :root, [data-theme="cyber"] { --bg: #0a0e1a; --card: #111827; --card-border: #1e2d45; --accent: #00d4ff; --accent2: #7c3aed; --accent3: #10b981; --text: #e2e8f0; --muted: #64748b; --grid-color: rgba(0,212,255,0.03); --nav-bg: rgba(10,14,26,0.85); --nav-border: rgba(0,212,255,0.1); --tag-engine-color: #00d4ff; --tag-engine-border: rgba(0,212,255,0.3); --tag-engine-bg: rgba(0,212,255,0.06); --tag-engine-hover: rgba(0,212,255,0.15); --tag-engine-glow: rgba(0,212,255,0.2); --tag-lang-color: #a78bfa; --tag-lang-border: rgba(167,139,250,0.3); --tag-lang-bg: rgba(167,139,250,0.06); --tag-lang-hover: rgba(167,139,250,0.15); --tag-lang-glow: rgba(167,139,250,0.2); --tag-backend-color: #10b981; --tag-backend-border: rgba(16,185,129,0.3); --tag-backend-bg: rgba(16,185,129,0.06); --tag-backend-hover: rgba(16,185,129,0.15); --tag-backend-glow: rgba(16,185,129,0.2); --tag-tool-color: #f59e0b; --tag-tool-border: rgba(245,158,11,0.3); --tag-tool-bg: rgba(245,158,11,0.06); --tag-tool-hover: rgba(245,158,11,0.15); --tag-tool-glow: rgba(245,158,11,0.2); --tag-mgmt-color: #f472b6; --tag-mgmt-border: rgba(244,114,182,0.3); --tag-mgmt-bg: rgba(244,114,182,0.06); --tag-mgmt-hover: rgba(244,114,182,0.15); --tag-mgmt-glow: rgba(244,114,182,0.2); --badge-platform-color: #10b981; --badge-platform-border: rgba(16,185,129,0.3); --badge-platform-bg: rgba(16,185,129,0.06); --badge-role-color: #a78bfa; --badge-role-border: rgba(167,139,250,0.3); --badge-role-bg: rgba(167,139,250,0.06); --badge-company-color: #f59e0b; --badge-company-border: rgba(245,158,11,0.3); --badge-company-bg: rgba(245,158,11,0.06); --contact-phone-color: #10b981; --contact-phone-border: rgba(16,185,129,0.5); --contact-phone-bg: rgba(16,185,129,0.1); --contact-phone-border-icon: rgba(16,185,129,0.2); --contact-email-color: #00d4ff; --contact-email-border: rgba(0,212,255,0.5); --contact-email-bg: rgba(0,212,255,0.1); --contact-email-border-icon: rgba(0,212,255,0.2); --contact-li-color: #a78bfa; --contact-li-border: rgba(124,58,237,0.5); --contact-li-bg: rgba(124,58,237,0.1); --contact-li-border-icon: rgba(124,58,237,0.2); } /* ── EMBER (orange/red) ── */ [data-theme="ember"] { --bg: #0f0a08; --card: #1a1008; --card-border: #3d1f0a; --accent: #ff6b2b; --accent2: #e11d48; --accent3: #f59e0b; --text: #f1e8e0; --muted: #7c5c48; --grid-color: rgba(255,107,43,0.03); --nav-bg: rgba(15,10,8,0.85); --nav-border: rgba(255,107,43,0.1); --tag-engine-color: #ff6b2b; --tag-engine-border: rgba(255,107,43,0.3); --tag-engine-bg: rgba(255,107,43,0.06); --tag-engine-hover: rgba(255,107,43,0.15); --tag-engine-glow: rgba(255,107,43,0.2); --tag-lang-color: #fb923c; --tag-lang-border: rgba(251,146,60,0.3); --tag-lang-bg: rgba(251,146,60,0.06); --tag-lang-hover: rgba(251,146,60,0.15); --tag-lang-glow: rgba(251,146,60,0.2); --tag-backend-color: #f59e0b; --tag-backend-border: rgba(245,158,11,0.3); --tag-backend-bg: rgba(245,158,11,0.06); --tag-backend-hover: rgba(245,158,11,0.15); --tag-backend-glow: rgba(245,158,11,0.2); --tag-tool-color: #e11d48; --tag-tool-border: rgba(225,29,72,0.3); --tag-tool-bg: rgba(225,29,72,0.06); --tag-tool-hover: rgba(225,29,72,0.15); --tag-tool-glow: rgba(225,29,72,0.2); --tag-mgmt-color: #fbbf24; --tag-mgmt-border: rgba(251,191,36,0.3); --tag-mgmt-bg: rgba(251,191,36,0.06); --tag-mgmt-hover: rgba(251,191,36,0.15); --tag-mgmt-glow: rgba(251,191,36,0.2); --badge-platform-color: #f59e0b; --badge-platform-border: rgba(245,158,11,0.3); --badge-platform-bg: rgba(245,158,11,0.06); --badge-role-color: #fb923c; --badge-role-border: rgba(251,146,60,0.3); --badge-role-bg: rgba(251,146,60,0.06); --badge-company-color: #ff6b2b; --badge-company-border: rgba(255,107,43,0.3); --badge-company-bg: rgba(255,107,43,0.06); --contact-phone-color: #f59e0b; --contact-phone-border: rgba(245,158,11,0.5); --contact-phone-bg: rgba(245,158,11,0.1); --contact-phone-border-icon: rgba(245,158,11,0.2); --contact-email-color: #ff6b2b; --contact-email-border: rgba(255,107,43,0.5); --contact-email-bg: rgba(255,107,43,0.1); --contact-email-border-icon: rgba(255,107,43,0.2); --contact-li-color: #e11d48; --contact-li-border: rgba(225,29,72,0.5); --contact-li-bg: rgba(225,29,72,0.1); --contact-li-border-icon: rgba(225,29,72,0.2); } /* ── FOREST (green) ── */ [data-theme="forest"] { --bg: #050f0a; --card: #0a1a10; --card-border: #0f3020; --accent: #00ff88; --accent2: #00b4d8; --accent3: #a3e635; --text: #e0f2e9; --muted: #4a7c5f; --grid-color: rgba(0,255,136,0.03); --nav-bg: rgba(5,15,10,0.85); --nav-border: rgba(0,255,136,0.1); --tag-engine-color: #00ff88; --tag-engine-border: rgba(0,255,136,0.3); --tag-engine-bg: rgba(0,255,136,0.06); --tag-engine-hover: rgba(0,255,136,0.15); --tag-engine-glow: rgba(0,255,136,0.2); --tag-lang-color: #00b4d8; --tag-lang-border: rgba(0,180,216,0.3); --tag-lang-bg: rgba(0,180,216,0.06); --tag-lang-hover: rgba(0,180,216,0.15); --tag-lang-glow: rgba(0,180,216,0.2); --tag-backend-color: #a3e635; --tag-backend-border: rgba(163,230,53,0.3); --tag-backend-bg: rgba(163,230,53,0.06); --tag-backend-hover: rgba(163,230,53,0.15); --tag-backend-glow: rgba(163,230,53,0.2); --tag-tool-color: #34d399; --tag-tool-border: rgba(52,211,153,0.3); --tag-tool-bg: rgba(52,211,153,0.06); --tag-tool-hover: rgba(52,211,153,0.15); --tag-tool-glow: rgba(52,211,153,0.2); --tag-mgmt-color: #6ee7b7; --tag-mgmt-border: rgba(110,231,183,0.3); --tag-mgmt-bg: rgba(110,231,183,0.06);--tag-mgmt-hover: rgba(110,231,183,0.15);--tag-mgmt-glow: rgba(110,231,183,0.2); --badge-platform-color: #a3e635; --badge-platform-border: rgba(163,230,53,0.3); --badge-platform-bg: rgba(163,230,53,0.06); --badge-role-color: #00b4d8; --badge-role-border: rgba(0,180,216,0.3); --badge-role-bg: rgba(0,180,216,0.06); --badge-company-color: #00ff88; --badge-company-border: rgba(0,255,136,0.3); --badge-company-bg: rgba(0,255,136,0.06); --contact-phone-color: #a3e635; --contact-phone-border: rgba(163,230,53,0.5); --contact-phone-bg: rgba(163,230,53,0.1); --contact-phone-border-icon: rgba(163,230,53,0.2); --contact-email-color: #00ff88; --contact-email-border: rgba(0,255,136,0.5); --contact-email-bg: rgba(0,255,136,0.1); --contact-email-border-icon: rgba(0,255,136,0.2); --contact-li-color: #00b4d8; --contact-li-border: rgba(0,180,216,0.5); --contact-li-bg: rgba(0,180,216,0.1); --contact-li-border-icon: rgba(0,180,216,0.2); } /* ── VOID (purple/pink) ── */ [data-theme="void"] { --bg: #08050f; --card: #110a1f; --card-border: #2a1550; --accent: #a855f7; --accent2: #ec4899; --accent3: #818cf8; --text: #ede9fe; --muted: #6b4f8a; --grid-color: rgba(168,85,247,0.03); --nav-bg: rgba(8,5,15,0.85); --nav-border: rgba(168,85,247,0.1); --tag-engine-color: #a855f7; --tag-engine-border: rgba(168,85,247,0.3); --tag-engine-bg: rgba(168,85,247,0.06); --tag-engine-hover: rgba(168,85,247,0.15); --tag-engine-glow: rgba(168,85,247,0.2); --tag-lang-color: #ec4899; --tag-lang-border: rgba(236,72,153,0.3); --tag-lang-bg: rgba(236,72,153,0.06); --tag-lang-hover: rgba(236,72,153,0.15); --tag-lang-glow: rgba(236,72,153,0.2); --tag-backend-color: #818cf8; --tag-backend-border: rgba(129,140,248,0.3); --tag-backend-bg: rgba(129,140,248,0.06);--tag-backend-hover: rgba(129,140,248,0.15);--tag-backend-glow: rgba(129,140,248,0.2); --tag-tool-color: #c084fc; --tag-tool-border: rgba(192,132,252,0.3); --tag-tool-bg: rgba(192,132,252,0.06);--tag-tool-hover: rgba(192,132,252,0.15);--tag-tool-glow: rgba(192,132,252,0.2); --tag-mgmt-color: #f0abfc; --tag-mgmt-border: rgba(240,171,252,0.3); --tag-mgmt-bg: rgba(240,171,252,0.06);--tag-mgmt-hover: rgba(240,171,252,0.15);--tag-mgmt-glow: rgba(240,171,252,0.2); --badge-platform-color: #818cf8; --badge-platform-border: rgba(129,140,248,0.3); --badge-platform-bg: rgba(129,140,248,0.06); --badge-role-color: #ec4899; --badge-role-border: rgba(236,72,153,0.3); --badge-role-bg: rgba(236,72,153,0.06); --badge-company-color: #a855f7; --badge-company-border: rgba(168,85,247,0.3); --badge-company-bg: rgba(168,85,247,0.06); --contact-phone-color: #818cf8; --contact-phone-border: rgba(129,140,248,0.5); --contact-phone-bg: rgba(129,140,248,0.1); --contact-phone-border-icon: rgba(129,140,248,0.2); --contact-email-color: #a855f7; --contact-email-border: rgba(168,85,247,0.5); --contact-email-bg: rgba(168,85,247,0.1); --contact-email-border-icon: rgba(168,85,247,0.2); --contact-li-color: #ec4899; --contact-li-border: rgba(236,72,153,0.5); --contact-li-bg: rgba(236,72,153,0.1); --contact-li-border-icon: rgba(236,72,153,0.2); } /* ── AURORA (teal/pink) ── */ [data-theme="aurora"] { --bg: #050d12; --card: #0a1520; --card-border: #0f2535; --accent: #2dd4bf; --accent2: #f472b6; --accent3: #34d399; --text: #e0f7f4; --muted: #3d6e6a; --grid-color: rgba(45,212,191,0.03); --nav-bg: rgba(5,13,18,0.85); --nav-border: rgba(45,212,191,0.1); --tag-engine-color: #2dd4bf; --tag-engine-border: rgba(45,212,191,0.3); --tag-engine-bg: rgba(45,212,191,0.06); --tag-engine-hover: rgba(45,212,191,0.15); --tag-engine-glow: rgba(45,212,191,0.2); --tag-lang-color: #f472b6; --tag-lang-border: rgba(244,114,182,0.3); --tag-lang-bg: rgba(244,114,182,0.06);--tag-lang-hover: rgba(244,114,182,0.15);--tag-lang-glow: rgba(244,114,182,0.2); --tag-backend-color: #34d399; --tag-backend-border: rgba(52,211,153,0.3); --tag-backend-bg: rgba(52,211,153,0.06); --tag-backend-hover: rgba(52,211,153,0.15); --tag-backend-glow: rgba(52,211,153,0.2); --tag-tool-color: #67e8f9; --tag-tool-border: rgba(103,232,249,0.3); --tag-tool-bg: rgba(103,232,249,0.06);--tag-tool-hover: rgba(103,232,249,0.15);--tag-tool-glow: rgba(103,232,249,0.2); --tag-mgmt-color: #a78bfa; --tag-mgmt-border: rgba(167,139,250,0.3); --tag-mgmt-bg: rgba(167,139,250,0.06);--tag-mgmt-hover: rgba(167,139,250,0.15);--tag-mgmt-glow: rgba(167,139,250,0.2); --badge-platform-color: #34d399; --badge-platform-border: rgba(52,211,153,0.3); --badge-platform-bg: rgba(52,211,153,0.06); --badge-role-color: #f472b6; --badge-role-border: rgba(244,114,182,0.3); --badge-role-bg: rgba(244,114,182,0.06); --badge-company-color: #2dd4bf; --badge-company-border: rgba(45,212,191,0.3); --badge-company-bg: rgba(45,212,191,0.06); --contact-phone-color: #34d399; --contact-phone-border: rgba(52,211,153,0.5); --contact-phone-bg: rgba(52,211,153,0.1); --contact-phone-border-icon: rgba(52,211,153,0.2); --contact-email-color: #2dd4bf; --contact-email-border: rgba(45,212,191,0.5); --contact-email-bg: rgba(45,212,191,0.1); --contact-email-border-icon: rgba(45,212,191,0.2); --contact-li-color: #f472b6; --contact-li-border: rgba(244,114,182,0.5); --contact-li-bg: rgba(244,114,182,0.1); --contact-li-border-icon: rgba(244,114,182,0.2); } /* ── NEON TOKYO (hot pink / cyan / yellow) ── */ [data-theme="tokyo"] { --bg: #0d0d1a; --card: #13131f; --card-border: #2a1535; --accent: #ff2d78; --accent2: #00f5ff; --accent3: #ffe600; --text: #f0e6ff; --muted: #6b5b7b; --grid-color: rgba(255,45,120,0.03); --nav-bg: rgba(13,13,26,0.85); --nav-border: rgba(255,45,120,0.1); --tag-engine-color: #ff2d78; --tag-engine-border: rgba(255,45,120,0.3); --tag-engine-bg: rgba(255,45,120,0.06); --tag-engine-hover: rgba(255,45,120,0.15); --tag-engine-glow: rgba(255,45,120,0.2); --tag-lang-color: #00f5ff; --tag-lang-border: rgba(0,245,255,0.3); --tag-lang-bg: rgba(0,245,255,0.06); --tag-lang-hover: rgba(0,245,255,0.15); --tag-lang-glow: rgba(0,245,255,0.2); --tag-backend-color: #ffe600; --tag-backend-border: rgba(255,230,0,0.3); --tag-backend-bg: rgba(255,230,0,0.06); --tag-backend-hover: rgba(255,230,0,0.15); --tag-backend-glow: rgba(255,230,0,0.2); --tag-tool-color: #ff2d78; --tag-tool-border: rgba(255,45,120,0.25); --tag-tool-bg: rgba(255,45,120,0.05); --tag-tool-hover: rgba(255,45,120,0.12); --tag-tool-glow: rgba(255,45,120,0.2); --tag-mgmt-color: #ffe600; --tag-mgmt-border: rgba(255,230,0,0.25); --tag-mgmt-bg: rgba(255,230,0,0.05); --tag-mgmt-hover: rgba(255,230,0,0.12); --tag-mgmt-glow: rgba(255,230,0,0.2); --badge-platform-color: #ffe600; --badge-platform-border: rgba(255,230,0,0.3); --badge-platform-bg: rgba(255,230,0,0.06); --badge-role-color: #00f5ff; --badge-role-border: rgba(0,245,255,0.3); --badge-role-bg: rgba(0,245,255,0.06); --badge-company-color: #ff2d78; --badge-company-border: rgba(255,45,120,0.3); --badge-company-bg: rgba(255,45,120,0.06); --contact-phone-color: #ffe600; --contact-phone-border: rgba(255,230,0,0.5); --contact-phone-bg: rgba(255,230,0,0.1); --contact-phone-border-icon: rgba(255,230,0,0.2); --contact-email-color: #ff2d78; --contact-email-border: rgba(255,45,120,0.5); --contact-email-bg: rgba(255,45,120,0.1); --contact-email-border-icon: rgba(255,45,120,0.2); --contact-li-color: #00f5ff; --contact-li-border: rgba(0,245,255,0.5); --contact-li-bg: rgba(0,245,255,0.1); --contact-li-border-icon: rgba(0,245,255,0.2); } /* ── SLATE (indigo / sky / emerald) ── */ [data-theme="slate"] { --bg: #0f1117; --card: #1a1d27; --card-border: #252836; --accent: #6366f1; --accent2: #38bdf8; --accent3: #34d399; --text: #e2e8f0; --muted: #64748b; --grid-color: rgba(99,102,241,0.03); --nav-bg: rgba(15,17,23,0.85); --nav-border: rgba(99,102,241,0.1); --tag-engine-color: #6366f1; --tag-engine-border: rgba(99,102,241,0.3); --tag-engine-bg: rgba(99,102,241,0.06); --tag-engine-hover: rgba(99,102,241,0.15); --tag-engine-glow: rgba(99,102,241,0.2); --tag-lang-color: #38bdf8; --tag-lang-border: rgba(56,189,248,0.3); --tag-lang-bg: rgba(56,189,248,0.06); --tag-lang-hover: rgba(56,189,248,0.15); --tag-lang-glow: rgba(56,189,248,0.2); --tag-backend-color: #34d399; --tag-backend-border: rgba(52,211,153,0.3); --tag-backend-bg: rgba(52,211,153,0.06); --tag-backend-hover: rgba(52,211,153,0.15); --tag-backend-glow: rgba(52,211,153,0.2); --tag-tool-color: #6366f1; --tag-tool-border: rgba(99,102,241,0.25); --tag-tool-bg: rgba(99,102,241,0.05); --tag-tool-hover: rgba(99,102,241,0.12); --tag-tool-glow: rgba(99,102,241,0.2); --tag-mgmt-color: #34d399; --tag-mgmt-border: rgba(52,211,153,0.25); --tag-mgmt-bg: rgba(52,211,153,0.05); --tag-mgmt-hover: rgba(52,211,153,0.12); --tag-mgmt-glow: rgba(52,211,153,0.2); --badge-platform-color: #34d399; --badge-platform-border: rgba(52,211,153,0.3); --badge-platform-bg: rgba(52,211,153,0.06); --badge-role-color: #38bdf8; --badge-role-border: rgba(56,189,248,0.3); --badge-role-bg: rgba(56,189,248,0.06); --badge-company-color: #6366f1; --badge-company-border: rgba(99,102,241,0.3); --badge-company-bg: rgba(99,102,241,0.06); --contact-phone-color: #34d399; --contact-phone-border: rgba(52,211,153,0.5); --contact-phone-bg: rgba(52,211,153,0.1); --contact-phone-border-icon: rgba(52,211,153,0.2); --contact-email-color: #6366f1; --contact-email-border: rgba(99,102,241,0.5); --contact-email-bg: rgba(99,102,241,0.1); --contact-email-border-icon: rgba(99,102,241,0.2); --contact-li-color: #38bdf8; --contact-li-border: rgba(56,189,248,0.5); --contact-li-bg: rgba(56,189,248,0.1); --contact-li-border-icon: rgba(56,189,248,0.2); } /* ── GOLD (amber / red / teal) ── */ [data-theme="gold"] { --bg: #0c0a00; --card: #171200; --card-border: #332800; --accent: #f5a623; --accent2: #e8453c; --accent3: #00d4b1; --text: #fef9e7; --muted: #7a6a3a; --grid-color: rgba(245,166,35,0.03); --nav-bg: rgba(12,10,0,0.85); --nav-border: rgba(245,166,35,0.1); --tag-engine-color: #f5a623; --tag-engine-border: rgba(245,166,35,0.3); --tag-engine-bg: rgba(245,166,35,0.06); --tag-engine-hover: rgba(245,166,35,0.15); --tag-engine-glow: rgba(245,166,35,0.2); --tag-lang-color: #e8453c; --tag-lang-border: rgba(232,69,60,0.3); --tag-lang-bg: rgba(232,69,60,0.06); --tag-lang-hover: rgba(232,69,60,0.15); --tag-lang-glow: rgba(232,69,60,0.2); --tag-backend-color: #00d4b1; --tag-backend-border: rgba(0,212,177,0.3); --tag-backend-bg: rgba(0,212,177,0.06); --tag-backend-hover: rgba(0,212,177,0.15); --tag-backend-glow: rgba(0,212,177,0.2); --tag-tool-color: #f5a623; --tag-tool-border: rgba(245,166,35,0.25); --tag-tool-bg: rgba(245,166,35,0.05); --tag-tool-hover: rgba(245,166,35,0.12); --tag-tool-glow: rgba(245,166,35,0.2); --tag-mgmt-color: #00d4b1; --tag-mgmt-border: rgba(0,212,177,0.25); --tag-mgmt-bg: rgba(0,212,177,0.05); --tag-mgmt-hover: rgba(0,212,177,0.12); --tag-mgmt-glow: rgba(0,212,177,0.2); --badge-platform-color: #00d4b1; --badge-platform-border: rgba(0,212,177,0.3); --badge-platform-bg: rgba(0,212,177,0.06); --badge-role-color: #e8453c; --badge-role-border: rgba(232,69,60,0.3); --badge-role-bg: rgba(232,69,60,0.06); --badge-company-color: #f5a623; --badge-company-border: rgba(245,166,35,0.3); --badge-company-bg: rgba(245,166,35,0.06); --contact-phone-color: #00d4b1; --contact-phone-border: rgba(0,212,177,0.5); --contact-phone-bg: rgba(0,212,177,0.1); --contact-phone-border-icon: rgba(0,212,177,0.2); --contact-email-color: #f5a623; --contact-email-border: rgba(245,166,35,0.5); --contact-email-bg: rgba(245,166,35,0.1); --contact-email-border-icon: rgba(245,166,35,0.2); --contact-li-color: #e8453c; --contact-li-border: rgba(232,69,60,0.5); --contact-li-bg: rgba(232,69,60,0.1); --contact-li-border-icon: rgba(232,69,60,0.2); } /* ── ARCTIC (ice blue / frost / mint) ── */ [data-theme="arctic"] { --bg: #060d14; --card: #0c1824; --card-border: #152535; --accent: #7dd3fc; --accent2: #a5f3fc; --accent3: #6ee7b7; --text: #e8f4fd; --muted: #4a7090; --grid-color: rgba(125,211,252,0.03); --nav-bg: rgba(6,13,20,0.85); --nav-border: rgba(125,211,252,0.1); --tag-engine-color: #7dd3fc; --tag-engine-border: rgba(125,211,252,0.3); --tag-engine-bg: rgba(125,211,252,0.06); --tag-engine-hover: rgba(125,211,252,0.15); --tag-engine-glow: rgba(125,211,252,0.2); --tag-lang-color: #a5f3fc; --tag-lang-border: rgba(165,243,252,0.3); --tag-lang-bg: rgba(165,243,252,0.06); --tag-lang-hover: rgba(165,243,252,0.15); --tag-lang-glow: rgba(165,243,252,0.2); --tag-backend-color: #6ee7b7; --tag-backend-border: rgba(110,231,183,0.3); --tag-backend-bg: rgba(110,231,183,0.06); --tag-backend-hover: rgba(110,231,183,0.15); --tag-backend-glow: rgba(110,231,183,0.2); --tag-tool-color: #7dd3fc; --tag-tool-border: rgba(125,211,252,0.25); --tag-tool-bg: rgba(125,211,252,0.05); --tag-tool-hover: rgba(125,211,252,0.12); --tag-tool-glow: rgba(125,211,252,0.2); --tag-mgmt-color: #6ee7b7; --tag-mgmt-border: rgba(110,231,183,0.25); --tag-mgmt-bg: rgba(110,231,183,0.05); --tag-mgmt-hover: rgba(110,231,183,0.12); --tag-mgmt-glow: rgba(110,231,183,0.2); --badge-platform-color: #6ee7b7; --badge-platform-border: rgba(110,231,183,0.3); --badge-platform-bg: rgba(110,231,183,0.06); --badge-role-color: #a5f3fc; --badge-role-border: rgba(165,243,252,0.3); --badge-role-bg: rgba(165,243,252,0.06); --badge-company-color: #7dd3fc; --badge-company-border: rgba(125,211,252,0.3); --badge-company-bg: rgba(125,211,252,0.06); --contact-phone-color: #6ee7b7; --contact-phone-border: rgba(110,231,183,0.5); --contact-phone-bg: rgba(110,231,183,0.1); --contact-phone-border-icon: rgba(110,231,183,0.2); --contact-email-color: #7dd3fc; --contact-email-border: rgba(125,211,252,0.5); --contact-email-bg: rgba(125,211,252,0.1); --contact-email-border-icon: rgba(125,211,252,0.2); --contact-li-color: #a5f3fc; --contact-li-border: rgba(165,243,252,0.5); --contact-li-bg: rgba(165,243,252,0.1); --contact-li-border-icon: rgba(165,243,252,0.2); } /* ── CRIMSON (rose / orange / amber) ── */ [data-theme="crimson"] { --bg: #0f0508; --card: #1a080d; --card-border: #3a1020; --accent: #f43f5e; --accent2: #fb923c; --accent3: #fbbf24; --text: #fef2f2; --muted: #7a4050; --grid-color: rgba(244,63,94,0.03); --nav-bg: rgba(15,5,8,0.85); --nav-border: rgba(244,63,94,0.1); --tag-engine-color: #f43f5e; --tag-engine-border: rgba(244,63,94,0.3); --tag-engine-bg: rgba(244,63,94,0.06); --tag-engine-hover: rgba(244,63,94,0.15); --tag-engine-glow: rgba(244,63,94,0.2); --tag-lang-color: #fb923c; --tag-lang-border: rgba(251,146,60,0.3); --tag-lang-bg: rgba(251,146,60,0.06); --tag-lang-hover: rgba(251,146,60,0.15); --tag-lang-glow: rgba(251,146,60,0.2); --tag-backend-color: #fbbf24; --tag-backend-border: rgba(251,191,36,0.3); --tag-backend-bg: rgba(251,191,36,0.06); --tag-backend-hover: rgba(251,191,36,0.15); --tag-backend-glow: rgba(251,191,36,0.2); --tag-tool-color: #f43f5e; --tag-tool-border: rgba(244,63,94,0.25); --tag-tool-bg: rgba(244,63,94,0.05); --tag-tool-hover: rgba(244,63,94,0.12); --tag-tool-glow: rgba(244,63,94,0.2); --tag-mgmt-color: #fbbf24; --tag-mgmt-border: rgba(251,191,36,0.25); --tag-mgmt-bg: rgba(251,191,36,0.05); --tag-mgmt-hover: rgba(251,191,36,0.12); --tag-mgmt-glow: rgba(251,191,36,0.2); --badge-platform-color: #fbbf24; --badge-platform-border: rgba(251,191,36,0.3); --badge-platform-bg: rgba(251,191,36,0.06); --badge-role-color: #fb923c; --badge-role-border: rgba(251,146,60,0.3); --badge-role-bg: rgba(251,146,60,0.06); --badge-company-color: #f43f5e; --badge-company-border: rgba(244,63,94,0.3); --badge-company-bg: rgba(244,63,94,0.06); --contact-phone-color: #fbbf24; --contact-phone-border: rgba(251,191,36,0.5); --contact-phone-bg: rgba(251,191,36,0.1); --contact-phone-border-icon: rgba(251,191,36,0.2); --contact-email-color: #f43f5e; --contact-email-border: rgba(244,63,94,0.5); --contact-email-bg: rgba(244,63,94,0.1); --contact-email-border-icon: rgba(244,63,94,0.2); --contact-li-color: #fb923c; --contact-li-border: rgba(251,146,60,0.5); --contact-li-bg: rgba(251,146,60,0.1); --contact-li-border-icon: rgba(251,146,60,0.2); } /* ============================================================ SHARED BASE STYLES ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Exo 2', sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; line-height: 1.6; } body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; } nav { display: flex; justify-content: center; align-items: center; padding: 16px 0; position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--nav-border); } nav ul { display: flex; gap: 30px; list-style: none; padding: 0; margin: 0; } nav a { position: relative; text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 4px; font-family: 'Share Tech Mono', monospace; transition: color 0.3s ease; } nav a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0%; height: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); transition: width 0.3s ease; } nav a:hover::after, nav a.active::after { width: 100%; } nav a:hover, nav a.active { color: var(--accent); } .section-title { font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } .section-title::before { content: ''; width: 3px; height: 18px; background: linear-gradient(to bottom, var(--accent), var(--accent2)); border-radius: 2px; flex-shrink: 0; } .section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, var(--card-border), transparent); } .card { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; position: relative; overflow: hidden; transition: border-color 0.3s, transform 0.3s; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, var(--accent), var(--accent2), transparent); opacity: 0; transition: opacity 0.3s; } .card:hover::before { opacity: 1; } .card-corner { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); opacity: 0.2; } .page-tag { font-family: 'Share Tech Mono', monospace; font-size: 12px; color: var(--accent); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 10px; } .page-tag::before { content: '> '; opacity: 0.5; } /* SKILL TAGS */ .tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag { font-family: 'Share Tech Mono', monospace; font-size: 12px; padding: 5px 12px; border-radius: 4px; border: 1px solid; transition: all 0.2s; cursor: default; } .tag-engine { color: var(--tag-engine-color); border-color: var(--tag-engine-border); background: var(--tag-engine-bg); } .tag-lang { color: var(--tag-lang-color); border-color: var(--tag-lang-border); background: var(--tag-lang-bg); } .tag-backend { color: var(--tag-backend-color); border-color: var(--tag-backend-border); background: var(--tag-backend-bg); } .tag-tool { color: var(--tag-tool-color); border-color: var(--tag-tool-border); background: var(--tag-tool-bg); } .tag-mgmt { color: var(--tag-mgmt-color); border-color: var(--tag-mgmt-border); background: var(--tag-mgmt-bg); } .tag-engine:hover { background: var(--tag-engine-hover); box-shadow: 0 0 12px var(--tag-engine-glow); } .tag-lang:hover { background: var(--tag-lang-hover); box-shadow: 0 0 12px var(--tag-lang-glow); } .tag-backend:hover { background: var(--tag-backend-hover); box-shadow: 0 0 12px var(--tag-backend-glow); } .tag-tool:hover { background: var(--tag-tool-hover); box-shadow: 0 0 12px var(--tag-tool-glow); } .tag-mgmt:hover { background: var(--tag-mgmt-hover); box-shadow: 0 0 12px var(--tag-mgmt-glow); } /* PROJECT BADGES */ .badge { font-family: 'Share Tech Mono', monospace; font-size: 11px; padding: 3px 8px; border-radius: 4px; border: 1px solid; } .badge-platform { color: var(--badge-platform-color); border-color: var(--badge-platform-border); background: var(--badge-platform-bg); } .badge-role { color: var(--badge-role-color); border-color: var(--badge-role-border); background: var(--badge-role-bg); } .badge-company { color: var(--badge-company-color); border-color: var(--badge-company-border); background: var(--badge-company-bg); } /* TECH TAGS (projects page) */ .tech-tag { font-family: 'Share Tech Mono', monospace; font-size: 10px; padding: 2px 7px; border-radius: 3px; color: var(--accent); border: 1px solid var(--tag-engine-border); background: var(--tag-engine-bg); } /* CONTACT ITEMS */ .contact-item.phone { border-left: 3px solid var(--contact-phone-border); } .contact-item.email { border-left: 3px solid var(--contact-email-border); } .contact-item.linkedin { border-left: 3px solid var(--contact-li-border); } .contact-item.phone::before { background: linear-gradient(to right, var(--contact-phone-color), transparent); } .contact-item.email::before { background: linear-gradient(to right, var(--contact-email-color), transparent); } .contact-item.linkedin::before { background: linear-gradient(to right, var(--contact-li-color), transparent); } .contact-item.phone:hover { border-color: var(--contact-phone-border); } .contact-item.email:hover { border-color: var(--contact-email-border); } .contact-item.linkedin:hover { border-color: var(--contact-li-border); } .phone .contact-icon { background: var(--contact-phone-bg); border: 1px solid var(--contact-phone-border-icon); } .email .contact-icon { background: var(--contact-email-bg); border: 1px solid var(--contact-email-border-icon); } .linkedin .contact-icon { background: var(--contact-li-bg); border: 1px solid var(--contact-li-border-icon); } .phone .contact-label { color: var(--contact-phone-color); } .email .contact-label { color: var(--contact-email-color); } .linkedin .contact-label { color: var(--contact-li-color); } .phone:hover .contact-arrow { color: var(--contact-phone-color); } .email:hover .contact-arrow { color: var(--contact-email-color); } .linkedin:hover .contact-arrow { color: var(--contact-li-color); } /* RESUME BUTTON */ .btn-resume { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 11px 24px; background: transparent; border: 1px solid var(--tag-engine-border); color: var(--accent); font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border-radius: 6px; transition: background 0.25s, box-shadow 0.25s, border-color 0.25s; opacity: 0; animation: fadeUp 0.6s ease forwards 1s; } .btn-resume:hover { background: var(--tag-engine-bg); border-color: var(--accent); box-shadow: 0 0 18px var(--tag-engine-glow); } .btn-resume svg { width: 13px; height: 13px; flex-shrink: 0; } /* ANIMATIONS */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} } @keyframes pulse { 0%, 100% { box-shadow: 0 0 6px var(--accent3); } 50% { box-shadow: 0 0 16px var(--accent3); } } /* ── THEME SWITCHER UI ── */ .theme-switcher { position: fixed; bottom: 24px; right: 24px; z-index: 999; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .theme-toggle-btn { background: var(--card); border: 1px solid var(--card-border); color: var(--accent); font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 0.1em; padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: all 0.2s; } .theme-toggle-btn:hover { border-color: var(--accent); } .theme-options { display: none; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 10px; } .theme-options.open { display: flex; } .theme-btn { display: flex; align-items: center; gap: 10px; background: none; border: 1px solid transparent; border-radius: 6px; padding: 6px 10px; cursor: pointer; font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--muted); transition: all 0.2s; white-space: nowrap; } .theme-btn:hover { border-color: var(--card-border); color: var(--text); } .theme-btn.active { color: var(--accent); border-color: var(--card-border); } .theme-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } @media (max-width: 600px) { .theme-switcher { bottom: 16px; right: 16px; } } /* ── FONT SWITCHER UI ── */ .font-switcher { position: fixed; bottom: 24px; right: 130px; z-index: 999; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .font-toggle-btn { background: var(--card); border: 1px solid var(--card-border); color: var(--accent); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: all 0.2s; } .font-toggle-btn:hover { border-color: var(--accent); } .font-options { display: none; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 10px; } .font-options.open { display: flex; } .font-btn { display: flex; flex-direction: column; gap: 2px; background: none; border: 1px solid transparent; border-radius: 6px; padding: 6px 10px; cursor: pointer; color: var(--muted); transition: all 0.2s; white-space: nowrap; text-align: left; } .font-btn:hover { border-color: var(--card-border); color: var(--text); } .font-btn.active { color: var(--accent); border-color: var(--card-border); } .font-btn-name { font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.05em; } .font-btn-preview { font-size: 13px; font-weight: 600; color: var(--text); } @media (max-width: 600px) { .font-switcher { bottom: 16px; right: 110px; } }