/* ═══════════════════════════════════════════════════════ SHARED THEME: Aurora Glass Deep blue glassmorphism with vibrant accents. Toggle adds "theme-new" or "theme-old" on . ═══════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); /* ═══ Variables ═══ */ body.theme-new { --accent: #34d399; --accent-text: #10b981; --accent-glow: rgba(52, 211, 153, 0.18); --accent-glow-strong: rgba(52, 211, 153, 0.32); --accent2: #a78bfa; --accent2-glow: rgba(167, 139, 250, 0.18); --bg: #1e2235; --bg-surface: #252b42; --bg-card: rgba(255, 255, 255, 0.07); --bg-card-hover: rgba(255, 255, 255, 0.12); --bg-input: rgba(255, 255, 255, 0.09); --border: rgba(255, 255, 255, 0.12); --border-hover: rgba(255, 255, 255, 0.22); --text: #e8edf5; --text-bright: #ffffff; --text-muted: #8b9ab5; --text-label: #6b7fa0; --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Space Grotesk', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; } /* ═══ Base ═══ */ body.theme-new { font-family: var(--font-body) !important; background: var(--bg) !important; color: var(--text) !important; } /* Mesh gradient background */ body.theme-new::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(99, 102, 241, 0.14), transparent), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(16, 185, 129, 0.10), transparent), radial-gradient(ellipse 40% 60% at 50% 50%, rgba(139, 92, 246, 0.08), transparent); } body.theme-new > * { position: relative; z-index: 1; } body.theme-new #root { position: relative; z-index: 1; } body.theme-new #app-screen { position: relative; z-index: 1; } /* ═══ Navigation / Header ═══ */ body.theme-new nav, body.theme-new header { background: rgba(12, 15, 26, 0.8) !important; backdrop-filter: blur(20px) saturate(1.2) !important; -webkit-backdrop-filter: blur(20px) saturate(1.2) !important; border-color: var(--border) !important; box-shadow: 0 1px 0 var(--border), 0 4px 30px rgba(0,0,0,0.3) !important; } /* ═══ Typography ═══ */ body.theme-new h1, body.theme-new h2, body.theme-new h3 { font-family: var(--font-display) !important; color: var(--text-bright) !important; letter-spacing: -0.03em; } body.theme-new .text-slate-800, body.theme-new .text-slate-700, body.theme-new .text-slate-900, body.theme-new .font-bold, body.theme-new .font-black { color: var(--text) !important; } body.theme-new .text-slate-500, body.theme-new .text-slate-400 { color: var(--text-muted) !important; } /* ═══ Primary buttons ═══ */ body.theme-new .bg-blue-600, body.theme-new .bg-indigo-600 { background: linear-gradient(135deg, #6ee7b7, #34d399) !important; color: #064e3b !important; box-shadow: 0 0 20px var(--accent-glow), 0 4px 12px rgba(0,0,0,0.3) !important; border: none !important; } body.theme-new .bg-blue-600:hover, body.theme-new .hover\:bg-blue-700:hover, body.theme-new .bg-indigo-600:hover, body.theme-new .hover\:bg-indigo-700:hover { background: linear-gradient(135deg, #a7f3d0, #6ee7b7) !important; box-shadow: 0 0 30px var(--accent-glow-strong), 0 4px 16px rgba(0,0,0,0.4) !important; } body.theme-new .bg-blue-600 *, body.theme-new .bg-indigo-600 * { color: #064e3b !important; } /* Green buttons (export) */ body.theme-new .bg-green-600 { background: linear-gradient(135deg, #818cf8, #6366f1) !important; color: #fff !important; box-shadow: 0 0 20px var(--accent2-glow) !important; } body.theme-new .bg-green-600:hover, body.theme-new .hover\:bg-green-700:hover { background: linear-gradient(135deg, #a5b4fc, #818cf8) !important; } /* ═══ Text accent colors ═══ */ body.theme-new .text-blue-600, body.theme-new .text-indigo-600, body.theme-new .text-blue-700 { color: var(--accent) !important; } /* ═══ Backgrounds ═══ */ body.theme-new .bg-slate-50 { background-color: var(--bg) !important; } body.theme-new .bg-slate-100 { background-color: var(--bg-surface) !important; } body.theme-new .bg-white { background: var(--bg-card) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } body.theme-new .bg-blue-50, body.theme-new .bg-indigo-50 { background-color: var(--accent-glow) !important; } /* ═══ Borders ═══ */ body.theme-new .border-slate-200, body.theme-new .border-slate-100, body.theme-new .border-b, body.theme-new .border { border-color: var(--border) !important; } /* ═══ Cards — glass effect ═══ */ body.theme-new .rounded-2xl, body.theme-new .rounded-3xl { border-radius: 1rem !important; } body.theme-new .shadow-sm { box-shadow: 0 0 0 1px var(--border), 0 8px 32px rgba(0,0,0,0.3) !important; } body.theme-new .hover\:shadow-xl:hover { box-shadow: 0 0 0 1px var(--border-hover), 0 16px 48px rgba(0,0,0,0.4), 0 0 40px var(--accent-glow) !important; } /* ═══ Inputs ═══ */ body.theme-new input, body.theme-new select, body.theme-new textarea { background: var(--bg-input) !important; border-color: var(--border) !important; color: var(--text) !important; } body.theme-new input::placeholder { color: var(--text-label) !important; } body.theme-new input:focus, body.theme-new select:focus, body.theme-new textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-glow), 0 0 20px var(--accent-glow) !important; outline: none !important; } /* ═══ Tags ═══ */ body.theme-new .text-indigo-500.bg-indigo-50, body.theme-new .text-indigo-500 { color: var(--accent2) !important; } body.theme-new .bg-indigo-50 { background: var(--accent2-glow) !important; } /* ═══ Status badges ═══ */ body.theme-new .bg-blue-100 { background: rgba(99, 102, 241, 0.15) !important; } body.theme-new .text-blue-700 { color: #818cf8 !important; } body.theme-new .bg-green-100 { background: rgba(16, 185, 129, 0.15) !important; } body.theme-new .text-green-700 { color: #6ee7b7 !important; } body.theme-new .bg-red-100 { background: rgba(239, 68, 68, 0.15) !important; } body.theme-new .text-red-700 { color: #fca5a5 !important; } body.theme-new .bg-slate-100.text-slate-600 { background: rgba(255,255,255,0.06) !important; color: var(--text-muted) !important; } /* ═══ Progress bars ═══ */ body.theme-new .bg-emerald-500 { background: linear-gradient(90deg, #6ee7b7, #34d399) !important; box-shadow: 0 0 12px var(--accent-glow) !important; } body.theme-new .bg-red-400 { background: linear-gradient(90deg, #f87171, #ef4444) !important; box-shadow: 0 0 12px rgba(239, 68, 68, 0.3) !important; } body.theme-new .bg-slate-100.rounded-full { background: rgba(255,255,255,0.06) !important; } /* ═══ Tabs ═══ */ body.theme-new .bg-slate-200\/50 { background: var(--bg-card) !important; border-color: var(--border) !important; } body.theme-new button.bg-white.text-indigo-600, body.theme-new button.bg-white.text-emerald-600 { background: var(--accent-glow) !important; color: var(--accent) !important; box-shadow: 0 0 15px var(--accent-glow) !important; } /* ═══ Modals ═══ */ body.theme-new .bg-slate-900\/60 { background: rgba(0, 0, 0, 0.7) !important; backdrop-filter: blur(8px) !important; } body.theme-new .bg-white.rounded-t-3xl, body.theme-new .bg-white.rounded-\[40px\], body.theme-new .shadow-2xl { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 60px var(--accent-glow) !important; } /* ═══ Table (Materials) ═══ */ body.theme-new table { border-color: var(--border) !important; } body.theme-new table thead { background: rgba(255,255,255,0.03) !important; } body.theme-new table thead th { font-family: var(--font-mono) !important; font-size: 0.6rem !important; color: var(--text-label) !important; letter-spacing: 0.1em; } body.theme-new table tbody tr { border-color: var(--border) !important; } body.theme-new table tbody tr:hover { background: rgba(255,255,255,0.03) !important; } /* ═══ Nav badge (Materials TM) ═══ */ body.theme-new .bg-blue-600.text-white.font-black.px-2.py-1.rounded { background: linear-gradient(135deg, #6ee7b7, #34d399) !important; color: #064e3b !important; } /* Nav buttons */ body.theme-new .nav-btn { color: var(--text-muted) !important; } body.theme-new .nav-btn.text-blue-600 { color: var(--accent) !important; background: var(--accent-glow) !important; } /* ═══ Workflow steps ═══ */ body.theme-new .step-active { border-left-color: var(--accent) !important; background: var(--accent-glow) !important; } body.theme-new .bg-blue-600.text-white.rounded-full { background: linear-gradient(135deg, #6ee7b7, #34d399) !important; color: #064e3b !important; box-shadow: 0 0 15px var(--accent-glow) !important; } body.theme-new .bg-green-500.text-white.rounded-full { background: linear-gradient(135deg, #818cf8, #6366f1) !important; box-shadow: 0 0 15px var(--accent2-glow) !important; } /* ═══ Auth overlay (Materials) ═══ */ body.theme-new .bg-slate-900\/90 { background: rgba(0,0,0,0.85) !important; } body.theme-new #auth-overlay .bg-white { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; } /* ═══ Toast ═══ */ body.theme-new .bg-green-500 { background: linear-gradient(135deg, #6ee7b7, #34d399) !important; color: #064e3b !important; } body.theme-new .bg-red-500 { background: linear-gradient(135deg, #f87171, #ef4444) !important; } /* ═══ Scrollbar ═══ */ body.theme-new ::-webkit-scrollbar { width: 6px; height: 6px; } body.theme-new ::-webkit-scrollbar-track { background: transparent; } body.theme-new ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; } body.theme-new ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); } /* ═══ Print: no changes ═══ */ @media print { body.theme-new::before { display: none; } } /* ═══ Theme toggle button ═══ */ .theme-toggle-shared { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem; border: none; border-radius: 999px; cursor: pointer; font-size: 0.7rem; font-weight: 700; font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: 0.03em; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(0,0,0,0.3); background: linear-gradient(135deg, #6ee7b7, #34d399); color: #064e3b; } body.theme-old .theme-toggle-shared { background: rgba(255,255,255,0.12); color: #94a3b8; backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); } .theme-toggle-shared:hover { transform: scale(1.05); } .theme-toggle-shared i { font-size: 0.8rem; } /* ═══ Animations ═══ */ @keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 20px var(--accent-glow); } 50% { box-shadow: 0 0 40px var(--accent-glow-strong); } } @keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } body.theme-new main > *:first-child { animation: fade-up 0.5s ease both; }