/* ============================================================ theme-dark.css — Dark overrides for the Atelier (graphite/brass) site. Activated when is set (theme-toggle.js / inline no-flash head script). Keeps the brass accent; swaps surfaces + text to a warm graphite dark palette. Loaded after site.css in _Layout. ============================================================ */ html[data-theme="dark"] { --bg: #14161a; /* deep graphite page */ --surface: #1c1f25; /* cards / panels */ --ink: #ECE9E3; /* primary text — warm off-white */ --muted: #A2A6AE; /* secondary text */ --rule: #2C313A; /* hairline rules */ /* brass accent stays bright for contrast on dark */ --brass: #C9A86A; --brass-dark: #00AEEF; } html[data-theme="dark"] body { color: var(--ink); background: var(--bg); } /* Links / headings inherit ink via variables, keep brass hover. */ html[data-theme="dark"] a { color: var(--ink); } html[data-theme="dark"] a:hover { color: var(--brass); } 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"] .display-head { color: var(--ink); } html[data-theme="dark"] .lead-text { color: var(--ink); } html[data-theme="dark"] .body-text { color: var(--muted); } /* Surfaces commonly used across the site. */ html[data-theme="dark"] .card, html[data-theme="dark"] .bg-white, html[data-theme="dark"] .surface, html[data-theme="dark"] .panel { background-color: var(--surface); color: var(--ink); border-color: var(--rule); } /* Header + footer. */ html[data-theme="dark"] .site-header, html[data-theme="dark"] .site-header.scrolled { background: rgba(20, 22, 26, 0.92); border-bottom-color: var(--rule); } html[data-theme="dark"] .navbar .nav-link { color: var(--ink); } html[data-theme="dark"] .navbar .nav-link:hover { color: var(--brass); } html[data-theme="dark"] .navbar-toggler { filter: invert(1) grayscale(1) brightness(1.6); } html[data-theme="dark"] .site-footer { background: #0f1115; color: var(--muted); } html[data-theme="dark"] .site-footer h5, html[data-theme="dark"] .site-footer a { color: var(--ink); } html[data-theme="dark"] .site-footer a:hover { color: var(--brass); } /* Form controls. */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: #20242b; color: var(--ink); border-color: var(--rule); } html[data-theme="dark"] .form-control::placeholder { color: var(--muted); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: #20242b; color: var(--ink); border-color: var(--brass); box-shadow: 0 0 0 .2rem rgba(201, 168, 106, .25); } /* Rules / dividers / muted surfaces. */ html[data-theme="dark"] hr { border-color: var(--rule); } html[data-theme="dark"] .bg-light { background-color: #1a1d22 !important; color: var(--ink); } html[data-theme="dark"] .text-muted { color: var(--muted) !important; } html[data-theme="dark"] .border { border-color: var(--rule) !important; } /* The dark-mode toggle button + search field in the header. */ html[data-theme="dark"] .theme-toggle { color: var(--ink); } /* Search suggestions dropdown (see search-suggest.js). */ html[data-theme="dark"] .search-suggest__menu { background: var(--surface); border-color: var(--rule); color: var(--ink); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); } html[data-theme="dark"] .search-suggest__item:hover, html[data-theme="dark"] .search-suggest__item.is-active { background: #262a31; } html[data-theme="dark"] .search-suggest__type { color: var(--brass); } /* Light meta theme color is set in _Layout; nothing to do here. */ /* ===== Header search + toggle styling (shared light/dark base) ===== */ .header-search { position: relative; display: flex; align-items: center; } .header-search .form-control { min-width: 160px; height: 38px; } .theme-toggle { background: transparent; border: 1px solid var(--rule); color: var(--ink); width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .2s ease, border-color .2s ease; } .theme-toggle:hover { color: var(--brass); border-color: var(--brass); } /* Search-suggest dropdown (base / light). */ .search-suggest__menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1080; background: var(--surface, #fff); border: 1px solid var(--rule, #E7E2DA); border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, .12); overflow: hidden; max-height: 70vh; overflow-y: auto; } .search-suggest__item { display: block; padding: .55rem .85rem; color: var(--ink, #141416); border-bottom: 1px solid var(--rule, #E7E2DA); cursor: pointer; } .search-suggest__item:last-child { border-bottom: 0; } .search-suggest__item:hover, .search-suggest__item.is-active { background: #F5F1EA; } .search-suggest__type { display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--brass, #00AEEF); margin-right: .5rem; } .search-suggest__label { color: inherit; } .search-suggest__empty { padding: .7rem .85rem; color: var(--muted, #6B7280); font-size: .9rem; }