/* ========================================================================== ACT-Marketing Theme — Light & Dark Mode Inspired by act-marketing.de ========================================================================== */ /* ---------- Dark theme (default) ---------- */ :root { --blogi-bg: #0b0f14; --blogi-surface: #131a24; --blogi-surface-a: #1a2332; --blogi-surface-hover: #1f2b3a; --blogi-text: #e8ecf1; --blogi-text-secondary: #94a3b8; --blogi-accent: #22c55e; --blogi-accent-hover: #16a34a; --blogi-nav-hover: #1a2332; --blogi-nav-active: #22c55e; --blogi-nav-border: #1e293b; --blogi-border: #1e293b; --blogi-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); --blogi-heading: #ffffff; --blogi-footer-bg: #080c10; --blogi-input-bg: #1a2332; --blogi-input-border: #2d3a4a; --blogi-overlay: rgba(0, 0, 0, 0.75); --blogi-toggle-bg: #1e293b; --blogi-toggle-icon: "🌙"; color-scheme: dark; } /* ---------- Light theme ---------- */ :root[data-theme="light"] { --blogi-bg: #f8fafc; --blogi-surface: #ffffff; --blogi-surface-a: #f1f5f9; --blogi-surface-hover: #e2e8f0; --blogi-text: #1e293b; --blogi-text-secondary: #64748b; --blogi-accent: #16a34a; --blogi-accent-hover: #15803d; --blogi-nav-hover: #f1f5f9; --blogi-nav-active: #16a34a; --blogi-nav-border: #e2e8f0; --blogi-border: #e2e8f0; --blogi-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); --blogi-heading: #0f172a; --blogi-footer-bg: #f1f5f9; --blogi-input-bg: #ffffff; --blogi-input-border: #cbd5e1; --blogi-overlay: rgba(0, 0, 0, 0.5); --blogi-toggle-bg: #e2e8f0; --blogi-toggle-icon: "☀️"; color-scheme: light; } /* ---------- Respect OS preference ---------- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --blogi-bg: #f8fafc; --blogi-surface: #ffffff; --blogi-surface-a: #f1f5f9; --blogi-surface-hover: #e2e8f0; --blogi-text: #1e293b; --blogi-text-secondary: #64748b; --blogi-accent: #16a34a; --blogi-accent-hover: #15803d; --blogi-nav-hover: #f1f5f9; --blogi-nav-active: #16a34a; --blogi-nav-border: #e2e8f0; --blogi-border: #e2e8f0; --blogi-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); --blogi-heading: #0f172a; --blogi-footer-bg: #f1f5f9; --blogi-input-bg: #ffffff; --blogi-input-border: #cbd5e1; --blogi-overlay: rgba(0, 0, 0, 0.5); --blogi-toggle-bg: #e2e8f0; --blogi-toggle-icon: "☀️"; color-scheme: light; } } /* ---------- Global base styles ---------- */ * { box-sizing: border-box; } body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { color: var(--blogi-heading); font-weight: 700; line-height: 1.2; } /* ---------- Theme toggle button ---------- */ #theme-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 1000; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--blogi-border); background: var(--blogi-surface); color: var(--blogi-text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: var(--blogi-card-shadow); transition: background-color 0.3s ease, transform 0.2s ease; } #theme-toggle:hover { background: var(--blogi-surface-hover); transform: scale(1.1); } #theme-toggle svg { width: 20px; height: 20px; fill: currentColor; } /* ---------- Scrollbar (dark) ---------- */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--blogi-bg); } ::-webkit-scrollbar-thumb { background: var(--blogi-border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--blogi-text-secondary); } /* ---------- Selection ---------- */ ::selection { background: var(--blogi-accent); color: #ffffff; }