/* ========================================================= Balo Zen — Day / Night Theme Layer (Updated Final Build) (This file is the ONLY place that paints backgrounds) ========================================================= */ /* Base fallback: treat as night */ body { background: radial-gradient(circle at top, #020617 0%, #020617 40%, #020617 100%); color: #e5e7eb; } /* ========================================================= 1) DAY THEME — Soft, Calm, Non-Glare ========================================================= */ body.balo-day { background: radial-gradient(circle at 0% 0%, #dbe9f8 0%, transparent 55%), radial-gradient(circle at 100% 20%, #eadcff 0%, transparent 60%), linear-gradient(160deg, #eef2f7 0%, #e5e7eb 45%, #f7eaf7 90%); color: #0f172a; } /* HOME PAGE — Tuned Day Mode (single source of truth) */ body.balo-day.home { /* Replace bright pastel gradients with softer muted blends */ background: radial-gradient(circle at 10% 0%, rgba(224, 233, 244, 0.55), transparent 60%), radial-gradient(circle at 90% 10%, rgba(235, 223, 248, 0.5), transparent 60%), linear-gradient(180deg, #eef1f5 0%, #e8ecf1 45%, #f3f3f7 100%); color: #1e293b; } /* ========================================================= 2) NIGHT THEME — Cosmic Glow ========================================================= */ body.balo-night { background: radial-gradient(1200px 900px at 20% 0%, rgba(80, 120, 255, 0.22) 0%, transparent 70%), radial-gradient(900px 700px at 90% 10%, rgba(150, 80, 255, 0.22) 0%, transparent 70%), radial-gradient(1400px 1000px at 50% 50%, rgba(20, 30, 60, 0.85) 0%, transparent 75%), linear-gradient(180deg, #0b1020 0%, #0a0f1b 45%, #090e19 100%); color: #e5e7eb; } /* ========================================================= 3) BASE TEXT COLORS ========================================================= */ body.balo-day p, body.balo-day li, body.balo-day span { color: #1f2937; } body.balo-night p, body.balo-night li, body.balo-night span { color: #e5e7eb; } /* Headings */ body.balo-day h1, body.balo-day h2, body.balo-day h3, body.balo-day h4, body.balo-day h5, body.balo-day h6 { color: #0b1120; } body.balo-night h1, body.balo-night h2, body.balo-night h3, body.balo-night h4, body.balo-night h5, body.balo-night h6 { color: #f9fafb; } /* ========================================================= 4) DAY / NIGHT CARDS — UNIVERSAL GLASS LAYER (Applies to app cards + hero shells, not the front page) ========================================================= */ /* DAY — soft glass cards over the pastel background (heroes NOT treated as cards) */ body.balo-day .dashboard-card, body.balo-day .db-card, body.balo-day .mk-card, body.balo-day .pf-card, body.balo-day .acc-card, body.balo-day .balo-card, body.balo-day .zen-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.64) ) !important; border: 1px solid rgba(148, 163, 184, 0.35); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); border-radius: 18px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14); color: #0f172a !important; } /* NIGHT — deep glass cards that match the cosmic background (heroes NOT treated as cards) */ body.balo-night .dashboard-card, body.balo-night .db-card, body.balo-night .mk-card, body.balo-night .pf-card, body.balo-night .acc-card, body.balo-night .balo-card, body.balo-night .zen-card { background: linear-gradient(135deg, rgba(15, 23, 42, 0.90), rgba(15, 23, 42, 0.78) ) !important; border: 1px solid rgba(59, 130, 246, 0.40); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); border-radius: 18px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.65); color: #e5e7eb !important; } /* ========================================================= 5) ZEN GLOW BUTTONS — Universal (Day + Night) ========================================================= */ .btn, .btn-primary, .btn-alt, .mk-cta, .button, a.cta-gem { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 35%, #93c5fd 70%); color: #ffffff !important; border-radius: 999px; border: none; box-shadow: 0 0 18px rgba(96, 165, 250, 0.5), 0 0 36px rgba(59, 130, 246, 0.35); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .btn:hover, .btn-primary:hover, .btn-alt:hover, .mk-cta:hover, .button:hover, a.cta-gem:hover { transform: translateY(-2px); box-shadow: 0 0 22px rgba(147, 197, 253, 0.65), 0 0 40px rgba(96, 165, 250, 0.45); filter: brightness(1.08); } /* Ghost buttons remain light */ .btn-ghost, .btn-tab, .btn-report { border-radius: 999px; background: rgba(255, 255, 255, 0.08); } /* ========================================================= 6) THEME TOGGLE BUTTON ========================================================= */ .balo-theme-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 9999; width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.6); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(16px); font-size: 1.2rem; box-shadow: 0 18px 35px rgba(15, 23, 42, 0.35); transition: transform 0.18s ease, box-shadow 0.18s ease; } body.balo-day .balo-theme-toggle { background: rgba(255, 255, 255, 0.9); color: #0f172a; } body.balo-night .balo-theme-toggle { background: rgba(15, 23, 42, 0.98); color: #e5e7eb; } .balo-theme-toggle:hover { transform: translateY(-2px); } /* ========================================================= 7) FAB POSITION + COLLAPSE ========================================================= */ .balo-fabs { bottom: 96px !important; } .balo-fabs > *:not(.balo-fabs-toggle) { transition: opacity 0.18s ease, transform 0.18s ease; } .balo-fabs.is-collapsed > *:not(.balo-fabs-toggle) { opacity: 0; transform: translateY(8px) scale(0.92); pointer-events: none; } .balo-fabs-toggle { margin-top: 8px; width: 40px; height: 40px; border-radius: 999px; background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(148, 163, 184, 0.6); color: #e5e7eb; } body.balo-day .balo-fabs-toggle { background: rgba(255, 255, 255, 0.96); color: #0f172a; } /* ========================================================= 8) HOME PAGE — Extra Day Details (cards/buttons/text) ========================================================= */ /* Home hero text in day mode */ body.balo-day.home .hero-title { color: #111827; text-shadow: none; } body.balo-day.home .hero-subtitle { color: #374151; opacity: 0.85; } /* Buttons (home only) */ body.balo-day.home .btn { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 35%, #93c5fd 70%); color: #ffffff; border: none; box-shadow: 0 0 18px rgba(96, 165, 250, 0.35), 0 3px 14px rgba(0, 0, 0, 0.15); } body.balo-day.home .btn--ghost { background: rgba(255, 255, 255, 0.85); color: #1f2937; border: 1px solid rgba(148, 163, 184, 0.4); } /* Feature cards (day) */ body.balo-day.home .feature-media, body.balo-day.home .feature-text { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); color: #1f2937; } body.balo-day.home .h2 { color: #0f172a; text-shadow: none; } body.balo-day.home .lead { color: #374151; opacity: 0.9; } body.balo-day.home .bullets { color: #6b7280; } /* ========================================================= LOGIN + REGISTER CARDS — Day Mode ========================================================= */ body.balo-day .login-card, body.balo-day .register-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.64) ) !important; border: 1px solid rgba(148, 163, 184, 0.35); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); border-radius: 18px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14); color: #0f172a !important; } /* Force readable dark text inside */ body.balo-day .login-card *, body.balo-day .register-card * { color: #0f172a !important; } /* Inputs (day mode) */ body.balo-day .login-card input, body.balo-day .register-card input { background: rgba(255,255,255,0.90) !important; border: 1px solid rgba(2,6,23,0.18) !important; } body.balo-day .login-card input::placeholder, body.balo-day .register-card input::placeholder { color: rgba(15,23,42,0.45) !important; } /* ========================================================= LOGIN + REGISTER CARDS — Night Mode ========================================================= */ body.balo-night .login-card, body.balo-night .register-card { background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.78) ) !important; border: 1px solid rgba(59, 130, 246, 0.40); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); border-radius: 18px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.65); color: #e5e7eb !important; } /* Text becomes bright */ body.balo-night .login-card *, body.balo-night .register-card * { color: #e5e7eb !important; } /* ========================================================= BALO ODR — Day Mode Global Card Theme ========================================================= */ body.balo-day .balo-odr-admin-frontend .balo-odr-card, body.balo-day .balo-odr-admin-frontend .balo-odr-panel, body.balo-day .balo-odr-admin-frontend .balo-odr-box, body.balo-day .balo-odr-admin-frontend .balo-odr-message, body.balo-day .balo-odr-admin-frontend .balo-odr-item, body.balo-day .balo-odr-admin-frontend .balo-odr-evidence { background: linear-gradient(135deg, rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.70) ) !important; border: 1px solid rgba(148, 163, 184, 0.30) !important; backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); border-radius: 18px; box-shadow: 0 12px 30px rgba(15,23,42,0.12); color: #0f172a !important; } /* Text inside must also brighten */ body.balo-day .balo-odr-admin-frontend * { color: #0f172a !important; } /* ========================================================= BALO ODR — Night Mode Global Card Theme ========================================================= */ body.balo-night .balo-odr-admin-frontend .balo-odr-card, body.balo-night .balo-odr-admin-frontend .balo-odr-panel, body.balo-night .balo-odr-admin-frontend .balo-odr-box, body.balo-night .balo-odr-admin-frontend .balo-odr-message, body.balo-night .balo-odr-admin-frontend .balo-odr-item, body.balo-night .balo-odr-admin-frontend .balo-odr-evidence { background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.78) ) !important; border: 1px solid rgba(59,130,246,0.40); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); border-radius: 18px; box-shadow: 0 18px 40px rgba(15,23,42,0.65); color: #e5e7eb !important; } /* Text inside must turn bright */ body.balo-night .balo-odr-admin-frontend * { color: #e5e7eb !important; } /* ========================================================= BALO ADMIN CONSOLE — DAY MODE THEME ========================================================= */ body.balo-day .balo-admin-console { background: rgba(255,255,255,0.92) !important; color: #0f172a !important; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 18px 40px rgba(0,0,0,0.06); } /* Headings */ body.balo-day .balo-admin-console h1, body.balo-day .balo-admin-console h2, body.balo-day .balo-admin-console h3 { color: #0f172a !important; text-shadow: none !important; } /* Paragraphs, labels, text */ body.balo-day .balo-admin-console p, body.balo-day .balo-admin-console label, body.balo-day .balo-admin-console small { color: #374151 !important; } /* Inputs + textareas */ body.balo-day .balo-admin-console input, body.balo-day .balo-admin-console textarea, body.balo-day .balo-admin-console select { background: rgba(255,255,255,0.85) !important; border: 1px solid rgba(0,0,0,0.12) !important; color: #0f172a !important; } body.balo-day .balo-admin-console input:focus, body.balo-day .balo-admin-console textarea:focus, body.balo-day .balo-admin-console select:focus { border-color: rgba(59,130,246,0.55) !important; box-shadow: 0 0 0 2px rgba(59,130,246,0.25) !important; } /* Tabs */ body.balo-day .balo-admin-console .nav-tab { background: rgba(255,255,255,0.65) !important; border-color: rgba(0,0,0,0.12) !important; color: #1e293b !important; } body.balo-day .balo-admin-console .nav-tab:hover { background: rgba(59,130,246,0.15) !important; border-color: rgba(59,130,246,0.55) !important; } body.balo-day .balo-admin-console .nav-tab-active { background: linear-gradient(135deg, #3b82f6, #60a5fa) !important; color: #fff !important; border-color: transparent !important; } /* Notices */ body.balo-day .balo-admin-console .notice { background: rgba(255,255,255,0.85) !important; border: 1px solid rgba(0,0,0,0.08) !important; color: #1e293b !important; } body.balo-day .balo-admin-console .notice-success { background: rgba(34,197,94,0.15) !important; border-color: rgba(34,197,94,0.45) !important; } body.balo-day .balo-admin-console .notice-error { background: rgba(239,68,68,0.15) !important; border-color: rgba(239,68,68,0.55) !important; } /* Buttons */ body.balo-day .balo-admin-console .button { background: rgba(255,255,255,0.85) !important; border: 1px solid rgba(0,0,0,0.15) !important; color: #0f172a !important; } body.balo-day .balo-admin-console .button:hover { background: rgba(59,130,246,0.15) !important; border-color: rgba(59,130,246,0.55) !important; } body.balo-day .balo-admin-console .button-primary { background: linear-gradient(135deg, #2563eb, #3b82f6, #60a5fa) !important; border-color: transparent !important; color: #fff !important; } /* Danger delete button */ body.balo-day .balo-admin-console button[style*="b91c1c"] { background: #ef4444 !important; border-color: #b91c1c !important; color: #fff !important; } /* Tables */ body.balo-day .balo-admin-console table.widefat { background: rgba(255,255,255,0.95) !important; border: 1px solid rgba(0,0,0,0.06) !important; } body.balo-day .balo-admin-console table.widefat thead { background: linear-gradient(135deg, #e2e8f0, #ffffff) !important; } body.balo-day .balo-admin-console table.widefat th { color: #0f172a !important; } body.balo-day .balo-admin-console table.widefat td { color: #1e293b !important; } body.balo-day .balo-admin-console table.widefat tbody tr:nth-child(odd) { background: rgba(255,255,255,0.95) !important; } body.balo-day .balo-admin-console table.widefat tbody tr:nth-child(even) { background: rgba(243,244,246,0.9) !important; } body.balo-day .balo-admin-console table.widefat tbody tr:hover { background: rgba(59,130,246,0.20) !important; } /* Danger zone box */ body.balo-day .balo-admin-console .danger-zone { background: rgba(254,226,226,0.65) !important; border: 1px solid rgba(254,202,202,1) !important; } body.balo-day .balo-admin-console .danger-zone h3 { color: #b91c1c !important; } /* =========================================================== HELP AI — ZEN DAY/NIGHT THEME INTEGRATION =========================================================== */ /* ---------- DAY MODE ---------- */ body.balo-day .help-ai-toggle { background: var(--zen-card-bg, #ffffff); color: #0f172a; box-shadow: 0 12px 28px rgba(0,0,0,0.12); } body.balo-day .help-ai-panel { background: rgba(255,255,255,0.96); color: #0f172a; border: 1px solid rgba(148,163,184,0.35); box-shadow: 0 18px 40px rgba(0,0,0,0.12); } body.balo-day .help-ai-msg-bot span { background: rgba(0,0,0,0.06); color: #0f172a; } body.balo-day .help-ai-msg-user span { background: #3b82f6; color: white; } body.balo-day .help-ai-header, body.balo-day .help-ai-form { background: rgba(255,255,255,0.95); } body.balo-day .help-ai-input { background: rgba(255,255,255,0.85); border-color: rgba(148,163,184,0.45); color: #0f172a; } /* ---------- NIGHT MODE ---------- */ body.balo-night .help-ai-toggle { background: rgba(15,23,42,0.92); color: #e5e7eb; box-shadow: 0 16px 40px rgba(0,0,0,0.55); } body.balo-night .help-ai-panel { background: rgba(15,23,42,0.92); color: #e5e7eb; border: 1px solid rgba(96,165,250,0.35); box-shadow: 0 22px 50px rgba(0,0,0,0.75); } body.balo-night .help-ai-msg-bot span { background: rgba(255,255,255,0.08); color: #e5e7eb; } body.balo-night .help-ai-msg-user span { background: #3b82f6; color: white; } body.balo-night .help-ai-header, body.balo-night .help-ai-form { background: rgba(10,15,25,0.85); border-color: rgba(59,130,246,0.25); } body.balo-night .help-ai-input { background: rgba(255,255,255,0.06); border-color: rgba(148,163,184,0.35); color: #e5e7eb; } body.balo-night .help-ai-hint, body.balo-night .help-ai-sub { color: #9ca3af !important; } body.balo-night .help-ai-msg span code { background: rgba(255,255,255,0.08); color: #e5e7eb; } /* Title colors */ body.balo-night .help-ai-title { color: #f8fafc; } /* Orb glow adjusts for night mode */ body.balo-night .help-ai-orb { box-shadow: 0 0 20px rgba(147,197,253,0.7), 0 0 40px rgba(59,130,246,0.6) !important; }