/* ═══════════════════════════════════════════════════════════════════ theme.css — DonInTech · Light / Dark Theme Layer Load AFTER style.css: Toggle works by setting data-theme="light" on . ═══════════════════════════════════════════════════════════════════ */ /* ── 1. DARK ROOT (mirrors what style.css already sets) ───────── */ :root { --bg: #0a0c10; --bg2: #0f1219; --bg3: #151a24; --accent: #00e5ff; --accent2: #7b61ff; --accent3: #39ff14; --text: #e2e8f0; --muted: #64748b; --border: rgba(0, 229, 255, 0.15); --card: rgba(15, 18, 25, 0.9); /* extra semantic tokens */ --nav-bg: rgba(10, 12, 16, 0.92); --hero-sub: #94a3b8; --stat-num-clr: #00e5ff; --sec-label-clr: #00e5ff; --grid-line: rgba(0, 229, 255, 0.04); --shadow: none; --btn-primary-bg: #00e5ff; --btn-primary-fg: #000; --skill-track: rgba(0, 229, 255, 0.08); --timeline-track: rgba(0, 229, 255, 0.2); --toggle-bg: rgba(0, 229, 255, 0.07); --toggle-border: rgba(0, 229, 255, 0.25); --toggle-clr: #00e5ff; --cursor-clr: #00e5ff; } /* ── 2. LIGHT OVERRIDES ─────────────────────────────────────────── */ [data-theme="light"] { --bg: #f1f5f9; --bg2: #e2e8f0; --bg3: #cbd5e1; --accent: #0077aa; --accent2: #5a3fbf; --accent3: #1a7a00; --text: #0f172a; --muted: #475569; --border: rgba(0, 119, 170, 0.18); --card: rgba(255, 255, 255, 0.92); --nav-bg: rgba(241, 245, 249, 0.95); --hero-sub: #334155; --stat-num-clr: #0077aa; --sec-label-clr: #0077aa; --grid-line: rgba(0, 119, 170, 0.055); --shadow: 0 2px 20px rgba(0, 0, 0, 0.07); --btn-primary-bg: #0077aa; --btn-primary-fg: #ffffff; --skill-track: rgba(0, 119, 170, 0.1); --timeline-track: rgba(0, 119, 170, 0.22); --toggle-bg: rgba(0, 119, 170, 0.07); --toggle-border: rgba(0, 119, 170, 0.28); --toggle-clr: #0077aa; --cursor-clr: #0077aa; } /* ── 3. GLOBAL TRANSITION ──────────────────────────────────────── */ *, *::before, *::after { transition: background-color 0.32s ease, border-color 0.32s ease, color 0.32s ease, box-shadow 0.32s ease, opacity 0.32s ease; } /* but don't slow down interactive transforms */ a, button { transition-duration: 0.18s; } /* ── 4. ELEMENT MAPPINGS ────────────────────────────────────────── */ body { background: var(--bg); color: var(--text); } /* Nav */ nav { background: var(--nav-bg) !important; border-bottom-color: var(--border) !important; } .logo { color: var(--accent) !important; text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent) !important; } .nav-links a { color: var(--muted) !important; } .nav-links a:hover, .nav-links a.active { color: var(--accent) !important; } .nav-hamburger span { background: var(--muted) !important; } /* Hero */ #hero { background: var(--bg); } .grid-bg { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) !important; } #heroHeadline { color: var(--accent) !important; } .hero-sub { color: var(--hero-sub) !important; } .stat-num { color: var(--stat-num-clr) !important; } .stat-label { color: var(--muted) !important; } .stat { border-color: var(--border) !important; } /* Buttons */ .btn-primary { background: var(--btn-primary-bg) !important; color: var(--btn-primary-fg) !important; border-color: var(--btn-primary-bg) !important; } .btn-outline { color: var(--accent) !important; border-color: var(--border) !important; } .btn-outline:hover { background: color-mix(in srgb, var(--accent) 8%, transparent) !important; border-color: var(--accent) !important; } /* Section labels + headings */ .sec-label { color: var(--sec-label-clr) !important; } section > h2 { color: var(--text) !important; } /* About */ #about { background: var(--bg); } .about-text p { color: var(--muted) !important; } .about-text strong { color: var(--text) !important; } /* Terminal — stays dark intentionally in both themes */ .terminal-card { background: #0d1117 !important; border-color: rgba(0, 229, 255, 0.15) !important; } .terminal-bar { background: #161b22 !important; } .cmd { color: #00e5ff !important; } .val { color: #e2e8f0 !important; } .ok { color: #39ff14 !important; } .terminal-cursor { border-color: #00e5ff !important; } /* Projects */ #projects { background: var(--bg2); } .project-card { background: var(--card) !important; border-color: var(--border) !important; box-shadow: var(--shadow) !important; } .project-card:hover { border-color: var(--accent) !important; } .project-tag { color: var(--accent2) !important; background: color-mix(in srgb, var(--accent2) 10%, transparent) !important; } .project-card h3, .project-link { color: var(--text) !important; } .project-card > p { color: var(--muted) !important; } .project-num { color: color-mix(in srgb, var(--accent) 12%, transparent) !important; } .tech-pill { color: var(--muted) !important; border-color: var(--border) !important; } .badge-complete { color: var(--accent3) !important; background: color-mix(in srgb, var(--accent3) 10%, transparent) !important; border-color: color-mix(in srgb, var(--accent3) 28%, transparent) !important; } /* Skills */ #skills { background: var(--bg); } .skill-group h3 { color: var(--accent) !important; } .skill-header { color: var(--text) !important; } .skill-pct { color: var(--muted) !important; } .skill-bar { background: var(--skill-track) !important; border-color: var(--border) !important; } .skill-fill { background: linear-gradient(90deg, var(--accent), var(--accent2)) !important; } /* Experience */ #experience { background: var(--bg2); } .timeline::before { background: var(--timeline-track) !important; } .timeline-item::before { background: var(--accent) !important; border-color: var(--bg2) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important; } .timeline-date { color: var(--accent) !important; } .timeline-item h3 { color: var(--text) !important; } .timeline-company { color: var(--accent2) !important; } .timeline-item > p { color: var(--muted) !important; } /* Community / Events */ #events { background: var(--bg); } .ac-card { border-color: var(--border) !important; } .ac-label span { background: var(--card) !important; color: var(--text) !important; } .ac-overlay { background: color-mix(in srgb, var(--bg) 90%, transparent) !important; border-color: var(--border) !important; } .ac-title { color: var(--accent) !important; } .ac-list li { color: var(--muted) !important; } .ac-dot { background: var(--muted) !important; border-color: var(--muted) !important; } .ac-dot-on { background: var(--accent) !important; border-color: var(--accent) !important; } .ac-bar { background: var(--border) !important; } .ac-fill { background: var(--accent) !important; } /* Footer */ footer { background: var(--bg) !important; border-top-color: var(--border) !important; } .footer-logo { color: var(--muted) !important; } .footer-links a { color: var(--muted) !important; } .footer-links a:hover{ color: var(--accent)!important; } /* ── 5. LIGHT-SPECIFIC POLISH ──────────────────────────────────── */ [data-theme="light"] .grid-bg { opacity: 0.65; } [data-theme="light"] .circuit-accent { opacity: 0; } /* completely hidden on light */ [data-theme="light"] .project-card { box-shadow: 0 2px 18px rgba(0,0,0,0.07); } [data-theme="light"] .skill-bar { background: rgba(0,119,170,0.1) !important; } [data-theme="light"] .timeline-item::before { border-color: var(--bg2) !important; } [data-theme="light"] #heroHeadline { text-shadow: 0 0 24px rgba(0, 119, 170, 0.18) !important; } /* ── 6. THEME TOGGLE BUTTON ────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--toggle-bg); border: 1px solid var(--toggle-border); color: var(--toggle-clr); font-family: 'Share Tech Mono', monospace; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.32rem 0.85rem; cursor: pointer; flex-shrink: 0; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); } .theme-toggle:hover { background: color-mix(in srgb, var(--accent) 13%, transparent); border-color: var(--accent); color: var(--accent); } /* icon swap */ .theme-toggle .t-sun { display: inline; } .theme-toggle .t-moon { display: none; } [data-theme="light"] .theme-toggle .t-sun { display: none; } [data-theme="light"] .theme-toggle .t-moon { display: inline; } /* ── 7. NAV-RIGHT: links + toggle grouped, pushed to right ─────── */ nav { display: flex; align-items: center; justify-content: space-between; } .nav-right { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; /* pushes the whole group to the right */ } /* On mobile: nav-right hides (hamburger takes over), toggle stays visible */ @media (max-width: 768px) { .nav-right .nav-links { /* handled by main.js / style.css mobile menu — keep toggle visible */ display: none; } .nav-right { gap: 0.4rem; } }