معظم الواجهات «الزجاجية» تفشل في العربية لسبب واحد: الزجاج يُضاف كمرشّح فوق واجهة مصمّمة لشيء آخر. النتيجة نصّ عربي بحروف متّصلة يطفو فوق ضجيج ملوّن، وتباين لا يمكن قياسه لأنه يتغيّر مع ما خلفه.
الزجاج مادة لا تأثير
في Vibe OS تعاملنا مع الزجاج كمادة لها سُمك وارتفاع وأرضية. اللوح الزجاجي لا يطفو في الفراغ؛ يستقرّ على أرضية داكنة ثابتة، ويحمل حدّاً رفيعاً يُحدّد سُمكه، وظلاً يقول أين هو في العمق. هذه القرارات الثلاثة — الأرضية، الحدّ، الظل — هي ما يجعله يُقرأ كمادة.
القاعدة الأولى: أرضية ثابتة خلف النصّ
التباين لا يُقاس على خلفية متغيّرة. لذلك كل نصّ في سطح زجاجي عندنا يقع فوق طبقة داكنة ثابتة داخل اللوح — لا فوق الضبابية مباشرة. الضبابية للحواف والفراغات؛ النصّ له أرضيته.
/* اللوح: ضبابية للسطح، أرضية ثابتة للنص */
.glass {
background: rgba(10, 12, 16, .82); /* الأرضية التي يُقاس عليها التباين */
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
border: 1px solid rgba(255,255,255,.12); /* السُّمك */
box-shadow: 0 24px 60px -30px rgba(0,0,0,.6); /* العمق */
}
.glass p { color: #F2F0EC; } /* ≥ 10:1 حتى فوق خلفية بيضاء — محسوب على أسوأ حالة */القاعدة الثانية: العربية تحتاج ارتفاعاً لا شفافية
الحروف العربية المتّصلة تفقد وضوحها حين تختلط حوافّها بالخلفية. الحلّ ليس زيادة السماكة — بل ارتفاع سطر أكبر (1.7 فما فوق) وحجم أكبر بدرجة، ومنع أي letter-spacing. الزجاج يُبقي أثره في الفراغ حول النصّ، لا في النصّ نفسه.
القاعدة الثالثة: الحركة تكشف العمق
اللوح الزجاجي الثابت قد يُقرأ كصورة. حين يتحرّك بسرعة مختلفة قليلاً عن الخلفية (parallax طفيف ±20px) يفهم العين أنه طبقة أمام طبقة. هذه ليست زينة — هي ما يُثبت أن الزجاج له عمق.
- لا أكثر من ثلاث طبقات زجاجية في شاشة — بعدها يصير ضجيجاً
- الضبابية 14–20px؛ أقل تبدو خطأً وأكثر تُذيب الخلفية كلياً
- في الوضع الفاتح: الأرضية فاتحة شبه معتمة والحدّ داكن — لا العكس
الزجاج الجيّد لا يُلاحَظ. يُلاحَظ النصّ الواضح فوقه والعمق خلفه.
الخلاصة
الزجاجية ليست مرشّحاً يُضاف في آخر لحظة. هي ثلاثة قرارات مادية — أرضية ثابتة، حدّ يعطي سُمكاً، وظلّ يعطي عمقاً — تُتّخذ في نظام التصميم مرّة، ثم تُقاس على تباين حقيقي مع نصّ عربي حقيقي.
