/* ===================================================== MORGAN THEME ENGINE - Base theme: Morgan Midnight (default) - Extra theme: Morgan Aurora (opsional) Semua warna & glow diset lewat CSS variables. ===================================================== */ /* ===== BASE THEME • MORGAN MIDNIGHT (DEFAULT) ===== */ :root { /* Background */ --bg-main: #020617; --bg-panel: rgba(15, 23, 42, 0.96); --bg-panel-soft: rgba(15, 23, 42, 0.9); --bg-chip: rgba(17, 24, 39, 0.95); --bg-input: rgba(6, 11, 25, 0.98); /* Border */ --border-soft: rgba(148, 163, 184, 0.45); --border-strong: rgba(129, 140, 248, 0.9); /* Text */ --text-main: #e5e7eb; --text-soft: #9ca3af; --text-muted: #6b7280; /* Accent colors */ --accent-blue: #38bdf8; --accent-indigo: #6366f1; --accent-green: #22c55e; /* Radius */ --radius-lg: 24px; --radius-md: 16px; --radius-pill: 999px; /* Shadow */ --shadow-deep: 0 22px 60px rgba(0, 0, 0, 0.75); --shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.9); /* Transition */ --transition-fast: 0.16s ease-out; --transition-med: 0.22s ease-out; } /* Background global pakai variable (kalau di style.css cuma font, ini yang atur tema) */ body { background: radial-gradient(circle at 0% 0%, #1d283a 0, transparent 55%), radial-gradient(circle at 100% 0%, #0f172a 0, transparent 55%), radial-gradient(circle at 50% 100%, var(--bg-main) 0, var(--bg-main) 60%); } /* Panel utama (card besar) */ .app { background: radial-gradient(circle at 20% 0%, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98)); border: 1px solid rgba(148, 163, 184, 0.4); box-shadow: var(--shadow-deep), 0 0 0 1px rgba(15, 23, 42, 0.8); } /* Sidebar pakai background theme */ .sidebar { background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.18), transparent 45%), radial-gradient(circle at 100% 0, rgba(88, 28, 135, 0.25), transparent 45%), var(--bg-panel); } /* Bubble AI & User pakai accent */ .bubble-ai { background: linear-gradient(135deg, #0f172a, #1d4ed8); border-color: rgba(129, 140, 248, 0.8); } .bubble-user { background: linear-gradient(135deg, var(--accent-green), #16a34a); } /* Input wrapper & chips */ .input-wrapper { background: var(--bg-input); border-color: rgba(75, 85, 99, 0.9); } .chip { background: var(--bg-chip); border-color: rgba(55, 65, 81, 0.9); } /* Tombol kirim */ .send-btn { background: linear-gradient(135deg, var(--accent-green), #4ade80); color: #022c22; } /* Status pill pakai accent hijau */ .status { border-color: rgba(34, 197, 94, 0.8); } /* ----------------------------------------------------- THEME VARIANTS (OPSIONAL) Tinggal tambah class di untuk ganti mood: - - ----------------------------------------------------- */ /* THEME 1: MORGAN AURORA (biru-hijau neon) */ body.theme-aurora { --bg-main: #020617; --bg-panel: rgba(10, 16, 35, 0.97); --bg-panel-soft: rgba(15, 23, 42, 0.92); --bg-chip: rgba(15, 23, 42, 0.96); --bg-input: rgba(6, 12, 35, 0.99); --accent-blue: #7dd3fc; --accent-indigo: #818cf8; --accent-green: #4ade80; --border-soft: rgba(148, 163, 184, 0.55); --border-strong: rgba(129, 140, 248, 1); --shadow-deep: 0 24px 70px rgba(15, 23, 42, 0.9); } /* THEME 2: MORGAN CARBON (lebih kalem, abu gelap) */ body.theme-carbon { --bg-main: #020617; --bg-panel: rgba(15, 23, 42, 0.98); --bg-panel-soft: rgba(17, 24, 39, 0.96); --bg-chip: rgba(15, 23, 42, 0.98); --bg-input: rgba(10, 16, 30, 0.99); --accent-blue: #60a5fa; --accent-indigo: #4f46e5; --accent-green: #22c55e; --border-soft: rgba(107, 114, 128, 0.8); --border-strong: rgba(129, 140, 248, 0.9); --shadow-deep: 0 20px 55px rgba(0, 0, 0, 0.8); }