/* Dark Mode Overrides */
/* Applied when */
[data-theme="dark"] body {
background: #0a0a0a;
color: #e8e8e8;
}
/* Nav */
[data-theme="dark"] nav {
border-bottom-color: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] nav.scrolled {
background: rgba(10, 10, 10, 0.95);
}
/* Project pages force nav visible — override with dark bg in dark mode */
[data-theme="dark"] body:has(.project-hero) nav {
background: rgba(10, 10, 10, 0.95);
border-bottom-color: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .logo {
color: #e8e8e8;
background: linear-gradient(135deg, #e8e8e8 0%, #E8A020 40%, #e8e8e8 60%, #E8A020 100%);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientShift 20s ease infinite;
}
[data-theme="dark"] .nav-links a {
color: #e8e8e8;
}
[data-theme="dark"] .nav-links a::after {
background: var(--accent);
}
/* Hero gradient heading */
[data-theme="dark"] .hero h1 strong {
color: #e8e8e8;
background: linear-gradient(135deg, #e8e8e8 0%, #E8A020 40%, #e8e8e8 60%, #E8A020 100%);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientShift 20s ease infinite;
}
/* Section titles */
[data-theme="dark"] .main-section-title::after {
background: var(--accent);
}
[data-theme="dark"] .main-section-title::before {
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .subsection-title {
color: #888;
}
/* Section dividers */
[data-theme="dark"] .works-subsection {
border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .works-subsection:nth-child(even) {
background: rgba(232, 160, 32, 0.06);
}
/* Project cards */
[data-theme="dark"] .project-card {
background: #111;
}
/* View all / strip buttons */
[data-theme="dark"] .view-all-btn {
color: #e8e8e8;
border-color: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .view-all-btn:hover {
background: #e8e8e8;
color: #0a0a0a;
border-color: #e8e8e8;
}
[data-theme="dark"] .strip-btn {
color: #e8e8e8;
border-color: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .strip-btn:hover {
background: #e8e8e8;
color: #0a0a0a;
border-color: #e8e8e8;
}
/* Card metadata */
[data-theme="dark"] .card-location {
color: #666;
}
/* Coming soon */
[data-theme="dark"] .coming-soon {
background: #111;
}
[data-theme="dark"] .coming-soon-text {
color: #e8e8e8;
}
/* About — already dark, just tweak slightly */
[data-theme="dark"] .about-section {
background: #0a0a0a;
}
/* Footer */
[data-theme="dark"] footer {
color: #666;
}
/* Resume page */
[data-theme="dark"] .resume-hero {
background: #0a0a0a;
}
[data-theme="dark"] .resume-hero h1,
[data-theme="dark"] .resume-subtitle {
color: #e8e8e8;
}
[data-theme="dark"] .resume-content {
background: #0a0a0a;
}
[data-theme="dark"] .resume-section {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .resume-section h2,
[data-theme="dark"] .resume-item h3,
[data-theme="dark"] .skill-category-main h3,
[data-theme="dark"] .skill-category h4 {
color: #e8e8e8;
}
[data-theme="dark"] .resume-item {
border-left-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .date,
[data-theme="dark"] .company {
color: #888;
}
[data-theme="dark"] .resume-list li,
[data-theme="dark"] .resume-list {
color: #c0c0c0;
}
[data-theme="dark"] .btn {
color: #e8e8e8;
border-color: rgba(255, 255, 255, 0.3);
}
[data-theme="dark"] .download-btn {
color: #e8e8e8;
border-color: rgba(255, 255, 255, 0.3);
}
/* Project hero pages */
[data-theme="dark"] .project-details {
background: #0a0a0a;
}
[data-theme="dark"] .project-sidebar {
border-right-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .project-specs li {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .project-specs span {
color: #666;
}
[data-theme="dark"] .project-specs strong {
color: #e8e8e8;
}
[data-theme="dark"] .project-info h3,
[data-theme="dark"] .project-info p {
color: #c0c0c0;
}
[data-theme="dark"] .back-link {
color: #888;
}
[data-theme="dark"] .back-link:hover {
color: #e8e8e8;
}
/* Theme toggle button */
.theme-toggle {
background: none;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 2rem;
font-size: 0.7rem;
letter-spacing: 0.08em;
cursor: pointer;
color: #000;
padding: 0.4rem 0.9rem;
line-height: 1;
transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
flex-shrink: 0;
white-space: nowrap;
}
.theme-toggle:hover {
opacity: 0.6;
}
[data-theme="dark"] .theme-toggle {
color: #e8e8e8;
border-color: rgba(255, 255, 255, 0.25);
}