/* ============================================================================
MOZZAT — الهيرو الفاتح (Hero Light)
----------------------------------------------------------------------------
الملف ده بيحوّل الهيرو من الثيم الغامق القديم (نص أبيض فوق تظليل أسود) للثيم
الفاتح الجديد اللي في التصميم المرجعي: رخام أبيض نضيف، عنوان أخضر غامق،
"Service" ذهبي مائل، وزر Discover More أخضر مصمت بحدود ذهبية.
⚠️ لازم يفضل **آخر** ملف CSS متعلق بالهيرو في الـ — بعد hero-v2.css
و carousel-uniform-fix.css و hero-mobile.css. هو بيغلبهم بترتيب التحميل
(نفس الأولوية + !important)، فمفيش ولا حرف اتغيّر جوّه الملفات دي.
لو حبيت ترجع للثيم الغامق: شيل سطر الـ بتاعه من الصفحتين وخلاص.
الاتجاه (عربي/إنجليزي) شغال أوتوماتيك زي باقي الموقع من المتغيرات الموجودة
على #mozzat-hero-bg (--mzh-scrim-dir / --mzh-photo-flip) — مفيش كود مكرر
للعربي، وكل تدرّج بيستخدم متغيّر اتجاه بيتقلب لوحده.
⛔ مفيش :has() في الملف ده خالص (سفاري الآيباد الأقدم من 15.4).
============================================================================ */
:root {
/* ---- لوحة ألوان الهيرو الفاتح (مسحوبة من التصميم المرجعي) ---- */
--mzhl-ink: #1F3A35; /* أخضر غامق — العنوان + PARTNER IN SAUDI ARABIA */
--mzhl-body: #3C4F4C; /* رمادي مخضرّ — نص الفقرة */
--mzhl-gold: #A87A45; /* ذهبي البراند — Service / الخط / الشريط الجانبي */
--mzhl-gold-soft: #C9A063;
--mzhl-marble: #F7F6F4; /* لون الرخام كـfallback تحت الصورة */
--mzhl-cta-bg: #3B5450; /* خلفية زر Discover More */
--mzhl-cta-bg-h: #2E4340; /* نفس الزر عند الوقوف بالماوس */
}
/* ============================================================================
(1) صور الهيرو الجديدة — مجلد images/hero/v2/
----------------------------------------------------------------------------
ليه مجلد جديد بدل ما نستبدل الصور في مكانها؟ لأن .htaccess مخزّن الصور في
متصفح الزائر **سنة كاملة بـimmutable** (القاعدة رقم 1 في CLAUDE.md). لو
استبدلنا الصورة بنفس الاسم، أي زائر فتح الموقع قبل كده هيفضل شايف الصورة
الغامقة القديمة مع النصوص الخضرا الجديدة = موقع مكسور عنده لسنة.
المسار الجديد = رابط جديد = الكاش بيتكسر تلقائيًا، والأسماء فضلت زي ما هي.
============================================================================ */
/* الديسكتوب (≥1280px): من غير !important عن قصد — عشان الـinline style اللي
js/hero-v2-slides.js بيحطه عند تبديل الشريحة يفضل يغلبها زي ما هو شغال دلوقتي.
الأولوية هنا (1,1,0) أعلى من .mzh-photo (0,1,0) اللي في hero-v2.css، فدي
بتكسب صورة الشريحة صفر من غير ما تلمس السلايدر. */
@media (min-width: 1280px) {
#mozzat-hero-bg .mzh-photo {
background-image: url("../images/hero/v2/hero-desktop.jpg");
}
}
/* ★ نقطة مهمة: تثبيت الصورة على جهة الرخام ★
صورة الديسكتوب نسبتها 2.53 وإطار الهيرو نسبته ~2.2، يعني `cover` بيكبّرها
بالارتفاع وبيقص من العرض (~195px على شاشة 1440). القيمة القديمة
`--mzh-photo-pos: center right` كانت بتثبّتها على اليمين، فالقص كله كان
بيقع على **الشمال = جهة الرخام** — وده اللي كان بيزحلق الأكل ناحية النص.
القيمة الجديدة `40% center` معناها: 40% بس من القص بيتاخد من ناحية الرخام
و60% من الناحية التانية. جرّبت 0% / 18% / 30% / 45% وصوّرتهم:
• 0% (شمال تمامًا) → الرخام كتير جدًا، والفراخ والفلفل بيتقصّوا من اليمين
• 45% → أقرب للتصميم المرجعي بس الحافة اليمنى بتتزنق
• 40% → الفراخ بتبان في الركن اليمين فوق، الأكل بيوصل حافة
الشاشة، والرخام تحت الكتابة كامل. ← دي المختارة
والعربي؟ نفس القيمة بالظبط. `background-position` بتتحسب **قبل**
`transform: scaleX(-1)`، فالصورة بتتقص من نفس الناحية في اللغتين والفلب
بيوّدي الرخام ناحية اليمين لوحده. مفيش قاعدة منفصلة للعربي. */
@media (min-width: 768px) {
#mozzat-hero-bg .mzh-photo,
#mozzat-hero-bg .mzh-photo::after {
background-position: 40% center !important;
}
}
/* ---- ★ معالجة موحّدة لكل الشرائح — مفيش استثناء لأي صورة ★ ----
قبل كده كانت الشريحة التانية (الستيك) لها قص وتفتيح مخصوصين. ده اتشال عن قصد:
دلوقتي **كل** الشرائح بتاخد نفس التفتيح الأبيض الثابت في نفس المكان على كل
مقاس (ديسكتوب / تابلت / جوال). يعني أي صورة تحطها في أي شريحة بتتعامل
بنفس الطريقة — نظام عام، مش مفصّل على صورة بعينها.
شرط واحد عشان النظام ده يطلع أحلى شكل: صورة الهيرو تتكوّن **أكل ناحية اليمين
ورخام نضيف ناحية الشمال** — زي صورة المائدة (الشريحة الأولى) وزي صور الستيك
على الديسكتوب والتابلت. الصورة الوحيدة اللي مكوّنة غير كده هي ستيك الجوال
(hero-mobile-2.jpg، الطبق في النص) — فالتفتيح بيغطّي جزء منها. لو استبدلتها
بصورة أكلها ناحية اليمين زي البقية، هتطلع مظبوطة أوتوماتيك من غير أي تعديل. */
/* الجوال (≤767px) والتابلت (768–1279px): !important هنا مقصود ومطابق للسلوك
الموجود أصلاً في hero-mobile.css — الصور دي لازم تغلب الـinline بتاع
السلايدر، لأن صورة الديسكتوب العريضة بتتقص بشكل وحش على المقاسات دي. */
@media (max-width: 767px) {
#mozzat-hero-bg .mzh-photo {
background-image: url("../images/hero/v2/hero-mobile.jpg") !important;
}
#mozzat-hero-bg .mzh-photo::after {
background-image: url("../images/hero/v2/hero-mobile-2.jpg") !important;
}
}
@media (min-width: 768px) and (max-width: 1279px) {
#mozzat-hero-bg .mzh-photo {
background-image: url("../images/hero/v2/hero-tablet.jpg") !important;
}
#mozzat-hero-bg .mzh-photo::after {
background-image: url("../images/hero/v2/hero-tablet-2.jpg") !important;
}
}
/* ============================================================================
(2) الخلفية: الرخام بدل الأسود
----------------------------------------------------------------------------
hero-v2.css بيحط background-color: var(--mzh-bg-1) !important (أسود)،
و hero-mobile.css بيحط #0A0F0C !important على الجوال. الاتنين نفس الأولوية
بالظبط (1,0,0)، فالملف ده — لأنه بيتحمّل بعدهم — هو اللي بيكسب.
اللون ده بيبان بس في اللحظة اللي الصورة لسه بتحمّل فيها، وبقى فاتح عشان
ما يحصلش "ومضة سودا" قبل ما الصورة تظهر.
============================================================================ */
#mozzat-hero-bg {
background-color: var(--mzhl-marble) !important;
}
/* ============================================================================
(3) التظليل (scrim): من أسود لأبيض
----------------------------------------------------------------------------
الفكرة اتقلبت بالكامل: قبل كده كنا بنغمّق الصورة عشان النص الأبيض يبان،
دلوقتي بنفتّحها عشان النص الأخضر الغامق يبان. كل تدرّج تحت متظبط على تكوين
الصورة بتاعة المقاس بتاعه (الرخام فين والأكل فين).
============================================================================ */
/* ---- الديسكتوب (≥1280px) ----
الصورة 1920×760: الرخام في الشمال ~45% والأكل في اليمين. النص واقع كله فوق
الرخام أصلاً، فالتدرّج هنا مجرد "تأمين" خفيف: بيفتّح جهة الكتابة شوية عشان
لو حتة عشب أو طماطم زحفت ناحية الشمال يفضل النص مقروء، وبيسيب الأكل بألوانه
الطبيعية بالكامل من 62% وطالع.
الاتجاه من --mzh-scrim-dir (90deg إنجليزي / 270deg عربي) — بيتقلب لوحده. */
#mozzat-hero-bg .mzh-scrim {
background-image: linear-gradient(var(--mzh-scrim-dir, 90deg),
rgba(255, 255, 255, .82) 0%,
rgba(255, 255, 255, .62) 30%,
rgba(255, 255, 255, .24) 48%,
rgba(255, 255, 255, 0) 62%) !important;
background-color: transparent !important;
opacity: 1 !important;
}
/* ---- التابلت الطولي (768–1023px) ----
هنا تخطيط العمودين مابيشتغلش (بيبدأ من 1024px)، فعمود النص بياخد عرض
الشاشة كله والفقرة بتوصل لحوالي 48% منه — أوسع من شريط الرخام. التفتيح
قوي وبيفضل ثابت لحد 42% عشان الفقرة كلها تقعد على خلفية نضيفة، وبعدين
بينزل بسرعة عشان الأكل يفضل بألوانه. */
@media (min-width: 768px) and (max-width: 1023px) {
#mozzat-hero-bg .mzh-scrim {
background-image: linear-gradient(var(--mzh-scrim-dir, 90deg),
rgba(255, 255, 255, .975) 0%,
rgba(255, 255, 255, .96) 46%,
rgba(255, 255, 255, .62) 58%,
rgba(255, 255, 255, .20) 70%,
rgba(255, 255, 255, 0) 83%) !important;
}
/* hero-mobile.css بيدي الفقرة 52% في النطاق ده. بنضيّقها لـ48% عشان تخلص
قبل ما التفتيح يبدأ ينزل — الكلمة الزيادة تنزل لسطر تحت بدل ما تكمل
ناحية الصورة. (width مش max-width عشان تغلب w-9/12 من Tailwind.) */
#mozzat-hero-bg .mzh-body {
width: 48% !important;
max-width: 48% !important;
}
}
/* ---- التابلت العرضي / اللابتوب الصغير (1024–1279px) ----
من 1024px تخطيط العمودين بيشتغل، فالفقرة بقت جوّه عمود بنص العرض وواقعة
كلها فوق الرخام أصلاً — فالتفتيح هنا أخف بكتير من الطولي. */
@media (min-width: 1024px) and (max-width: 1279px) {
#mozzat-hero-bg .mzh-scrim {
background-image: linear-gradient(var(--mzh-scrim-dir, 90deg),
rgba(255, 255, 255, .90) 0%,
rgba(255, 255, 255, .72) 32%,
rgba(255, 255, 255, .32) 50%,
rgba(255, 255, 255, .06) 64%,
rgba(255, 255, 255, 0) 76%) !important;
}
}
/* ---- الجوال (≤767px) — نفس منطق الآيباد بالظبط ----
المطلوب: التفتيح الأبيض على **جهة الكتابة فقط** (شمال في الإنجليزي / يمين
في العربي)، والأكل يفضل نضيف صريح على الجهة التانية — **من غير أي تفتيح
فوق الصورة**. ده نفس اللي بيحصل على التابلت والديسكتوب اللي شغّالين تمام.
عشان كده التفتيح بقى تدرّج **أفقي واحد** مربوط بـ--mzh-scrim-dir (90° إنجليزي
= أبيض شمال / 270° عربي = أبيض يمين) — زي التابلت حرف بحرف، مفيش تدرّج علوي
ولا مائل خالص. صورة الجوال (أكل يمين، رخام شمال) بتتقلب في العربي بـ
scaleX(-1) فالأكل بيروح شمال والتفتيح بيروح يمين لوحدهم — متطابقين دايمًا.
النتيجة: العنوان والفقرة على عمود فاتح نضيف ناحية الكتابة، والأكل (فراخ فوق،
خضار وبحريات على اليمين) بألوانه الكاملة من غير ضباب علوي. */
@media (max-width: 767px) {
#mozzat-hero-bg .mzh-scrim {
background-image: linear-gradient(var(--mzh-scrim-dir, 90deg),
rgba(255, 255, 255, .97) 0%,
rgba(255, 255, 255, .93) 46%,
rgba(255, 255, 255, .58) 60%,
rgba(255, 255, 255, .20) 73%,
rgba(255, 255, 255, 0) 86%) !important;
}
}
/* ============================================================================
(4) ألوان النصوص
----------------------------------------------------------------------------
القيم في hero-v2.css متحطوطة بـ!important، فبنقابلها بـ!important من ملف
بيتحمّل بعدها. الذهبي (eyebrow / Service / الخط) هو نفسه لون البراند
الموجود أصلاً — ما اتغيّرش، بس بقى على خلفية فاتحة فبيبان أوضح.
============================================================================ */
#mozzat-hero-bg .mzh-h1 { color: var(--mzhl-ink) !important; }
#mozzat-hero-bg .mzh-h1 .mzh-accent { color: var(--mzhl-gold) !important; }
#mozzat-hero-bg .mzh-sub { color: var(--mzhl-ink) !important; font-weight: 600; }
#mozzat-hero-bg .mzh-body { color: var(--mzhl-body) !important; font-weight: 400; }
#mozzat-hero-bg .mzh-eyebrow { color: var(--mzhl-gold) !important; }
#mozzat-hero-bg .mzh-rule { background: var(--mzhl-gold) !important; }
/* الظل الغامق اللي كان بيساعد النص الأبيض على الجوال بقى ضار دلوقتي (بيوسّخ
النص الأخضر على خلفية فاتحة). بنبدّله بهالة بيضا خفيفة جدًا بتزوّد الفصل
لو النص عدّى فوق حتة صورة. */
#mozzat-hero-bg .mzh-h1,
#mozzat-hero-bg .mzh-sub,
#mozzat-hero-bg .mzh-body,
#mozzat-hero-bg .mzh-eyebrow {
text-shadow: 0 1px 10px rgba(255, 255, 255, .75) !important;
}
/* الشريط الجانبي الديكوري (01 · QUALITY · RELIABILITY · TRUST) — ديسكتوب فقط.
الخلفية الصغيرة ورا الرقم والنص كانت سودا (--mzh-bg-1) عشان تقطع الخط
الرأسي؛ بقت رخام عشان تعمل نفس الشغلانة على الخلفية الفاتحة. */
#mozzat-hero-bg .mzh-rail-num,
#mozzat-hero-bg .mzh-rail-text {
color: var(--mzhl-gold);
background: var(--mzhl-marble);
opacity: 1;
}
#mozzat-hero-bg .mzh-rail::before { background: rgba(168, 122, 69, .45); }
/* ============================================================================
(5) زر DISCOVER MORE — الشكل الجديد
----------------------------------------------------------------------------
قبل: زر شفاف بحدود بيضا ونص أبيض (كان لازم كده فوق خلفية سودا).
دلوقتي: حبّة (pill) خضرا مصمتة + حدود ذهبية رفيعة + نص أبيض + سهم في دايرة
ذهبية — زي التصميم المرجعي بالظبط.
⚠️ الأبعاد هنا موحّدة على **كل** المقاسات عن قصد (مفيش @media للزر):
نفس الحشو، نفس حجم الخط، نفس الدايرة. ده اللي بيخلي الزر مظبوط ومتطابق من
360px لحد 1920px من غير ما نضبط كل مقاس لوحده. الـmin-height بيضمن إن
ارتفاع الزر ما يقلّش عن 48px = الحد الأدنى الموصى بيه للمس على الجوال.
============================================================================ */
#mozzat-hero-bg .mzh-cta {
/* ⚠️ ممنوع !important على display هنا. الزر بيتخفي بـstyle.display='none'
inline من الـonclick بتاع "Discover More"، و!important في ملف CSS بتغلب
الـinline — فالزر كان بيفضل ظاهر والنص الإضافي بينزل تحته بدل ما يحل
مكانه. الأولوية (1,1,0) كفاية إنها تغلب hero-v2.css من غير !important. */
display: inline-flex;
align-items: center;
justify-content: center;
gap: .85rem;
background: var(--mzhl-cta-bg) !important;
border: 1px solid var(--mzhl-gold) !important;
color: #FFFFFF !important;
border-radius: 999px !important;
padding: .95rem 1.35rem .95rem 1.9rem !important;
min-height: 48px;
font-size: .78rem;
font-weight: 600;
letter-spacing: .12em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap; /* "DISCOVER MORE" ما يتكسرش لسطرين على 360px */
max-width: 100%;
box-shadow: 0 10px 26px rgba(31, 58, 53, .18);
transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
/* الحشو مرآة في العربي (الفراغ الأكبر ناحية النص، الأصغر ناحية الدايرة) */
html[dir="rtl"] #mozzat-hero-bg .mzh-cta {
padding: .95rem 1.9rem .95rem 1.35rem !important;
}
#mozzat-hero-bg .mzh-cta:hover {
background: var(--mzhl-cta-bg-h) !important;
border-color: var(--mzhl-gold-soft) !important;
box-shadow: 0 12px 30px rgba(31, 58, 53, .26);
transform: translateY(-1px);
}
#mozzat-hero-bg .mzh-cta:active { transform: translateY(0); }
#mozzat-hero-bg .mzh-cta:focus-visible {
outline: 2px solid var(--mzhl-cta-bg);
outline-offset: 3px;
}
/* الدايرة الذهبية جوّه الزر — مقاس ثابت عشان ما تتفرطحش لو النص طال (العربي) */
#mozzat-hero-bg .mzh-cta-arrow-circle {
width: 26px !important;
height: 26px !important;
min-width: 26px;
border: 1px solid var(--mzhl-gold-soft) !important;
color: #FFFFFF;
flex: 0 0 auto;
}
/* السهم بيشاور ناحية الشمال في العربي زي اتجاه القراءة */
html[dir="rtl"] #mozzat-hero-bg .mzh-cta-arrow-circle svg { transform: scaleX(-1); }
/* ---- النص الإضافي اللي بيظهر بعد الضغط على Discover More ----
المطلوب: النص ده يبان **زي الفقرة اللي فوقه بالظبط** — بدون مربع أبيض ولا
حدود ولا ظل. فشلنا خلاص كل ستايل المربع؛ النص عبارة عن
عادي، فبياخد نفس لون ونفس هالة القراءة بتاعة الفقرة الأساسية أوتوماتيك.
وبيظهر تحت الكلام اللي فوقه مباشرة (مكان الزر) لأنه بيحل محل الزر المخفي.
القراءة مضمونة لأن التفتيح أفقي وبيغطّي عمود الكتابة بالكامل مهما طال الهيرو.
[id^="readmore-text"] بتمسك الصفحتين (en/ar) من غير قاعدة مكررة. */
#mozzat-hero-bg .mzh-cta-wrap > [id^="readmore-text"] {
margin-top: 1rem;
max-width: 46ch;
}
/* زر "عرض أقل" — بقى أخضر غامق بدل الذهبي عشان يبان مقروء على الرخام */
#mozzat-hero-bg .mzh-cta-close { color: var(--mzhl-ink) !important; }
#mozzat-hero-bg .mzh-cta-close:hover { color: var(--mzhl-gold) !important; }
/* ============================================================================
(6) مؤشرات السلايدر: النقاط + شريط التقدّم
============================================================================ */
#mozzat-hero-bg .mzh-dot { background: rgba(31, 58, 53, .22); }
#mozzat-hero-bg .mzh-dot.active { background: var(--mzhl-gold); }
#mozzat-hero-bg .mzh-slidebar-seg { background: rgba(31, 58, 53, .18); }
#mozzat-hero-bg .mzh-slidebar-fill { background: var(--mzhl-gold); }
/* النقاط الديكورية القديمة (.mzh-dots) مخفية دايمًا — الشريط (.mzh-slidebar) بديلها.
كانت hero-v2.css بتخفيها بـ:has(+ .mzh-slidebar) اللي بيعتمد إن الشريط جاي
بعدها مباشرة. بما إننا نقلنا الشريط لتحت النص الإضافي، القاعدة دي بتفشل
والنقاط ممكن تبان — فبنخفيها هنا صراحةً (وأمتن كمان، من غير :has()). */
#mozzat-hero-bg .mzh-dots { display: none !important; }
/* ============================================================================
(6-ب) تجميد حركة النص — الصورة بس هي اللي بتتنقّل
----------------------------------------------------------------------------
المطلوب: عند تبديل الشرائح، النص يفضل **ثابت بدون أي حركة**، والصورة بس
هي اللي بتتغيّر — على كل المنصات.
ليه بالـCSS مش بـdata-text-enabled="0"؟ لأن صورة الجوال بتتبدّل عن طريق
js/hero-mobile-slides.js اللي بيراقب مين النص اللي عليه .mzh-slide-active.
لو وقّفنا تبديل النص (enabled=0)، النص النشط هيفضل شريحة 0 للأبد، فصورة
الجوال **مش هتتبدّل خالص**. فبنسيب تبديل الكلاس شغّال (عشان الجوال يبدّل
الصورة)، وبس نلغي الأنيميشن نفسه هنا. وبما إن نص الشريحتين متطابق، التبديل
الفوري غير مرئي تمامًا — النص بيبان ثابت. الصورة بتفضل تتحرك عادي. */
#mozzat-hero-bg .mzh-slide-stack.mzh-slides-multi .mzh-slide-text {
transition: none !important;
transform: none !important;
}
#mozzat-hero-bg .mzh-slide-stack.mzh-slides-multi .mzh-slide-text.mzh-slide-exit-l,
#mozzat-hero-bg .mzh-slide-stack.mzh-slides-multi .mzh-slide-text.mzh-slide-exit-r {
transform: none !important;
opacity: 0 !important;
}
/* ============================================================================
(7) ضبط الزر على المقاسات الصغيرة والمتوسطة
----------------------------------------------------------------------------
الشكل والأبعاد بتاعة الزر نفسه موحّدة فوق. اللي هنا هو **المحاذاة** بس:
الزر لازم يبدأ من نفس نقطة بداية الكلام اللي فوقه بالظبط في كل مقاس.
على الجوال: hero-mobile.css بيدي الزر margin-inline-start: 8px عشان يكمّل
فرق الحشو بين حاوية الزر (pl-6 = 24px) والنص (px-8 = 32px). المعادلة دي
لسه صح ومش بنلمسها — بنتأكد بس إن الزر مايتمدّش على عرض الشاشة كلها.
============================================================================ */
@media (max-width: 767px) {
#mozzat-hero-bg .mzh-cta-wrap { display: block; }
#mozzat-hero-bg .mzh-cta { width: auto !important; }
}
/* ---- ★ إصلاح: الشريط الجانبي كان راكب على النص وعلى زر Discover More ★ ----
من 1024px الشريط الديكوري (01 · QUALITY · RELIABILITY · TRUST) بيظهر على
left: 28px. وفي نفس الوقت hero-mobile.css بيدي عمود النص
padding-inline-start: 32px في النطاق 768–1279. يعني الاتنين بيقعوا فوق بعض
بالظبط: حرف الـ"P" في Premium وكلمة "DISCOVER" كانوا مقصوصين ورا الشريط.
(المشكلة دي كانت موجودة قبل الثيم الفاتح — بتبان في النطاق ده بس، لأن من
1280px وطالع الحاوية بتترجع لـcontainer/max-w-7xl والنص بيبدأ من ~92px.)
الحل: حشو أكبر لعمود النص في النطاق ده بس — 76px بتسيب مسافة نضيفة بعد
الشريط. padding-inline-start بيتقلب لوحده في العربي (الشريط هناك على
right: 28px)، فمفيش قاعدة منفصلة. */
@media (min-width: 1024px) and (max-width: 1279px) {
#mozzat-hero-bg > #home > div > div {
padding-inline-start: 76px !important;
}
}
/* ---- ★ الشاشات القصيرة: الزر كان تحت "الطيّة" (below the fold) ★ ----
قِست المواقع الفعلية على أربع شاشات: الهيدر ارتفاعه 80px ثابت، و#home
عليه min-height: 100vh — يعني الهيرو دايمًا بيزيد 80px عن ارتفاع الشاشة.
النتيجة (أسفل زر Discover More مقابل ارتفاع الشاشة):
390×844 → 765 من 844 ✅
414×896 → 764 من 896 ✅
360×780 → 744 من 780 ✅
360×640 → 728 من 640 ❌ الزر كان مقطوع تحت، لازم تنزّل عشان تشوفه
الحل حاجتين مع بعض على الشاشات الأقصر من 700px:
(1) الهيرو ياخد ارتفاع الشاشة **ناقص الهيدر** بدل الشاشة كاملة.
(2) تصغير متدرّج للنصوص والحشو — مش تغيير تصميم، بس تكثيف كافي إن الزر
والشريط يدخلوا في الشاشة من غير تمرير.
الشاشات الأطول من كده ما بتتأثرش بولا حرف. */
@media (max-width: 767px) and (max-height: 700px) {
#mozzat-hero-bg > #home {
min-height: calc(100svh - 80px) !important;
padding-top: 66px !important;
padding-bottom: 16px !important;
}
#mozzat-hero-bg .mzh-eyebrow {
font-size: 10.5px !important;
line-height: 1.6 !important;
margin-bottom: .5rem;
}
#mozzat-hero-bg .mzh-h1 { font-size: 34px !important; }
#mozzat-hero-bg .mzh-rule { margin-top: .7rem !important; margin-bottom: .55rem !important; }
#mozzat-hero-bg .mzh-sub { font-size: 13.5px !important; }
#mozzat-hero-bg .mzh-body { font-size: 13.5px !important; line-height: 1.55 !important; }
#mozzat-hero-bg .mzh-cta { margin-top: 14px !important; }
#mozzat-hero-bg .mzh-slidebar { margin-top: .9rem; }
}
/* على الشاشات القصيرة جدًا (أقل من 360px عرضًا) بنضيّق الحشو الجانبي للزر
شوية عشان يفضل داخل الشاشة مع الهامش الجانبي من غير ما يتكسر لسطرين. */
@media (max-width: 359px) {
#mozzat-hero-bg .mzh-cta {
padding: .9rem 1.1rem .9rem 1.5rem !important;
font-size: .72rem;
letter-spacing: .09em;
gap: .65rem;
}
html[dir="rtl"] #mozzat-hero-bg .mzh-cta {
padding: .9rem 1.5rem .9rem 1.1rem !important;
}
}
/* ============================================================================
(8) إتاحة الحركة
============================================================================ */
@media (prefers-reduced-motion: reduce) {
#mozzat-hero-bg .mzh-cta { transition: none !important; }
#mozzat-hero-bg .mzh-cta:hover { transform: none; }
}