/* ============================================ FT Sicherheitstechnik — Light/Dark Theme System Default: System (prefers-color-scheme) Override via data-theme="light" | "dark" on ============================================ */ /* --- DARK MODE (Default / explicit) ------------------------------------ */ :root, :root[data-theme="dark"] { color-scheme: dark; --color-bg: #0a0a0a; --color-surface: #141414; --color-surface-2: #1a1a1a; --color-surface-3: #222222; --color-surface-elevated: #1f1f1f; --color-border: rgba(255, 255, 255, 0.08); --color-border-strong: rgba(255, 255, 255, 0.15); --color-border-hover: rgba(255, 255, 255, 0.15); --color-text: #ffffff; --color-text-secondary: #a0a0a0; --color-text-muted: #777777; --color-text-inverse: #0a0a0a; --color-accent: #ef4444; --color-accent-hover: #ff6b6b; --color-accent-glow: rgba(239, 68, 68, 0.3); --color-accent-subtle: rgba(239, 68, 68, 0.10); --color-cta: #22c55e; --color-cta-hover: #16a34a; --color-cta-glow: rgba(34, 197, 94, 0.3); --color-cta-text: #04210d; --color-secondary: #00b4d8; --color-secondary-hover: #00d4fc; --color-secondary-glow: rgba(0, 180, 216, 0.30); --color-secondary-subtle: rgba(0, 180, 216, 0.08); --color-success: #2ecc71; --color-warning: #f39c12; --color-logo: #C8161D; --shadow-soft: 0 1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.25); --shadow-medium: 0 6px 24px rgba(0,0,0,0.45); --shadow-strong: 0 20px 60px rgba(0,0,0,0.55); --grad-hero-overlay: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.8) 100%); --grad-section-fade: linear-gradient(180deg, #0a0a0a 0%, #141414 100%); --grad-product-bg: radial-gradient(ellipse at 50% 30%, #1f1f1f 0%, #0a0a0a 70%); } /* --- LIGHT MODE (Auto via system OR explicit) ------------------------ */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --color-bg: #ffffff; --color-surface: #f5f5f7; --color-surface-2: #fafafa; --color-surface-3: #ededef; --color-surface-elevated: #ffffff; --color-border: rgba(0, 0, 0, 0.08); --color-border-strong: rgba(0, 0, 0, 0.15); --color-border-hover: rgba(0, 0, 0, 0.15); --color-text: #1d1d1f; --color-text-secondary: #515154; --color-text-muted: #86868b; --color-text-inverse: #ffffff; --color-accent: #d92e2e; --color-accent-hover: #b22020; --color-accent-glow: rgba(217, 46, 46, 0.18); --color-accent-subtle: rgba(217, 46, 46, 0.06); --color-cta: #16a34a; --color-cta-hover: #138a3e; --color-cta-glow: rgba(22, 163, 74, 0.22); --color-cta-text: #ffffff; --color-secondary: #0077a8; --color-secondary-hover: #00608a; --color-secondary-glow: rgba(0, 119, 168, 0.22); --color-secondary-subtle: rgba(0, 119, 168, 0.06); --color-success: #15803d; --color-warning: #b45309; --color-logo: #C8161D; --shadow-soft: 0 1px 2px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06); --shadow-medium: 0 6px 24px rgba(0,0,0,0.10); --shadow-strong: 0 20px 60px rgba(0,0,0,0.18); --grad-hero-overlay: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%); --grad-section-fade: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%); --grad-product-bg: radial-gradient(ellipse at 50% 30%, #ffffff 0%, #ededef 70%); } } /* --- LIGHT MODE (Explicit override) ----------------------------------- */ :root[data-theme="light"] { color-scheme: light; --color-bg: #ffffff; --color-surface: #f5f5f7; --color-surface-2: #fafafa; --color-surface-3: #ededef; --color-surface-elevated: #ffffff; --color-border: rgba(0, 0, 0, 0.08); --color-border-strong: rgba(0, 0, 0, 0.15); --color-border-hover: rgba(0, 0, 0, 0.15); --color-text: #1d1d1f; --color-text-secondary: #515154; --color-text-muted: #86868b; --color-text-inverse: #ffffff; --color-accent: #d92e2e; --color-accent-hover: #b22020; --color-accent-glow: rgba(217, 46, 46, 0.18); --color-accent-subtle: rgba(217, 46, 46, 0.06); --color-cta: #16a34a; --color-cta-hover: #138a3e; --color-cta-glow: rgba(22, 163, 74, 0.22); --color-cta-text: #ffffff; --color-secondary: #0077a8; --color-secondary-hover: #00608a; --color-secondary-glow: rgba(0, 119, 168, 0.22); --color-secondary-subtle: rgba(0, 119, 168, 0.06); --color-success: #15803d; --color-warning: #b45309; --color-logo: #C8161D; --shadow-soft: 0 1px 2px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06); --shadow-medium: 0 6px 24px rgba(0,0,0,0.10); --shadow-strong: 0 20px 60px rgba(0,0,0,0.18); --grad-hero-overlay: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%); --grad-section-fade: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%); --grad-product-bg: radial-gradient(ellipse at 50% 30%, #ffffff 0%, #ededef 70%); } /* --- Smooth theme transition ------------------------------------------ */ html, body, header, footer, .card, .product-card, .service-card, .news-card, .btn, .nav-link, input, textarea, select { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* User has just toggled — disable transition flicker on system changes */ html.theme-no-transition, html.theme-no-transition *, html.theme-no-transition *::before, html.theme-no-transition *::after { transition: none !important; } /* ============================================ THEME TOGGLE COMPONENT ============================================ */ .theme-toggle { --size: 38px; position: relative; width: var(--size); height: var(--size); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: 50%; cursor: pointer; padding: 0; appearance: none; -webkit-appearance: none; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .theme-toggle:hover { border-color: var(--color-border-hover); background: var(--color-surface-2); transform: translateY(-1px); } .theme-toggle:focus-visible { outline: 2px solid var(--color-cta); outline-offset: 2px; } .theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .theme-toggle__sun { position: absolute; opacity: 0; transform: rotate(-90deg) scale(0.6); } .theme-toggle__moon { position: absolute; opacity: 1; transform: rotate(0) scale(1); } /* Light mode → show sun, hide moon */ :root[data-theme="light"] .theme-toggle__sun, :root:not([data-theme]) .theme-toggle__sun { /* default unset by below */ } @media (prefers-color-scheme: light) { :root:not([data-theme]) .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(0.6); } :root:not([data-theme]) .theme-toggle__sun { opacity: 1; transform: rotate(0) scale(1); } } :root[data-theme="light"] .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(0.6); } :root[data-theme="light"] .theme-toggle__sun { opacity: 1; transform: rotate(0) scale(1); }