/* Futuristic Neon Theme for NeuraSphere LMS (scoped) */ /* Fonts assumed loaded via in templates */ /* Scope all overrides under .theme-future on to avoid logic changes */ .theme-future { --ns-primary: #00ffff; --ns-secondary: #8a2be2; --ns-bg: #0d0d0d; --ns-surface: #121212; --ns-surface-2: #1a1a1a; --ns-text: #e6f3ff; --ns-muted: #94a3b8; --ns-danger: #ff4d4f; --ns-success: #22c55e; --ns-warning: #f59e0b; --ns-glow: 0 0 16px rgba(0, 255, 255, 0.5), 0 0 32px rgba(138, 43, 226, 0.35); --ns-shadow: 0 10px 30px rgba(0,0,0,0.45); } /* Global */ .theme-future { background: radial-gradient(1200px 600px at 20% -10%, rgba(0,255,255,0.12), transparent), radial-gradient(900px 500px at 110% 10%, rgba(138,43,226,0.10), transparent), linear-gradient(180deg, #0a0a0a, #0d0d0d); color: var(--ns-text); font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } .theme-future h1, .theme-future h2, .theme-future h3, .theme-future .logo-wordmark { font-family: 'Orbitron', 'Poppins', sans-serif; letter-spacing: 1.5px; } /* Place particles canvas behind content */ #particles-js { position: fixed; inset: 0; z-index: 0; pointer-events: none; /* Never block clicks */ } .theme-future > *:not(#particles-js) { position: relative; z-index: 1; } /* Prevent page scrolling when any modal is open */ .theme-future.modal-open { overflow: hidden; touch-action: none; } /* Cards */ .theme-future .card, .theme-future .container, .theme-future .section-card, .theme-future .header-card { background: linear-gradient(180deg, var(--ns-surface), var(--ns-surface-2)) !important; border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; box-shadow: var(--ns-shadow); } /* Headers */ .theme-future .header, .theme-future .sidebar-header { background: linear-gradient(90deg, var(--ns-primary), var(--ns-secondary)); color: #00151a; } .theme-future .header h1, .theme-future .sidebar-header h1, .theme-future .header-card h2 { color: #00151a; text-shadow: 0 0 8px rgba(255,255,255,0.25); } /* Buttons */ .theme-future .btn, .theme-future button, .theme-future .glow-btn { border-radius: 12px; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .theme-future .btn-primary, .theme-future .glow-btn, .theme-future .logout-btn { background: linear-gradient(90deg, var(--ns-primary), var(--ns-secondary)); color: #00151a !important; border: 1px solid rgba(255,255,255,0.2); box-shadow: var(--ns-glow); } .theme-future .btn-primary:hover, .theme-future .glow-btn:hover, .theme-future .logout-btn:hover { transform: translateY(-2px) scale(1.01); filter: brightness(1.05); } .theme-future .btn-secondary, .theme-future .btn-logout { background: #0f172a; color: var(--ns-text); border: 1px solid rgba(255,255,255,0.12); } .theme-future .btn-danger { background: linear-gradient(90deg, #ff4d4f, #ff1f3d); color: white; } /* Inputs */ .theme-future input, .theme-future select, .theme-future textarea { background: #0b1220; color: var(--ns-text); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px !important; } .theme-future input:focus, .theme-future select:focus, .theme-future textarea:focus { outline: none; border-color: var(--ns-primary); box-shadow: 0 0 0 3px rgba(0,255,255,0.12); } /* Nav and sidebar */ .theme-future .sidebar { background: #0b0b0c; border-right: 1px solid rgba(255,255,255,0.06); } .theme-future .nav-item { color: var(--ns-text); } .theme-future .nav-item:hover { background: rgba(0,255,255,0.06); } .theme-future .nav-item.active { background: rgba(138,43,226,0.08); border-left-color: var(--ns-secondary); } /* Stats & progress */ .theme-future .stat { background: #0b1220; border: 1px solid rgba(255,255,255,0.06); } .theme-future .stat .value { color: var(--ns-primary); text-shadow: 0 0 6px rgba(0,255,255,0.45); } .theme-future .stat .label { color: var(--ns-muted); } .theme-future .progress-bar { height: 10px; background: #0e1b2e; border-radius: 999px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); } .theme-future .progress-bar > div { height: 100%; background: linear-gradient(90deg, var(--ns-primary), var(--ns-secondary)); box-shadow: var(--ns-glow); } /* Badges */ .theme-future .badge, .theme-future .status-badge { display: inline-block; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: #0b1220; color: var(--ns-text); box-shadow: 0 0 10px rgba(0,255,255,0.1) inset; } .theme-future .badge--neon { border-color: rgba(0,255,255,0.35); box-shadow: var(--ns-glow); } .theme-future .badge--success { border-color: rgba(34,197,94,0.4); color: #d1fae5; } .theme-future .badge--danger { border-color: rgba(255,77,79,0.45); color: #ffe4e6; } /* Neon banner */ .neon-banner { background: linear-gradient(90deg, rgba(0,255,255,0.12), rgba(138,43,226,0.12)); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 14px 18px; margin: 16px 0 22px 0; display: flex; align-items: center; gap: 10px; } .neon-banner .ri { color: var(--ns-primary); text-shadow: 0 0 8px rgba(0,255,255,0.5); } .neon-rotator { color: var(--ns-text); font-weight: 600; letter-spacing: .5px; } /* Floating assistant */ .ns-assistant-btn { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16); background: radial-gradient(circle at 30% 30%, rgba(0,255,255,0.2), rgba(138,43,226,0.2)); color: var(--ns-text); box-shadow: var(--ns-glow); cursor: pointer; } .ns-assistant-panel { position: fixed; right: 20px; bottom: 90px; z-index: 50; width: min(320px, 86vw); background: linear-gradient(180deg, var(--ns-surface), var(--ns-surface-2)); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 14px; display: none; box-shadow: var(--ns-shadow); } .ns-assistant-panel.show { display: block; } .ns-assistant-panel h4 { margin: 0 0 8px 0; font-family: 'Orbitron', sans-serif; color: var(--ns-primary); } .ns-assistant-panel .row { display: flex; align-items: center; justify-content: space-between; margin: 8px 0; } .ns-toggle { appearance: none; width: 40px; height: 22px; background: #0f172a; border-radius: 999px; position: relative; border: 1px solid rgba(255,255,255,0.18); cursor: pointer; } .ns-toggle:checked { background: linear-gradient(90deg, var(--ns-primary), var(--ns-secondary)); box-shadow: var(--ns-glow); } .ns-toggle::after { content: ''; position: absolute; top: 1px; left: 1px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .2s ease; } .ns-toggle:checked::after { transform: translateX(18px); } /* Subtle glow outlines */ .theme-future .glow-outline { box-shadow: 0 0 0 1px rgba(0,255,255,0.25), inset 0 0 24px rgba(138,43,226,0.12); } /* AOS basic fallback if not loaded */ [data-aos] { opacity: 0; transform: translateY(8px); transition: all .3s ease; } [data-aos].aos-animate { opacity: 1; transform: none; } /* Modals theme + stacking */ /* Force real overlay behavior regardless of inline styles */ .theme-future .modal { position: fixed !important; inset: 0 !important; display: none !important; align-items: center !important; justify-content: center !important; z-index: 12000 !important; background: rgba(0,0,0,0.6) !important; } .theme-future .modal.show { display: flex !important; } .theme-future .modal.active { display: flex !important; } /* support Admin.html modals */ .theme-future .modal.topmost { z-index: 20000 !important; } .theme-future .modal-body { background: linear-gradient(180deg, var(--ns-surface), var(--ns-surface-2)) !important; color: var(--ns-text) !important; border: 1px solid rgba(255,255,255,0.06) !important; box-shadow: var(--ns-shadow), var(--ns-glow) !important; } .theme-future .modal-header { border-bottom: 1px solid rgba(255,255,255,0.08) !important; } .theme-future .modal-title { color: var(--ns-primary) !important; text-shadow: 0 0 8px rgba(0,255,255,0.35); font-family: 'Orbitron', sans-serif; } .theme-future .modal-close { color: var(--ns-text) !important; } .theme-future .modal-content { color: var(--ns-text) !important; } /* Ensure light blocks in assignment modal are dark */ .theme-future #assignmentsModalContent .card { background: linear-gradient(180deg, var(--ns-surface), var(--ns-surface-2)) !important; } .theme-future #assignmentsModalContent .form-hint { color: var(--ns-muted) !important; } /* Content list items inside modals */ .theme-future .content-list { gap: 14px; } .theme-future .content-item { background: #0b1220 !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 14px !important; box-shadow: var(--ns-shadow); } .theme-future .content-info p { color: var(--ns-muted) !important; } .theme-future .pill { background: rgba(0,255,255,0.12) !important; color: var(--ns-text) !important; border: 1px solid rgba(0,255,255,0.22); } /* Kebab/menu surfaces */ .theme-future .kebab-menu { background: #0b1220 !important; border: 1px solid rgba(255,255,255,0.10); box-shadow: var(--ns-shadow); } .theme-future .kebab-menu .item:hover { background: rgba(0,255,255,0.08) !important; } /* Splash overlay in dark theme */ .theme-future #welcomeSplash { position: fixed !important; inset: 0 !important; display: none !important; align-items: center !important; justify-content: center !important; z-index: 4000 !important; background: rgba(0,0,0,0.85) !important; color: var(--ns-primary) !important; } .theme-future #welcomeSplash.show { display: flex !important; } .theme-future .splash-title { color: var(--ns-primary) !important; } /* Ensure AI analyzing overlay always stacks above page content */ .theme-future #aiAnalyzingOverlay { position: fixed !important; inset: 0 !important; z-index: 3500 !important; } /* AI Teacher (dark UI) */ .theme-future #aiTeacherModal .modal-body { background: linear-gradient(180deg, var(--ns-surface), var(--ns-surface-2)) !important; } .theme-future #aiTeacherModal .modal-header { border-bottom: 1px solid rgba(255,255,255,0.08) !important; } .theme-future #aiTeacherModal .modal-title { color: var(--ns-primary) !important; } .theme-future #aiMessages { background: #0b1220 !important; color: var(--ns-text) !important; border: 1px solid rgba(255,255,255,0.08) !important; } .theme-future #aiInput { background: #0b1220 !important; color: var(--ns-text) !important; border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 10px !important; } .theme-future .ai-bubble { color: var(--ns-text) !important; } .theme-future .ai-bubble.ai-user { background: #102136 !important; border: 1px solid rgba(255,255,255,0.08) !important; } .theme-future .ai-bubble.ai-assistant { background: #0b1220 !important; border: 1px solid rgba(255,255,255,0.06) !important; } .theme-future #aiThreads { background: transparent !important; border-right: 1px solid rgba(255,255,255,0.08) !important; } .theme-future #aiTeacherModal .nav-item { color: var(--ns-text); } .theme-future #aiTeacherModal .nav-item:hover { background: rgba(0,255,255,0.06); } .theme-future #aiTeacherModal .nav-item.active { background: rgba(138,43,226,0.08); border-left-color: var(--ns-secondary); } /* Admin dark theme overrides */ .theme-future .table-container { background: linear-gradient(180deg, var(--ns-surface), var(--ns-surface-2)) !important; border: 1px solid rgba(255,255,255,0.08) !important; } .theme-future table { color: var(--ns-text) !important; } .theme-future table th, .theme-future table td { color: var(--ns-text) !important; } .theme-future .table-container .badge, .theme-future .table-container a { color: var(--ns-text) !important; } .theme-future table thead { background: #0f172a !important; color: var(--ns-text) !important; } .theme-future table th { border-bottom: 1px solid rgba(255,255,255,0.12) !important; } .theme-future table td { border-bottom: 1px solid rgba(255,255,255,0.08) !important; } .theme-future table tr:hover { background: rgba(0,255,255,0.06) !important; } .theme-future .modal-content { background: linear-gradient(180deg, var(--ns-surface), var(--ns-surface-2)) !important; color: var(--ns-text) !important; border: 1px solid rgba(255,255,255,0.08) !important; } .theme-future .upload-zone { background: #0b1220 !important; border-color: rgba(255,255,255,0.16) !important; } .theme-future .search-box input { background: #0b1220 !important; color: var(--ns-text) !important; border: 1px solid rgba(255,255,255,0.18) !important; } .theme-future .content-item-card { background: #0b1220 !important; border-left-color: rgba(0,255,255,0.25) !important; } .theme-future .content-viewer-toolbar { background: #0b1220 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } .theme-future .month-item { background: #0b1220 !important; color: var(--ns-text) !important; } .theme-future .month-item.unlocked { background: rgba(34,197,94,0.12) !important; border-color: rgba(34,197,94,0.35) !important; color: #d1fae5 !important; } .theme-future .month-item.locked { background: rgba(255,77,79,0.12) !important; border-color: rgba(255,77,79,0.35) !important; color: #ffe4e6 !important; } #confirmCancelModal { position: fixed !important; z-index: 30000 !important; /* Higher than all overlays */ }