/*================================================= DARK MODE OVERRIDES Activated via [data-theme="dark"] on =================================================*/ [data-theme="dark"] { /* Core Palette */ --color-sage: #9ab89b; --color-mist: #3a4a3e; --color-blush: #d4919b; --color-charcoal: #e2e4e3; --color-slate: #a8adab; --color-white: #1a211e; --color-porcelain: #242b27; --color-silver: #343b37; --color-sage-dark: #d0d8d1; --color-blush-soft: #3d2a2e; --color-taupe: #2e2d2a; /* Tints */ --tint-sage-06: rgba(154, 184, 155, 0.04); --tint-sage-08: rgba(154, 184, 155, 0.06); --tint-sage-12: rgba(154, 184, 155, 0.09); --tint-blush-08: rgba(212, 145, 155, 0.06); --tint-blush-16: rgba(212, 145, 155, 0.1); --tint-taupe-16: rgba(46, 45, 42, 0.15); /* Semantic */ --text-color: #e2e4e3; --text-secondary-color: #a8adab; --bg-color: #1a211e; --light-bg: #212a24; --card-bg: #232b26; --border-color: #343b37; --border-color-alt: #2e3531; --border-color-card: #303833; color-scheme: dark; } /* Body & base */ [data-theme="dark"] body { background: #1a211e; color: #e2e4e3; } /* Navbar */ [data-theme="dark"] .navbar { background: rgba(26, 33, 30, 0.85) !important; border-bottom-color: #303833; } [data-theme="dark"] .navbar.scrolled { background: rgba(26, 33, 30, 0.95) !important; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .navbar-brand { color: #e2e4e3 !important; } [data-theme="dark"] .nav-link { color: #d0d4d2 !important; } [data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-link.active { color: #9ab89b !important; } [data-theme="dark"] .navbar-toggler { border-color: #343b37; } [data-theme="dark"] .navbar-toggler-icon { filter: invert(0.85); } /* Hero */ [data-theme="dark"] .hero-section { background-image: url('../images/bg/dark-bg-2560.webp'); background-size: cover; background-position: center top; background-color: #1a211e; } [data-theme="dark"] .hero-section::before { background: linear-gradient(180deg, rgba(18, 28, 22, 0.55) 0%, rgba(18, 28, 22, 0.4) 100%); } [data-theme="dark"] .hero-title, [data-theme="dark"] .hero-title-inline { color: #d0d8d1; } [data-theme="dark"] .hero-subtitle { color: #a8adab; } [data-theme="dark"] .hero-role { color: #9ab89b; } [data-theme="dark"] .hero-portrait { border-color: rgba(154, 184, 155, 0.3); } /* Cards & panels */ [data-theme="dark"] .card, [data-theme="dark"] .section-card, [data-theme="dark"] .panel, [data-theme="dark"] .stat-card, [data-theme="dark"] .course-card, [data-theme="dark"] .area-card, [data-theme="dark"] .publication-card, [data-theme="dark"] .research-card, [data-theme="dark"] .service-card, [data-theme="dark"] .news-card, [data-theme="dark"] .testimonial-card, [data-theme="dark"] .skill-category, [data-theme="dark"] .education-item, [data-theme="dark"] .interest-card, [data-theme="dark"] .role-item, [data-theme="dark"] .sleq-summary, [data-theme="dark"] .timeline-section, [data-theme="dark"] .media-card, [data-theme="dark"] .blog-card { background: #232b26; border-color: #303833; } /* Remove extra box layer — section-cards become transparent containers in dark mode */ [data-theme="dark"] .section-card { background: transparent; border-color: transparent; box-shadow: none; } [data-theme="dark"] .card, [data-theme="dark"] .stat-card, [data-theme="dark"] .area-card, [data-theme="dark"] .education-item, [data-theme="dark"] .skill-category, [data-theme="dark"] .interest-card { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1); } [data-theme="dark"] .card:hover, [data-theme="dark"] .section-card:hover, [data-theme="dark"] .research-card:hover, [data-theme="dark"] .service-card:hover, [data-theme="dark"] .blog-card:hover, [data-theme="dark"] .stat-card:hover, [data-theme="dark"] .area-card:hover, [data-theme="dark"] .education-item:hover, [data-theme="dark"] .skill-category:hover { border-color: #9ab89b; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15); } /* Leadership skill tags */ [data-theme="dark"] .skill-tag { background: rgba(154, 184, 155, 0.12); border-color: rgba(154, 184, 155, 0.25); color: #b0c4b1; } /* Social link dark mode fill on hover */ [data-theme="dark"] .social-link:hover { background: #9ab89b !important; color: #1a211e !important; } /* Card text */ [data-theme="dark"] .card-title, [data-theme="dark"] .card h3, [data-theme="dark"] .card h4, [data-theme="dark"] .card h5 { color: #d0d8d1; } [data-theme="dark"] .card-text, [data-theme="dark"] .card-body, [data-theme="dark"] .card p, [data-theme="dark"] .card li, [data-theme="dark"] .card .text-muted { color: #a8adab !important; } [data-theme="dark"] .card i, [data-theme="dark"] #highlights .card i { color: #9ab89b; } [data-theme="dark"] .card-footer { border-top-color: #303833; } /* Section bands */ [data-theme="dark"] .section-band--plain { background: #1a211e; } [data-theme="dark"] .section-band--soft-sage { background: #1a211e; } [data-theme="dark"] .section-band--soft-blush { background: #1a211e; } /* Gallery */ [data-theme="dark"] .gallery-item { border-color: #303833; background: #232b26; } /* Carousel controls */ [data-theme="dark"] .carousel-control-prev, [data-theme="dark"] .carousel-control-next { background: #232b26; border-color: #9ab89b; } [data-theme="dark"] .carousel-control-prev:hover, [data-theme="dark"] .carousel-control-next:hover { background: #2e3233; } [data-theme="dark"] .carousel-control-prev-icon, [data-theme="dark"] .carousel-control-next-icon { filter: brightness(0) saturate(100%) invert(78%) sepia(10%) saturate(500%) hue-rotate(76deg) brightness(95%) contrast(88%); } /* Modal */ [data-theme="dark"] #newsModal .modal-content { background: #232b26; border-color: #303833; } [data-theme="dark"] #newsModal .modal-header { background: rgba(154, 184, 155, 0.06); border-bottom-color: #343b37; } [data-theme="dark"] #newsModal .modal-title { color: #e2e4e3; } [data-theme="dark"] #newsModal .modal-body { color: #a8adab; } [data-theme="dark"] #newsModal .modal-footer { border-top-color: #303833; } /* Social links */ [data-theme="dark"] .social-link { border-color: #343b37; color: #d0d4d2; } [data-theme="dark"] .social-link:hover { border-color: #9ab89b; color: #9ab89b; background: rgba(154, 184, 155, 0.06); } /* Footer */ [data-theme="dark"] footer, [data-theme="dark"] .site-footer { background: #1a211e; color: #a8adab; } [data-theme="dark"] .site-footer { border-top-color: #303833; } [data-theme="dark"] .footer-brand { color: #d0d8d1; } [data-theme="dark"] .footer-heading { color: #d0d8d1; } [data-theme="dark"] .footer-links a { color: #a8adab; } [data-theme="dark"] .footer-links a:hover { color: #9ab89b; } [data-theme="dark"] .footer-social a { border-color: #343b37; color: #a8adab; } [data-theme="dark"] .footer-social a:hover { background: #9ab89b; border-color: #9ab89b; color: #1a211e; } [data-theme="dark"] .footer-bottom { border-top-color: #303833; color: #6e7572; } /* Links */ [data-theme="dark"] a { color: #d0d4d2; } [data-theme="dark"] a:hover { color: #9ab89b; } [data-theme="dark"] .text-accent { color: #9ab89b !important; } /* Headings */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #d0d8d1; } /* Tags / chips */ [data-theme="dark"] .chip, [data-theme="dark"] .tag, [data-theme="dark"] .badge, [data-theme="dark"] .meta-chip { background: rgba(212, 145, 155, 0.08); border-color: rgba(212, 145, 155, 0.15); color: #d0d8d1; } /* Research page specifics */ [data-theme="dark"] .research-card .title, [data-theme="dark"] .research-card .card-title { color: #9ab89b; border-bottom-color: #343b37; } [data-theme="dark"] .research-card .teaser { color: #a8adab; } [data-theme="dark"] .figure-grid, [data-theme="dark"] .figure-carousel { background: #fff; border: none; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); border-radius: var(--border-radius-md); } [data-theme="dark"] figcaption { color: #8a8f8d; } [data-theme="dark"] .service-card-heading { color: #d0d8d1; } [data-theme="dark"] .service-card li { color: #a8adab; } /* About page */ [data-theme="dark"] .bio-panel { background: #232b26; border-color: #303833; } [data-theme="dark"] .bio-title { color: #d0d8d1; } [data-theme="dark"] .bio-text { color: #a8adab !important; } [data-theme="dark"] .education-item, [data-theme="dark"] .interest-card { background: #232b26; border-color: #303833; } [data-theme="dark"] .education-meta { color: #8a8f8d; } [data-theme="dark"] .interest-card p { color: #a8adab; } /* Signature */ [data-theme="dark"] .signature-img { filter: invert(0.85) sepia(0.1) saturate(0.5) hue-rotate(70deg); } /* Blog page */ [data-theme="dark"] .blog-card-image { background: #2a2e2f; } [data-theme="dark"] .blog-card-title { color: #d0d8d1; } [data-theme="dark"] .blog-card:hover .blog-card-title { color: #9ab89b; } [data-theme="dark"] .blog-card-excerpt { color: #a8adab; } [data-theme="dark"] .blog-section-description { color: #a8adab; } /* Contact page collab topics */ [data-theme="dark"] .collab-topics strong { color: #d0d8d1; } [data-theme="dark"] .collab-topics span { color: #a8adab; } [data-theme="dark"] .collab-topics li { border-bottom-color: #343b37; } /* Forms */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: #232b26; border-color: #343b37; color: #e2e4e3; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: rgba(226, 228, 227, 0.4); } /* Tables */ [data-theme="dark"] table { border-color: #303833; background: #232b26; } [data-theme="dark"] thead { background: #2a2e2f; } [data-theme="dark"] th, [data-theme="dark"] td { border-bottom-color: #303833; } /* Scrollbar */ [data-theme="dark"] { scrollbar-color: #343b37 #1a211e; } [data-theme="dark"] ::-webkit-scrollbar { width: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #1a211e; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #343b37; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a5349; } /*================================================= DARK MODE TOGGLE BUTTON =================================================*/ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--color-silver); background: transparent; color: var(--color-charcoal); cursor: pointer; transition: border-color 150ms ease-out, color 150ms ease-out, background-color 150ms ease-out; padding: 0; margin-left: 0; } .theme-toggle:hover { border-color: var(--color-sage); color: var(--color-sage); background: var(--tint-sage-08); } .theme-toggle i { font-size: 0.9rem; color: inherit; font-style: normal; } [data-theme="dark"] .theme-toggle { border-color: #343b37; color: #d0d4d2; } [data-theme="dark"] .theme-toggle:hover { border-color: #9ab89b; color: #9ab89b; }