@charset "utf-8";
/* ==========================================================================
ملاذ الأمل للإنتاج الفني — Mlath Design System v2 — الهوية الرسمية
--------------------------------------------------------------------------
ملف واحد يحلّ محل: custom.css + mlath-ui.css + mlath-glass.css
يُحمَّل بعد bootstrap و tx_firefly، ويُنسّق DOM جوملا القائم كما هو.
الخطوط المطلوبة في قبل هذا الملف:
الوضع الافتراضي نهاري ببنفسجي ملاذ الأمل وخطّ Cairo — أي الهوية الرسمية.
الوضع الليلي خيار يُفعَّل بإضافة الصنف .dark على .
========================================================================== */
/* ==========================================================================
1. الرموز — مصدر واحد للحقيقة
========================================================================== */
/* الهوية الرسمية هي الأصل: بنفسجي ملاذ الأمل على خلفية فاتحة، وخطّ Cairo.
الوضع الليلي خيار ثانوي، وبألوانكم أنتم لا بألوان مُستحدَثة. */
:root {
color-scheme: light;
/* --- لوحة العلامة الرسمية --- */
--ml-purple: #8B3C8D; /* اللون الأساسي */
--ml-purple-dk: #6B2D6D;
--ml-purple-lt: #B865BA;
--ml-ink: #303842; /* لون النصّ الأساسي في صفحاتكم */
/* --- الرموز الدلالية (النهاري = الافتراضي) --- */
--ml-bg: #FFFFFF;
--ml-bg-alt: #F6F6F7; /* محايد — لتناوب الأقسام، لا بنفسجي */
--ml-bg-raised: #FFFFFF;
--ml-surface: #FFFFFF;
--ml-surface-2: #F7F7F8;
--ml-surface-3: #EFEFF1;
--ml-line: #E4E4E8; /* الحدّ الافتراضي محايد */
--ml-line-soft: #EDEDF0;
--ml-line-strong: rgba(139, 60, 141, .30);
--ml-line-brand: #E9DCEB; /* حدّ بنفسجي — للتمييز وحده */
--ml-text: #303842; /* 11.4:1 على الأبيض */
--ml-text-2: #555555; /* 7.5:1 */
--ml-text-3: #767078; /* 4.9:1 */
--ml-text-on-brand: #FFFFFF; /* 6.9:1 على البنفسجي */
--ml-accent: #8B3C8D; /* 6.9:1 على الأبيض */
--ml-accent-soft: rgba(139, 60, 141, .09);
--ml-brand: #8B3C8D;
--ml-brand-solid: #8B3C8D;
--ml-brand-soft: rgba(139, 60, 141, .10);
--ml-success: #1E7A4C;
--ml-danger: #B03A22;
--ml-success-line: rgba(30, 122, 76, .40);
--ml-success-soft: rgba(30, 122, 76, .10);
--ml-danger-line: rgba(176, 58, 34, .40);
--ml-danger-soft: rgba(176, 58, 34, .09);
/* --- الأبعاد --- */
--ml-r-sm: 8px;
--ml-r: 14px;
--ml-r-lg: 20px;
--ml-r-xl: 26px;
--ml-r-pill: 50px;
--ml-gutter: clamp(18px, 4.2vw, 34px);
--ml-page: 1180px;
--ml-page-narrow: 900px;
--ml-section-y: clamp(60px, 8vw, 118px);
/* --- الظلال --- */
--ml-shadow-sm: 0 2px 12px rgba(96, 39, 106, .07);
--ml-shadow: 0 12px 45px rgba(96, 39, 106, .10);
--ml-shadow-lg: 0 28px 76px rgba(96, 39, 106, .14);
--ml-glow: 0 0 0 1px rgba(139, 60, 141, .18), 0 10px 30px rgba(139, 60, 141, .16);
/* --- الحركة --- */
--ml-ease: cubic-bezier(.22, .61, .36, 1);
--ml-ease-in-out: cubic-bezier(.65, .05, .36, 1);
--ml-t-fast: .18s;
--ml-t: .34s;
--ml-t-slow: .7s;
/* --- الخطّ الرسمي --- */
--ml-font: Cairo, "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont,
"Segoe UI", system-ui, sans-serif;
--ml-font-display: var(--ml-font);
--ml-header-h: 74px;
}
/* --- الوضع الليلي: ألوانكم أنتم، المأخوذة من صفحاتكم الحالية --- */
html.dark {
color-scheme: dark;
--ml-bg: #171220;
--ml-bg-alt: #1C1626;
--ml-bg-raised: #241B2E;
--ml-surface: #241B2E;
--ml-surface-2: #2A2135;
--ml-surface-3: #342A40;
--ml-line: #322B3C;
--ml-line-soft: #29222F;
--ml-line-strong: rgba(201, 143, 203, .38);
--ml-line-brand: #3B2C44;
--ml-text: #ECE5F1; /* 13.6:1 على #171220 */
--ml-text-2: #B9AEC4; /* 8.4:1 — نفس لون نصّكم الليلي */
--ml-text-3: #8A7D95; /* 4.8:1 */
--ml-text-on-brand: #FFFFFF;
--ml-accent: #C98FCB; /* 7.5:1 — نفس لون عناوينكم الليلية */
--ml-accent-soft: rgba(201, 143, 203, .13);
--ml-brand: #C98FCB;
--ml-brand-solid: #8B3C8D;
--ml-brand-soft: rgba(201, 143, 203, .14);
--ml-success: #6FCF97;
--ml-danger: #F1836F;
--ml-success-line: rgba(111, 207, 151, .45);
--ml-success-soft: rgba(111, 207, 151, .12);
--ml-danger-line: rgba(241, 131, 111, .45);
--ml-danger-soft: rgba(241, 131, 111, .12);
--ml-shadow-sm: 0 2px 10px rgba(0, 0, 0, .3);
--ml-shadow: 0 14px 44px rgba(0, 0, 0, .42);
--ml-shadow-lg: 0 30px 90px rgba(0, 0, 0, .55);
--ml-glow: 0 0 0 1px rgba(201, 143, 203, .22), 0 10px 30px rgba(139, 60, 141, .22);
}
/* توافق خلفي: أي كود متبقٍّ يضيف .dark لا يكسر شيئًا (الداكن هو الأصل). */
html.dark { color-scheme: dark; }
/* على الأرضية العاجية لا يكفي الحدّ وحده لفصل البطاقة — تحتاج ظلًّا خفيفًا */
html:not(.dark) .qx-element-blurb,
html:not(.dark) .ml-card,
html:not(.dark) .ml-feature,
html:not(.dark) .ml-cta,
html:not(.dark) .qx-element-contact-form,
html:not(.dark) .inv-edit.front-end-edit,
html:not(.dark) #ml-pay-section .qx-container,
html:not(.dark) .t3-footer nav.mlath-services a { box-shadow: var(--ml-shadow-sm) !important; }
/* ==========================================================================
2. الأساس
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--ml-header-h) + 16px);
}
body {
margin: 0;
background: var(--ml-bg);
color: var(--ml-text);
font-family: var(--ml-font);
font-size: clamp(15px, 1.02vw + 12px, 17px);
font-weight: 400;
line-height: 1.85;
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/* توهّج خافت ثابت خلف الصفحة كلها — يمنع «الفراغ الميت» */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(52vw 40vw at 80% -10%, rgba(139, 60, 141, .13), transparent 62%);
}
html:not(.dark) body::before {
background:
radial-gradient(52vw 40vw at 80% -10%, rgba(139, 60, 141, .045), transparent 62%);
}
.t3-wrapper,
#t3-header,
#t3-footer { position: relative; z-index: 1; }
img,
svg,
video,
iframe { max-width: 100%; }
img,
svg { height: auto; vertical-align: middle; }
hr {
border: 0;
border-top: 1px solid var(--ml-line-soft);
margin: 0;
}
::selection {
background: var(--ml-accent);
color: var(--ml-text-on-brand);
}
:focus-visible {
outline: 2px solid var(--ml-accent);
outline-offset: 3px;
border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }
/* --- الطباعة --- */
h1, h2, h3, h4, h5, h6,
.qx-blurb-title,
.mlath-footer-heading {
color: var(--ml-text);
font-weight: 600;
line-height: 1.32;
letter-spacing: 0;
margin: 0 0 .55em;
text-wrap: balance;
}
/* الخطّ الرسمي واحد لكل المستويات — Cairo، كما في هويّتكم. */
h1, h2, h3, h4, h5, h6,
.qx-blurb-title, .mlath-footer-heading, .ml-since,
.qx-element-number-counter .qx-nc-number { font-family: var(--ml-font); }
h1, h2, .ml-h1, .ml-h2 { font-weight: 700; }
h1, .ml-h1 { font-size: clamp(2.25rem, 5.6vw, 4.1rem); line-height: 1.24; }
h2, .ml-h2 { font-size: clamp(1.8rem, 3.7vw, 2.9rem); line-height: 1.28; }
h3, .ml-h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
h4 { font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
h5, h6 { font-size: 1rem; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
a {
color: var(--ml-brand);
text-decoration: none;
transition: color var(--ml-t-fast) var(--ml-ease);
}
a:hover,
a:focus-visible { color: var(--ml-accent); }
strong, b { font-weight: 600; color: var(--ml-text); }
small { font-size: .85em; }
/* الأرقام اللاتينية داخل نصّ عربي تبقى LTR وبأرقام جدولية */
bdi,
.ml-num,
[dir="ltr"] {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* عنوان مخفي بصريًا لكنه مقروء للقارئ الآلي */
.sr-only-seo,
.ml-sr {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
3. بدائل التخطيط — تحييد شبكة Bootstrap 3 العائمة
========================================================================== */
.qx-container,
.ml-container,
#t3-header > .container,
.t3-footer .container {
width: 100% !important;
max-width: var(--ml-page);
margin-inline: auto;
padding-inline: var(--ml-gutter);
}
.qx-section {
position: relative;
padding-block: var(--ml-section-y) !important;
background: transparent !important;
box-shadow: none !important;
transform: none !important;
transition: none;
overflow: clip;
}
/* إلغاء الشكل المائل القديم خلف قسم العدّادات */
#qx-section-991126::before { display: none !important; }
.qx-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(22px, 3.4vw, 44px);
margin-inline: 0 !important;
}
.qx-column {
float: none !important;
height: auto !important;
width: auto;
flex: 1 1 300px;
min-width: 0;
margin-bottom: 0 !important;
padding-inline: 0 !important;
text-align: start;
}
/* الأعمدة الفارغة في القالب القديم كانت حشوًا للتباعد فقط */
.qx-column:empty { display: none !important; }
/* عمود مركزي محدود العرض — يمنع تمدّد السطر وترك نصف القسم فارغًا */
.qx-column.ml-col-center {
flex: 1 1 100%;
max-width: 64ch;
margin-inline: auto;
text-align: center;
}
.ml-col-center .ml-eyebrow { justify-content: center; }
.ml-col-center h2,
.ml-col-center h3,
.ml-col-center p { text-align: center !important; margin-inline: auto; }
.ml-col-center p { max-width: 56ch; }
.qx-element { margin-bottom: 0; }
.qx-element-space { display: none !important; }
/* ==========================================================================
4. الترويسة والتنقّل
========================================================================== */
#t3-header.t3-header {
position: sticky;
top: 0;
z-index: 60;
padding: 0;
min-height: var(--ml-header-h);
background: var(--ml-bg);
border-bottom: 1px solid var(--ml-line-soft);
box-shadow: none;
transition: border-color var(--ml-t) var(--ml-ease),
box-shadow var(--ml-t) var(--ml-ease);
}
#t3-header.ml-stuck {
border-bottom-color: var(--ml-line);
box-shadow: var(--ml-shadow-sm);
}
#t3-header > .container {
display: flex;
align-items: center;
gap: 18px;
min-height: var(--ml-header-h);
}
#logo.logo-image {
margin: 0;
padding: 0;
display: flex;
align-items: center;
order: -1;
}
#logo a { display: block; line-height: 0; }
.logo-img,
.mlath-site-logo {
width: auto !important;
height: clamp(30px, 3.4vw, 40px);
transition: opacity var(--ml-t-fast) var(--ml-ease);
}
#logo a:hover .logo-img { opacity: .82; }
/* الشعار مرسوم لخلفية فاتحة — نعكسه للوضع الداكن */
html.dark .logo-img,
html.dark .mlath-footer-logo { filter: brightness(0) invert(1) opacity(.94); }
.site-slogan { display: none; }
#t3-mainnav.t3-mainnav {
margin: 0;
padding: 0;
border: 0;
background: none;
min-height: 0;
flex: 1 1 auto;
display: flex;
justify-content: flex-end;
}
.t3-navbar,
.t3-navbar-collapse {
float: none !important;
padding: 0;
border: 0;
box-shadow: none;
}
.t3-megamenu { width: 100%; }
ul.nav.navbar-nav.level0 {
display: flex;
align-items: center;
gap: 4px;
float: none !important;
margin: 0;
padding: 0;
list-style: none;
}
ul.nav.navbar-nav.level0 > li { float: none !important; }
.navbar-default .navbar-nav > li > a,
ul.nav.navbar-nav.level0 > li > a {
position: relative;
display: block;
padding: 9px 15px;
font-family: var(--ml-font);
font-size: .95rem;
font-weight: 500;
line-height: 1.4;
color: var(--ml-text-2);
background: none;
border-radius: var(--ml-r-pill);
transition: color var(--ml-t-fast) var(--ml-ease),
background-color var(--ml-t-fast) var(--ml-ease);
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
ul.nav.navbar-nav.level0 > li > a:hover {
color: var(--ml-text);
background: var(--ml-surface-2);
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .current > a,
ul.nav.navbar-nav.level0 > li.active > a,
ul.nav.navbar-nav.level0 > li.current > a {
color: var(--ml-accent);
background: var(--ml-accent-soft);
}
/* الشريط العلوي القديم فوق العنصر النشط */
.header1-logo-left .navbar-default .navbar-nav > .active::before { display: none !important; }
/* --- أدوات الترويسة (وضع/لغة/واتساب) --- */
.ml-header-tools {
display: flex;
align-items: center;
gap: 8px;
margin-inline-start: auto;
}
#t3-header .ml-header-tools { order: 9; }
.ml-tool-btn {
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
padding: 0;
border: 1px solid var(--ml-line-soft);
border-radius: 50%;
background: var(--ml-surface);
color: var(--ml-text-2);
font-family: var(--ml-font);
font-size: .78rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: color var(--ml-t-fast) var(--ml-ease),
border-color var(--ml-t-fast) var(--ml-ease),
background-color var(--ml-t-fast) var(--ml-ease),
transform var(--ml-t-fast) var(--ml-ease);
}
.ml-tool-btn:hover {
color: var(--ml-accent);
border-color: var(--ml-line-strong);
background: var(--ml-accent-soft);
transform: translateY(-1px);
}
.ml-tool-btn svg { width: 17px; height: 17px; }
/* شارة واتساب في الترويسة */
.ml-header-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
border-radius: var(--ml-r-pill);
background: linear-gradient(135deg, var(--ml-purple-lt), var(--ml-purple));
color: var(--ml-text-on-brand) !important;
font-size: .9rem;
font-weight: 600;
white-space: nowrap;
box-shadow: var(--ml-shadow-sm);
transition: transform var(--ml-t-fast) var(--ml-ease),
box-shadow var(--ml-t-fast) var(--ml-ease);
}
.ml-header-cta:hover {
color: var(--ml-text-on-brand) !important;
transform: translateY(-1px);
box-shadow: var(--ml-glow);
}
.ml-header-cta svg { width: 17px; height: 17px; }
/* --- زرّ القائمة على الجوال --- */
.navbar-toggle,
.off-canvas-toggle {
display: none;
width: 40px;
height: 40px;
margin: 0;
padding: 0;
border: 1px solid var(--ml-line-soft) !important;
border-radius: 50%;
background: var(--ml-surface) !important;
position: relative;
}
.navbar-toggle::before,
.navbar-toggle::after,
.navbar-toggle > .ml-bar {
content: "";
position: absolute;
inset-inline: 11px;
height: 1.5px;
border-radius: 2px;
background: var(--ml-text);
transition: transform var(--ml-t) var(--ml-ease), opacity var(--ml-t) var(--ml-ease);
}
.navbar-toggle::before { top: 14px; }
.navbar-toggle::after { bottom: 14px; }
.navbar-toggle > .ml-bar { top: 50%; margin-top: -.75px; }
.navbar-toggle[aria-expanded="true"]::before { transform: translateY(5px) rotate(45deg); }
.navbar-toggle[aria-expanded="true"]::after { transform: translateY(-5px) rotate(-45deg); }
.navbar-toggle[aria-expanded="true"] > .ml-bar { opacity: 0; }
.off-canvas-toggle,
#t3-off-canvas { display: none !important; }
@media (max-width: 900px) {
/* اللوحة مطلقة الموضع فلا تدخل في تدفّق الفليكس — الترويسة تبقى سطرًا واحدًا */
.navbar-toggle { display: block; }
#t3-mainnav.t3-mainnav { order: 9; flex: 0 0 auto; }
.ml-header-tools { order: 8; margin-inline-start: auto; }
/* اللوحة تنسدل أسفل شريط الترويسة كاملة العرض بدل أن تزاحم الشعار */
.t3-navbar {
position: absolute;
inset-inline: 0;
top: 100%;
display: none;
max-height: calc(100svh - var(--ml-header-h));
overflow-y: auto;
padding: 12px var(--ml-gutter) 20px;
background: var(--ml-bg-alt);
border-bottom: 1px solid var(--ml-line);
box-shadow: var(--ml-shadow);
}
.t3-navbar.ml-open { display: block; }
ul.nav.navbar-nav.level0 {
flex-direction: column;
align-items: stretch;
gap: 2px;
}
ul.nav.navbar-nav.level0 > li > a {
padding: 14px 16px;
border-radius: var(--ml-r-sm);
font-size: 1rem;
}
}
/* ==========================================================================
5. الأزرار والحقول
========================================================================== */
.btn,
.qx-btn,
.ml-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 30px;
border: 1px solid transparent;
border-radius: var(--ml-r-pill);
background: var(--ml-surface-2);
color: var(--ml-text);
font-family: var(--ml-font);
font-size: .98rem;
font-weight: 600;
line-height: 1.4;
text-align: center;
white-space: nowrap;
cursor: pointer;
box-shadow: none;
transition: transform var(--ml-t-fast) var(--ml-ease),
box-shadow var(--ml-t-fast) var(--ml-ease),
background-color var(--ml-t-fast) var(--ml-ease),
border-color var(--ml-t-fast) var(--ml-ease),
color var(--ml-t-fast) var(--ml-ease);
}
.btn:hover,
.qx-btn:hover,
.ml-btn:hover,
.btn:focus-visible,
.qx-btn:focus-visible {
background: var(--ml-surface-3);
color: var(--ml-text);
transform: translateY(-2px);
box-shadow: var(--ml-shadow-sm);
}
.btn:active,
.qx-btn:active,
.ml-btn:active { transform: translateY(0); }
/* الزرّ الرئيسي — ذهب، لا أخضر ولا بنفسجي داكن */
.btn.btn-primary,
.qx-btn.btn-primary,
.btn.qx-btn-primary,
.qx-btn.qx-btn-primary,
.qx-btn.qx-btn-default,
.ml-btn-primary {
background: linear-gradient(135deg, var(--ml-purple-lt) 0%, var(--ml-purple) 52%, var(--ml-purple-dk) 100%) !important;
border-color: transparent !important;
color: var(--ml-text-on-brand) !important;
box-shadow: var(--ml-shadow-sm);
}
.btn.btn-primary:hover,
.qx-btn.btn-primary:hover,
.btn.qx-btn-primary:hover,
.qx-btn.qx-btn-primary:hover,
.qx-btn.qx-btn-default:hover,
.ml-btn-primary:hover {
background: linear-gradient(135deg, var(--ml-purple) 0%, var(--ml-purple-dk) 100%) !important;
color: var(--ml-text-on-brand) !important;
box-shadow: var(--ml-glow);
}
/* زرّ ثانوي — محدَّد بخطّ رفيع */
.ml-btn-ghost {
background: transparent;
border-color: var(--ml-line-strong);
color: var(--ml-text);
}
.ml-btn-ghost:hover {
background: var(--ml-accent-soft);
border-color: var(--ml-accent);
color: var(--ml-accent);
}
.btn-lg, .ml-btn-lg { padding: 16px 38px; font-size: 1.05rem; }
.btn-sm, .ml-btn-sm { padding: 9px 18px; font-size: .88rem; }
.btn svg, .qx-btn svg, .ml-btn svg { width: 18px; height: 18px; flex: none; }
/* --- الحقول --- */
.control-group { margin-bottom: 16px; }
.control-group:last-child { margin-bottom: 0; }
.control-label label,
label {
display: block;
margin-bottom: 7px;
font-size: .88rem;
font-weight: 500;
color: var(--ml-text-2);
text-transform: none;
}
label .star { color: var(--ml-accent); }
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea,
.form-control {
display: block;
width: 100%;
height: auto;
padding: 14px 18px;
border: 1px solid var(--ml-line-soft);
border-radius: var(--ml-r);
background: var(--ml-surface) !important;
color: var(--ml-text);
font-family: var(--ml-font);
font-size: 1rem;
line-height: 1.6;
box-shadow: none;
transition: border-color var(--ml-t-fast) var(--ml-ease),
background-color var(--ml-t-fast) var(--ml-ease),
box-shadow var(--ml-t-fast) var(--ml-ease);
}
textarea,
.form-control textarea { min-height: 140px; resize: vertical; }
input::placeholder,
textarea::placeholder { color: var(--ml-text-3); opacity: 1; }
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
outline: none;
border-color: var(--ml-accent);
background: var(--ml-surface-2) !important;
box-shadow: 0 0 0 3px var(--ml-accent-soft);
}
input.invalid,
textarea.invalid,
select.invalid { border-color: var(--ml-danger); }
.ml-field-error {
display: block;
margin-top: 6px;
font-size: .84rem;
color: var(--ml-danger);
}
/* التنبيهات */
.ml-inline-alert,
.alert {
padding: 13px 18px;
margin: 0 0 14px;
border: 1px solid var(--ml-line-soft);
border-radius: var(--ml-r);
background: var(--ml-surface);
color: var(--ml-text-2);
font-size: .93rem;
}
.ml-inline-alert-success,
.alert-success {
border-color: var(--ml-success-line);
background: var(--ml-success-soft);
color: var(--ml-success);
}
.ml-inline-alert-danger,
.alert-danger {
border-color: var(--ml-danger-line);
background: var(--ml-danger-soft);
color: var(--ml-danger);
}
/* ==========================================================================
6. الصفحة الرئيسية — القسم البطل
========================================================================== */
.com_mlath_home #t3-mainbody,
.com_mlath_home #t3-content {
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#qx-section-442 {
display: grid;
place-items: center;
min-height: min(94svh, 880px);
padding-block: clamp(70px, 12vh, 150px) clamp(60px, 10vh, 120px) !important;
text-align: center;
isolation: isolate;
}
/* اللوحة الحيّة — شرائط الضوء (يحقنها JS؛ تتلاشى بلطف إن غابت) */
.ml-hero-canvas {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1.2s var(--ml-ease);
pointer-events: none;
}
.ml-hero-canvas.ml-on { opacity: 1; }
/* البديل الثابت — يعمل دائمًا حتى بلا JS أو Canvas */
#qx-section-442::before {
content: "";
position: absolute;
inset: 0;
z-index: -3;
background:
radial-gradient(62vw 52vh at 50% 36%, rgba(139, 60, 141, .34), transparent 66%),
radial-gradient(40vw 34vh at 22% 78%, rgba(139, 60, 141, .17), transparent 64%),
radial-gradient(44vw 36vh at 82% 22%, rgba(184, 101, 186, .18), transparent 64%);
}
html:not(.dark) #qx-section-442::before {
background:
radial-gradient(62vw 52vh at 50% 36%, rgba(139, 60, 141, .13), transparent 66%),
radial-gradient(40vw 34vh at 22% 78%, rgba(139, 60, 141, .22), transparent 64%),
radial-gradient(44vw 36vh at 82% 22%, rgba(184, 101, 186, .10), transparent 64%);
}
/* حجاب سفلي يذوّب البطل في القسم التالي */
#qx-section-442::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: 30%;
z-index: -1;
background: linear-gradient(to bottom, transparent, var(--ml-bg));
pointer-events: none;
}
#qx-section-442 .qx-row { justify-content: center; }
#qx-section-442 .qx-column { flex: 1 1 100%; text-align: center; }
/* نقش محفور — نفس منطق الحفر على بطاقة عرس (والشركة تطبع البطاقات).
الدورة 7px لا 3px: الشبكات الضيّقة تُنتج تموّجًا (moiré) يهتزّ أثناء التمرير
على شاشات الجوال متوسطة الكثافة. */
#qx-section-442 .ml-guilloche {
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
opacity: .38;
background-image:
repeating-linear-gradient( 63deg, rgba(139, 60, 141, .05) 0 1px, transparent 1px 7px),
repeating-linear-gradient(-63deg, rgba(139, 60, 141, .05) 0 1px, transparent 1px 7px);
-webkit-mask-image: radial-gradient(58% 52% at 50% 42%, #000 0%, transparent 74%);
mask-image: radial-gradient(58% 52% at 50% 42%, #000 0%, transparent 74%);
}
html:not(.dark) #qx-section-442 .ml-guilloche {
opacity: .55;
background-image:
repeating-linear-gradient( 63deg, rgba(107, 45, 109, .055) 0 1px, transparent 1px 7px),
repeating-linear-gradient(-63deg, rgba(107, 45, 109, .055) 0 1px, transparent 1px 7px);
}
/* على الشاشات الصغيرة يذهب النقش كليًا — كلفته البصرية أعلى من قيمته */
@media (max-width: 767px) {
#qx-section-442 .ml-guilloche { display: none; }
}
/* لوحة الخطّ العربي — تصبح جسمًا مضيئًا لا صورة مسطّحة */
#qx-text-3420 {
margin: 0 0 clamp(20px, 3.2vh, 34px) !important;
text-align: center;
}
#qx-text-3420 p { margin: 0; }
.ml-mark {
position: relative;
display: inline-block;
line-height: 0;
}
/* لوحة الخطّ العربي تُعرض بألوانها الأصلية كما هي في هويّتكم — بلا إعادة تلوين.
في الوضع الليلي نرفع الإضاءة فقط دون المساس بالدرجة اللونية. */
.ml-mark-img {
position: relative;
height: clamp(88px, 15.5vw, 190px) !important;
width: auto;
margin: 0 !important;
filter: drop-shadow(0 8px 26px rgba(139, 60, 141, .18));
}
html.dark .ml-mark-img {
filter: brightness(1.26)
drop-shadow(0 10px 32px rgba(139, 60, 141, .38));
}
/* سطر الوعد */
#qx-text-3654 {
max-width: 46ch;
margin: 0 auto clamp(26px, 4vh, 44px) !important;
text-align: center;
}
#qx-text-3654 p,
#qx-text-3654 * {
font-size: clamp(1rem, 1.5vw, 1.28rem) !important;
font-weight: 300;
line-height: 2;
color: var(--ml-text-2);
}
#qx-button-84133 { text-align: center; }
#qx-button-84133 .qx-btn { padding: 16px 40px; font-size: 1.05rem; }
/* شريط الثقة أسفل البطل */
.ml-hero-meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px clamp(16px, 3vw, 34px);
margin-top: clamp(28px, 4.5vh, 52px);
font-size: .84rem;
letter-spacing: .04em;
color: var(--ml-text-3);
}
.ml-hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.ml-hero-meta span::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
background: var(--ml-accent);
flex: none;
}
/* مؤشّر التمرير */
.ml-scroll-cue {
position: absolute;
bottom: 22px;
inset-inline-start: 50%;
translate: -50% 0;
width: 1px;
height: 46px;
background: linear-gradient(to bottom, transparent, var(--ml-line-strong));
overflow: hidden;
}
.ml-scroll-cue::after {
content: "";
position: absolute;
inset-inline: 0;
top: -50%;
height: 50%;
background: var(--ml-accent);
animation: ml-cue 2.4s var(--ml-ease-in-out) infinite;
}
@keyframes ml-cue {
0% { transform: translateY(0); opacity: 0; }
30% { opacity: 1; }
100% { transform: translateY(300%); opacity: 0; }
}
/* ==========================================================================
7. رأس القسم المشترك
========================================================================== */
.ml-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 16px;
font-family: var(--ml-font);
font-size: .8rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ml-accent);
}
.ml-eyebrow::before {
content: "";
width: clamp(20px, 3vw, 40px);
height: 1px;
background: currentColor;
opacity: .6;
}
.ml-lede {
max-width: 60ch;
font-size: clamp(1rem, 1.2vw, 1.13rem);
font-weight: 300;
color: var(--ml-text-2);
}
/* «زبائننا الأعزّاء» — mlath-unified.css القديم يُخفيه بـ display:none !important
لأنه كان عنوانًا بلا محتوى خلفه. صار له محتوى حقيقي الآن، فنُعيد إظهاره. */
#qx-section-848 { display: block !important; }
#qx-section-848 {
padding-block: clamp(40px, 6vw, 80px) !important;
border-top: 1px solid var(--ml-line-soft);
}
#qx-section-848 .qx-row { justify-content: flex-start; }
#qx-text-10339 { margin: 0 0 10px !important; text-align: start !important; }
#qx-text-10339 h3 { text-align: start !important; font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin: 0; }
#qx-text-38340 { text-align: start !important; }
#qx-text-38340 p {
text-align: start !important;
max-width: 56ch;
color: var(--ml-text-2);
font-weight: 300;
margin: 0;
}
/* ==========================================================================
8. الخدمات — خدمة رئيسية + شبكة
========================================================================== */
/* أرضية محايدة لقسمين — تُعطي الصفحة إيقاعًا بدل لوح أبيض واحد */
#qx-section-3396,
#qx-section-991126 { background: var(--ml-bg-alt) !important; }
#qx-section-3396 {
padding-block: var(--ml-section-y) !important;
}
#qx-section-3396 .qx-row { align-items: flex-start; }
#qx-row-7397 { margin: 0 0 clamp(30px, 4vw, 54px) !important; }
#qx-text-91101,
#qx-text-26102 { text-align: start !important; margin: 0 !important; }
#qx-text-91101 h2 { text-align: start !important; margin: 0 0 12px; }
#qx-text-26102 p {
text-align: start !important;
max-width: 56ch;
color: var(--ml-text-2);
font-weight: 300;
margin: 0;
}
/* شبكة الخدمات: ستّ خدمات على ستّ أعمدة.
الأولى (الزفّات) تأخذ العرض كاملًا، ثم ثلاث بعرض عمودين، ثم اثنتان بعرض
ثلاثة أعمدة — فلا يبقى فراغ في آخر صفّ كما كان يحدث مع auto-fit. */
#qx-row-23103 {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: clamp(16px, 2vw, 24px);
align-items: stretch;
}
#qx-row-23103 > .qx-element-blurb { grid-column: span 2; }
#qx-row-23103 > .qx-element-blurb:first-child { grid-column: 1 / -1; }
#qx-row-23103 > .qx-element-blurb:nth-child(5),
#qx-row-23103 > .qx-element-blurb:nth-child(6) { grid-column: span 3; }
@media (max-width: 900px) {
#qx-row-23103 { grid-template-columns: repeat(2, 1fr); }
#qx-row-23103 > .qx-element-blurb,
#qx-row-23103 > .qx-element-blurb:nth-child(5),
#qx-row-23103 > .qx-element-blurb:nth-child(6) { grid-column: span 1; }
#qx-row-23103 > .qx-element-blurb:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
#qx-row-23103 { grid-template-columns: 1fr; }
#qx-row-23103 > .qx-element-blurb,
#qx-row-23103 > .qx-element-blurb:first-child { grid-column: 1 / -1; }
}
.qx-element-blurb {
position: relative;
display: flex;
margin: 0 !important;
padding: clamp(22px, 2.4vw, 30px);
border: 1px solid var(--ml-line-soft);
border-radius: var(--ml-r-lg);
background: var(--ml-surface);
text-align: start !important;
overflow: hidden;
isolation: isolate;
transition: transform var(--ml-t) var(--ml-ease),
border-color var(--ml-t) var(--ml-ease),
background-color var(--ml-t) var(--ml-ease),
box-shadow var(--ml-t) var(--ml-ease);
}
.qx-element-blurb:hover {
transform: translateY(-4px);
border-color: var(--ml-line);
background: var(--ml-surface-2);
box-shadow: var(--ml-shadow);
}
/* شريط ذهبي رفيع على الحافة الأمامية */
.qx-element-blurb::after {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: 2px;
background: linear-gradient(to bottom, var(--ml-accent), transparent);
opacity: 0;
transition: opacity var(--ml-t) var(--ml-ease);
}
.qx-element-blurb:hover::after { opacity: 1; }
/* إلغاء الحدود القديمة */
.blurb-border .qx-media-body {
border: 0 !important;
padding: 0 !important;
}
.qx-element-blurb .qx-media {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
float: none !important;
width: 100% !important;
padding: 0 !important;
}
.qx-element-blurb .qx-media-right,
.qx-element-blurb .qx-media > .qx-pull-right {
order: -1;
width: 56px !important;
height: 56px !important;
margin: 0 !important;
padding: 0 !important;
display: grid;
place-items: center;
border: 1px solid var(--ml-line);
border-radius: var(--ml-r);
background: var(--ml-surface-3);
box-shadow: none;
}
/* الأيقونات عائلة واحدة أصلًا (خطّ رفيع، 116×108، لون واحد) —
نعرضها بمقاس واحد ولا نُعيد تلوينها إطلاقًا. */
.qx-element-blurb .qx-media-right img {
width: 32px;
height: 32px;
object-fit: contain;
}
html.dark .qx-element-blurb .qx-media-right img { filter: brightness(1.75); }
.qx-element-blurb .qx-blurb-title {
margin: 0 0 8px !important;
font-family: var(--ml-font);
font-size: clamp(1.08rem, 1.5vw, 1.28rem) !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--ml-text);
}
.qx-element-blurb .qx-blurb-content p {
margin: 0;
font-size: .96rem;
font-weight: 300;
line-height: 1.85;
color: var(--ml-text-2);
}
/* الخدمة الرئيسية — الزفّات تأخذ عرض الشبكة كاملًا */
#qx-blurb-75106 {
padding: clamp(28px, 3.6vw, 48px);
border-color: var(--ml-line-brand);
background: var(--ml-surface);
}
#qx-blurb-75106 .qx-media { max-width: 62ch; }
#qx-blurb-75106 .qx-media-right { border-color: var(--ml-line-brand); }
#qx-blurb-75106 .qx-blurb-title {
font-family: var(--ml-font); /* تجاوز 22px — يعود إلى خطّ العرض */
font-weight: 700 !important;
font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
}
#qx-blurb-75106 .qx-blurb-content p { font-size: clamp(1rem, 1.2vw, 1.12rem); }
/* رابط «اعرف المزيد» يضيفه JS داخل كل بطاقة */
.ml-blurb-link {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 14px;
font-size: .9rem;
font-weight: 600;
color: var(--ml-accent);
}
.ml-blurb-link svg { width: 15px; height: 15px; transition: transform var(--ml-t-fast) var(--ml-ease); }
.qx-element-blurb:hover .ml-blurb-link svg { transform: translateX(-4px); }
html[dir="ltr"] .qx-element-blurb:hover .ml-blurb-link svg { transform: translateX(4px); }
/* ==========================================================================
9. الأرقام — سجلّ محفور
========================================================================== */
#qx-section-991126 {
padding-block: var(--ml-section-y) !important;
background: var(--ml-bg-alt) !important;
}
#qx-section-991126::before { content: none !important; }
#qx-row-631127 { align-items: center; }
#qx-text-571409,
#qx-text-941414 { text-align: start !important; }
#qx-text-571409 h2 { text-align: start !important; }
#qx-text-941414 p {
text-align: start !important;
max-width: 54ch;
color: var(--ml-text-2);
font-weight: 300;
}
#qx-image-491465 { text-align: center; }
#qx-image-491465 img {
max-height: 380px;
width: auto;
opacity: .9;
filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45));
}
.ml-since {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 22px !important;
padding: 9px 20px;
border: 1px solid var(--ml-line);
border-radius: var(--ml-r-pill);
background: var(--ml-bg);
font-family: var(--ml-font);
font-size: .95rem !important;
color: var(--ml-text-2) !important;
}
/* صفّ العدّادات */
#qx-row-223671 {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
gap: 0;
margin-top: clamp(38px, 5vw, 66px);
border-top: 1px solid var(--ml-line);
border-bottom: 1px solid var(--ml-line);
}
#qx-row-223671 > .qx-column { display: contents; }
.qx-element-number-counter {
position: relative;
padding: clamp(26px, 3vw, 40px) clamp(14px, 2vw, 26px);
text-align: center;
}
.qx-element-number-counter + .qx-element-number-counter,
.qx-element-number-counter:not(:first-child)::before {
content: "";
}
.qx-element-number-counter::before {
content: "";
position: absolute;
inset-block: 22%;
inset-inline-start: 0;
width: 1px;
background: var(--ml-line-soft);
}
.qx-element-number-counter:first-child::before { display: none; }
.ml-counter-icon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
margin: 0 auto 12px;
color: var(--ml-text-3);
}
.ml-counter-icon svg { width: 100%; height: 100%; }
.qx-element-number-counter .qx-nc-number {
margin: 0 0 4px;
font-family: var(--ml-font);
font-size: clamp(2rem, 4.2vw, 3.1rem);
font-weight: 600;
line-height: 1.1;
color: var(--ml-text) !important;
font-variant-numeric: tabular-nums;
}
.qx-element-number-counter .qx-nc-title {
margin: 0;
font-size: .88rem;
font-weight: 400;
letter-spacing: .06em;
color: var(--ml-text-3);
}
/* ملاحظة صغيرة تحت الأرقام (مصدر الرقم) */
.ml-stat-note {
margin-top: 14px;
font-size: .78rem;
color: var(--ml-text-3);
text-align: center;
}
/* ==========================================================================
10. قسم الفاتورة والدفع
========================================================================== */
#ml-pay-section {
padding-block: var(--ml-section-y) !important;
}
#ml-pay-section .qx-container,
#ml-pay-section .ml-container {
position: relative;
padding: clamp(34px, 5vw, 66px) clamp(24px, 4vw, 60px);
border: 1px solid var(--ml-line);
border-radius: var(--ml-r-xl);
background: var(--ml-surface);
text-align: center;
overflow: hidden;
}
#ml-pay-section h2 { margin: 0 0 12px; }
.ml-pay-sub {
max-width: 52ch;
margin: 0 auto 26px;
color: var(--ml-text-2);
font-weight: 300;
}
.ml-pay-cta { margin-bottom: 30px; }
.ml-pay-methods {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px 12px;
}
.ml-pay-title {
width: 100%;
margin-bottom: 4px;
font-size: .8rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ml-text-3);
}
.ml-pay-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border: 1px solid var(--ml-line-soft);
border-radius: var(--ml-r-pill);
background: var(--ml-surface-2);
font-size: .86rem;
font-weight: 500;
color: var(--ml-text-2);
transition: border-color var(--ml-t-fast) var(--ml-ease),
color var(--ml-t-fast) var(--ml-ease);
}
.ml-pay-badge:hover { border-color: var(--ml-line); color: var(--ml-text); }
.ml-pay-badge svg,
.ml-pay-badge .fa { font-size: 1rem; opacity: .9; }
/* ==========================================================================
11. اتصل بنا
========================================================================== */
#qx-section-851510 {
padding-block: var(--ml-section-y) !important;
border-top: 1px solid var(--ml-line-soft);
}
#qx-section-851510 > .qx-row { justify-content: center; }
#qx-text-181921 { width: 100%; text-align: center; }
#qx-text-181921 h2 { text-align: center; margin-bottom: 24px; }
.ml-contact-phones {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin: 0 auto 40px;
}
.ml-contact-phones a {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 12px 22px;
border: 1px solid var(--ml-line-soft);
border-radius: var(--ml-r-pill);
background: var(--ml-surface);
color: var(--ml-text-2) !important;
font-size: .93rem;
font-weight: 500;
transition: border-color var(--ml-t-fast) var(--ml-ease),
background-color var(--ml-t-fast) var(--ml-ease),
color var(--ml-t-fast) var(--ml-ease),
transform var(--ml-t-fast) var(--ml-ease);
}
.ml-contact-phones a:hover {
border-color: var(--ml-accent);
background: var(--ml-accent-soft);
color: var(--ml-accent) !important;
transform: translateY(-2px);
}
.ml-contact-phones svg,
.ml-contact-phones .fa { font-size: 1.05rem; }
/* قاعدة أخضر واتساب: يظهر على الأسطح الداكنة فقط، ولا يظهر أبدًا فوق الذهب.
هكذا نحتفظ بالتعرّف الفوري على الأيقونة دون أن يعود الزرّ الأخضر
الذي كان يتصادم مع بنفسجي العلامة. */
.ml-contact-phones a[href*="wa.me"] svg,
.ml-btn-ghost[href*="wa.me"] svg,
.ml-actionbar .ml-btn-ghost[href*="wa.me"] svg { color: #3DDC7F; }
html:not(.dark) .ml-contact-phones a[href*="wa.me"] svg,
html:not(.dark) .ml-btn-ghost[href*="wa.me"] svg { color: #128C4B; }
.ml-contact-phones a[href*="wa.me"]:hover svg { color: inherit; }
.qx-element-contact-form {
max-width: 780px;
margin-inline: auto;
padding: clamp(26px, 3.6vw, 46px) !important;
border: 1px solid var(--ml-line-soft);
border-radius: var(--ml-r-xl);
background: var(--ml-surface) !important;
box-shadow: var(--ml-shadow) !important;
}
.qx-element-contact-form * { box-sizing: border-box !important; }
.qx-element-contact-form .form-horizontal fieldset {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 0 18px;
border: 0;
margin: 0;
padding: 0;
}
.qx-element-contact-form .form-horizontal .control-group { margin-bottom: 16px !important; }
.qx-element-contact-form .control-group.ml-full { grid-column: 1 / -1; }
.qx-element-contact-form .form-horizontal .control-group .control-label { display: none; }
.qx-element-contact-form .form-horizontal .control-group .controls { margin: 0 !important; }
.qx-element-contact-form .form-horizontal .control-group .controls input,
.qx-element-contact-form .form-horizontal .control-group .controls textarea {
width: 100%;
height: auto;
margin-bottom: 0;
border: 1px solid var(--ml-line-soft);
border-radius: var(--ml-r);
background: var(--ml-surface-2) !important;
box-shadow: none;
}
.qx-element-contact-form button[type="submit"] { width: 100%; }
.mlath-form-help { color: var(--ml-text-3); font-size: .9rem; }
/* ==========================================================================
12. صفحة الفاتورة /quickpay
========================================================================== */
.ml-page-quickpay #t3-mainbody,
.ml-page-invoice #t3-mainbody { padding-block: clamp(48px, 8vw, 96px); }
.inv-edit.front-end-edit {
max-width: 560px;
margin: 0 auto;
padding: clamp(28px, 4vw, 46px);
border: 1px solid var(--ml-line-soft);
border-radius: var(--ml-r-xl);
background: var(--ml-surface);
box-shadow: var(--ml-shadow);
}
.inv-edit.front-end-edit h1 {
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: 10px;
text-align: center;
}
.inv-edit.front-end-edit .mlath-form-help {
margin-bottom: 26px;
text-align: center;
}
.inv-edit .button-div { margin-top: 6px; }
.inv-edit .button-div .btn { width: 100%; }
.ml-inv-paper,
.paper_feeling {
padding: clamp(24px, 3.4vw, 40px);
border: 1px solid var(--ml-line-soft);
border-radius: var(--ml-r-lg);
background: var(--ml-bg-raised);
box-shadow: var(--ml-shadow);
}
/* ==========================================================================
13. الفوتر
========================================================================== */
#t3-footer.t3-footer {
margin-top: clamp(50px, 7vw, 90px);
padding: 0;
border-top: 1px solid var(--ml-line);
background: var(--ml-bg-alt) !important;
color: var(--ml-text-2);
}
/* على الرئيسية تتكرّر «خدماتنا»: بطاقات الخدمات في المتن + هذه القائمة في الفوتر.
نُخفيها على الرئيسية وحدها، وتبقى في الصفحات الداخلية حيث هي المرجع الوحيد. */
.com_mlath_home .t3-footer nav.mlath-services { display: none !important; }
/* شبكة الخدمات في الفوتر */
.mlath-services {
max-width: var(--ml-page);
margin: 0 auto !important;
padding: clamp(38px, 5vw, 62px) var(--ml-gutter) clamp(10px, 2vw, 20px) !important;
border: 0 !important;
}
.mlath-services h2 {
margin: 0 0 20px !important;
font-size: clamp(1.05rem, 1.6vw, 1.3rem) !important;
color: var(--ml-text) !important;
}
.mlath-services ul {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)) !important;
gap: 12px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.t3-footer nav.mlath-services a {
display: block !important;
padding: 16px 18px !important;
border: 1px solid var(--ml-line-soft) !important;
border-radius: var(--ml-r) !important;
background: var(--ml-surface) !important;
transition: border-color var(--ml-t-fast) var(--ml-ease),
background-color var(--ml-t-fast) var(--ml-ease),
transform var(--ml-t-fast) var(--ml-ease) !important;
box-shadow: none !important;
}
.t3-footer nav.mlath-services a:hover {
border-color: var(--ml-accent) !important;
background: var(--ml-accent-soft) !important;
transform: translateY(-2px);
}
.mlath-services strong {
display: block !important;
margin-bottom: 4px !important;
font-family: var(--ml-font);
font-size: .98rem !important;
color: var(--ml-text) !important;
}
.mlath-services span {
font-size: .84rem !important;
color: var(--ml-text-3) !important;
line-height: 1.6 !important;
}
.mlath-footer { background: transparent; }
.mlath-footer-body {
padding: clamp(28px, 4vw, 52px) 0 0;
}
.mlath-footer-body .container {
max-width: var(--ml-page);
padding-inline: var(--ml-gutter);
}
.mlath-footer-body .row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
gap: clamp(28px, 4vw, 52px);
margin: 0;
}
.mlath-footer-col { float: none !important; width: auto !important; padding: 0 !important; }
.mlath-footer-logo {
height: 46px;
width: auto !important;
margin-bottom: 16px;
}
.mlath-footer-tagline {
max-width: 34ch;
margin-bottom: 18px;
font-size: .93rem;
font-weight: 300;
color: var(--ml-text-2);
}
.ftag-en { display: none; }
html[lang="en"] .ftag-ar,
html[lang="en"] .addr-ar { display: none; }
html[lang="en"] .ftag-en,
html[lang="en"] .addr-en { display: inline; }
.addr-en { display: none; }
.mlath-footer-social { display: flex; gap: 9px; margin-bottom: 18px; }
.mlath-soc-btn {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--ml-line-soft);
border-radius: 50%;
background: var(--ml-surface);
color: var(--ml-text-2) !important;
font-size: 1.05rem;
transition: color var(--ml-t-fast) var(--ml-ease),
border-color var(--ml-t-fast) var(--ml-ease),
background-color var(--ml-t-fast) var(--ml-ease),
transform var(--ml-t-fast) var(--ml-ease);
}
.mlath-soc-btn:hover {
color: var(--ml-accent) !important;
border-color: var(--ml-accent);
background: var(--ml-accent-soft);
transform: translateY(-2px);
}
.mlath-footer-heading {
margin: 0 0 16px !important;
font-size: 1rem !important;
color: var(--ml-text) !important;
}
.mlath-footer-links { margin: 0; padding: 0; list-style: none; }
.mlath-footer-links li { margin-bottom: 9px; }
.mlath-footer-links a {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ml-text-2) !important;
font-size: .93rem;
}
.mlath-footer-links a:hover { color: var(--ml-accent) !important; }
.mlath-footer-links .fa { font-size: .8rem; opacity: .55; }
.mlath-footer-contact p { margin: 0; font-size: .92rem; }
.mlath-footer-contact .fa { margin-inline-end: 8px; opacity: .6; }
.mlath-footer-address { margin-bottom: 16px; font-size: .92rem; line-height: 1.8; }
.mlath-footer-address .addr-line { display: flex; gap: 10px; }
.mlath-footer-address .fa { margin-top: 6px; color: var(--ml-accent); opacity: .8; }
.mlath-map-wrap {
border: 1px solid var(--ml-line-soft);
border-radius: var(--ml-r);
overflow: hidden;
line-height: 0;
}
.mlath-map-wrap iframe {
display: block;
width: 100%;
height: 190px;
border: 0;
filter: grayscale(.35) contrast(1.05);
}
html.dark .mlath-map-wrap iframe { filter: grayscale(.5) invert(.9) hue-rotate(180deg) contrast(.92); }
.mlath-footer-copy-row {
margin-top: clamp(28px, 4vw, 46px);
padding: 22px 0;
border-top: 1px solid var(--ml-line-soft);
text-align: center;
}
.mlath-footer-copy,
#ml-copyright {
font-size: .87rem;
color: var(--ml-text-3);
}
.mf-accent-dot { color: var(--ml-accent); }
/* زرّ العودة للأعلى */
#back-to-top {
inset-inline-end: 22px;
inset-inline-start: auto;
bottom: 22px;
z-index: 50;
}
#back-to-top .btn {
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--ml-line) !important;
border-radius: 50% !important;
background: var(--ml-bg) !important;
color: var(--ml-accent) !important;
box-shadow: var(--ml-shadow-sm);
}
#back-to-top .btn:hover { background: var(--ml-accent-soft) !important; }
/* ==========================================================================
14. نظام الصفحات المستقلة (.ml-doc) — يوحّد صفحات الخدمات والقانونية
========================================================================== */
.ml-doc-hero {
position: relative;
padding-block: clamp(60px, 9vw, 110px) clamp(34px, 5vw, 60px);
text-align: center;
overflow: clip;
}
.ml-doc-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(52vw 40vh at 50% 0%, rgba(139, 60, 141, .26), transparent 66%),
radial-gradient(34vw 26vh at 82% 20%, rgba(139, 60, 141, .12), transparent 64%);
}
html:not(.dark) .ml-doc-hero::before {
background:
radial-gradient(52vw 40vh at 50% 0%, rgba(139, 60, 141, .10), transparent 66%),
radial-gradient(34vw 26vh at 82% 20%, rgba(139, 60, 141, .18), transparent 64%);
}
.ml-doc-hero .ml-container { max-width: var(--ml-page-narrow); }
.ml-doc-hero h1 { margin: 0 0 18px; }
.ml-doc-hero .ml-lede { margin-inline: auto; text-align: center; }
.ml-doc-hero .ml-eyebrow { justify-content: center; }
.ml-doc {
max-width: var(--ml-page-narrow);
margin: 0 auto;
padding: 0 var(--ml-gutter) clamp(60px, 8vw, 110px);
}
.ml-card {
margin-top: clamp(18px, 2.4vw, 28px);
padding: clamp(26px, 3.6vw, 46px);
border: 1px solid var(--ml-line-soft);
border-radius: var(--ml-r-xl);
background: var(--ml-surface);
box-shadow: var(--ml-shadow-sm);
}
.ml-card > :first-child { margin-top: 0; }
.ml-card > :last-child { margin-bottom: 0; }
.ml-card h2 {
font-size: clamp(1.25rem, 2.1vw, 1.6rem);
margin: 0 0 14px;
color: var(--ml-text);
}
.ml-card h3 {
font-size: clamp(1.02rem, 1.4vw, 1.15rem);
margin: 24px 0 8px;
color: var(--ml-text);
}
.ml-card p,
.ml-card li { color: var(--ml-text-2); font-weight: 300; }
.ml-card ul,
.ml-card ol { padding-inline-start: 20px; margin: 0 0 1.1em; }
.ml-card li { margin-bottom: 8px; }
.ml-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
gap: 16px;
margin-top: 8px;
}
.ml-feature {
padding: 22px;
border: 1px solid var(--ml-line);
border-radius: var(--ml-r);
background: var(--ml-bg);
transition: border-color var(--ml-t-fast) var(--ml-ease),
transform var(--ml-t-fast) var(--ml-ease);
}
.ml-feature:hover { border-color: var(--ml-line); transform: translateY(-2px); }
.ml-feature h3 { margin: 0 0 8px; font-size: 1.02rem; color: var(--ml-accent); }
.ml-feature p { margin: 0; font-size: .93rem; }
.ml-steps { counter-reset: ml-step; list-style: none; padding: 0; margin: 0; }
.ml-steps li {
position: relative;
padding-inline-start: 50px;
margin-bottom: 18px;
color: var(--ml-text-2);
font-weight: 300;
}
.ml-steps li::before {
counter-increment: ml-step;
content: counter(ml-step);
position: absolute;
inset-inline-start: 0;
top: 2px;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid var(--ml-line);
border-radius: 50%;
background: var(--ml-accent-soft);
color: var(--ml-accent);
font-family: var(--ml-font);
font-size: .92rem;
font-weight: 600;
}
.ml-nap {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: 18px;
}
.ml-nap div { font-size: .93rem; color: var(--ml-text-2); }
.ml-nap strong {
display: block;
margin-bottom: 3px;
font-size: .8rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ml-text-3);
font-weight: 600;
}
.ml-cta {
margin-top: clamp(20px, 3vw, 32px);
padding: clamp(30px, 4.4vw, 54px);
border: 1px solid var(--ml-line);
border-radius: var(--ml-r-xl);
border-color: var(--ml-line-brand);
background: var(--ml-bg-alt);
text-align: center;
}
.ml-cta h2 { margin: 0 0 10px; }
.ml-cta p { max-width: 52ch; margin: 0 auto 24px; color: var(--ml-text-2); font-weight: 300; }
.ml-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ml-related {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px 18px;
margin-top: clamp(26px, 3.4vw, 40px);
padding-top: 24px;
border-top: 1px solid var(--ml-line-soft);
font-size: .92rem;
color: var(--ml-text-3);
}
.ml-related a { color: var(--ml-text-2); }
.ml-related a:hover { color: var(--ml-accent); }
/* ==========================================================================
15. الحركة والكشف التدريجي
========================================================================== */
.ml-reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity var(--ml-t-slow) var(--ml-ease),
transform var(--ml-t-slow) var(--ml-ease);
will-change: opacity, transform;
}
.ml-reveal-visible {
opacity: 1;
transform: none;
will-change: auto;
}
/* تتابع خفيف داخل الشبكات.
ملاحظة: أعمدة qx تحمل display:contents فلا تقبل opacity — لذلك نستهدف
البطاقات نفسها أيضًا، وإلا سقط التتابع صامتًا. */
.ml-reveal-stagger > *,
.ml-reveal-stagger .qx-element-blurb {
opacity: 0;
transform: translateY(14px);
transition: opacity .62s var(--ml-ease), transform .62s var(--ml-ease);
transition-delay: calc(var(--ml-i, 0) * 70ms);
}
.ml-reveal-stagger.ml-reveal-visible > *,
.ml-reveal-stagger.ml-reveal-visible .qx-element-blurb { opacity: 1; transform: none; }
/* الأعمدة الشفافة لا تُحرَّك — نُعيدها لوضعها الطبيعي */
.ml-reveal-stagger > .qx-column { opacity: 1; transform: none; transition: none; }
/* رسم الخطّ العربي عند التحميل */
@keyframes ml-rise {
from { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(6px); }
to { opacity: 1; transform: none; filter: none; }
}
.ml-hero-in #qx-text-3420 { animation: ml-rise 1.15s var(--ml-ease) both; }
.ml-hero-in #qx-text-3654 { animation: ml-rise 1.05s var(--ml-ease) .22s both; }
.ml-hero-in #qx-button-84133 { animation: ml-rise .95s var(--ml-ease) .4s both; }
.ml-hero-in .ml-hero-meta { animation: ml-rise .95s var(--ml-ease) .55s both; }
/* ==========================================================================
16. الاستجابة
========================================================================== */
@media (max-width: 1024px) {
#qx-image-491465 { display: none !important; }
}
@media (max-width: 767px) {
:root { --ml-header-h: 64px; }
.qx-row { gap: 22px; }
#qx-section-442 { min-height: min(88svh, 700px); }
.ml-hero-meta { font-size: .78rem; gap: 8px 16px; }
.qx-element-number-counter::before { display: none; }
#qx-row-223671 { gap: 1px; background: var(--ml-line-soft); }
#qx-row-223671 .qx-element-number-counter { background: var(--ml-bg); }
.qx-element-contact-form .form-horizontal fieldset { grid-template-columns: 1fr; }
.ml-contact-phones a { width: 100%; justify-content: center; }
.ml-cta-actions .btn,
.ml-cta-actions .ml-btn { width: 100%; }
}
@media (max-width: 480px) {
/* الزرّ لا يُحذف — يتحوّل إلى أيقونة. هو أهمّ مسار تحويل في الموقع. */
.ml-header-cta { padding: 0; width: 38px; height: 38px; border-radius: 50%; }
.ml-header-cta span { display: none; }
}
/* ==========================================================================
16b. شريط الإجراءات السفلي — للجوال فقط
========================================================================== */
.ml-actionbar {
display: none;
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 70;
gap: 10px;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
background: var(--ml-bg);
border-top: 1px solid var(--ml-line);
box-shadow: 0 -4px 20px rgba(48, 56, 66, .07);
}
.ml-actionbar > a {
flex: 1 1 0;
padding: 13px 10px;
font-size: .95rem;
}
@media (max-width: 767px) {
.ml-actionbar { display: flex; }
/* مساحة أسفل الصفحة حتى لا يغطّي الشريط آخر سطر */
body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
#back-to-top { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}
@media print {
.ml-actionbar { display: none !important; }
}
/* ==========================================================================
17. الوصولية والطباعة الورقية
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.ml-reveal,
.ml-reveal-stagger > * { opacity: 1 !important; transform: none !important; }
.ml-hero-canvas { display: none !important; }
.ml-scroll-cue::after { animation: none; opacity: .6; }
}
/* بدون جافاسكربت: لا شيء يبقى مخفيًا */
html.no-js .ml-reveal,
html.no-js .ml-reveal-stagger > * { opacity: 1 !important; transform: none !important; }
@media print {
body::before,
.ml-hero-canvas,
#back-to-top,
.ml-header-tools,
.mlath-map-wrap,
.ml-scroll-cue { display: none !important; }
body { background: #fff; color: #000; }
.qx-section { padding-block: 20px !important; }
}