بطاقة أساسية
هذه البطاقة تستخدم .card فقط بدون أي variant. الـ
hover يرفّع الخلفية من surface-2 إلى surface-3.
Card System
The unified card system for BrightAI — every card on the production
site resolves to .card + one of the variants documented
below. All variants share the same base (surface-2 + border-soft +
radius-xl + 250ms transition). All aliases below still resolve to
the canonical patterns. Page is fully indexable (REPORTS-SEO-FOUNDATION).
نظام البطاقات الموحّد في BrightAI. كل بطاقة على الموقع تستخدم
.card كنقطة بداية مع variant واحد من القائمة تحت.
الـaliases القديمة (مثل .inner-card) كلها لا تزال تشتغل.
الصفحة قابلة للفهرسة بالكامل — مرجع تصميمي مفتوح للزوار.
Base card
.card — surface-2 + border-soft + radius-xl + padding-6 + transition.
Default state. Hover elevates to surface-3 with border-strong and shadow-elevated.
حجم md (افتراضي)
البطاقة التلقائية تستخدم padding-6 (1.5rem) — هذا هو الـdefault.
صرّح card--md لو تبي توضّح النية.
Size variants
.card--sm (padding-4 / 1rem) · .card--md (padding-6 / 1.5rem, default) ·
.card--lg (padding-8 / 2rem). استخدم الـsize لتعديل
كثافة المحتوى بدون تغيير الـvariant.
card--sm
Compact. للـdense grids أو sidebar cards.
المزيدcard--md
الـdefault. استخدمه للـfeature/solution cards العادية.
المزيدcard--lg
Spacious. للـhero cards أو marketing tiles اللي تحتاج مساحة تنفّس.
المزيدCard variants
خمسة variants + واحد إضافي (solid). كل variant يضيف طبقة visual على الـbase بدون كسر الـlayout أو الـanatomy.
حوكمة الذكاء الاصطناعي
طبقة تشغيلية تحمي بياناتك الحساسة قبل ما توصل للنموذج، وتوثّق كل خطوة بشكل غير قابل للتعديل.
اعرف المزيدلوحة Kernel الحية
مراقبة لحظية لكل طلب AI مع تنبيهات فورية وتقرير امتثال تلقائي.
افتح اللوحةحوكمة AI مؤسسية
حل شامل مع ضوابط NCA ECC جاهزة وتكامل مع أنظمتك الداخلية. مدعوم بـKernel للأمان.
ابدأ التقييمبطاقة صلبة
خلفية --bg-elevated مع border-default. أثقل من الـdefault وأخف من الـcta gradient.
Card sub-elements
BEM sub-elements تكوّن البطاقة. كل واحد له دور محدد:
__icon (top) · __eyebrow (tag) ·
__title (h3) · __desc (lead) ·
__meta (bottom row) · __action (cta).
الجهات الحكومية
ضوابط NCA وSDAIA جاهزة للتفعيل. سجلات تدقيق قابلة للمراجعة، ومسارات موافقة مدمجة.
اعرف المزيدLegacy aliases (still active)
كل class قديم يستهدفه canonical واحد. الـHTML القديم ما يحتاج يتغيّر — الـCSS الجديد يضمن نفس السلوك البصري.
| Alias (HTML قديم) | Canonical | Usage count | Status |
|---|---|---|---|
.inner-card | .card--feature | 191 | active |
.home-stat-card | .card--metric | ~24 | active |
.feature-card | .card--feature | ~6 | active |
.pricing-card | .card--pricing | ~9 | active |
.home-cta-card | .card--cta | ~3 | active |
.inner-card__icon | .card__icon | ~38 | active |
.inner-card__title | .card__title | ~80 | active |
.inner-card__text | .card__desc | ~52 | active |
.inner-card__footer | .card__meta | ~20 | active |
.glass | .card--glass | ~5 | active |
سياسة الـaliases: الـclasses القديمة لا تزال تعمل بدون أي تعديل في الـHTML. الـcanonical classes (الموثّقة فوق) هي المفضّلة للكود الجديد فقط — الـlegacy HTML يبقى كما هو لتفادي كسر 191 استخدام في الإنتاج.
Design tokens used
الـcards تستخدم tokens فقط — صفر hex values. هذا يضمن consistency عبر الموقع كله.
| Token | Value | Used by |
|---|---|---|
--surface-2 | #0f1525 (--bg-surface) | base · feature · solid · glass inner |
--surface-3 | #151c30 (--bg-elevated) | hover state · solid variant |
--border-soft | rgba(148,163,184,0.1) | base border |
--border-strong | rgba(148,163,184,0.35) | hover state · focus-visible |
--border-brand | var(--interactive-primary) | __icon border · gradient border |
--radius-xl | 1rem | all variants (unified) |
--ease-emphasized | cubic-bezier(0.2, 0, 0, 1) | transitions |
--shadow-glow-brand | 0 0 24px -4px rgba(42,138,126,0.4) | feature hover · gradient hover |