/* Site-wide bilingual visibility. The class on is set by the pre-paint script in header.html (and toggled by prefs.js on click of #lang-sel). CSS-driven rather than JS-driven so that any content inserted dynamically — e.g. AJAX-loaded fragments on /APIKeys — localises automatically without a per-call helper. !important: SmartY's core.min.css ships rules like `.dropdown-menu li:not(.dropdown-item)>a { display: block }` (specificity 0,2,2) that out-rank `html.lang-cy .en` (0,2,1) and re-show the wrong language inside Bootstrap dropdowns. The hide is a utility — it should always win over component defaults. */ html.lang-cy .en { display: none !important; } html.lang-en .cy { display: none !important; } /* Theme-aware logo swap. Both tags are rendered side-by-side in .navbar-brand; one is hidden via data-bs-theme on . */ .logo-dark { display: none; } [data-bs-theme="dark"] .logo-light { display: none; } [data-bs-theme="dark"] .logo-dark { display: inline-block; } /* SmartY 5.0.7's core.css binds key Bootstrap component variables (--bs-card-bg, --bs-modal-bg, --bs-dropdown-divider-bg, --bs-table-*) to hardcoded light values at the component selector level; the [data-bs-theme="dark"] block in core.css only flips generic surface vars, never the component-specific ones. Re-bind them here so the dark theme actually applies. Worst offender — core.css:20254 puts a literal #ffffff on #header, hiding the navbar in dark mode. */ /* Section banding. Body sits one tier off the chrome (header strip + footer band) and cards so the three regions read as a layered stack instead of a flat single colour. */ body { background-color: var(--bs-secondary-bg); } [data-bs-theme="dark"] body { background-color: var(--bs-body-bg); } [data-bs-theme="dark"] #header { background-color: var(--bs-secondary-bg); } [data-bs-theme="dark"] .card { --bs-card-bg: var(--bs-tertiary-bg); --bs-card-cap-bg: var(--bs-tertiary-bg); --bs-card-border-color: var(--bs-border-color); } [data-bs-theme="dark"] .card > hr { background-color: var(--bs-border-color); opacity: 0.3; } [data-bs-theme="dark"] .modal-content { --bs-modal-bg: var(--bs-tertiary-bg); --bs-modal-border-color: var(--bs-border-color); --bs-modal-header-border-color: var(--bs-border-color); --bs-modal-footer-border-color: var(--bs-border-color); } [data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-divider-bg: var(--bs-border-color); } [data-bs-theme="dark"] .table { --bs-table-border-color: var(--bs-border-color); --bs-table-accent-bg: transparent; --bs-table-striped-bg: rgba(255, 255, 255, 0.04); --bs-table-hover-bg: rgba(255, 255, 255, 0.06); } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .input-group-text { border-color: var(--bs-border-color); }