/* ═══════════════════════════════════════════════════════════════════════════════ Tux Software — Theme System Defines dark and light palettes via CSS custom properties. Applied by setting data-theme="dark"|"light" on . ═══════════════════════════════════════════════════════════════════════════════ */ /* ── Dark theme (default) ───────────────────────────────────────────────────── */ :root, :root[data-theme="dark"] { color-scheme: dark; /* Semantic tokens */ --background: #0A0A0A; --surface: #111111; --surface-raised: #161616; --text: #FFFFFF; --text-muted: #9CA3AF; --accent: #DC2626; --accent-dark: #B91C1C; --border: #222222; --border-soft: #2E2E2E; --nav-background: rgba(10, 10, 10, 0.95); --nav-text: #FFFFFF; /* Override structural palette vars so all existing component CSS responds */ --clr-black: #0A0A0A; --clr-dark: #111111; --clr-card: #161616; --clr-border: #222222; --clr-border-light: #2E2E2E; --clr-white: #FFFFFF; --clr-gray: #9CA3AF; --clr-gray-mid: #6B7280; /* Shadows */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2); --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(220, 38, 38, 0.18); } /* ── Light theme ──────────────────────────────────────────────────────────────── TEMPORARILY DISABLED — site is locked to dark mode. To re-enable: remove the opening comment block marker below and the closing marker at the end of this section, restore App.razor init script, and uncomment in NavBar.razor. ─────────────────────────────────────────────────────────────────────────── */ /* :root[data-theme="light"] { color-scheme: light; /* Semantic tokens */ --background: #FFFFFF; --surface: #F5F5F5; --surface-raised: #FFFFFF; --text: #111111; --text-muted: #6B7280; --accent: #DC2626; --accent-dark: #B91C1C; --border: #E5E7EB; --border-soft: #D1D5DB; --nav-background: rgba(255, 255, 255, 0.95); --nav-text: #111111; /* Invert structural palette so component CSS flips automatically */ --clr-black: #FFFFFF; --clr-dark: #F5F5F5; --clr-card: #FFFFFF; --clr-border: #E5E7EB; --clr-border-light: #D1D5DB; --clr-white: #111111; /* text colour in light mode */ --clr-off-white: #1F2937; /* body text on cards (testimonial quote, form labels) */ --clr-gray: #6B7280; --clr-gray-mid: #4B5563; /* Softer shadows on light backgrounds */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04); --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 16px 48px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(220, 38, 38, 0.15); } */ /* END DISABLED LIGHT THEME */ /* ── System preference fallback — DISABLED (site locked to dark mode) ───────── */ /* @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --background: #FFFFFF; --surface: #F5F5F5; --surface-raised: #FFFFFF; --text: #111111; --text-muted: #6B7280; --accent: #DC2626; --accent-dark: #B91C1C; --border: #E5E7EB; --border-soft: #D1D5DB; --nav-background: rgba(255, 255, 255, 0.95); --nav-text: #111111; --clr-black: #FFFFFF; --clr-dark: #F5F5F5; --clr-card: #FFFFFF; --clr-border: #E5E7EB; --clr-border-light: #D1D5DB; --clr-white: #111111; --clr-off-white: #1F2937; --clr-gray: #6B7280; --clr-gray-mid: #4B5563; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04); --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 16px 48px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(220, 38, 38, 0.15); } } */ /* ── Outline buttons on permanently-dark surfaces (CTA sections) ────────────── */ /* .cta-section always uses a hardcoded dark gradient regardless of theme, so btn-outline inside it must always have white text. The higher specificity of this selector overrides the global .btn-outline rule in site.css. */ /* Light-mode overrides below are disabled while site is locked to dark mode. */ /* :root[data-theme="light"] .cta-section .btn-outline, :root[data-theme="light"] .cta-section .btn-outline:hover { border-color: rgba(255, 255, 255, 0.35); color: #FFFFFF; } :root[data-theme="light"] .cta-section .btn-outline:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.55); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .cta-section .btn-outline, :root:not([data-theme]) .cta-section .btn-outline:hover { border-color: rgba(255, 255, 255, 0.35); color: #FFFFFF; } :root:not([data-theme]) .cta-section .btn-outline:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.55); } } */ /* ── Theme toggle icon visibility ───────────────────────────────────────────── */ /* CSS drives icon display so the toggle never flashes the wrong icon, even before Blazor JS hydrates. The inline script in App.html ensures data-theme is always set before first paint. */ .theme-icon--sun, .theme-icon--moon { align-items: center; display: none; line-height: 0; } /* Dark mode → show sun (action: switch to light) */ :root[data-theme="dark"] .theme-icon--sun { display: inline-flex; } :root:not([data-theme]) .theme-icon--sun { display: inline-flex; } /* Light mode → show moon (action: switch to dark) */ :root[data-theme="light"] .theme-icon--moon { display: inline-flex; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .theme-icon--sun { display: none; } :root:not([data-theme]) .theme-icon--moon { display: inline-flex; } }