/* ******************************************************************************
LAST EDIT July 7, 2026 (calculator switcher dropdown dark mode)
stylesdark.css — Dark mode overlay for Peter's HVAC Advisory
Load AFTER styles.css:
Activate by adding class "dark" to :
Optional auto mode (respects OS preference when no manual choice stored):
Toggle example:
document.documentElement.classList.toggle('dark');
*********************************************************************************** */
/* ==========================================================================
1. Dark palette — CSS custom properties
========================================================================== */
html.dark {
--primary-blue: #6b9af0;
--accent-gold: #e9b24c;
--dark-blue: #0d1520;
--light-bg: #0f1419;
--text: #e8edf4;
--text-light: #9aa8bc;
--white: #1a2332;
--surface: #1a2332;
--surface-raised: #243044;
--surface-hover: #2a3a50;
--border: #2d3f56;
--border-strong: #3a5070;
--input-bg: #141c28;
--header-grad-end: #2d4a8a;
--success: #3dd68c;
--danger: #f87171;
--warning-bg: #2a2416;
--warning-border: #b8860b;
--warning-text: #f0d78c;
--info-bg: #152238;
--info-border: #3a5a8a;
--shadow: rgba(0, 0, 0, 0.45);
color-scheme: dark;
}
/* Auto dark when OS prefers dark and dark-auto is set (no manual override) */
@media (prefers-color-scheme: dark) {
html.dark-auto:not(.dark):not(.light) {
--primary-blue: #6b9af0;
--accent-gold: #e9b24c;
--dark-blue: #0d1520;
--light-bg: #0f1419;
--text: #e8edf4;
--text-light: #9aa8bc;
--white: #1a2332;
--surface: #1a2332;
--surface-raised: #243044;
--surface-hover: #2a3a50;
--border: #2d3f56;
--border-strong: #3a5070;
--input-bg: #141c28;
--header-grad-end: #2d4a8a;
--success: #3dd68c;
--danger: #f87171;
--warning-bg: #2a2416;
--warning-border: #b8860b;
--warning-text: #f0d78c;
--info-bg: #152238;
--info-border: #3a5a8a;
--shadow: rgba(0, 0, 0, 0.45);
color-scheme: dark;
}
}
html.dark body {
background-color: var(--light-bg);
color: var(--text);
}
html.dark h1,
html.dark h2,
html.dark h3,
html.dark p {
color: var(--text);
}
html.dark p.label,
html.dark p.labelbk,
html.dark small,
html.dark .subtitle,
html.dark .last-updated,
html.dark .note,
html.dark .unit-helper {
color: var(--text-light);
}
html.dark p.labelbk {
color: var(--text);
}
/* ==========================================================================
2. Top bar & layout
========================================================================== */
html.dark .top-bar {
background: var(--surface);
border-bottom-color: var(--border);
}
/* ==========================================================================
3. Header & navigation
========================================================================== */
html.dark header {
background: linear-gradient(135deg, #1e3a6e, var(--header-grad-end));
box-shadow: 0 2px 12px var(--shadow);
}
html.dark .tagline {
color: #b8cff5;
}
html.dark .nav-menu {
background-color: #1e3a6e;
}
html.dark .nav-menu a:hover {
background-color: #2a4a7a;
}
@media (min-width: 768px) {
html.dark .nav-menu a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
html.dark .version-line,
html.dark .bug-link {
color: #8ab4f8 !important;
}
/* ==========================================================================
4. Cards, grids, outputs
========================================================================== */
html.dark .service-card,
html.dark .service-btn {
background-color: var(--surface);
border-color: var(--border-strong);
box-shadow: 0 4px 16px var(--shadow);
}
html.dark .service-card:hover,
html.dark .service-btn:hover {
background-color: var(--surface-hover);
border-color: var(--primary-blue);
}
html.dark .refrigerant-switcher {
background: var(--surface);
border-color: var(--border-strong);
box-shadow: 0 2px 6px var(--shadow);
}
html.dark .ref-switcher-btn {
background: var(--input-bg);
border-color: var(--border-strong);
color: var(--text);
}
html.dark .ref-switcher-btn:hover {
background: var(--surface-hover);
}
html.dark .ref-switcher-chevron {
color: var(--primary-blue);
}
html.dark .ref-switcher-menu {
background: var(--surface-raised);
border-color: var(--border-strong);
box-shadow: 0 6px 16px var(--shadow);
}
html.dark .ref-switcher-item {
color: var(--text);
}
html.dark .ref-switcher-item:hover {
background: var(--surface-hover);
}
html.dark .ref-switcher-item.is-current {
background: var(--info-bg);
color: var(--primary-blue);
}
html.dark .output {
background: var(--surface);
border-color: var(--border-strong);
box-shadow: 0 6px 20px var(--shadow);
}
html.dark .content-box,
html.dark .login-box,
html.dark .cta-section {
background: var(--surface);
border-color: var(--border-strong);
box-shadow: 0 6px 20px var(--shadow);
}
html.dark .content-box h1,
html.dark .login-box h1 {
color: var(--primary-blue);
}
/* ==========================================================================
5. Forms & inputs
========================================================================== */
html.dark .form-group label,
html.dark .form-group .label {
color: var(--text);
}
html.dark .form-group input,
html.dark .form-group textarea,
html.dark .form-group select,
html.dark input,
html.dark textarea,
html.dark select {
background: var(--input-bg);
border-color: var(--border);
color: var(--text);
}
html.dark .form-group input:focus,
html.dark .form-group textarea:focus,
html.dark .form-group select:focus {
border-color: var(--primary-blue);
box-shadow: 0 0 0 3px rgba(107, 154, 240, 0.2);
}
html.dark .checkbox-group label {
color: var(--text);
}
html.dark .checkbox-group a,
html.dark .forgot-link,
html.dark .back-link a {
color: var(--primary-blue);
}
html.dark .forgot-link:hover,
html.dark .back-link a:hover {
color: #8ab4f8;
}
html.dark .message.error {
color: var(--danger);
}
html.dark .message.success {
color: var(--success);
}
/* ==========================================================================
6. Unit toggle & buttons
========================================================================== */
html.dark .unit-toggle-push {
background: var(--surface-raised);
border-color: var(--border-strong);
}
html.dark .unit-btn {
color: var(--text);
}
html.dark .unit-btn.active {
background: linear-gradient(135deg, #2a4a82, #1e3468) !important;
color: #e8edf4 !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
html.dark .big-cta-btn,
html.dark .btn,
html.dark .login-btn {
background: linear-gradient(135deg, #2a4a82, #1e3468) !important;
border: 1px solid #3d5f9a !important;
color: #e8edf4 !important;
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.35) !important;
}
html.dark .big-cta-btn:hover,
html.dark .btn:hover,
html.dark .login-btn:hover {
background: linear-gradient(135deg, #355f9e, #2a4a82) !important;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42) !important;
}
/* Inline blue overrides on buttons/links */
html.dark a.big-cta-btn[style*="background:#4c7be9"],
html.dark a.big-cta-btn[style*="background: #4c7be9"],
html.dark a.btn[style*="background:#4c7be9"],
html.dark a.btn[style*="background: #4c7be9"],
html.dark button.big-cta-btn[style*="background:#4c7be9"],
html.dark button.big-cta-btn[style*="background: #4c7be9"],
html.dark button.btn[style*="background:#4c7be9"],
html.dark button.btn[style*="background: #4c7be9"],
html.dark a[style*="background: #4c7be9"].btn,
html.dark a[style*="background:#4c7be9"].btn {
background: linear-gradient(135deg, #2a4a82, #1e3468) !important;
border-color: #3d5f9a !important;
}
/* Keep green/orange CTAs distinct in dark mode */
html.dark a.big-cta-btn[style*="background:#27ae60"],
html.dark a.big-cta-btn[style*="background: #27ae60"] {
background: #1a5c32 !important;
border-color: #2d8a4e !important;
}
html.dark a.big-cta-btn[style*="background:#d97706"],
html.dark a.big-cta-btn[style*="background: #d97706"] {
background: #92400e !important;
border-color: #b45309 !important;
}
/* Secondary / white buttons inside pages */
html.dark .heat-gain-page .stepper-nav button,
html.dark .heat-gain-calc-icon-btn,
html.dark .heat-gain-calc-btn {
background: var(--surface-raised);
color: var(--primary-blue);
border-color: var(--border-strong);
}
html.dark .heat-gain-page .stepper-nav button:disabled {
background: #2a3444;
color: #5c6b7f;
border-color: #3d4f63;
cursor: not-allowed;
opacity: 1;
}
html.dark .heat-gain-calc-btn.op {
background: var(--info-bg);
}
html.dark .heat-gain-calc-btn.eq {
background: var(--primary-blue);
color: #fff;
}
/* ==========================================================================
7. Footer
========================================================================== */
html.dark footer {
background: linear-gradient(to right, #0a0f16, #1a2d52);
}
/* ==========================================================================
8. Disclaimer & warnings
========================================================================== */
html.dark .disclaimer-warning {
background: var(--warning-bg);
border-color: var(--warning-border);
}
html.dark .disclaimer-warning strong {
color: var(--warning-text);
}
/* ==========================================================================
9. Heat gain calculator
========================================================================== */
html.dark .heat-gain-page .calc-switcher,
html.dark .heat-gain-page .calc-card {
background: var(--surface);
border-color: var(--border-strong);
}
html.dark .heat-gain-page .section-dropdown,
html.dark .heat-gain-page .calc-section input:not([type="checkbox"]),
html.dark .heat-gain-page .calc-section select {
background: var(--input-bg);
border-color: var(--border);
color: var(--text);
}
html.dark .heat-gain-hint,
html.dark .heat-gain-results-meta,
html.dark .heat-gain-note,
html.dark .heat-gain-calc-note {
color: var(--text-light);
}
html.dark .heat-gain-results-table th {
border-bottom-color: var(--primary-blue);
}
html.dark .heat-gain-results-table .total-row {
background: var(--info-bg);
}
html.dark .heat-gain-recommended {
background: var(--info-bg);
border-color: var(--primary-blue);
}
html.dark .heat-gain-warning {
background: var(--warning-bg);
border-color: var(--warning-border);
color: var(--warning-text);
}
html.dark .heat-gain-disclaimer {
background: var(--warning-bg);
border-color: var(--warning-border);
color: var(--warning-text);
}
html.dark .heat-gain-disclaimer a {
color: var(--accent-gold);
}
html.dark .heat-gain-error-box {
background: #2a1518;
border-color: var(--danger);
color: var(--danger);
}
html.dark .heat-gain-calc-modal {
background: rgba(0, 0, 0, 0.7);
}
html.dark .heat-gain-calc-panel {
background: var(--surface);
border-color: var(--primary-blue);
}
html.dark .heat-gain-calc-header {
background: var(--info-bg);
border-bottom-color: var(--primary-blue);
}
html.dark .heat-gain-calc-display {
background: var(--input-bg);
border-color: var(--border);
color: var(--text);
}
/* ==========================================================================
10. Diagnostic / refrigerant tool patterns
========================================================================== */
html.dark .diagnostic-table-wrapper {
background: var(--surface);
border-color: var(--border-strong);
box-shadow: 0 4px 14px var(--shadow);
}
html.dark .diagnostic-table {
color: var(--text);
}
html.dark .diagnostic-table tr {
border-bottom-color: var(--border);
}
html.dark .diagnostic-table .label-cell {
color: var(--text-light);
}
html.dark .diagnostic-table .input-cell input,
html.dark .diagnostic-table .input-cell select,
html.dark .diagnostic-table input,
html.dark .diagnostic-table select {
background: var(--input-bg);
border-color: var(--border);
color: var(--text);
}
html.dark .diagnostic-table td {
color: var(--text);
}
/* Run Diagnostic result panels */
html.dark .diag-status-good {
background: #000000 !important;
border: 3px solid #2a5c40 !important;
color: #9cb8a8 !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}
html.dark .diag-status-good span {
color: #7a9a88 !important;
}
html.dark .diag-panel-key {
background: var(--info-bg) !important;
border-color: var(--primary-blue) !important;
color: var(--text) !important;
}
html.dark .diag-panel-key strong,
html.dark .diag-panel-flow strong,
html.dark .diag-panel-flow .diag-flow-value {
color: var(--primary-blue) !important;
}
html.dark .diag-panel-flow {
background: var(--info-bg) !important;
border-color: var(--primary-blue) !important;
color: var(--text) !important;
}
html.dark .diag-panel-flow .diag-flow-sub,
html.dark .diag-muted {
color: var(--text-light) !important;
}
html.dark .diag-details-panel {
background: var(--surface-raised) !important;
border-color: var(--border) !important;
color: var(--text) !important;
}
html.dark .diag-details-panel h4 {
color: var(--text-light) !important;
}
html.dark .diag-advanced-panel {
background: var(--surface-raised) !important;
border-color: var(--primary-blue) !important;
color: var(--text) !important;
}
html.dark .diag-advanced-panel h3 {
color: var(--primary-blue) !important;
}
html.dark .diag-row-alt {
background: var(--surface-hover) !important;
}
html.dark .diag-row-alt-blue {
background: var(--info-bg) !important;
}
html.dark .diag-ready-msg {
color: var(--primary-blue) !important;
}
html.dark .diag-history-table th,
html.dark .diag-history-table td {
color: var(--text);
border-bottom-color: var(--border);
}
html.dark #output a {
color: var(--primary-blue);
}
html.dark .output.warning-box,
html.dark .warning-box {
background: #000000 !important;
border-color: #8b6914 !important;
border-left-color: #b8860b !important;
color: #e8e8e8 !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}
html.dark .output.warning-box h3,
html.dark .warning-box h3 {
color: #f5f5f5 !important;
}
html.dark .output.warning-box li,
html.dark .warning-box li {
color: #e8e8e8 !important;
}
html.dark .output.warning-box a,
html.dark .warning-box a {
color: #8ab4f8 !important;
}
html.dark .output.warning-box a:hover,
html.dark .warning-box a:hover {
color: #a5c8ff !important;
}
/* Loading / status banners */
html.dark [id$="-loading"] {
background: var(--warning-bg) !important;
border-color: var(--warning-border) !important;
color: var(--warning-text) !important;
}
/* Modals (refrigerant PT charts, isentropic, etc.) */
html.dark .modal {
background-color: rgba(0, 0, 0, 0.8) !important;
}
html.dark .modal-content {
background-color: var(--surface) !important;
color: var(--text);
box-shadow: 0 10px 40px var(--shadow);
}
html.dark .modal-close {
color: var(--text-light) !important;
}
html.dark .modal-close:hover {
color: var(--text) !important;
}
/* PT chart popup — top controls bar, footer bar, notes (inline light backgrounds) */
html.dark #pt-chart-modal h2 {
color: var(--text) !important;
}
html.dark #pt-chart-modal .modal-content > div[style*="background:#f8f9fa"],
html.dark #pt-chart-modal .modal-content > div[style*="background: #f8f9fa"] {
background: var(--surface-raised) !important;
}
html.dark #pt-chart-modal .modal-content > div[style*="background:#fff"],
html.dark #pt-chart-modal .modal-content > div[style*="background: #fff"] {
background: var(--surface) !important;
border-top-color: var(--border) !important;
}
html.dark #pt-chart-modal .modal-content > div[style*="border-top:2px solid"],
html.dark #pt-chart-modal .modal-content > div[style*="border-top: 2px solid"] {
border-top-color: var(--border-strong) !important;
}
html.dark #pt-chart-modal .modal-content > p {
color: var(--text-light) !important;
}
html.dark #pt-chart-modal #modal-unit-toggle,
html.dark #pt-chart-modal #modal-quick-jump,
html.dark #pt-chart-modal .control-select {
background: var(--input-bg) !important;
border-color: var(--border) !important;
color: var(--text) !important;
}
/* Standard dark PT table header — popup + standalone PT chart pages */
html.dark .refrigerant-header,
html.dark .refrigerant-header th,
html.dark thead.refrigerant-header,
html.dark thead.refrigerant-header th {
background: var(--surface-hover) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
/* Tooltip popup */
html.dark #tooltip-popup {
background: var(--surface-raised) !important;
color: var(--text) !important;
border-color: var(--border) !important;
box-shadow: 0 10px 25px var(--shadow);
}
html.dark .tooltip-abbr {
color: var(--text) !important;
}
html.dark .text-cool {
color: #6b9af0 !important;
}
html.dark .diag-review-panel {
background: var(--surface-raised) !important;
border-color: var(--border) !important;
color: var(--text) !important;
}
html.dark .diag-review-panel span {
color: var(--text-light) !important;
}
html.dark .r410a-refrigerant-switcher {
background: var(--surface-raised) !important;
border-color: var(--border) !important;
}
html.dark .r410a-page .calc-card {
background: var(--surface) !important;
}
html.dark .r410a-page .duct-validation-panel.is-error {
color: #fecaca !important;
background: #450a0a !important;
border-color: #ef4444 !important;
}
html.dark .r410a-page .duct-validation-panel.is-warning {
color: #fef08a !important;
background: #422006 !important;
border-color: #ca8a04 !important;
}
html.dark .r410a-page input.duct-field-error {
border-color: #f87171 !important;
box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.25) !important;
}
html.dark .r410a-page #sec-duct-input p.label.duct-label-next,
html.dark .r410a-page #sec-duct-input p.label.duct-label-next label,
html.dark .ref-calc-page #sec-airflow p.label.coil-label-next,
html.dark .ref-calc-page #sec-airflow p.label.coil-label-next label,
html.dark .ref-calc-page #sec-duct-input p.label.duct-label-next,
html.dark .ref-calc-page #sec-duct-input p.label.duct-label-next label {
color: #fff;
font-weight: 700;
}
html.dark .ref-calc-page .ref-calc-coil-divider {
border-top-color: #fff;
}
html.dark .ref-calc-page .ref-calc-compact-btn,
html.dark .ref-calc-page #action-buttons .ref-calc-compact-btn {
background: linear-gradient(135deg, #1a3568, #0f2347) !important;
color: #e8eef8 !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
html.dark .ref-calc-page .ref-calc-compact-btn:hover:not(:disabled),
html.dark .ref-calc-page #action-buttons .ref-calc-compact-btn:hover:not(:disabled) {
background: linear-gradient(135deg, #0f2347, #1a3568) !important;
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.45);
}
html.dark .r454b-page .calc-card {
background: var(--surface) !important;
}
html.dark .heat-gain-page .results-placeholder {
color: var(--text-light) !important;
}
html.dark #key-metrics-output a,
html.dark #refrigerant-output a,
html.dark #air-oil-output a,
html.dark #enthalpy-output a,
html.dark #vapor-perf-output a {
color: var(--primary-blue) !important;
}
html.dark .diag-modal-link {
color: var(--text);
}
html.dark .diag-modal-link:hover {
color: var(--primary-blue);
}
/* Overlay numeric pad — dark theme */
html.dark .phvac-numpad {
background: var(--surface-raised);
border-color: var(--border-strong);
}
html.dark .phvac-numpad-title {
background: var(--info-bg);
color: var(--primary-blue);
border-bottom-color: var(--border);
}
html.dark .phvac-numpad-display.phvac-numpad-invalid {
background: #450a0a;
color: #fecaca;
}
html.dark .phvac-numpad-display {
background: var(--surface);
color: var(--text);
border-bottom-color: var(--border);
}
html.dark .phvac-numpad-key {
background: var(--surface);
color: var(--text);
border-color: var(--border);
}
html.dark .phvac-numpad-key.is-pressed,
html.dark .phvac-numpad-key:active {
background: var(--surface-hover);
}
html.dark .phvac-numpad-key-muted {
background: var(--surface-hover);
}
html.dark .phvac-numpad-key-muted.is-pressed,
html.dark .phvac-numpad-key-muted:active {
background: var(--border);
}
/* Diagnostic output — common generated result blocks */
html.dark #output [style*="background:#d1fae5"],
html.dark #output [style*="background: #d1fae5"] {
background: #000000 !important;
border-color: #2a5c40 !important;
color: #9cb8a8 !important;
}
html.dark #output [style*="background:#f0f9ff"],
html.dark #output [style*="background: #f0f9ff"],
html.dark #output [style*="background:#e6f0ff"],
html.dark #output [style*="background: #e6f0ff"] {
background: var(--info-bg) !important;
border-color: var(--primary-blue) !important;
color: var(--text) !important;
}
html.dark #output [style*="background:#f8fafc"],
html.dark #output [style*="background: #f8fafc"],
html.dark #output [style*="background:#f8f9ff"],
html.dark #output [style*="background: #f8f9ff"] {
background: var(--surface-raised) !important;
border-color: var(--border) !important;
color: var(--text) !important;
}
html.dark #output [style*="background:#f0f0f4"],
html.dark #output [style*="background: #f0f0f4"],
html.dark #output [style*="background:#f0f4ff"],
html.dark #output [style*="background: #f0f4ff"] {
background: var(--surface-hover) !important;
}
html.dark #output [style*="color:#1e40af"],
html.dark #output [style*="color: #1e40af"],
html.dark #output [style*="color:#4c7be9"],
html.dark #output [style*="color: #4c7be9"] {
color: var(--primary-blue) !important;
}
html.dark #output [style*="color:#065f46"] {
color: #a7f3d0 !important;
}
html.dark #output [style*="color:#334155"] {
color: var(--text-light) !important;
}
html.dark #history-output h3 {
color: var(--primary-blue) !important;
}
html.dark #history-output [style*="color:#777"],
html.dark #history-output [style*="color:#555"] {
color: var(--text-light) !important;
}
/* PT chart table rows (popup modal body) */
html.dark #modal-pt-body tr[style*="background: #ffffff"],
html.dark #modal-pt-body tr[style*="background:#ffffff"],
html.dark #modal-pt-body tr[style*="background: #e8e8e8"],
html.dark #modal-pt-body tr[style*="background:#e8e8e8"] {
background: var(--surface) !important;
}
html.dark #modal-pt-body tr[style*="background: #f0f4ff"],
html.dark #modal-pt-body tr[style*="background:#f0f4ff"] {
background: var(--surface-raised) !important;
}
html.dark #modal-pt-body td,
html.dark #modal-pt-body th {
border-bottom-color: var(--border) !important;
color: var(--text) !important;
}
/* Standalone PT chart pages — scrollable table panel */
html.dark .content-wide div[style*="overflow-y:auto"][style*="background:#f8f9fa"],
html.dark .content-wide div[style*="overflow: auto"][style*="background:#f8f9fa"],
html.dark .content-wide div[style*="overflow-y:auto"][style*="background: #f8f9fa"],
html.dark .content-wide div[style*="overflow: auto"][style*="background: #f8f9fa"] {
background: var(--surface-raised) !important;
border-color: var(--border-strong) !important;
}
html.dark #pt-body tr[style*="background:#ffffff"],
html.dark #pt-body tr[style*="background: #ffffff"],
html.dark #pt-body tr[style*="background:#e8e8e8"],
html.dark #pt-body tr[style*="background: #e8e8e8"] {
background: var(--surface) !important;
}
html.dark #pt-body tr[style*="background:#f0f4ff"],
html.dark #pt-body tr[style*="background: #f0f4ff"] {
background: var(--surface-raised) !important;
}
html.dark #pt-body td {
border-bottom-color: var(--border) !important;
color: var(--text) !important;
}
/* ==========================================================================
11. Bug summary pages (inline styles in summaries)
========================================================================== */
html.dark .summary-container h1 {
color: var(--primary-blue) !important;
}
html.dark .fix-section h2 {
color: var(--primary-blue) !important;
border-bottom-color: var(--border) !important;
}
html.dark .fix-item {
background: var(--surface) !important;
border-color: var(--border) !important;
}
html.dark .fix-item strong {
color: #8ab4f8 !important;
}
html.dark .file-link {
color: var(--primary-blue) !important;
}
html.dark .status-fixed,
html.dark .status-fix {
background: #152a20;
color: #a7f3d0;
}
html.dark .status-restored {
background: #1a2040;
color: #a5b4fc;
}
html.dark .status-new,
html.dark .status-standardized {
background: var(--info-bg);
color: #8ab4f8;
}
html.dark .status-improved {
background: var(--warning-bg);
color: var(--warning-text);
}
/* ==========================================================================
12. Auth status & header links
========================================================================== */
html.dark .auth-separator {
color: var(--text-light);
}
html.dark .auth-email {
color: var(--text-light);
}
html.dark .header-link-members,
html.dark .auth-link.signin,
html.dark .auth-link.members {
color: #4ade80 !important;
}
html.dark .header-link-donate {
color: var(--accent-gold) !important;
}
html.dark .auth-link.logout {
color: var(--danger) !important;
}
html.dark .auth-link.signup {
color: var(--primary-blue) !important;
}
/* Members area user bar */
html.dark .user-info {
background: var(--info-bg) !important;
color: var(--text);
}
html.dark .welcome {
color: var(--success) !important;
}
/* ==========================================================================
13. Dark mode toggle button (for future header placement)
========================================================================== */
.dark-mode-toggle {
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #e8edf4;
border-radius: 6px;
padding: 0.35rem 0.65rem;
font-size: 0.85rem;
cursor: pointer;
line-height: 1.2;
transition: background 0.2s ease;
}
.dark-mode-toggle:hover {
background: rgba(255, 255, 255, 0.2);
}
html.dark .dark-mode-toggle {
background: rgba(255, 255, 255, 0.08);
}
/* Floating toggle (FAB) removed — only header toggle is used now */
/* Index.htm — dark-mode-only home page tweaks */
.home-chinook-quick-short {
display: none;
}
html.dark .home-signup-btn {
background: linear-gradient(135deg, var(--dark-blue), var(--primary-blue)) !important;
box-shadow: 0 5px 18px rgba(13, 21, 32, 0.5);
}
html.dark .home-signup-btn:hover {
background: linear-gradient(135deg, #1a2840, var(--primary-blue)) !important;
}
html.dark .home-login-link {
color: rgba(255, 255, 255, 0.65) !important;
}
html.dark .home-chinook-nav {
color: var(--primary-blue) !important;
}
html.dark .home-chinook-quick-long {
display: none;
}
html.dark .home-chinook-quick-short {
display: inline;
}
html.dark .home-chinook-quick {
background: #4c7be9 !important;
box-shadow: 0 5px 18px rgba(76, 123, 233, 0.35);
}
html.dark .home-chinook-quick:hover {
background: #3a66c4 !important;
}
html.dark h3.home-tools-heading {
text-align: center;
color: rgba(255, 255, 255, 0.65) !important;
}
/* HVAC Lens product blurb (index hero) */
html.dark .home-lens-blurb {
background: #1a2540;
border-color: #334155;
}
html.dark .home-lens-blurb-title {
color: #93c5fd;
}
html.dark .home-lens-blurb-lead {
color: #cbd5e1;
}
html.dark .home-lens-blurb-list {
color: #e2e8f0;
}
html.dark .home-lens-blurb-list li::marker {
color: #6b9af5;
}
/* Index.htm hero — inline style overrides */
html.dark h2[style*="color:#4c7be9"],
html.dark h2[style*="color: #4c7be9"] {
color: var(--primary-blue) !important;
}
html.dark h3[style*="accent-gold"]:not(.home-tools-heading) {
color: var(--accent-gold) !important;
}
html.dark p[style*="color:#444"],
html.dark p[style*="color: #444"],
html.dark p[style*="color:#666"],
html.dark p[style*="color: #666"],
html.dark p[style*="color:#555"],
html.dark p[style*="color: #555"] {
color: var(--text-light) !important;
}
html.dark a[style*="color:#27ae60"] {
color: #4ade80 !important;
}
/* Auto mode: variable overrides above apply via @media; mirror index.htm home tweaks when OS is dark. */
@media (prefers-color-scheme: dark) {
html.dark-auto:not(.dark):not(.light) body {
background-color: var(--light-bg);
color: var(--text);
}
html.dark-auto:not(.dark):not(.light) .home-signup-btn {
background: linear-gradient(135deg, var(--dark-blue), var(--primary-blue)) !important;
box-shadow: 0 5px 18px rgba(13, 21, 32, 0.5);
}
html.dark-auto:not(.dark):not(.light) .home-signup-btn:hover {
background: linear-gradient(135deg, #1a2840, var(--primary-blue)) !important;
}
html.dark-auto:not(.dark):not(.light) .home-login-link {
color: rgba(255, 255, 255, 0.65) !important;
}
html.dark-auto:not(.dark):not(.light) .home-chinook-nav {
color: var(--primary-blue) !important;
}
html.dark-auto:not(.dark):not(.light) .home-chinook-quick {
background: #4c7be9 !important;
box-shadow: 0 5px 18px rgba(76, 123, 233, 0.35);
}
html.dark-auto:not(.dark):not(.light) .home-chinook-quick:hover {
background: #3a66c4 !important;
}
html.dark-auto:not(.dark):not(.light) .home-chinook-quick-long {
display: none;
}
html.dark-auto:not(.dark):not(.light) .home-chinook-quick-short {
display: inline;
}
html.dark-auto:not(.dark):not(.light) h3.home-tools-heading {
text-align: center;
color: rgba(255, 255, 255, 0.65) !important;
}
}
/* ==========================================================================
NRE explanation pages
========================================================================== */
html.dark .nre-back-link {
background: var(--surface-raised);
color: var(--primary-blue);
border-color: var(--primary-blue);
}
html.dark .nre-formula {
background: var(--info-bg);
border-left-color: var(--primary-blue);
color: var(--text);
}
html.dark .nre-table thead tr {
background: var(--surface-hover);
}
html.dark .nre-table th,
html.dark .nre-table td {
color: var(--text);
border-color: var(--border);
}
html.dark .nre-table tbody tr {
background: var(--surface);
}
html.dark .nre-table tbody tr:nth-child(even) {
background: var(--surface-raised);
}
html.dark .nre-tip {
background: var(--info-bg);
border: 1px solid var(--info-border);
color: var(--text);
}
html.dark .nre-note {
color: var(--text-light);
}
html.dark .log-actions {
background: var(--surface-raised);
border-color: var(--border);
}
html.dark .log-actions-title {
color: var(--text);
}
html.dark .log-actions-hint,
html.dark .log-page-intro {
color: var(--text-light);
}
html.dark .log-title-label {
color: var(--text);
}
html.dark .log-title-input {
background: var(--surface);
border-color: var(--border);
color: var(--text);
}
html.dark .my-logs-table th,
html.dark .my-logs-table td {
border-color: var(--border);
color: var(--text);
}
html.dark .my-logs-table thead th {
background: var(--surface-hover);
}
html.dark .my-logs-table tbody tr:nth-child(even) {
background: var(--surface-raised);
}
html.dark .log-page-empty {
background: var(--surface-raised);
border-color: var(--border);
color: var(--text-light);
}
/* ==========================================================================
Sizing2 legacy (elecsize*.htm) — utility-class overrides
========================================================================== */
html.dark body.bg-gray-50 {
background: var(--light-bg) !important;
color: var(--text);
}
html.dark .bg-gray-50 {
background: var(--surface) !important;
}
html.dark .text-emerald-700,
html.dark .text-emerald-600 {
color: #6ee7b7 !important;
}
html.dark .tab-button {
color: var(--text-light);
border-color: var(--border) !important;
}
html.dark .tab-button.border-emerald-600 {
border-color: #10b981 !important;
color: #6ee7b7 !important;
}
html.dark .hover\:border-gray-300:hover {
border-color: var(--border) !important;
}
/* ==========================================================================
Calculator navigation switchers & inline-white dropdowns
========================================================================== */
/* Electrical + HVAC nav switchers (inline background:white beats html.dark select) */
html.dark select[onchange*="window.location"] {
background: var(--input-bg) !important;
border-color: var(--border-strong) !important;
color: var(--text) !important;
}
/* Wrapper panels around nav switchers */
html.dark div:has(> select[onchange*="window.location"]),
html.dark div:has(> strong + select[onchange*="window.location"]) {
background: var(--surface) !important;
border-color: var(--border-strong) !important;
}
/* Any remaining inline-white selects (PT pages, etc.) */
html.dark select[style*="background: white"],
html.dark select[style*="background:white"],
html.dark select[style*="background: #fff"],
html.dark select[style*="background:#fff"] {
background: var(--input-bg) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
/* Standalone PT chart controls (page-local .control-select sets white) */
html.dark .control-select,
html.dark #quick-jump,
html.dark #increment-select,
html.dark #quick-load-select,
html.dark #modal-quick-jump {
background: var(--input-bg) !important;
border-color: var(--border) !important;
color: var(--text) !important;
}
/* Calculator card panels with inline white backgrounds */
html.dark div[style*="background:white"][style*="border:3px solid"],
html.dark div[style*="background: white"][style*="border:3px solid"],
html.dark div[style*="background:white"][style*="border: 3px solid"],
html.dark div[style*="background: white"][style*="border: 3px solid"] {
background: var(--surface) !important;
border-color: var(--border-strong) !important;
box-shadow: 0 6px 20px var(--shadow) !important;
}
/* Switcher wrapper boxes (1px/2px border, white bg) */
html.dark div[style*="background: white"][style*="border: 2px solid"],
html.dark div[style*="background:white"][style*="border: 2px solid"],
html.dark div[style*="background: white"][style*="border:2px solid"],
html.dark div[style*="background:white"][style*="border:2px solid"] {
background: var(--surface) !important;
border-color: var(--border-strong) !important;
}
/* Light subtitle text near switchers */
html.dark p[style*="color:#555"],
html.dark p[style*="color: #555"] {
color: var(--text-light) !important;
}