/** * ثيم صفحات الطالب — نفس هوية «تحدي الكلمات الذكي» * التركواز / البرتقالي / خلفية ناعمة * يُفعَّل عبر: class="student-theme" على * لا تستخدمه على صفحات الألعاب (sea/traffic/exam/…) */ :root { --st-ink: #0f2a33; --st-muted: #5a7a84; --st-teal: #0d9488; --st-teal-deep: #0f766e; --st-coral: #f97316; --st-coral-hot: #ea580c; --st-sky: #38bdf8; --st-success: #10b981; --st-glow: rgba(13, 148, 136, 0.28); --st-radius: 22px; --st-shadow: 0 18px 40px rgba(15, 42, 51, 0.14); --st-bg: radial-gradient(1200px 600px at 10% -10%, rgba(56, 189, 248, 0.35), transparent 55%), radial-gradient(900px 500px at 100% 0%, rgba(249, 115, 22, 0.22), transparent 50%), linear-gradient(160deg, #e8f7f6 0%, #d9f0f4 45%, #fff7ed 100%); } html.student-theme, body.student-theme { font-family: 'Tajawal', 'Fredoka', sans-serif !important; color: var(--st-ink) !important; } body.student-theme { background: var(--st-bg) !important; background-attachment: fixed !important; min-height: 100vh; position: relative !important; } /* إلغاء الخلفيات البنفسجية/القديمة الشائعة */ body.student-theme[data-theme], body.student-theme[data-theme="male"], body.student-theme[data-theme="female"], body.student-theme[data-theme="special"] { --bg-gradient-start: #e8f7f6 !important; --bg-gradient-end: #fff7ed !important; background: var(--st-bg) !important; } body.student-theme::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.45) 0 2px, transparent 3px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.35) 0 1.5px, transparent 2.5px), radial-gradient(circle at 40% 80%, rgba(13,148,136,.10) 0 40px, transparent 41px); animation: st-drift 18s linear infinite; } @keyframes st-drift { from { transform: translateY(0); } to { transform: translateY(-40px); } } /* ارفع المحتوى فوق زخرفة الخلفية — بدون لمس القائمة الجانبية الثابتة */ body.student-theme > main, body.student-theme > .page-wrapper, body.student-theme > .app, body.student-theme > .container, body.student-theme > .wrap, body.student-theme > header, body.student-theme > footer, body.student-theme > section { position: relative; z-index: 1; } /* الخلفية المتحركة تبقى ثابتة ولا تأخذ مساحة في التدفق */ body.student-theme > .bg-animation { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 0 !important; pointer-events: none !important; overflow: hidden !important; } /* القائمة الجانبية وزرها: دائماً fixed فوق المحتوى ولا تؤثر على التدفق */ body.student-theme > .side-menu-button, body.student-theme .side-menu-button { position: fixed !important; z-index: 1100 !important; } body.student-theme > .side-menu, body.student-theme > nav.side-menu, body.student-theme .side-menu { position: fixed !important; z-index: 1090 !important; } body.student-theme > .side-menu-overlay, body.student-theme .side-menu-overlay { position: fixed !important; z-index: 1080 !important; } /* إعادة تعيين متغيرات الصفحات القديمة */ body.student-theme { --primary: var(--st-teal) !important; --primary-dark: var(--st-teal-deep) !important; --primary-color: var(--st-teal) !important; --secondary: var(--st-teal-deep) !important; --secondary-color: var(--st-teal-deep) !important; --accent: var(--st-coral) !important; --accent-color: var(--st-coral) !important; --success: var(--st-success) !important; --success-color: var(--st-success) !important; --text: var(--st-ink) !important; --text-dark: var(--st-ink) !important; --muted: var(--st-muted) !important; --text-secondary: var(--st-muted) !important; --orange: var(--st-coral) !important; --surface: rgba(255, 255, 255, 0.92) !important; --surface-muted: rgba(255, 255, 255, 0.85) !important; --card-bg: rgba(255, 255, 255, 0.92) !important; --bg-card: rgba(255, 255, 255, 0.92) !important; --bg-body: transparent !important; --bg-gradient-start: #e8f7f6 !important; --bg-gradient-end: #fff7ed !important; --gradient: linear-gradient(135deg, var(--st-teal), #0891b2) !important; --gradient-light: linear-gradient(135deg, var(--st-teal), var(--st-sky)) !important; --shadow: var(--st-shadow) !important; --shadow-sm: 0 8px 18px rgba(15, 42, 51, 0.08) !important; --shadow-md: var(--st-shadow) !important; --shadow-lg: 0 24px 50px rgba(15, 42, 51, 0.16) !important; --radius-lg: 24px !important; --radius-md: 18px !important; --radius-sm: 14px !important; --border-radius: 22px !important; --glow: var(--st-glow) !important; } /* بطاقات / حاويات */ body.student-theme .card, body.student-theme .main-card, body.student-theme .content-card, body.student-theme .feature-card, body.student-theme .stat-card, body.student-theme .info-card, body.student-theme .panel, body.student-theme .box, body.student-theme .container-card, body.student-theme .profile-card, body.student-theme .dashboard-card, body.student-theme .menu-card, body.student-theme .option-card, body.student-theme .level-card, body.student-theme .white-card { background: rgba(255, 255, 255, 0.92) !important; border-radius: var(--st-radius) !important; box-shadow: var(--st-shadow) !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; } /* عناوين */ body.student-theme h1, body.student-theme .page-title, body.student-theme .brand, body.student-theme .hero-title, body.student-theme .main-title { background: linear-gradient(120deg, var(--st-teal-deep), #0369a1 55%, var(--st-coral)); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; } /* أزرار */ body.student-theme .btn-primary, body.student-theme .btn.btn-primary, body.student-theme a.btn-primary, body.student-theme button.primary, body.student-theme .primary-btn, body.student-theme .start-btn, body.student-theme .cta-btn { background: linear-gradient(135deg, var(--st-coral), var(--st-coral-hot)) !important; color: #fff !important; border: none !important; border-radius: 16px !important; font-weight: 800 !important; box-shadow: 0 12px 24px rgba(249, 115, 22, 0.32) !important; } body.student-theme .btn-success, body.student-theme .btn-teal, body.student-theme .btn-info { background: linear-gradient(135deg, var(--st-teal), #0891b2) !important; color: #fff !important; border: none !important; border-radius: 14px !important; font-weight: 800 !important; } body.student-theme .btn-secondary, body.student-theme .btn-outline, body.student-theme .btn-light { background: #ecfeff !important; color: var(--st-teal-deep) !important; border: 1px solid #99f6e4 !important; border-radius: 14px !important; font-weight: 800 !important; } body.student-theme .back-button, body.student-theme a.back-button, body.student-theme .btn-back { background: rgba(255, 255, 255, 0.92) !important; color: var(--st-teal-deep) !important; border-radius: 999px !important; font-weight: 800 !important; box-shadow: var(--st-shadow) !important; border: 1px solid rgba(15, 42, 51, 0.08) !important; } /* شارات / نقاط */ body.student-theme .badge, body.student-theme .points-chip, body.student-theme .chip, body.student-theme .points-badge { background: linear-gradient(135deg, var(--st-teal), var(--st-teal-deep)) !important; color: #fff !important; border-radius: 999px !important; font-weight: 800 !important; } /* حقول */ body.student-theme input[type="text"], body.student-theme input[type="email"], body.student-theme input[type="password"], body.student-theme input[type="number"], body.student-theme select, body.student-theme textarea, body.student-theme .form-control, body.student-theme .form-select { border: 2px solid #d1e7ea !important; border-radius: 14px !important; font-family: 'Tajawal', sans-serif !important; background: #fff !important; } body.student-theme input:focus, body.student-theme select:focus, body.student-theme textarea:focus, body.student-theme .form-control:focus, body.student-theme .form-select:focus { border-color: var(--st-teal) !important; box-shadow: 0 0 0 4px var(--st-glow) !important; outline: none !important; } /* شريط تقدم */ body.student-theme .progress, body.student-theme .progress-bar, body.student-theme .progress-fill { border-radius: 999px !important; } body.student-theme .progress-bar, body.student-theme .progress-fill { background: linear-gradient(90deg, var(--st-teal), var(--st-sky)) !important; } /* روابط */ body.student-theme a { color: var(--st-teal-deep); } body.student-theme a:hover { color: var(--st-coral); } /* Bootstrap navbar إن وُجد */ body.student-theme .navbar, body.student-theme .navbar-dark { background: rgba(255, 255, 255, 0.9) !important; box-shadow: var(--st-shadow) !important; } body.student-theme .navbar-dark .navbar-brand, body.student-theme .navbar-dark .nav-link { color: var(--st-teal-deep) !important; } /* إخفاء فقاعات الخلفية القديمة إن وُجدت */ body.student-theme .bg-animation .bg-bubble { background: linear-gradient(135deg, rgba(13, 148, 136, 0.12), rgba(249, 115, 22, 0.1)) !important; } /* جداول */ body.student-theme table thead, body.student-theme .table thead { background: linear-gradient(135deg, var(--st-teal), #0891b2) !important; color: #fff !important; } body.student-theme table th { color: #fff !important; border: none !important; } /* ودجت المساعد الذكي داخل صفحات الطالب */ body.student-theme .ai-tutor-fab, body.student-theme .ai-tutor-header, body.student-theme .ai-tutor-btn-start, body.student-theme .ai-tutor-btn-next, body.student-theme .ai-tutor-send { background: linear-gradient(135deg, var(--st-teal), #0891b2) !important; } body.student-theme .ai-tutor-step.current { background: var(--st-teal) !important; } body.student-theme .bg-primary, body.student-theme .card-header.bg-primary, body.student-theme .badge.bg-primary { background: linear-gradient(135deg, var(--st-teal), #0891b2) !important; } body.student-theme .text-primary { color: var(--st-teal-deep) !important; } /* عناوين في رأس الصفحة الداكن تبقى بيضاء */ body.student-theme .hero-card h1, body.student-theme .hero-card h2, body.student-theme .hero-card p, body.student-theme .hero-card__title, body.student-theme .hero-card__subtitle { background: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }