/* ============================================================ معهد قلم — course-themes.css نظام السمات البصرية لصفحات الدورات. كل صفحة دورة تكتب سمتها مرة واحدة على الـ body: ومن هنا تأخذ لوحة ألوانها وزخرفتها الخلفية المناسبة لموضوعها — بلا أي CSS خاص بالصفحة. نفس أسلوب [data-theme] في workshops.css. السمة تضبط: • --accent / --accent-2 : لون الدورة (يستعملهما courses.css في الهيرو والمحاور والحاسبة وأزرار الاختيار). • --motif-op : شدة ظهور الزخرفة خلف الهيرو. الزخرفة نفسها (رسم SVG لكل موضوع) يحقنها js/course-fx.js داخل .chero — ولذلك هي زينة فقط: الصفحة تعمل كاملة بدونها. لإضافة سمة جديدة: أضف كتلة [data-theme="…"] هنا + رسمها في js/course-fx.js (كائن MOTIFS)، ثم استعمل اسمها في theme داخل config/courses.config.js. ============================================================ */ /* ===== لوحات الألوان لكل موضوع ===== */ [data-theme="prep"] { --accent:#4AB3E2; --accent-2:#2b7fb0 } /* تحضير للمرحلة — أزرق العلامة */ [data-theme="math"] { --accent:#7C5CFF; --accent-2:#5a3bd2 } /* رياضيات */ [data-theme="physics"] { --accent:#2F80ED; --accent-2:#1b5fc4 } /* فيزياء */ [data-theme="electronics"] { --accent:#23B5A6; --accent-2:#0a7264 } /* إلكترونيكا */ [data-theme="computer"] { --accent:#4C5BD4; --accent-2:#2c3795 } /* حاسوب */ [data-theme="robotics"] { --accent:#FF8A3D; --accent-2:#b34712 } /* روبوتيكا */ [data-theme="arabic"] { --accent:#F2735C; --accent-2:#c0392b } /* اللغة العربية */ [data-theme="english"] { --accent:#2FA84F; --accent-2:#1c6e35 } /* اللغة الإنجليزية */ [data-theme="hebrew"] { --accent:#A855C8; --accent-2:#6d2f85 } /* اللغة العبرية */ [data-theme="art"] { --accent:#F25C9A; --accent-2:#be2f69 } /* رسم وفنون */ [data-theme="gifted"] { --accent:#C8972A; --accent-2:#86610f } /* تميّز وموهوبين — ذهب العلامة */ [data-theme="psychometry"] { --accent:#0FA3B1; --accent-2:#076872 } /* بسيخومتري */ [data-theme="professional"]{ --accent:#274A73; --accent-2:#0f2238 } /* تأهيل مهني */ [data-theme="personal"] { --accent:#1F8A70; --accent-2:#0d5142 } /* دروس شخصية */ /* ===== طبقة الزخرفة خلف الهيرو ===== ترسم بخطوط رفيعة بلون الدورة فوق الشريط الليلي. pointer-events:none حتى لا تعترض أي نقرة، و aria-hidden في الـ JS حتى لا يقرأها الصوت. */ .chero{ --motif-op:.16 } .cmotif{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .cmotif svg{position:absolute;inset-block-start:50%;inset-inline-end:-4%; width:min(560px,72vw);height:auto;transform:translateY(-50%); opacity:var(--motif-op);color:var(--accent,#4AB3E2); fill:none;stroke:currentColor;stroke-width:1.2; stroke-linecap:round;stroke-linejoin:round} /* على الموبايل: الزخرفة أصغر وأخفت حتى لا تزاحم النص العربي */ @media(max-width:760px){ .chero{ --motif-op:.1 } .cmotif svg{inset-inline-end:-22%;width:min(420px,105vw)} } /* بعض الأشكال داخل الزخرفة تُملأ بدل أن تُحدَّد (نقاط، عُقد دارة، نجوم) */ .cmotif .solid{fill:currentColor;stroke:none} /* الحركة: انجراف بطيء جدًا — يديره js/course-fx.js عبر GSAP عند توفره. هذه حركة احتياطية بـ CSS وحدها لمن لا يصله GSAP. */ @keyframes motifdrift{ from{transform:translateY(-50%) translate3d(0,0,0)} to {transform:translateY(-50%) translate3d(0,-18px,0)} } .cmotif svg{animation:motifdrift 14s ease-in-out infinite alternate} /* لا حركة إطلاقًا عند تفضيل تقليل الحركة */ @media(prefers-reduced-motion:reduce){ .cmotif svg{animation:none} } /* ===== لمسات صغيرة تتبع لون السمة ===== */ /* أيقونة المحور تأخذ تدرّج لون الدورة بدل التعبئة المسطحة */ [data-theme] .pillar .pic{ background:linear-gradient(145deg, color-mix(in srgb,var(--accent) 20%,#fff), color-mix(in srgb,var(--accent) 7%,#fff)); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)} /* شارة الطريقة (وجاهي/زوم/ديجيتالي) في الهيرو */ .cbadge.method{background:color-mix(in srgb,var(--accent) 24%,transparent); border-color:color-mix(in srgb,var(--accent) 45%,transparent)}