/* Theme variables & dark mode overrides */ :root { --bg-primary: #ffffff; --bg-secondary: #f8f8f8; --text-primary: #000000; --text-secondary: #444444; --text-muted: #666666; --border-color: #cecece; --nav-gradient-start: #ffffff; --overlay-bg: #ffffff; --transition-speed: 0.3s; } .dark-mode { --bg-primary: #0a0a0a; --bg-secondary: #141414; --text-primary: #f5f5f5; --text-secondary: #cccccc; --text-muted: #999999; --border-color: #333333; --nav-gradient-start: #0a0a0a; --overlay-bg: #0a0a0a; } /* Smooth theme transitions */ body, .fixed-nav, .section, .footer, .nav-bg-white, .project-item-image-overlay, .footer-flex-container, .slider, .slider:before { transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease; } /* ── Nav layout ── */ .container.nav-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .container.nav-container .nav-menu { margin-left: auto; } .container.nav-container .menu-button { margin-left: 0.5rem; } .theme-toggle-wrapper { display: flex; align-items: center; gap: 8px; flex-shrink: 0; z-index: 2; } .theme-icon { display: block; opacity: 0.5; transition: opacity var(--transition-speed) ease; flex-shrink: 0; color: var(--text-primary); } .icon-sun { opacity: 1; } .icon-moon { opacity: 0.35; } .dark-mode .icon-sun { opacity: 0.35; } .dark-mode .icon-moon { opacity: 1; } .switch { margin-top: 0 !important; } /* ── Dark mode base ── */ /* Applied to pre-paint (anti-FOUC) and mirrored onto , which otherwise carries a hard-coded white background. */ .dark-mode, .dark-mode body { background-color: var(--bg-primary); color: var(--text-primary); } .dark-mode a { color: var(--text-primary); } /* Nav */ .dark-mode .fixed-nav { background-color: transparent; } .dark-mode .nav-bg-white { background-image: linear-gradient( 180deg, var(--nav-gradient-start), hsla(0, 0%, 4%, 0.88) 21%, hsla(0, 0%, 4%, 0) 91% ); } .dark-mode .nav-link-text { color: var(--text-primary); } .dark-mode .link-underline { background-color: var(--text-primary); } .dark-mode .menu-button.w--open { border-color: #444; background-color: #1a1a1a; color: #fff; } /* Toggle slider in dark mode */ .dark-mode .slider { background-color: #555; } .dark-mode input:checked + .slider { background-color: #888; } .dark-mode .slider:before { background-color: var(--bg-primary); } .dark-mode input:checked + .slider:before { background-color: #fff; } /* Hero */ .dark-mode .section-hero, .dark-mode .main-hero-section-content { background-color: var(--bg-primary); } .dark-mode .hero-text:not(.white-text) { color: var(--text-primary); } .dark-mode .hero-description.big { color: var(--text-secondary); } /* Sections */ .dark-mode .section { background-color: var(--bg-primary); } .dark-mode .background-black { background-color: var(--bg-secondary); } /* Projects */ .dark-mode .project-item-image-overlay { background-color: var(--overlay-bg); } .dark-mode .project-item-title { color: var(--text-primary); } .dark-mode .project-item h6 { color: var(--text-muted); } .dark-mode .project-item-arrow { filter: invert(1); } .project-item h6 { font-size: 0.75em; line-height: 1.5; font-weight: 400; color: var(--text-muted); margin-top: 0.5em; } .project-collection-list { row-gap: 2.5em !important; } .heading-container h3 { margin-bottom: 1.5em; } /* Footer */ .dark-mode .footer { background-color: var(--bg-primary); } .dark-mode .footer-flex-container { border-top-color: var(--border-color); } .dark-mode .footer-link { color: var(--text-secondary); } .dark-mode h4 { color: var(--text-secondary); } .email-link { color: inherit; text-decoration: none; transition: opacity var(--transition-speed) ease; } .email-link:hover { opacity: 0.7; text-decoration: none; } .footer-flex-container { align-items: center; } .footer-flex-first { gap: 1.5rem; align-items: center; } .content.horizontal { display: flex; align-items: center; gap: 0.25rem; } /* Cursor */ .dark-mode .cursor-big-circle, .dark-mode .cursor-small-circle { background-color: hsla(0, 0%, 30%, 0.5); } .dark-mode .cursor-arrow { filter: invert(1); } /* Mobile nav menu in dark mode */ @media screen and (max-width: 767px) { .dark-mode .nav-menu { background-color: var(--bg-primary); } .dark-mode .nav-link { border-bottom-color: var(--border-color); } }