/* ============================================================
brand.css — الهوية البصرية (ثلاثة ثيمات على رموز واحدة)
الطبقة الثالثة والأخيرة: mud-theme.css → eidu.css → brand.css
القسم ١–١٥: إعادة صبغ ما هو قائم عبر الرموز (tokens) ثم المكوّنات.
القسم ١٦–١٨: مكوّنات وُلدت من الهوية نفسها ولا مقابل لها في
الطبقتين تحتها — الهيكل الجانبي، صفحة الهبوط، كرت الصفقة.
============================================================ */
/* ------------------------------------------------------------
1. رموز الهوية — والثيمات الثلاثة
كلُّ لونٍ في هذا الملفّ يمرّ من هنا. ولا لونَ مكتوباً بيده تحت هذا
القسم إلا الأبيض على صورة. وهذا وحده ما يجعل تبديل الثيم تبديلَ
كتلةٍ واحدة لا مطاردةَ ستّةٍ وأربعين موضعاً.
والأسماء أدوارٌ لا أصباغ. كانت «--brand-violet»، ومتغيّرٌ
اسمه بنفسجيّ يحمل بترولياً فخٌّ لمن يقرأ الملفّ بعد ستّة أشهر.
والثلاثيّات (--*-rgb) ضرورةٌ لا زينة: «rgba()» لا تقبل
متغيّراً يحمل «#RRGGBB»، والشفافية مستعملةٌ في عشرات المواضع.
التبديل بسمة على يكتبها الخادم من كوكي القارئ — لا سكربت
ولا وميضَ ثيمٍ خاطئ قبل التصحيح.
------------------------------------------------------------ */
/* ------------------------------------------------------------
ترتيب الكتل هنا ليس ذوقاً.
«:root» يطابق دائماً، ووزنُه يساوي وزن
«[data-eidu-theme="..."]» بالضبط. فإن جاءت كتلةُ الافتراضي بعد كتلةِ
ثيمٍ آخر غلبته — لأن المتساويين يحسمهما ترتيب الملفّ.
وقد وقع ذلك فعلاً: حين صار الفيروزي افتراضاً بقيت كتلتُه في مكانها
الرابع، فابتلع «:root» فيها البتروليَّ والنحاسَ والبنفسجيَّ قبله —
وعمل النيليُّ وحده لأنه بعدها. فصارت كتلةُ الافتراضي أولَ الكتل،
ويحرس ذلك اختبارٌ لا تعليق.
------------------------------------------------------------ */
/* ١-أ. الافتراضي — فيروزيّ مسطَّح: لونٌ واحد وخلفيةٌ صلبة لا تدرّج.
والفيروزي المطلوب #1B8C8C تباينه على الأبيض ٤٫١:١ — يمرّ لعناصر
الواجهة والنصّ الكبير ولا يمرّ لنصّ الحجم العادي. فهو لون الأزرار
والشارات كما طُلب، ورابطُ المتن بدرجةٍ أعمق (٥٫٦:١) لأنه يُقرأ
سطراً لا يُنظر إليه شارةً. */
:root,
[data-eidu-theme="teal"] {
--brand-primary: #1B8C8C;
--brand-link: #157070;
--brand-primary-deep: #157070;
--brand-secondary: #157070;
--brand-secondary-deep: #115C5C;
--brand-decor: #1B8C8C;
--brand-accent: #1B8C8C;
--brand-accent-soft: #E3F1F1;
--brand-accent-ink: #0F5555;
--brand-success: #1F7A4A;
--brand-success-ink: #1A6640;
--brand-warning: #B5761E;
--brand-warning-ink: #7A4E14;
--brand-danger: #C0442F;
--brand-danger-ink: #A33827;
--brand-danger-out: #C0442F;
--brand-ink: #122626;
--brand-ink-mid: #46605F;
--brand-ink-dim: #7B9494;
--brand-primary-rgb: 27, 140, 140;
--brand-secondary-rgb: 21, 112, 112;
--brand-decor-rgb: 27, 140, 140;
--brand-accent-rgb: 27, 140, 140;
--brand-success-rgb: 31, 122, 74;
--brand-warning-rgb: 181, 118, 30;
--brand-danger-rgb: 192, 68, 47;
--brand-ink-rgb: 18, 38, 38;
--brand-shade-rgb: 10, 26, 26;
--brand-dim-rgb: 123, 148, 148;
--brand-surface: #FFFFFF;
--brand-surface-strong: #FFFFFF;
--brand-surface-soft: #F7FBFB;
--brand-blur: none;
--brand-line: #D6E7E7;
--brand-line-strong: #B4D2D2;
--brand-tint: rgba(27, 140, 140, 0.07);
--brand-notch: #F1F7F7;
--brand-thead: #ECF5F5;
--brand-page: #F1F7F7;
--brand-page-flat: #F1F7F7;
--brand-gradient: #1B8C8C;
--brand-gradient-warm: #157070;
--brand-toast: rgba(18, 38, 38, 0.95);
--brand-toast-success: rgba(20, 80, 52, 0.95);
--brand-toast-info: rgba(17, 92, 92, 0.95);
--brand-toast-warning: rgba(122, 78, 20, 0.95);
--brand-toast-error: rgba(140, 44, 56, 0.95);
}
/* ١-ب. بترولي وذهبي.
البترولي لون الشحن والموانئ، والذهبي محصورٌ في الوفر: الرقم الوحيد
الذي يُراد أن تقفز إليه عين التاجر. */
[data-eidu-theme="petrol"] {
--brand-primary: #0D5A63;
--brand-link: #0D5A63;
--brand-primary-deep: #094A52;
--brand-secondary: #12747F;
--brand-secondary-deep: #0E5F68;
--brand-decor: #D99A3E;
--brand-accent: #D99A3E;
--brand-accent-soft: #FBF1DF;
--brand-accent-ink: #8A5D14;
--brand-success: #1F7A4A;
--brand-success-ink: #1A6640;
--brand-warning: #C97F1B;
--brand-warning-ink: #8A5217;
--brand-danger: #C0442F;
--brand-danger-ink: #A33827;
--brand-danger-out: #C0442F;
--brand-ink: #0F2226;
--brand-ink-mid: #4A6367;
--brand-ink-dim: #7C9295;
--brand-primary-rgb: 13, 90, 99;
--brand-secondary-rgb: 18, 116, 127;
--brand-decor-rgb: 217, 154, 62;
--brand-accent-rgb: 217, 154, 62;
--brand-success-rgb: 31, 122, 74;
--brand-warning-rgb: 201, 127, 27;
--brand-danger-rgb: 192, 68, 47;
--brand-ink-rgb: 15, 34, 38;
--brand-shade-rgb: 8, 24, 27;
--brand-dim-rgb: 124, 146, 149;
/* أسطحٌ صلبة لا زجاجية: جداول الدفتر وسُلَّم الشرائح تُقرأ أرقاماً */
--brand-surface: #FFFFFF;
--brand-surface-strong: #FFFFFF;
--brand-surface-soft: #F8FBFB;
--brand-blur: none;
--brand-line: #D8E5E5;
--brand-line-strong: #B9D0D0;
--brand-tint: rgba(13, 90, 99, 0.07);
--brand-notch: #F2F6F6;
--brand-thead: #EDF4F4;
--brand-page: linear-gradient(150deg, #F6FAFA 0%, #EEF5F5 55%, #F8F4EC 100%);
--brand-page-flat: #F2F6F6;
--brand-gradient: linear-gradient(135deg, #0D5A63, #12747F);
--brand-gradient-warm: linear-gradient(135deg, #0D5A63, #D99A3E);
--brand-toast: rgba(15, 34, 38, 0.95);
--brand-toast-success: rgba(20, 80, 52, 0.95);
--brand-toast-info: rgba(11, 66, 72, 0.95);
--brand-toast-warning: rgba(122, 74, 25, 0.95);
--brand-toast-error: rgba(140, 44, 56, 0.95);
}
/* ١-ج. حِبر ونحاس — ورقُ دفترٍ ونحاس.
والنحاس تباينه ٣٫٧:١ فلا يحمل نصّاً: حدٌّ وشارةٌ وشريطُ تقدّم فقط. */
[data-eidu-theme="copper"] {
--brand-primary: #16324F;
--brand-link: #16324F;
--brand-primary-deep: #0E2440;
--brand-secondary: #24507B;
--brand-secondary-deep: #1B3F63;
--brand-decor: #C0703C;
--brand-accent: #C0703C;
--brand-accent-soft: #F5E7DC;
--brand-accent-ink: #7A4520;
--brand-success: #256349;
--brand-success-ink: #1F5540;
--brand-warning: #B5761E;
--brand-warning-ink: #7A4E14;
--brand-danger: #B03A2E;
--brand-danger-ink: #93301F;
--brand-danger-out: #B03A2E;
--brand-ink: #0B1D30;
--brand-ink-mid: #4C5A68;
--brand-ink-dim: #8A8175;
--brand-primary-rgb: 22, 50, 79;
--brand-secondary-rgb: 36, 80, 123;
--brand-decor-rgb: 192, 112, 60;
--brand-accent-rgb: 192, 112, 60;
--brand-success-rgb: 37, 99, 73;
--brand-warning-rgb: 181, 118, 30;
--brand-danger-rgb: 176, 58, 46;
--brand-ink-rgb: 11, 29, 48;
--brand-shade-rgb: 7, 20, 34;
--brand-dim-rgb: 138, 129, 117;
--brand-surface: #FFFFFF;
--brand-surface-strong: #FFFFFF;
--brand-surface-soft: #FBF9F6;
--brand-blur: none;
--brand-line: #E3DCD3;
--brand-line-strong: #CFC5B8;
--brand-tint: rgba(22, 50, 79, 0.06);
--brand-notch: #F7F4F0;
--brand-thead: #F2EDE6;
--brand-page: linear-gradient(150deg, #FAF8F4 0%, #F5F0E9 55%, #F3F1ED 100%);
--brand-page-flat: #F7F4F0;
--brand-gradient: linear-gradient(135deg, #16324F, #24507B);
--brand-gradient-warm: linear-gradient(135deg, #16324F, #C0703C);
--brand-toast: rgba(11, 29, 48, 0.95);
--brand-toast-success: rgba(26, 74, 55, 0.95);
--brand-toast-info: rgba(18, 43, 68, 0.95);
--brand-toast-warning: rgba(122, 78, 20, 0.95);
--brand-toast-error: rgba(132, 42, 33, 0.95);
}
/* ١-د. بنفسجي منضبط — الهوية الأولى بأدوارٍ مصحّحة.
البنفسجي عُمّق من #7C6FEA (تباينه ٣٫٨:١ ولا يمرّ AA) إلى #6355D6
(٥٫٥:١)، والوردي نُزع من دور الإجراء الثانوي إلى الزينة وحدها،
والأخضر صار أخضر يُقرأ عليه الأبيض. وهو الثيم الوحيد الذي يبقي
الأسطح الزجاجية — فهي طابعه. */
[data-eidu-theme="violet"] {
--brand-primary: #6355D6;
--brand-link: #6355D6;
--brand-primary-deep: #5346C4;
--brand-secondary: #A855C0;
--brand-secondary-deep: #9147A8;
--brand-decor: #EC6FAE;
--brand-accent: #1F9D6B;
--brand-accent-soft: #DFF3EA;
--brand-accent-ink: #14563B;
--brand-success: #1F8A5E;
--brand-success-ink: #14563B;
--brand-warning: #B57A16;
--brand-warning-ink: #7A5210;
--brand-danger: #C0392B;
--brand-danger-ink: #A32E22;
--brand-danger-out: #C0392B;
--brand-ink: #1E1833;
--brand-ink-mid: #575070;
--brand-ink-dim: #8B84A6;
--brand-primary-rgb: 99, 85, 214;
--brand-secondary-rgb: 168, 85, 192;
--brand-decor-rgb: 236, 111, 174;
--brand-accent-rgb: 31, 157, 107;
--brand-success-rgb: 31, 138, 94;
--brand-warning-rgb: 181, 122, 22;
--brand-danger-rgb: 192, 57, 43;
--brand-ink-rgb: 30, 24, 51;
--brand-shade-rgb: 24, 18, 46;
--brand-dim-rgb: 139, 132, 166;
--brand-surface: rgba(255, 255, 255, 0.72);
--brand-surface-strong: rgba(255, 255, 255, 0.86);
--brand-surface-soft: rgba(255, 255, 255, 0.58);
--brand-blur: blur(16px);
--brand-line: rgba(99, 85, 214, 0.16);
--brand-line-strong: rgba(99, 85, 214, 0.26);
--brand-tint: rgba(99, 85, 214, 0.08);
--brand-notch: #F7F5FD;
--brand-thead: rgba(247, 245, 253, 0.94);
--brand-page: linear-gradient(150deg, #F6F2FC 0%, #ECE6FA 45%, #F8EFF5 100%);
--brand-page-flat: #F1ECFB;
--brand-gradient: linear-gradient(135deg, #6355D6, #A855C0);
--brand-gradient-warm: linear-gradient(135deg, #6355D6, #EC6FAE);
--brand-toast: rgba(36, 28, 61, 0.94);
--brand-toast-success: rgba(28, 92, 60, 0.95);
--brand-toast-info: rgba(59, 51, 138, 0.95);
--brand-toast-warning: rgba(122, 74, 25, 0.95);
--brand-toast-error: rgba(140, 44, 56, 0.95);
}
/* ١-هـ. نيليّ — لونٌ واحد مسطَّح كذلك.
و#3C5896 تباينه ٦٫٩:١، فيحمل النصّ والرابط معاً بلا تعميق. */
[data-eidu-theme="indigo"] {
--brand-primary: #3C5896;
--brand-link: #3C5896;
--brand-primary-deep: #2F477C;
--brand-secondary: #2F477C;
--brand-secondary-deep: #263A66;
--brand-decor: #3C5896;
--brand-accent: #3C5896;
--brand-accent-soft: #E7EBF5;
--brand-accent-ink: #2B4074;
--brand-success: #1F7A4A;
--brand-success-ink: #1A6640;
--brand-warning: #B5761E;
--brand-warning-ink: #7A4E14;
--brand-danger: #C0442F;
--brand-danger-ink: #A33827;
--brand-danger-out: #C0442F;
--brand-ink: #171D2E;
--brand-ink-mid: #4B546B;
--brand-ink-dim: #838BA1;
--brand-primary-rgb: 60, 88, 150;
--brand-secondary-rgb: 47, 71, 124;
--brand-decor-rgb: 60, 88, 150;
--brand-accent-rgb: 60, 88, 150;
--brand-success-rgb: 31, 122, 74;
--brand-warning-rgb: 181, 118, 30;
--brand-danger-rgb: 192, 68, 47;
--brand-ink-rgb: 23, 29, 46;
--brand-shade-rgb: 15, 19, 32;
--brand-dim-rgb: 131, 139, 161;
--brand-surface: #FFFFFF;
--brand-surface-strong: #FFFFFF;
--brand-surface-soft: #F8F9FC;
--brand-blur: none;
--brand-line: #DFE3EE;
--brand-line-strong: #C2C9DC;
--brand-tint: rgba(60, 88, 150, 0.07);
--brand-notch: #F3F5FA;
--brand-thead: #EDF0F7;
--brand-page: #F3F5FA;
--brand-page-flat: #F3F5FA;
--brand-gradient: #3C5896;
--brand-gradient-warm: #2F477C;
--brand-toast: rgba(23, 29, 46, 0.95);
--brand-toast-success: rgba(20, 80, 52, 0.95);
--brand-toast-info: rgba(30, 44, 82, 0.95);
--brand-toast-warning: rgba(122, 78, 20, 0.95);
--brand-toast-error: rgba(140, 44, 56, 0.95);
}
/* ١-و. ما لا يتبدّل بتبدّل الثيم — القياسات والخطّ والظلال المشتقّة */
:root {
--eidu-font: "IBM Plex Sans Arabic", "Inter", "Segoe UI", sans-serif;
/* الظلال ملوّنة بلون الهوية لا بالأسود — الرمادي يُطفئ الصفحة */
--mud-elevation-1: 0 2px 8px rgba(var(--brand-primary-rgb), 0.06);
--mud-elevation-2: 0 6px 18px rgba(var(--brand-primary-rgb), 0.08);
--mud-elevation-3: 0 8px 24px rgba(var(--brand-primary-rgb), 0.10);
--mud-elevation-4: 0 12px 28px rgba(var(--brand-primary-rgb), 0.14);
--mud-elevation-6: 0 16px 38px rgba(var(--brand-primary-rgb), 0.16);
--mud-elevation-8: 0 20px 50px rgba(var(--brand-primary-rgb), 0.20);
/* إعادة توجيه رموز الثيم الأصلي إلى الهوية */
--mud-primary: var(--brand-primary);
--mud-primary-hover: rgba(var(--brand-primary-rgb), 0.07);
--mud-primary-active: rgba(var(--brand-primary-rgb), 0.14);
--mud-secondary: var(--brand-secondary);
--mud-tertiary: var(--brand-decor);
--mud-success: var(--brand-success);
--mud-warning: var(--brand-warning);
--mud-surface: var(--brand-surface);
--mud-background: var(--brand-page-flat);
--mud-text-primary: var(--brand-ink);
--mud-text-secondary: var(--brand-ink-mid);
--mud-text-disabled: var(--brand-ink-dim);
--mud-divider: var(--brand-line);
--mud-input-border: rgba(var(--brand-primary-rgb), 0.22);
--mud-action-hover: rgba(var(--brand-primary-rgb), 0.05);
--mud-radius: 10px;
--mud-radius-lg: 16px;
/* الأخضر «مالٌ داخل» والذهبيُّ «وفرٌ» — دَورانِ لا دَورٌ واحد */
--eidu-saving: var(--brand-success);
--eidu-saving-bg: rgba(var(--brand-success-rgb), 0.09);
--eidu-locked: var(--brand-ink-dim);
--eidu-header-h: 68px;
}
/* ------------------------------------------------------------
2. خلفية الصفحة
التدرّج على مثبّتاً: على يتمدّد مع طول الصفحة
فتنزلق نقاط التوقّف وتختلف الصبغة بين صفحة وأخرى.
------------------------------------------------------------ */
html {
min-height: 100%;
background: var(--brand-page) no-repeat;
background-attachment: fixed;
}
body {
background: transparent;
font-family: var(--eidu-font);
color: var(--brand-ink);
letter-spacing: 0;
}
::selection { background: rgba(var(--brand-primary-rgb), 0.20); color: var(--brand-ink); }
a { color: var(--brand-link); text-decoration: none; }
a:hover { color: var(--brand-secondary); }
:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
/* شريط التمرير جزء من الهوية على الشاشات الطويلة */
* { scrollbar-color: rgba(var(--brand-primary-rgb), 0.32) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
background: rgba(var(--brand-primary-rgb), 0.28);
border: 3px solid transparent;
border-radius: 99px;
background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--brand-primary-rgb), 0.45); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }
/* ------------------------------------------------------------
3. العناوين
أوزان Roboto الخفيفة (300) لا وجود لها في خطّ الهوية،
فالعناوين تُثقَّل وتُضغط أسطرها كما في التصميم.
------------------------------------------------------------ */
h1, .mud-h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
h2, .mud-h2 { font-size: 2rem; font-weight: 700; line-height: 1.32; letter-spacing: -.01em; }
h3, .mud-h3 { font-size: 1.6rem; font-weight: 700; line-height: 1.35; }
h4, .mud-h4 { font-size: 1.35rem; font-weight: 700; line-height: 1.4; letter-spacing: 0; }
h5, .mud-h5 { font-size: 1.2rem; font-weight: 700; line-height: 1.45; letter-spacing: 0; }
h6, .mud-h6 { font-size: 1.05rem; font-weight: 700; line-height: 1.5; letter-spacing: 0; }
.mud-caption { font-size: .8rem; letter-spacing: 0; color: var(--brand-ink-mid); }
.mud-text-secondary { color: var(--brand-ink-mid); }
/* ------------------------------------------------------------
4. العلامة
------------------------------------------------------------ */
.eidu-brand { color: var(--brand-ink); font-size: 1.05rem; gap: 12px; }
.eidu-brand:hover { color: var(--brand-ink); }
.eidu-brand__mark {
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--brand-gradient-warm);
font-size: .72rem;
letter-spacing: .02em;
box-shadow: 0 8px 20px rgba(var(--brand-primary-rgb), 0.30);
}
.eidu-main { padding-block: 36px 72px; }
/* ------------------------------------------------------------
5. الأزرار
------------------------------------------------------------ */
.mud-button {
padding: 9px 18px;
border-radius: var(--mud-radius);
font-size: .875rem;
font-weight: 600;
line-height: 1.6;
letter-spacing: 0;
text-transform: none;
transition: background-color .18s, box-shadow .18s, border-color .18s, color .18s, transform .18s;
}
.mud-button--filled {
background-color: var(--brand-primary);
background-image: var(--brand-gradient);
box-shadow: 0 8px 20px rgba(var(--brand-primary-rgb), 0.26);
}
/* التدرّج لا يُنتقل إليه بسلاسة — الإحساس بالتفاعل يأتي من الرفع والظل */
.mud-button--filled:hover {
background-color: var(--brand-primary);
background-image: linear-gradient(135deg, var(--brand-primary-deep), var(--brand-secondary-deep));
box-shadow: 0 12px 26px rgba(var(--brand-primary-rgb), 0.34);
transform: translateY(-1px);
}
.mud-button--filled:active { transform: none; box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.28); }
.mud-button--filled:disabled {
background-image: none;
background-color: rgba(var(--brand-primary-rgb), 0.18);
color: #fff;
box-shadow: none;
}
.mud-button--outlined {
border: 1.5px solid var(--brand-line-strong);
background: var(--brand-surface);
color: var(--brand-ink);
}
.mud-button--outlined:hover {
border-color: rgba(var(--brand-primary-rgb), 0.45);
background: var(--brand-surface-strong);
color: var(--brand-ink);
}
.mud-button--secondary { --mud-primary: var(--brand-secondary); --mud-primary-hover: rgba(var(--brand-secondary-rgb), .08); }
.mud-button--secondary.mud-button--filled { background-image: linear-gradient(135deg, var(--brand-secondary), var(--brand-decor)); }
.mud-button--error { --mud-primary: var(--brand-danger); --mud-primary-hover: rgba(var(--brand-danger-rgb), .08); }
.mud-button--success { --mud-primary: var(--brand-success); --mud-primary-hover: rgba(var(--brand-success-rgb), .08); }
/* NavLink يضع .active على الرابط الحالي — الثيم الأصلي لا يستعملها */
.mud-button.active {
background-color: rgba(var(--brand-primary-rgb), 0.12);
color: var(--brand-primary);
font-weight: 700;
}
.mud-button.active.mud-button--filled { color: #fff; }
/* ------------------------------------------------------------
6. الحقول
------------------------------------------------------------ */
.mud-field .mud-input {
padding: 13px 15px;
border: 1px solid var(--mud-input-border);
border-radius: var(--mud-radius);
background: var(--brand-surface);
font-size: .95rem;
transition: border-color .18s, box-shadow .18s, background-color .18s;
}
.mud-field .mud-input:hover { border-color: rgba(var(--brand-primary-rgb), 0.42); }
/* حدّ ثابت العرض + هالة بدل التسميك: تسميك الحدّ يزحزح المحتوى */
.mud-field .mud-input:focus {
border: 1px solid var(--brand-primary);
padding: 13px 15px;
background: var(--brand-surface-strong);
box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.16);
}
.mud-field .mud-label {
top: 13px;
font-size: .95rem;
background: var(--brand-notch);
border-radius: 3px;
color: var(--brand-ink-mid);
}
.mud-field .mud-input:focus + .mud-label,
.mud-field .mud-input:not(:placeholder-shown) + .mud-label { transform: translateY(-22px) scale(.78); }
[dir="rtl"] .mud-field .mud-input:focus + .mud-label,
[dir="rtl"] .mud-field .mud-input:not(:placeholder-shown) + .mud-label { transform: translateY(-22px) scale(.78); }
.mud-field .mud-input.invalid,
.mud-field .mud-input[aria-invalid="true"] { border-color: var(--brand-danger); }
.mud-field .mud-input.invalid:focus,
.mud-field .mud-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(var(--brand-danger-rgb), 0.16); }
.mud-field .validation-message,
.mud-field .mud-helper-error { color: var(--brand-danger-ink); }
input::placeholder, textarea::placeholder { color: var(--brand-ink-dim); }
select.mud-input { background-color: var(--brand-surface); }
/* ------------------------------------------------------------
7. الأسطح — ورق وبطاقات
------------------------------------------------------------ */
.mud-paper,
.mud-card {
background: var(--brand-surface);
backdrop-filter: var(--brand-blur);
-webkit-backdrop-filter: var(--brand-blur);
border: 1px solid var(--brand-line);
border-radius: var(--mud-radius-lg);
box-shadow: var(--mud-elevation-2);
}
.mud-paper--outlined { background: var(--brand-surface-soft); box-shadow: none; }
.mud-card-header { padding: 18px 20px 0; }
.mud-card-content { padding: 20px; }
.mud-card-actions { padding: 12px 20px 16px; border-top: 1px solid var(--brand-line); }
/* ------------------------------------------------------------
8. بطاقات الشرائح السعرية
------------------------------------------------------------ */
.eidu-tier {
background: var(--brand-surface);
backdrop-filter: var(--brand-blur);
-webkit-backdrop-filter: var(--brand-blur);
border: 1px solid var(--brand-line);
border-radius: var(--mud-radius-lg);
padding: 22px;
box-shadow: 0 8px 24px rgba(var(--brand-primary-rgb), 0.07);
}
.eidu-tier:hover {
border-color: var(--brand-line-strong);
box-shadow: 0 16px 34px rgba(var(--brand-primary-rgb), 0.15);
transform: translateY(-3px);
}
/* الشريحة الأفضل: الأخضر دلالةُ وفر، والحدّ وحده لا يكفي للفت النظر */
.eidu-tier--best {
border-color: rgba(var(--brand-success-rgb), 0.42);
background: linear-gradient(180deg, rgba(var(--brand-success-rgb), 0.10), var(--brand-surface) 62%);
}
.eidu-tier--locked { opacity: .66; }
.eidu-tier__name { font-weight: 700; }
.eidu-tier__price { color: var(--brand-primary); font-weight: 700; }
/* ------------------------------------------------------------
9. الشارات
------------------------------------------------------------ */
.eidu-badge { padding: 4px 11px; font-size: .7rem; font-weight: 700; letter-spacing: 0; }
.eidu-badge--best { background: var(--brand-success); color: #fff; box-shadow: 0 4px 10px rgba(var(--brand-success-rgb), 0.28); }
.eidu-badge--group { background: rgba(var(--brand-primary-rgb), 0.12); color: var(--brand-primary); }
.eidu-badge--locked { background: rgba(var(--brand-dim-rgb), 0.14); color: var(--brand-ink-dim); }
/* ------------------------------------------------------------
10. تفصيل السعر · بطاقات الحقائق · الملاحظات
------------------------------------------------------------ */
.eidu-breakdown { border-top: 1px dashed var(--brand-line-strong); }
.eidu-breakdown__label { color: var(--brand-ink-dim); font-size: .72rem; }
.eidu-breakdown__value { font-weight: 700; }
.eidu-fact {
background: var(--brand-surface);
border: 1px solid var(--brand-line);
border-radius: 12px;
padding: 14px 16px;
}
.eidu-fact__label { color: var(--brand-ink-dim); }
.eidu-fact__value { font-weight: 700; }
.eidu-saving-note {
background: var(--brand-accent-soft);
border: 1px solid rgba(var(--brand-accent-rgb), 0.30);
color: var(--brand-accent-ink);
}
.eidu-shortfall-note {
background: rgba(var(--brand-primary-rgb), 0.07);
border: 1px solid var(--brand-line);
color: var(--brand-ink-mid);
}
.eidu-demo-banner {
background: rgba(var(--brand-warning-rgb), 0.14);
border: 1px solid rgba(var(--brand-warning-rgb), 0.32);
border-inline-start: 4px solid var(--brand-warning);
color: var(--brand-warning-ink);
border-radius: var(--mud-radius);
}
.eidu-demo-banner a { color: var(--brand-warning-ink); text-decoration: underline; }
/* ------------------------------------------------------------
11. الواجهة التعريفية
------------------------------------------------------------ */
.eidu-hero__title { font-weight: 700; line-height: 1.3; color: var(--brand-ink); }
.eidu-hero__subtitle { color: var(--brand-ink-mid); }
/* ------------------------------------------------------------
12. الجداول
------------------------------------------------------------ */
.eidu-table th {
color: var(--brand-ink-dim);
font-weight: 700;
letter-spacing: .03em;
background: var(--brand-thead);
backdrop-filter: var(--brand-blur);
-webkit-backdrop-filter: var(--brand-blur);
border-block-end: 1px solid var(--brand-line-strong);
}
.eidu-table th,
.eidu-table td { border-block-end: 1px solid var(--brand-line); }
.eidu-table tbody tr:hover { background: rgba(var(--brand-primary-rgb), 0.05); }
.eidu-amount--in { color: var(--brand-success); }
.eidu-amount--out { color: var(--brand-danger-out); }
.eidu-section-head { border-block-end: 1px solid var(--brand-line); padding-block-end: 10px; }
/* ------------------------------------------------------------
13. الفراغ والتحميل
------------------------------------------------------------ */
.eidu-empty { color: var(--brand-ink-dim); }
.eidu-skeleton {
border-radius: var(--mud-radius-lg);
background: linear-gradient(90deg,
rgba(var(--brand-primary-rgb), 0.07) 25%,
rgba(255, 255, 255, 0.55) 50%,
rgba(var(--brand-primary-rgb), 0.07) 75%);
background-size: 200% 100%;
}
/* ------------------------------------------------------------
14. الإشعارات
------------------------------------------------------------ */
.eidu-toast {
border-radius: 14px;
background: var(--brand-toast);
backdrop-filter: var(--brand-blur);
-webkit-backdrop-filter: var(--brand-blur);
box-shadow: 0 20px 44px rgba(var(--brand-ink-rgb), 0.28);
}
.eidu-toast--success { background: var(--brand-toast-success); }
.eidu-toast--info { background: var(--brand-toast-info); }
.eidu-toast--warning { background: var(--brand-toast-warning); }
.eidu-toast--error { background: var(--brand-toast-error); }
/* ------------------------------------------------------------
15. شاشات ضيّقة
------------------------------------------------------------ */
@media (max-width: 600px) {
.mud-container { padding-inline: 14px; }
h1, .mud-h1 { font-size: 1.9rem; }
h2, .mud-h2 { font-size: 1.55rem; }
}
@media (prefers-reduced-motion: reduce) {
.eidu-tier:hover,
.eidu-deal:hover,
.mud-button--filled:hover { transform: none; }
.eidu-sidebar { transition: none !important; }
}
/* ============================================================
١٦. الهيكل الجانبي
============================================================ */
/* الطبقتان تحت هذه تعملان بـ content-box، فلا يُقلب المقاس عالمياً.
لكن كل مقاس في الأقسام الثلاثة الأخيرة مكتوب على أنه المقاس
النهائي — 264px شريطاً و68px ترويسةً — فتُحسب حدودها وحشواتها منه. */
.eidu-shell, .eidu-shell::before, .eidu-shell::after,
.eidu-sidebar, .eidu-sidebar__cta, .eidu-content, .eidu-topbar,
.eidu-navlink, .eidu-navlink__count, .eidu-drawer__btn, .eidu-avatar,
.eidu-landing, .eidu-landing__bar, .eidu-landing__body, .eidu-landing__footer,
.eidu-landing__grid, .eidu-landing__band, .eidu-panel,
.eidu-hub, .eidu-hub__core, .eidu-hub__node,
.eidu-deal, .eidu-deal__media, .eidu-deal__body,
.eidu-home__hero, .eidu-home__ladder, .eidu-cat, .eidu-cat__glyph,
.eidu-about__story, .eidu-about__value, .eidu-about__value-glyph,
.eidu-about__band, .eidu-about__cta,
.eidu-contact__item, .eidu-contact__glyph,
.eidu-social__item, .eidu-social__glyph,
.eidu-band__slide, .eidu-band__veil, .eidu-band__cta, .eidu-band__arrow,
.eidu-slide-editor, .eidu-slide-editor__preview {
box-sizing: border-box;
}
.eidu-shell { display: flex; align-items: stretch; min-height: 100vh; }
.eidu-sidebar {
flex: 0 0 264px;
width: 264px;
position: sticky;
inset-block-start: 0;
height: 100vh;
overflow-y: auto;
z-index: 200;
display: flex;
flex-direction: column;
gap: 26px;
padding: 24px 18px;
background: var(--brand-surface);
backdrop-filter: var(--brand-blur);
-webkit-backdrop-filter: var(--brand-blur);
border-inline-end: 1px solid var(--brand-line);
}
.eidu-sidebar__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.eidu-sidebar__brand:hover { color: inherit; }
.eidu-sidebar__brand-name { display: block; font-size: 1rem; font-weight: 700; color: var(--brand-ink); }
.eidu-sidebar__brand-note { display: block; font-size: .66rem; color: var(--brand-ink-dim); line-height: 1.4; }
.eidu-sidebar__group { display: flex; flex-direction: column; gap: 8px; }
.eidu-sidebar__label {
padding-inline: 12px;
font-size: .68rem;
font-weight: 700;
letter-spacing: .07em;
color: var(--brand-ink-dim);
}
/* رابط التنقّل: النصّ في جهة والعدّاد في الأخرى، كما في الهوية */
.eidu-navlink {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
font-size: .875rem;
font-weight: 600;
color: var(--brand-ink-mid);
text-decoration: none;
transition: background-color .16s, color .16s;
}
.eidu-navlink:hover { background: rgba(var(--brand-primary-rgb), 0.07); color: var(--brand-ink); }
.eidu-navlink.active {
background: rgba(var(--brand-primary-rgb), 0.13);
color: var(--brand-primary);
font-weight: 700;
}
/* الصفحة الحالية مُعلَّمة باللون وبعلامة جانبية — اللون وحده لا يكفي */
.eidu-navlink.active::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: 50%;
transform: translateY(-50%);
inline-size: 3px;
block-size: 20px;
border-radius: 3px;
background: var(--brand-gradient);
}
.eidu-navlink__count {
flex: 0 0 auto;
min-inline-size: 20px;
padding: 1px 7px;
border-radius: 999px;
background: var(--brand-gradient-warm);
color: #fff;
font-size: .68rem;
font-weight: 700;
text-align: center;
}
.eidu-sidebar__cta {
margin-block-start: auto;
padding: 16px;
border-radius: 14px;
border: 1px solid var(--brand-line);
background: linear-gradient(160deg, rgba(var(--brand-primary-rgb), 0.12), rgba(var(--brand-decor-rgb), 0.10));
display: flex;
flex-direction: column;
gap: 8px;
}
.eidu-sidebar__cta p { margin: 0; font-size: .78rem; line-height: 1.6; color: var(--brand-ink-mid); }
.eidu-sidebar__cta strong { font-size: .9rem; color: var(--brand-ink); }
/* ---- العمود الرئيسي ---- */
.eidu-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.eidu-topbar {
position: sticky;
inset-block-start: 0;
z-index: 100;
display: flex;
align-items: center;
gap: 14px;
min-height: var(--eidu-header-h);
padding: 12px 28px;
background: var(--brand-surface);
backdrop-filter: var(--brand-blur);
-webkit-backdrop-filter: var(--brand-blur);
border-block-end: 1px solid var(--brand-line);
}
.eidu-topbar__spacer { flex: 1 1 auto; }
.eidu-topbar__user { font-size: .82rem; color: var(--brand-ink-mid); font-weight: 600; }
.eidu-avatar {
inline-size: 36px;
block-size: 36px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--brand-gradient-warm);
color: #fff;
display: grid;
place-items: center;
font-weight: 700;
font-size: .85rem;
}
/* ---- مبدّل عملة العرض ----
نموذج HTML عاديّ (لا مكوّن تفاعلي) لأن أكثر الصفحات ساكنة —
فالتنسيق وحده ما يجعله يبدو جزءاً من الشريط لا نموذجاً مقحماً. */
.eidu-fx { display: flex; align-items: center; gap: 8px; margin: 0; }
/* الحقل ورمزُه في غلافٍ واحد: الرمز داخل الإطار لا بجانبه، فيُقرآن
ضابطاً واحداً لا ضابطاً وزينةً */
.eidu-fx__control {
position: relative;
display: flex;
align-items: center;
gap: 0;
}
.eidu-fx__symbol {
position: absolute;
inset-inline-start: 10px;
font-size: .78rem;
font-weight: 700;
color: var(--brand-ink-dim);
pointer-events: none;
line-height: 1;
}
.eidu-fx__select {
inline-size: auto;
min-inline-size: 0;
padding-block: 7px;
padding-inline-start: 30px;
font-size: .82rem;
/* حوافّ دائرية وحدٌّ هادئ وانتقالٌ على الثلاثة — الحقل يستجيب
للمسّ بدل أن يقفز */
border-radius: 999px;
border: 1px solid var(--brand-line);
background-color: var(--brand-surface);
transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
/* سهمٌ من عندنا لا سهم النظام: شكلُه يختلف بين متصفّح وآخر، ولونه
لا يتبع الثيم. وهو محرفٌ في عنصرٍ مجاور لا تدرّجٌ في الخلفية —
نسبةُ background-position لا تنقلب مع اتجاه الصفحة، فكان السهم
يُرسم في الجهة المقابلة لحشوته ويلتقي برمز العملة. */
appearance: none;
padding-inline-end: 26px;
cursor: pointer;
}
.eidu-fx__arrow {
position: absolute;
inset-inline-end: 11px;
font-size: .58rem;
color: var(--brand-ink-dim);
pointer-events: none;
line-height: 1;
transition: color .16s ease;
}
.eidu-fx__control:hover .eidu-fx__arrow { color: var(--brand-ink-mid); }
.eidu-fx__select:hover {
border-color: var(--brand-line-strong);
background-color: var(--brand-surface-strong);
}
.eidu-fx__select:focus,
.eidu-fx__select:focus-visible {
outline: none;
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.14);
}
/* الخيارات: ما يمكن تلوينه منها — البقيّة للنظام، ولا تُبنى قائمةٌ
من الصفر لأجل ذلك */
.eidu-fx__select option {
background: var(--brand-surface-strong);
color: var(--brand-ink);
}
/* في الشريط: التسمية مخفيّة بصرياً لا محذوفة — الحقل يبقى مسمّى
لقارئ الشاشة، والشريط لا يتّسع لكلمتين. */
.eidu-fx--bar > .mud-caption {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.eidu-fx--bar .eidu-fx__select { max-inline-size: 190px; }
/* وفي صفحة الدخول: تسمية فوق حقلٍ كامل العرض */
.eidu-fx--stacked { flex-wrap: wrap; }
.eidu-fx--stacked > .mud-caption { flex: 1 0 100%; margin-block-end: 4px; }
.eidu-fx--stacked .eidu-fx__select { flex: 1 1 200px; }
/* ---- الدرج على الشاشات الضيّقة ---- */
.eidu-drawer__toggle {
position: absolute;
inline-size: 1px;
block-size: 1px;
opacity: 0;
pointer-events: none;
}
.eidu-drawer__btn {
display: none;
flex: 0 0 auto;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
inline-size: 38px;
block-size: 38px;
border-radius: 10px;
border: 1px solid var(--brand-line-strong);
background: var(--brand-surface);
cursor: pointer;
}
.eidu-drawer__btn span {
display: block;
inline-size: 16px;
block-size: 2px;
border-radius: 2px;
background: var(--brand-ink-mid);
}
.eidu-drawer__scrim { display: none; }
.eidu-drawer__toggle:focus-visible ~ .eidu-shell .eidu-drawer__btn {
outline: 2px solid var(--brand-primary);
outline-offset: 2px;
}
@media (max-width: 1023px) {
.eidu-drawer__btn { display: flex; }
.eidu-sidebar {
position: fixed;
inset-block: 0;
inset-inline-start: 0;
background: var(--brand-notch);
box-shadow: var(--mud-elevation-8);
transform: translateX(-100%);
transition: transform .24s ease;
}
[dir="rtl"] .eidu-sidebar { transform: translateX(100%); }
.eidu-drawer__toggle:checked ~ .eidu-shell .eidu-sidebar,
[dir="rtl"] .eidu-drawer__toggle:checked ~ .eidu-shell .eidu-sidebar { transform: none; }
.eidu-drawer__toggle:checked ~ .eidu-drawer__scrim {
display: block;
position: fixed;
inset: 0;
z-index: 150;
background: rgba(var(--brand-ink-rgb), 0.34);
backdrop-filter: blur(2px);
}
.eidu-topbar { padding-inline: 16px; }
/* الشريط ضيّق: يكفي الرمز — والاسم يبقى في القائمة المنسدلة */
.eidu-fx--bar .eidu-fx__select { max-inline-size: 96px; }
}
/* ============================================================
١٧. صفحة الهبوط
============================================================ */
.eidu-landing { display: flex; flex-direction: column; min-height: 100vh; }
.eidu-landing__bar {
display: flex;
align-items: center;
gap: 22px;
padding: 18px 44px;
flex-wrap: wrap;
}
.eidu-landing__nav {
display: flex;
gap: 26px;
font-size: .84rem;
font-weight: 600;
color: var(--brand-ink-mid);
}
.eidu-landing__nav a { color: var(--brand-ink-mid); }
.eidu-landing__nav a:hover { color: var(--brand-primary); }
.eidu-landing__body { flex: 1 1 auto; padding-inline: 44px; }
.eidu-landing__footer {
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 22px 44px;
font-size: .7rem;
letter-spacing: .05em;
color: var(--brand-ink-dim);
}
/* ثلاثة أعمدة: الوعد، ثم الرسم، ثم البطاقات — كما في الهوية */
.eidu-landing__grid {
display: grid;
grid-template-columns: 1fr 1.15fr 0.85fr;
gap: 26px;
align-items: start;
padding-block: 16px 8px;
}
.eidu-landing__col { display: flex; flex-direction: column; gap: 20px; }
.eidu-panel {
background: var(--brand-surface-soft);
border: 1px solid var(--brand-line);
border-radius: var(--mud-radius-lg);
padding: 18px 20px;
backdrop-filter: var(--brand-blur);
-webkit-backdrop-filter: var(--brand-blur);
display: flex;
flex-direction: column;
gap: 10px;
}
.eidu-panel__title { font-size: .8rem; font-weight: 700; color: var(--brand-ink-mid); margin: 0; }
.eidu-panel__note { font-size: .72rem; color: var(--brand-ink-dim); margin: 0; }
/* ---- الرسم المداري ---- */
.eidu-hub { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; margin-inline: auto; }
.eidu-hub__core {
position: absolute;
inset-inline-start: 50%;
inset-block-start: 50%;
transform: translate(50%, -50%);
inline-size: 44%;
aspect-ratio: 1;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary), var(--brand-decor));
box-shadow: 0 20px 50px rgba(var(--brand-primary-rgb), 0.35);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
color: #fff;
text-align: center;
padding: 12px;
}
[dir="ltr"] .eidu-hub__core { transform: translate(-50%, -50%); }
.eidu-hub__core-label { font-size: .62rem; letter-spacing: .08em; opacity: .85; }
.eidu-hub__core-mark { font-size: 2.1rem; font-weight: 700; line-height: 1; }
.eidu-hub__core-note { font-size: .66rem; opacity: .88; line-height: 1.4; }
.eidu-hub__node {
position: absolute;
inset-inline-start: var(--x);
inset-block-start: var(--y);
transform: translate(50%, -50%);
inline-size: 21%;
aspect-ratio: 1;
border-radius: 50%;
background: var(--brand-surface-strong);
border: 1px solid rgba(var(--brand-primary-rgb), 0.18);
box-shadow: 0 12px 28px rgba(var(--brand-primary-rgb), 0.16);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
text-align: center;
padding: 6px;
}
[dir="ltr"] .eidu-hub__node { transform: translate(-50%, -50%); }
.eidu-hub__node-name { font-size: .75rem; font-weight: 700; color: var(--brand-ink); }
.eidu-hub__node-role { font-size: .6rem; color: var(--brand-ink-dim); }
/* ---- سُلَّم الشرائح: أعمدة تنزل كلما كبرت الكمية ---- */
.eidu-ladder { display: flex; gap: 5px; align-items: flex-end; height: 56px; }
.eidu-ladder__bar {
flex: 1;
height: var(--h);
border-radius: 4px 4px 0 0;
background: linear-gradient(180deg, var(--brand-primary), var(--brand-decor));
}
.eidu-ladder--muted .eidu-ladder__bar { background: rgba(var(--brand-primary-rgb), 0.28); }
.eidu-landing__band {
margin-block: 26px 0;
padding: 22px 26px;
border-radius: 20px;
background: var(--brand-surface-soft);
border: 1px solid var(--brand-line);
backdrop-filter: var(--brand-blur);
-webkit-backdrop-filter: var(--brand-blur);
}
.eidu-landing__rule {
height: 5px;
border-radius: 3px;
margin-block-start: 16px;
background: linear-gradient(90deg, var(--brand-accent), var(--brand-secondary), var(--brand-primary));
}
.eidu-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 18px;
margin: 0;
padding: 0;
list-style: none;
counter-reset: eidu-step;
}
.eidu-steps li { counter-increment: eidu-step; font-size: .84rem; line-height: 1.7; color: var(--brand-ink-mid); }
.eidu-steps li::before {
content: counter(eidu-step);
display: grid;
place-items: center;
inline-size: 26px;
block-size: 26px;
margin-block-end: 8px;
border-radius: 9px;
background: var(--brand-gradient);
color: #fff;
font-size: .78rem;
font-weight: 700;
}
@media (max-width: 1080px) {
.eidu-landing__grid { grid-template-columns: 1fr; }
.eidu-hub { max-width: 380px; }
}
@media (max-width: 600px) {
.eidu-landing__bar,
.eidu-landing__footer { padding-inline: 16px; }
.eidu-landing__body { padding-inline: 16px; }
.eidu-landing__nav { display: none; }
/* الشريط يلتفّ هنا. الفاصل المرن يبتلع سطراً وحده لأنه ينمو ليملأ
ما بقي من سطره، والالتفاف الحر يوزّع العناصر على ثلاثة أسطر —
فيُطاح بالفاصل وتُثبَّت العلامة في سطرها والأزرار في سطرها. */
.eidu-landing__bar { gap: 12px; padding-block: 14px; }
.eidu-landing__bar .eidu-topbar__spacer { display: none; }
.eidu-landing__bar .eidu-sidebar__brand { flex: 1 0 100%; }
}
/* ============================================================
١٨. كرت الصفقة
============================================================ */
.eidu-deal-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 22px;
}
.eidu-deal {
display: flex;
flex-direction: column;
background: var(--brand-surface);
border: 1px solid var(--brand-line);
border-radius: var(--mud-radius-lg);
overflow: hidden;
text-decoration: none;
color: inherit;
box-shadow: 0 8px 24px rgba(var(--brand-primary-rgb), 0.08);
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.eidu-deal:hover {
transform: translateY(-4px);
border-color: var(--brand-line-strong);
box-shadow: 0 18px 36px rgba(var(--brand-primary-rgb), 0.16);
color: inherit;
}
/* شريط الصفقة: صورها إن كانت لها صور، وإلا فالمخطَّط.
الفراغ الرمادي مكان صورة يوحي بعطل، والمخطَّط يقول «لا صورة»
ويحمل رقم الصفقة وحالتها. */
.eidu-deal__media {
position: relative;
height: 108px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
padding: 12px;
background: repeating-linear-gradient(45deg,
rgba(var(--brand-primary-rgb), 0.07) 0, rgba(var(--brand-primary-rgb), 0.07) 2px,
transparent 2px, transparent 20px);
border-block-end: 1px solid var(--brand-line);
}
/* بصورة: أعلى ليُرى المنتج، وبلا مخطَّط يظهر من خلفها */
.eidu-deal__media--photo {
height: 190px;
padding: 12px;
background: rgba(var(--brand-primary-rgb), 0.06);
overflow: hidden;
}
/* الغلاف يملأ الشريط ويُقصّ — object-fit يمنع تشويه نسب المنتج */
.eidu-deal__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: fill;
transition: transform .35s;
}
/* تدرّج فوق الصورة: بدونه تختفي الشارة البيضاء على صورة فاتحة */
.eidu-deal__media--photo::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg,
rgba(var(--brand-shade-rgb), 0.42) 0%,
rgba(var(--brand-shade-rgb), 0.00) 42%,
rgba(var(--brand-shade-rgb), 0.55) 100%);
}
/* الشارة والرقم والمصغّرات فوق التدرّج، والصورة تحته */
.eidu-deal__media--photo > .eidu-badge,
.eidu-deal__media--photo > .eidu-deal__number,
.eidu-deal__thumbs {
position: relative;
z-index: 1;
}
.eidu-deal:hover .eidu-deal__photo { transform: scale(1.05); }
.eidu-deal__number {
align-self: flex-end;
font-family: "Inter", monospace;
font-size: .78rem;
font-weight: 700;
letter-spacing: .06em;
color: var(--brand-ink-dim);
}
.eidu-deal__media--photo .eidu-deal__number {
color: #FFFFFF;
text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
/* بقيّة الصور شريطُ مصغّرات في زاوية الغلاف — لا شبكة تُنافسه */
.eidu-deal__thumbs {
position: absolute;
inset-block-end: 12px;
inset-inline-start: 12px;
display: flex;
gap: 6px;
}
.eidu-deal__thumb {
width: 38px;
height: 38px;
object-fit: cover;
border-radius: 9px;
border: 2px solid rgba(255, 255, 255, .85);
box-shadow: 0 2px 8px rgba(var(--brand-shade-rgb), .28);
background: rgba(255, 255, 255, .9);
}
/* «+٢» بدل صفّ لا ينتهي — العدد يقول ما لا تسعه الزاوية */
.eidu-deal__thumb--more {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .72rem;
font-weight: 700;
color: #FFFFFF;
background: rgba(var(--brand-shade-rgb), .62);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* ---- معرض صفحة الصفقة: نفس الشريط، بمقاسٍ يليق بصفحة كاملة ----
التبديل بأزرار راديو لا بمعالج نقر: الصفحة عامة وتُصيَّر ساكناً بلا
دائرة SignalR، ومعالج Blazor لا يعمل فيها. وهذا أفضل لا أسوأ — التبديل
فوري في المتصفح بلا ذهاب للخادم أصلاً. (نفس حجّة درج التخطيط.)
الحدّ ستّ صور (Deal.MaxImages)، فالقواعد ستّ ومكتوبة صراحةً. */
.eidu-gallery__radio {
position: absolute;
inline-size: 1px;
block-size: 1px;
opacity: 0;
pointer-events: none;
}
.eidu-gallery__stage {
height: clamp(220px, 34vw, 380px);
border-radius: var(--mud-radius-lg);
border-block-end: none;
}
.eidu-gallery__slide { display: none; }
.eidu-gallery__radio:nth-of-type(1):checked ~ .eidu-gallery__stage .eidu-gallery__slide:nth-of-type(1),
.eidu-gallery__radio:nth-of-type(2):checked ~ .eidu-gallery__stage .eidu-gallery__slide:nth-of-type(2),
.eidu-gallery__radio:nth-of-type(3):checked ~ .eidu-gallery__stage .eidu-gallery__slide:nth-of-type(3),
.eidu-gallery__radio:nth-of-type(4):checked ~ .eidu-gallery__stage .eidu-gallery__slide:nth-of-type(4),
.eidu-gallery__radio:nth-of-type(5):checked ~ .eidu-gallery__stage .eidu-gallery__slide:nth-of-type(5),
.eidu-gallery__radio:nth-of-type(6):checked ~ .eidu-gallery__stage .eidu-gallery__slide:nth-of-type(6) {
display: block;
}
.eidu-gallery__radio:nth-of-type(1):checked ~ .eidu-gallery__strip .eidu-gallery__pick:nth-of-type(1),
.eidu-gallery__radio:nth-of-type(2):checked ~ .eidu-gallery__strip .eidu-gallery__pick:nth-of-type(2),
.eidu-gallery__radio:nth-of-type(3):checked ~ .eidu-gallery__strip .eidu-gallery__pick:nth-of-type(3),
.eidu-gallery__radio:nth-of-type(4):checked ~ .eidu-gallery__strip .eidu-gallery__pick:nth-of-type(4),
.eidu-gallery__radio:nth-of-type(5):checked ~ .eidu-gallery__strip .eidu-gallery__pick:nth-of-type(5),
.eidu-gallery__radio:nth-of-type(6):checked ~ .eidu-gallery__strip .eidu-gallery__pick:nth-of-type(6) {
border-color: var(--brand-primary);
}
/* التركيز يجب أن يُرى: الراديو مخفي بصرياً، فتحمل الصورة المصغّرة أثره */
.eidu-gallery__radio:nth-of-type(1):focus-visible ~ .eidu-gallery__strip .eidu-gallery__pick:nth-of-type(1),
.eidu-gallery__radio:nth-of-type(2):focus-visible ~ .eidu-gallery__strip .eidu-gallery__pick:nth-of-type(2),
.eidu-gallery__radio:nth-of-type(3):focus-visible ~ .eidu-gallery__strip .eidu-gallery__pick:nth-of-type(3),
.eidu-gallery__radio:nth-of-type(4):focus-visible ~ .eidu-gallery__strip .eidu-gallery__pick:nth-of-type(4),
.eidu-gallery__radio:nth-of-type(5):focus-visible ~ .eidu-gallery__strip .eidu-gallery__pick:nth-of-type(5),
.eidu-gallery__radio:nth-of-type(6):focus-visible ~ .eidu-gallery__strip .eidu-gallery__pick:nth-of-type(6) {
outline: 2px solid var(--brand-primary);
outline-offset: 2px;
}
.eidu-gallery__strip {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.eidu-gallery__pick {
display: block;
padding: 0;
border: 2px solid transparent;
border-radius: 10px;
background: none;
cursor: pointer;
line-height: 0;
overflow: hidden;
transition: border-color .2s, transform .2s;
}
.eidu-gallery__pick img {
width: 68px;
height: 54px;
object-fit: cover;
display: block;
}
.eidu-gallery__pick:hover { transform: translateY(-2px); }
.eidu-gallery__pick.is-active { border-color: var(--brand-primary); }
/* ---- شبكة صور الإدارة: عرضها وحذفها في مكان واحد ---- */
.eidu-image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
margin-block: 12px;
}
.eidu-image-card {
position: relative;
border: 1px solid var(--brand-line);
border-radius: var(--mud-radius-lg);
overflow: hidden;
background: var(--brand-surface-soft);
}
.eidu-image-card img {
width: 100%;
height: 118px;
object-fit: cover;
display: block;
}
.eidu-image-card__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 8px;
font-size: .75rem;
color: var(--brand-ink-mid);
}
.eidu-deal__body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.eidu-deal__factory {
font-size: .78rem;
font-weight: 600;
color: var(--brand-ink-mid);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.eidu-deal__title { font-size: 1rem; font-weight: 700; line-height: 1.45; margin: 0; }
.eidu-deal__facts { display: flex; flex-wrap: wrap; gap: 18px; }
.eidu-deal__fact { display: flex; flex-direction: column; gap: 2px; }
.eidu-deal__fact dt { font-size: .68rem; color: var(--brand-ink-dim); }
.eidu-deal__fact dd { margin: 0; font-size: .85rem; font-weight: 700; }
.eidu-deal__fact dd.is-price { color: var(--brand-primary); font-size: .95rem; }
.eidu-progress__head {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: .7rem;
color: var(--brand-ink-dim);
margin-block-end: 6px;
}
.eidu-progress {
height: 6px;
border-radius: 3px;
background: rgba(var(--brand-primary-rgb), 0.14);
overflow: hidden;
}
.eidu-progress__bar {
height: 100%;
width: var(--pct, 0%);
border-radius: 3px;
background: linear-gradient(90deg, var(--brand-primary), var(--brand-decor));
}
.eidu-deal__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-block-start: 10px;
border-block-start: 1px solid var(--brand-line);
font-size: .72rem;
color: var(--brand-ink-dim);
}
.eidu-deal__more { font-size: .78rem; font-weight: 700; color: var(--brand-primary); }
/* ------------------------------------------------------------
19. مبدّل الثيم — عيّنات لون في قائمة منسدلة
كلّ عيّنة تحمل سمة data-eidu-theme الخاصة بها، فترث كتلةَ رموزِ
ثيمها وحده. والنقطة مصبوغة بـ var(--brand-primary) — أي بلون ذلك
الثيم كما هو في ورقة الأنماط، لا بلونٍ يُكرَّر في الشيفرة.
------------------------------------------------------------ */
.eidu-themes {
position: relative;
line-height: 1;
}
.eidu-themes__trigger {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 10px;
border: 1px solid var(--brand-line);
border-radius: 999px;
background: var(--brand-surface);
cursor: pointer;
font-size: .78rem;
color: var(--brand-ink-mid);
user-select: none;
transition: border-color .16s ease, background-color .16s ease;
}
/* المثلّث الافتراضي يخرج في الجهة الخطأ في صفحةٍ من اليمين */
.eidu-themes__trigger::-webkit-details-marker { display: none; }
.eidu-themes__trigger { list-style: none; }
.eidu-themes__trigger::marker { content: ""; }
.eidu-themes__trigger:hover { border-color: var(--brand-line-strong); }
.eidu-themes__trigger:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: 2px;
}
.eidu-themes__name { white-space: nowrap; }
.eidu-themes__caret {
font-size: .58rem;
color: var(--brand-ink-dim);
transition: transform .18s ease;
}
.eidu-themes[open] .eidu-themes__caret { transform: rotate(180deg); }
/* اللوحة معلّقة فوق ما تحتها لا دافعةً له: الشريط لا يقفز عند الفتح */
.eidu-themes__panel {
position: absolute;
inset-block-start: calc(100% + 6px);
inset-inline-start: 0;
z-index: 40;
min-inline-size: 210px;
/* الانسياب بالتلاشي والانزلاق لا بارتفاعٍ يُحرَّك.
جُرِّبت «grid-template-rows: 0fr ← 1fr» فلم تنطبق هنا: اللوحة
مطلقةُ الموضع بلا ارتفاعٍ محدَّد، ووحدةُ fr في حاويةٍ ارتفاعُها
غير محدَّد ترتدّ إلى محتواها — فبقيت ثلاثةَ عشرَ بكسلاً مفتوحةً
ومغلقة. والتلاشي لا يحتاج ارتفاعاً معلوماً أصلاً. */
opacity: 0;
transform: translateY(-6px);
visibility: hidden;
pointer-events: none;
transition:
opacity .16s ease,
transform .18s ease,
visibility 0s linear .18s;
}
.eidu-themes[open] .eidu-themes__panel {
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
transition:
opacity .16s ease,
transform .18s ease,
visibility 0s;
}
.eidu-themes__list {
min-block-size: 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px;
border: 1px solid var(--brand-line);
border-radius: 12px;
background: var(--brand-surface-strong);
backdrop-filter: var(--brand-blur);
-webkit-backdrop-filter: var(--brand-blur);
box-shadow: var(--mud-elevation-4);
}
.eidu-themes__item {
display: flex;
align-items: center;
gap: 9px;
inline-size: 100%;
padding: 7px 9px;
border: 0;
border-radius: 8px;
background: transparent;
cursor: pointer;
font: inherit;
font-size: .8rem;
color: var(--brand-ink);
text-align: start;
transition: background-color .14s ease;
}
.eidu-themes__item:hover { background: var(--brand-tint); }
.eidu-themes__item:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: -2px;
}
.eidu-themes__item-name { flex: 1; white-space: nowrap; }
.eidu-themes__item--on { font-weight: 700; }
.eidu-themes__check { color: var(--brand-primary); font-size: .8rem; }
/* النقطة — في الزرّ المشغِّل وفي كل صفٍّ من اللوحة */
.eidu-swatch__dot {
inline-size: 15px;
block-size: 15px;
border-radius: 50%;
background: var(--brand-primary);
flex: 0 0 auto;
/* حدٌّ رفيع بلون الحبر: الثيمات الفاتحة لا تذوب في الخلفية */
box-shadow: inset 0 0 0 1px rgba(var(--brand-ink-rgb), 0.20);
}
@media (max-width: 720px) {
.eidu-themes__name { display: none; }
}
/* ------------------------------------------------------------
20. ضوابط تعتمد على السكربت — وبدائلها
الحالُ يُقرأ من علامةٍ على <html>، لا من noscript.
وللمسألة تاريخ. أوّلاً كان البديل ظاهراً في الأنماط ويُخفيه صنفٌ
يضعه السكربت — وبينهما لحظة: على شبكةٍ باردة تصل الورقة قبل
السكربت، فيُرسم زرّ «تطبيق» ثم يختفي أمام العين.
فعُكست الحال إلى noscript في الترويسة، وكان ذلك فخّاً أخفى:
تنقّل Blazor المحسَّن يحلّل صفحة الوجهة في مستندٍ خاملٍ سكربتُه
مُعطَّل، وهناك يُحلَّل ما داخل <noscript> عناصرَ حقيقية لا
نصّاً — فيُرقَّع <style> حيٌّ إلى ترويسة الصفحة الحيّة ويسري.
فيظهر زرّ «تطبيق» عند كل انتقال، ويختفي عند تحديث الصفحة (لأن
المحلّل العاديّ يقرأ <noscript> نصّاً)، ويعود عند الانتقال
التالي. ويختفي معه زرّ «صورة أخرى» في التسجيل — العطل نفسه من
طرفه الآخر.
والآن: العلامة يضعها eidu-forms.js في أوّل سطرٍ منه، وهو في
الترويسة بلا defer — أي قبل أن يوجد زرٌّ واحد، فلا وميض. و<html>
لا يُستبدَل في التنقّل المحسَّن، فالعلامة تنجو. ومن أطفأ السكربت
لا تُوضع علامتُه أبداً، وهو ما يقوله «:not(.eidu-js)» حرفياً.
------------------------------------------------------------ */
/* لا قيمة display تُفرض في حال الظهور: العنصر يبقى على ما تعطيه
له أصنافه (.mud-button وغيرها)، ويُخفى وحده حين لا يُراد. وقاعدةٌ
تكتب display للإظهار تُثبّت العنصر على شكلٍ واحد وتكسره يوم يُستعمل
الصنف على عنصرٍ آخر. */
html:not(.eidu-js) .eidu-js-only { display: none !important; }
html.eidu-js .eidu-nojs-only { display: none !important; }
/* ------------------------------------------------------------
21. قائمة الحساب
كان الخروج زرّاً مكشوفاً في الشريط، وعلى الجوال يخرج عن حافّة
الشاشة فلا يُبلغ إليه. صار في قائمةٍ تُفتح من الصورة الرمزية —
والصورة وحدها على الضيّق، والاسم معها على الواسع.
------------------------------------------------------------ */
.eidu-account {
position: relative;
line-height: 1;
flex: 0 0 auto;
}
.eidu-account__trigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 4px;
border: 1px solid transparent;
border-radius: 999px;
cursor: pointer;
user-select: none;
font-size: .82rem;
color: var(--brand-ink-mid);
transition: border-color .16s ease, background-color .16s ease;
}
.eidu-account__trigger::-webkit-details-marker { display: none; }
.eidu-account__trigger { list-style: none; }
.eidu-account__trigger::marker { content: ""; }
.eidu-account__trigger:hover {
border-color: var(--brand-line);
background: var(--brand-surface);
}
.eidu-account__trigger:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: 2px;
}
.eidu-account__name { white-space: nowrap; }
.eidu-account__caret {
font-size: .58rem;
color: var(--brand-ink-dim);
transition: transform .18s ease;
}
.eidu-account[open] .eidu-account__caret { transform: rotate(180deg); }
/* معلّقة من حافّة النهاية: القائمة عند طرف الشريط، وفتحُها من البداية
يدفعها خارج الشاشة على الجوال — وهو العطل نفسه الذي جاءت لتُصلحه */
.eidu-account__panel {
position: absolute;
inset-block-start: calc(100% + 8px);
inset-inline-end: 0;
z-index: 50;
min-inline-size: 230px;
opacity: 0;
transform: translateY(-6px);
visibility: hidden;
pointer-events: none;
transition:
opacity .16s ease,
transform .18s ease,
visibility 0s linear .18s;
}
.eidu-account[open] .eidu-account__panel {
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
transition:
opacity .16s ease,
transform .18s ease,
visibility 0s;
}
.eidu-account__card {
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px;
border: 1px solid var(--brand-line);
border-radius: 12px;
background: var(--brand-surface-strong);
backdrop-filter: var(--brand-blur);
-webkit-backdrop-filter: var(--brand-blur);
box-shadow: var(--mud-elevation-4);
}
.eidu-account__head {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 9px 10px;
border-block-end: 1px solid var(--brand-line);
margin-block-end: 4px;
}
.eidu-account__full {
font-weight: 700;
font-size: .85rem;
color: var(--brand-ink);
overflow-wrap: anywhere;
}
.eidu-account__item {
display: block;
inline-size: 100%;
padding: 9px 10px;
border: 0;
border-radius: 8px;
background: transparent;
cursor: pointer;
font: inherit;
font-size: .82rem;
color: var(--brand-ink);
text-align: start;
text-decoration: none;
transition: background-color .14s ease;
}
.eidu-account__item:hover { background: var(--brand-tint); color: var(--brand-ink); }
.eidu-account__item:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: -2px;
}
.eidu-account__item--out { color: var(--brand-danger); }
.eidu-account__item--out:hover {
background: rgba(var(--brand-danger-rgb), 0.08);
color: var(--brand-danger);
}
/* على الضيّق: الصورة وحدها — والاسم في رأس القائمة حين تُفتح */
@media (max-width: 720px) {
.eidu-account__name { display: none; }
.eidu-account__trigger { padding: 4px; }
}
/* ------------------------------------------------------------
22. الرئيسية: لوحة الفئات
الفئة أوّل سؤالٍ يسأله التاجر، فهي أوّل ما يُرى. والبطاقة كبيرةٌ
بقدر ما يجعل النقر سهلاً على الجوال، والرمزُ فيها ليُعرف المجال
بالنظرة قبل قراءة السطر.
وكلّ لونٍ هنا رمزُ ثيم: البطاقة المختارة تمتلئ بـ
var(--brand-primary)، فتتبدّل مع الثيم بلا سطرٍ يُضاف.
------------------------------------------------------------ */
.eidu-eyebrow {
margin: 0 0 10px;
font-size: .74rem;
font-weight: 700;
letter-spacing: .08em;
color: var(--brand-primary);
}
.eidu-home__hero {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
gap: 40px;
align-items: center;
padding-block: 8px 34px;
}
.eidu-home__hero-text {
display: flex;
flex-direction: column;
gap: 16px;
}
.eidu-home__ladder {
padding: 22px;
border: 1px solid var(--brand-line);
border-radius: 18px;
background: var(--brand-surface);
}
/* ---- شبكة الفئات ---- */
.eidu-cats__wrap { margin-block: 8px 30px; }
.eidu-cats__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-block-end: 16px;
}
.eidu-cats__title {
margin: 0;
font-size: 1.15rem;
font-weight: 700;
color: var(--brand-ink);
display: flex;
align-items: center;
gap: 10px;
}
.eidu-cats__note {
margin: 6px 0 0;
font-size: .82rem;
color: var(--brand-ink-mid);
}
.eidu-cats {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 16px;
}
.eidu-cat {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
"glyph name"
"glyph meta"
"foot foot";
align-items: center;
gap: 2px 14px;
padding: 18px;
min-block-size: 116px;
border: 1px solid var(--brand-line);
border-radius: 16px;
background: var(--brand-surface);
color: inherit;
text-decoration: none;
position: relative;
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease,
border-color .18s ease, background-color .18s ease;
}
/* شريطٌ يمتدّ عند التمرير — إشارةُ أن البطاقة تُنقر، بلا نصٍّ يُضاف */
.eidu-cat::after {
content: "";
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
inline-size: 0;
block-size: 3px;
background: var(--brand-primary);
transition: inline-size .22s ease;
}
.eidu-cat:hover,
.eidu-cat:focus-visible {
transform: translateY(-3px);
border-color: var(--brand-line-strong);
box-shadow: 0 12px 26px rgba(var(--brand-shade-rgb), .10);
}
.eidu-cat:hover::after,
.eidu-cat:focus-visible::after { inline-size: 100%; }
.eidu-cat__glyph {
grid-area: glyph;
display: grid;
place-items: center;
inline-size: 48px;
block-size: 48px;
border-radius: 14px;
background: var(--brand-tint);
font-size: 1.5rem;
line-height: 1;
}
.eidu-cat__glyph--inline {
inline-size: 32px;
block-size: 32px;
border-radius: 10px;
font-size: 1.05rem;
}
.eidu-cat__name {
grid-area: name;
font-weight: 700;
font-size: .98rem;
color: var(--brand-ink);
align-self: end;
}
.eidu-cat__meta {
grid-area: meta;
font-size: .8rem;
color: var(--brand-ink-mid);
align-self: start;
}
.eidu-cat__sep { margin-inline: 6px; color: var(--brand-ink-dim); }
.eidu-cat__price { font-weight: 600; color: var(--brand-link); }
.eidu-cat__foot {
grid-area: foot;
margin-block-start: 12px;
padding-block-start: 10px;
border-block-start: 1px solid var(--brand-line);
font-size: .72rem;
color: var(--brand-ink-dim);
}
/* ---- المختارة: تمتلئ باللون فلا يُخطئها النظر بين عشر بطاقات ---- */
.eidu-cat--on {
background: var(--brand-primary);
border-color: var(--brand-primary);
color: #FFFFFF;
}
.eidu-cat--on .eidu-cat__name,
.eidu-cat--on .eidu-cat__meta,
.eidu-cat--on .eidu-cat__price,
.eidu-cat--on .eidu-cat__sep,
.eidu-cat--on .eidu-cat__foot { color: #FFFFFF; }
.eidu-cat--on .eidu-cat__meta,
.eidu-cat--on .eidu-cat__foot { opacity: .82; }
.eidu-cat--on .eidu-cat__glyph { background: rgba(255, 255, 255, .18); }
.eidu-cat--on .eidu-cat__foot { border-block-start-color: rgba(255, 255, 255, .24); }
.eidu-cat--on::after { background: rgba(255, 255, 255, .55); }
/* ---- الصفقات تحت اللوحة ---- */
.eidu-cats__deals {
margin-block-start: 34px;
padding-block-start: 26px;
border-block-start: 1px solid var(--brand-line);
scroll-margin-block-start: 84px;
}
.eidu-cats__more {
margin: 18px 0 0;
font-size: .82rem;
color: var(--brand-ink-mid);
text-align: center;
}
.eidu-skeleton--tile { block-size: 116px; border-radius: 16px; }
/* ظهورٌ متدرّج: البطاقات تصعد واحدةً بعد أخرى بدل أن تُقذف دفعةً.
والتأخير من --i المكتوب على العنصر، فلا قاعدةَ لكل موضع. */
@media (prefers-reduced-motion: no-preference) {
.eidu-cat {
animation: eidu-rise .38s ease both;
animation-delay: calc(var(--i, 0) * 55ms);
}
.eidu-cats__deals .eidu-deal { animation: eidu-rise .34s ease both; }
}
@keyframes eidu-rise {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
.eidu-home__hero { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
.eidu-cats { grid-template-columns: 1fr; }
.eidu-cat { min-block-size: 0; }
}
/* ------------------------------------------------------------
23. صفحة الشركة والتواصل
قوائمُ لا فقرات: من يفتح «تواصل معنا» يبحث عن سطرٍ واحد —
بريدٍ أو رقم — لا عن نصٍّ يقرؤه. فكلّ قناةٍ بطاقةٌ برمزها
وعنوانها وقيمتها، تُمسح بالعين في ثانية.
------------------------------------------------------------ */
.eidu-about__hero { padding-block: 10px 26px; }
.eidu-about__story {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 20px;
align-items: start;
}
.eidu-about__lead { display: flex; flex-direction: column; gap: 12px; }
.eidu-about__text {
margin: 0;
font-size: .9rem;
line-height: 1.85;
color: var(--brand-ink-mid);
max-inline-size: 62ch;
}
.eidu-about__values {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
.eidu-about__value { display: flex; flex-direction: column; gap: 6px; }
.eidu-about__value-glyph {
display: grid;
place-items: center;
inline-size: 38px;
block-size: 38px;
border-radius: 12px;
background: var(--brand-tint);
font-size: 1.15rem;
line-height: 1;
margin-block-end: 4px;
}
.eidu-about__band {
margin-block-start: 34px;
padding-block-start: 26px;
border-block-start: 1px solid var(--brand-line);
scroll-margin-block-start: 84px;
}
.eidu-contact {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
}
.eidu-contact__item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
border: 1px solid var(--brand-line);
border-radius: 14px;
background: var(--brand-surface);
}
.eidu-contact__glyph {
display: grid;
place-items: center;
inline-size: 38px;
block-size: 38px;
flex: 0 0 auto;
border-radius: 12px;
background: var(--brand-tint);
font-size: 1.05rem;
line-height: 1;
}
.eidu-contact__label {
display: block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
color: var(--brand-ink-dim);
}
.eidu-contact__value {
display: block;
margin-block-start: 3px;
font-size: .92rem;
font-weight: 600;
color: var(--brand-ink);
word-break: break-word;
}
.eidu-contact__note {
display: block;
margin-block-start: 4px;
font-size: .72rem;
color: var(--brand-ink-dim);
}
/* ---- الحسابات ---- */
.eidu-social {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
gap: 12px;
}
.eidu-social__item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border: 1px solid var(--brand-line);
border-radius: 14px;
background: var(--brand-surface);
color: inherit;
text-decoration: none;
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.eidu-social__item:hover,
.eidu-social__item:focus-visible {
transform: translateY(-2px);
border-color: var(--brand-line-strong);
box-shadow: 0 10px 20px rgba(var(--brand-shade-rgb), .08);
}
/* بلا عنوان: يُعرض ولا يُنقر — ولا يتحرّك تحت المؤشّر فيَعِد بنقرة */
.eidu-social__item--off { opacity: .62; }
.eidu-social__item--off:hover {
transform: none;
border-color: var(--brand-line);
box-shadow: none;
}
.eidu-social__glyph {
display: grid;
place-items: center;
inline-size: 34px;
block-size: 34px;
flex: 0 0 auto;
border-radius: 10px;
background: var(--brand-tint);
color: var(--brand-primary);
font-size: .95rem;
font-weight: 700;
line-height: 1;
}
.eidu-social__name { font-size: .88rem; font-weight: 700; color: var(--brand-ink); }
.eidu-social__handle {
margin-inline-start: auto;
font-size: .76rem;
color: var(--brand-ink-dim);
}
.eidu-about__cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
margin-block-start: 34px;
padding: 22px;
border: 1px solid var(--brand-line);
border-radius: 18px;
background: var(--brand-surface-soft);
}
.eidu-landing__footlinks {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.eidu-landing__footlinks a { color: inherit; text-decoration: none; }
.eidu-landing__footlinks a:hover { text-decoration: underline; }
@media (max-width: 900px) {
.eidu-about__story { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
24. شريط الرئيسية
تمريرٌ بنقاط توقّف، لا شريحةٌ تُبدَّل بسكربت. الشرائح كلّها
في مسارٍ واحد يُمرَّر أفقياً، و«scroll-snap» يوقفه عند حافّة كل
شريحة. فيُمرَّر بالإصبع وبعجلة الفأرة وبلوحة المفاتيح، وتعمل
النقاط روابطَ مراسٍ — بلا سطر سكربت.
والتقليب التلقائي وحده في eidu-forms.js، وهو زيادةٌ فوق ما يعمل
بدونها.
ونسبةُ الارتفاع مكتوبة (aspect-ratio) لا محسوبة من الصورة: بدونها
يقفز ما تحت الشريط حين تصل أوّل صورة، وهو أسوأ ما يقع في أعلى
الصفحة.
------------------------------------------------------------ */
.eidu-band {
position: relative;
margin-block: 4px 26px;
}
.eidu-band__track {
display: flex;
gap: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
border-radius: 20px;
background: var(--brand-surface-soft);
/* شريطُ التمرير يُخفى ولا يُعطَّل: التمرير نفسه باقٍ بكل وسائله،
والمخفيّ هنا رسمُ الشريط فوق الصورة. */
scrollbar-width: none;
}
.eidu-band__track::-webkit-scrollbar { display: none; }
.eidu-band__track:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: 3px;
}
.eidu-band__slide {
position: relative;
flex: 0 0 100%;
inline-size: 100%;
aspect-ratio: 21 / 9;
max-block-size: 460px;
scroll-snap-align: start;
scroll-snap-stop: always;
overflow: hidden;
isolation: isolate;
}
.eidu-band__image {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
display: block;
}
/* ستارٌ من حافّة البداية: النصّ يقع عليها في RTL، والصورة تبقى
مقروءةً في الطرف الآخر. والتدرّج يبدأ من لون الحبر لا من الأسود
المطلق، فيتبدّل مع الثيم. */
.eidu-band__veil {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 10px;
padding: 0 clamp(20px, 6%, 64px);
background: linear-gradient(
to left,
rgba(var(--brand-shade-rgb), .78) 0%,
rgba(var(--brand-shade-rgb), .55) 42%,
rgba(var(--brand-shade-rgb), .05) 78%,
rgba(var(--brand-shade-rgb), 0) 100%);
color: #FFFFFF;
}
.eidu-band__title {
margin: 0;
max-inline-size: 22ch;
font-size: clamp(1.15rem, 3.1vw, 2.1rem);
font-weight: 700;
line-height: 1.25;
text-wrap: balance;
color: #FFFFFF;
}
.eidu-band__sub {
margin: 0;
max-inline-size: 34ch;
font-size: clamp(.78rem, 1.5vw, .98rem);
line-height: 1.7;
color: rgba(255, 255, 255, .88);
}
/* نصٌّ بهيئة زرّ — الرابط هو المرساة الممدودة، لا هذا */
.eidu-band__cta {
display: inline-flex;
align-items: center;
margin-block-start: 4px;
padding: 9px 20px;
border-radius: 999px;
background: var(--brand-primary);
color: #FFFFFF;
font-size: .84rem;
font-weight: 700;
transition: transform .16s ease;
}
/* المرساة الممدودة: الشريحة كلّها هدفُ نقر، لا زرٌّ بعرض إصبعين */
.eidu-band__hit {
position: absolute;
inset: 0;
z-index: 1;
}
.eidu-band__hit:hover ~ .eidu-band__veil .eidu-band__cta,
.eidu-band__slide:hover .eidu-band__cta { transform: translateY(-2px); }
.eidu-band__hit:focus-visible {
outline: 3px solid var(--brand-primary);
outline-offset: -6px;
border-radius: 20px;
}
/* ---- السهمان ----
على حافّتي الشريط لا تحته: هدفُ نقرٍ كبير على الويب، ويُخفيان على
الضيّق حيث الإصبع أسرع منهما. */
.eidu-band__arrow {
position: absolute;
inset-block-start: 50%;
transform: translateY(-50%);
z-index: 2;
display: grid;
place-items: center;
inline-size: 44px;
block-size: 44px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .86);
color: var(--brand-ink);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
box-shadow: 0 6px 18px rgba(var(--brand-shade-rgb), .18);
opacity: 0;
transition: opacity .2s ease, background-color .2s ease;
}
.eidu-band__arrow--prev { inset-inline-start: 14px; }
.eidu-band__arrow--next { inset-inline-end: 14px; }
/* لا تظهر إلا عند الاقتراب — ولا تحجب الصورة بقيّة الوقت */
.eidu-band:hover .eidu-band__arrow,
.eidu-band:focus-within .eidu-band__arrow { opacity: 1; }
.eidu-band__arrow:hover { background: #FFFFFF; }
.eidu-band__arrow:focus-visible {
opacity: 1;
outline: 2px solid var(--brand-primary);
outline-offset: 3px;
}
/* ---- النقاط ---- */
.eidu-band__dots {
display: flex;
justify-content: center;
gap: 8px;
margin-block-start: 14px;
}
.eidu-band__dot {
inline-size: 26px;
block-size: 6px;
border-radius: 999px;
background: var(--brand-line-strong);
transition: background-color .2s ease, inline-size .2s ease;
/* هدفُ لمسٍ أكبر من النقطة المرسومة — النقطة ٦px والهدف ٢٤px */
position: relative;
}
.eidu-band__dot::before {
content: "";
position: absolute;
inset-block: -9px;
inset-inline: -3px;
}
.eidu-band__dot:hover { background: var(--brand-primary-deep); }
.eidu-band__dot--on {
inline-size: 40px;
background: var(--brand-primary);
}
.eidu-band__dot:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: 4px;
}
/* شريحةٌ واحدة: لا نقاط ولا تمرير — والمسار يبقى كما هو فلا قاعدة ثانية */
.eidu-band--single .eidu-band__track { scroll-snap-type: none; }
@media (max-width: 700px) {
.eidu-band__slide { aspect-ratio: 16 / 10; }
.eidu-band__veil { padding-inline: 18px; }
/* الإصبع أسرع من سهمٍ بعرض ٤٤px على شاشةٍ بعرض ٣٦٠ */
.eidu-band__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.eidu-band__track { scroll-behavior: auto; }
.eidu-band__cta { transition: none; }
.eidu-band__arrow { transition: none; opacity: 1; }
}
/* ------------------------------------------------------------
25. محرّر الشريط في الإدارة
المعاينة بنفس نسبة الرئيسية (21:9) وبنفس القصّ: من رفع صورةً
مربّعة يرى أين تُقصّ قبل أن ينشرها لا بعدها.
------------------------------------------------------------ */
.eidu-slide-editor {
display: grid;
grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
gap: 20px;
align-items: start;
}
.eidu-slide-editor__preview {
position: relative;
aspect-ratio: 21 / 9;
border-radius: 12px;
overflow: hidden;
background: var(--brand-notch);
}
.eidu-slide-editor__preview img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
display: block;
}
/* المعطَّلة تُرى باهتةً: قائمةٌ فيها ظاهرٌ ومعطَّل تُقرأ بالنظرة لا
بقراءة كل شارة */
.eidu-slide-editor__preview.is-off img { filter: grayscale(1); opacity: .5; }
.eidu-slide-editor__preview .eidu-badge {
position: absolute;
inset-block-start: 8px;
inset-inline-start: 8px;
}
.eidu-slide-editor__body {
display: flex;
flex-direction: column;
gap: 12px;
min-inline-size: 0;
}
@media (max-width: 760px) {
.eidu-slide-editor { grid-template-columns: 1fr; }
}