/* ========================================================================= Emiratefix — نظام التصميم الأساسي خط: Cairo (عناوين) + IBM Plex Sans Arabic (نصوص) ========================================================================= */ /* ------------------------------------------------------------------------- حل جذري وشامل لمشكلة "النقرة المزدوجة/التأخير" على كل روابط الموقع ----------------------------------------------------------------------- المشكلة: متصفحات اللمس (خصوصًا iOS Safari) تحاكي حالة :hover عند أول لمسة على أي عنصر تفاعلي، فتحتاج نقرة ثانية لتنفيذ الانتقال الفعلي. بعض المتصفحات القديمة تضيف أيضًا تأخير ~300ms قبل تنفيذ أي نقرة بحثًا عن نقرة مزدوجة (لغرض التكبير بالإصبع)، وهذا تأخير منفصل يُشعر المستخدم وكأن الرابط "لا يعمل من أول ضغطة". محاولة سابقة استخدمت "all: revert" على قواعد :hover محددة، لكنها كانت تُرجع عناصر مثل أزرار المدن لتنسيق المتصفح الافتراضي البدائي (لون أزرق + underline بلا خلفية) بدل تنسيق الثيم — تم حذفها نهائيًا من هذا الملف ومن brand-page.css. الحل الصحيح والدائم أدناه لا يلمس أي خاصية بصرية: 1. touch-action: manipulation — الحل المعياري الرسمي (CSS Working Group) لإلغاء تأخير 300ms ومنع محاكاة الزوم بنقرة مزدوجة على كل عنصر رابط. هذا وحده يحل الغالبية العظمى من مشاكل "يحتاج ضغطتين" في iOS/Android. 2. -webkit-tap-highlight-color — بديل مرئي هادئ (لمسة تيل خفيفة) بدل وميض التظليل الافتراضي الرمادي/الأزرق الذي يعطي إحساسًا بعدم استجابة. 3. a:active — استجابة فورية بصريًا (تعتيم خفيف) تؤكد للمستخدم أن اللمسة سُجِّلت، وهذا وحده كافٍ لإقناع iOS Safari بعدم دخول وضع hover. ينطبق هذا تلقائيًا على كل بالموقع مهما كان كلاسه (بما فيها روابط المدن، الفوتر، بطاقات المقالات emf-card-full-link، بلاطات الماركات emf-brand-tile، وأي رابط جديد يُضاف مستقبلًا)، فلا حاجة لتعداد كل كلاس يدويًا — a هي القاعدة الجامعة الآمنة. ------------------------------------------------------------------------- */ a, button, .emf-btn{ touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,168,150,.15); cursor: pointer; } a:active, button:active, .emf-btn:active{ opacity: .85; } /* ------------------------------------------------------------------------- إخفاء جدول المحتويات (TOC) في كل مكان عدا المقالات والصفحات العادية ----------------------------------------------------------------------- الـ TOC لا يأتي من كود الثيم بل يُحقَن تلقائيًا عبر إضافة SEO خارجية (مثل Rank Math أو Easy Table of Contents)، لذلك لا يوجد ملف PHP واحد نُعدّله لمنعه. الحل: إخفاؤه افتراضيًا في كل الموقع عبر CSS، ثم إظهاره حصريًا حين يحمل كلاس "page" (صفحة عادية page.php) أو "single-post"/"single" (مقالة single.php) — وهما الكلاسان اللذان يضيفهما ووردبريس تلقائيًا عبر body_class() الموجودة في header.php. تصحيح مهم: القوالب الرسمية المخصصة في هذا الثيم (About Us, Contact, FAQ, Services — كل ما فيه "Template Name:" في أعلى ملفه) تحمل كلاس "page" أيضًا لأنها صفحات WordPress حقيقية تقنيًا، فكانت تستفيد خطأً من قاعدة الإظهار أعلاه. الاستثناء أدناه يغطي *كل* كلاسات TOC المعروفة دفعة واحدة (بدل تعداد كل كلاس على حدة، وهو ما كان يفوّت كلاسات فعلية مثل easy-toc-container سابقًا) عبر selector عام واحد لكل قالب رسمي. */ .rank-math-toc-wrapper, .rank-math-toc-wrap, .ez-toc-container, .easy-toc-container, .wp-block-easy-toc, .toc-container, #toc_container, .lwptoc, .mv-create-toc, [id^="ez-toc-container"]{ display: none !important; } body.page :is( .rank-math-toc-wrapper, .rank-math-toc-wrap, .ez-toc-container, .easy-toc-container, .wp-block-easy-toc, .toc-container, #toc_container, .lwptoc, .mv-create-toc, [id^="ez-toc-container"] ), body.single-post :is( .rank-math-toc-wrapper, .rank-math-toc-wrap, .ez-toc-container, .easy-toc-container, .wp-block-easy-toc, .toc-container, #toc_container, .lwptoc, .mv-create-toc, [id^="ez-toc-container"] ), body.single :is( .rank-math-toc-wrapper, .rank-math-toc-wrap, .ez-toc-container, .easy-toc-container, .wp-block-easy-toc, .toc-container, #toc_container, .lwptoc, .mv-create-toc, [id^="ez-toc-container"] ){ display: revert !important; } /* استثناء شامل: أي قالب رسمي مخصص (page-template-*) — About Us, Contact, FAQ, Services، وأي قالب مستقبلي فيه "Template Name:" — يبقى TOC مخفيًا فيه رغم كلاس "page"، لأنه ليس محتوى صفحة عادي حسب طلب العميل. */ body[class*="page-template-template-"] :is( .rank-math-toc-wrapper, .rank-math-toc-wrap, .ez-toc-container, .easy-toc-container, .wp-block-easy-toc, .toc-container, #toc_container, .lwptoc, .mv-create-toc, [id^="ez-toc-container"] ){ display: none !important; } :root{ --ink: #0F1B2B; --ink-soft: #1F2937; --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: 'Poppins', 'Segoe UI', Tahoma, Arial, sans-serif; --font-body: 'Inter', 'Segoe UI', Tahoma, Arial, 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: ltr; text-align: left; } /* ========================================================================= الحل الجذري لمشكلة "الخط/الشريط الأبيض" على الحافة السبب الحقيقي: 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: var(--brand-primary-text, #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: 23px; 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: 27px; font-weight: 900; /* bold، مطابق للوزن الحالي، مؤكَّد صراحة */ } /* -------- القائمة الرئيسية (سطح المكتب: أفقية دائمة الظهور) -------- */ .emf-primary-nav{ flex: 1 1 auto; min-width: 0; } .emf-primary-nav-list{ display:flex; flex-direction: row; 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-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; } /* -------- زر شريط "أنت الآن في مركز خدمة..." -------- */ .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-static{ cursor: default; opacity: .92; } .emf-brand-badge-v2-static:hover{ transform: none; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08); } .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 !important; top: 0 !important; inset-inline: 0 !important; max-height: 100vh; background:#fff; overflow-y: auto; z-index: 300; box-shadow: 0 12px 32px rgba(0,0,0,.18); width: 100% !important; transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .28s ease, visibility 0s linear .32s; } .emf-mobile-drawer.is-open{ transform: translateY(0); opacity: 1; visibility: visible; transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .28s ease, visibility 0s linear 0s; } .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 !important; margin:0 !important; padding: 12px 12px 24px !important; display:flex !important; flex-direction:column !important; gap:4px !important; text-align: left !important; width: 100% !important; } .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 !important; } .emf-mobile-toggle{ display:block !important; } } @media (max-width: 600px){ .emf-logo{ font-size: 19px; } .emf-logo img{ height: 36px; } body.emf-static-page .emf-logo{ font-size: 23px; } } @media (max-width: 380px){ .emf-logo{ font-size: 17px; } body.emf-static-page .emf-logo{ font-size: 21px; } .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{ background: var(--navy); border-color: var(--navy); color:#fff; } .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-primary-text-safe, var(--navy)); 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-text-safe, var(--navy)); 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; } } /* ------------------------------------------------------------------------- جسم المحتوى ------------------------------------------------------------------------- */ /* ========================================================================= تنسيق محتوى المقال — نظام موحّد بأولوية قسرية (!important) ------------------------------------------------------------------------- المشكلة التي يحلّها هذا القسم: نصوص مقالات قديمة/مستوردة تحتوي تنسيقًا يدويًا عشوائيًا مكتوبًا مباشرة داخل الـHTML (مثل أو )، ما يجعل الصفحة تبدو "صاخبة" بصريًا بألوان متضاربة بلا نظام. القواعد أدناه تفرض هوية بصرية موحدة تتغلب على أي تنسيق inline موجود بالفعل داخل النص، بلا حاجة لتعديل محتوى أي مقال يدويًا في قاعدة البيانات. ========================================================================= */ .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; } /* فرض لون نص موحد على كل عنصر نصي عادي بالمحتوى، بصرف النظر عن أي لون inline مكتوب مسبقًا (style="color:...") أو أي وسم / قديم. العناوين H1-H6 مستثناة عمدًا هنا وتُنسَّق بقواعد منفصلة أدناه. */ .emf-article-content p, .emf-article-content li, .emf-article-content td, .emf-article-content th, .emf-article-content span, .emf-article-content font, .emf-article-content div{ color: var(--ink) !important; background-color: transparent !important; } .emf-article-content p{ margin: 0 0 1.4em; } .emf-article-content > p:first-of-type{ font-size: 1.1em; color: #1F2937 !important; font-weight: 500; opacity: 1 !important; } /* تدرّج ألوان واضح ومقصود للعناوين فقط (H1-H6) — كل مستوى بلون ووزن مختلف بوضوح، ليبقى العنوان هو العنصر البصري المميّز الوحيد بالصفحة بدل تنافس عشرات العبارات الحمراء المتفرقة على انتباه القارئ. ───────────────────────────────────────────────────────────────── FIX (2026-07-11) — إصلاح جذري لمشكلة عناوين مختفية تمامًا المشكلة المكتشفة فعليًا: h2/h3 كانا يستخدمان --brand-primary/ --brand-secondary مباشرة كلون *نص* على خلفية بيضاء ثابتة. هذان المتغيران مصمَّمان أصلًا لاستخدام مختلف تمامًا (لون *خلفية* أزرار/ شارات، حيث يُختار نص أبيض أو أسود تلقائيًا فوقهما بدالة تباين منفصلة). فحص شامل لكل الـ64 ماركة كشف أن 28 ماركة (Whirlpool، Hitachi، Panasonic، Ariston، Indesit، Rheem، General Electric...) لديها secondary = #FFFFFF (أبيض تام) — فيصير h3 نصًا أبيض على خلفية بيضاء، أي *مختفٍ تمامًا* وليس فقط باهتًا (تباين 1.00:1، أسوأ حالة ممكنة). ماركات أخرى (Daikin، Siemens، Carrier، Trane...) عندها ألوان زاهية فاتحة تفشل معيار WCAG كنص (أقل من 4.5:1) رغم أنها ممتازة كخلفية. الحل: عناوين h2/h3 تستخدم الآن --ink الثابت الغامق دائمًا (نفس لون النص العادي في الموقع)، مع الاحتفاظ بلون الماركة فقط في العناصر الزخرفية الآمنة (border-bottom لـh2) التي لا تحتاج تبايناً كنص. هذا يضمن قراءة كل عنوان في كل مقال على كل صفحة ماركة، بلا استثناء، بصرف النظر عن أي لون ماركة حالي أو مستقبلي. ───────────────────────────────────────────────────────────────── */ .emf-article-content h1{ font-size: 27px; font-weight: 900; line-height: 1.35; margin: 0 0 .8em; color: var(--ink) !important; } .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) !important; } .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(--ink) !important; } .emf-article-content h4{ font-size: 17px; font-weight: 700; margin: 1.3em 0 .5em; color: var(--ink) !important; } .emf-article-content h5{ font-size: 16px; font-weight: 700; margin: 1.2em 0 .4em; color: var(--ink) !important; } .emf-article-content h6{ font-size: 15px; font-weight: 700; margin: 1.1em 0 .4em; color: var(--ink) !important; text-transform: uppercase; letter-spacing: .3px; } /* الروابط الفعلية ( حقيقية تودّي لمكان ما) وحدها تحمل لون هوية الماركة — هي العنصر الوحيد المسموح له بالتمايز عن لون النص الموحّد، لأن الرابط يحتاج إشارة بصرية واضحة أنه قابل للنقر. */ .emf-article-content a{ color: var(--brand-primary-text-safe, var(--navy)) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* التأكيد (bold) داخل الفقرات: وزن الخط فقط بلا أي تغيير لون، لتفادي تحوّل كل كلمة "عريضة" بالنص القديم إلى بقعة لونية منفصلة عن السياق. */ .emf-article-content strong, .emf-article-content b{ color: inherit !important; 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) !important; border-inline-start: 4px solid var(--brand-secondary, var(--teal)); border-radius: 10px; padding: 16px 20px; margin: 1.6em 0; color: var(--ink) !important; font-weight: 500; } .emf-article-content blockquote *{ color: var(--ink) !important; } /* صور المحتوى — كبيرة وتملأ عرض المقال بالكامل (بلا تصغير قسري) */ .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 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; } /* لينك تبديل اللغة داخل عمود الفوتر — بشكل بارز يشبه chip/زر خفيف، بدل رابط نصي عادي، عشان يبرز كإجراء وليس كعنصر قائمة تقليدي. */ .emf-footer-lang-link{ display:inline-flex; align-items:center; gap:8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 9px 16px; font-weight:700; font-size:13.5px; color:#fff !important; white-space: nowrap; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .emf-footer-lang-link:hover{ background: var(--teal-deep, #0C8579); border-color: var(--teal-deep, #0C8579); transform: translateY(-2px); } .emf-footer-lang-icon{ font-size:15px; line-height:1; } .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: var(--brand-primary-text, #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; } /* ------------------- قسم "مزيد من الخدمات" أسفل المقال (SEO) ------------------- */ .emf-more-services{ margin-top: 28px; padding: 18px 20px; background: color-mix(in srgb, var(--emf-more-services-primary, #0A2540) 6%, #FFFFFF); border-inline-start: 3px solid var(--emf-more-services-primary, #0A2540); border-radius: 8px; } .emf-more-services-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .emf-more-services-link{ display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--emf-more-services-primary, #0A2540); text-decoration: none; } .emf-more-services-link:hover{ text-decoration: underline; } /* ---------------------------- مقالات ذات صلة (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; } }