/* ============================================================ Dark mode — toggle on Light mode is the default; we only override what's needed. ============================================================ */ /* ---- Theme toggle button (always visible) ---- */ .md-theme-toggle { position: fixed; bottom: 22px; right: 22px; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); background: #fff; color: #2b2a27; font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; } .md-theme-toggle:hover { transform: scale(1.08); } .md-theme-toggle:focus { outline: 2px solid #c9a96b; outline-offset: 2px; } html[data-theme="dark"] .md-theme-toggle { background: #2a2620; color: #ede8d8; border-color: rgba(255, 255, 255, .15); box-shadow: 0 2px 10px rgba(0, 0, 0, .5); } /* ============================================================ Dark theme overrides Palette: bg #14130f, surface #1d1b16, text #d8d4c8, mute #948f82, accent #c9a96b ============================================================ */ html[data-theme="dark"] { color-scheme: dark; } html[data-theme="dark"] body { background-color: #14130f !important; color: #d8d4c8; } /* Sections / containers */ html[data-theme="dark"] section, html[data-theme="dark"] .section, html[data-theme="dark"] .container, html[data-theme="dark"] .container-fluid { background-color: transparent; } html[data-theme="dark"] section[style*="background"], html[data-theme="dark"] [class*="bg-light"], html[data-theme="dark"] [class*="bg-white"] { background-color: #14130f !important; } /* Headings + text */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: #ede8d8; } html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] span, html[data-theme="dark"] td, html[data-theme="dark"] th, html[data-theme="dark"] label { color: inherit; } html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-secondary, html[data-theme="dark"] small { color: #948f82 !important; } html[data-theme="dark"] a { color: #d4b988; } html[data-theme="dark"] a:hover, html[data-theme="dark"] a:focus { color: #ede8d8; } /* Navbar */ html[data-theme="dark"] .navbar-default, html[data-theme="dark"] .navbar-light, html[data-theme="dark"] .navbar { background-color: #1a1814 !important; border-color: rgba(255, 255, 255, .08); } html[data-theme="dark"] .navbar-default .navbar-nav > li > a, html[data-theme="dark"] .navbar-light .navbar-nav .nav-link, html[data-theme="dark"] .navbar-nav > li > a { color: #d8d4c8 !important; } html[data-theme="dark"] .navbar-nav > li > a:hover, html[data-theme="dark"] .navbar-nav > li.active > a, html[data-theme="dark"] .navbar-nav > li > a.active { color: #ede8d8 !important; } /* Logo: legacy SVG/PNG is dark on transparent — invert it */ html[data-theme="dark"] .navbar-brand img, html[data-theme="dark"] #logo { filter: invert(1) brightness(1.2); } /* "Passion for" / "Contemporary art" tagline SVGs are pure black — invert in dark mode */ html[data-theme="dark"] img[src*="passion for.svg"], html[data-theme="dark"] img[src*="contemporary art.svg"] { filter: invert(1) brightness(1.2); } /* Footer */ html[data-theme="dark"] footer, html[data-theme="dark"] .footer { background-color: #1a1814 !important; color: #948f82; border-color: rgba(255, 255, 255, .08); } /* Forms / inputs */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="file"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: #1d1b16; color: #ede8d8; border-color: rgba(255, 255, 255, .12); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #6a665d; } html[data-theme="dark"] button, html[data-theme="dark"] .btn { border-color: rgba(255, 255, 255, .15); } /* Tables / borders */ html[data-theme="dark"] .table, html[data-theme="dark"] table { color: #d8d4c8; } html[data-theme="dark"] hr, html[data-theme="dark"] .border, html[data-theme="dark"] [class*="border-"] { border-color: rgba(255, 255, 255, .12) !important; } /* ---- Portfolio (.md-* classes from build-views) ---- */ html[data-theme="dark"] .md-submenu { border-bottom-color: rgba(255, 255, 255, .12); } html[data-theme="dark"] .md-submenu a { color: #948f82; } html[data-theme="dark"] .md-submenu a:hover { color: #ede8d8; } html[data-theme="dark"] .md-submenu a.active { color: #ede8d8; border-bottom-color: #c9a96b; } html[data-theme="dark"] .md-thumb { background: #1d1b16; } html[data-theme="dark"] .md-caption h4 { color: #ede8d8; } html[data-theme="dark"] .md-caption p, html[data-theme="dark"] .md-empty { color: #948f82; } /* ---- Magnific popup overlay (already mostly dark, just polish) ---- */ html[data-theme="dark"] .mfp-bg { background: #0a0907; } /* ---- Smooth transitions when toggling ---- */ body, .navbar, .navbar-default, footer, .footer, input, textarea, select, .md-thumb { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }