/* ========================================================================= Emiratefix — نظام التصميم الأساسي خط: Cairo (عناوين) + IBM Plex Sans Arabic (نصوص) ========================================================================= */ :root{ --ink: #0F1B2B; --ink-soft: #4A5A6E; --bg: #F7F9FB; --bg-alt: #EEF2F5; --surface: #FFFFFF; --line: #E3E8EC; --navy: #0A2540; --navy-deep: #071829; --teal: #00A896; --teal-deep: #007D6F; --amber: #FDB913; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 3px rgba(15,27,43,.06); --shadow-md: 0 8px 24px rgba(15,27,43,.10); --shadow-lg: 0 20px 48px rgba(15,27,43,.16); --font-display: 'Cairo', 'IBM Plex Sans Arabic', sans-serif; --font-body: 'IBM Plex Sans Arabic', 'Cairo', sans-serif; /* افتراضي — تُستبدل في صفحات الماركات */ --brand-primary: var(--navy); --brand-secondary: var(--teal); --brand-light: #EAF6F5; } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; overflow-x: hidden; width: 100%; } body{ margin:0; width: 100%; font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.75; font-size: 16px; direction: rtl; text-align: right; } /* ========================================================================= الحل الجذري لمشكلة "الخط/الشريط الأبيض" على الحافة السبب الحقيقي: iOS Safari لا يطبّق overflow-x:hidden بشكل موثوق على / عند وجود عناصر position:fixed (القائمة المنسدلة، أزرار الاتصال/واتساب العائمة)، فيبقى هامش غير مرئي يظهر كخط أبيض جانبي مهما كررنا max-width:100vw / overflow-x:hidden على body/html (لهذا لم تنفع المحاولات السابقة). الحل الموثوق هو تطبيق القصّ (clipping) على غلاف عادي (div) يحيط بكامل محتوى الصفحة بدل الاعتماد على body/html مباشرة. */ #emf-site-wrapper{ overflow-x: hidden; width: 100%; position: relative; } img{ max-width:100% !important; display:block; height:auto !important; } a{ color: inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } button{ font-family:inherit; cursor:pointer; } h1,h2,h3,h4,h5,h6{ font-family: var(--font-display); font-weight: 800; line-height:1.3; margin: 0 0 .6em; color: var(--ink); } @media (prefers-reduced-motion: reduce){ *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } :focus-visible{ outline: 3px solid var(--brand-secondary); outline-offset: 2px; } .emf-container{ max-width: 1240px; margin-inline:auto; padding-inline: 20px; } .emf-section{ padding: 64px 0; } @media (max-width: 782px){ .emf-section{ padding: 40px 0; } } /* ---------------------------- الأزرار ---------------------------- */ .emf-btn{ display: inline-flex; align-items:center; justify-content:center; gap:8px; padding: 14px 28px; border-radius: 999px; font-weight: 700; font-size: 15px; border: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; white-space: nowrap; } .emf-btn:hover{ transform: translateY(-2px); } .emf-btn-primary{ background: var(--brand-primary); color:#fff; box-shadow: var(--shadow-md); } .emf-btn-primary:hover{ background: color-mix(in srgb, var(--brand-primary) 88%, black); } .emf-btn-whatsapp{ background: #128040; color:#fff; } .emf-btn-whatsapp:hover{ background:#0F7038; } .emf-btn-outline{ background: transparent; border: 2px solid var(--brand-primary); color: var(--brand-primary); } /* ============================================================================ الهيدر — أُعيد بناؤه بالكامل من الصفر ============================================================================ */ .emf-header{ position: sticky; top:0; z-index: 100; background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .emf-header-inner{ max-width:1240px; margin-inline:auto; padding: 12px 20px; display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap: nowrap; position: relative; } /* -------- شعار/اسم الموقع -------- */ .emf-logo{ font-family: var(--font-display); font-weight:900; font-size: 19px; color: var(--navy); white-space: nowrap; flex-shrink: 0; display:flex; align-items:center; } .emf-logo img{ height: 44px; width:auto; } /* اسم الموقع أكبر (+4px) في الصفحة الرئيسية والصفحات الثابتة فقط (خدماتنا، من نحن، تواصل معنا، الأسئلة الشائعة...) — وليس في المقالات أو صفحات تصنيفات الماركات. */ body.emf-static-page .emf-logo{ font-size: 23px; font-weight: 900; /* bold، مطابق للوزن الحالي، مؤكَّد صراحة */ } /* -------- القائمة الرئيسية (سطح المكتب: أفقية دائمة الظهور) -------- */ .emf-primary-nav{ flex: 1 1 auto; min-width: 0; } .emf-primary-nav-list{ display:flex; gap: 4px; align-items:center; list-style:none; margin:0; padding:0; flex-wrap: nowrap; overflow-x:auto; scrollbar-width:none; } .emf-primary-nav-list::-webkit-scrollbar{ display:none; } .emf-primary-nav-list li{ flex-shrink:0; } .emf-primary-nav-list a{ display:block; padding: 10px 16px; border-radius: 999px; font-weight:600; font-size:15px; color: var(--ink-soft); white-space:nowrap; transition: background .15s ease, color .15s ease; } .emf-primary-nav-list a:hover{ background: var(--bg-alt); color: var(--navy); } .emf-header-branded .emf-primary-nav-list a{ color: rgba(255,255,255,.85); } .emf-header-branded .emf-primary-nav-list a:hover{ background: rgba(255,255,255,.14); color:#fff; } /* -------- أزرار يمين الهيدر -------- */ .emf-header-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; } /* -------- زر التبديل للنسخة الإنجليزية (الآن ضمن القائمة نفسها) -------- */ .emf-lang-switch{ display:inline-flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; letter-spacing:.03em; color: var(--navy); border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 13px; margin-inline-start: 8px; transition: all .18s ease; flex-shrink: 0; white-space: nowrap; } .emf-lang-switch:hover{ background: var(--navy); color:#fff; border-color: var(--navy); } .emf-header-branded .emf-lang-switch{ color:#fff; border-color: rgba(255,255,255,.4); } .emf-header-branded .emf-lang-switch:hover{ background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.6); } .emf-mobile-toggle{ display:none; background:none; border:none; padding:8px; cursor:pointer; color: var(--navy); flex-shrink:0; } .emf-header-branded .emf-mobile-toggle{ color:#fff; } /* زر EN داخل قائمة الموبايل المنسدلة: صف مستقل أسفل الروابط */ .emf-mobile-drawer-footer{ padding: 12px 24px 20px; border-top: 1px solid var(--line); } .emf-mobile-drawer-footer .emf-lang-switch{ display:flex; width:100%; margin-inline-start:0; padding: 13px 16px; font-size:14px; } /* -------- زر شريط "أنت الآن في مركز خدمة..." -------- */ .emf-header-brand-strip{ background: color-mix(in srgb, var(--brand-primary, var(--navy)) 75%, black); color: rgba(255,255,255,.92); text-align:center; font-size: 12.5px; font-weight: 600; padding: 6px 16px; } .emf-header-brand-strip strong{ color:#fff; font-weight:800; } .emf-header-branded{ background: var(--brand-primary, var(--navy)); border-bottom: 1px solid color-mix(in srgb, var(--brand-primary, var(--navy)) 70%, black); } .emf-header-branded .emf-logo{ color:#fff; } /* ============================================================================ شارة الماركة في الهيدر — بناء جديد كليًا (v10) بمعرّف فريد منفصل تمامًا عن أي نظام سابق (emf-brand-badge-v2)، لضمان قطع أي احتمال تراكب مع قواعد أو عناصر قديمة. بنية مسطّحة: رابط واحد يحتوي span نصي واحد مباشر، بلا أي تعشيش لعناصر وسيطة قد تُخفي/تُظهر طبقات. ============================================================================ */ .emf-brand-badge-v2{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:1; min-width:0; width: fit-content; max-width: min(46vw, 420px); background-color: #FFFFFF; border: 1.5px solid rgba(10, 37, 64, .10); border-radius: 8px; padding: 6px 18px; margin-inline-start: 10px; height: 36px; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08); transition: transform .15s ease, box-shadow .15s ease; overflow: hidden; /* قصّ صارم لأي محتوى زائد داخل الحدود، يمنع أي تسرّب بصري خارج الصندوق */ position: relative; /* سياق تكديس مستقل يعزل هذا العنصر عن أي طبقات خلفه */ z-index: 2; } .emf-brand-badge-v2:hover{ transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.16); } .emf-brand-badge-v2-text{ display:block; white-space:nowrap; font-size: clamp(12px, 3.6vw, 17px); font-weight: 800; color: #0A2540; line-height: 1; } @media (max-width: 600px){ .emf-brand-badge-v2{ padding: 5px 14px; margin-inline-start: 8px; max-width: min(50vw, 320px); } .emf-brand-badge-v2-text{ font-size: clamp(11px, 4.2vw, 15px); } } @media (max-width: 400px){ .emf-brand-badge-v2{ max-width: min(54vw, 260px); padding: 5px 12px; } .emf-brand-badge-v2-text{ font-size: clamp(10px, 4.6vw, 13.5px); } } /* ============================================================================ القائمة المنسدلة للموبايل — نُظام جديد كليًا: لوحة ثابتة (fixed) تنزلق من الأعلى، بمعزل تام عن تدفق الصفحة (لا تدفع أي محتوى ولا تترك فراغًا). ============================================================================ */ .emf-mobile-drawer{ position: fixed; top: 0; right: 0; left: 0; max-height: 0; background:#fff; overflow: hidden; z-index: 300; box-shadow: 0 12px 32px rgba(0,0,0,.18); transition: max-height .32s cubic-bezier(.4,0,.2,1); } .emf-mobile-drawer.is-open{ max-height: 100vh; overflow-y:auto; } .emf-mobile-drawer-header{ display:flex; align-items:center; justify-content:space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); } .emf-mobile-drawer-title{ font-family: var(--font-display); font-weight:900; font-size:17px; color: var(--navy); } .emf-mobile-drawer-close{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; background: var(--bg-alt); border:none; cursor:pointer; color: var(--navy); flex-shrink:0; } .emf-mobile-drawer-close:hover{ background: var(--line); } .emf-mobile-drawer-list{ list-style:none; margin:0; padding: 12px 12px 24px; display:flex; flex-direction:column; gap:4px; } .emf-mobile-drawer-list a{ display:block; padding: 15px 16px; border-radius: 12px; font-weight:700; font-size:16px; color: var(--ink); transition: background .15s ease; } .emf-mobile-drawer-list a:hover, .emf-mobile-drawer-list a:active{ background: var(--bg-alt); } .emf-mobile-drawer-overlay{ display:none; position: fixed; inset:0; z-index: 290; background: rgba(15,27,43,.4); backdrop-filter: blur(2px); } .emf-mobile-drawer-overlay.is-open{ display:block; } body.emf-drawer-locked{ overflow:hidden; } @media (max-width: 960px){ .emf-primary-nav{ display:none; } .emf-mobile-toggle{ display:block; } } @media (max-width: 600px){ .emf-logo{ font-size: 15px; } .emf-logo img{ height: 36px; } body.emf-static-page .emf-logo{ font-size: 19px; } } @media (max-width: 380px){ .emf-logo{ font-size: 13px; } body.emf-static-page .emf-logo{ font-size: 17px; } .emf-lang-switch{ font-size: 11px; padding: 5px 10px; } } .emf-hero{ background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, var(--teal-deep) 130%); color:#fff; padding: 90px 0 70px; position: relative; overflow:hidden; } .emf-hero::after{ content:""; position:absolute; inset:0; background: radial-gradient(600px 300px at 85% 20%, rgba(0,168,150,.35), transparent 70%); pointer-events:none; } .emf-hero-inner{ position:relative; z-index:1; max-width: 780px; } .emf-hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); padding: 6px 16px; border-radius:999px; font-size:13px; font-weight:700; margin-bottom:20px; } .emf-hero h1{ color:#fff; font-size: clamp(28px, 4.5vw, 48px); margin-bottom: 18px; } .emf-hero p{ font-size: 18px; color: rgba(255,255,255,.85); max-width: 620px; margin-bottom: 32px; } /* شارة التقييم الاحترافية في الهيرو */ .emf-rating-badge{ display:inline-flex; align-items:center; gap:12px; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); padding: 10px 18px; border-radius: 14px; margin-bottom: 22px; backdrop-filter: blur(6px); } .emf-rating-badge-stars{ display:flex; gap:2px; color:#FFC531; flex-shrink:0; } .emf-rating-badge-text{ display:flex; flex-direction:column; line-height:1.3; } .emf-rating-badge-text strong{ color:#fff; font-size:16px; font-weight:800; } .emf-rating-badge-text span{ color: rgba(255,255,255,.7); font-size:12.5px; } @media (max-width:480px){ .emf-rating-badge{ padding:8px 14px; gap:8px; } .emf-rating-badge-stars svg{ width:16px; height:16px; } .emf-rating-badge-text strong{ font-size:14px; } .emf-rating-badge-text span{ font-size:11.5px; } } .emf-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; } .emf-hero .emf-btn-primary{ background:#fff; color: var(--navy); } .emf-hero .emf-btn-outline{ border-color: rgba(255,255,255,.5); color:#fff; } .emf-hero-stats{ display:flex; gap: 36px; margin-top: 48px; flex-wrap:wrap; position:relative; z-index:1; } .emf-stat-num{ font-family: var(--font-display); font-size: 34px; font-weight:900; color:#fff; } .emf-stat-label{ font-size: 13px; color: rgba(255,255,255,.7); } /* ---------------------------- شبكة الماركات ---------------------------- */ .emf-brands-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap: 16px; } .emf-brand-tile{ position:relative; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); padding: 16px 12px; text-align:center; transition: all .25s ease; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height: 100px; cursor:pointer; text-decoration:none; color:inherit; } .emf-brand-tile::before{ content:""; position:absolute; inset:0; opacity:0; transition: opacity .25s ease; background: linear-gradient(155deg, var(--emf-tile-primary,var(--brand-primary,#0A2540)) 0%, color-mix(in srgb, var(--emf-tile-primary,var(--brand-primary,#0A2540)) 55%, var(--emf-tile-secondary,#00A896)) 160%); } .emf-brand-tile:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; } .emf-brand-tile:hover::before{ opacity:1; } .emf-brand-tile > *{ position:relative; z-index:1; transition: all .25s ease; } .emf-brand-tile:hover .emf-brand-logo-md.emf-brand-logo-text{ background: rgba(255,255,255,.2); backdrop-filter: blur(2px); } .emf-brand-tile:hover .emf-brand-logo-md .emf-brand-fullname, .emf-brand-tile:hover .emf-brand-tile-name{ color:#fff; } .emf-brand-tile:hover .emf-brand-logo-md.emf-brand-logo-img{ background: rgba(255,255,255,.92); border-radius:8px; padding:4px 10px; } .emf-brand-tile-name{ font-weight:800; font-size:14px; color: var(--ink); letter-spacing: -0.2px; } /* ---------------------------- فلترة المدن (الرئيسية) ---------------------------- */ .emf-city-tabs{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin: 30px 0 40px; } .emf-city-tab{ padding: 10px 22px; border-radius:999px; border:2px solid var(--line); background:#fff; font-weight:700; font-size:14px; color: var(--ink-soft); transition: all .2s ease; } .emf-city-tab.is-active, .emf-city-tab:hover{ background: var(--navy); border-color: var(--navy); color:#fff; } /* ---------------------------- بطاقات المقالات/الخدمات ---------------------------- */ .emf-cards-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 24px; } .emf-card{ background:#fff; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line); transition: all .25s ease; display:flex; flex-direction:column; position: relative; } .emf-card-full-link{ position: absolute; inset: 0; z-index: 5; /* شفاف تمامًا وبلا أي محتوى مرئي — عنصر حقيقي في DOM يغطي البطاقة بالكامل، وهذا ما يقرأه Lighthouse كـ"هدف اللمس" الفعلي بدل الاعتماد فقط على توسيع بصري عبر pseudo-element. لا يُغيّر أي شيء ظاهر للعين لأنه بلا لون أو نص أو حدود. */ } .emf-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-6px); } .emf-card-img{ aspect-ratio: 3/2; overflow:hidden; background: var(--bg-alt); } .emf-card-img img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; } .emf-card:hover .emf-card-img img{ transform: scale(1.06); } .emf-card-body{ padding: 22px; display:flex; flex-direction:column; gap:10px; flex:1; } .emf-card-eyebrow{ font-size:12px; font-weight:700; color: var(--brand-secondary); text-transform:uppercase; letter-spacing:.03em; } .emf-card-title{ font-size: 19px; margin:0; } .emf-card-title a{ position:relative; } .emf-card-title a::after{ content:""; position:absolute; inset:0; } .emf-card-excerpt{ color: var(--ink-soft); font-size:14px; flex:1; } .emf-card-cta{ font-weight:700; font-size:14px; color: var(--brand-primary); display:inline-flex; align-items:center; gap:6px; } /* ---------------------------- قسم عام بعنوان ---------------------------- */ .emf-section-head{ text-align:center; max-width: 640px; margin: 0 auto 40px; } .emf-section-eyebrow{ font-size:13px; font-weight:800; color: var(--teal-deep); letter-spacing:.05em; text-transform:uppercase; margin-bottom:10px; display:block; } .emf-section-head h2{ font-size: clamp(24px,3.5vw,36px); } .emf-section-head p{ color: var(--ink-soft); font-size:16px; } /* ---------------------------- محتوى المقال العادي ---------------------------- */ .emf-single-wrap{ max-width: 1080px; margin-inline:auto; padding: 40px 20px; display:grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; } .emf-single-wrap aside{ position: sticky; top: 90px; } @media (max-width: 960px){ .emf-single-wrap{ display: block; padding: 24px 16px; } .emf-single-wrap main{ display: block; width: 100%; } .emf-single-wrap aside{ position: static; display: block; width: 100%; margin-top: 32px; } } /* ========================================================================= نظام تنسيق المحتوى — الإصدار الثاني، مبني من الصفر بالكامل ------------------------------------------------------------------------- يعتمد على: مسافات سخية، عناوين واضحة بخط عريض وخط سفلي ملوّن (بلا تعقيد بصري)، قوائم تعتمد على list-style الأصلي للمتصفح (لا نضيف عدّادًا يدويًا بـ ::before كي لا يتعارض مع أي ترقيم موجود بالفعل داخل نص المقال نفسه)، صور كبيرة تملأ عرض المقال بارتفاع سخي، وجدول بسيط وواضح بلا تعقيد. ========================================================================= */ .emf-article-header{ margin-bottom: 24px; } .emf-article-meta{ display:flex; gap:16px; flex-wrap:wrap; color: var(--ink-soft); font-size:13.5px; margin-bottom:14px; } .emf-article-title{ font-size: clamp(24px,4vw,38px); line-height:1.35; } /* صورة الغلاف — نظام مسحوب من القالب المرجعي المُختبر (post-cover-img): بلا قص (object-fit)، بلا نسبة ثابتة (aspect-ratio) — تُعرض بنسبتها الطبيعية الكاملة بعرض 100% وارتفاع تلقائي، لتفادي أي حساب خاطئ لـ object-fit مع صور بأبعاد أصلية غير متوقعة */ .emf-article-thumb{ width: 100%; display: block; overflow: hidden; line-height: 0; margin: 0 0 28px; padding: 0; background: var(--bg-alt); position: relative; border-radius: 14px; } .emf-article-thumb img{ width: 100% !important; height: auto !important; max-width: 100% !important; display: block !important; margin: 0 auto !important; padding: 0 !important; position: relative !important; } @media (max-width: 640px){ .emf-article-thumb{ border-radius: 10px; margin-bottom: 24px; } } /* ------------------------------------------------------------------------- جسم المحتوى ------------------------------------------------------------------------- */ .emf-article-content{ font-size: 16.5px; line-height: 1.9; color: var(--ink); overflow-x: hidden; max-width: 100%; word-break: break-word; overflow-wrap: break-word; } .emf-article-content *{ max-width: 100%; box-sizing: border-box; word-break: break-word; overflow-wrap: break-word; } .emf-article-content p{ margin: 0 0 1.4em; } .emf-article-content > p:first-of-type{ font-size: 1.1em; color: var(--ink-soft); font-weight: 500; } /* عناوين — خط عريض واضح بخط سفلي ملوّن بسيط، بلا خلفيات معقدة */ .emf-article-content h2{ font-size: 23px; font-weight: 800; line-height: 1.4; margin: 1.9em 0 .8em; padding-bottom: 10px; border-bottom: 3px solid var(--brand-primary, var(--navy)); color: var(--ink); } .emf-article-content h2:first-child{ margin-top:0; } .emf-article-content h3{ font-size: 19px; font-weight: 800; line-height: 1.4; margin: 1.6em 0 .6em; color: var(--brand-primary, var(--navy)); } .emf-article-content h4{ font-size: 17px; font-weight: 800; margin: 1.3em 0 .5em; color: var(--ink); } .emf-article-content a{ color: var(--brand-primary, var(--teal-deep)); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .emf-article-content strong{ color: var(--brand-primary, var(--navy)); font-weight: 800; } /* قوائم — نعتمد على ترقيم/تنقيط المتصفح الطبيعي (list-style) بدل عدّاد مخصص، لتفادي أي تعارض مع ترقيم مكتوب فعليًا داخل نص المقال */ .emf-article-content ul, .emf-article-content ol{ margin: 0 0 1.4em; padding-inline-start: 22px; } .emf-article-content ul{ list-style: disc; } .emf-article-content ol{ list-style: decimal; } .emf-article-content li{ margin-bottom: .6em; padding-inline-start: 4px; } .emf-article-content li::marker{ color: var(--brand-primary, var(--navy)); font-weight: 800; } .emf-article-content li > p{ margin-bottom: .4em; } .emf-article-content blockquote{ background: var(--brand-light, #F4F8FB); border-inline-start: 4px solid var(--brand-secondary, var(--teal)); border-radius: 10px; padding: 16px 20px; margin: 1.6em 0; color: var(--ink); font-weight: 500; } /* صور المحتوى — كبيرة وتملأ عرض المقال بالكامل (بلا تصغير قسري) */ .emf-article-content img{ border-radius: 12px; margin: 1.8em 0; display:block; width: 100%; max-width: 100%; height: auto; box-shadow: 0 4px 16px rgba(15,27,43,.10); } .emf-article-content figure{ margin: 1.8em 0; } .emf-article-content figcaption{ text-align:center; font-size: 13px; color: var(--ink-soft); margin-top: 8px; } /* ========================================================================= حماية قسرية نهائية ضد أي جدول (أو أي عنصر عريض آخر) يخرج عن حدود الشاشة هذه القاعدة عامة جدًا ومكتوبة لتفوز بالأولوية على أي تعارض CSS سابق، وتعمل بغض النظر عن بنية HTML الداخلية للجدول (thead/tbody موجودة أم لا) ========================================================================= */ .emf-article-content{ max-width: 100%; overflow-x: hidden; } /* الجدول يحتفظ ببنيته الطبيعية (table/tr/td) — فقط يُلف بحاوية قابلة للسكرول الأفقي عند الحاجة، بدل كسر عرض العناصر الداخلية وتحويلها إلى block. ملاحظة مهمة: table-layout: auto (وليس fixed) ضروري هنا — fixed كان يجبر كل الأعمدة على عرض متساوٍ بغض النظر عن طول محتواها، فينتج عمود ضيق جدًا لنص عربي طويل فيتكسر حرفًا حرفًا (شكل عمودي غير مقروء). auto يمنح كل عمود العرض الذي يحتاجه محتواه الفعلي. */ .emf-article-content table{ width: 100% !important; border-collapse: collapse !important; table-layout: auto !important; } .emf-article-content table th, .emf-article-content table td{ white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; /* يكسر عند المسافات أولاً، وليس حرفًا حرفًا */ vertical-align: top !important; padding: 10px 12px !important; border: 1px solid rgba(15,27,43,.12) !important; min-width: 110px; /* يمنع انضغاط أي عمود لعرض أقل من هذا حتى مع auto */ } /* حاوية سكرول أفقي حول الجدول (تُضاف تلقائيًا عبر functions.php أدناه) */ .emf-table-scroll{ max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.6em 0; } .emf-table-scroll table{ margin: 0 !important; min-width: 100%; } /* أُبقيت overflow-x:hidden هنا كطبقة أمان إضافية، لكن الاعتماد الفعلي أصبح على #emf-site-wrapper أعلى الملف، وهو ما يحل المشكلة فعليًا على iOS Safari */ body{ overflow-x: hidden; } html{ overflow-x: hidden; } .emf-article-content iframe, .emf-article-content video, .emf-article-content embed{ width:100%; height:auto; aspect-ratio:16/9; border-radius:12px; margin:1.8em 0; } .emf-article-content pre, .emf-article-content code{ overflow-x:auto; white-space:pre-wrap; word-break:break-word; background: var(--bg-alt); border-radius:8px; padding: 2px 6px; font-size: .92em; } .emf-widget{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); padding: 22px; margin-bottom: 24px; } .emf-widget-title{ font-size:16px; margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid var(--bg-alt); } /* صفحة عادية (page.php) */ .emf-page-wrap{ max-width: 880px; margin-inline:auto; padding: 50px 20px; } .emf-page-wrap .emf-article-content{ font-size:16.5px; } /* ---------------------------- فورم الاتصال ---------------------------- */ .emf-contact-form-wrap{ background:#fff; border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); } .emf-cf-header h3{ font-size:22px; margin-bottom:6px; } .emf-cf-header p{ color: var(--ink-soft); font-size:14px; margin-bottom:24px; } .emf-cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; } @media (max-width:520px){ .emf-cf-row{ grid-template-columns:1fr; } } .emf-cf-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; min-width:0; } .emf-cf-row .emf-cf-field{ margin-bottom:0; } .emf-cf-field label{ font-size:13px; font-weight:700; color: var(--ink-soft); } .emf-cf-field input, .emf-cf-field select, .emf-cf-field textarea{ width: 100%; max-width: 100%; box-sizing: border-box; padding: 12px 14px; border:1.5px solid var(--line); border-radius: var(--radius-sm); font-family:inherit; font-size:15px; background: var(--bg); color: var(--ink); transition: border-color .15s ease; } .emf-cf-field input:focus, .emf-cf-field select:focus, .emf-cf-field textarea:focus{ border-color: var(--brand-secondary); outline:none; background:#fff; } .emf-cf-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 8px; } .emf-cf-actions .emf-btn{ flex:1; min-width:160px; } .emf-cf-status{ margin-top:14px; font-size:14px; font-weight:600; min-height:20px; } .emf-cf-status.is-success{ color: #0A7A3D; } .emf-cf-status.is-error{ color: #B3261E; } .emf-btn.is-loading{ opacity:.7; pointer-events:none; } /* ---------------------------- الفوتر ---------------------------- */ .emf-footer{ background: var(--navy-deep); color: rgba(255,255,255,.82); padding-top: 24px; border-top: 4px solid var(--teal, #14b8a6); } .emf-footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 32px; padding-top: 36px; padding-bottom: 40px; } @media (max-width:1100px){ .emf-footer-grid{ grid-template-columns: 1fr 1fr 1fr; } } @media (max-width:720px){ .emf-footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width:480px){ .emf-footer-grid{ grid-template-columns: 1fr; } } .emf-footer-title, .emf-footer-widget h4{ color:#fff; font-size:15px; margin-bottom:18px; text-transform:uppercase; letter-spacing:.03em; position:relative; padding-bottom:10px; } .emf-footer-widget h4::after{ content:""; position:absolute; right:0; bottom:0; width:32px; height:2px; background: var(--teal, #14b8a6); } .emf-footer a{ color: rgba(255,255,255,.7); font-size:14px; transition: color .15s ease; } .emf-footer a:hover{ color:#fff; } .emf-footer-widget ul li{ margin-bottom:10px; } .emf-footer-cities{ column-count:2; column-gap:16px; } .emf-footer-cities li{ break-inside: avoid; } .emf-footer-cta{ display:inline-block; margin-top:8px; padding:9px 16px; background: var(--teal-deep, #0C8579); color:#fff !important; border-radius: 999px; font-weight:700; font-size:13px; } .emf-footer-cta:hover{ background:#fff; color: var(--navy-deep) !important; } .emf-footer-brand p{ color: rgba(255,255,255,.65); font-size:14px; margin-top:14px; max-width:320px; } .emf-footer-social{ display:flex; gap:12px; margin-top:18px; } .emf-footer-social a{ width:42px; height:42px; border-radius:50%; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.35); color:#fff; display:flex; align-items:center; justify-content:center; transition: all .2s ease; flex-shrink: 0; } .emf-footer-social a svg{ color:#fff; display:block; } .emf-footer-social a:hover{ background: var(--teal, #00A896); border-color: var(--teal, #00A896); color:#fff; transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,168,150,.35); } .emf-footer-bottom{ border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; font-size:13px; color: rgba(255,255,255,.55); } .emf-footer-bottom-inner{ display:flex; align-items:center; justify-content:center; text-align:center; } /* مجموعة الأزرار العائمة: اتصال (أعلى) + واتساب (أسفل) — يسار الشاشة فعليًا ملاحظة: استُخدمت left/right الفيزيائية صراحة بدل inset-inline-start/end لتفادي التباس الخصائص المنطقية في سياق RTL (حيث inline-start = يمين فعليًا) */ .emf-float-stack{ position: fixed; bottom: 22px; left: 18px; z-index: 999; display:flex; flex-direction:column; gap: 12px; align-items:center; } .emf-float-btn{ width: 54px; height: 54px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow: var(--shadow-lg); transition: transform .2s ease, box-shadow .2s ease; } .emf-float-btn:hover{ transform: translateY(-3px) scale(1.05); } .emf-float-call{ background: var(--navy); width: 46px; height: 46px; } .emf-float-wa{ background:#25D366; animation: emf-pulse 2.4s infinite; } @keyframes emf-pulse{ 0%{ box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70%{ box-shadow: 0 0 0 14px rgba(37,211,102,0); } 100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); } } /* سهم العودة إلى الأعلى — يمين الشاشة فعليًا، صغير وأنيق، يظهر فقط بعد التمرير */ .emf-scroll-top{ position: fixed; bottom: 22px; right: 18px; z-index: 999; width: 40px; height: 40px; border-radius:50%; background: rgba(10,37,64,.85); backdrop-filter: blur(6px); color:#fff; border: none; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-md); cursor:pointer; opacity:0; visibility:hidden; transform: translateY(14px) scale(.85); transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background .2s ease; } .emf-scroll-top.is-visible{ opacity:1; visibility:visible; transform:none; } .emf-scroll-top:hover{ background: var(--navy); } @media (max-width: 480px){ .emf-float-stack{ bottom:14px; left:12px; } .emf-float-call{ width:42px; height:42px; } .emf-float-btn.emf-float-wa{ width:50px; height:50px; } .emf-scroll-top{ bottom:14px; right:12px; width:36px; height:36px; } } /* حجز مسافة أمان أسفل محتوى المقال فقط (وليس طوله بالكامل) عشان الأزرار العائمة (اتصال/واتساب) على يسار الشاشة متتراكبش أبدًا فوق آخر الأسطر */ @media (max-width:640px){ .emf-article-content{ padding-bottom: 70px; } .emf-article-content ul, .emf-article-content ol{ padding-inline-start: 20px; } } /* منع الهيدر اللاصق (Sticky) من تغطية بداية العناوين عند التنقل عبر روابط جدول المحتويات — كل عنوان يحجز مسافة من أعلى بقدر ارتفاع الهيدر */ h2, h3, h4, .emf-article-content h2, .emf-article-content h3, .emf-article-content h4{ scroll-margin-top: 130px; } @media (max-width:640px){ h2, h3, h4, .emf-article-content h2, .emf-article-content h3, .emf-article-content h4{ scroll-margin-top: 150px; } } /* ========================================================================= صفحة الاتصال الشاملة — تبويبات، نجوم التقييم، بطاقات المعلومات ========================================================================= */ .emf-contact-page-hero{ background: linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 100%); color:#fff; padding: 60px 0 40px; text-align:center; } .emf-contact-page-hero h1{ color:#fff; font-size: clamp(26px,4vw,40px); margin-bottom:10px; } .emf-contact-page-hero p{ color: rgba(255,255,255,.8); font-size:16px; } .emf-contact-page-hero .emf-hero-eyebrow{ display:inline-flex; background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); padding:6px 16px; border-radius:999px; font-size:13px; font-weight:700; margin-bottom:16px; } .emf-contact-tabs{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom: 30px; padding: 6px; background: var(--bg-alt); border-radius: 999px; } .emf-ctab{ flex:1; min-width: 150px; display:flex; align-items:center; justify-content:center; gap:8px; padding: 12px 18px; border-radius:999px; border:none; background:transparent; font-weight:700; font-size:14px; color: var(--ink-soft); transition: all .2s ease; } .emf-ctab-icon{ font-size:16px; } .emf-ctab.is-active{ background:#fff; color: var(--navy); box-shadow: var(--shadow-sm); } .emf-ctab:hover:not(.is-active){ color: var(--navy); } .emf-ctab-panel{ display:none; } .emf-ctab-panel.is-active{ display:block; animation: emf-fade-in .25s ease; } @keyframes emf-fade-in{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } } /* نجوم التقييم */ .emf-star-rating{ display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:6px; font-size: 34px; } .emf-star-rating input{ display:none; } .emf-star-rating label{ color: #E3E8EC; cursor:pointer; transition: color .15s ease; line-height:1; } .emf-star-rating input:checked ~ label, .emf-star-rating label:hover, .emf-star-rating label:hover ~ label{ color: #FDB913; } /* بطاقات معلومات التواصل */ .emf-contact-info-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:16px; } .emf-contact-info-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); padding: 24px; text-align:center; } .emf-contact-info-card .emf-brand-feature-icon{ margin:0 auto 12px; background: var(--bg-alt); color: var(--navy); } .emf-contact-info-card h4{ font-size:14px; margin-bottom:6px; color: var(--ink-soft); } .emf-contact-info-card a, .emf-contact-info-card span{ font-weight:700; font-size:15px; color: var(--ink); } @media (max-width: 640px){ .emf-contact-tabs{ flex-direction:column; border-radius: var(--radius-md); } .emf-ctab{ width:100%; } } /* قسم "لماذا نحن + الفورم" في الصفحة الرئيسية — متجاوب بالكامل */ .emf-why-us-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; } @media (max-width: 900px){ .emf-why-us-grid{ grid-template-columns: 1fr; gap: 36px; } } /* تأمين إضافي: منع أي عنصر من تجاوز عرض الشاشة أفقيًا */ .emf-contact-form-wrap{ max-width: 100%; box-sizing: border-box; } body{ overflow-x: hidden; } /* حقل رفع الملفات في النماذج */ .emf-cf-file{ padding: 10px 14px; border:1.5px dashed var(--line); border-radius: var(--radius-sm); background: var(--bg); font-size:14px; cursor:pointer; } .emf-cf-file::file-selector-button{ padding: 8px 16px; margin-inline-end: 12px; border:none; border-radius:999px; background: var(--brand-primary, var(--navy)); color:#fff; font-weight:700; font-size:13px; cursor:pointer; } .emf-cf-file-hint{ font-size:12px; color: var(--ink-soft); margin-top:2px; } /* ============================================================================ شريط المشاركة الاجتماعية — يظهر أسفل المقالات والصفحات (6 منصات) ============================================================================ */ .emf-share-bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin: 32px 0; padding: 18px 20px; background: var(--bg-alt); border-radius: var(--radius-md); border: 1px solid var(--line); } .emf-share-label{ font-weight:700; font-size:14px; color: var(--ink); white-space:nowrap; } .emf-share-icons{ display:flex; gap:10px; flex-wrap:wrap; } .emf-share-btn{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; transition: all .2s ease; flex-shrink:0; } .emf-share-btn:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); } .emf-share-facebook{ background:#1877F2; } .emf-share-x{ background:#000; } .emf-share-whatsapp{ background:#25D366; } .emf-share-linkedin{ background:#0A66C2; } .emf-share-telegram{ background:#26A5E4; } .emf-share-email{ background: var(--navy); } .emf-share-instagram{ background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } @media (max-width: 480px){ .emf-share-bar{ padding:14px 16px; gap:10px; } .emf-share-btn{ width:34px; height:34px; } } /* شريط المشاركة داخل الفوتر الداكن — تكيّف الألوان مع الخلفية الداكنة */ .emf-footer .emf-share-bar{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); margin: 0 0 8px; } .emf-footer .emf-share-label{ color: rgba(255,255,255,.85); } /* ============================================================================ صفحة الأسئلة الشائعة — أكورديون قابل للطي ============================================================================ */ .emf-faq-list{ display:flex; flex-direction:column; gap:12px; } .emf-faq-item{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; transition: border-color .2s ease; } .emf-faq-item.is-open{ border-color: var(--brand-primary, var(--teal)); } .emf-faq-question{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; background:none; border:none; cursor:pointer; text-align:start; padding: 18px 20px; font-weight:700; font-size:16px; color: var(--navy); } .emf-faq-icon{ flex-shrink:0; transition: transform .25s ease; color: var(--ink-soft); } .emf-faq-item.is-open .emf-faq-icon{ transform: rotate(180deg); color: var(--brand-primary, var(--teal)); } .emf-faq-answer{ max-height:0; overflow:hidden; transition: max-height .3s ease; } .emf-faq-item.is-open .emf-faq-answer{ max-height: 400px; } .emf-faq-answer p{ padding: 0 20px 20px; margin:0; color: var(--ink-soft); line-height:1.8; font-size:15px; } /* حماية ضد فراغ أبيض كبير مؤقت قد تُدرجه إضافات خارجية (تحليلات، نماذج، كاش) عبر wp_footer() قبل اكتمال تهيئتها بجافاسكريبت. يمنع أي عنصر مباشر بعد الفوتر من التمدد لارتفاع غير محسوب مؤقتًا، دون إخفاء محتواه الفعلي بعد اكتمال التحميل. */ body > *:not(#emf-site-wrapper){ max-height: none; } #emf-site-wrapper ~ div:empty, #emf-site-wrapper ~ iframe[style*="height"]:not([src]){ max-height: 0 !important; overflow: hidden !important; } /* ---------------------------- مقالات ذات صلة (Related Blogs) ---------------------------- */ .emf-related-posts{ margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--line); } .emf-related-posts-title{ font-size: 20px; font-weight: 900; color: var(--ink); margin-bottom: 20px; display:flex; align-items:center; gap:10px; } .emf-related-posts-title::before{ content:""; width:4px; height:22px; border-radius:4px; background: var(--emf-related-primary, var(--teal)); display:inline-block; } /* قائمة عمودية (وليست شبكة): كل مقال في سطر مستقل بالترتيب من الأعلى للأسفل، مع صورة مصغّرة على الجانب والعنوان كاملاً ظاهرًا بلا اقتطاع. */ .emf-related-posts-grid{ display:flex; flex-direction:column; gap: 12px; } .emf-related-post-card{ display:flex; flex-direction:row; align-items:center; gap:16px; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; transition: all .2s ease; padding: 10px; } .emf-related-post-card:hover{ box-shadow: var(--shadow-md); border-color: var(--emf-related-primary, var(--teal)); background: var(--bg-soft, #fafbfc); } .emf-related-post-thumb{ width: 110px; height: 78px; flex-shrink:0; border-radius: 8px; overflow:hidden; background: var(--bg-soft, #f4f6f8); display:flex; align-items:center; justify-content:center; } .emf-related-post-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .3s ease; } .emf-related-post-card:hover .emf-related-post-thumb img{ transform: scale(1.06); } .emf-related-post-thumb-fallback{ display:flex; align-items:center; justify-content:center; } .emf-related-post-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; } .emf-related-post-date{ font-size: 12px; color: var(--ink-soft); } .emf-related-post-title{ font-size: 15px; font-weight: 800; color: var(--ink); line-height:1.5; /* بلا اقتطاع: العنوان الكامل يظهر ويلتف على أكثر من سطر عند الحاجة */ white-space: normal; overflow: visible; display: block; } @media (max-width: 640px){ .emf-related-post-thumb{ width: 84px; height: 64px; } .emf-related-post-title{ font-size: 14px; } }