/* base-tokens-reset.css -- متغيرات الألوان/الخطوط، تصفير المتصفح، حركة مخفَّضة عامة. يُحمَّل أولاً. */ /* ============================================================================ MyBills V2 - ورقة الأنماط الرئيسية ============================================================================ نظام الألوان كامل مبني على متغيرات CSS (custom properties) بدل قيم ثابتة بكل قاعدة، عشان تبديل الثيم (فاتح/داكن) يصير بمجرد تغيير قيم المتغيرات مرة وحدة بـ :root / [data-theme="dark"]، وكل عنصر بالصفحة يتحدث تلقائياً بدون أي تعديل على باقي الملف. ============================================================================ */ /* قيم الثيم الفاتح (الافتراضي) */ :root { --primary: #2563eb; --primary-rgb: 37, 99, 235; --primary-dark: #1d4ed8; /* --primary-solid: تحديداً للتعبئة الصلبة اللي فوقها نص أبيض (أزرار، رؤوس جداول...) -- منفصل عن --primary لأن --primary نفسه يُستخدم أيضاً كنص/تمييز فوق --card-bg، والدورين يتعارضان بالوضع الداكن (فحص تباين WCAG فعلي: --primary الداكن يعطي 3.68:1 بس مع نص أبيض، أقل من 4.5:1). بالفاتح تساوي --primary لأنها أصلاً تعطي 5.17:1 (ما تحتاج تغيير) */ --primary-solid: var(--primary); --primary-solid-hover: var(--primary-dark); /* --secondary: كانت بنفسجي (لون بنفسجي/إندغو) -- أشهر لون "افتراضي" يدل إن حدا ما اختاره فعلياً (لون Tailwind الافتراضي)، فاستبدلته بأخضر مائي (teal) مميّز ومتناغم مع الأزرق الأساسي دون منافسته -- يُستخدم لبادج المجلدات وبطاقة مقارنة الشهر الثاني بالتحليلات */ --secondary: #0d9488; --bg-color: #e2e8f0; --card-bg: #ffffff; --text-main: #020617; --text-muted: #475569; --border-color: #64748b; --input-bg: #ffffff; --success: #059669; --success-rgb: 5, 150, 105; --warning: #d97706; --danger: #dc2626; /* --danger-text/--warning-text: نفس فكرة --primary-solid فوق -- لون الخطر/التحذير كنص/أيقونة فوق --card-bg الشفاف يحتاج ظل مختلف عن الحد (border) نفسه بكل ثيم عشان يجتاز WCAG 4.5:1 (فحص فعلي): --danger كنص يعطي 4.83:1 بالفاتح (كافي) بس 3.03:1 بالداكن (أقل من المطلوب)، و--warning كنص يعطي 3.19:1 بالفاتح (أقل من المطلوب) بس 4.59:1 بالداكن (كافي) -- عكس بعض تماماً، فكل واحد يحتاج تصحيح بثيم مختلف. الحد (border) نفسه يبقى --danger/--warning الأصليين بكل ثيم (يكفيهم حد 3:1 لعناصر الواجهة، وكلاهما يجتازونه بكل الثيمين) */ --danger-text: var(--danger); --warning-text: #b45309; /* ظل مزدوج الطبقة (قريب حاد + بعيد ناعم) بدل ظل واحد -- يعطي إحساس عمق أوضح وأكثر "احترافية" (نفس أسلوب أنظمة تصميم حديثة زي Linear/Stripe) بدل الظل المسطّح الواحد اللي كان موجود */ --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 28px -6px rgba(15, 23, 42, 0.14); /* --navbar-bg: شفافية جزئية + backdrop-filter (blur) بالهيدر بدل خلفية صلبة -- المصدر: apple-design skill (مبدأ "Materials & Depth"): الأشرطة العلوية الثابتة (sticky) بأنظمة أبل تكون طبقة "مادة" شبه شفافة يمرّ المحتوى تحتها أثناء التمرير، بدل شريط صلب يحجب كل شي خلفه بشكل قاطع */ --navbar-bg: rgba(255, 255, 255, 0.75); /* --transition تُسمّي الخصائص الفعلية اللي تتغيّر (خلفية/حدود/ظل/تحويل) بدل "all" -- "all" تُشغّل أي خاصية تتغيّر حتى لو غير مقصودة، وتمنع المتصفح من تحسين الأداء لأنه ما يعرف مسبقاً وش بيتحرّك فعلياً */ --transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* منحنيات حركة أقوى من منحنيات CSS الجاهزة (المصدر: emil-design-eng skill) -- ease-out للعناصر الداخلة/الخارجة، ease-in-out للحركة على الشاشة */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* منحنى أدراج/شيتات بأسلوب iOS (Ionic) */ color-scheme: light; } /* يُفعَّل بإضافة data-theme="dark" على (شوف toggleTheme() بـ main.js): يعيد تعريف نفس أسماء المتغيرات أعلاه بقيم داكنة فقط، بدون أي حاجة لتكرار كل قواعد CSS الأخرى بنسخة ثانية */ [data-theme="dark"] { --primary: #3b82f6; --primary-rgb: 59, 130, 246; --primary-dark: #2563eb; /* إصلاح (مصدر: better-colors skill، فحص تباين WCAG فعلي): نص أبيض على خلفية --primary الداكنة يعطي 3.68:1 بس -- أقل من 4.5:1 المطلوبة لنص عادي. الحل مو تغيير --primary نفسه (يُستخدم أيضاً كنص/تمييز فوق --card-bg، وتغميقه يزيد الوضوح هنا لكن يفسد ذاك الاستخدام أكثر -- نفس التوكن بدورين متعارضين). --primary-dark الموجود أصلاً (كان يُستخدم بس بحالة hover) يعطي 5.17:1 صحيحة، فنجعله هو الخلفية الافتراضية للتعبئة الصلبة بالوضع الداكن، و--primary الأفتح يصير تأثير الـ hover بدلاً منه (يفتح بدل يغمق -- أوضح بالوضع الداكن) */ --primary-solid: var(--primary-dark); --primary-solid-hover: var(--primary); /* نفس استبدال البنفسجي بالأخضر المائي بالوضع الفاتح فوق، بدرجة أفتح تناسب خلفية داكنة (فحص WCAG: 3.91:1 كحد/تمييز -- كافٍ لعنصر واجهة) */ --secondary: #14b8a6; --bg-color: #0f172a; --card-bg: #1e293b; --text-main: #f8fafc; --text-muted: #cbd5e1; /* إصلاح (مصدر: better-colors skill، فحص تباين WCAG فعلي): كانت #475569 تعطي 1.93:1 فقط مقابل --card-bg (#1e293b) -- أقل بكثير من الحد الأدنى 3:1 لعناصر الواجهة (حدود بطاقات/حقول/مودالات شبه غير مرئية بالوضع الداكن). نفس الصبغة (hue/saturation) بس أفتح، تعطي 3.34:1 -- تجاوز الحد بهامش أمان مو بالكاد */ --border-color: #667a97; --input-bg: #0f172a; --success: #10b981; --success-rgb: 16, 185, 129; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -6px rgba(0, 0, 0, 0.55); --navbar-bg: rgba(15, 23, 42, 0.75); color-scheme: dark; } /* ============================================================================ دعم إعداد "تقليل الحركة" (prefers-reduced-motion) -- المصدر: مهارة apple-design/emil-design-eng. تقليل الحركة لا يعني حذفها كلياً، يعني نسخة أهدأ: نبقي fade خفيف بالشفافية (يفيد فهم تغيّر الحالة) ونشيل الحركة المكانية (translateY/scale/translateX) اللي قد تسبب دوخة لمستخدمين حسّاسين للحركة (vestibular motion sensitivity). العناصر المستهدفة هنا هي بالتحديد اللي حركة دخولها/خروجها تعتمد على transform (شاشات، رسائل تنبيه، المودال، شريط الإجراءات الجماعي، Toast) -- عناصر الـ hover/press الصغيرة (زر، بطاقة) ما تُلمس لأنها حركة دقيقة جداً ما تصل لعتبة الإزعاج الحركي. */ @media (prefers-reduced-motion: reduce) { @keyframes reducedMotionFade { from { opacity: 0; } to { opacity: 1; } } .screen, .msg-box, .bulk-actions-bar, .offline-queue-bar { animation: reducedMotionFade 0.15s ease !important; } /* .modal يُحرَّك بـ style.opacity/transform مباشرة من JS (openModal/closeModal بـ main.js) لا بـ @keyframes -- override بـ !important هنا يكفي لتجاوز الـ inline transition غير الـ !important اللي يضبطه JS */ .modal { transition: opacity 0.15s ease !important; transform: none !important; } /* .toast-item يعتمد على transition + @starting-style (لا @keyframes) بعد إصلاح حركة الخروج أدناه -- نفس أسلوب .modal: نلغي الـ transform ونبقي fade شفافية فقط */ .toast-item, .toast-item.toast-hide { transition: opacity 0.15s ease !important; transform: none !important; } /* .settings-drawer يعتمد على transform بالكامل لإخفاء/إظهار نفسه (مو display/opacity) -- ما نقدر نلغي الـ transform هنا زي البقية (بيصير ظاهر دايماً حتى وهو "مقفول")، فبدل نشيل الحركة نخليها فورية بدل الانزلاق التدريجي (نفس المبدأ: يبقى يفتح/يقفل صح، بس بلا حركة مرئية) */ .settings-drawer { transition: transform 0.01ms linear !important; } /* نشرة الإعلان (marquee) حركة مستمرة بلا توقف -- بالضبط النوع اللي يزعج مستخدمين حسّاسين للحركة، فتحت هذا الإعداد نلغيها كلياً (مو نخفّفها بس) ونعرض النص ثابت وسط الشريط بدل ما يجلس مقطوع بالنص */ #broadcastText { animation: none !important; transform: none !important; display: block !important; white-space: normal !important; text-align: center !important; } /* إيموجي احتفال 100 فاتورة: نبضة scale مستمرة (celebrationPulse) بالضبط نوع الحركة اللي يزعج مستخدمين حسّاسين -- تُلغى هنا ونبقي فقط الظهور الأول (fade خفيف) بدل الحركة المكانية المستمرة */ .celebration-emoji { animation: reducedMotionFade 0.2s ease !important; } /* حلقتا تحميل هيكلي (skeleton) مستمرتان بلا توقف (shimmer/pulse) -- نفس منطق نشرة الإعلان فوق: تُلغى كلياً تحت هذا الإعداد، العنصر يبقى ظاهر بلونه الثابت بدون الحركة المتكررة */ .skeleton, .skeleton-chart { animation: none !important; } } /* نظام حجم الخط (صغير/متوسط/كبير) يتحكم فيه setFontSize() بـ main.js عبر إضافة كلاس font-sm/font-md/font-lg على */ html.font-sm { font-size: 12px !important; } html.font-md { font-size: 15px !important; } html.font-lg { font-size: 18px !important; } /* :not(.brand-name):not(.version-badge) -- استثناء صريح: اسم البراند وشارة الإصدار بالهيدر عنصرا هوية بصرية ثابتة، مو نص محتوى، فما لازم يتأثرا بتفضيل "حجم الخط" العام للمستخدم (كان span العام هنا يطغى بـ!important على أي font-size محدد بـ.brand-name مهما كانت قيمته). */ html.font-sm body, html.font-sm p, html.font-sm span:not(.brand-name):not(.version-badge), html.font-sm button, html.font-sm input, html.font-sm select, html.font-sm td, html.font-sm th { font-size: 12px !important; } html.font-md body, html.font-md p, html.font-md span:not(.brand-name):not(.version-badge), html.font-md button, html.font-md input, html.font-md select, html.font-md td, html.font-md th { font-size: 15px !important; } html.font-lg body, html.font-lg p, html.font-lg span:not(.brand-name):not(.version-badge), html.font-lg button, html.font-lg input, html.font-lg select, html.font-lg td, html.font-lg th { font-size: 16px !important; } html.font-sm .stat-info p { font-size: 24px !important; } html.font-md .stat-info p { font-size: 30px !important; } html.font-lg .stat-info p { font-size: 36px !important; } /* رمز الريال السعودي الجديد (طلب صاحب المشروع): خط مخصص فيه حرف واحد فقط، مربوط بنفس كود يونيكود رمز الريال القديم U+FDFC (﷼) -- المصدر: github.com/upsilun/SaudiRiyalFont (رخصة MIT). unicode-range يحصر استبدال هذا الخط بهذا الحرف بالذات فقط؛ باقي كل حروف الموقع (عربي/ إنجليزي) تبقى بخط IBM Plex Sans Arabic زي ما هي، بدون أي تأثير. بما إنه حرف نصي حقيقي لا صورة، يرث لون النص المحيط تلقائياً بأي مكان يُستخدم فيه. */ @font-face { font-family: 'SaudiRiyalSymbol'; src: url('../fonts/SaudiRiyalFont.ttf') format('truetype'); unicode-range: U+FDFC; font-display: swap; } /* ============================================================================ نظام "العمق الزجاجي" (Glass Depth) -- طلب صاحب المشروع: زجاجية معتدلة فخمة + إحساس عمق خفيف (Light 3D) بالأزرار والبطاقات + حركات وانتقالات سلسة، بنفس هوية الألوان الحالية (--primary/--secondary) بلا أي تغيير بالبنية أو الوظائف. القواعد هنا تُطبَّق على كلاسات/عناصر موجودة أصلاً (button، .card، .stat-card، .invoice-item، .folder-card، .tabs-nav...) عشان تنعكس تلقائياً على كل تبويب وكل قائمة بالموقع دفعة وحدة، بدل ما تتكرر يدوياً بكل صفحة لحالها. */ @keyframes glassBlobDriftA { from { transform: translate(0, 0); } to { transform: translate(-22px, 18px); } } @keyframes glassBlobDriftB { from { transform: translate(0, 0); } to { transform: translate(18px, -16px); } } @keyframes glassIconGlow { 0%, 100% { opacity: .45; transform: scale(.94); } 50% { opacity: .9; transform: scale(1.05); } } /* فقاعات لونية زخرفية بحتة خلف شاشتي الهبوط وتسجيل الدخول -- pseudo-elements بلا أي عنصر HTML جديد (زخرفة بحتة، pointer-events: none، ما تلمس أي زر أو وظيفة). شفافية معتدلة وحركة بطيئة جداً بس */ /* بلاغ حي (2026-08-30): overflow:hidden هنا كان يكسر position:sticky لـ.pinned-stage بداخل #landingScreen (السرد بالتمرير) -- أي سلف بعليه overflow غير visible يصير "حاوية تمرير" حسب مواصفة CSS، وsticky يتموضع بالنسبة لأقرب حاوية تمرير حقيقية بدل نافذة المتصفح، فتوقف التثبيت بالكامل رغم إن العدّ والحسابات بـlanding-scroll.js تشتغل صح. الحل: clip-path بدل overflow -- يقصّ نفس الفقاعات الزخرفية بلا ما ينشئ حاوية تمرير جديدة. #loginScreen ما فيها عنصر sticky فبقيت overflow:hidden. */ #landingScreen { position: relative; clip-path: inset(0); } #loginScreen { position: relative; overflow: hidden; } #landingScreen::before, #landingScreen::after, #loginScreen::before, #loginScreen::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .22; pointer-events: none; z-index: 0; } /* بلاغ حي (صورة توضّح خط انكسار حاد أسفل الشريط العلوي مباشرة): كانت الفقاعتان تمتدان بإحداثيات سالبة (top: -110px) خارج حدود #landingScreen، و#landingScreen نفسه overflow:hidden -- فتُقصّ الضبابية (blur) بخط حاد بالضبط عند حافة العنصر بدل ما تتلاشى تدريجياً (blur بعد القص يعطي خط قاطع، مو تلاشي). الحل: نفس الفقاعات بس بإحداثيات موجبة بالكامل داخل حدود العنصر، بهامش كافٍ (150px+) يسمح للضبابية تتلاشى طبيعياً قبل ما توصل لأي حافة تُقصّ عندها */ #landingScreen::before, #loginScreen::before { width: 320px; height: 320px; background: var(--primary); top: 150px; inset-inline-end: 30px; animation: glassBlobDriftA 22s ease-in-out infinite alternate; } #landingScreen::after, #loginScreen::after { width: 260px; height: 260px; background: var(--secondary); bottom: 150px; inset-inline-start: 30px; animation: glassBlobDriftB 26s ease-in-out infinite alternate; } #landingScreen > *, #loginScreen > * { position: relative; z-index: 1; } /* لمسة بصرية توضّح فكرة المنتج نفسها بصفحة الهبوط: بطاقة "فاتورة مشوّشة" خلفية تتحوّل لبطاقة بيانات مستخرجة نظيفة أمامها (طلب صاحب المشروع: تصميم يبين إنه مصمَّم بعناية لا نموذج جاهز) -- زخرفية بحتة، بلا أي تأثير على المحتوى أو التفاعل */ .hero-showcase { position: absolute; top: -6px; inset-inline-end: 0; width: 230px; height: 190px; pointer-events: none; z-index: 0; } .hero-showcase .hero-card { position: absolute; width: 190px; border-radius: 16px; padding: 14px 16px; } .hero-showcase .hero-card-back { top: 26px; inset-inline-end: 26px; height: 120px; background: color-mix(in srgb, var(--card-bg) 55%, transparent); border: 1px solid color-mix(in srgb, var(--border-color) 30%, transparent); transform: rotate(-9deg); opacity: .55; filter: blur(1px); } .hero-showcase .hero-card-line { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text-muted) 35%, transparent); margin-bottom: 10px; } .hero-showcase .hero-card-front { top: 0; inset-inline-end: 0; transform: rotate(5deg); animation: heroCardFloat 5s ease-in-out infinite; } .hero-showcase .hero-card-spark { position: absolute; top: -10px; inset-inline-end: 150px; font-size: 20px; color: var(--secondary); animation: glassIconGlow 2.6s ease-in-out infinite; } @keyframes heroCardFloat { 0%, 100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-8px); } } @media (max-width: 900px) { .hero-showcase { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-showcase .hero-card-front, .hero-showcase .hero-card-spark { animation: none !important; } } /* ظهور تدريجي عند التمرير (Scroll Reveal، طلب صاحب المشروع استلهاماً من مواقع شركات كبرى مثل Moyasar) -- initScrollReveal() بـmain.js يضيف is-visible أول ما العنصر يدخل نطاق الرؤية (IntersectionObserver)، مرة وحدة فقط لكل عنصر. transition-delay على كل بطاقة (مضبوط inline) يعطي ظهوراً متتابعاً بدل دفعة وحدة */ /* بطاقات الأسئلة الشائعة (14 بطاقة) كانت بتنسيق inline مكرّر بلا أي زجاجية -- نظّفناها لكلاس faq-item واحد بدل تكرار نفس الأنماط 14 مرة */ .faq-item { padding: 14px; border-radius: 10px; cursor: pointer; background: color-mix(in srgb, var(--card-bg) 88%, transparent); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid var(--border-color); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: var(--transition), transform 0.25s var(--ease-out, ease), box-shadow 0.25s ease; } @media (hover: hover) and (pointer: fine) { .faq-item:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 14px 26px -16px rgba(var(--primary-rgb), 0.35); } } /* بلاغ حي: بطاقة "المراجعة السنوية" بصفحة الهبوط طلعت بلا أي تنسيق -- كنت مستخدم كلاسات wrap-banner/wrap-grid/wrap-stat افتراضاً إنها معرَّفة بالملف (كانت موجودة بنموذج المعاينة الأولي بس، مو هنا فعلياً). هذا تعريفها الحقيقي الآن -- نفس تدرّج بطاقة المراجعة السنوية الحقيقية بتبويب التحليلات (--primary-solid إلى أخضر مائي غامق) */ .wrap-banner { padding: 28px; border-radius: 22px; color: #fff; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--primary-solid) 0%, #0f766e 100%); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.4); } .wrap-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.18), transparent 45%), radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.12), transparent 45%); pointer-events: none; } .wrap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-top: 18px; position: relative; } .wrap-stat { background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 14px; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.2); } .wrap-stat h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; opacity: 0.85; color: #fff; } .wrap-stat p { margin: 0; font-size: 19px; font-weight: 800; } .scroll-reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s cubic-bezier(0.22, 1, 0.36, 1), transform .6s cubic-bezier(0.22, 1, 0.36, 1); } .scroll-reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .scroll-reveal { opacity: 1; transform: none; transition: none; } } @media (prefers-reduced-motion: reduce) { #landingScreen::before, #landingScreen::after, #loginScreen::before, #loginScreen::after, .auth-icon::after, .stat-icon::after { animation: none !important; } } /* تصفير هوامش المتصفح الافتراضية + box-sizing موحّد لكل العناصر. خط الموقع الأساسي (الترقية v3): IBM Plex Sans Arabic بوزنين فقط (400/700 -- مُستدعاة بـ templates/*.html)، وبوزن 400 افتراضياً لكل نص عادي؛ العناصر اللي تحتاج تبرز (شعار الموقع فقط) تُستثنى صراحة بقواعدها الخاصة تحت. SaudiRiyalSymbol مُدرَج بالستاك عشان أي ﷼ (U+FDFC) يظهر بالرمز الجديد تلقائياً بأي مكان بالموقع، بلا أي كلاس أو تعديل إضافي. */ /* إصلاح (بلاغ حي، صورة من المستخدم): SaudiRiyalSymbol كان بعد IBM Plex Sans Arabic بالستاك -- لكن ترتيب font-family fallback بالمتصفح يجرّب أول خط بالقائمة *لكل حرف* أولاً، ولا ينتقل للخط التالي إلا لو الخط الحالي ما عنده أي شكل (glyph) لذاك الحرف إطلاقاً؛ unicode-range على خط لاحق بالقائمة لا يغيّر هذا الترتيب. بما إن IBM Plex Sans Arabic (خط شامل حديث) أصلاً عنده شكل قديم لحرف ﷼ (U+FDFC، نفس كود الرمز القديم)، كان يفوز دايماً قبل ما يوصل الدور لـSaudiRiyalSymbol. الحل الصحيح: تقديم SaudiRiyalSymbol أول القائمة -- بما إن unicode-range عنده محصور بهذا الحرف بالذات، ما يؤثر إلا عليه فقط؛ كل حرف ثاني (عربي/إنجليزي) يتخطاه المتصفح تلقائياً ويرجع لـIBM Plex Sans Arabic زي ما هو بالضبط. */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'SaudiRiyalSymbol', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 400; } /* touch-action: manipulation على عناصر التفاعل يلغي تأخير 300ms قبل تسجيل نقرة اللمس (المتصفح يستنى يتأكد إنها مو دبل-تاب-زوم) -- ما فيه دبل-تاب بالموقع أصلاً، فالتأخير هذا بدون فايدة على الموبايل. tap-highlight-color مضبوط بلون العلامة الشفاف بدل الرمادي الافتراضي غير المتناسق مع التصميم */ button, a, input, select, textarea, .icon-btn, .tab-btn, [onclick], [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: rgba(37, 99, 235, 0.15); } /* استثناء خط الأيقونات bootstrap-icons من التعميم أعلاه، وإلا تظهر كمربعات فاضية بدل الأيقونات */ i.bi, .bi, [class^="bi-"], [class*=" bi-"] { font-family: bootstrap-icons !important; } /* letter-spacing خفيف يخلي النص "أعرض" وأسهل قراءة -- IBM Plex Sans Arabic محمّل بوزنين فقط (400/700، راجع رابط Google Fonts بـ)، فتغيير font-weight لقيمة وسط غير محمّلة يخلي المتصفح يرجع لأقرب وزن متاح أو يزيّف Bold صناعياً (يطخبط)؛ letter-spacing طريقة آمنة تعطي إحساس "أعرض" الفعلي بدون تحميل خط إضافي أو خطر تشوّه الحروف. */ /* خلفية الموقع كاملة (طلب صاحب المشروع: "مو أزرق صلب، زجاج مغبش وفيه ألوان خفيفة") -- توهجات لونية خافتة جداً وثابتة الموضع (fixed) خلف كل شاشة بالموقع، بنفس لوني العلامة (--primary/--secondary)، عشان كل البطاقات الزجاجية تحس إنها تطفو فوق نفس الجو اللوني بدل خلفية مسطّحة واحدة -- background-color يبقى كما هو (يتحكم فيه --transition عند تبديل الثيم)، والتوهجات فوقه background-image منفصل */ body { letter-spacing: 0.2px; background-color: var(--bg-color); background-image: radial-gradient(circle 480px at 8% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 100%), radial-gradient(circle 460px at 100% 10%, color-mix(in srgb, var(--secondary) 9%, transparent), transparent 100%), radial-gradient(circle 440px at 45% 100%, color-mix(in srgb, #7c3aed 7%, transparent), transparent 100%), radial-gradient(circle 380px at 0% 55%, color-mix(in srgb, var(--primary) 5%, transparent), transparent 100%); background-repeat: no-repeat; color: var(--text-main); transition: var(--transition); min-height: 100vh; display: flex; flex-direction: column; /* تكملة إصلاح viewport-fit=cover (index.html): بدونها كل env(safe-area-inset-*) بالكود كانت تُقيَّم صفراً دائماً -- الآن وهي مفعَّلة، body نفسه (لا النوافذ المنبثقة فقط) يحتاج حماية صريحة من نوتش/Dynamic Island علوي (شريط الشعار كان بلا أي هامش يراعيه) وخط المؤشر السفلي، وإلا يرتسم أول محتوى فعلي تحت النوتش مباشرة على آيفون X فما فوق. */ padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } /* بلاغ حي متكرر (2026-08-26): background-attachment:fixed على body كان يسبب انقطاعاً واضحاً بتدرّج الخلفية بالضبط عند حدود العناصر الـsticky (الشريط العلوي، شريط التبويبات) -- عطل رسم معروف بالمتصفحات عند خلط خلفية "ثابتة بالنافذة" مع عناصر sticky/backdrop-filter بنفس الصفحة. أزلناها نهائياً؛ التوهجات تمرّر مع الصفحة عادي بدل تثبيتها بالنافذة -- نفس المظهر العام (زجاج مغبش وفيه ألوان خفيفة) بدون أي عطل رسم */ /* إصلاح: تباعد الحروف "حسب الحجم" (مبدأ apple-design) مبني على خطوط لاتينية منفصلة الحروف -- الخط العربي متصل الحروف بطبيعته، وأي تعديل تباعد (موجب أو سالب) يكسر اتصال الحروف الطبيعي ويضعف الوضوح (بلاغ حي من المستخدم على عناوين الكروت). رجعنا للاعتماد فقط على letter-spacing: 0.2px المعرّف على body (مثبت ومجرَّب من قبل)، بدون أي تعديل إضافي بالحجم */ /* يمنع تمرير الصفحة بالخلفية طول ما فيه نافذة منبثقة مفتوحة (openModal يضيف هذا الكلاس) */ body.modal-open { overflow: hidden; } /* رابط تخطي للمحتوى: خارج الشاشة تماماً (top:-100%) إلا وقت التركيز عليه بالكيبورد (Tab أول عنصر بالصفحة) -- حينها يظهر فوق كل شيء عشان يكون أول توقف منطقي قبل الشريط العلوي/القوائم */ .skip-link { position: fixed; top: -100%; right: 10px; z-index: 10000; background: var(--primary-solid); color: #ffffff; padding: 10px 18px; border-radius: 0 0 10px 10px; font-weight: 700; font-size: 14px; text-decoration: none; transition: top 0.2s ease; } .skip-link:focus-visible { top: 0; }