تخطَّ إلى المحتوى الرئيسي

نظام التصميم العام

قواعد الحركة

تحوّلات لطيفة عند التمرير، احترام تقليل الحركة، وميزانية الحركة.

مكتمل

دقيقة، هادفة، واعية بـ reduced-motion. الانضباط التحريري ينطبق على الحركة أيضاً — إذا لم تكسب الحركة ميزانيتها، تُحذف.

أنماط الحركة المعتمدة

تمرير الكرت: translateY(-1px) + tint للحدّ
transition 150ms ease. tint بنفسجي للحدّ بـ 40% opacity. ظلّ بنفسجي ناعم اختياري 6-12px.
تقدّم سهم CTA: الـ gap يتحرّك عند hover
أيقونة السهم تتقدّم بـ ~0.25rem عند hover. 150ms ease. إشارة اتجاهية لطيفة.
نقطة الإشارة الحيّة: نبضة
`.deadline-pulse` و `.live-tick` يستخدمان نبضة 1.5-2s. محجوز للمواعيد النشطة والإشارات الحيّة.
شريط تكر: تمرير خطي
شريط Signal-board يمرّر أفقياً بمعدل ثابت. اقتصاد GPU (background-position فقط).
مسح خلفية متحرّك
`.cal-signal-board__scan` يُجري خط مسح خفيفاً بـ 6s عبر hero Signal Board. يتوقّف عند عدم نشاط المستخدم.

قواعد عامة

  • كل حركة يجب أن تحترم `prefers-reduced-motion: reduce`. تحوّلات الـ hover تتعطّل، النبضات تتجمّد.
  • لا ميزانية حركة فوق 6s لأي حلقة واحدة (أطول حلقة حيّة = `.cal-signal-board__scan` عند 6s).
  • لا حركة على أجهزة اللمس لتحوّلات hover (مُعطَّلة تلقائياً عبر `@media (hover: none)`).
  • خصائص GPU فقط: `transform`, `opacity`, `background-position`. تجنّب تحريك `width`, `height`, `top`, `left`.