/* * Hadara Accessibility — Global Dark Mode Colour Override Layer * ══════════════════════════════════════════════════════════════════════════ * MAXIMUM CASCADE AUTHORITY — FOR COLOURS ONLY * TEMPORARY RUNTIME OVERRIDE · ZERO PERMANENT CHANGES · ZERO LAYOUT CHANGES * * ═══ لماذا `@layer` وليس أي شيءٍ آخر ═══ * * ترتيب التتالي في CSS يفرز **الأهمية أولاً، ثم الطبقات، ثم الخصوصية**. وللإعلانات * `!important` يُعكَس ترتيب الطبقات: **الطبقة المُعلَنة أولاً تفوز**، وتُهزَم أمامها * كل الإعلانات `!important` غير المُطبَّقة (unlayered) **مهما بلغت خصوصيتها**. * * أي أن الخصوصية تصبح بلا معنى داخل هذه المعادلة. هذا هو السبيل الوحيد في CSS * الخالص للوصول إلى «سلطة تتالٍ قصوى»، ولذلك حُذفت من هذا الملف كل حيل رفع * الخصوصية السابقة (`:not(#id)`) — لم تعد لها فائدة. * * ═══ مُتحقَّقٌ منه تجريبياً على هذا الموقع، لا نقلاً عن الذاكرة ═══ * طبقة أولى + !important ⟵ تتغلّب على `#id .class{...!important}` ✅ * طبقة أولى + !important ⟵ تتغلّب على `style="color:…"` المضمّن ✅ * تعمل على ::before/::after ✅ * تجاوز متغيّر CSS يصل إلى كل مستهلكيه ✅ * لا تتغلّب على `style="…!important"` المضمّن ❌ * * الثغرة الوحيدة (inline !important) غير موجودةٍ في هذا الموقع إطلاقاً: مسحُ * ٣٤٣٠ عنصراً أعطى ١٠٦ عناصر بأنماطٍ مضمّنة، **صفرٌ منها يحمل لوناً**، وصفرٌ * منها `!important`. والموقع لا يستعمل `@layer` إطلاقاً فلا منافس لهذه الطبقة. * * ═══ نطاق السلطة: الألوان فقط ═══ * الخصائص المسموح بها هنا حصراً — ولا يجوز إضافة غيرها أبداً: * color · background-color · background-image · border-*-color · outline-color * text-shadow · fill · stroke · accent-color · caret-color · color-scheme * text-decoration-color · column-rule-color * * **ممنوعٌ منعاً باتاً** أي خاصية تخطيط أو قياس أو خط: * width · height · margin · padding · position · display · flex · grid * font-* · line-height · border-radius · border-width · transform · content * فيبقى الموقع بنفس التصميم والتخطيط والخطوط والحركة تماماً. * * `box-shadow` مُستثناةٌ عمداً من التجاوز (قرار المستخدم): إلغاؤها يُفقد البطاقات * والأزرار عمقها فيبدو التصميم مسطّحاً — وهو تغييرٌ في التصميم لا في اللون. * أما `background-image` فتُلغى للتدرّجات لأنها تُرسَم **فوق** لون الخلفية * فتُبطِله تماماً (هذا بالضبط سبب بقاء الهيدر والتذييل بلونهما الأصلي). * * ═══ الإزالة الكاملة عند الإطفاء ═══ * كل قاعدةٍ هنا مشروطةٌ بوجود الصنف `hadara-a11y-color-dark` على ``. نزعُ * الصنف يُلغي الطبقة كلها فوراً وتعود كل الألوان الأصلية بلا أي أثرٍ باقٍ — لا * تُعدَّل ملفات قالبٍ ولا قاعدة بيانات ولا أنماطٌ أصلية إطلاقاً. * * ملاحظة توافق: `@layer` مدعومة في كل المتصفحات الحديثة (Chrome 99+، Firefox 97+، * Safari 15.4+). متصفّحٌ أقدم يتجاهل الكتلة كاملةً فيبقى الموقع بألوانه الفاتحة * سليماً غير مكسور — تدهورٌ آمن. */ /* * إعلان الطبقة أولاً وبمفردها: هذا السطر هو ما يمنحها الأسبقية القصوى على كل * إعلانات `!important` غير المُطبَّقة في الموقع. لا تنقله ولا تُضِف طبقةً قبله. */ @layer hadara-dark; @layer hadara-dark { /* ═══════════ ٠) اللوحة الدلالية — المكان الوحيد لتعديل أي لون ═══════════ * * كل رمزٍ يقرأ من متغيّر الإعدادات (يحقنه PHP) ويسقط إلى القيمة المقيسة أدناه، * فلا يهمّ ترتيب الأوراق في الصفحة. * * نسب التباين مقيسةٌ على أفتح سطحٍ يظهر عليه اللون (الأسوأ حالةً): * text #F2EDE3 → 13.70 AAA link #F0CE8A → 11.48 AAA * text-2 #CFC7B8 → 10.34 AAA muted #B5AB99 → 7.04 AAA * accent #E2C489 → 11.04 AAA focus #FFB703 → 9.93 AAA * error #F28B82 → 7.77 AAA success #7BC67E → 9.03 AAA * border #7A6F5E → 3.24 ✓ (المعيار 1.4.11 لحدود مكوّنات الإدخال) * divider #38322A → 1.37 — زخرفيٌّ عمداً ولا يخضع للمعيار */ html.hadara-a11y-color-dark { --hd-bg: var(--hadara-a11y-dark-bg, #15130F); --hd-surface: var(--hadara-a11y-dark-surface, #1D1A15); --hd-surface-2: var(--hadara-a11y-dark-elevated, #262119); --hd-card: var(--hadara-a11y-dark-surface, #1D1A15); --hd-header: var(--hadara-a11y-dark-header, #1A1712); --hd-footer: var(--hadara-a11y-dark-footer, #100E0B); --hd-field: var(--hadara-a11y-dark-field, #221E18); --hd-text: var(--hadara-a11y-dark-text, #F2EDE3); --hd-text-2: var(--hadara-a11y-dark-text2, #CFC7B8); --hd-muted: var(--hadara-a11y-dark-muted, #B5AB99); --hd-divider: var(--hadara-a11y-dark-divider, #38322A); --hd-border: var(--hadara-a11y-dark-border, #7A6F5E); --hd-primary: var(--hadara-a11y-dark-primary, #8FC7EA); --hd-secondary: var(--hadara-a11y-dark-secondary, #C9B896); --hd-accent: var(--hadara-a11y-dark-accent, #E2C489); --hd-link: var(--hadara-a11y-dark-link, #F0CE8A); --hd-link-hover: var(--hadara-a11y-dark-linkhover, #F8E4BC); --hd-success: var(--hadara-a11y-dark-success, #7BC67E); --hd-warning: var(--hadara-a11y-dark-warning, #E8B562); --hd-error: var(--hadara-a11y-dark-error, #F28B82); --hd-focus: var(--hadara-a11y-dark-focus, #FFB703); /* أسطح الحالات — مشتقّة، لا تُضبط من الإعدادات */ --hd-hover: rgba(242, 237, 227, .07); --hd-active: rgba(242, 237, 227, .12); --hd-selected: rgba(226, 196, 137, .16); --hd-disabled: #938C7E; } /* ═══════════ ١) إعادة تعيين متغيّرات الألوان المعيارية ═══════════ * * أعلى نقطة رافعة في النظام: متغيّرٌ واحد يُغيَّر فيتبعه كل مستهلكيه دفعةً واحدة * بلا الحاجة لمعرفة العناصر أصلاً. هنا **الفضاءات المعيارية فقط** (نواة ووردبريس * وElementor) لأنها موجودةٌ على أي موقع؛ أما متغيّرات القالب الخاصة (`--c-bg` * وأمثالها، ورُصد منها ٢٣٥ على هذا الموقع) فتُكتشَف وتُعاد تعيينها تلقائياً من * JS عند التفعيل — انظر `remapVars()` في hadara-a11y-frontend.js. * * كلها مؤقّتة: تُكتب على `html.hadara-a11y-color-dark` فقط، فنزع الصنف يُعيد * القيم الأصلية فوراً بلا أي تعديلٍ دائم. * * حرج — `!important` إلزاميّ على كل متغيّر: ترتيب الطبقات **يُعكَس** بين * الإعلانات العادية والمهمّة. الإعلان العادي غير المُطبَّق (unlayered) يتغلّب * على نظيره داخل طبقة، فبدون `!important` يخسر كل متغيّرٍ هنا أمام تعريف * القالب الأصلي. رُصد هذا بالقياس الحيّ: بقيت `--c-bg` على `#F1F6F4`. */ html.hadara-a11y-color-dark { --wp--preset--color--black: #15130F !important; --wp--preset--color--white: #F2EDE3 !important; --wp--preset--color--cyan-bluish-gray: #262119 !important; --wp--preset--color--pale-pink: #3A2A28 !important; --wp--preset--color--pale-cyan-blue: #1E2A33 !important; --wp--preset--color--very-light-gray: #262119 !important; --wp--preset--color--very-dark-gray: #CFC7B8 !important; --wp--preset--color--light-green-cyan: #7BC67E !important; --wp--preset--color--vivid-green-cyan: #7BC67E !important; --wp--preset--color--luminous-vivid-amber: #E8B562 !important; --wp--preset--color--luminous-vivid-orange: #E8B562 !important; --wp--preset--color--vivid-red: #F28B82 !important; --wp--preset--color--vivid-cyan-blue: #8FC7EA !important; --wp--preset--color--vivid-purple: #C9A8E0 !important; } /* ═══════════ ٢) القماشة ═══════════ * `color-scheme: dark` يجعل المتصفح نفسه يُلوّن أشرطة التمرير وعناصر التحكّم * الأصلية (منتقي التاريخ، قوائم select) بمظهرٍ داكن بلا أي كودٍ إضافي. */ html.hadara-a11y-color-dark { color-scheme: dark !important; background-color: var(--hd-bg) !important; color: var(--hd-text) !important; } html.hadara-a11y-color-dark body { background-color: var(--hd-bg) !important; background-image: none !important; color: var(--hd-text) !important; } /* ═══════════ ٣) الخريطة الدلالية للمكوّنات ═══════════ * * الطبقة تُلغي معركة الخصوصية، فالمحدّدات هنا بسيطةٌ ومقروءة عمداً — تُرتَّب * بالترتيب المصدري لا بالوزن. ما يأتي لاحقاً يتغلّب على ما قبله. * * `[data-hadara-a11y]` (واجهة الإضافة) مستثناةٌ من كل قاعدة: لها نظام ألوانها * الخاص من إعداداتها، ولو دخلت هنا لفقدت هويّتها وتعذّر استعمالها. */ /* ── الهيدر: أولوية خاصة ── * سبب فشله سابقاً مُشخَّصٌ بالقياس: لون الخلفية كان يُصحَّح فعلاً، لكن تدرّجاً * `background-image` كان يُرسَم فوقه فيُخفيه تماماً. لذلك يُلغى التدرّج هنا * صراحةً، وتُغطّى كل الأبناء (الشعار، الروابط، الأيقونات، الأزرار). */ html.hadara-a11y-color-dark :is(header, [role="banner"], .site-header, .elementor-location-header):not(.entry-header):not([data-hadara-a11y]):not([data-hadara-a11y] *) { background-color: var(--hd-header) !important; background-image: none !important; color: var(--hd-text) !important; border-color: var(--hd-divider) !important; } html.hadara-a11y-color-dark :is(header, [role="banner"], .site-header, .elementor-location-header):not(.entry-header) :is(div, span, p, ul, ol, li, nav, form, h1, h2, h3, h4, h5, h6, strong, em, i, b, small, figure, button):not([data-hadara-a11y]):not([data-hadara-a11y] *) { background-color: transparent !important; background-image: none !important; color: var(--hd-text) !important; border-color: var(--hd-divider) !important; } /* ── التذييل: نفس المعالجة وللسبب نفسه ── */ html.hadara-a11y-color-dark :is(footer, [role="contentinfo"], .site-footer, .elementor-location-footer):not(.entry-footer):not([data-hadara-a11y]):not([data-hadara-a11y] *) { background-color: var(--hd-footer) !important; background-image: none !important; color: var(--hd-text) !important; border-color: var(--hd-divider) !important; } html.hadara-a11y-color-dark :is(footer, [role="contentinfo"], .site-footer, .elementor-location-footer):not(.entry-footer) :is(div, span, p, ul, ol, li, nav, form, h1, h2, h3, h4, h5, h6, strong, em, i, b, small, figure, button):not([data-hadara-a11y]):not([data-hadara-a11y] *) { background-color: transparent !important; background-image: none !important; color: var(--hd-text) !important; border-color: var(--hd-divider) !important; } /* ── التنقّل والقوائم ── */ html.hadara-a11y-color-dark :is(nav, [role="navigation"], .main-navigation, .elementor-nav-menu):not([data-hadara-a11y]):not([data-hadara-a11y] *) { background-color: transparent !important; background-image: none !important; color: var(--hd-text) !important; } /* * المنسدلات والقوائم الضخمة وقائمة الجوال: تطفو فوق المحتوى، فلو بقيت شفّافة * (وهي كذلك بحكم القاعدة أعلاه، فهي `