/* ========================================================= Dark mode overrides Applied when is set. Bootstrap 5.3 handles most component colours automatically; these rules cover the site-specific custom styles. ========================================================= */ /* --- Navbar --- */ /* At page top the navbar is fully transparent. In dark mode the default light link colour (#aaa) is barely visible against the bright background photo, so we use a dark colour (#333) instead – mirroring light mode's #444. Once the user scrolls and top-nav-collapse fires (dark opaque background), links switch to white. Both changes fade smoothly via the colour transition added to .navbar-custom .nav-link in phgamper.css. */ [data-bs-theme="dark"] .navbar-custom:not(.top-nav-collapse) .nav-link, [data-bs-theme="dark"] .navbar-custom:not(.top-nav-collapse) #darkmode-toggle { color: #333333; } [data-bs-theme="dark"] .navbar-custom.top-nav-collapse .nav-link, [data-bs-theme="dark"] .navbar-custom.top-nav-collapse #darkmode-toggle { color: #ffffff; } [data-bs-theme="dark"] .navbar-custom.top-nav-collapse { background-color: rgba(30, 30, 30, 0.95); } /* On mobile the navbar is always opaque, so it needs the dark background and white links even before the user scrolls (no top-nav-collapse class yet). */ @media (max-width: 767.98px) { [data-bs-theme="dark"] .navbar-custom { background-color: rgba(30, 30, 30, 0.95); } [data-bs-theme="dark"] .navbar-custom:not(.top-nav-collapse) .nav-link, [data-bs-theme="dark"] .navbar-custom:not(.top-nav-collapse) #darkmode-toggle { color: #ffffff; } [data-bs-theme="dark"] .navbar-custom:not(.top-nav-collapse) #darkmode-toggle { --fa-inverse: rgba(30, 30, 30, 0.95); } } /* --- Section content panels --- */ [data-bs-theme="dark"] #intro .onepager-item { background: rgba(30, 30, 30, 1.0); } [data-bs-theme="dark"] #intro:before { border-bottom-color: rgba(30, 30, 30, 1.0); } [data-bs-theme="dark"] #about .onepager-item, [data-bs-theme="dark"] #about:before { background: rgba(30, 30, 30, 0.9); } [data-bs-theme="dark"] #cv .onepager-item { background: rgba(30, 30, 30, 1.0); } /* Impressum Modal – dark mode */ [data-bs-theme="dark"] #impressumModal .modal-content { background-color: rgba(30, 30, 30, 1.0); color: #e0e0e0; } [data-bs-theme="dark"] #impressumModal .modal-header { border-bottom-color: #444; } [data-bs-theme="dark"] #impressumModal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } [data-bs-theme="dark"] #raw { background: rgba(30, 30, 30, 1.0); } /* --- Footer --- */ [data-bs-theme="dark"] footer { background-color: #1a1a1a; background: #1a1a1a; border-color: #333; } /* --- Links --- */ [data-bs-theme="dark"] a, [data-bs-theme="dark"] a:visited { color: #aaaaaa; } [data-bs-theme="dark"] a:hover { color: #cccccc; } /* Keep header and travel links white (they sit on dark imagery) */ [data-bs-theme="dark"] header a, [data-bs-theme="dark"] header a:visited, [data-bs-theme="dark"] #travel a, [data-bs-theme="dark"] #travel a:visited { color: white; } /* --- Section dividers --- */ [data-bs-theme="dark"] #about .block, [data-bs-theme="dark"] #cv .block { border-color: #444; } /* --- Active nav link --- */ [data-bs-theme="dark"] .navbar-custom .nav-link.active { background: rgba(80, 80, 80, 0.9); } /* ========================================================= Dark-mode toggle button Styled as a filled circle (fa-stack) to match the scroll-down chevron buttons used throughout the page. ========================================================= */ #darkmode-toggle { background: none; border: none; padding: 25px; cursor: pointer; color: #444444; font-size: 2em; line-height: 1; text-decoration: none; -webkit-transition: color 0.5s ease-in-out; -moz-transition: color 0.5s ease-in-out; transition: color 0.5s ease-in-out; } #darkmode-toggle:hover { color: #888888; } [data-bs-theme="dark"] #darkmode-toggle { color: #aaaaaa; } [data-bs-theme="dark"] #darkmode-toggle:hover { color: #cccccc; } /* When the navbar has its dark opaque background (scrolled), the toggle circle turns white. Override --fa-inverse so the inner icon is dark on that white circle rather than invisible (fa-inverse defaults to #fff). */ [data-bs-theme="dark"] .navbar-custom.top-nav-collapse #darkmode-toggle { --fa-inverse: rgba(30, 30, 30, 0.95); } @media screen and (max-width: 767px) { #darkmode-toggle { padding: 20px 25px; } }