/* ============================================================================ MOZZAT — واجهة الهيرو على الجوال فقط (Hero mobile) ---------------------------------------------------------------------------- الملف ده مسؤول عن: إظهار صورة الهيرو الرأسية على الجوال بدل الخلفية الداكنة الصمّاء، مع تدرّج ناعم يخلي الكتابة مقروءة، وضبط الكتابة على الطرف وترتيب الزر تحت النص من غير تداخل. ⚠️ كل اللي جوّه الملف متلفّف في @media (max-width: 767px) — الديسكتوب والتابلت الكبير ما بيتأثروش ولا بحرف واحد. ولازم يتربط في الـ بعد css/hero-v2.css و css/carousel-uniform-fix.css عشان يغلبهم في الترتيب. الاتجاه (عربي/إنجليزي) شغال أوتوماتيك من نفس المتغيرات الموجودة أصلاً على #mozzat-hero-bg في كل صفحة: • index.html → --mzh-photo-flip: 1 + --mzh-scrim-dir: 90deg (صورة يمين، كتابة شمال) • index-ar.html → --mzh-photo-flip: -1 + --mzh-scrim-dir: 270deg (صورة شمال، كتابة يمين) يعني مفيش أي كود مكرر للعربي — نفس القواعد بتقلب نفسها. ============================================================================ */ @media (max-width: 767px) { /* (1) الحاوية: نلغي صورة الديسكتوب المتحطوطة inline كـbackground-image، وسايبين لون داكن تحتها كـfallback لو الصورة اتأخرت في التحميل. */ #mozzat-hero-bg { position: relative; background-image: none !important; background-color: #0A0F0C !important; overflow: hidden; } /* (2) طبقة الصورة الرأسية. الصورة مصمّمة بحيث نصها الأول داكن والأكل على الجنب، ومقاسها (1080×2340 ≈ نسبة 0.46) قريب جدًا من نسبة شاشة الجوال — يعني cover مش هيقص منها حاجة تُذكر والتكوين بيفضل زي ما هو. scaleX(var(--mzh-photo-flip)) هي اللي بتقلب الصورة في الصفحة العربية. */ #mozzat-hero-bg .mzh-photo { display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; /* ★ الصورة الأولى متحطوطة على العنصر نفسه عن قصد — يعني هي "الأساس" اللي بيظهر دايمًا. حتى لو الصورة التانية ما اتحمّلتش لأي سبب (اسم غلط، امتداد مختلف، ملف ناقص)، اللي هيبان هو الصورة الأولى — مستحيل تطلع شاشة سودا. */ background-image: url("../images/hero/hero-mobile.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; transform: scaleX(var(--mzh-photo-flip, 1)); transform-origin: center center; opacity: 1 !important; } /* (2-ب) الصورة التانية: طبقة واحدة فوق الأولى بـopacity، عشان التبديل يبقى تلاشي ناعم (crossfade) مش قطع مفاجئ. الطبقة دي بتظهر لما js/hero-mobile-slides.js يحط data-mzh-active="1" على #mozzat-hero-bg (يعني لما الشريحة رقم 1 تبقى هي النشطة). ★ عايز تضيف صورة تالتة؟ كلّمني — محتاجة طبقة إضافية وبلوك [data-mzh-active="2"]. ★ */ #mozzat-hero-bg .mzh-photo::after { content: "" !important; position: absolute !important; inset: 0 !important; background-image: url("../images/hero/hero-mobile-2.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; opacity: 0; transition: opacity .9s ease !important; will-change: opacity; pointer-events: none; } #mozzat-hero-bg[data-mzh-active="1"] .mzh-photo::after { opacity: 1; } /* (3) طبقة التعتيم (scrim) — تدرّجين فوق بعض: • تدرّج أفقي: بيغطّي عمود الكتابة كامل بعتمة قوية وبعدين يفتح تدريجيًا ناحية الأكل. النِسَب هنا (0% / 48% / 80% / 100%) متظبطة عشان الشريط الداكن يمشي مع الكتابة لحد طرف الشاشة بالظبط، مش يقف في النص. اتجاهه بيتقلب لوحده حسب --mzh-scrim-dir (90deg إنجليزي / 270deg عربي). • تدرّج رأسي خفيف: بيغمق أعلى الشاشة (تحت الهيدر) وأسفلها، عشان الشعار والقائمة والزر يفضلوا واضحين فوق أي جزء من الصورة. المتغيرات --mzh-scrim-1..4 هي نفسها المستخدمة في الديسكتوب، فأي تعديل ليها من المحرر المرئي بيتطبق هنا كمان. */ #mozzat-hero-bg .mzh-scrim { position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient(to bottom, rgba(10, 15, 12, .70) 0%, rgba(10, 15, 12, .26) 16%, rgba(10, 15, 12, .10) 44%, rgba(10, 15, 12, .42) 86%, rgba(10, 15, 12, .68) 100%), linear-gradient(var(--mzh-scrim-dir, 90deg), var(--mzh-scrim-1, rgba(10, 15, 12, 1)) 0%, var(--mzh-scrim-2, rgba(10, 15, 12, .85)) 48%, var(--mzh-scrim-3, rgba(10, 15, 12, .15)) 80%, var(--mzh-scrim-4, rgba(10, 15, 12, 0)) 100%) !important; opacity: 1 !important; } /* (4) المحتوى فوق الطبقتين. */ #mozzat-hero-bg > #home { position: relative; z-index: 2; } /* الشريط الجانبي الديكوري (01 · QUALITY · RELIABILITY) بيزحم الشاشة الصغيرة — بيتخفي على الجوال زي التصميم المرجعي. */ #mozzat-hero-bg .mzh-rail { display: none !important; } /* ========================================================================== (5) ★ إصلاح: الكتابة على الطرف مش في النص ★ السبب: العنصر الداخلي عليه كلاس mx-auto (margin-inline: auto). ولمّا #home بيبقى flex container، الهوامش الـauto دي بتمتص المساحة الفاضية على الجنبين وبتوسّط العمود كله في نص الشاشة — وده اللي كان مزحلق الكتابة للنص. الحل: نلغي الهوامش الـauto ونخلي العمود ياخد عرض الشاشة كامل، فالكتابة ترجع تبدأ من الطرف (والمسافة الجانبية تفضل من px-8 = 32px بس). ========================================================================== */ #mozzat-hero-bg > #home { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: stretch; padding-top: 92px !important; padding-bottom: 48px !important; } #mozzat-hero-bg > #home > div { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } #mozzat-hero-bg > #home > div > div { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* ========================================================================== (6) ★ إصلاح: زر DISCOVER MORE كان بيتداخل مع آخر سطرين من الفقرة ★ السبب: شرائح الهيرو (.mzh-slide-text) متحطوطة فوق بعض بـposition:absolute جوّه .mzh-slide-stack، والـstack بياخد ارتفاع ثابت مظبوط على الديسكتوب. على الجوال النص بيطول أكتر من الارتفاع ده، فبيطلع بره الـstack والزر (اللي بعده) بيركب فوقه. الحل: الشريحة النشطة بس ترجع position:relative — يعني تبقى جوّه التدفق الطبيعي والـstack ياخد ارتفاعها الحقيقي مهما طال النص، والزر ينزل تحتها تلقائيًا. الشرائح غير النشطة تفضل absolute (مخفية) فمش بتأثر على الارتفاع ولا بتكسر أنيميشن التبديل بين الشرائح. ========================================================================== */ #mozzat-hero-bg .mzh-slide-stack { position: relative !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } #mozzat-hero-bg .mzh-slide-extra-wrap { position: static !important; } #mozzat-hero-bg .mzh-slide-text { position: absolute !important; top: 0; left: 0; right: 0; pointer-events: none; } #mozzat-hero-bg .mzh-slide-text.mzh-slide-active { position: relative !important; /* hero-v2.css بيحط inset: 0 على الشرائح. مع position:relative القيم دي بتتحوّل لإزاحة بدل تحديد مكان، فبنصفّرها كلها عشان الشريحة تقعد في مكانها الطبيعي بالظبط. */ top: auto; right: auto; bottom: auto; left: auto; pointer-events: auto; } /* (7) الزر: مسافة جانبية مطابقة للنص بالظبط. النص عنده px-8 (32px) وحاوية الزر عندها pl-6/pr-8 — margin-inline-start بيتعامل مع الاتجاهين تلقائيًا (شمال في الإنجليزي، يمين في العربي). */ #mozzat-hero-bg .mzh-cta { margin-inline-start: 8px !important; margin-top: 22px !important; } html[dir="rtl"] #mozzat-hero-bg .mzh-cta { margin-inline-start: 0 !important; } /* (8) أحجام النصوص على الجوال — مطابقة للتصميم المرجعي. */ #mozzat-hero-bg .mzh-eyebrow { font-size: 11.5px !important; letter-spacing: .16em !important; line-height: 1.9 !important; } #mozzat-hero-bg .mzh-h1 { font-size: 52px !important; line-height: 1.06 !important; } #mozzat-hero-bg .mzh-sub { font-size: 15px !important; letter-spacing: .10em !important; } #mozzat-hero-bg .mzh-body { font-size: 15.5px !important; line-height: 1.72 !important; width: 100% !important; max-width: 32ch; } #mozzat-hero-bg .mzh-rule { width: 72px !important; margin-inline-start: 32px !important; margin-inline-end: 0 !important; } /* (9) وضوح النص فوق الصورة — ظل خفيف جدًا، مش بيغيّر أي لون. */ #mozzat-hero-bg .mzh-h1, #mozzat-hero-bg .mzh-sub, #mozzat-hero-bg .mzh-body, #mozzat-hero-bg .mzh-eyebrow { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); } /* (10) الصفحة العربية: dir="rtl" بيتكفّل بمحاذاة النص ناحية اليمين، ودي بتمنع الفقرة (اللي عليها max-width) إنها تتزحلق ناحية الشمال. */ html[dir="rtl"] #mozzat-hero-bg .mzh-body { margin-left: auto !important; margin-right: 0 !important; } } /* على الشاشات القصيرة (جوالات صغيرة) نصغّر العنوان شوية عشان الواجهة تفضل داخلة في الشاشة من غير ما المستخدم يضطر ينزل. */ @media (max-width: 767px) and (max-height: 720px) { #mozzat-hero-bg .mzh-h1 { font-size: 42px !important; } #mozzat-hero-bg .mzh-body { font-size: 14.5px !important; line-height: 1.65 !important; } #mozzat-hero-bg > #home { padding-top: 80px !important; } }