/* ═══════════════════════════════════════════════════════ theme.css — Dark-mode variable overrides & toggle UI Applied via [data-theme="dark"] on ═══════════════════════════════════════════════════════ */ /* ── Dark palette ───────────────────────────────────── */ [data-theme="dark"] { --cream: #141414; --dark-cream: #1e1e1e; --charcoal: #e4e8e7; --gold: #d4a84b; --bronze: #a89968; /* Modal backdrop — heavier darken + blur in dark mode */ --modal-overlay-bg: rgba(0, 0, 0, 0.82); --modal-overlay-blur: 8px; --modal-scanline: rgba(255, 255, 255, 0.015); /* Scroll-area thumb — subtle at rest */ --scrollbar-thumb: rgba(168, 153, 104, 0.4); } /* ── Scrollbar — dark ───────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar-track, [data-theme="dark"]::-webkit-scrollbar-track { background: #1e1e1e; } [data-theme="dark"] ::-webkit-scrollbar-thumb, [data-theme="dark"]::-webkit-scrollbar-thumb { background: #444; border-color: #1e1e1e; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover, [data-theme="dark"]::-webkit-scrollbar-thumb:hover { background: var(--gold); } /* ── Hero header — dark ─────────────────────────────── */ [data-theme="dark"] .hero.compact { background: rgba(20, 20, 20, 0.95); border-bottom-color: var(--gold); } /* ── Nav — dark (targets ::before pseudo-element) ──── */ [data-theme="dark"] nav.fixed-bottom::before { background: rgba(20, 20, 20, 0.95); } /* ── Content box — dark ─────────────────────────────── */ [data-theme="dark"] .content-box { background: var(--cream); border-color: #333; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } /* ── h2 dragon-wave divider — dark ─────────────────── */ [data-theme="dark"] .content-box h2::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Crect x='18' y='5' width='1.8' height='1.8' rx='0.3' transform='rotate(45 18.9 5.9)' fill='%23d4a84b'%3E%3Canimate attributeName='x' values='18;2' dur='8s' repeatCount='indefinite' /%3E%3Canimate attributeName='opacity' values='0.6;0' dur='8s' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='20' y='9' width='1.4' height='1.4' rx='0.2' transform='rotate(45 20.7 9.7)' fill='%23d4a84b'%3E%3Canimate attributeName='x' values='20;6' dur='10s' begin='3s' repeatCount='indefinite' /%3E%3Canimate attributeName='opacity' values='0.4;0' dur='10s' begin='3s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Crect x='4' y='5' width='1.8' height='1.8' rx='0.3' transform='rotate(45 4.9 5.9)' fill='%23d4a84b'%3E%3Canimate attributeName='x' values='4;20' dur='8s' repeatCount='indefinite' /%3E%3Canimate attributeName='opacity' values='0.6;0' dur='8s' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='2' y='9' width='1.4' height='1.4' rx='0.2' transform='rotate(45 2.7 9.7)' fill='%23d4a84b'%3E%3Canimate attributeName='x' values='2;16' dur='10s' begin='3s' repeatCount='indefinite' /%3E%3Canimate attributeName='opacity' values='0.4;0' dur='10s' begin='3s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'%3E%3Cpath d='M0 7 C 25 7, 35 1, 50 1 S 75 7, 100 7 S 135 13, 150 13 S 175 7, 200 7' fill='none' stroke='%23d4a84b' stroke-width='1' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='8s' repeatCount='indefinite' calcMode='spline' keySplines='0.4 0 0.6 1; 0.4 0 0.6 1' keyTimes='0;0.5;1' values='M0 7 C 25 7, 35 1, 50 1 S 75 7, 100 7 S 135 13, 150 13 S 175 7, 200 7;M0 7 C 25 7, 35 13, 50 13 S 75 7, 100 7 S 135 1, 150 1 S 175 7, 200 7;M0 7 C 25 7, 35 1, 50 1 S 75 7, 100 7 S 135 13, 150 13 S 175 7, 200 7' /%3E%3C/path%3E%3C/svg%3E"); } /* ── Close button — dark ────────────────────────────── */ [data-theme="dark"] .close-btn { background: var(--cream); border-color: var(--gold); color: var(--gold); } [data-theme="dark"] .close-btn:hover { background: var(--gold); color: var(--cream); } /* ── Project cards — dark ───────────────────────────── */ [data-theme="dark"] .project { background: var(--cream); border-color: #333; } [data-theme="dark"] .project:hover { border-color: var(--gold); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } /* ── Buttons — dark ─────────────────────────────────── */ [data-theme="dark"] .btn { border-color: var(--charcoal); color: var(--charcoal); } [data-theme="dark"] .btn:hover { background: var(--gold); border-color: var(--gold); color: #141414; } /* ── Contact / FAQ — dark ───────────────────────────── */ [data-theme="dark"] .contact-item { border-color: #333; } [data-theme="dark"] .contact-item:hover { border-color: var(--gold); background: rgba(212, 168, 75, 0.06); } [data-theme="dark"] .faq-item { border-bottom-color: #333; } [data-theme="dark"] .resume-download { border-color: var(--gold); } [data-theme="dark"] .resume-download:hover { background: rgba(212, 168, 75, 0.06); } [data-theme="dark"] .resume-download-btn { border-color: var(--charcoal); color: var(--charcoal); } [data-theme="dark"] .resume-download-btn:hover { background: var(--gold); border-color: var(--gold); color: #141414; } [data-theme="dark"] .skill-tree-bar { background: #2a2a2a; } [data-theme="dark"] .resume-section-title { border-bottom-color: var(--gold); } [data-theme="dark"] .skill-tree-category-title { border-bottom-color: #333; } [data-theme="dark"] .dark-cream-border { border-color: #333; } /* ── Skill item hover — dark ────────────────────────── */ [data-theme="dark"] .skill-item:hover { border-color: var(--gold); background: rgba(212, 168, 75, 0.06); } /* ═══════════════════════════════════════════════════════ Theme toggle button — lives inside