/* ═══════════════════════════════════════════════════════════════════ MSI Mechanical Services — Color Scheme System 16+ preloaded themes. Apply via: Default (Iron Forge) lives in v2.css :root — no data-theme needed. Preview any theme: /?theme=slug-name ═══════════════════════════════════════════════════════════════════ */ /* ── 1. Iron Forge (DEFAULT — defined in v2.css :root) ─────────── */ /* MSI red + orange industrial. No override needed. */ /* ── 2. Admiral's Deck — Navy + Gold trust-heavy ───────────────── */ [data-theme="admirals-deck"] { --accent: #E8A317; --accent-hover: #C78B0E; --accent-glow: rgba(232, 163, 23, 0.15); --accent-secondary: #F5C94E; --bg-primary: #F8F9FA; --bg-surface: #E9ECEF; --bg-dark: #0F2240; --bg-darker: #091631; --steel: #1B365D; --text-primary: #212529; --text-secondary: #495057; --text-muted: #6C757D; --text-light: #ffffff; --text-light-muted: rgba(224, 230, 237, 0.7); --border: #CED4DA; --border-dark: rgba(255, 255, 255, 0.1); --success: #27ae60; --error: #C0392B; } /* ── 3. Copper Ridge — Teal + burnt copper, bold ───────────────── */ [data-theme="copper-ridge"] { --accent: #9f1a1a; --accent-hover: #7d1414; --accent-glow: rgba(159, 26, 26, 0.15); --accent-secondary: #e58406; --bg-primary: #F4F6F5; --bg-surface: #E8EDEB; --bg-dark: #2c3e50; --bg-darker: #1e2d3d; --steel: #537ea2; --text-primary: #1C2833; --text-secondary: #4A5568; --text-muted: #718096; --text-light: #ffffff; --text-light-muted: rgba(255, 255, 255, 0.7); --border: #D5DDD9; --border-dark: rgba(66, 165, 147, 0.15); --success: #42a593; --error: #9f1a1a; } /* ── 4. Midnight Oil — Deep charcoal + amber ───────────────────── */ [data-theme="midnight-oil"] { --accent: #D4A017; --accent-hover: #B8890F; --accent-glow: rgba(212, 160, 23, 0.15); --accent-secondary: #F0C040; --bg-primary: #F5F5F4; --bg-surface: #E7E5E4; --bg-dark: #1C1C1E; --bg-darker: #111111; --steel: #3A3A3C; --text-primary: #1C1C1E; --text-secondary: #545456; --text-muted: #78787A; --text-light: #ffffff; --text-light-muted: rgba(255, 255, 255, 0.65); --border: #D1D1D1; --border-dark: rgba(255, 255, 255, 0.08); --success: #34A853; --error: #D93025; } /* ── 5. Northern Grit — Forest green + slate ───────────────────── */ [data-theme="northern-grit"] { --accent: #2D6A4F; --accent-hover: #1B4332; --accent-glow: rgba(45, 106, 79, 0.15); --accent-secondary: #52B788; --bg-primary: #F5F7F5; --bg-surface: #E8ECE8; --bg-dark: #1B2A2A; --bg-darker: #111E1E; --steel: #2D3E3E; --text-primary: #1B2A2A; --text-secondary: #4A5E5E; --text-muted: #6B7F7F; --text-light: #ffffff; --text-light-muted: rgba(255, 255, 255, 0.7); --border: #C8D6C8; --border-dark: rgba(82, 183, 136, 0.1); --success: #2D6A4F; --error: #D64045; } /* ── 6. Steel Canyon — Cool gray + electric blue ──────────────── */ [data-theme="steel-canyon"] { --accent: #2563EB; --accent-hover: #1D4ED8; --accent-glow: rgba(37, 99, 235, 0.15); --accent-secondary: #60A5FA; --bg-primary: #F8FAFC; --bg-surface: #E2E8F0; --bg-dark: #0F172A; --bg-darker: #080E1A; --steel: #1E293B; --text-primary: #0F172A; --text-secondary: #475569; --text-muted: #64748B; --text-light: #ffffff; --text-light-muted: rgba(255, 255, 255, 0.7); --border: #CBD5E1; --border-dark: rgba(96, 165, 250, 0.1); --success: #22C55E; --error: #EF4444; } /* ── 7. Ember & Ash — Warm charcoal + burnt orange ─────────────── */ [data-theme="ember-ash"] { --accent: #E85D04; --accent-hover: #C44D03; --accent-glow: rgba(232, 93, 4, 0.15); --accent-secondary: #FAA307; --bg-primary: #FAF8F6; --bg-surface: #EDEBE8; --bg-dark: #1A1A1A; --bg-darker: #0F0F0F; --steel: #3D3D3D; --text-primary: #1A1A1A; --text-secondary: #525252; --text-muted: #737373; --text-light: #ffffff; --text-light-muted: rgba(255, 255, 255, 0.65); --border: #D6D3D1; --border-dark: rgba(250, 163, 7, 0.1); --success: #16A34A; --error: #DC2626; } /* ── 8. Boreal Dawn — Muted sage + warm tan ────────────────────── */ [data-theme="boreal-dawn"] { --accent: #8B7355; --accent-hover: #6F5B42; --accent-glow: rgba(139, 115, 85, 0.15); --accent-secondary: #A8956D; --bg-primary: #F9F7F4; --bg-surface: #EDE9E3; --bg-dark: #2C3E2C; --bg-darker: #1E2E1E; --steel: #4A5D4A; --text-primary: #2C3E2C; --text-secondary: #5A6B5A; --text-muted: #7A8B7A; --text-light: #F9F7F4; --text-light-muted: rgba(249, 247, 244, 0.7); --border: #D4CEBC; --border-dark: rgba(168, 149, 109, 0.1); --success: #5A8A5A; --error: #C0392B; } /* ── 9. Voltage — Dark + electric green, techy ─────────────────── */ [data-theme="voltage"] { --accent: #10B981; --accent-hover: #059669; --accent-glow: rgba(16, 185, 129, 0.15); --accent-secondary: #34D399; --bg-primary: #F0FDF4; --bg-surface: #DCFCE7; --bg-dark: #0A0A0A; --bg-darker: #050505; --steel: #1A1A1A; --text-primary: #0A0A0A; --text-secondary: #3F3F46; --text-muted: #71717A; --text-light: #F0FDF4; --text-light-muted: rgba(240, 253, 244, 0.7); --border: #BBF7D0; --border-dark: rgba(16, 185, 129, 0.12); --success: #10B981; --error: #F43F5E; } /* ── 10. Rust Belt — Industrial rust + concrete ────────────────── */ [data-theme="rust-belt"] { --accent: #B7410E; --accent-hover: #922F07; --accent-glow: rgba(183, 65, 14, 0.15); --accent-secondary: #D97706; --bg-primary: #F7F5F3; --bg-surface: #EDEAE6; --bg-dark: #2A2A2A; --bg-darker: #1A1A1A; --steel: #44403C; --text-primary: #292524; --text-secondary: #57534E; --text-muted: #78716C; --text-light: #ffffff; --text-light-muted: rgba(255, 255, 255, 0.65); --border: #D6D3D1; --border-dark: rgba(217, 119, 6, 0.1); --success: #65A30D; --error: #B7410E; } /* ── 11. Polar Night — Arctic blue-gray + icy white ────────────── */ [data-theme="polar-night"] { --accent: #4B6C8A; --accent-hover: #3A5670; --accent-glow: rgba(75, 108, 138, 0.15); --accent-secondary: #7CA5C4; --bg-primary: #F8FAFB; --bg-surface: #EBF0F4; --bg-dark: #1E293B; --bg-darker: #0F172A; --steel: #334155; --text-primary: #1E293B; --text-secondary: #475569; --text-muted: #94A3B8; --text-light: #F1F5F9; --text-light-muted: rgba(241, 245, 249, 0.7); --border: #CBD5E1; --border-dark: rgba(124, 165, 196, 0.1); --success: #0EA5E9; --error: #E11D48; } /* ── 12. Black Gold — Pure black + gold luxe ───────────────────── */ [data-theme="black-gold"] { --accent: #C9A227; --accent-hover: #A8871E; --accent-glow: rgba(201, 162, 39, 0.15); --accent-secondary: #E4C04A; --bg-primary: #FAFAF5; --bg-surface: #F0EFE7; --bg-dark: #0D0D0D; --bg-darker: #050505; --steel: #1A1A1A; --text-primary: #0D0D0D; --text-secondary: #404040; --text-muted: #737373; --text-light: #FAFAF5; --text-light-muted: rgba(250, 250, 245, 0.7); --border: #D4D4C8; --border-dark: rgba(201, 162, 39, 0.1); --success: #4ADE80; --error: #F87171; } /* ── 13. Burnt Harvest — Warm baked peaches, earthy heat ───────── */ [data-theme="burnt-harvest"] { --accent: #d76528; --accent-hover: #b85420; --accent-glow: rgba(215, 101, 40, 0.15); --accent-secondary: #bf872f; --bg-primary: #FBF7F3; --bg-surface: #F0E8DE; --bg-dark: #362114; --bg-darker: #221509; --steel: #5C3A22; --text-primary: #362114; --text-secondary: #5C4033; --text-muted: #8B7060; --text-light: #FBF7F3; --text-light-muted: rgba(251, 247, 243, 0.7); --border: #DDD0C0; --border-dark: rgba(191, 135, 47, 0.12); --success: #bf872f; --error: #ff5656; } /* ── 14. Golden Hour — Warm amber + sky blue, sunset vibes ─────── */ [data-theme="golden-hour"] { --accent: #c97a52; --accent-hover: #a86340; --accent-glow: rgba(201, 122, 82, 0.15); --accent-secondary: #f4a261; --bg-primary: #FFFDF8; --bg-surface: #F5F0E5; --bg-dark: #3D3025; --bg-darker: #2A2018; --steel: #6B5A4A; --text-primary: #3D3025; --text-secondary: #6B5A4A; --text-muted: #aaaaaa; --text-light: #FFFDF8; --text-light-muted: rgba(255, 253, 248, 0.7); --border: #E5DCC8; --border-dark: rgba(244, 162, 97, 0.12); --success: #aee3f5; --error: #c97a52; } /* ── 15. Neon Forge — Neon candy corn, fire + black ────────────── */ [data-theme="neon-forge"] { --accent: #ff0d0d; --accent-hover: #cc0a0a; --accent-glow: rgba(255, 13, 13, 0.2); --accent-secondary: #ff8a0d; --bg-primary: #FFFCF5; --bg-surface: #FFF3D6; --bg-dark: #1f1c09; --bg-darker: #110F05; --steel: #3D3810; --text-primary: #1f1c09; --text-secondary: #4A4520; --text-muted: #7A7450; --text-light: #ffeab1; --text-light-muted: rgba(255, 234, 177, 0.7); --border: #E8DDB0; --border-dark: rgba(255, 194, 13, 0.12); --success: #ffc20d; --error: #ff0d0d; } /* ── 16. Web Slinger — Bold red + black, high contrast hero ────── */ [data-theme="web-slinger"] { --accent: #fe2826; --accent-hover: #7e0001; --accent-glow: rgba(254, 40, 38, 0.2); --accent-secondary: #a0a0a0; --bg-primary: #F8F8F8; --bg-surface: #ECECEC; --bg-dark: #030303; --bg-darker: #000000; --steel: #1A1A1A; --text-primary: #030303; --text-secondary: #404040; --text-muted: #a0a0a0; --text-light: #ffffff; --text-light-muted: rgba(255, 255, 255, 0.7); --border: #D4D4D4; --border-dark: rgba(254, 40, 38, 0.1); --success: #22C55E; --error: #fe2826; } /* ═══════════════════════════════════════════════════════════════════ DARK MODE — applies on top of any active palette Activated via: (toggle) or OS preference ═══════════════════════════════════════════════════════════════════ */ /* Auto-detect OS dark mode preference (when no explicit toggle stored) */ @media (prefers-color-scheme: dark) { html:not([data-mode="light"]) { --bg-primary: #1a1a2e; --bg-surface: #222240; --bg-dark: #12121f; --bg-darker: #0a0a14; --bg-dark-surface: #1e1e3a; --bg-card: #222240; --bg-card-hover: #2a2a4a; --bg-input: #1e1e3a; --text-primary: #e2e8f0; --text-secondary: #a0aec0; --text-muted: #718096; --border: #2d2d4a; --border-light: #3d3d5a; --border-dark: rgba(255, 255, 255, 0.08); --gradient-card: linear-gradient(145deg, #222240 0%, #1e1e3a 100%); color-scheme: dark; } } /* Smooth transition for all color-driven properties */ html[data-mode="dark"] *, html[data-mode="dark"] *::before, html[data-mode="dark"] *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* Core dark overrides — swap light surfaces to dark, dark surfaces stay */ html[data-mode="dark"] { --bg-primary: #1a1a2e; --bg-surface: #222240; --bg-dark: #12121f; --bg-darker: #0a0a14; --bg-dark-surface: #1e1e3a; --bg-card: #222240; --bg-card-hover: #2a2a4a; --bg-input: #1e1e3a; --text-primary: #e2e8f0; --text-secondary: #a0aec0; --text-muted: #718096; --border: #2d2d4a; --border-light: #3d3d5a; --border-dark: rgba(255, 255, 255, 0.08); --gradient-card: linear-gradient(145deg, #222240 0%, #1e1e3a 100%); color-scheme: dark; } /* Cards, badges, form inputs — surfaces that use bg-primary */ html[data-mode="dark"] .service-card, html[data-mode="dark"] .industry-card, html[data-mode="dark"] .cert-card, html[data-mode="dark"] .client-badge { background: var(--bg-surface); border-color: var(--border); } html[data-mode="dark"] .service-card:hover, html[data-mode="dark"] .industry-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } /* Trust bar */ html[data-mode="dark"] .trust-bar { background: var(--bg-surface); border-bottom-color: var(--border); } /* Section overrides — light sections become dark */ html[data-mode="dark"] .section--light { background: var(--bg-dark); color: var(--text-primary); } html[data-mode="dark"] .section--light .section__header .label { color: var(--accent); } html[data-mode="dark"] .section--light .section__header p { color: var(--text-secondary); } html[data-mode="dark"] .section--white { background: var(--bg-surface); color: var(--text-primary); } /* Nav (Design A — style.css) */ html[data-mode="dark"] .nav { background: rgba(26, 26, 46, 0.95); border-bottom-color: var(--border); } html[data-mode="dark"] .nav__link { color: var(--text-secondary); } html[data-mode="dark"] .nav__link:hover, html[data-mode="dark"] .nav__link--active { color: #fff; } html[data-mode="dark"] .nav__logo-text { color: #e2e8f0; } html[data-mode="dark"] .nav__toggle { color: #e2e8f0; } /* Nav (Design B) */ html[data-mode="dark"] .nav-b { background: rgba(26, 26, 46, 0.98); } html[data-mode="dark"] .nav-b__top-bar { background: rgba(18, 18, 31, 0.95); border-bottom-color: var(--border); } html[data-mode="dark"] .nav-b__link { color: var(--text-secondary); } html[data-mode="dark"] .nav-b__link:hover, html[data-mode="dark"] .nav-b__link--active { color: #fff; } /* Nav (Design C) */ html[data-mode="dark"] .nav-c { background: rgba(26, 26, 46, 0.98); } html[data-mode="dark"] .nav-c__link { color: var(--text-secondary); } html[data-mode="dark"] .nav-c__link:hover, html[data-mode="dark"] .nav-c__link--active { color: #fff; } /* Nav (Authority layout) */ html[data-mode="dark"] .nav-a { background-color: var(--bg-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } html[data-mode="dark"] .nav-a__link { color: var(--text-secondary); } html[data-mode="dark"] .nav-a__link:hover, html[data-mode="dark"] .nav-a__link--active { color: #fff; } /* Portal login link */ html[data-mode="dark"] .portal-login-link { background: rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.12); } /* Footer — already dark, just ensure consistency */ html[data-mode="dark"] .footer { background: var(--bg-darker); border-top-color: var(--border); } /* Cert card logo images — give light background so logos stay visible on dark bg */ html[data-mode="dark"] .cert-card__logo { background: rgba(255, 255, 255, 0.92); border-radius: var(--radius-md, 8px); padding: 12px 16px; display: inline-block; } html[data-mode="dark"] .cert-card__logo img, html[data-mode="dark"] .trust-bar__logo { filter: none; } /* Client marquee text */ html[data-mode="dark"] .logo-marquee__text { color: var(--text-secondary); } /* Sidenav label background */ html[data-mode="dark"] .sidenav__label { background: rgba(10, 10, 20, 0.9); } /* ── Dark Mode Toggle Button ──────────────────────────────────────── */ .dark-toggle { position: fixed; top: 16px; right: 160px; z-index: 1001; width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: rgba(255, 255, 255, 0.7); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); padding: 0; } .dark-toggle:hover { color: #fff; background: rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.25); } .dark-toggle svg { width: 18px; height: 18px; transition: transform 0.3s ease; } .dark-toggle:hover svg { transform: rotate(15deg); } /* When on a light section background (index.html scroll spy) */ .section-light-active .dark-toggle { background: rgba(255, 255, 255, 0.8); border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.6); } .section-light-active .dark-toggle:hover { background: rgba(255, 255, 255, 0.95); color: rgba(0, 0, 0, 0.8); } /* Dark mode active — override light-section adaptation */ html[data-mode="dark"] .dark-toggle { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.7); } html[data-mode="dark"] .dark-toggle:hover { background: rgba(255, 255, 255, 0.15); color: #fff; } /* Nav-inline variant for multi-page templates */ .dark-toggle--nav { position: static; width: 32px; height: 32px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: none; -webkit-backdrop-filter: none; } .dark-toggle--nav:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); } /* Nav A (light background nav) */ .nav .dark-toggle--nav { border-color: var(--border); color: var(--text-secondary); } .nav .dark-toggle--nav:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); } html[data-mode="dark"] .nav .dark-toggle--nav { border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.7); } html[data-mode="dark"] .nav .dark-toggle--nav:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; background: rgba(255, 255, 255, 0.08); } /* Authority layout — tighter positioning */ [data-layout="authority"] .top-actions { top: 8px; right: 12px; } [data-layout="authority"] .dark-toggle:not(.dark-toggle--nav):not(.top-actions .dark-toggle) { top: 8px; right: 140px; } /* When inside .top-actions container, don't use fixed positioning */ .top-actions .dark-toggle { position: static; z-index: auto; } /* Responsive — move fixed toggle closer on small screens (standalone only) */ @media (max-width: 768px) { .dark-toggle:not(.top-actions .dark-toggle) { top: 12px; right: 56px; width: 32px; height: 32px; } .dark-toggle:not(.top-actions .dark-toggle) svg { width: 16px; height: 16px; } .top-actions .dark-toggle { width: 32px; height: 32px; } .top-actions .dark-toggle svg { width: 16px; height: 16px; } } @media (max-width: 480px) { .dark-toggle:not(.top-actions .dark-toggle) { top: 10px; right: 56px; width: 36px; height: 36px; } .top-actions .dark-toggle { width: 36px; height: 36px; } }