/* ============================================================ THEME.CSS — Background Effects, Animations, Visual Flair ============================================================ */ /* Animated grid background */ .bg-grid { position: fixed; inset: 0; background-image: linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; } /* Glow orbs */ .bg-orb { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(80px); } .bg-orb--1 { width: 700px; height: 700px; background: radial-gradient(circle, rgba(0, 229, 255, 0.07) 0%, transparent 70%); top: -250px; left: -250px; } .bg-orb--2 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(255, 60, 172, 0.05) 0%, transparent 70%); bottom: -150px; right: -150px; } /* Page fade-in on load */ @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .page-wrapper { animation: fadeUp 0.5s ease both; } /* Accent glow pulse on QR canvas */ @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 20px rgba(0, 229, 255, 0.08); } 50% { box-shadow: 0 0 40px rgba(0, 229, 255, 0.18); } } .qr-canvas-wrapper { animation: glowPulse 3s ease-in-out infinite; } /* ============================================================ LIGHT THEME — Überschreibt Dark-Variablen Wird aktiv durch: ============================================================ */ .theme-light { --bg: #f4f4f8; --surface: #ffffff; --surface-2: #ededf3; --border: #d0d0e0; --accent: #0099bb; --accent-2: #cc1080; --text: #1a1a2e; --text-muted: #6666888; } .theme-light .bg-grid { background-image: linear-gradient(rgba(0, 153, 187, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 153, 187, 0.04) 1px, transparent 1px); } .theme-light .bg-orb--1 { background: radial-gradient(circle, rgba(0, 153, 187, 0.06) 0%, transparent 70%); } .theme-light .bg-orb--2 { background: radial-gradient(circle, rgba(204, 16, 128, 0.04) 0%, transparent 70%); } /* Sanfter Übergang zwischen Themes */ html { transition: background-color 0.3s ease, color 0.3s ease; } /* ── THEME TOGGLE BUTTON ──────────────────────────────────── */ .theme-toggle { position: fixed; top: 16px; right: 16px; z-index: 100; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full); color: var(--text-muted); width: 40px; height: 40px; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); box-shadow: 0 2px 12px rgba(0,0,0,0.2); } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.08); } @media (min-width: 480px) { .theme-toggle { top: 20px; right: 24px; width: 44px; height: 44px; } }