/** * ======================================== * Al-Aref Design System v3.0 — منصة العارف / Gen-Z * ======================================== * Bold, high-contrast Arabic EdTech for a Gen-Z audience * * Philosophy: * - Warm, paper-like backgrounds (no harsh whites) * - Soft, diffused shadows for floating elements * - Generous whitespace for breathing room * - Rounded, friendly shapes * - Beautiful Arabic typography * ======================================== */ /* ==================== CSS Variables - The "Soft & Creamy" Palette ==================== */ :root { /* ====== BACKGROUND COLORS - The "Warm Paper" Feel ====== */ --bg-cream: var(--tc-bg, #F6F4FF); --bg-cream-soft: #FBFAFF; --bg-cream-warm: #EFEBFF; --bg-surface: var(--tc-surface, #FFFFFF); --bg-surface-hover: #FBFAFF; /* ====== PRIMARY BRAND - Maps to tenant primary ====== */ --primary-50: color-mix(in srgb, var(--tc-primary, #7C5CFF) 8%, transparent); --primary-100: color-mix(in srgb, var(--tc-primary, #7C5CFF) 15%, transparent); --primary-200: color-mix(in srgb, var(--tc-primary, #7C5CFF) 30%, transparent); --primary-300: color-mix(in srgb, var(--tc-primary, #7C5CFF) 50%, transparent); --primary-400: color-mix(in srgb, var(--tc-primary, #7C5CFF) 75%, transparent); --primary-500: var(--tc-primary, #7C5CFF); --primary-600: color-mix(in srgb, var(--tc-primary, #7C5CFF) 85%, black); --primary-700: color-mix(in srgb, var(--tc-primary, #7C5CFF) 70%, black); --primary-800: color-mix(in srgb, var(--tc-primary, #7C5CFF) 55%, black); --primary-900: color-mix(in srgb, var(--tc-primary, #7C5CFF) 40%, black); /* ====== ACCENT - Maps to tenant accent ====== */ --accent-50: color-mix(in srgb, var(--tc-accent, #FF5CA8) 8%, transparent); --accent-100: color-mix(in srgb, var(--tc-accent, #FF5CA8) 15%, transparent); --accent-200: color-mix(in srgb, var(--tc-accent, #FF5CA8) 30%, transparent); --accent-300: color-mix(in srgb, var(--tc-accent, #FF5CA8) 50%, transparent); --accent-400: color-mix(in srgb, var(--tc-accent, #FF5CA8) 75%, transparent); --accent-500: var(--tc-accent, #FF5CA8); --accent-600: color-mix(in srgb, var(--tc-accent, #FF5CA8) 85%, black); --accent-700: color-mix(in srgb, var(--tc-accent, #FF5CA8) 70%, black); /* ====== TEXT COLORS - Maps to tenant text colors ====== */ --text-heading: var(--tc-text, #150F3D); --text-body: var(--tc-text-secondary, #5A5384); --text-muted: var(--tc-text-secondary, #5A5384); --text-placeholder: #9C95C4; --text-inverse: #FFFFFF; /* ====== STATUS COLORS - Soft Variants ====== */ --success: #10B981; --success-soft: rgba(16, 185, 129, 0.1); --warning: #F59E0B; --warning-soft: rgba(245, 158, 11, 0.1); --error: #EF4444; --error-soft: rgba(239, 68, 68, 0.1); --info: #3B82F6; --info-soft: rgba(59, 130, 246, 0.1); /* ====== TYPOGRAPHY - Beautiful Arabic ====== */ --font-family: var(--tc-font-body, 'Cairo'), 'Almarai', 'Tajawal', sans-serif; --font-family-heading: var(--tc-font-heading, 'Rubik'), 'Almarai', sans-serif; /* Font Sizes - Harmonious Scale */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ /* Font Weights */ --font-light: 300; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Line Heights - Comfortable Reading */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; --leading-loose: 2; /* ====== SPACING - Generous Whitespace ====== */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ====== BORDER RADIUS - Friendly Roundness ====== */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 9999px; /* ====== SHADOWS - Soft Elevation (Floating Effect) ====== */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.10), 0 8px 16px rgba(0, 0, 0, 0.05); --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.12), 0 12px 24px rgba(0, 0, 0, 0.06); /* Colored Shadows */ --shadow-primary: 0 8px 24px color-mix(in srgb, var(--tc-primary, #7C5CFF) 25%, transparent); --shadow-accent: 0 8px 24px color-mix(in srgb, var(--tc-accent, #FF5CA8) 25%, transparent); /* ====== BORDERS ====== */ --border-light: var(--tc-border, #EFEBFF); --border-default: var(--tc-border, #E6E0FF); --border-dark: #CFC5FF; /* ====== TRANSITIONS - Smooth & Natural ====== */ --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); --transition-fast: 150ms var(--ease-out); --transition-normal: 250ms var(--ease-out); --transition-slow: 400ms var(--ease-out); /* ====== Z-INDEX Scale ====== */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; } /* ==================== BASE STYLES ==================== */ html { direction: rtl; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-family); font-size: var(--text-base); font-weight: var(--font-regular); line-height: var(--leading-relaxed); color: var(--text-body); background-color: var(--bg-cream); } /* Dark theme body background */ [data-theme='dark'] body, body[data-theme='dark'] { background-color: var(--tc-bg) !important; color: var(--tc-text) !important; } /* Headings - Beautiful Arabic Typography */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-heading); /* قالب (٢٠٢٦-٠٩-١٧): وزن العنوان بيتقرا من القالب — «سبورة» عايز ٣٠٠ خفيف معماري، «كتّاب» ٦٠٠. الفولباك ٧٠٠ نفس --font-bold الأصلي. */ font-weight: var(--tc-heading-weight, 700); color: var(--text-heading); line-height: var(--leading-tight); letter-spacing: -0.01em; } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-base); } /* Paragraph styling */ p { color: var(--text-body); line-height: var(--leading-relaxed); } /* Links */ a { color: var(--primary-600); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--primary-700); } /* Selection */ ::selection { background: var(--primary-200); color: var(--primary-900); } /* ==================== COMPONENT STYLES ==================== */ /* ====== BUTTONS - Pill-shaped & Soft ====== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); font-family: var(--font-family); font-size: var(--text-base); font-weight: var(--font-semibold); line-height: 1; border: none; /* قالب: --radius-xl (٢٠px) كان هنا ثابت — بقى فولباك بس، والقيمة الحقيقية من tenant.preset (base.html). */ border-radius: var(--tc-radius-button, var(--radius-xl)); cursor: pointer; transition: all var(--transition-normal); white-space: nowrap; min-height: 48px; } .btn-primary { background: linear-gradient(135deg, var(--primary-500), var(--primary-600)); /* حبر محسوب من لون المنصة (Tenant.primary_ink) — أبيض ثابت كان بيختفي على أساسي فاتح. */ color: var(--tc-primary-ink, var(--text-inverse)); box-shadow: var(--shadow-primary); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-600), var(--primary-700)); transform: translateY(-2px); box-shadow: 0 12px 32px color-mix(in srgb, var(--tc-primary, #7C5CFF) 35%, transparent); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: var(--bg-surface); color: var(--text-heading); border: 2px solid var(--border-default); box-shadow: var(--shadow-sm); } .btn-secondary:hover { background: var(--bg-cream-warm); border-color: var(--primary-300); color: var(--primary-700); } /* ٢٠٢٦-٠٩-١٧: instructor/manage_course.html بيستخدم .btn-success/-warning/-info (نشر/إخفاء/أرشفة الحصة) من غير ما تتعرّف هنا خالص — الأزرار دي كانت بترجع لشكل .btn الافتراضي، عمود منتظم مالوش تمييز حالة. ألوان الحالة (--success/ --warning/--error) موجودة بالفعل (السطر ٥٥-٥٩)، مستخدمة هنا بس. */ .btn-success { background: var(--success); color: #fff; } .btn-success:hover { background: color-mix(in srgb, var(--success) 85%, black); } .btn-warning { background: var(--warning); color: #fff; } .btn-warning:hover { background: color-mix(in srgb, var(--warning) 85%, black); } .btn-info { background: var(--tc-primary, var(--primary-500)); color: #fff; } .btn-info:hover { background: color-mix(in srgb, var(--tc-primary, var(--primary-500)) 85%, black); } .btn-accent { background: linear-gradient(135deg, var(--accent-500), var(--accent-600)); color: var(--text-inverse); box-shadow: var(--shadow-accent); } .btn-accent:hover { background: linear-gradient(135deg, var(--accent-600), var(--accent-700)); transform: translateY(-2px); box-shadow: 0 12px 32px color-mix(in srgb, var(--tc-accent, #FF5CA8) 35%, transparent); } .btn-ghost { background: transparent; color: var(--primary-600); } .btn-ghost:hover { background: var(--primary-50); } /* Button Sizes */ .btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); min-height: 36px; border-radius: var(--radius-lg); } .btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); min-height: 56px; border-radius: var(--radius-2xl); } /* ====== CARDS - Floating on Cream Background ====== */ .card { background: var(--bg-surface); border-radius: var(--tc-radius-card, var(--radius-xl)); padding: var(--space-6); box-shadow: var(--tc-shadow-md, var(--shadow-md)); border-width: var(--tc-border-width, 1px); border-style: solid; border-color: var(--border-light); transition: all var(--transition-normal); } .card:hover { transform: translateY(-4px); box-shadow: var(--tc-shadow-xl, var(--shadow-xl)); } .card-interactive:hover { border-color: var(--primary-200); } .card-flat { box-shadow: none; border: 1px solid var(--border-default); } .card-flat:hover { box-shadow: var(--shadow-md); transform: none; } /* ====== INPUTS - Soft & Rounded ====== */ .input { width: 100%; padding: var(--space-4); font-family: var(--font-family); font-size: var(--text-base); color: var(--text-heading); background: var(--bg-surface); border: 2px solid var(--border-default); border-radius: var(--tc-radius-input, var(--radius-lg)); transition: all var(--transition-normal); } .input::placeholder { color: var(--text-placeholder); } .input:hover { border-color: var(--border-dark); } .input:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 4px var(--primary-50); } .input-error { border-color: var(--error); } .input-error:focus { box-shadow: 0 0 0 4px var(--error-soft); } /* ====== BADGES - Soft Pills ====== */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: var(--font-semibold); border-radius: var(--radius-full); } .badge-primary { background: var(--primary-100); color: var(--primary-700); } .badge-success { background: var(--success-soft); color: var(--success); } .badge-warning { background: var(--warning-soft); color: var(--warning); } .badge-error { background: var(--error-soft); color: var(--error); } /* ====== SECTION BACKGROUNDS ====== */ .bg-cream { background-color: var(--bg-cream); } .bg-cream-warm { background-color: var(--bg-cream-warm); } .bg-surface { background-color: var(--bg-surface); } .bg-gradient-soft { background: linear-gradient(180deg, var(--bg-cream) 0%, var(--bg-cream-warm) 100%); } .bg-gradient-hero { background: linear-gradient(135deg, var(--bg-cream) 0%, var(--primary-50) 50%, var(--bg-cream-warm) 100%); } /* ==================== UTILITY CLASSES ==================== */ /* Text Colors */ .text-heading { color: var(--text-heading); } .text-body { color: var(--text-body); } .text-muted { color: var(--text-muted); } .text-primary { color: var(--primary-600); } .text-accent { color: var(--accent-500); } /* Shadows */ .shadow-soft { box-shadow: var(--shadow-md); } .shadow-float { box-shadow: var(--shadow-lg); } .shadow-elevated { box-shadow: var(--shadow-xl); } /* Spacing helpers */ .section-padding { padding-top: var(--space-16); padding-bottom: var(--space-16); } .container-padding { padding-left: var(--space-6); padding-right: var(--space-6); } /* ==================== ANIMATIONS ==================== */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-float { animation: float 6s ease-in-out infinite; } .animate-pulse-soft { animation: pulse-soft 3s ease-in-out infinite; } .animate-fade-in { animation: fade-in 0.3s ease-out; } .animate-slide-up { animation: slide-up 0.4s ease-out; } /* ==================== RESPONSIVE ==================== */ @media (max-width: 768px) { :root { --text-4xl: 2rem; --text-3xl: 1.5rem; --text-2xl: 1.25rem; --space-16: 3rem; --space-20: 4rem; } .section-padding { padding-top: var(--space-12); padding-bottom: var(--space-12); } } /* ==================== LINE CLAMP ==================== */ .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ==================== SCROLLBAR ==================== */ .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } /* Beautiful Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-cream-warm); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb { background: var(--primary-300); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--primary-400); } /* «Gen-Z layer» (.gz-*, ~26 قاعدة) اتشالت ٢٠٢٦-٠٩-١٧ — صفر استخدام في أي قالب. معاها --tc-gradient-hype/--tc-radius/--tc-radius-lg (نفس البلوك، زيهم صفر استخدام، وأسماء ملوّتة مع --tc-radius-button/card/input الجداد). ⚠️ --tc-gradient نفسها اتشالت من هنا في نفس الكومِت بنفس التعليق — والتعليق كان غلط: سبع صفحات (saas/settings, saas/domains, saas/payments, payments/return, payments/transfer, payments/transfer_status, dashboard/referrals) بتقرا var(--tc-gradient, ...)، فلما اتشالت من هنا الاحتياطي البنفسجي/الوردي الثابت بقى بيترسم على كل منصة بدل لونها. رجعت تتعرّف في base.html:121 مشتقة من --tc-primary/--tc-accent. الدرس: تأكيد «صفر استخدام» لازم يشمل كل الـ`templates/` مش المجلد اللي بتشتغل فيه بس. */ /* ============================================================================ فيسليفت واجهة الطالب — طبقة التوكنز ============================================================================ كل حاجة هنا تحت ``.theme-student``، واللي base.html بيحطه على الـbody لصفحات الطالب بس. صفحات ``/instructor/`` و``/management/`` و``/admin`` بتفضل على :root بالحرف — ده مش تنظيم، ده الشرط: الأدمن لوحده بيستعمل .btn و.card ٤٨ مرة، وقوالب المدرس بتستعمل توكنز اللون ٢٤ مرة للقالب. **ليه بتتعاد كتابة السلّم المشتق كله؟** الخصائص المخصّصة بتتوارث كـ*قيمة محسوبة*. ``--primary-500: var(--tc-primary)`` بتتحسب عند :root بقيمة :root، والـbody بيرث الناتج — فتغيير ``--tc-primary`` على الـbody لوحده مابيعيدش حساب أي حاجة مشتقة منه. فلازم كل توكن متغيّر يتعاد تعريفه هنا صراحة. **الألوان مكتوبة صراحة مش من صف الـtenant.** الـtenant الحالي مثبّت ``primary_color = #7C5CFF``، فالافتراضي في القالب عمره ما بيشتغل. تغييره في الداتابيز كان هيغيّر الأدمن كمان. لو اتضاف tenant تاني عايز باليتة طالب خاصة بيه، الكتلة دي هي مكان الوصل. التشخيص اللي الأرقام دي جاية منه: * أقوى ظل في النظام كان 0.06 ألفا — شفاف تقريباً. * حد الكارت #EFEBFF على أرضية #F6F4FF = فرق 3٪. * الوردي كان معرّف ومش مستعمل: صفحة بلون واحد. * أقصى وزن عنوان 700، و Almarai 800 محمّلة عندنا ومش بتتنده. ========================================================================== */ .theme-student { /* ── الأساسي: بيوصل من :root (لون المنصة) — الفيسليفت مابيكتبش فوقه ──── كان مكتوب هنا #6B3FFF بالحرف، فأي منصة عميل اختارت لون تاني كانت بتفضل بنفسجية. الافتراضي نفسه (#6B3FFF) بقى في Tenant.BRAND_PRIMARY. كل المشتقات لازم تتعاد هنا لأن الخاصية المخصّصة بتتوارث كقيمة محسوبة. */ --primary-50: color-mix(in srgb, var(--tc-primary, #6B3FFF) 8%, transparent); --primary-100: color-mix(in srgb, var(--tc-primary, #6B3FFF) 15%, transparent); --primary-200: color-mix(in srgb, var(--tc-primary, #6B3FFF) 30%, transparent); --primary-300: color-mix(in srgb, var(--tc-primary, #6B3FFF) 50%, transparent); --primary-400: color-mix(in srgb, var(--tc-primary, #6B3FFF) 75%, transparent); --primary-500: var(--tc-primary, #6B3FFF); --primary-600: color-mix(in srgb, var(--tc-primary, #6B3FFF) 88%, black); --primary-700: color-mix(in srgb, var(--tc-primary, #6B3FFF) 76%, black); --primary-800: color-mix(in srgb, var(--tc-primary, #6B3FFF) 62%, black); --primary-900: color-mix(in srgb, var(--tc-primary, #6B3FFF) 48%, black); /* ── الحبر الغامق والوهج: مشتقين من الأساسي عشان الهيرو والنافبار يبقوا بلون المنصة مش بنفسجي العارف ──────────────────────────── */ --tc-ink: color-mix(in srgb, var(--tc-primary, #6B3FFF) 34%, #07051A); --tc-ink-2: color-mix(in srgb, var(--tc-primary, #6B3FFF) 48%, #0B0820); --tc-glow: color-mix(in srgb, var(--tc-primary, #6B3FFF) 62%, white); /* ── الثانوي: عسلي، لون الفعل والإنجاز ───────────────────────────── بييجي من :root كـ--tc-honey (اللون الثانوي بتاع المنصة، أو عسلي العارف). محجوز للأزرار والتقدّم والشارات — لو اتحط في كل حتة بيقرا كلعبة. */ --honey-50: color-mix(in srgb, var(--tc-honey, #FFB020) 10%, white); --honey-100: color-mix(in srgb, var(--tc-honey, #FFB020) 18%, white); --honey-200: color-mix(in srgb, var(--tc-honey, #FFB020) 40%, white); --honey-400: color-mix(in srgb, var(--tc-honey, #FFB020) 80%, white); --honey-500: var(--tc-honey, #FFB020); --honey-600: color-mix(in srgb, var(--tc-honey, #FFB020) 85%, black); --honey-700: color-mix(in srgb, var(--tc-honey, #FFB020) 65%, black); --honey-ink: var(--tc-honey-ink, #3A2500); /* ── التمييز: وردي، من :root برضه ──────────────────────────────── */ --accent-50: color-mix(in srgb, var(--tc-accent, #FF4F9A) 8%, transparent); --accent-100: color-mix(in srgb, var(--tc-accent, #FF4F9A) 15%, transparent); --accent-200: color-mix(in srgb, var(--tc-accent, #FF4F9A) 30%, transparent); --accent-300: color-mix(in srgb, var(--tc-accent, #FF4F9A) 50%, transparent); --accent-400: color-mix(in srgb, var(--tc-accent, #FF4F9A) 75%, transparent); --accent-500: var(--tc-accent, #FF4F9A); --accent-600: color-mix(in srgb, var(--tc-accent, #FF4F9A) 88%, black); --accent-700: color-mix(in srgb, var(--tc-accent, #FF4F9A) 74%, black); /* ── الحالات ─────────────────────────────────────────────────── */ --success: #12B76A; --success-soft: rgba(18, 183, 106, 0.12); --warning: #F59300; --warning-soft: rgba(245, 147, 0, 0.12); --error: #E5484D; --error-soft: rgba(229, 72, 77, 0.12); /* ── الحبر والأرضية: من :root (المنصة)، والمشتقات بتتعاد هنا ─────── */ --text-heading: var(--tc-text, #14103A); --text-body: var(--tc-text-secondary, #56507E); --text-muted: color-mix(in srgb, var(--tc-text-secondary, #56507E) 70%, var(--tc-bg, #F4F1FF)); --text-placeholder: color-mix(in srgb, var(--tc-text-secondary, #56507E) 55%, var(--tc-bg, #F4F1FF)); --bg-cream: var(--tc-bg, #F4F1FF); --bg-cream-soft: color-mix(in srgb, var(--tc-bg, #F4F1FF) 60%, white); --bg-cream-warm: color-mix(in srgb, var(--tc-bg, #F4F1FF) 85%, var(--tc-primary, var(--tc-primary))); --bg-surface-hover: color-mix(in srgb, var(--tc-bg, #F4F1FF) 60%, white); /* حد مشتق من لون النص بدل هيكس ثابت (نفس فكرة الدرجة ٦ في سلّم Radix Colors: الحد = لون النص بشفافية). الأقسام المسطّحة في الرئيسية والكتالوج بتستعمل ده بدل ``--tc-border`` تحديداً. */ --tc-line: color-mix(in srgb, var(--tc-text, #14103A) 12%, transparent); /* 2026-09-17: ``--tc-border``/``--border-*`` كانوا هيكس بنفسجي فاتح ثابت هنا (``#E0D8FB``) بيعيد تعريف ``--tc-border`` اللي أصلاً متعرّف على ``:root`` من ``Tenant.border_color`` (``base.html``) — فحد كل كارت في المنتج كان ليلكي بغض النظر عن لون المنصة، وعلى ثيم غامق (زي «سبورة») كان بيطلع خط بنفسجي فاتح غريب فوق كارت غامق. ``--tc-border`` بقى بيوصل من ``:root`` من غير إعادة تعريف، والتلاتة اللي بعده بقوا مشتقين منه. */ --border-light: color-mix(in srgb, var(--tc-border, #E0D8FB) 80%, white); --border-default: var(--tc-border, #E0D8FB); --border-dark: color-mix(in srgb, var(--tc-border, #E0D8FB) 85%, black); /* ── الظلال: ملوّنة بلون المنصة، مش سوداء ─────────────────────── ظل أسود على أرضية ملوّنة بيقرا كوسخ مش كعمق. والألفا اترفعت من 0.04–0.12 لمدى بيبان فعلاً. 2026-09-22: كانت ``rgba(74, 33, 214, …)`` بالحرف — بنفسجي العارف — فكل قالب (حتى اللي ``shadow_style='none'``) كان بيترسم تحت كروته وأزراره هالة بنفسجي. دلوقتي الصبغة من ``--primary-700`` (عند العارف ≈ نفس البنفسجي القديم)، والطبقة الأولى في كل ظل هي ``var(--tc-shadow-sm)`` من base.html. Why the first layer is var(--tc-shadow-sm): it is the only switch the preset gives CSS. With shadow_style 'soft' it is a 1px 5%-black hairline (the same job the old 1px 4%-purple layer did). With 'none' it is the keyword `none`, and "none, 0 4px 10px …" is not a valid box-shadow list, so every box-shadow reading these tokens becomes invalid at computed-value time and falls back to its initial value: no shadow. One token turns off the whole family without a template class. The fallback keeps pages that render outside base.html's token block (none today) on the soft look rather than on nothing. */ --shadow-gate: var(--tc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)); --shadow-tint: var(--primary-700); --shadow-xs: var(--shadow-gate); --shadow-sm: var(--shadow-gate), 0 4px 10px color-mix(in srgb, var(--shadow-tint) 7%, transparent); --shadow-md: var(--shadow-gate), 0 12px 28px color-mix(in srgb, var(--shadow-tint) 10%, transparent); --shadow-lg: var(--shadow-gate), 0 20px 44px color-mix(in srgb, var(--shadow-tint) 16%, transparent); --shadow-xl: var(--shadow-gate), 0 32px 64px color-mix(in srgb, var(--shadow-tint) 20%, transparent); --shadow-2xl: var(--shadow-gate), 0 44px 88px color-mix(in srgb, var(--shadow-tint) 24%, transparent); --shadow-primary: var(--shadow-gate), 0 6px 18px color-mix(in srgb, var(--tc-primary) 38%, transparent); --shadow-accent: var(--shadow-gate), 0 6px 18px color-mix(in srgb, var(--tc-accent) 34%, transparent); --shadow-honey: var(--shadow-gate), 0 6px 18px color-mix(in srgb, var(--tc-honey) 42%, transparent); /* نسخ الهوفر من نفس البوابة — الهوفر كان بيرجّع الهالة البنفسجي حتى على القالب اللي ظلاله مقفولة. */ --shadow-primary-hover: var(--shadow-gate), 0 10px 26px color-mix(in srgb, var(--tc-primary) 50%, transparent); --shadow-honey-hover: var(--shadow-gate), 0 16px 40px color-mix(in srgb, var(--tc-honey) 55%, transparent); --shadow-ink: var(--shadow-gate), 0 10px 28px color-mix(in srgb, var(--tc-ink) 32%, transparent); --shadow-ink-hover: var(--shadow-gate), 0 16px 38px color-mix(in srgb, var(--tc-ink) 45%, transparent); /* ── الخط ────────────────────────────────────────────────────── Almarai الأول للاتنين. الأسماء اللي كانت متحطة قبله مالهاش لازمة هنا: Rubik مالهاش حروف عربية أصلاً، فكل عنوان عربي كان بيستنى رحلة لجوجل بتفشل وبيقع على Almarai المحمّلة عندنا من الأول. وAlmarai 800 موجودة في static/fonts ومكانتش بتتنده. */ --font-family: 'Almarai', 'Cairo', 'Tajawal', system-ui, sans-serif; --font-family-heading: 'Almarai', 'Cairo', system-ui, sans-serif; --font-extrabold: 800; /* ودول كمان، لأن الـbody بيقرا منهم مباشرة في السطر الـinline بتاعه (``style="font-family: var(--tc-font-body)"``). تعريف --font-family لوحده مكانش بيوصل للصفحة خالص. */ --tc-font-body: 'Almarai', 'Cairo', 'Tajawal', system-ui, sans-serif; --tc-font-heading: 'Almarai', 'Cairo', system-ui, sans-serif; /* ── التدرّجات ───────────────────────────────────────────────────── الدرجة التانية كانت هيكس بنفسجي/برتقالي ثابت (``#4A21D6``/``#F59300``) — يعني ``.btn-primary`` (مستخدم في كل صفحات الطالب) كان بيرسم تدرّج من لون المنصة *لبنفسجي العارف* لأي تينانت غيره، مش بلونه هو. اتبدّلوا بتوكنز مشتقة موجودة بالفعل (``--primary-700``/``--honey-600``) زي باقي درجات نفس اللوحة فوق. */ --grad-brand: linear-gradient(135deg, var(--tc-primary), var(--primary-700)); --grad-honey: linear-gradient(135deg, var(--tc-honey), var(--honey-600)); --grad-progress: linear-gradient(90deg, var(--tc-primary), var(--tc-honey)); } /* الأرضية والحبر على الـbody نفسه: الوسم بيحط لونه inline من --tc-*، واللي فوق بيعيد تعريفها فالسطر الـinline بياخد الجديد من غير ما يتلمس. */ .theme-student { background-color: var(--tc-bg); color: var(--text-body); } /* ============================================================================ فيسليفت واجهة الطالب — طبقة المكوّنات ============================================================================ كله تحت ``.theme-student`` زي طبقة التوكنز، وللسبب نفسه: الأدمن بيستعمل .btn و.card ٤٨ مرة، فأي قاعدة من غير النطاق بتوصله. القواعد هنا بتغيّر **الشكل** بس: زوايا، ظلال، أوزان، ألوان، وحركة الهوفر. ولا قاعدة واحدة بتلمس المسافات اللي بتحرّك التخطيط (padding/margin/عرض)، لأن ده هيزحزح العناصر — والشرط إن الهيكل زي ما هو. ========================================================================== */ /* ── العناوين ───────────────────────────────────────────────────── ٨٢ عنوان في قوالب الطالب. الوزن ٨٠٠ موجود في static/fonts من زمان ومكانش بيتنده، والتقليل البسيط في تباعد الحروف بيخلي العربي التقيل يقرا مضغوط بدل ما يبان متفكك. */ .theme-student h1, .theme-student h2, .theme-student h3 { font-family: var(--font-family-heading); /* قالب (٢٠٢٦-٠٩-١٧): كان --font-extrabold (٨٠٠) ثابت. */ font-weight: var(--tc-heading-weight, 800); letter-spacing: -0.02em; color: var(--text-heading); } .theme-student h1 { letter-spacing: -0.03em; } /* ── الأزرار ────────────────────────────────────────────────────── قالب (٢٠٢٦-٠٩-١٧): كان pill ثابت (--radius-full) للكل — دلوقتي بيتقرا من tenant.preset («سبورة» زوايا صفر، «كرّاسة»/«كتّاب» كبسولة لسه، «العارف» فاضل pill بالفولباك). */ .theme-student .btn { border-radius: var(--tc-radius-button, var(--radius-full)); font-family: var(--font-family-heading); /* زرار مش عنوان — وزنه ثابت بغض النظر عن --tc-heading-weight، وإلا زرار «سبورة» (وزن ٣٠٠) كان هيبان رفيع يصعب قراءته. */ font-weight: var(--font-extrabold); transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast); } .theme-student .btn:hover { transform: translateY(-2px); } .theme-student .btn:active { transform: translateY(0); } .theme-student .btn-primary { background: var(--grad-brand); box-shadow: var(--shadow-primary); } .theme-student .btn-primary:hover { box-shadow: var(--shadow-primary-hover); } .theme-student .btn-secondary { background: var(--bg-surface); color: var(--primary-700); border: 2px solid var(--border-default); box-shadow: var(--shadow-sm); } .theme-student .btn-secondary:hover { border-color: var(--primary-300); } /* زرار الإنجاز. مالوش استعمال في القوالب دلوقتي — موجود عشان يتنده عليه في لحظات المكافأة (خلّصت الكورس، استلم شهادتك) من غير CSS جديد. */ .theme-student .btn-honey { background: var(--grad-honey); color: var(--honey-ink); box-shadow: var(--shadow-honey); } .theme-student .btn-honey:hover { box-shadow: var(--shadow-honey-hover); } /* ── الكروت ─────────────────────────────────────────────────────── الظل بقى بيبان، والحد بقى بيفرق عن الأرضية. الرفعة على الهوفر هي اللي بتخلي الكارت يقرا كحاجة تتضغط. */ .theme-student .card { border-radius: var(--tc-radius-card, var(--radius-xl)); box-shadow: var(--tc-shadow-md, var(--shadow-md)); border-width: var(--tc-border-width, 1px); border-style: solid; border-color: var(--border-light); transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); } /* الرفعة على الكروت اللي بتتضغط بس. الكارت اللي مش رايح لحتة لما يتحرك بيوعد بحاجة مش موجودة. */ .theme-student a > .card:hover, .theme-student .card-interactive:hover, .theme-student a.card:hover { transform: translateY(-3px); box-shadow: var(--tc-shadow-lg, var(--shadow-lg)); border-color: var(--primary-200); } /* ── الشارات ──────────────────────────────────────────────────────── */ .theme-student .badge { font-weight: var(--font-extrabold); } .theme-student .badge-primary { background: var(--primary-100); color: var(--primary-700); } .theme-student .badge-success { background: var(--success-soft); color: var(--success); } .theme-student .badge-warning { background: var(--honey-100); color: var(--honey-700); } .theme-student .badge-honey { background: var(--honey-100); color: var(--honey-700); } /* ── أشرطة التقدّم ──────────────────────────────────────────────── بنفسجي → عسلي: الشريط بيمشي ناحية لون الإنجاز وهو بيقرب من التمام، فاللون نفسه بيقول «قربت» من غير أي نص. */ .theme-student progress::-webkit-progress-value, .theme-student .progress-bar > span, .theme-student .progress-fill, .theme-student [class*="progress"] > [style*="width"] { background-image: var(--grad-progress); } /* ── الروابط ──────────────────────────────────────────────────────── */ .theme-student a:not(.btn):not(.card):hover { color: var(--primary-600); } /* ── التركيز ────────────────────────────────────────────────────── طالب بيمشي بالكيبورد لازم يشوف هو فين. اللون بقى أغمق فالحلقة بقت أوضح على الأبيض. */ .theme-student :focus-visible { outline: 3px solid var(--primary-300); outline-offset: 2px; border-radius: var(--radius-sm); } /* اللي مبرمج جهازه على «قلّل الحركة» مايتهزّش له حاجة. */ @media (prefers-reduced-motion: reduce) { .theme-student .btn:hover, .theme-student a > .card:hover, .theme-student .card-interactive:hover, .theme-student a.card:hover { transform: none; } } /* ============================================================================ الصفحة الرئيسية الجديدة ============================================================================ الفكرة اللي الملف ده كله ماشي عليها: القارئ لازم يعرف إنه دخل قسم جديد من غير ما يقرا عنوان. اللي كان موجود كان كل أقسامه أرضية بيضا وشبكة تلات أعمدة، فبيقرا كجدول بيانات طويل. هنا الأرضية بتتغيّر تحته: غامق، فاتح، مبيّض، عسلي — والتباين ده هو الفاصل. ========================================================================== */ .theme-student .shell { max-width: 78rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } /* ── ١. الهيرو — تبسيط جذري بطلب مباشر من العميل ─────────────────── الشكل القديم (بادچات عايمة + صورة + توهّج خلفية) اتشال بالكامل. الهيرو دلوقتي مبني بـTailwind utilities مباشرة في home.html، مفيش كلاسات ``hxc__*`` تانية — القسم مجرد خلفية فاتحة، عنوان، سطر فرعي، وزرار واحد. لو حد احتاج الشكل القديم هو محفوظ في تاريخ الجيت (commit 22afe36) مش هنا. */ /* ── الأقسام ─────────────────────────────────────────────────────── */ .theme-student .band { padding-block: clamp(3.5rem, 8vw, 6rem); } /* 2026-09-17: نفس تعديل ``.cta`` فوق — ``.band--tint`` بقى سطح عادي بالافتراضي، و``.band--tint--dark`` («العارف» بس، ``hero_style == 'glow'``) هو اللي بياخد ``var(--tc-ink)`` القديم. ``.band--tint`` مستخدمة في home.html بس (اتأكدنا)، فالتعديل مأمون. */ .theme-student .band--tint { background: var(--tc-surface); } .theme-student .band--tint--dark { background: var(--tc-ink); } /* الأسئلة الشائعة (``.sec``) بقت مباشرة قبل الفوتر بعد نقل القسم. حد ``.sec`` السفلي (لحد ٥rem) + حد ``.band`` العلوي (لحد ٦rem) بيتجمعوا في نفس المنطقة، وبما إن خلفية الاتنين نفس اللون الفاتح تقريبا (``--bg-cream-warm`` مقابل خلفية ``.sec`` الافتراضية) الفراغ بيبان فراغ واحد فاضي بلا داعي، مش مسافة تنفّس طبيعية. الشرط مقصور على ``.sec`` اللي جاي فورا قبل ``.band--tint`` بس (زي هنا بالظبط)، عشان ``.band`` نفسها مستخدمة في صفحات تانية من غير ما تتأثر. */ .theme-student .sec + .band--tint { padding-top: 1.5rem; } .theme-student .band__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); } .theme-student .band__head--center { flex-direction: column; align-items: center; text-align: center; } .theme-student .band__eyebrow { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .12em; color: var(--primary-500); margin-bottom: .4rem; } .theme-student .band__title { margin: 0; font-family: var(--font-family-heading); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -.025em; color: var(--text-heading); text-wrap: balance; } .theme-student .band__more { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.2rem; border-radius: 999px; background: var(--primary-50); color: var(--primary-700); font-weight: 800; font-size: .9rem; text-decoration: none; transition: gap .2s, background-color .2s; } .theme-student .band__more:hover { gap: .75rem; background: var(--primary-100); } .theme-student .band__more svg { width: 1rem; height: 1rem; transform: rotate(180deg); } /* ── ٤. الخطوات — بقت شبكة بينتو بـTailwind utilities مباشرة في home.html (زي الهيرو والمدرسين)، مفيش كلاسات BEM هنا تانية. */ /* ── ٥. المدرسون — بقى قسم بعرض الشاشة كامل بـTailwind utilities مباشرة في home.html (زي الهيرو)، مفيش كلاسات BEM هنا تانية. */ /* ── ٦. شريط الدعوة ─────────────────────────────────────────────── */ /* 2026-09-17: ``.cta`` كان غامق (``var(--tc-ink)``) بلا شرط — نفس التوكن اللي الهيرو بيقرر لونه من ``Preset.hero_style`` دلوقتي (``base.html``)، بس الشريط ده كان فاضل ثابت مهما كان القالب. الافتراضي بقى سطح عادي (فاتح على القوالب الخمسة الجديدة)؛ ``.cta--dark`` هو الاستثناء الوحيد («العارف» بس، نفس اللي كان هنا بالحرف قبل كده) وبيتحط بشرط ``hero_style == 'glow'`` من القالب (home.html). */ .theme-student .cta { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 5rem); background: var(--tc-surface); color: var(--tc-text); border-block: var(--tc-border-width, 1px) solid var(--tc-border); } .theme-student .cta--dark { /* لون واحد مسطّح (2026-09-10). كان تدرّج ووراه دايرة مبلورة (``.cta__shape``) — الشريط الغامق الوحيد في صفحة فاتحة مايحتاجش زخرفة عشان يبان. */ background: var(--tc-ink); color: #fff; border-block: none; } .theme-student .cta__inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; } .theme-student .cta__title { margin: 0; font-family: var(--font-family-heading); font-weight: var(--tc-heading-weight, 800); font-size: clamp(1.7rem, 4.5vw, 2.6rem); letter-spacing: -.025em; color: var(--tc-text); } .theme-student .cta--dark .cta__title { color: #fff; } .theme-student .cta__sub { margin: .4rem 0 0; font-size: 1rem; font-weight: 700; color: var(--tc-text-secondary); } .theme-student .cta--dark .cta__sub { color: rgba(255,255,255,.75); } .theme-student .cta__acts { display: flex; flex-wrap: wrap; gap: .7rem; } /* ``.btn-outline`` نفسها مشتركة مع صفحات تانية كتير (لوحة التحكم، الواجبات...) فحدّها وخط لونها مصممين لخلفية فاتحة — على الخلفية الغامقة (``.cta--dark`` بس) كانوا هيبقوا شبه مختفيين. الافتراضي المسطّح مايحتاجش تعديل: بيرث شكل ``.btn-outline`` العادي (مصمم لخلفية فاتحة بالأساس) زي ما هو. */ .theme-student .cta--dark .btn-outline { border-color: rgba(255,255,255,.4); color: #fff; } .theme-student .cta--dark .btn-outline:hover { border-color: var(--tc-honey); color: var(--tc-honey); } /* ``btn-ink`` هو ``#2A1173`` والشريط نفسه ``var(--tc-ink-2)`` — الزرار الأساسي كان شبه مختفي جوّه خلفيته. الأساسي في كل الصفحة عسلي، فالشريط بقى يقول نفس الكلام. النطاق على ``.cta`` بس: ``btn-ink`` على خلفية فاتحة في صفحات تانية شغّال زي ما هو. */ .theme-student .cta .btn-ink { background: var(--grad-honey); color: var(--honey-ink); box-shadow: var(--shadow-honey); } .theme-student .cta .btn-ink:hover { box-shadow: var(--shadow-honey-hover); } /* الشكل المشترك للأزرار الأربعة (gold/glass/ink/outline). كان معرّف مرة واحدة جوّه كتلة الهيرو القديمة، فمسحها مسح شكل الأزرار كلها معاها — بما فيها أزرار شريط الدعوة اللي معندهاش دعوة بالهيرو خالص. القاعدة المشتركة رجعت هنا، مركزية بدل ما تتكرر جوّه كل قسم. */ .theme-student .btn-gold, .theme-student .btn-glass, .theme-student .btn-ink, .theme-student .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 50px; padding: .85rem 1.9rem; border-radius: var(--tc-radius-button, 999px); font-family: var(--font-family-heading); font-weight: 800; font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, background-color .2s ease, border-color .2s ease; } .theme-student .btn-gold { background: var(--grad-honey); color: var(--honey-ink); box-shadow: var(--shadow-honey); } .theme-student .btn-gold:hover { transform: translateY(-3px); box-shadow: var(--shadow-honey-hover); } .theme-student .btn-gold svg { width: 1.15rem; height: 1.15rem; transform: scaleX(-1); } .theme-student .btn-glass { background: var(--bg-surface); border-color: var(--border-default); color: var(--text-heading); box-shadow: var(--shadow-sm); } .theme-student .btn-glass:hover { border-color: var(--primary-400); background: var(--primary-50); transform: translateY(-3px); } .theme-student .btn-ink { /* كان ``#2A1173`` (كحلي العارف) بالحرف. ``--tc-ink`` هو نفس الدرجة مشتقة من لون المنصة — عند العارف (41,25,104) قصاد (42,17,115). */ background: var(--tc-ink); color: #fff; box-shadow: var(--shadow-ink); } .theme-student .btn-ink:hover { transform: translateY(-3px); box-shadow: var(--shadow-ink-hover); } /* كان حبر بني ثابت ``#2A1A00`` — على قالب أرضيته غامقة الزرار كان بيختفي. دلوقتي لون نص المنصة نفسه، والحد نفس اللون بشفافية. */ .theme-student .btn-outline { background: transparent; border-color: color-mix(in srgb, var(--tc-text) 32%, transparent); color: var(--tc-text); } .theme-student .btn-outline:hover { border-color: var(--tc-text); transform: translateY(-3px); } /* ── ٧. الذيل ───────────────────────────────────────────────────── */ /* ``.foot``/``.foot__*`` كلهم مستخدمين في home.html بس (اتأكدنا)، جوّه ``.band--tint``. لون النص الافتراضي بقى عادي (سطح فاتح)؛ الأبيض بقى مقصور على ``.band--tint--dark`` («العارف» بس) زي باقي القسم. */ .theme-student .foot { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .theme-student .foot__col--wide { grid-column: span 1; } @media (min-width: 60rem) { .theme-student .foot__col--wide { grid-column: span 2; } } .theme-student .foot__h { margin: 0 0 .8rem; font-family: var(--font-family-heading); font-weight: 800; font-size: 1rem; color: var(--tc-text); } .theme-student .band--tint--dark .foot__h { color: #fff; } .theme-student .foot__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; } .theme-student .foot__list a { color: var(--tc-text-secondary); text-decoration: none; font-size: .9rem; font-weight: 600; } .theme-student .band--tint--dark .foot__list a { color: rgba(255,255,255,.7); } .theme-student .foot__list a:hover { color: var(--tc-honey); } /* ============================================================================ أهداف اللمس على الموبايل ============================================================================ روابط الفوتر والروابط النصية المستقلة كانت ارتفاعها ١٤ بكسل — ده ارتفاع سطر النص وبس، من غير أي مساحة حواليه. إصبع بيغطي ٤٠-٥٠ بكسل، والروابط دي مرصوصة فوق بعض بفاصل نص سنتيمتر، فالدوسة على "الكورسات" بتفتح "المدرسين" بسهولة. معيار WCAG 2.5.8 حدّه الأدنى ٢٤ بكسل، وإرشادات أبل وجوجل ٤٤. ``pointer: coarse`` معناها الجهاز مالوش مؤشر دقيق — يعني لمس. على الديسكتوب بالماوس مفيش أي تغيير، والفوتر بيفضل مضغوط زي ما هو مرسوم. ``min-height`` مش ``padding``: الـpadding بيكبّر الصندوق المرسوم كمان وممكن يكسر التخطيط، بينما ``inline-flex`` + ``align-items: center`` بيوسّع منطقة اللمس والنص فاضل في نصها. */ @media (pointer: coarse) { .theme-student footer a, .theme-student .foot__list a, .theme-student .foot__apps a { min-height: 44px; display: inline-flex; align-items: center; } } .theme-student .foot__apps, .theme-student .foot__social { display: flex; flex-wrap: wrap; gap: .5rem; } .theme-student .foot__app { padding: .6rem 1.1rem; border-radius: 12px; background: var(--tc-honey); color: var(--tc-honey-ink); font-size: .85rem; font-weight: 700; text-decoration: none; } .theme-student .foot__social a { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .85rem; text-decoration: none; transition: background-color .2s, color .2s; } .theme-student .foot__social a:hover { background: var(--tc-honey); color: var(--tc-honey-ink); } @media (prefers-reduced-motion: reduce) { .theme-student .hx__mock, .theme-student .hx__pulse { animation: none; } .theme-student .btn-gold:hover, .theme-student .btn-glass:hover, .theme-student .btn-ink:hover, .theme-student .btn-outline:hover { transform: none; } } /* ============================================================================ النافبار والفوتر + غلاف صفحة الكورسات ============================================================================ النافبار فيه منطق شرطي كتير (تينانت، صلاحيات، سناتر)، فاتصمّم من الـCSS بالكامل: كل ألوانه بتقرا من ``--tc-nav-bg`` و``--tc-nav-text``، والفوتر من ``--tc-footer-bg`` — الاتنين متعرّفين فعلاً على ``:root`` من حقول المنصة (``base.html``)، وبيتقروا inline على الوسمين (``style="background-color: var(--tc-nav-bg)"``... إلخ) عشان ماحدش يحتاج يلمس markup. 2026-09-17: كان هنا بلوك ``.theme-student { --tc-nav-bg: ...; --tc-footer-bg: #180C46; }`` بيعيد تعريف التوكنز التلاتة دي بقيم بنفسجي ثابتة — وبما إن الخاصية المخصّصة بتتوارث كقيمة محسوبة (شايفين الشرح فوق في نفس الملف)، وبما إن ``.theme-student`` نفسه على الـ````، القيمة دي كانت بتغلب قيمة أي منصة عميل قبل ما توصل للفوتر أصلاً — فوتر كل منصة كان بنفسجي العارف بالحرف بغض النظر عن ``Tenant.footer_bg``، ومكنش بيبان إلا لما منصة لونها مختلف فعلاً عن بنفسجي العارف (زي أي قالب من الخمسة الجداد). اتشال البلوك؛ القيمة الصحيحة على ``:root`` هي اللي بتوصل دلوقتي. */ /* ── النافبار ───────────────────────────────────────────────────── */ .theme-student nav.sticky { -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border-light) !important; /* Same gate as the --shadow-* family: 'none' templates get a flat bar. */ box-shadow: var(--shadow-gate), 0 8px 28px color-mix(in srgb, var(--shadow-tint) 6%, transparent); } .theme-student nav.sticky .flex.justify-between { min-height: 4.5rem; } .theme-student .nav-link { position: relative; padding: .5rem .9rem; border-radius: 999px; font-family: var(--font-family-heading); font-weight: 800; font-size: .93rem; transition: background-color .2s, color .2s; } .theme-student .nav-link:hover { background: var(--primary-50); color: var(--primary-700) !important; } .theme-student .nav-link-active { background: var(--primary-100); color: var(--primary-700) !important; } /* شرطة عسلية تحت الصفحة الحالية — العلامة اللي بتقول انت فين */ .theme-student .nav-link-active::after { content: ""; position: absolute; inset-inline: 35%; bottom: -.15rem; height: 3px; border-radius: 3px; background: var(--honey-500); } /* زرار «خروج» / «دخول» في النافبار */ .theme-student nav.sticky a[class*="rounded-lg"] { border-radius: 999px !important; font-weight: 800; padding: .55rem 1.1rem !important; border-color: var(--border-default) !important; transition: border-color .2s, background-color .2s; } .theme-student nav.sticky a[class*="rounded-lg"]:hover { border-color: var(--primary-400) !important; background: var(--primary-50); } /* ── الفوتر ─────────────────────────────────────────────────────── */ /* الفوتر غامق دايماً بغض النظر عن hero_style (كل الستة قوالب ``footer_bg`` بتاعهم غامق افتراضياً)، فالنص الأبيض تحت مايتأثرش. لكن الوهج والخط العسلي متدرّج الألوان — بالظبط النوع اللي الخمس مراجع بيمنعوه صراحة — فاتقصروا على ``.footer--glow`` («العارف» بس، ``hero_style == 'glow'``، base.html). باقي القوالب فوترهم غامق مصمت من غير أي زخرفة. */ .theme-student footer { position: relative; } .theme-student footer.footer--glow { background-image: radial-gradient(80% 120% at 90% 0%, color-mix(in srgb, var(--tc-primary) 34%, transparent) 0%, transparent 60%), radial-gradient(60% 100% at 0% 100%, color-mix(in srgb, var(--tc-honey) 14%, transparent) 0%, transparent 65%); } /* خط عسلي رفيع فوق الفوتر: الفاصل بين الصفحة والذيل */ .theme-student footer.footer--glow::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--primary-500), var(--honey-500), var(--accent-500)); } .theme-student footer h3, .theme-student footer h4 { font-family: var(--font-family-heading); font-weight: 800; color: #fff; } .theme-student footer a { transition: color .2s, transform .2s; } .theme-student footer a:hover { color: var(--honey-400) !important; } .theme-student footer .rounded-lg { border-radius: 999px !important; background: rgba(255,255,255,.08) !important; transition: background-color .2s, transform .2s; } .theme-student footer .rounded-lg:hover { background: var(--honey-500) !important; transform: translateY(-3px); } @media (prefers-reduced-motion: reduce) { .theme-student footer .rounded-lg:hover { transform: none; } } /* شبكة أمان: أي جوّه واجهة الطالب مقاسه محدود حتى لو كلاسه اتنسي. ده اللي كان ناقص لما الأيقونة البديلة فجّرت الشبكة أول مرة. */ .theme-student svg { max-width: 100%; flex: none; } .theme-student :is(a, button, span, p, li, h1, h2, h3, h4) > svg { width: 1.25rem; height: 1.25rem; } /* ── الأسئلة الشائعة + أغلفة الأقسام المنقولة ──────────────────────── الكتلتين دول كانوا في ```` نفسه أول حاجة جوّه الوسم، شايفين base.html). مفيش ``.js-enabled`` = مفيش أي ``opacity:0`` خالص، في أي مكان — لو الجافاسكريبت اتمنع أو فشل يحمّل، كل حاجة ظاهرة. العنصر بمجرد ما ياخد ``.is-revealed`` (من الـobserver في base.html) بيفضل ظاهر للأبد — مفيش أي قاعدة هنا بترجّعه مختفي تاني. باج حقيقي اتصحّح هنا: السلكتور كان مكتوب ``body.js-enabled .theme-student ...`` (بمسافة) — يعني "عنصر بكلاس .theme-student *جوّه* عنصر body.js-enabled"، combinator حفيد. بس ``.theme-student`` نفسها كلاس على الـ```` نفسه، مش عنصر متداخل جواه — والكلاسين (``.theme-student`` و``.js-enabled``) على نفس الوسم بالظبط. السلكتور ده عمره ما بيتطابق مع حاجة، فقاعدة الإخفاء عمرها ما اتفعّلت أصلا — العناصر كانت ظاهرة من الأول، ومفيش حاجة تتحرك منها. الجافاسكريبت والـobserver كانوا شغّالين تمام طول الوقت؛ المشكلة كانت في الـCSS بس. الصح compound selector من غير مسافة: ``.theme-student.js-enabled``. ليه ``animation`` مش ``transition`` هالمرة: ``transition`` بتحتاج ``transition`` property نشط على العنصر وقت التغيير — على الكروت، ده كان معناه إما نضيف transition خاصة بينا (فتتعارض مع توقيت الـhover بتاعة الكارت نفسه) أو نعتمد على transition الكارت (فيبقى الظهور مربوط بتوقيت حاجة تانية). ``@keyframes`` + ``animation ... forwards`` مستقلة تماما عن أي ``transition`` — الظهور بيشتغل بمحرك تاني خالص، وبمجرد ما يخلّص (``forwards`` بيثبّت الحالة النهائية) الكارت يرجع بيستخدم ``transition-all duration-300`` بتاعته هو للـhover من غير أي تعارض ممكن، لأن مفيش transition اتلمس أصلا في مرحلة الظهور. ``[data-reveal]``: نص — انزلاق ١٦px، ٧٠٠ms. ``[data-reveal-block]``: قسم/شبكة (``
``، ``
``) — بيتحرك هو نفسه، انزلاق ٤٠px. الأقسام الظاهرة أصلا وقت التحميل (زي الهيرو) بتاخد ``.is-revealed`` فورا من غير حركة — شايفين شرط "ظاهر أصلا" في الـobserver. ``[data-reveal-card]``: كارت جوّه ``[data-reveal-block]``، نفس أنيميشن الحاوية (٤٠px) مع ``animation-delay`` تلقائي بالـ``:nth-child``. قاعدة أمان محفورة بالدم — لسه سارية بالحرف، الانتقال لـ``animation`` مايغيّرش فيها حاجة: ولا عنصر عليه ``backdrop-blur``/``backdrop-filter`` ياخد ``data-reveal``/``data-reveal-block`` خالص — الباج المكتشف (كاروسيلات الرئيسية قبل كده) كان عن حالة ``opacity:0`` الساكنة قبل أي حركة أصلا، مش عن الـtransition بالذات، فمحتاج نفس الحذر هنا برضه. محروسة دلوقتي باختبار تلقائي — core.tests_student_ui.NoBackdropBlurRevealTests. */ /* السرعة (2026-09-26): كانت ٧٠٠ms لكل قسم وتأخير ١٠٠ms لكل كارت لحد ٧٠٠ms — آخر كارت بيبان بعد ١.٤ ثانية والصفحة جاهزة من السيرفر في أقل من ربع ثانية، فالطالب كان بيحس إن المنصة بطيئة. دلوقتي ٢٥٠ms وانزلاق صغير والتأخير ٤٠ms بسقف ١٦٠ms: لسه فيه حركة، بس المحتوى قدامك على طول. */ @keyframes scrollFadeUpText { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes scrollFadeUpBlock { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .theme-student.js-enabled [data-reveal] { opacity: 0; will-change: opacity, transform; } .theme-student.js-enabled [data-reveal].is-revealed { animation: scrollFadeUpText 250ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } .theme-student.js-enabled [data-reveal-block] { opacity: 0; will-change: opacity, transform; } .theme-student.js-enabled [data-reveal-block].is-revealed { animation: scrollFadeUpBlock 250ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } .theme-student.js-enabled [data-reveal-block] [data-reveal-card] { opacity: 0; will-change: opacity, transform; } .theme-student.js-enabled [data-reveal-block].is-revealed [data-reveal-card] { animation: scrollFadeUpBlock 250ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } .theme-student [data-reveal-block] > [data-reveal-card]:nth-child(2) { animation-delay: 40ms; } .theme-student [data-reveal-block] > [data-reveal-card]:nth-child(3) { animation-delay: 80ms; } .theme-student [data-reveal-block] > [data-reveal-card]:nth-child(4) { animation-delay: 120ms; } .theme-student [data-reveal-block] > [data-reveal-card]:nth-child(n+5) { animation-delay: 160ms; } @media (prefers-reduced-motion: reduce) { .theme-student.js-enabled [data-reveal], .theme-student.js-enabled [data-reveal-block], .theme-student.js-enabled [data-reveal-block] [data-reveal-card] { animation: none; opacity: 1; transform: none; } } /* ── "سمارت سكرول": النافبار العايم بيختفي لتحت مع النزول، ويرجع مع الطلوع (``base.html``، ``#smartNav``) ────────────────────────────── كلاس عادي بدل Tailwind arbitrary value (``-translate-y-[150%]``) — لو JS استخدمت اسم كلاس Tailwind عشوائي، الـJIT مش هيولّد له قاعدة إلا لو نفس النص موجود حرفيا في ملف بيتفحصه وقت البناء؛ كلاس CSS عادي هنا بيتجنّب المشكلة دي تماما، زي ``.reveal-hidden`` بالظبط. ‎-150%‎ مش ‎-100%‎ عشان تختفي فوق حافة الشاشة تماما حتى مع أي ظل (`shadow-lg`) حوالين الكابسولة، مش تقف مماسة للحافة. */ .theme-student #smartNav.nav-hidden { transform: translateY(-150%); } @media (prefers-reduced-motion: reduce) { .theme-student #smartNav { transition: none; } } /* ── سكرول سلس لروابط الأنكور الداخلية ─────────────────────────────── ``scroll-behavior`` لازم يتحط على عنصر الـscrolling box الفعلي (````) عشان يشتغل خالص — الصفحة هنا بتسكرول من الجذر، مش من الـ```` (``overflow-x`` بس محطوط على الاتنين في base.html، مفيش ``overflow-y`` بيخلّي الـbody يبقى هو الscroller). بس كلاس ``.theme-student`` نفسه محطوط على الـ```` بس (شايفين شرحه في أول الملف)، و```` معندهاش كلاس شرطي يميّز صفحة الطالب عن الأدمن. الحل: ``:has()`` — بيحدّد ```` بس لو جواه ``body.theme-student``، من غير ما نحتاج نضيف شرط Django تاني في base.html. مدعومة بشكل قياسي في كل المتصفحات الحديثة. */ html:has(body.theme-student) { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html:has(body.theme-student) { scroll-behavior: auto; } } /* ============================================================================ القوالب المسطّحة — كل حاجة كانت لسه لابسة شكل العارف (2026-09-22) ============================================================================ ``html[data-hero]`` بييجي من ``tc.hero_style`` في base.html. «العارف» هو القالب الوحيد اللي ``glow`` (تدرّج + وهج + زجاج، قرار صاحب المنتج)، فكل قاعدة هنا مقفولة على ``flat`` وماتقدرش تلمس شكله أصلاً. ليه مش ``{% if %}`` في كل قالب: العناصر دي متوزّعة على خمس صفحات وكومبوننت، وكلاسات Tailwind بتاعتها (``backdrop-blur-lg``/``shadow-2xl``/``bg-ink-60``) مابتقراش توكنز القالب. قاعدة واحدة هنا بتحوّلها للتوكن، ومن غير كلاس Tailwind جديد (tailwind.min.css مابيتبنيش في الديبلوي). */ /* التدرّج على زرار الدعوة وزرار الهيرو كان هو شكل العارف بالحرف — القالب المسطّح لونه واحد. ``background`` shorthand بياخد لون عادي، فالتوكن نفسه بيبقى لون. */ html[data-hero="flat"] .theme-student { --grad-honey: var(--tc-honey); --grad-brand: var(--tc-primary); /* والهالة الملوّنة تحت الزرار (عسلي/أساسي بشفافية) هي نفس الوهج — القالب المسطّح اللي ظلاله 'soft' بياخد ظل الكارت العادي، و'none' بيقفله ``--shadow-gate`` زي الباقي. Same-element custom properties resolve at computed-value time, so pointing at --shadow-sm/-md here is safe. */ --shadow-primary: var(--shadow-sm); --shadow-primary-hover: var(--shadow-md); --shadow-honey: var(--shadow-sm); --shadow-honey-hover: var(--shadow-md); } /* الأزرار والحقول اللي في الوسم ``rounded-full`` بالحرف («اعرف اكثر» على كارت الكورس، «عرض الملف الشخصي»، «ابدأ مجاناً»، «بحث»، الترقيم، حقول الفلتر) كانت كبسولة على قالب زواياه صفر، جنب أزرار هيرو مربّعة في نفس الصفحة. الحاجة اللي بتتعلّم هنا هي الفعل (لون الفعل أو حد الزجاج) أو الحقل — مش الأفاتار ولا النقطة ولا سهم الكاروسيل، دول دواير عن قصد. */ html[data-hero="flat"] .theme-student :is(a, button, span[class*="py-"]).rounded-full:is(.bg-honey-500, [class*="border-[var(--tc-glass-line)]"], [class*="bg-[var(--tc-glass)]"]) { /* ``--tpl-badge-radius`` بيتحط على البادچ بس لما القالب يختار شكل تاني (templates/details.css ‹data-badge›) — متغيّر بدل قاعدة أتقل منافسة للخصوصية العالية هنا. The variable is set on the badge element itself, so it resolves there and nowhere else. */ border-radius: var(--tpl-badge-radius, var(--tc-radius-button, 9999px)); } html[data-hero="flat"] .theme-student :is(input, select).rounded-full { border-radius: var(--tc-radius-input, 9999px); } /* كارت البحث/الفلتر في /courses/ و/teachers/ (``rounded-3xl`` ثابت). */ html[data-hero="flat"] .theme-student form.rounded-3xl { border-radius: var(--tc-radius-card, 20px); } /* النافبار العايم: كان زجاج كحلي ٦٠٪ (``bg-ink-60`` = الأساسي جوّه شبه أسود) فوق أي أرضية — على «سبورة» بقى نبيتي، وعلى القوالب الفاتحة رمادي باهت، و``nav_bg``/``nav_text`` بتوع القالب (المحسوبين والمتفحّصين في tests_preset_quality) مكانوش بيترسموا خالص. */ html[data-hero="flat"] .theme-student .nav-pill, html[data-hero="flat"] .theme-student #mobile-menu { background: var(--tc-nav-bg); color: var(--tc-nav-text); border: var(--tc-border-width, 1px) solid color-mix(in srgb, var(--tc-nav-text) 16%, var(--tc-nav-bg)); border-radius: var(--tc-radius-card, 20px); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--tc-shadow-md); } /* الروابط كانت ``text-white``/``text-white/90`` ثابت — على نافبار فاتح («جامعة» عاجي) كانت هتختفي. بترث لون النافبار. زرار «حساب جديد» والخط تحت الرابط النشط (``bg-honey-500``) بيفضلوا بلون الفعل. */ html[data-hero="flat"] .theme-student :is(.nav-pill, #mobile-menu) :is(a, button, span):not(.bg-honey-500) { color: inherit; } html[data-hero="flat"] .theme-student :is(.nav-pill, #mobile-menu) :is(a, button):not(.bg-honey-500):hover { background-color: color-mix(in srgb, var(--tc-nav-text) 10%, transparent); } html[data-hero="flat"] .theme-student :is(.nav-pill, #mobile-menu) :is(a, button).rounded-full { border-radius: var(--tc-radius-button, 9999px); } html[data-hero="flat"] .theme-student :is(.nav-pill, #mobile-menu) .border { border-color: color-mix(in srgb, var(--tc-nav-text) 30%, transparent); } /* ظلال وزجاج Tailwind الثابتة (كارت البحث في /courses/ و/teachers/، الفقاعة فوق الكوفر، النافبار) — ``shadow-2xl shadow-black/30`` مابيقراش ``shadow_style``. التوكنز بتساوي قيم Tailwind نفسها لـ'soft' و``none`` لـ'none'. والزجاج مالوش لازمة هنا: ``--tc-glass`` في القالب المسطّح سطح مصمت، فالـblur بيتكلّف من غير ما يبان. */ html[data-hero="flat"] .theme-student .shadow-md { box-shadow: var(--tc-shadow-md); } html[data-hero="flat"] .theme-student .shadow-lg { box-shadow: var(--tc-shadow-lg); } html[data-hero="flat"] .theme-student .shadow-xl { box-shadow: var(--tc-shadow-xl); } html[data-hero="flat"] .theme-student .shadow-2xl { box-shadow: var(--tc-shadow-2xl); } html[data-hero="flat"] .theme-student :is(.backdrop-blur-sm, .backdrop-blur-md, .backdrop-blur-lg) { -webkit-backdrop-filter: none; backdrop-filter: none; } /* لون الفعل كنص (السعر «مجاني»، «عرض الملف الشخصي»، أيقونات الأقسام). اللون نفسه متختار عشان يشيل حبر زرار — فاتح كفاية إن الحبر الغامق يتقري عليه — فهو نفسه مايتقريش كنص على أرضية فاتحة (أصفر «سنتر» ١٫٦:١). ``--tc-honey-text`` محسوب في Tenant.get_theme_colors: نفس اللون، مغمّق ناحية لون النص لحد ما يعدّي ٤٫٥ على الأرضية والسطح. ``:where()`` keeps this at Tailwind's own specificity (0,1,0) so it wins by source order (this file loads after tailwind.min.css) while every ``hover:text-…`` utility (0,2,0) still beats it. */ :where(html[data-hero="flat"] .theme-student) .text-honey-500 { color: var(--tc-honey-text, var(--tc-honey)); } /* نبض زرار المساعد على القوالب المسطّحة (ai_helper.html وزرار الموبايل في home.html): نفس توقيت ``ai-breathe`` بس حلقة بلون المنصة ومن غير الظل الكحلي تحته. Global on purpose — the widget also renders on pages without ``.theme-student``, and @keyframes cannot be scoped anyway. */ @keyframes ai-breathe-flat { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tc-primary) 42%, transparent); } 55% { box-shadow: 0 0 0 13px color-mix(in srgb, var(--tc-primary) 0%, transparent); } } /* زرار المساعد على موبايل الرئيسية — نسخة من الويدجت، فبياخد نفس الشكل المسطّح. ``fill`` في CSS بيكسب على خاصية ``fill="#FFB020"`` في الوسم. */ html[data-hero="flat"] .theme-student .ai-fab { color: var(--tc-primary-ink, #fff); background: var(--tc-primary); border-color: color-mix(in srgb, var(--tc-text) 18%, var(--tc-primary)); box-shadow: none; animation-name: ai-breathe-flat; } html[data-hero="flat"] .theme-student .ai-fab > span { display: none; } html[data-hero="flat"] .theme-student .ai-fab svg { fill: currentColor; } html[data-hero="flat"] .theme-student .ai-fab-badge { color: var(--tc-text); background: var(--tc-surface); border-color: var(--tc-border); box-shadow: none; } html[data-hero="flat"] .theme-student .ai-fab-badge > span { background: var(--tc-primary); } /* زرار المساعد على موبايل الرئيسية (للزائر) — نفس اللي ai_helper.html بيعمله للويدجت الحقيقي على ٤٨٠ وأقل: ٦٤ بكسل في الركن كانوا فوق زرار «اعرف أكتر» في أول كارت في الكاروسيل. بيصغر لـ٥٠، ينزل للحافة شوية، ويتزحلق برّه الشاشة طول ما الزائر نازل (``data-scroll-down`` من base.html). ``md:hidden`` أصلاً، فالديسكتوب — والعارف على الديسكتوب — مايتلمسش. */ @media (max-width: 480px) { [data-ai-fab-dock] { bottom: 1rem; inset-inline-end: 1rem; transition: transform 0.25s ease, opacity 0.25s ease; } [data-ai-fab-dock] .ai-fab { width: 50px; height: 50px; } [data-ai-fab-dock] .ai-fab svg { width: 24px; height: 24px; } html[data-scroll-down] [data-ai-fab-dock] { transform: translateY(calc(100% + 1.5rem)); opacity: 0; pointer-events: none; } } @media (max-width: 480px) and (prefers-reduced-motion: reduce) { [data-ai-fab-dock] { transition: none; } } /* أيقونة عنوان القسم في صفحة الكورس (``data-tpl="heading-icon"``، قبل الـh2). علامتا «عمود» و«زخرفة» (details.css) بيترسموا على بداية الـh2 نفسه، فكانوا بيقعوا بين الأيقونة والكلام: «📖 ▌عن الكورس». العلامة هنا هي زخرفة القسم، فبتاخد مكان الأيقونة بدل ما تتحشر جنبها. العارف مالوش ``data-heading-mark`` خالص، فأيقوناته زي ما هي. */ html:is([data-heading-mark="bar"], [data-heading-mark="ornament"]) .theme-student [data-tpl="heading-icon"] { display: none; } /* سُمك الحد (``Preset.border_width``): «ملوّن» ٢ و«أطفال» ٣ عشان الكروت تبان «ستيكر» — بس كل كارت كان ``border`` (١px) من Tailwind، فالقالبين كانوا بنفس خط «كشكول» الشعرة. ``.border`` (الأربع جهات) بس، مش ``border-t``/``border-b``: الفواصل تفضل خط. */ html[data-hero="flat"] .theme-student .border[class*="border-[var(--tc-glass-line)]"] { /* ``--tpl-card-border``: نفس فكرة ``--tpl-badge-radius`` فوق — شكل الكارت (details.css ‹data-card›) بيغيّر السُمك من غير ما يسابق القاعدة دي. */ border-width: var(--tpl-card-border, var(--tc-border-width, 1px)); } /* أقراص الأكورديون في صفحة الكورس (``bg-gradient-to-br from-primary-500 to-[var(--tc-glow)]``) وشارة «مجاني» الخضرا: تدرّج على قالب مسطّح، والسهم جوّه بلون ``--tc-on-hero`` اللي هو لون النص الغامق هنا — غامق على أساسي. لون واحد وحبره المحسوب. */ html[data-hero="flat"] .theme-student .bg-gradient-to-br.from-primary-500 { background: var(--tc-primary); color: var(--tc-primary-ink, #fff); } html[data-hero="flat"] .theme-student .bg-gradient-to-br.from-green-500 { background: var(--tc-honey); color: var(--tc-honey-ink); } /* ``Preset.section_gap`` كان بيتكتب ومحدش بيقراه — «سنتر» (٧٢) و«جامعة» (٩٦) كانوا بنفس الإيقاع. أقسام الرئيسية (``w-full py-14 md:py-20 border-t``) وشريط الدعوة والأسئلة بياخدوه على الديسكتوب، والموبايل فاضل على أرضيته عشان ٩٦ على شاشة ٣٩٠ تبقى فراغ. ``.sec--first`` برّه: هو اللي بيعوّض النافبار العايم في بروفايل المدرس. */ html[data-hero="flat"] .theme-student :is(section.w-full.border-t, .cta, .sec:not(.sec--first)) { padding-block: clamp(3rem, 7vw, var(--tc-section-gap, 80px)); } /* ``rounded-xl`` في tailwind.config.js = ``--tc-radius-button`` (المرحلة الأولى)، فغلاف الكورس في صفحة الكورس (``aspect-video rounded-xl``) كان بيطلع كبسولة على أي قالب زراره كبسولة («كُتّاب» ٩٩٩٩، «لينن» ٤٠px). صورة مش زرار — بتاخد زاوية الكارت. مقفولة على flat: العارف فيه نفس الكبسولة وشكله قرار صاحب المنتج، مش بتاعنا نغيّره هنا. */ html[data-hero="flat"] .theme-student .aspect-video.rounded-xl { border-radius: var(--tc-radius-card, 20px); } /* ونفس الحكاية للحقول (خانة التعليق كانت كبسولة بارتفاع ٤ سطور، وخانة كود الشراء في المودال كبسولة): حقل بياخد زاوية الحقل. */ html[data-hero="flat"] .theme-student :is(input, select, textarea).rounded-xl { border-radius: var(--tc-radius-input, 12px); } /* أيقونة خطّية بدل الإيموجي (2026-09-27، docs/DESIGN_SYSTEM.md). بتاخد حجم الخط ولون النص من العنصر اللي هي فيه، فـ
القديمة وأحجام text-5xl بتفضل شغّالة زي ما هي. */ .ei { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex: none; }