/**
* الأنماط الأساسية لقالب Studymaroc.
*
* ==================================================================
* تحديث كامل: اعتماد تصميم الصفحة الرئيسية الجديد كمرجع بصري رسمي.
* ==================================================================
* بقرار صريح من صاحب المشروع: "Design System يجب أن يتبع التصميم
* وليس العكس" — القيم أدناه (الألوان، القياسات) مأخوذة حرفيًا من
* التصميم الجديد المُرسَل، لا من نسخة Design System السابقة. أسماء
* الأصناف (Class Names) تطابق التصميم الأصلي حرفيًا حيثما أمكن (بدل
* إعادة تسميتها بنمط `sm-*`) — "الكود يجب أن يتبع التصميم، لا العكس".
*
* الأيقونات: Font Awesome (قرار صريح، بدل Lucide المذكورة في الوثيقة
* القديمة) — التصميم مبني عليها أصلًا، محمَّلة عبر CDN في inc/enqueue.php.
*/
:root {
/* --- ألوان الهوية (مطابقة حرفيًا للتصميم الجديد) --- */
--primary: #39B1D1;
--primary-dark: #093C5D;
--primary-light: #8FDDDF;
--brand-blue: #427AB5;
--brand-teal: #007979;
--secondary: #EC6530;
--secondary-light: #FFAE6E;
--secondary-dark: #FF6A1C;
--success: #007979;
--success-bg: #e6f2f2;
--warning: #FFAE6E;
--warning-bg: #fff7f0;
--danger: #FF6A1C;
--heading-color: #093C5D;
--text-color: #2c3e50;
--text-muted: #576574;
--text-white: #ffffff;
--body-bg: #F4FAFC;
--section-bg: #ffffff;
--card-bg: #ffffff;
--hover-bg: #edf7fa;
--navbar-bg: #ffffff;
--footer-bg: #093C5D;
--card-border: #e2ebf0;
--card-shadow: 0 6px 18px rgba(9, 60, 93, 0.04);
--shadow-sm: 0 2px 8px rgba(9, 60, 93, 0.03);
--shadow-md: 0 4px 16px rgba(9, 60, 93, 0.06);
--shadow-lg: 0 12px 36px rgba(9, 60, 93, 0.08);
--radius-sm: 8px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Global Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* الفحص الشامل — مشكلة جذرية فعلية: عناصر النماذج (button/input/select/
textarea) لا ترث font-family من body تلقائيًا في المتصفحات (سلوك
افتراضي معروف لصفحات الأنماط الأصلية للمتصفح UA stylesheet) — كانت
بعض القواعد المتفرقة تُصلح هذا لعناصر محددة فقط (مثل .filter-select)
بينما عناصر أخرى كثيرة (نموذج التواصل، أزرار عامة، حقول لم تُغطَّ
صراحةً) تبقى بخط المتصفح الافتراضي لا Tajawal. إصلاح جذري واحد يغطي
كل عناصر النماذج في كل الموقع دفعة واحدة بدل إصلاحات متفرقة لاحقة. */
button, input, optgroup, select, textarea { font-family: inherit; }
body {
font-family: 'Tajawal', system-ui, -apple-system, sans-serif;
/* جولة التطوير الشاملة — البند: خلفية عامة أكثر حيوية دون مبالغة —
تدرّج لوني خفيف جدًا وثابت (لا حركة/Animation) بدل لون واحد مسطَّح،
يعطي عمقًا بسيطًا للصفحة الرئيسية وصفحات المحتوى والمنتدى معًا دون
إخلال بوضوح القراءة (الفرق بين ألوان التدرّج ضئيل جدًا عمدًا). */
background: linear-gradient(180deg, #FFFFFF 0%, var(--body-bg) 340px, var(--body-bg) 100%);
color: var(--text-color);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
direction: rtl;
}
a { color: inherit; text-decoration: none; transition: var(--transition); }
img { display: block; max-width: 100%; height: auto; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
/* مساحة عامة أسفل كل صفحة قبل الفوتر (حل "التصاق نهاية المقال
بالفوتر" لكل الصفحات دفعة واحدة، بدل تعديل كل قالب على حدة). */
#main-content { display: block; padding-bottom: 64px; }
/* ==================================================================
Header & Navigation — راجع الكتلة الموحّدة الكاملة أدناه (بعد Hero)
================================================================== */
/* ==================================================================
Hero + بحث
================================================================== */
.search-hub-hero {
padding: 100px 0 80px;
background: linear-gradient(135deg, #fff 0%, #f0f9fc 100%);
border-bottom: 1px solid var(--card-border);
text-align: center;
}
.search-hub-content { max-width: 820px; margin: 0 auto; }
.search-hub-content h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 900; color: var(--primary-dark); line-height: 1.3; margin-bottom: 16px; }
.search-hub-content h1 span { color: var(--secondary); }
.search-hub-content p { font-size: 17px; color: var(--text-muted); margin-bottom: 36px; }
.main-search-wrapper { position: relative; margin-bottom: 24px; }
.main-search-bar {
display: flex; align-items: center; background: #fff;
border: 2px solid var(--primary-light); padding: 6px 10px;
border-radius: 50px; box-shadow: 0 10px 30px rgba(9, 60, 93, 0.08);
transition: var(--transition);
}
.main-search-bar:focus-within { border-color: var(--primary); box-shadow: 0 12px 35px rgba(57,177,209,0.2); transform: translateY(-1px); }
.main-search-bar input { border: 0; background: transparent; outline: none; flex: 1; font-family: inherit; font-size: 18px; color: var(--text-color); padding: 12px 16px; }
.main-search-bar input::placeholder { color: #a4b0be; }
.main-search-btn {
background: var(--secondary); color: #fff; border: 0;
padding: 14px 36px; border-radius: 50px; font-weight: 700; font-size: 16px;
cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: var(--transition);
white-space: nowrap;
}
/* استجابة Hero الجديد (فجوة أُصلِحت: لم تكن موجودة بعد إعادة التصميم) */
@media (max-width: 767px) {
.search-hub-hero { padding: 64px 0 48px; }
.search-hub-content p { font-size: 15px; margin-bottom: 28px; }
}
@media (max-width: 480px) {
.main-search-bar { flex-wrap: wrap; border-radius: 20px; padding: 12px; }
.main-search-bar input { min-width: 100%; padding: 8px 4px; font-size: 16px; } /* 16px يمنع تكبير Safari التلقائي عند التركيز. */
.main-search-btn { width: 100%; justify-content: center; margin-top: 8px; padding: 12px; }
.quick-tags { justify-content: flex-start; }
}
.main-search-btn:hover { background: var(--secondary-dark); }
/* اقتراحات فورية (منطق مبني من المرحلة 4، Studymaroc_API_Search) */
.main-search-suggestions {
position: absolute; inset-inline: 10px; top: calc(100% + 6px);
background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
list-style: none; padding: 6px 0; text-align: right; z-index: 20; max-height: 320px; overflow-y: auto;
}
.main-search-suggestions li a { display: block; padding: 10px 20px; color: var(--text-color); }
.main-search-suggestions li a:hover { background: var(--hover-bg); }
.main-search-suggestions .suggestion-badge { font-size: 11px; color: var(--primary); font-weight: 700; margin-inline-start: 6px; }
.quick-tags { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.quick-tags span { font-size: 14px; font-weight: 700; color: var(--primary-dark); }
.quick-tag-btn {
background: rgba(57,177,209,0.08); color: var(--primary-dark);
padding: 6px 14px; border-radius: 20px; font-size: 13.5px; font-weight: 500;
border: 1px solid transparent; cursor: pointer; transition: var(--transition);
}
.quick-tag-btn:hover { background: var(--primary); color: #fff; }
/* ==================================================================
أقسام عامة
================================================================== */
section { padding: 75px 0; }
.section-head { text-align: center; margin-bottom: 45px; max-width: 700px; margin-inline: auto; }
.section-head h2 { font-size: clamp(26px,3.2vw,34px); font-weight: 900; color: var(--heading-color); margin-bottom: 12px; }
.section-head p { color: var(--text-muted); font-size: 15.5px; }
/* ==================================================================
المستويات الدراسية
================================================================== */
.edu-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
@media (max-width: 374px) {
.edu-container { grid-template-columns: 1fr; } /* تفادي تجاوز عرض الشاشة على الهواتف الأضيق من 320px+هوامش (مثال: iPhone SE). */
}
.edu-section { background: var(--card-bg); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--card-shadow); border: 1px solid var(--card-border); }
.edu-header { padding: 20px; text-align: center; color: white; font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.edu-levels { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.edu-level { display: flex; align-items: center; padding: 12px 16px; border-radius: var(--radius-md); color: var(--text-color); font-weight: 700; font-size: 14.5px; gap: 12px; border: 1px solid transparent; background: var(--body-bg); }
.edu-num-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; }
.edu-level i:last-child { margin-inline-start: auto; font-size: 13px; opacity: 0.5; transition: var(--transition); }
.edu-level:hover { background: #fff; border-color: var(--primary); color: var(--primary-dark); transform: translateX(-3px); }
.edu-section.primary .edu-header { background: var(--brand-blue); }
.edu-section.middle .edu-header { background: var(--brand-teal); }
.edu-section.secondary .edu-header { background: var(--primary-dark); }
/* ==================================================================
الشبكات العامة
================================================================== */
/* ==================================================================
نظام الشبكات (البند 1: 4 بطاقات قياسيًا، 5 لتقارير التداريب)
Desktop(≥1200px) / Laptop(992-1199px) / Tablet(768-991px) / Mobile(<768px)
================================================================== */
.grid-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
transition: opacity 0.15s ease;
}
.grid-reports {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
transition: opacity 0.15s ease;
}
@media (max-width: 1199px) {
.grid-cards { grid-template-columns: repeat(3, 1fr); }
.grid-reports { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 991px) {
.grid-cards { grid-template-columns: repeat(2, 1fr); }
.grid-reports { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
.grid-cards { grid-template-columns: 1fr; gap: 16px; } /* بطاقة واحدة فقط على الهاتف لكل الأقسام القياسية (استثناء وحيد: grid-reports أدناه). */
.grid-reports { grid-template-columns: repeat(2, 1fr); gap: 12px; } /* الاستثناء المقصود: Rapport de Stage يبقى بطاقتين (أغلفة عمودية صغيرة). */
}
/* .grid-4 حُذِفت نهائيًا أثناء المراجعة الشاملة - كانت بقايا CSS ميتة
من قسم "أدوات الطالب" المحذوف بالكامل من الصفحة الرئيسية سابقًا،
لا استخدام لها في أي قالب. */
/* ==================================================================
بطاقة المحتوى (post-card) — Block الموحّد studymaroc/card
================================================================== */
.post-card {
background: var(--card-bg); border-radius: var(--radius-lg); border: 1px solid var(--card-border);
box-shadow: var(--card-shadow); overflow: hidden; display: flex; flex-direction: column; transition: var(--transition);
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
/* جولة سابقة: إصلاح اقتصاص الصورة البارزة بالتحويل الكامل من `cover` إلى
`contain` — تبيّن لاحقًا أن هذا غيّر روح تصميم البطاقات القديم (كانت
الصورة تملأ الإطار بلا حواف/خلفية ظاهرة) للأسوأ من وجهة نظر التصميم،
رغم حله لمشكلة الاقتصاص. الحل المُعاد الآن أدق وليس عودة كاملة لـ
`cover` الكاسحة القديمة أيضًا: `cover` تبقى الافتراضي (نفس روح
التصميم القديم — الصورة تملأ البطاقة بلا حواف فارغة)، لكن JS خفيف
(`assets/js/enhancements.js` → initSmartThumbFit) يقيس نسبة عرض/ارتفاع
كل صورة فعليًا بعد تحميلها، ولا يتدخّل إلا حين تكون نسبة الصورة بعيدة
جدًا عن نسبة إطار البطاقة (اقتصاص كبير محتمل لأجزاء مهمة) — عندها فقط
تُضاف صنف `.post-thumb--contain` لهذه الصورة تحديدًا كي تظهر كاملة.
بذلك: الغالبية العظمى من الصور (نِسَب معتادة) تُعرض بأسلوب `cover`
القديم المريح، والصور الاستثنائية (نِسَب متطرّفة كصفحات مستندات
طويلة) فقط تتفادى فقدان أجزاء مهمة منها. */
.post-thumb-link { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(135deg, #eef4f7, #e2e8f0); }
/* أغلفة تقارير التدريب (Rapport de Stage) نسبة A4 عمودية طبيعية، لا 16:9 (البند 5) */
.post-card[data-card-type="rapports-de-stage"] .post-thumb-link { aspect-ratio: 210/297; }
.post-thumb { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: var(--transition); }
/* يُضاف عبر JS فقط عند اكتشاف نسبة أبعاد متطرّفة فعليًا لصورة بعينها. */
.post-thumb.post-thumb--contain { object-fit: contain; object-position: center; padding: 6px; box-sizing: border-box; }
.post-card:hover .post-thumb { transform: scale(1.04); }
.post-badge { position: absolute; top: 16px; right: 16px; background: var(--primary-dark); color: #fff; padding: 5px 12px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; z-index: 2; }
.post-badge.status-open { background: var(--success); }
.post-content { padding: 22px; display: flex; flex-direction: column; flex: 1; }
/* صفحة أرشيف المستويات — page-templates/level-archive.php (طُلِبت صراحة
بعد اكتشاف أن /level/ وحدها كانت تُعطي 404 لعدم وجود صفحة هبوط أصلًا). */
.smc-level-archive-card { text-align: center; align-items: center; }
.smc-level-archive-card .post-content { align-items: center; text-align: center; }
.smc-level-archive-card__icon {
width: 64px; height: 64px; border-radius: 50%; background: var(--hover-bg); color: var(--primary);
display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 26px auto 0;
}
.smc-level-archive-card .post-excerpt { -webkit-line-clamp: 1; margin-bottom: 0; }
.post-level-tag { font-size: 13px; font-weight: 700; color: var(--brand-blue); margin-bottom: 8px; display: inline-block; }
.post-title { font-size: 18px; font-weight: 900; color: var(--heading-color); line-height: 1.4; margin-bottom: 10px; }
.post-title a:hover { color: var(--primary); }
.post-excerpt { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.orient-deadline-box {
background: var(--warning-bg); border: 1px dashed var(--secondary-light);
padding: 10px 14px; border-radius: var(--radius-md); margin-bottom: 16px;
display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--secondary-dark);
}
.post-meta-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--card-border); display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-muted); }
.post-meta-item { display: flex; align-items: center; gap: 6px; }
/* ==================================================================
لوحة الفلاتر (حقول متوازية مستقلة، لا متسلسلة — بقرار صريح)
================================================================== */
.filter-dashboard {
background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-lg);
padding: 24px; margin-bottom: 36px; box-shadow: var(--card-shadow);
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.filter-group { display: flex; flex-direction: column; gap: 8px; }
.filter-group label { font-size: 14px; font-weight: 700; color: var(--primary-dark); display: flex; align-items: center; gap: 6px; }
.filter-select { width: 100%; padding: 12px 16px; border-radius: var(--radius-md); border: 1.5px solid var(--card-border); background: var(--body-bg); font-family: inherit; font-size: 14.5px; color: var(--text-color); outline: none; cursor: pointer; transition: var(--transition); }
.filter-select:focus { border-color: var(--primary); background: #fff; }
/* ==================================================================
بطاقة الامتحان (exam-card)
================================================================== */
.exam-card { background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; transition: var(--transition); position: relative; }
.exam-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
.exam-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.exam-tag { font-size: 11.5px; padding: 4px 10px; border-radius: 6px; font-weight: 700; background: var(--hover-bg); color: var(--primary-dark); }
.exam-tag.year-tag { background: var(--warning-bg); color: var(--secondary-dark); }
.exam-title { font-size: 17.5px; font-weight: 900; color: var(--heading-color); line-height: 1.45; margin-bottom: 12px; flex: 1; }
.exam-info-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.btn-download { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: var(--radius-md); background: var(--secondary); color: #fff; font-weight: 700; font-size: 14.5px; transition: var(--transition); border: 0; cursor: pointer; }
.btn-download:hover { background: var(--secondary-dark); transform: translateY(-2px); }
.btn-outline {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 28px; border-radius: 50px; border: 2px solid var(--primary);
color: var(--primary-dark); font-weight: 700; font-size: 14.5px; transition: var(--transition);
}
.btn-outline:hover { background: var(--primary); color: #fff; }
#no-results-msg { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--text-muted); display: none; }
/* ==================================================================
قسم المحتوى النصي (SEO)
================================================================== */
.seo-content-section { background: #fff; border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); }
.seo-rich-wrapper { max-width: 900px; margin: 0 auto; }
.seo-rich-wrapper h2 { font-size: 26px; font-weight: 900; color: var(--primary-dark); margin-bottom: 16px; text-align: center; }
.seo-rich-wrapper h3 { font-size: 19px; font-weight: 700; color: var(--brand-teal); margin-top: 24px; margin-bottom: 10px; }
.seo-rich-wrapper p { font-size: 15px; color: var(--text-color); margin-bottom: 14px; text-align: justify; }
/* ==================================================================
الأسئلة الشائعة (FAQ)
================================================================== */
.faq-section { background: var(--body-bg); }
.faq-wrapper { max-width: 850px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.faq-trigger { width: 100%; padding: 20px 24px; background: none; border: 0; text-align: right; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--primary-dark); display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: var(--transition); }
.faq-trigger:hover { background: var(--hover-bg); }
.faq-icon { transition: var(--transition); color: var(--primary); }
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: #fafdfd; }
.faq-content-inner { padding: 20px 24px; font-size: 14.5px; color: var(--text-muted); border-top: 1px solid var(--card-border); }
.faq-item.active .faq-content { max-height: 400px; }
.faq-item.active .faq-icon { transform: rotate(180deg); color: var(--secondary); }
/* ==================================================================
أدوات الطالب (Placeholder — BL-006، غير مُنفَّذة بعد)
================================================================== */
/* أصناف "أدوات الطالب" (tool-card-link, tool-icon-box) حُذِفت نهائيًا
أثناء المراجعة الشاملة الأخيرة - كانت كودًا ميتًا متبقيًا من القسم
المحذوف بالكامل من الصفحة الرئيسية، لم تُحذَف بالكامل سابقًا. */
/* ==================================================================
الفوتر
================================================================== */
.footer { background: var(--footer-bg); color: #cbd5e1; padding: 60px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3,1fr); gap: 40px; margin-bottom: 40px; }
.footer h4 { color: #fff; font-size: 16px; margin-bottom: 20px; font-weight: 900; position: relative; padding-bottom: 8px; }
.footer h4::after { content: ''; position: absolute; bottom: 0; right: 0; width: 30px; height: 2px; background: var(--primary); }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer a { color: #cbd5e1; font-size: 14px; }
.footer a:hover { color: var(--primary-light); padding-inline-start: 4px; }
.footer .brand p { font-size: 14px; opacity: .85; margin-top: 16px; line-height: 1.6; }
.socials { display: flex; gap: 12px; margin-top: 20px; }
.socials a { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.06); display: grid; place-items: center; color: #fff; font-size: 16px; }
.socials a:hover { background: var(--secondary); color: #fff; transform: translateY(-3px); }
/* جولة إعادة تنظيم الفوتر — البريد الإلكتروني مباشرة تحت روابط التواصل
الاجتماعي (طلب صريح)؛ نفس نمط .footer a الحالي، فقط أيقونة + مسافة
بسيطة أعلاه لفصله بصريًا عن صف الأيقونات. */
.footer-contact-email,
.footer-contact-phone { margin-top: 14px; font-size: 14px; }
.footer-contact-email a,
.footer-contact-phone a { display: inline-flex; align-items: center; gap: 8px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 24px; text-align: center; font-size: 13.5px; opacity: .7; }
/* ==================================================================
Responsive
================================================================== */
@media (max-width:1024px) {
.filter-dashboard { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width:640px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* ==================================================================
عناصر أخرى لا تزال مُستخدَمة (صفحات مفردة/أرشيف غير الرئيسية)
— أُبقيَت من النسخة السابقة، لم تُلمَس ضمن نطاق تحويل الرئيسية.
================================================================== */
.sm-breadcrumb { font-size: 14px; color: var(--text-muted); margin: 16px 0; }
.sm-breadcrumb__separator { margin: 0 4px; }
.sm-alert { border-right: 4px solid var(--brand-teal); background: #EAF3FA; padding: 16px; border-radius: var(--radius-sm); margin: 16px 0; }
.sm-alert a { margin-inline-start: 8px; }
.sm-pagination { display: flex; gap: 8px; justify-content: center; margin: 48px 0; }
.sm-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--body-bg); }
.sm-pagination .page-numbers.current { background: var(--primary); color: #fff; }
.sm-empty-state { text-align: center; padding: 48px; color: var(--text-muted); }
.sm-learning-path { display: flex; justify-content: space-between; margin: 48px 0; gap: 16px; }
.sm-learning-path__prev, .sm-learning-path__next { padding: 8px 16px; background: var(--body-bg); border-radius: var(--radius-sm); }
.sm-academic-hub__tabs { display: flex; gap: 8px; overflow-x: auto; border-bottom: 1px solid var(--card-border); margin: 24px 0; }
.sm-academic-hub__tab { padding: 8px 16px; white-space: nowrap; color: var(--text-muted); border-bottom: 2px solid transparent; cursor: pointer; background: none; border-top: none; border-inline: none; font: inherit; }
.sm-academic-hub__tab.is-active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }
.sm-academic-hub__section[hidden] { display: none; }
/* sm-level-grid/sm-level-card حُذِفا نهائيًا أثناء المراجعة الشاملة
الأخيرة - كود ميت غير مُستخدَم في أي قالب (تصميم مبكر لم يُستكمَل). */
/* ==================================================================
صفحة المحتوى المفرد (single-content.php) — أصناف كانت مفقودة بعد
إعادة كتابة main.css الشاملة رغم استخدام القالب لها فعليًا (عطل
حقيقي مُكتشَف ومُصلَح الآن).
================================================================== */
.sm-single-content { padding-bottom: 64px; } /* مسافة قبل الفوتر (البند 5) - لا التصاق بين نهاية المقال والفوتر. */
.sm-single-content__header { margin: 24px 0; }
.sm-single-content__meta { color: var(--text-muted); font-size: 14.5px; margin: 8px 0 24px; }
.sm-single-content__thumbnail img { width: 100%; border-radius: var(--radius-lg); margin-bottom: 24px; aspect-ratio: 16/9; object-fit: cover; }
/* نفس استثناء تقارير التدريب على صفحة المحتوى المفردة (البند 5). */
body.single-rapports-de-stage .sm-single-content__thumbnail img { aspect-ratio: 210/297; max-width: 420px; margin-inline: auto; }
.sm-single-content__body { line-height: 1.9; font-size: 16px; } /* قيمة قديمة تُلغيها قاعدة .sm-single-content__body, .sm-single-lesson__content الأحدث أدناه (16.5px) — أبقيتُها بلا تغيير لتفادي لبس غير ضروري. */
.sm-single-content__body img { border-radius: var(--radius-md); }
.sm-single-lesson { padding-bottom: 64px; } /* نفس مسافة الأمان قبل الفوتر لصفحة الدرس تحديدًا. */
/* جولة التطوير الشاملة — بطاقة رأس صفحة المحتوى الموحَّدة (البند: صفحة
عرض المحتوى في الـ Framework). تُستخدَم في single-cours.php وقالب
المحتوى المشترك single-content.php معًا — نفس المظهر البصري تمامًا،
بخلفية بيضاء ومتمركزة داخل عرض الصفحة، بلا نسخ أسلوب بطاقة المساهمة
حرفيًا (تصميم مستقل مناسب للمقالات الطويلة). */
.sm-content-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--radius-lg);
box-shadow: var(--card-shadow);
padding: 32px clamp(20px, 4vw, 48px);
max-width: 100%;
margin: 24px 0;
}
.sm-content-card__header {
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--card-border);
}
.sm-content-card__header h1 {
margin: 0 0 14px;
color: var(--primary-dark);
font-size: clamp(24px, 3vw, 32px);
line-height: 1.4;
}
.sm-content-card__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin-bottom: 6px;
}
.sm-content-card__meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13.5px;
color: var(--text-muted);
}
.sm-content-card__meta-item i {
color: var(--primary);
font-size: 13px;
}
@media (max-width: 640px) {
.sm-content-card {
padding: 22px 18px;
border-radius: var(--radius-md);
}
}
.sm-download-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0; }
.sm-download-buttons .btn-download { width: auto; }
/* ==================================================================
واجهة اختبار QCM التفاعلية (البند 9)
================================================================== */
.qcm-panel { margin: 32px 0; }
.qcm-progress { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.qcm-progress__bar { flex: 1; height: 8px; background: var(--card-border); border-radius: 999px; overflow: hidden; }
.qcm-progress__fill { height: 100%; background: var(--primary); transition: width 0.3s ease; }
.qcm-progress span { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.qcm-question-text { font-size: 20px; font-weight: 900; color: var(--heading-color); margin-bottom: 24px; line-height: 1.5; }
.qcm-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.qcm-option {
display: flex; align-items: center; gap: 12px; padding: 14px 18px;
border: 1.5px solid var(--card-border); border-radius: var(--radius-md);
cursor: pointer; transition: var(--transition); font-size: 15px;
}
.qcm-option:hover { background: var(--hover-bg); border-color: var(--primary-light); }
.qcm-option input { width: 18px; height: 18px; accent-color: var(--primary); flex-shrink: 0; }
.qcm-nav { display: flex; justify-content: flex-end; }
@media (max-width: 480px) {
.qcm-nav { justify-content: stretch; }
.qcm-nav .btn-download { width: 100%; justify-content: center; }
.qcm-option { padding: 12px 14px; font-size: 14px; }
}
.qcm-score { text-align: center; margin-bottom: 32px; }
.qcm-score h2 { color: var(--primary-dark); font-size: 28px; }
.qcm-review-item { border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 18px; margin-bottom: 12px; }
.qcm-review-item.is-correct { border-inline-start: 4px solid var(--success); }
.qcm-review-item.is-wrong { border-inline-start: 4px solid var(--secondary-dark); }
.qcm-explanation { color: var(--text-muted); font-size: 14px; margin-top: 8px; }
.qcm-option.is-correct-option { border-color: var(--success); background: var(--success-bg); }
.qcm-option.is-wrong-option { border-color: var(--secondary-dark); background: #fff0eb; }
.qcm-feedback { margin: 20px 0; padding: 16px 20px; border-radius: var(--radius-md); }
.qcm-feedback.is-correct { background: var(--success-bg); border-inline-start: 4px solid var(--success); }
.qcm-feedback.is-wrong { background: #fff0eb; border-inline-start: 4px solid var(--secondary-dark); }
.qcm-feedback__status { font-weight: 900; font-size: 16px; margin-bottom: 4px; }
/* ====================================================================
تحسينات بصرية وتجربة استخدام (مجموعة شاملة، خفيفة الأداء)
==================================================================== */
/* --- 0) تلاشٍ خفيف عند تحميل الصفحة --- */
body { opacity: 0; transition: opacity 0.25s ease; }
html.sm-page-loaded body { opacity: 1; }
/* --- 1) ظهور تدريجي للأقسام عند التمرير --- */
.reveal-on-scroll {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.reveal-on-scroll { opacity: 1; transform: none; transition: none; }
body { opacity: 1; transition: none; }
}
/* --- 2) تحسين تفاعل البطاقات (Hover أغنى، Transitions أنعم) --- */
.post-card, .exam-card {
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1), border-color 0.3s ease;
}
.post-card:hover, .exam-card:hover { transform: translateY(-6px); }
.post-title a, .exam-title { transition: color 0.2s ease; }
.post-card:hover .post-title a { color: var(--primary); }
.post-thumb { transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
/* --- 3) تحسين تفاعل الأزرار --- */
.btn-download, .btn-outline, .main-search-btn, .quick-tag-btn, .sm-header__icon-btn, .sm-header__burger {
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.btn-download:active, .main-search-btn:active { transform: translateY(0) scale(0.97); }
.quick-tag-btn:active { transform: scale(0.96); }
/* --- 4) تحسين قسم المستويات: خط جانبي + تحرّك السهم --- */
.edu-level { position: relative; overflow: hidden; }
.edu-level::before {
content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px;
background: var(--primary); transform: scaleY(0); transition: transform 0.25s ease;
}
.edu-level:hover::before { transform: scaleY(1); }
.edu-level i:last-child { transition: transform 0.25s ease; }
.edu-level:hover i:last-child { transform: translateX(-4px); opacity: 1; }
/* --- 5) Hero: أشكال خلفية خفيفة الحركة (زخرفية بحتة، aria-hidden) --- */
.search-hub-hero { position: relative; overflow: hidden; }
.search-hub-hero__shapes { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.search-hub-hero__shape {
position: absolute; border-radius: 50%; opacity: 0.5;
background: radial-gradient(circle, var(--primary-light) 0%, transparent 70%);
animation: sm-float 14s ease-in-out infinite;
}
.search-hub-hero__shape--1 { width: 260px; height: 260px; top: -60px; right: -60px; animation-delay: 0s; }
.search-hub-hero__shape--2 { width: 180px; height: 180px; bottom: -40px; left: 5%; animation-delay: -5s; opacity: 0.35; }
.search-hub-hero__shape--3 { width: 120px; height: 120px; top: 20%; left: 15%; animation-delay: -9s; opacity: 0.3; }
.search-hub-hero__grid {
position: absolute; inset: 0;
background-image: linear-gradient(var(--card-border) 1px, transparent 1px), linear-gradient(90deg, var(--card-border) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
opacity: 0.4;
}
.search-hub-content { position: relative; z-index: 1; }
@keyframes sm-float {
0%, 100% { transform: translate(0,0) scale(1); }
50% { transform: translate(-14px, 18px) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
.search-hub-hero__shape { animation: none; }
}
@media (max-width: 767px) {
.search-hub-hero__grid { display: none; } /* تبسيط على الموبايل لصالح الأداء والوضوح. */
}
/* --- 6) Skeleton Loading (بطاقات هيكلية أثناء جلب نتائج الفلاتر) --- */
.sm-skeleton-card {
background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg);
overflow: hidden; height: 280px; display: flex; flex-direction: column;
}
.sm-skeleton-card__media { aspect-ratio: 16/10; background: linear-gradient(90deg, #eef2f5 25%, #f7f9fa 37%, #eef2f5 63%); background-size: 400% 100%; animation: sm-skeleton-pulse 1.4s ease infinite; }
.sm-skeleton-card__line { height: 12px; margin: 12px 16px 0; border-radius: 4px; background: linear-gradient(90deg, #eef2f5 25%, #f7f9fa 37%, #eef2f5 63%); background-size: 400% 100%; animation: sm-skeleton-pulse 1.4s ease infinite; }
.sm-skeleton-card__line--short { width: 50%; }
@keyframes sm-skeleton-pulse { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
.sm-skeleton-card__media, .sm-skeleton-card__line { animation: none; }
}
/* --- 7) زر العودة للأعلى + مؤشّر التقدّم الدائري --- */
.sm-back-to-top {
position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 90;
width: 52px; height: 52px; border-radius: 50%; background: #fff; border: none;
box-shadow: var(--shadow-lg); cursor: pointer; display: grid; place-items: center;
opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.sm-back-to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.sm-back-to-top:hover { background: var(--primary); }
.sm-back-to-top:hover i { color: #fff; }
.sm-back-to-top i { color: var(--primary-dark); font-size: 16px; transition: color 0.2s ease; }
.sm-back-to-top svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.sm-progress-ring__bg { fill: none; stroke: var(--card-border); stroke-width: 3; }
.sm-progress-ring__fill { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 0.1s linear; }
@media (max-width: 480px) {
.sm-back-to-top { bottom: 16px; inset-inline-end: 16px; width: 44px; height: 44px; }
}
/* --- 8) قسم الإحصائيات مع عدّادات متحركة --- */
/* قسم الإحصائيات حُذِف نهائيًا من الصفحة الرئيسية بطلب صريح - لا CSS متبقٍّ عمدًا. */
/* --- 9) الشريط العلوي (Top Bar) --- */
/* أُزيل نهائيًا (HTML وCSS معًا) بناءً على نصيحة صريحة: "سيزيد من ارتفاع الموقع بدون فائدة" - لا كود متبقٍّ عمدًا. */
/* --- 10) لوحة الفلاتر: مؤشّر تحميل بسيط --- */
.sm-filter-loading { display: none; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.sm-filter-loading.is-active { display: flex; }
.sm-filter-loading__spinner {
width: 14px; height: 14px; border: 2px solid var(--card-border); border-top-color: var(--primary);
border-radius: 50%; animation: sm-spin 0.7s linear infinite;
}
@keyframes sm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sm-filter-loading__spinner { animation: none; } }
/* --- 11) مراجعة مسافات عامة إضافية (White Space أكثر اتساقًا) --- */
section { padding: 72px 0; }
@media (max-width: 767px) { section { padding: 48px 0; } }
.section-head { margin-bottom: 40px; }
/* ====================================================================
نظام QCM الاحترافي (إعادة تصميم شاملة)
==================================================================== */
/* --- شاشة البداية --- */
.qcm-start-screen { text-align: center; max-width: 640px; margin: 0 auto; padding: 24px 0; }
.qcm-start-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--hover-bg); color: var(--primary); font-size: 30px; display: grid; place-items: center; margin: 0 auto 20px; }
.qcm-start-title { font-size: 26px; margin-bottom: 12px; }
.qcm-start-excerpt { color: var(--text-muted); margin-bottom: 28px; }
.qcm-start-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 32px; }
.qcm-start-fact {
background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md);
padding: 16px 20px; min-width: 110px; display: flex; flex-direction: column; align-items: center; gap: 6px;
box-shadow: var(--shadow-sm);
}
.qcm-start-fact i { color: var(--primary); font-size: 18px; }
.qcm-start-fact__value { font-size: 20px; font-weight: 900; color: var(--heading-color); }
.qcm-start-fact__label { font-size: 12px; color: var(--text-muted); }
.qcm-start-btn { font-size: 16px; padding: 16px 40px; }
/* --- شريط التقدّم + المؤقّت --- */
.qcm-progress { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.qcm-progress__count { font-size: 13.5px; font-weight: 700; color: var(--primary-dark); white-space: nowrap; }
.qcm-progress__bar { flex: 1; height: 8px; background: var(--card-border); border-radius: 999px; overflow: hidden; }
.qcm-progress__fill { height: 100%; background: var(--primary); transition: width 0.35s cubic-bezier(0.4,0,0.2,1); }
.qcm-progress__timer {
font-size: 13.5px; font-weight: 700; color: var(--secondary-dark); white-space: nowrap;
background: var(--warning-bg); padding: 4px 10px; border-radius: 999px;
}
/* --- انتقال سلس بين الأسئلة --- */
.qcm-question-wrapper { min-height: 220px; transition: opacity 0.18s ease, transform 0.18s ease; }
.qcm-question-wrapper.is-transitioning { opacity: 0; transform: translateY(6px); }
/* --- شاشة النتيجة: مؤشّر دائري --- */
.qcm-result-ring-wrap { position: relative; width: 160px; height: 160px; margin: 0 auto 20px; }
.qcm-result-ring { transform: rotate(-90deg); }
.qcm-result-ring__bg { fill: none; stroke: var(--card-border); stroke-width: 12; }
.qcm-result-ring__fill { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(0.4,0,0.2,1); }
.qcm-result-ring__fill.is-good { stroke: var(--success); }
.qcm-result-ring__fill.is-medium { stroke: var(--secondary); }
.qcm-result-ring__fill.is-low { stroke: var(--secondary-dark); }
.qcm-result-ring__label { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; font-weight: 900; color: var(--heading-color); }
.qcm-result-rating { text-align: center; font-size: 17px; font-weight: 700; color: var(--primary-dark); margin-bottom: 28px; }
.qcm-result-stats { display: flex; justify-content: center; gap: 16px; margin-bottom: 36px; flex-wrap: wrap; }
.qcm-result-stat {
background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md);
padding: 16px 24px; min-width: 120px; text-align: center; box-shadow: var(--shadow-sm);
}
.qcm-result-stat__value { display: block; font-size: 26px; font-weight: 900; color: var(--heading-color); }
.qcm-result-stat__label { font-size: 12.5px; color: var(--text-muted); }
.qcm-result-stat.is-correct .qcm-result-stat__value { color: var(--success); }
.qcm-result-stat.is-wrong .qcm-result-stat__value { color: var(--secondary-dark); }
.qcm-review-heading { font-size: 18px; margin-bottom: 16px; }
@media (max-width: 480px) {
.qcm-start-facts { gap: 10px; }
.qcm-start-fact { min-width: 90px; padding: 12px 14px; }
.qcm-result-ring-wrap { width: 130px; height: 130px; }
.qcm-result-ring { width: 130px; height: 130px; }
.qcm-result-ring__label { font-size: 22px; }
}
/* ====================================================================
الهيدر — الجولة الرابعة: تصميم منفصل لكل جهاز (لا تصغير نسخة واحدة).
أبيض، Sticky، يتقلص عند التمرير، ظل خفيف جدًا فقط. Mega Menu وقائمة
جانبية ونافذة بحث كلها CSS منطقي بالكامل (RTL/LTR تلقائيًا).
==================================================================== */
.sm-header {
position: sticky; top: 0; z-index: 100;
background: #fff;
box-shadow: none;
transition: box-shadow 0.25s ease, height 0.25s ease;
}
.sm-header.is-shrunk { box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.sm-header__inner {
display: flex; align-items: center; gap: 20px;
height: 76px;
transition: height 0.25s ease;
}
.sm-header.is-shrunk .sm-header__inner { height: 60px; }
/* --- الشعار: [S] + studymaroc --- */
.sm-header__logo {
display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 20px;
color: var(--primary-dark); flex-shrink: 0;
padding-block: 12px; /* هامش داخلي رأسي - يمنع التصاق الشعار بحواف الهيدر مهما كان حجم الصورة. */
}
.sm-header__logo-mark {
width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: #fff; display: grid; place-items: center; font-weight: 900;
transition: width 0.25s ease, height 0.25s ease;
}
.sm-header.is-shrunk .sm-header__logo-mark { width: 30px; height: 30px; font-size: 14px; }
.sm-header__logo-text { color: var(--primary-dark); }
/* ====================================================================
شعار مرفوع (صورة) — نظام مرن بالكامل، متوافق مع أي مقاس/نسبة أبعاد
يُرفَع مستقبلًا بلا أي تعديل CSS لاحق:
- `max-height`/`max-width` بدل أبعاد ثابتة: الصورة تتقلَّص لتلائم
الهيدر دائمًا، ولا تكبر أبدًا أكثر من حجمها الطبيعي (`width: auto`
يمنع التمدد الزائف لصورة صغيرة).
- `object-fit: contain` + عدم تحديد كلا البُعدين معًا: النسبة
الأصلية (Aspect Ratio) محفوظة تلقائيًا دائمًا، بلا تشويه، سواء
كانت الصورة مربعة (أيقونة فقط) أو مستطيلة عريضة (أيقونة + اسم).
- القيم تتكيَّف تلقائيًا مع حالة التقلص عند التمرير ونقاط توقّف
الاستجابة أدناه — لا حاجة لأي تعديل يدوي عند تغيير الصورة لاحقًا.
==================================================================== */
.sm-header__logo-img {
display: block;
max-height: 44px; /* 76px (ارتفاع الهيدر) - 32px (هامش 16px من كل جهة) = 44px. */
max-width: 180px; /* حد أقصى للعرض أيضًا - يمنع شعارًا عريضًا جدًا (بانر أفقي) من الاستحواذ على كامل عرض الهيدر. */
width: auto;
height: auto;
object-fit: contain;
transition: max-height 0.25s ease;
}
.sm-header.is-shrunk .sm-header__logo-img { max-height: 34px; } /* يتقلَّص مع الهيدر نفسه عند التمرير. */
@media (max-width: 1024px) {
.sm-header__logo-img { max-height: 34px; } /* ارتفاع هيدر الهاتف/التابلت أضيق (60px). */
.sm-header.is-shrunk .sm-header__logo-img { max-height: 30px; } /* هيدر الهاتف المُتقلِّص (56px). */
}
.sm-drawer__header .sm-header__logo-img { max-height: 36px; max-width: 160px; } /* رأس القائمة الجانبية له مساحة مستقلة، حد أقصى مناسب لسياقه. */
/* --- القائمة الرئيسية (حاسوب) --- */
.sm-header__nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.sm-header__menu {
display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0;
flex-wrap: nowrap; /* بلا التفاف إطلاقًا - طلب صريح. */
}
.sm-header__menu > li { position: relative; flex-shrink: 0; }
/* رابط عادي + خط متحرك أسفله عند Hover/Focus (200-300ms كما طُلِب) */
.sm-header__menu > li > a, .sm-mega-trigger {
display: flex; align-items: center; gap: 6px; position: relative;
padding: 10px 16px; font-weight: 700; color: var(--text-color); font-size: 14.5px;
background: none; border: 0; cursor: pointer; font-family: inherit;
white-space: nowrap; /* بلا التفاف النص داخل الرابط نفسه. */
}
.sm-header__menu > li > a::after, .sm-mega-trigger::after {
content: ''; position: absolute; bottom: 2px; inset-inline-start: 14px; inset-inline-end: 14px;
height: 2px; background: var(--primary); border-radius: 2px;
transform: scaleX(0); transform-origin: center; transition: transform 0.25s ease;
}
.sm-header__menu > li > a:hover, .sm-header__menu > li > a:focus-visible,
.sm-mega-trigger:hover, .sm-mega-trigger:focus-visible {
color: var(--primary-dark); text-decoration: none; outline: none;
}
.sm-header__menu > li > a:hover::after, .sm-header__menu > li > a:focus-visible::after,
.sm-mega-trigger:hover::after, .sm-mega-trigger:focus-visible::after { transform: scaleX(1); }
.sm-header__menu > li.current-menu-item > a { color: var(--primary-dark); }
.sm-header__menu > li.current-menu-item > a::after { transform: scaleX(1); }
.sm-mega-trigger__caret { font-size: 11px; transition: transform 0.25s ease; }
.sm-mega-item.is-open .sm-mega-trigger__caret { transform: rotate(180deg); }
/* قوائم فرعية عادية (غير Mega) — Hover + Focus + Touch (JS يضيف .is-open) */
.sm-header__menu .sub-menu {
position: absolute; top: calc(100% + 8px); inset-inline-start: 0; min-width: 200px;
background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
padding: 8px; list-style: none; margin: 0; z-index: 50;
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.sm-header__menu > li:hover > .sub-menu,
.sm-header__menu > li:focus-within > .sub-menu,
.sm-header__menu > li.is-open > .sub-menu {
opacity: 1; visibility: visible; transform: translateY(0);
}
.sm-header__menu .sub-menu a { display: block; padding: 10px 14px; font-size: 14px; color: var(--text-color); border-radius: var(--radius-sm); }
.sm-header__menu .sub-menu a:hover { background: var(--hover-bg); color: var(--primary-dark); text-decoration: none; }
.sm-header__menu .submenu-toggle { display: none; } /* مخصَّص للقائمة الجانبية على الهاتف فقط. */
/* عنصر "المزيد" (Priority Navigation) — نفس مظهر رابط عادي تمامًا، لا تمييز بصري زائد. */
.sm-header__more-list { min-width: 180px; }
/* --- Mega Menu المستويات الدراسية --- */
.sm-mega-panel {
position: fixed; top: 76px; inset-inline: 0; /* fixed (لا absolute): يتموضع بالنسبة لنافذة العرض كاملة مباشرة، متجاوزًا مشكلة الحاوية الأب الضيقة (.sm-mega-item بعرض الزر فقط لا الهيدر كاملًا). */
background: #fff; border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-lg);
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, top 0.25s ease;
z-index: 60;
}
.sm-header.is-shrunk .sm-mega-panel { top: 60px; } /* يتكيَّف مع ارتفاع الهيدر المُتقلِّص أثناء التمرير. */
.sm-mega-item:hover > .sm-mega-panel,
.sm-mega-item:focus-within > .sm-mega-panel,
.sm-mega-item.is-open > .sm-mega-panel {
opacity: 1; visibility: visible; transform: translateY(0);
}
.sm-mega-panel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 28px 0; }
.sm-mega-col h4 { margin: 0 0 12px; font-size: 15px; color: var(--primary-dark); border-bottom: 2px solid var(--card-border); padding-bottom: 8px; }
.sm-mega-col h4 a { color: inherit; }
.sm-mega-col h4 a:hover { color: var(--primary); }
.sm-mega-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sm-mega-col a { display: block; padding: 6px 8px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text-color); }
.sm-mega-col a:hover { background: var(--hover-bg); color: var(--primary-dark); text-decoration: none; }
/* --- الأزرار الجانبية --- */
.sm-header__actions { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; flex-shrink: 0; }
.sm-header__icon-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; background: none; border: 0; cursor: pointer;
color: var(--primary-dark); font-size: 16px; border-radius: 50%; transition: background 0.2s ease;
}
.sm-header__icon-btn:hover, .sm-header__icon-btn:focus-visible { background: var(--hover-bg); outline: none; }
/* جرس الإشعارات في الهيدر — نفس .sm-header__icon-btn (زر أيقونة دائري
جاهز، كزر البحث) ونفس .smc-badge--count (شارة العدّاد الحقيقية من
إضافة Community)، فقط بتموضع مطلق فوق الأيقونة بدل التموضع الخطي
المستخدم أصلًا داخل قائمة نص لوحة الحساب. لا ألوان ولا خط جديد. */
.sm-header__notifications-btn { position: relative; text-decoration: none; }
.sm-header__notifications-count {
position: absolute; top: 2px; inset-inline-end: 2px;
margin-inline-start: 0; line-height: 16px; min-width: 16px; font-size: 10px;
}
.sm-header__cta {
background: var(--secondary); color: #fff; padding: 9px 22px;
border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap;
transition: background 0.2s ease, transform 0.2s ease; margin-inline-start: 4px;
}
.sm-header__cta:hover { background: var(--secondary-dark); color: #fff; text-decoration: none; transform: translateY(-1px); }
/* زر الهامبرغر - مخفي على الحاسوب دائمًا */
.sm-header__burger {
display: none; flex-direction: column; justify-content: center; align-items: center;
gap: 5px; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; padding: 0;
border-radius: 50%; transition: background 0.2s ease;
}
.sm-header__burger:hover, .sm-header__burger:focus-visible { background: var(--hover-bg); outline: none; }
.sm-header__burger span { display: block; width: 20px; height: 2px; background: var(--primary-dark); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; }
.sm-header__burger.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sm-header__burger.is-active span:nth-child(2) { opacity: 0; }
.sm-header__burger.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* ====================================================================
نقطتا توقّف: Tablet (تقليل مسافات فقط) وMobile (تصميم منفصل بالكامل)
==================================================================== */
/* --- Tablet (992px-1200px تقريبًا): لا تصغير للخط إطلاقًا - نظام
"المزيد" الديناميكي (JS) هو من يتولّى أي ازدحام محتمل هنا تلقائيًا. --- */
@media (max-width: 1200px) and (min-width: 1025px) {
.sm-mega-panel__grid { gap: 20px; }
}
/* --- Mobile/Tablet الفعلي (≤1024px): تصميم مختلف تمامًا، لا نسخة مصغَّرة --- */
@media (max-width: 1024px) {
.sm-header__nav { display: none !important; }
.sm-header__cta { display: none; }
.sm-header__burger { display: flex; }
.sm-header__inner { height: 60px; gap: 12px; }
.sm-header.is-shrunk .sm-header__inner { height: 56px; }
}
@media (max-width: 480px) {
.sm-header__logo-text { font-size: 17px; }
}
@media (max-width: 320px) {
.sm-header__inner { gap: 8px; }
.sm-header__logo-text { display: none; } /* أضيق نقطة توقّف مدعومة (320px) - إبقاء الشعار المرئي دون كسر التخطيط. */
}
/* ====================================================================
نافذة البحث المنبثقة (Search Modal) — من الأعلى، بدل حقل ثابت
==================================================================== */
.sm-search-modal { position: fixed; inset: 0; z-index: 250; }
.sm-search-modal__backdrop {
position: absolute; inset: 0; background: rgba(9,20,30,0.55);
opacity: 0; transition: opacity 0.25s ease;
}
.sm-search-modal.is-open .sm-search-modal__backdrop { opacity: 1; }
.sm-search-modal__panel {
position: absolute; top: 0; inset-inline: 0; background: #fff;
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
/* إصلاح: كانت ملتصقة تمامًا بحافة الشاشة (padding رأسي فقط، بدون
مسافة فعلية من الأعلى) — هامش علوي واضح + زوايا سفلية دائرية
حتى لا تلتصق النافذة بحافة المتصفح. */
padding: max(32px, env(safe-area-inset-top)) 0 32px;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
max-height: 90vh;
overflow-y: auto;
transform: translateY(-100%);
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
@media (max-width: 600px) {
.sm-search-modal__panel {
padding-block-start: max(56px, env(safe-area-inset-top));
}
}
.sm-search-modal.is-open .sm-search-modal__panel { transform: translateY(0); }
.sm-search-modal__form {
max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 14px;
border-bottom: 2px solid var(--card-border); padding-bottom: 14px;
}
.sm-search-modal__form i:first-child { color: var(--primary-dark); font-size: 18px; }
.sm-search-modal__form input { flex: 1; border: 0; outline: none; font-family: inherit; font-size: 20px; padding: 6px 0; }
.sm-search-modal__close {
background: var(--body-bg); border: 0; width: 38px; height: 38px; border-radius: 50%;
color: var(--text-muted); cursor: pointer; flex-shrink: 0; transition: background 0.2s ease;
}
.sm-search-modal__close:hover { background: var(--hover-bg); color: var(--primary-dark); }
.sm-search-modal__suggestions {
max-width: 720px; margin: 12px auto 0; list-style: none; padding: 0;
max-height: 50vh; overflow-y: auto;
}
.sm-search-modal__suggestions li a {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 10px; border-radius: var(--radius-sm); color: var(--text-color); font-size: 15px;
}
.sm-search-modal__suggestions li a:hover { background: var(--hover-bg); text-decoration: none; }
.sm-search-modal__suggestion-badge { font-size: 11.5px; color: var(--primary); font-weight: 700; white-space: nowrap; }
/* ====================================================================
القائمة الجانبية للهاتف (Off-Canvas) — تحريك right مباشرة (لا
transform)، أبسط آلية ممكنة، محصَّنة رياضيًا من أي عطل موضع.
==================================================================== */
body.sm-no-scroll { overflow: hidden; }
.sm-drawer-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.5);
opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 200;
}
.sm-drawer-overlay.is-open { opacity: 1; visibility: visible; }
.sm-drawer {
/* جولة التطوير الشاملة — البند: إصلاح السبب الجذري لظهور Scrollbar
أفقي في كامل الموقع. السبب الفعلي المُكتشَف: هذا العنصر
position:fixed كان يتحرَّك عبر خاصية `right` مباشرة (من -320px إلى
0)، وهذا معروف كسبب شائع لتوسيع "المنطقة القابلة للتمرير" لصفحة
HTML بأكملها في أغلب المتصفحات حتى مع display خارج نطاق الشاشة —
لأن عناصر fixed المُموضَعة عبر left/right (بعكس transform) قد
تظل تُحتسَب ضمن أبعاد scroll للمستند. الحل: `transform: translateX()`
بدل `right` — لا يُغيّر أبعاد التخطيط أو منطقة scroll إطلاقًا مهما
كانت قيمته، فقط ينقل العنصر بصريًا. النتيجة البصرية مطابقة 100%
للسلوك السابق (نفس الموضع المغلق/المفتوح)، فقط بلا أي تأثير على
عرض المستند. */
position: fixed; top: 0; bottom: 0;
right: 0;
width: 320px; max-width: 85vw;
background: #fff;
box-shadow: -8px 0 24px rgba(0,0,0,0.2);
transform: translateX(100%);
transition: transform 0.3s ease;
z-index: 201; display: flex; flex-direction: column;
overflow-y: auto;
}
.sm-drawer.is-open { transform: translateX(0); }
.sm-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--card-border); }
.sm-drawer__header .sm-header__logo { color: var(--primary-dark); }
.sm-drawer__close { background: var(--body-bg); border: 0; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: var(--primary-dark); }
.sm-drawer__nav { padding: 12px; }
.sm-drawer__nav ul { list-style: none; margin: 0; padding: 0; }
.sm-drawer__nav a { display: block; padding: 14px 16px; border-radius: var(--radius-md); font-weight: 700; color: var(--text-color); }
.sm-drawer__nav a:hover, .sm-drawer__nav a:focus-visible { background: var(--hover-bg); color: var(--primary); text-decoration: none; outline: none; }
.sm-drawer__nav li { position: relative; }
.sm-drawer__submenu-label {
display: flex; align-items: center; justify-content: space-between; width: 100%;
padding: 14px 16px; border-radius: var(--radius-md); font-weight: 700; font-size: inherit;
font-family: inherit; color: var(--text-color); background: none; border: 0; cursor: pointer; text-align: start;
}
.sm-drawer__submenu-label:hover, .sm-drawer__submenu-label:focus-visible { background: var(--hover-bg); color: var(--primary); outline: none; }
.sm-drawer__submenu-label i { transition: transform 0.25s ease; color: var(--text-muted); }
.sm-drawer__has-submenu.is-submenu-open > .sm-drawer__submenu-label i { transform: rotate(180deg); }
.sm-drawer__has-submenu > a { padding-inline-end: 48px; }
.sm-drawer__nav .sub-menu { list-style: none; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-inline-start: 16px; margin: 0; }
.sm-drawer__nav li.is-submenu-open > .sub-menu { max-height: 500px; }
.sm-drawer__nav .submenu-toggle {
position: absolute; inset-inline-end: 8px; top: 6px; background: none; border: 0;
width: 36px; height: 36px; color: var(--text-muted); cursor: pointer; transition: transform 0.25s ease;
}
.sm-drawer__nav li.is-submenu-open > .submenu-toggle { transform: rotate(180deg); }
/* ==================================================================
فواصل بصرية بين الأقسام (البند: "أضف فواصل بصرية جميلة")
================================================================== */
/* sm-section-divider حُذِف نهائيًا أثناء المراجعة الشاملة الأخيرة - بُني
مبدئيًا كفاصل بصري بين الأقسام، لكن الأسلوب الفعلي المُعتمَد لاحقًا
كان sm-pattern-bg + التدرّجات اللونية بدلًا منه؛ لم يُستخدَم إطلاقًا. */
/* نقش هندسي خفيف جدًا كخلفية لبعض الأقسام (بديل خفيف الأداء للموجات) */
.sm-pattern-bg {
position: relative;
}
.sm-pattern-bg::before {
content: '';
position: absolute; inset: 0; pointer-events: none; z-index: 0;
background-image: radial-gradient(var(--card-border) 1px, transparent 1px);
background-size: 28px 28px;
opacity: 0.5;
mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
-webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}
.sm-pattern-bg > .container { position: relative; z-index: 1; }
/* ==================================================================
تحسين Hero: عناصر تعليمية شفافة متحركة ببطء شديد (بدل الدوائر فقط)
================================================================== */
.search-hub-hero__icon {
position: absolute; color: var(--primary-light); opacity: 0.5;
animation: sm-drift 22s ease-in-out infinite;
}
.search-hub-hero__icon--1 { top: 18%; right: 8%; font-size: 34px; animation-delay: -2s; }
.search-hub-hero__icon--2 { bottom: 20%; left: 10%; font-size: 28px; animation-delay: -11s; opacity: 0.35; }
.search-hub-hero__icon--3 { top: 55%; right: 22%; font-size: 22px; animation-delay: -16s; opacity: 0.4; }
@keyframes sm-drift {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(10px, -16px) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) { .search-hub-hero__icon { animation: none; } }
@media (max-width: 767px) { .search-hub-hero__icon { display: none; } } /* تبسيط على الموبايل - أداء ووضوح. */
/* ==================================================================
Scrollbar مخصص يتماشى مع هوية الموقع
================================================================== */
html { scrollbar-width: thin; scrollbar-color: var(--primary) var(--body-bg); } /* Firefox */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--body-bg); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; border: 2px solid var(--body-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }
/* ====================================================================
بطاقة QCM المخصصة (البند 3) — بلا صورة، تصميم مختلف عمدًا ليشعر
الزائر أنه بصدد اختبار تفاعلي حقيقي، لا مقالة عادية.
==================================================================== */
.qcm-card {
background: linear-gradient(160deg, #ffffff 0%, var(--hover-bg) 100%);
border: 1.5px solid var(--primary-light);
border-radius: var(--radius-lg);
padding: 22px;
display: flex;
flex-direction: column;
box-shadow: var(--card-shadow);
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.qcm-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.qcm-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.qcm-card__badge {
display: inline-flex; align-items: center; gap: 6px;
background: var(--primary); color: #fff; font-size: 12px; font-weight: 800;
padding: 5px 12px; border-radius: 999px; letter-spacing: 0.3px;
}
.qcm-card__difficulty { font-size: 12px; font-weight: 700; color: var(--secondary-dark); background: var(--warning-bg); padding: 4px 10px; border-radius: 999px; }
.qcm-card__title { font-size: 17px; font-weight: 900; color: var(--heading-color); line-height: 1.4; margin-bottom: 8px; }
.qcm-card__title a:hover { color: var(--primary); }
.qcm-card__excerpt { font-size: 13.5px; color: var(--text-muted); margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qcm-card__meta { font-size: 12.5px; color: var(--brand-blue); font-weight: 700; margin-bottom: 16px; }
.qcm-card__stats {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-md);
padding: 12px 8px; margin-bottom: 14px;
}
.qcm-card__stat { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-color); font-weight: 700; }
.qcm-card__stat i { color: var(--primary); font-size: 14px; }
.qcm-card__updated { font-size: 11.5px; color: var(--text-muted); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
.qcm-card__start-btn {
margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px;
background: var(--secondary); color: #fff; font-weight: 800; padding: 12px; border-radius: var(--radius-md);
transition: var(--transition);
}
.qcm-card__start-btn:hover { background: var(--secondary-dark); color: #fff; text-decoration: none; transform: translateY(-1px); }
@media (max-width: 480px) {
.qcm-card__stats { gap: 4px; padding: 10px 4px; }
.qcm-card__stat { font-size: 11px; }
}
/* ====================================================================
Typography احترافية لمحتوى المقال (البند 4 — "من أهم الأشياء")
يُطبَّق على .sm-single-content__body و.sm-single-lesson__content معًا
==================================================================== */
.sm-single-content__body,
.sm-single-lesson__content {
max-width: 760px;
margin-inline: auto;
font-size: 16.5px;
/* font-weight: 500 (Medium) بدل الافتراضي 400 — Tajawal بوزن 400 يبدو
رفيعًا جدًا لنص عربي طويل على الشاشة، و700 (الوزن التالي المُحمَّل)
ثقيل أكثر من اللازم لنص أساسي. 500 الوسط المطلوب: واضح بلا رفع
العناوين الثقيلة (700/800/900) التي تبقى كما هي لتمييزها. */
font-weight: 500;
line-height: 1.95;
color: var(--text-color);
counter-reset: h2-counter; /* الترقيم الآن على H2 فقط (كان H3 سابقًا) - عنصر بصري تصميمي، لا ترقيم تقليدي "1." */
}
/* --- العناوين: تمييز بصري واضح بين المستويات --- */
/*
* H2: شارة رقمية دائرية حديثة (تصميمية بحتة، لا "1." تقليدية) —
* Flexbox + gap بدل التموضع المطلق المُستخدَم سابقًا لـ H3: يتكيَّف
* تلقائيًا مع اتجاه الصفحة (RTL للعربية، LTR للفرنسية مستقبلًا) بلا أي
* خاصية منطقية إضافية مطلوبة — تدفق Flexbox الطبيعي يعكس نفسه تلقائيًا
* حسب `direction` الصفحة، فتظهر الشارة دائمًا في بداية السطر الصحيحة
* (يمين في RTL، يسار في LTR) دون أي تعديل يدوي مستقبلي.
*/
/* تصميم H2/H3 مُعاد وفق نموذج مرجعي أرسله المستخدم صراحةً (شريط ممتلئ
بتدرّج لوني للعنوان الرئيسي + صندوق ملوّن بحدّ جانبي للعنوان الفرعي)
— يستبدل تصميم "شارة دائرية قبل نص بلا خلفية" السابق. الألوان نفس
ألوان هوية الموقع فقط: نفس تدرّج .sm-cta/.sm-conclusion-box الموجود
أصلًا لخلفية H2، ونفس نمط الصناديق (hover-bg + حد جانبي بلون primary)
المستخدَم أصلًا في .sm-note-box لصندوق H3 — لا ألوان جديدة. الحدّ
الجانبي المستقيم يستخدم خاصيات RTL/LTR منطقية (border-*-radius) كي
يبقى صحيحًا تلقائيًا في المحتوى الفرنسي (dir="ltr") أيضًا. */
/* لون H2 — أُعيد إلى التدرّج الداكن (primary-dark → brand-blue) بنص
أبيض بعد أن جُرِّبت نسخة فاتحة ونسخة متوسطة التشبّع ولم تُعجبا
المستخدم؛ هذه هي النسخة التي فضَّلها صراحةً وطلب استعادتها. */
.sm-single-content__body h2, .sm-single-lesson__content h2 {
display: flex; align-items: center; gap: 14px;
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--brand-blue) 100%);
color: #fff; font-size: 19px; font-weight: 800;
padding: 16px 22px; border-radius: var(--radius-md);
margin: 44px 0 22px; line-height: 1.4;
counter-increment: h2-counter;
}
.sm-single-content__body h2::before, .sm-single-lesson__content h2::before {
content: counter(h2-counter);
flex-shrink: 0;
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
color: #fff; font-size: 16px; font-weight: 900;
}
/* الرقم الحقيقي الموجود داخل نص العنوان نفسه ("1. كذا") — منفصل تمامًا
عن الشارة الدائرية أعلاه (counter بصري بحت). يُضاف تلقائيًا عبر
enhancements.js (initHeadingNumberHighlight) بلا أي تعديل يدوي على
النصوص الحالية. أبيض شبه شفّاف كي يبقى مقروءًا وواضحًا فوق خلفية
العنوان المتدرّجة متوسطة التشبّع. */
.sm-heading-number { color: rgba(255, 255, 255, 0.85); font-weight: 900; }
.sm-single-content__body h3, .sm-single-lesson__content h3 {
background: var(--hover-bg);
border-inline-start: 4px solid var(--primary);
border-start-start-radius: 0; border-end-start-radius: 0;
border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm);
color: var(--primary-dark);
padding: 10px 18px; font-size: 17.5px; font-weight: 700;
margin: 34px 0 16px; line-height: 1.4;
}
.sm-single-content__body h4, .sm-single-lesson__content h4 {
color: var(--brand-teal); font-size: 16.5px; font-weight: 800;
border-inline-start: 3px solid var(--primary-light);
padding-inline-start: 12px;
margin: 28px 0 12px; line-height: 1.4;
}
.sm-single-content__body h5, .sm-single-lesson__content h5 {
font-size: 15.5px; font-weight: 700; color: var(--text-color); margin: 24px 0 10px;
text-transform: uppercase; letter-spacing: 0.3px; opacity: 0.85;
}
.sm-single-content__body h6, .sm-single-lesson__content h6 {
font-size: 14.5px; font-weight: 700; color: var(--text-muted); margin: 20px 0 8px;
}
/* --- الفقرات والمسافات --- */
.sm-single-content__body p, .sm-single-lesson__content p { margin: 0 0 22px; }
.sm-single-content__body > *:first-child, .sm-single-lesson__content > *:first-child { margin-top: 0; }
/* --- الروابط داخل المحتوى --- */
.sm-single-content__body a, .sm-single-lesson__content a {
color: var(--primary-dark); font-weight: 600;
text-decoration: underline; text-decoration-color: var(--primary-light); text-decoration-thickness: 2px;
text-underline-offset: 3px; transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.sm-single-content__body a:hover, .sm-single-lesson__content a:hover {
color: var(--primary); text-decoration-color: var(--primary);
}
/* --- القوائم --- */
.sm-single-content__body ul, .sm-single-lesson__content ul,
.sm-single-content__body ol, .sm-single-lesson__content ol {
margin: 0 0 24px; padding-inline-start: 28px; display: flex; flex-direction: column; gap: 10px;
}
.sm-single-content__body ul, .sm-single-lesson__content ul { list-style: none; padding-inline-start: 8px; }
.sm-single-content__body ul li, .sm-single-lesson__content ul li {
position: relative; padding-inline-start: 26px;
}
.sm-single-content__body ul li::before, .sm-single-lesson__content ul li::before {
content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
position: absolute; inset-inline-start: 0; top: 2px; color: var(--primary); font-size: 13px;
}
.sm-single-content__body ol li, .sm-single-lesson__content ol li { padding-inline-start: 4px; }
.sm-single-content__body ol, .sm-single-lesson__content ol { list-style: none; counter-reset: ol-counter; padding-inline-start: 4px; }
.sm-single-content__body ol li, .sm-single-lesson__content ol li { position: relative; padding-inline-start: 34px; counter-increment: ol-counter; }
.sm-single-content__body ol li::before, .sm-single-lesson__content ol li::before {
content: counter(ol-counter); position: absolute; inset-inline-start: 0; top: 0;
width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
background: var(--hover-bg); color: var(--primary-dark); font-weight: 800; font-size: 12.5px; border-radius: 50%;
}
.sm-single-content__body li ul, .sm-single-lesson__content li ul,
.sm-single-content__body li ol, .sm-single-lesson__content li ol { margin-top: 10px; margin-bottom: 0; }
/* --- Blockquote --- */
.sm-single-content__body blockquote, .sm-single-lesson__content blockquote {
margin: 28px 0; padding: 20px 24px; background: var(--hover-bg);
border-inline-start: 4px solid var(--primary); border-radius: var(--radius-md);
font-size: 16.5px; font-style: italic; color: var(--primary-dark);
}
.sm-single-content__body blockquote p:last-child, .sm-single-lesson__content blockquote p:last-child { margin-bottom: 0; }
/* --- الجداول ---
إعادة تصميم كاملة بناءً على توجيه صريح: بلا أي تدرّج لوني (Gradient) —
رأس بلون واحد مسطَّح فقط (hover-bg + حدّ سفلي primary، نفس منطق H3
والصناديق الأخرى في الموقع، لا لون جديد ولا تدرّج). وعلى الهاتف: يبقى
جدولًا حقيقيًا بصفوفه وأعمدته (بلا تحويله لبطاقات مكدَّسة) داخل حاوية
overflow-x:auto — فقط بخط وحشو أصغر ومؤشّر تمرير بصري خفيف يظهر فقط
إذا كان الجدول أعرض من الشاشة فعليًا (JS في enhancements.js يتحقّق
من ذلك بلا أي تدخّل يدوي من المحرر). */
.sm-table-wrapper {
position: relative; margin: 28px 0; border-radius: var(--radius-lg); border: 1px solid var(--card-border);
box-shadow: var(--shadow-sm); background: var(--card-bg);
overflow-x: auto; /* يقصّ الزوايا مقوَّسة تلقائيًا أيضًا (overflow-y يصبح auto ضمنيًا). */
}
.sm-single-content__body table, .sm-single-lesson__content table {
width: 100%; border-collapse: collapse; margin: 0; font-size: 15.5px;
}
.sm-single-content__body th, .sm-single-lesson__content th {
background: var(--hover-bg); color: var(--primary-dark); font-weight: 800;
padding: 13px 18px; text-align: start; border-bottom: 2px solid var(--primary); white-space: nowrap;
}
.sm-single-content__body td, .sm-single-lesson__content td {
padding: 12px 18px; border-bottom: 1px solid var(--card-border);
}
.sm-single-content__body tr:last-child td, .sm-single-lesson__content tr:last-child td { border-bottom: 0; }
.sm-single-content__body tr:nth-child(even) td, .sm-single-lesson__content tr:nth-child(even) td { background: var(--body-bg); }
.sm-single-content__body tbody tr, .sm-single-lesson__content tbody tr { transition: background-color 0.15s ease; }
.sm-single-content__body tbody tr:hover td, .sm-single-lesson__content tbody tr:hover td { background: var(--hover-bg); }
/* مؤشّر التمرير الأفقي — شارة صغيرة بلون مصمت (لا تدرّج) بأيقونة سهمين
متقابلين، تظهر فقط عبر class يضيفه JS عند التأكّد أن الجدول أعرض من
الحاوية فعليًا، وتختفي تلقائيًا بمجرد أن يبدأ المستخدم التمرير. */
.sm-table-wrapper.has-overflow::after {
content: '\f337'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px;
position: sticky; float: inline-end; inset-inline-end: 8px; top: 8px; z-index: 2;
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%;
background: var(--primary); color: #fff; opacity: 0.9;
transition: opacity 0.25s ease;
pointer-events: none;
}
.sm-table-wrapper.has-overflow.is-scrolled::after { opacity: 0; }
/* --- الأكواد --- */
.sm-single-content__body code, .sm-single-lesson__content code {
background: var(--hover-bg); color: var(--secondary-dark); padding: 2px 7px; border-radius: 4px;
font-family: 'Courier New', monospace; font-size: 14px; direction: ltr; display: inline-block;
}
.sm-single-content__body pre, .sm-single-lesson__content pre {
background: var(--primary-dark); color: #e6f2f8; padding: 20px; border-radius: var(--radius-md);
overflow-x: auto; margin: 28px 0; direction: ltr; text-align: left; font-size: 14px; line-height: 1.7;
}
.sm-single-content__body pre code, .sm-single-lesson__content pre code {
background: none; color: inherit; padding: 0; font-size: inherit;
}
/* --- الصور: Border Radius، ظل خفيف، Caption أنيق --- */
.sm-single-content__body img, .sm-single-lesson__content img {
max-width: 100%; height: auto; border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); margin: 8px 0; cursor: zoom-in;
}
.sm-single-content__body figure, .sm-single-lesson__content figure { margin: 32px 0; }
.sm-single-content__body figcaption, .sm-single-lesson__content figcaption {
text-align: center; font-size: 14px; color: var(--text-muted); margin-top: 10px; font-style: italic;
}
.sm-single-content__body hr, .sm-single-lesson__content hr {
border: none; border-top: 2px dashed var(--card-border); margin: 40px 0;
}
/* ====================================================================
مكوّنات محتوى إضافية لكاتب الدروس (طُلِبت صراحةً بعد مراجعة نموذج
تصميم مرفق) — ثلاثة مكوّنات كانت مفقودة فعليًا وليس لها أي بديل موجود
مسبقًا (بطاقات ملوّنة الرأس، مقارنة عمودين، صندوق خلاصة متدرّج).
الألوان كلها من متغيّرات هوية الموقع الحقيقية (--primary-dark،
--secondary-dark، --brand-teal، --brand-blue) — لا أي لون جديد تعسفي،
ونفس Radius/Shadow المستخدمَين في بقية الموقع. يُطبَّق داخل غلاف
محتوى المقالة فقط (سواء عبر كتلة Group بصنف CSS إضافي من لوحة
الخصائص، أو كتلة HTML مخصّصة) — بلا تصميم جديد منفصل عن الهوية.
==================================================================== */
/* بطاقات ملوّنة الرأس (لعرض عدة عناصر متوازية: تيارات، مذاهب، أنواع...)
— نسخة مُحسَّنة (رأس متدرّج بدل لون مسطّح + ظل يرتفع عند المرور
بالماوس + Radius أكبر) طُلِب تحسينها صراحةً بعد المراجعة الأولى. */
/* .sm-feature-cards: يبقى للاستخدام اليدوي الاختياري فقط (تغليف عدة
بطاقات بحاوية Flex واحدة). نمط الإدراج الجاهز (Block Pattern) لا
يستخدمه — كل بطاقة كتلة "مجموعة" مستقلة بهامشها الخاص (انظر التعليق
التالي)، حتى تبقى قابلة لـ"تكرار" (Duplicate) بلا قيود ووردبريس على
تكرار الكتل المتداخلة داخل الأنماط الجاهزة. */
.sm-feature-cards { display: flex; flex-direction: column; gap: 16px; margin: 26px 0; }
.sm-feature-card {
margin: 24px 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--card-border);
box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sm-feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* البند/الرأس والجسم أصبحا فقرة (p) عادية ضمن كتلة "مجموعة" — لا كتلة
"HTML مخصّص" بعد الآن (طُلب تسهيل الإدراج). التأهيل هنا (.sm-feature-card
.sm-feature-card__header) مقصود: يرفع درجة التخصيص فوق قاعدة الهامش
العامة لكل فقرة داخل المقال (.sm-single-content__body p) حتى لا يضيف
هامشًا سفليًا غير مرغوب بين الرأس والجسم. */
.sm-feature-card .sm-feature-card__header { margin: 0; padding: 14px 20px; font-weight: 800; font-size: 15.5px; color: #fff; }
/* أربع تنويعات متدرّجة، كلها من ألوان هوية الموقع الحقيقية فقط —
الأولى (primary) هي الأزرق "التعليمي" الفاتح المطلوب كخيار افتراضي. */
.sm-feature-card__header--primary { background: linear-gradient(135deg, var(--primary) 0%, var(--brand-blue) 100%); }
.sm-feature-card__header--secondary { background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%); }
.sm-feature-card__header--teal { background: linear-gradient(135deg, var(--brand-teal) 0%, var(--primary-dark) 100%); }
.sm-feature-card__header--blue { background: linear-gradient(135deg, var(--brand-blue) 0%, var(--primary-dark) 100%); }
.sm-feature-card .sm-feature-card__body { margin: 0; background: var(--card-bg); padding: 18px 20px; }
.sm-feature-card__body p:last-child, .sm-feature-card__body ul:last-child { margin-bottom: 0; }
/* بطاقات مراحل (عرض مراحل/خطوات متوازية، كل بطاقة بشارة ملوّنة وقائمة
عناصر منقّطة الفاصل) — الخلفية بنفس خلفية الاقتباس (--hover-bg) تمامًا،
وحدّ جانبي ملوّن حسب لون كل بطاقة (نفس منطق --primary في الاقتباس، لكن
بثلاثة ألوان هوية بدل لون واحد)، وألوان الشارات من هوية الموقع فقط
(brand-blue، secondary-dark، success) — لا ألوان جديدة. */
.sm-stage-cards { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
@media (min-width: 768px) {
.sm-stage-cards { flex-direction: row; align-items: stretch; }
.sm-stage-cards .sm-stage-card { flex: 1; }
}
.sm-stage-card {
background: var(--hover-bg); border: 1px solid var(--card-border);
border-inline-start: 4px solid var(--primary);
border-radius: var(--radius-md); padding: 16px 18px;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sm-stage-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.sm-stage-card--blue { border-inline-start-color: var(--brand-blue); }
.sm-stage-card--red { border-inline-start-color: var(--secondary-dark); }
.sm-stage-card--green { border-inline-start-color: var(--success); }
.sm-stage-card__badge {
display: inline-block; font-size: 11.5px; font-weight: 800; color: #fff;
padding: 3px 12px; border-radius: 999px; margin: 0 0 8px;
}
.sm-stage-card__badge--blue { background: var(--brand-blue); }
.sm-stage-card__badge--red { background: var(--secondary-dark); }
.sm-stage-card__badge--green { background: var(--success); }
/* التأهيل هنا (.sm-stage-card .sm-stage-card__title إلخ) مقصود — نفس
منطق تأهيل .sm-feature-card .sm-feature-card__header أعلاه: يرفع درجة
التخصيص فوق قاعدة الهامش العامة لكل فقرة داخل المقال
(.sm-single-content__body p) حتى لا يعيد فرض هامش 22px الافتراضي. */
.sm-stage-card .sm-stage-card__title { color: var(--primary-dark); font-size: 15.5px; font-weight: 800; margin: 0 0 6px; }
.sm-stage-card .sm-stage-item {
color: var(--text-muted); font-size: 14px; line-height: 1.5;
margin: 0; padding: 5px 0; border-bottom: 1px dashed var(--card-border);
}
.sm-stage-card .sm-stage-item:last-child { border-bottom: 0; padding-bottom: 0; }
/* مقارنة عمودين (طبقتان/فئتان/رأيان متقابلان). العنوان والجسم فقرة (p)
عادية ضمن كتلة "مجموعة" — نفس منطق تأهيل الأصل أعلاه. */
.sm-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.sm-compare__col { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--card-border); }
.sm-compare__col .sm-compare__title { margin: 0; padding: 10px 14px; text-align: center; font-weight: 800; font-size: 14.5px; color: #fff; }
.sm-compare__title--a { background: var(--primary-dark); }
.sm-compare__title--b { background: var(--secondary-dark); }
.sm-compare__col .sm-compare__body { margin: 0; background: var(--card-bg); padding: 14px 16px; }
.sm-compare__body p:last-child, .sm-compare__body ul:last-child { margin-bottom: 0; }
@media (max-width: 600px) { .sm-compare { grid-template-columns: 1fr; } }
/* صندوق خلاصة ختامي — نسخة مُحسَّنة (طُلِب تصميم أفضل صراحةً): شارة
أيقونة دائرية قبل العنوان (بنفس منطق شارة رقم H2، لانسجام بصري بين
المكوّنين)، وأيقونة زخرفية كبيرة شبه شفافة في الخلفية لعمق بصري، مع
تدرّج أغمق قليلًا من H2 عن قصد (طبقة "إغلاق/تلخيص" أقوى بصريًا من
شريط العنوان "الفاتح") — يبقى ضمن نفس عائلة الأزرق التعليمي دون أي
لون خارج متغيّرات الموقع. */
.sm-conclusion-box {
position: relative; overflow: hidden;
background: linear-gradient(135deg, var(--brand-blue) 0%, var(--primary-dark) 100%);
color: #fff; border-radius: var(--radius-lg); padding: 28px 30px; margin: 44px 0 24px;
}
.sm-conclusion-box::after {
content: '\f02d'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
position: absolute; inset-inline-end: 14px; bottom: -18px;
font-size: 110px; color: rgba(255, 255, 255, 0.08); pointer-events: none; line-height: 1;
}
/* عنوان الخلاصة أصبح فقرة (p) عادية ضمن كتلة "مجموعة" — التأهيل بـ
.sm-conclusion-box يرفع درجة التخصيص فوق قاعدة الهامش العامة لكل فقرة
داخل المقال. */
.sm-conclusion-box .sm-conclusion-box__title {
display: flex; align-items: center; gap: 12px;
font-size: 15.5px; font-weight: 800; color: #fff; margin: 0 0 14px;
}
.sm-conclusion-box__title::before {
content: '\f024'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 15px;
flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: rgba(255, 255, 255, 0.2);
}
.sm-single-content__body .sm-conclusion-box h3, .sm-single-lesson__content .sm-conclusion-box h3,
.sm-single-content__body .sm-conclusion-box h4, .sm-single-lesson__content .sm-conclusion-box h4 {
color: #fff; margin: 0 0 12px; border: 0; padding-inline-start: 0; background: none;
}
.sm-conclusion-box p { position: relative; color: #eaf5fb; margin-bottom: 10px; }
.sm-conclusion-box p:last-child { margin-bottom: 0; }
/* صندوق "مصطلحات ومفاهيم" — يظهر عادةً في آخر كل درس تقريبًا. مستوحى من
نموذج خارجي (terms-section) طُلب دمج تصميمه، لكن بألوان الموقع حصرًا:
خلفية --hover-bg نفسها المستخدَمة في صناديق أخرى، عنوان بلون
--primary-dark مع حدّ سفلي --primary (نفس معادلة تصميم H3 أعلاه)،
وفواصل متقطعة بين كل مصطلح مطابقة لنمط الفاصل
الموجود أصلًا في
الموقع (border-top: 2px dashed var(--card-border)). لا يستخدم خط Amiri
الموجود في النموذج الخارجي — الموقع يعتمد Tajawal حصرًا. */
.sm-terms-box {
background: var(--hover-bg); border-radius: var(--radius-lg);
padding: 26px 28px; margin: 40px 0 24px; box-shadow: var(--shadow-sm);
}
/* العنوان والمصطلح والتعريف كلها فقرات (p) عادية متتالية مباشرة داخل
.sm-terms-box — بلا كتلة "مجموعة" منفصلة لكل مصطلح (طُلب تسهيل إضافة
مصطلحات جديدة عبر "تكرار/Duplicate" فقط بلا كود؛ ووردبريس يمنع تكرار
كتلة "مجموعة" متداخلة داخل نمط جاهز، فالتسطيح هنا يتفادى القيد).
التأهيل بـ .sm-terms-box يرفع درجة التخصيص فوق قاعدة الهامش العامة لكل
فقرة داخل المقال. الفاصل المتقطّع بين كل مصطلح ٍوالآخر (نفس نمط
الفاصل
في الموقع) يُبنى الآن عبر :first-of-type/:last-of-type
بدل حاوية مستقلة لكل مصطلح. */
.sm-terms-box .sm-terms-box__title {
margin: 0 0 16px; font-size: 15.5px; font-weight: 800; color: var(--primary-dark);
padding-bottom: 10px; border-bottom: 2px solid var(--primary);
}
.sm-terms-box .sm-term-word { margin: 14px 0 0; font-weight: 800; color: var(--text-color); font-size: 15.5px; }
.sm-terms-box .sm-term-word:first-of-type { margin-top: 0; }
.sm-terms-box .sm-term-word::after { content: '：'; }
.sm-terms-box .sm-term-def {
margin: 4px 0 14px; padding-bottom: 14px; color: var(--text-muted);
font-size: 14.5px; line-height: 1.8; border-bottom: 1px dashed var(--card-border);
}
.sm-terms-box .sm-term-def:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
@media (max-width: 767px) {
.sm-single-content__body, .sm-single-lesson__content { font-size: 16.5px; line-height: 1.85; }
.sm-single-content__body h2, .sm-single-lesson__content h2 { font-size: 18px; gap: 10px; padding: 12px 16px; }
.sm-single-content__body h2::before, .sm-single-lesson__content h2::before { width: 30px; height: 30px; font-size: 13px; }
.sm-single-content__body h3, .sm-single-lesson__content h3 { font-size: 15.5px; padding: 9px 14px; }
.sm-terms-box { padding: 18px 18px; margin: 32px 0 20px; }
/* لم يعد عنوان صندوق المصطلحات بحاجة لتصغير خاص في الموبايل — أصبح
19px الأصلية على سطح المكتب 15.5px ضمن السلّم الموحّد الجديد (أصغر
من التجاوز 17px السابق أصلًا)، فقاعدة سطح المكتب وحدها كافية الآن. */
/* الجداول على الهاتف: تبقى جدولًا حقيقيًا بنفس الصفوف والأعمدة (بلا
تحويل إلى بطاقات مكدَّسة) — فقط تمرير أفقي سلس داخل .sm-table-wrapper
نفسه (يُبقي إطاره وظلّه كما هو على سطح المكتب)، مع خط وحشو أصغر
والسماح للكلمات العربية بالالتفاف داخل الخلية بدل white-space:nowrap.
مؤشّر التمرير الدائري (has-overflow::after أعلاه) يبقى فعّالًا هنا. */
.sm-single-content__body table, .sm-single-lesson__content table { font-size: 14px; }
.sm-single-content__body th, .sm-single-lesson__content th {
padding: 9px 10px; white-space: normal;
}
.sm-single-content__body td, .sm-single-lesson__content td {
padding: 8px 10px;
}
}
/* --- Lightbox بسيط للصور (Vanilla JS، لا مكتبة) --- */
.sm-lightbox-overlay {
position: fixed; inset: 0; background: rgba(9, 20, 30, 0.92); z-index: 300;
display: flex; align-items: center; justify-content: center; padding: 24px;
opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
}
.sm-lightbox-overlay.is-open { opacity: 1; visibility: visible; }
.sm-lightbox-overlay img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius-md); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.sm-lightbox-close {
position: absolute; top: 20px; inset-inline-end: 24px; background: rgba(255,255,255,0.15);
border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 18px;
}
/* ====================================================================
البند 6: تصميم موحّد لعناصر المحرر المتبقية (نماذج، حقول إدخال،
Select، Checkbox، Radio) — الأزرار/التنبيهات/الجداول/القوائم/الصور/
Blockquote/Pagination/Breadcrumb/مربعات البحث مُصمَّمة بالفعل أعلاه.
==================================================================== */
.sm-single-content__body input[type="text"],
.sm-single-content__body input[type="email"],
.sm-single-content__body input[type="url"],
.sm-single-content__body input[type="number"],
.sm-single-content__body input[type="search"],
.sm-single-content__body textarea,
.sm-single-content__body select,
.sm-single-lesson__content input[type="text"],
.sm-single-lesson__content input[type="email"],
.sm-single-lesson__content textarea,
.sm-single-lesson__content select,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%; padding: 12px 16px; border: 1.5px solid var(--card-border);
border-radius: var(--radius-md); font-family: inherit; font-size: 15px;
background: #fff; color: var(--text-color); transition: border-color 0.2s ease, box-shadow 0.2s ease;
margin-bottom: 16px;
}
.sm-single-content__body input:focus, .sm-single-content__body textarea:focus, .sm-single-content__body select:focus,
.comment-form input:focus, .comment-form textarea:focus {
outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(57,177,209,0.15);
}
.sm-single-content__body select { cursor: pointer; }
/* Checkbox وRadio بتصميم موحّد بألوان الهوية */
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 18px; height: 18px; cursor: pointer; vertical-align: middle; }
/* أزرار إرسال النماذج (تعليقات ونحوها) */
.comment-form input[type="submit"], .sm-form-submit {
background: var(--secondary); color: #fff; border: none; padding: 12px 32px;
border-radius: 50px; font-weight: 700; cursor: pointer; transition: var(--transition);
}
.comment-form input[type="submit"]:hover, .sm-form-submit:hover { background: var(--secondary-dark); }
/* مربعات معلومات وملاحظات (بديل Blockquote للتنبيهات المُصنَّفة). أيقونة
::before تلقائية لكل نوع (لا حاجة لأي تعديل يدوي من الكاتب — الحاوية
أصلًا display:flex فتنضم الأيقونة كعنصر Flex عادي)، مطابقةً لطلب
مراجعة هذا القسم وتحسينه بصريًا. */
.sm-info-box, .sm-note-box, .sm-warning-box, .sm-success-box {
padding: 18px 20px; border-radius: var(--radius-md); margin: 24px 0;
border-inline-start: 4px solid; display: flex; gap: 12px; align-items: flex-start; font-size: 14px;
}
.sm-info-box::before, .sm-note-box::before, .sm-warning-box::before, .sm-success-box::before {
font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 18px;
flex-shrink: 0; margin-top: 1px;
}
.sm-info-box { background: #EAF3FA; border-color: var(--brand-blue); }
.sm-info-box::before { content: '\f05a'; color: var(--brand-blue); } /* fa-circle-info */
.sm-note-box { background: var(--hover-bg); border-color: var(--primary); }
.sm-note-box::before { content: '\f0eb'; color: var(--primary); } /* fa-lightbulb */
.sm-warning-box { background: var(--warning-bg); border-color: var(--secondary-dark); }
.sm-warning-box::before { content: '\f06a'; color: var(--secondary-dark); } /* fa-circle-exclamation */
.sm-success-box { background: var(--success-bg); border-color: var(--success); }
.sm-success-box::before { content: '\f058'; color: var(--success); } /* fa-circle-check */
/* صندوق ملاحظة بسيط (بلا أيقونة، بلا شريط جانبي — إطار رفيع محيط
بالكامل). طُلب صراحةً بنفس شكل صندوق "ملاحظة عن التنقيط" في دليل
Lesson design cheatsheet. نفس ألوان .sm-warning-box حرفيًا (لا لون
جديد)، فقط بتصميم أبسط لملاحظات تحريرية سريعة لا تحتاج تصنيف/أيقونة. */
.sm-simple-note {
background: var(--warning-bg); border: 1px solid var(--secondary-light);
border-radius: var(--radius-md); padding: 16px 20px; margin: 24px 0; font-size: 14px;
}
.sm-simple-note strong, .sm-simple-note b { color: var(--secondary-dark); }
/* وسوم/Tags عامة */
.sm-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.sm-tag { background: var(--hover-bg); color: var(--primary-dark); font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 999px; transition: var(--transition); }
.sm-tag:hover { background: var(--primary); color: #fff; text-decoration: none; }
.sm-tag.is-active { background: var(--primary); color: #fff; }
/* فلتر "المادة" داخل صفحات أرشيف المستوى — راجع inc/level-subject-filter.php */
.sm-level-subject-filter { margin-top: 20px; }
/* Tabs عامة (إن استُخدمت مستقبلًا) */
.sm-tabs__nav { display: flex; gap: 4px; border-bottom: 2px solid var(--card-border); margin-bottom: 20px; overflow-x: auto; }
.sm-tabs__btn { padding: 10px 20px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; font-weight: 700; color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: var(--transition); }
.sm-tabs__btn.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.sm-tabs__panel[hidden] { display: none; }
/* ====================================================================
الاقتراحات الإضافية: شريط تقدّم القراءة، المشاركة، الطباعة، الكاتب،
آخر تحديث، التنقل بين المقالات
==================================================================== */
.sm-reading-progress {
position: fixed; top: 0; right: 0; height: 3px; width: 0%;
background: linear-gradient(90deg, var(--primary), var(--secondary));
z-index: 999; transition: width 0.1s linear;
}
.sm-last-updated {
display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px;
color: var(--text-muted); background: var(--body-bg); padding: 6px 14px;
border-radius: 999px; margin-top: 10px;
}
.sm-content-footer-actions {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
margin: 32px 0; padding: 16px 0; border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border);
}
.sm-share-buttons { display: flex; align-items: center; gap: 10px; }
.sm-share-buttons__label { font-weight: 700; font-size: 14px; color: var(--text-color); }
.sm-share-btn {
width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
background: var(--body-bg); color: var(--primary-dark); border: none; cursor: pointer; font-size: 14px;
transition: var(--transition);
}
.sm-share-btn:hover { transform: translateY(-2px); color: #fff; text-decoration: none; }
.sm-share-btn--whatsapp:hover { background: #25D366; }
.sm-share-btn--facebook:hover { background: #1877F2; }
.sm-share-btn--copy:hover { background: var(--primary); }
.sm-copy-toast {
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
background: var(--primary-dark); color: #fff; padding: 12px 24px; border-radius: 50px;
font-size: 14px; font-weight: 700; box-shadow: var(--shadow-lg); z-index: 400;
opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none;
}
.sm-copy-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.sm-print-btn {
display: inline-flex; align-items: center; gap: 8px; background: none; border: 1.5px solid var(--card-border);
color: var(--text-color); padding: 9px 18px; border-radius: var(--radius-md); cursor: pointer; font-weight: 700;
font-size: 14px; transition: var(--transition);
}
.sm-print-btn:hover { border-color: var(--primary); color: var(--primary); }
.sm-author-card {
display: flex; gap: 16px; align-items: center; background: var(--body-bg);
border-radius: var(--radius-lg); padding: 20px; margin: 24px 0;
}
.sm-author-card img { border-radius: 50%; flex-shrink: 0; }
.sm-author-card__label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.sm-author-card__name { margin: 2px 0 6px; color: var(--primary-dark); font-size: 16px; }
.sm-author-card__bio { font-size: 13.5px; color: var(--text-muted); margin: 0; line-height: 1.6; }
.sm-author-card__name-link { color: inherit; text-decoration: none; }
.sm-author-card__name-link:hover { color: var(--primary); text-decoration: underline; }
.sm-author-card__avatar-link { display: inline-flex; flex-shrink: 0; }
.sm-author-card__profile-link {
display: inline-block;
margin-top: 8px;
font-size: 13px;
font-weight: 700;
color: var(--primary);
text-decoration: none;
}
.sm-author-card__profile-link:hover { text-decoration: underline; }
.sm-prev-next-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 32px 0; }
.sm-prev-next-nav__item {
display: flex; flex-direction: column; gap: 6px; padding: 16px 20px;
background: var(--body-bg); border-radius: var(--radius-md); transition: var(--transition);
}
.sm-prev-next-nav__item:hover { background: var(--hover-bg); text-decoration: none; }
.sm-prev-next-nav__item--next { text-align: end; }
.sm-prev-next-nav__label { font-size: 12.5px; color: var(--primary); font-weight: 700; }
.sm-prev-next-nav__title { font-size: 14.5px; font-weight: 700; color: var(--heading-color); }
@media print {
.sm-header, .footer, .sm-back-to-top, .sm-drawer, .sm-drawer-overlay,
.sm-content-footer-actions, .sm-related-content, .sm-reading-progress, .sm-search-modal,
.sm-download-buttons, .qcm-panel, .sm-prev-next-nav { display: none !important; }
.sm-single-content__body, .sm-single-lesson__content { max-width: 100%; font-size: 13pt; }
body { color: #000; }
}
@media (max-width: 640px) {
.sm-content-footer-actions { flex-direction: column; align-items: flex-start; }
.sm-prev-next-nav { grid-template-columns: 1fr; }
.sm-prev-next-nav__item--next { text-align: start; }
}
/* ====================================================================
تنويع خلفيات الأقسام + عناصر تعليمية خفيفة (البند 5)
==================================================================== */
.sm-section-decor { position: relative; overflow: hidden; }
.sm-section-decor > .container { position: relative; z-index: 1; }
.sm-decor-icon {
position: absolute; color: var(--primary-dark); opacity: 0.05; pointer-events: none; z-index: 0;
animation: sm-drift 26s ease-in-out infinite;
}
@media (max-width: 767px) { .sm-decor-icon { display: none; } } /* تبسيط على الموبايل - أداء ووضوح. */
@media (prefers-reduced-motion: reduce) { .sm-decor-icon { animation: none; } }
/* تدرّجات لون خفيفة جدًا مميِّزة لكل قسم (لا تلوين قوي، فقط كسر التكرار البصري) */
.sm-tint-blue { background: linear-gradient(180deg, #F4FAFC 0%, #EAF5F9 100%); }
.sm-tint-teal { background: linear-gradient(180deg, #F0FAF9 0%, #E5F5F3 100%); }
.sm-tint-orange { background: linear-gradient(180deg, #FFFBF7 0%, #FFF3EA 100%); }
/* sm-tint-neutral حُذِفت - لم تُطبَّق على أي قسم فعليًا، وقيمتها كانت
مطابقة أصلًا لـ var(--section-bg) الافتراضية (تكرار بلا فائدة). */
/* ====================================================================
Block الدعوة لإجراء (CTA) — اكتُشِف أثناء المراجعة الشاملة أنه بلا
أي CSS إطلاقًا رغم كونه Block مُسجَّل قابل للإدراج من Gutenberg.
==================================================================== */
.sm-cta { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--brand-blue) 100%); padding: 64px 0; text-align: center; }
.sm-cta__inner { max-width: 640px; margin: 0 auto; }
.sm-cta__title { color: #fff; font-size: 28px; font-weight: 900; margin-bottom: 28px; line-height: 1.4; }
.sm-cta__button {
display: inline-flex; align-items: center; gap: 10px; background: var(--secondary); color: #fff;
padding: 15px 40px; border-radius: 999px; font-weight: 800; font-size: 16px; transition: var(--transition);
}
.sm-cta__button:hover { background: var(--secondary-dark); color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); }
@media (max-width: 480px) { .sm-cta__title { font-size: 22px; } .sm-cta { padding: 48px 0; } }
/* ====================================================================
صفحة 404
==================================================================== */
.sm-404__icon { font-size: 64px; color: var(--primary-light); margin-bottom: 24px; }
.sm-404__title { font-size: 30px; font-weight: 900; color: var(--primary-dark); margin-bottom: 16px; }
.sm-404__text { max-width: 520px; margin: 0 auto; color: var(--text-muted); font-size: 16px; }
.sm-404__links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.sm-404__search-form {
max-width: 480px; margin: 32px auto; display: flex; align-items: center; gap: 12px;
border: 2px solid var(--card-border); border-radius: 50px; padding: 6px 8px 6px 22px;
background: #fff; transition: border-color 0.2s ease;
}
.sm-404__search-form:focus-within { border-color: var(--primary); }
.sm-404__search-form i { color: var(--primary-dark); flex-shrink: 0; }
.sm-404__search-form input {
flex: 1; min-width: 0; border: 0; outline: none; font-family: inherit; font-size: 16px;
padding: 10px 0; background: transparent;
}
.sm-404__search-form button {
background: var(--secondary); color: #fff; border: 0; padding: 12px 28px;
border-radius: 50px; font-weight: 700; cursor: pointer; flex-shrink: 0; transition: background 0.2s ease;
}
.sm-404__search-form button:hover { background: var(--secondary-dark); }
@media (max-width: 480px) {
.sm-404__search-form { padding: 6px 6px 6px 16px; gap: 8px; }
.sm-404__search-form button { padding: 10px 18px; font-size: 14px; }
}
/* ====================================================================
مناطق الإعلانات - إطار بصري خفيف جدًا لتمييزها في وضع التحرير فقط
(لا تأثير على العرض العام للزائر، فقط توضيح بصري بسيط جدًا)
==================================================================== */
.sm-ad-zone { margin: 28px 0; text-align: center; overflow: hidden; }
.sm-ad-zone:empty { display: none; }
/* ====================================================================
عنوان القسم + رابط "عرض الكل" (Block section-header) — اكتُشِف أثناء
تشخيص "الأقسام تبدو ملتصقة" أنه لم يكن له أي CSS مخصص منذ بنائه.
==================================================================== */
.sm-section-header {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
margin-bottom: 24px; /* مسافة واضحة بين العنوان والبطاقات أسفله. */
}
.sm-section-header__title {
font-size: 22px; font-weight: 900; color: var(--heading-color); margin: 0;
}
.sm-section-header__view-all {
font-size: 14px; font-weight: 700; color: var(--primary); white-space: nowrap; flex-shrink: 0;
display: flex; align-items: center; gap: 6px; transition: var(--transition);
}
.sm-section-header__view-all:hover { color: var(--primary-dark); text-decoration: none; gap: 9px; }
/* أقسام "دروس مرتبطة" / "محتوى مرتبط بهذا الدرس" / "مقالات ذات صلة" —
مسافة رأسية واضحة بين كل قسم والذي يليه (كانت الأقسام تعتمد فقط على
هوامش المتصفح الافتراضية لعناصرها الداخلية، فتبدو مُلتصقة). */
.sm-related-content {
margin-top: 48px;
padding-top: 40px;
border-top: 1px solid var(--card-border);
}
.sm-related-content:first-of-type { border-top: 0; padding-top: 0; } /* أول قسم مباشرة بعد المحتوى - لا خط فاصل مزدوج مع ما فوقه. */
@media (max-width: 767px) {
.sm-section-header { margin-bottom: 18px; }
.sm-section-header__title { font-size: 19px; }
.sm-related-content { margin-top: 36px; padding-top: 28px; }
}
/* ====================================================================
تكامل الحساب في الهيدر (Studymaroc Community) — دخول/تسجيل للزوار،
صورة رمزية + اسم + دور ظاهر + قائمة منسدلة للمستخدمين المسجَّلين.
يعتمد على نفس أنماط ونظام ألوان الهيدر الحالي (لا تصميم جديد).
==================================================================== */
.sm-header__auth { display: flex; align-items: center; gap: 8px; }
.sm-header__login-link {
font-size: 14px; font-weight: 600; color: var(--text-color);
padding: 8px 14px; border-radius: var(--radius-sm); transition: background 0.2s ease, color 0.2s ease;
}
.sm-header__login-link:hover, .sm-header__login-link:focus-visible {
background: var(--hover-bg); color: var(--primary-dark); text-decoration: none;
}
.sm-header__register-link {
font-size: 14px; font-weight: 700; color: #fff; background: var(--secondary);
padding: 8px 16px; border-radius: var(--radius-sm); transition: background 0.2s ease, transform 0.2s ease;
}
.sm-header__register-link:hover, .sm-header__register-link:focus-visible {
background: var(--secondary-dark); color: #fff; text-decoration: none; transform: translateY(-1px);
}
.sm-header__account { position: relative; }
.sm-header__account-trigger {
display: flex; align-items: center; gap: 8px; height: auto; width: auto;
padding: 4px 10px 4px 4px; border-radius: 999px; background: transparent;
border: none; cursor: pointer; transition: background 0.2s ease;
}
.sm-header__account-trigger:hover, .sm-header__account-trigger:focus-visible { background: var(--hover-bg); outline: none; }
.sm-header__avatar { border-radius: 50%; width: 32px; height: 32px; display: block; }
.sm-header__account-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.sm-header__account-name { font-size: 14px; font-weight: 600; color: var(--text-color); }
.sm-header__account-role { font-size: 11px; font-weight: 600; color: var(--primary-dark); }
.sm-header__account-caret { font-size: 10px; color: var(--text-muted); }
.sm-header__account.is-open .sm-header__account-caret { transform: rotate(180deg); }
.sm-header__account .sub-menu {
position: absolute; top: calc(100% + 8px); inset-inline-end: 0; inset-inline-start: auto; min-width: 200px;
background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
padding: 8px; list-style: none; margin: 0; z-index: 50;
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.sm-header__account:hover > .sub-menu,
.sm-header__account:focus-within > .sub-menu,
.sm-header__account.is-open > .sub-menu {
opacity: 1; visibility: visible; transform: translateY(0);
}
.sm-header__account .sub-menu a {
display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 14px;
color: var(--text-color); border-radius: var(--radius-sm);
}
.sm-header__account .sub-menu a:hover { background: var(--hover-bg); color: var(--primary-dark); text-decoration: none; }
@media (max-width: 1024px) {
.sm-header__account-info { display: none; }
.sm-header__login-link { padding: 8px 10px; }
.sm-header__register-link { padding: 8px 12px; }
}
@media (max-width: 480px) {
.sm-header__login-link span, .sm-header__register-link span { display: none; }
}