/** * Dark theme — palette matches thoughtsBlog. * Scoped under [data-theme="dark"], set on by an inline head script in index.html. * * @format */ [data-theme="dark"] { --bg: #0f172a; --surface: #1e293b; --surface-muted: #334155; --text: #f1f5f9; --muted: #94a3b8; --accent-primary: #3b82f6; --accent-secondary: #22d3ee; --accent-gradient: linear-gradient( 135deg, var(--accent-primary), var(--accent-secondary) ); --border: #334155; --chrome-bg: rgba(15, 23, 42, 0.85); --shadow-card: 0 20px 40px -15px rgba(0, 0, 0, 0.3); --shadow-hover: 0 30px 60px -15px rgba(59, 130, 246, 0.2); /* Backward Compatibility Aliases */ --bg-dark: var(--bg); --bg-surface: var(--surface); --bg-surface-hover: var(--surface-muted); --text-main: var(--text); --text-muted: var(--muted); --glass-border: 1px solid var(--border); --glass-border-darker: 1px solid var(--border); --glass-shadow: var(--shadow-card); } /* Background grid (premium.css uses hardcoded rgba) */ [data-theme="dark"] body::before { background-image: linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px); } /* Glassmorphism navbar (premium.css uses !important) */ [data-theme="dark"] .navbar-b { background: rgba(15, 23, 42, 0.85) !important; border-bottom: var(--glass-border-darker); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .navbar-b.navbar-reduce { background: rgba(15, 23, 42, 0.9) !important; } /* Glass cards (premium.css uses !important) */ [data-theme="dark"] .box-shadow-full, [data-theme="dark"] .service-box, [data-theme="dark"] .work-box { background: rgba(30, 41, 59, 0.85) !important; border: var(--glass-border); box-shadow: var(--glass-shadow); } [data-theme="dark"] .box-shadow-full:hover, [data-theme="dark"] .service-box:hover, [data-theme="dark"] .work-box:hover { background: rgba(30, 41, 59, 0.96) !important; box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5); } /* About image border/shadow */ [data-theme="dark"] .about-img img { border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); } /* Work placeholder shimmer */ [data-theme="dark"] .work-img[style*='min-height']::after { background: linear-gradient( to right, transparent, rgba(255, 255, 255, 0.08), transparent ); } /* Custom scrollbar */ [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-dark); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border: 3px solid var(--bg-dark); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--accent-primary); } /* Tech tag pills dark mode */ [data-theme="dark"] .work-content ul li { background: rgba(59, 130, 246, 0.12); color: var(--accent-primary); } [data-theme="dark"] .work-content ul li:hover, [data-theme="dark"] .work-box:hover .work-content ul li { background: rgba(59, 130, 246, 0.22); color: var(--accent-primary); }