/* * Coastal Ecosystem - Dark Mode Overrides * Activates only when is present (Bootstrap 5.3+ + dmx-bs5-theme). * Preserves the Coastal palette identity by lifting accent tones (mineral, sunset, sea-anemone) * and using deeper variants of deep-water for backgrounds + surfaces. * * Scope: PUBLIC FRONTEND ONLY. Admin layout does NOT load this file. */ [data-bs-theme="dark"] { /* Surface palette: deep-water family */ --coastal-dark-bg: #0a1a2a; --coastal-dark-surface: #0f2438; --coastal-dark-elevated: #143046; --coastal-dark-border: #1f4060; --coastal-dark-border-soft: #1a3550; /* Text palette: cool desaturated to match coastal feel */ --coastal-dark-text: #cbd9d4; --coastal-dark-text-strong: #e8f4f0; --coastal-dark-text-muted: #8aa39c; --coastal-dark-text-faint: #6b8580; /* Re-map Bootstrap tokens */ --bs-body-bg: var(--coastal-dark-bg); --bs-body-color: var(--coastal-dark-text); --bs-secondary-color: var(--coastal-dark-text-muted); --bs-tertiary-color: var(--coastal-dark-text-faint); --bs-tertiary-bg: var(--coastal-dark-surface); --bs-border-color: var(--coastal-dark-border); --bs-border-color-translucent: rgba(255, 255, 255, 0.1); --bs-link-color: var(--coastal-mineral); --bs-link-hover-color: #ffffff; --bs-link-color-rgb: var(--coastal-mineral-rgb); --bs-emphasis-color: var(--coastal-dark-text-strong); --bs-emphasis-color-rgb: 232, 244, 240; --bs-heading-color: var(--coastal-dark-text-strong); /* Verge gray scale flipped for dark */ --verge-gray-50: #182d42; --verge-gray-100: #1c344c; --verge-gray-200: var(--coastal-dark-border); --verge-gray-300: #2a4f6e; --verge-gray-400: #6b8580; --verge-gray-500: #8aa39c; --verge-gray-600: #a8c0ba; --verge-gray-700: #c1d4d0; --verge-gray-800: var(--coastal-dark-text-strong); --verge-gray-900: #f0f6f4; } /* Body The explicit background-color is NOT redundant with --bs-body-bg above: bootstrap-verge.css `body { background-color: var(--coastal-seafoam); }` is a literal, not a --bs-body-bg reference, so the variable remap alone won't flip the body background. This rule wins by specificity (0,1,1) + later load order. */ [data-bs-theme="dark"] body { background-color: var(--coastal-dark-bg); color: var(--coastal-dark-text); } /* Headings keep heavy weight but switch to light tone */ [data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6, [data-bs-theme="dark"] .h1, [data-bs-theme="dark"] .h2, [data-bs-theme="dark"] .h3, [data-bs-theme="dark"] .h4, [data-bs-theme="dark"] .h5, [data-bs-theme="dark"] .h6, [data-bs-theme="dark"] .card-title, [data-bs-theme="dark"] .card .h5, [data-bs-theme="dark"] .card .h4 { color: var(--coastal-dark-text-strong); } [data-bs-theme="dark"] .lead { color: var(--coastal-dark-text-muted); } /* Links */ [data-bs-theme="dark"] a { color: var(--coastal-mineral); } [data-bs-theme="dark"] a:hover { color: #ffffff; } [data-bs-theme="dark"] article a, [data-bs-theme="dark"] main p a, [data-bs-theme="dark"] .content-link { background-image: linear-gradient(var(--coastal-mineral), var(--coastal-mineral)); } [data-bs-theme="dark"] article a:hover, [data-bs-theme="dark"] main p a:hover, [data-bs-theme="dark"] .content-link:hover { color: #ffffff; } /* Navbar */ [data-bs-theme="dark"] header .navbar { background: var(--coastal-dark-elevated); border-bottom-color: var(--coastal-dark-border); } [data-bs-theme="dark"] .navbar-brand, [data-bs-theme="dark"] .navbar-brand:hover { color: var(--coastal-dark-text-strong); } [data-bs-theme="dark"] .navbar-nav .nav-link { color: var(--coastal-dark-text-strong); } [data-bs-theme="dark"] .navbar-nav .nav-link:hover, [data-bs-theme="dark"] .navbar-nav .nav-link.active { color: var(--coastal-mineral); } [data-bs-theme="dark"] .navbar-nav .nav-link::after { background: var(--coastal-mineral); } [data-bs-theme="dark"] .navbar-toggler { border-color: var(--coastal-mineral); } [data-bs-theme="dark"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28203, 217, 212, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } /* Donate button stays brand pink — accent works on dark too */ [data-bs-theme="dark"] .navbar-nav .nav-link[href="/donations"] { background-color: var(--coastal-sea-anemone); color: #ffffff; } [data-bs-theme="dark"] .navbar-nav .nav-link[href="/donations"]:hover { background-color: #f02669; color: #ffffff; } /* Mobile nav collapse border */ @media (max-width: 991.98px) { [data-bs-theme="dark"] .navbar-nav .nav-link { border-bottom-color: rgba(255, 255, 255, 0.08); } [data-bs-theme="dark"] .navbar-collapse { border-top-color: rgba(255, 255, 255, 0.12); } } /* Cards */ [data-bs-theme="dark"] .card { background: var(--coastal-dark-surface); border-color: var(--coastal-dark-border); color: var(--coastal-dark-text); } [data-bs-theme="dark"] .card:hover, [data-bs-theme="dark"] .card.shadow-sm:hover, [data-bs-theme="dark"] .card.shadow:hover, [data-bs-theme="dark"] .card.shadow-lg:hover { box-shadow: 6px 6px 0 var(--coastal-dark-border); } [data-bs-theme="dark"] .card.shadow-sm, [data-bs-theme="dark"] .card.shadow, [data-bs-theme="dark"] .card.shadow-lg, [data-bs-theme="dark"] .card.border-0 { border-color: var(--coastal-dark-border); } [data-bs-theme="dark"] .card-img-top { border-bottom-color: var(--coastal-dark-border); } [data-bs-theme="dark"] .card-text { color: var(--coastal-dark-text); } /* Forms */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: var(--coastal-dark-elevated); border-color: var(--coastal-dark-border); color: var(--coastal-dark-text-strong); } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: var(--coastal-dark-elevated); border-color: var(--coastal-mineral); color: var(--coastal-dark-text-strong); box-shadow: 0 0 0 0.25rem rgba(132, 201, 184, 0.22); } [data-bs-theme="dark"] .form-control::placeholder { color: var(--coastal-dark-text-faint); } [data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-select:disabled { background-color: var(--coastal-dark-surface); color: var(--coastal-dark-text-muted); } [data-bs-theme="dark"] .input-group-text { background-color: var(--coastal-dark-surface); border-color: var(--coastal-dark-border); color: var(--coastal-dark-text); } [data-bs-theme="dark"] .form-check-input { background-color: var(--coastal-dark-surface); border-color: var(--coastal-dark-border); } [data-bs-theme="dark"] .form-check-input:checked { background-color: var(--coastal-kelp); border-color: var(--coastal-kelp); } [data-bs-theme="dark"] .form-label, [data-bs-theme="dark"] .col-form-label { color: var(--coastal-dark-text-strong); } /* Dropdowns */ [data-bs-theme="dark"] .dropdown-menu { background-color: var(--coastal-dark-elevated); border-color: var(--coastal-dark-border); box-shadow: 6px 6px 0 var(--coastal-dark-border); } [data-bs-theme="dark"] .dropdown-item { color: var(--coastal-dark-text-strong); border-bottom-color: var(--coastal-dark-border-soft); } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background-color: var(--coastal-dark-bg); color: #ffffff; } [data-bs-theme="dark"] .dropdown-item:active, [data-bs-theme="dark"] .dropdown-item.active { background-color: var(--coastal-mineral); color: var(--coastal-deep-water); } [data-bs-theme="dark"] .dropdown-divider { border-top-color: var(--coastal-dark-border); } /* Language dropdown overrides (uses its own !important rules in main.ejs