/* =================================================================== X0T — "Magnet" cinematic layer طبقة بصرية سينمائية مستوحاة من magnetofficial.com، بهوية X0T (بنفسجي → أزرق) وخط Cairo وعربي RTL. كل شيء هنا محصور داخل body.x0t-mg حتى لا يمسّ باقي الموقع. =================================================================== */ body.x0t-mg{ /* ---- الرموز الخاصة بالطبقة ---- */ --mg-bg:#08080C; --mg-panel:#101017; --mg-hover:#17171F; --mg-text:#F4F5FA; --mg-muted:#8E93A8; --mg-hair:rgba(255,255,255,.09); --mg-hair2:rgba(255,255,255,.20); --mg-a:#6d3fe0; /* بنفسجي اللوجو */ /* اللونان أرقاماً لاستعمالهما داخل rgba() — يعيد المخصِّص تعريفهما */ --mg-a-rgb:109,63,224; --mg-b-rgb:59,91,245; --mg-b:#3b5bf5; /* أزرق اللوجو */ --mg-soft:#a892ff; --mg-grad:linear-gradient(115deg,#6d3fe0,#3b5bf5); --mg-paper:#F2F2EC; /* الكتلة المعاكسة */ --mg-paper-ink:#0A0A0A; --mg-deep:#050508; /* التذييل وشاشة التحميل */ --mg-field:#0a0a0f; /* خلفية الحقول */ --mg-field2:#0d0d14; /* الحقل عند التركيز والقوائم */ --mg-dim:#6f748a; /* نص ثانوي خافت */ --mg-text-2:#c8ccdd; /* نص المتن الأفتح */ --mg-ph:#5f647a; /* النص النائب */ --mg-bg-rgb:8,8,12; /* لون الصفحة كأرقام — للحُجُب التي تتبع الوضع */ --mg-scrim-rgb:8,8,12; /* حجاب فوق الصور — يبقى داكناً في الوضعين */ --mg-glow:.20; /* شدّة التوهّج */ --mg-ease:cubic-bezier(.16,1,.3,1); --mg-shell:clamp(20px,5vw,88px); /* ---- إعادة تعريف رموز الثيم حتى تتبعها الأجزاء غير المغطّاة ---- */ --ink:#F4F5FA; --ink-soft:#cbd0e4; --muted:#8E93A8; --paper:#08080C; --surface:#101017; --surface-2:#17171F; --line:rgba(255,255,255,.09); --forest:#050508; --forest-2:#0d0d14; --shadow-sm:0 2px 12px rgba(0,0,0,.5); --shadow:0 24px 60px -24px rgba(0,0,0,.85); --shadow-lg:0 40px 90px -30px rgba(var(--mg-a-rgb),.4); --r:6px; --r-sm:4px; --r-lg:10px; --wrap:1560px; } /* =================================================================== اللوحة الفاتحة — نفس الهوية (بنفسجي → أزرق) على خلفية فاتحة. الثيم يضع data-theme على ، فنلتقطه من هناك. =================================================================== */ html[data-theme="light"] body.x0t-mg{ --mg-bg:#F6F7FB; --mg-panel:#FFFFFF; --mg-hover:#F1F2F8; --mg-text:#101322; --mg-text-2:#333849; --mg-muted:#5C6275; --mg-dim:#7A8092; --mg-ph:#9AA0B2; --mg-hair:rgba(16,19,34,.10); --mg-hair2:rgba(16,19,34,.22); --mg-soft:#5A2FD0; /* الأكسنت مقروء على الأبيض */ --mg-deep:#0C0E18; /* التذييل يبقى داكناً للتباين */ --mg-field:#FFFFFF; --mg-field2:#FBFBFF; --mg-paper:#0A0A0A; /* الكتلة المعاكسة تنقلب داكنة */ --mg-paper-ink:#F2F2EC; --mg-bg-rgb:246,247,251; --mg-glow:.14; /* رموز الثيم الأصلية */ --ink:#101322; --ink-soft:#333849; --muted:#5C6275; --paper:#F6F7FB; --surface:#FFFFFF; --surface-2:#F1F2F8; --line:rgba(16,19,34,.10); --forest:#0C0E18; --forest-2:#141931; --shadow-sm:0 2px 10px rgba(16,19,34,.06); --shadow:0 18px 50px -18px rgba(16,19,34,.18); } body.x0t-mg{ background:var(--mg-bg); color:var(--mg-text); font-size:17px; line-height:1.75; overflow-x:hidden; } /* ملاحظة مهمة: لا نضع overflow على إطلاقاً. وضع overflow غير مرئي على html يقطع انتشار overflow من الـ body إلى إطار العرض، فيتحوّل الـ body نفسه إلى حاوية تمرير ويتعطّل تمرير الصفحة كلها. القصّ الأفقي يبقى على الـ body وحده كما في الثيم الأصلي. */ html:has(body.x0t-mg){scroll-behavior:smooth} body.x0t-mg.mg-loading{overflow:hidden} body.x0t-mg ::selection{background:var(--mg-a);color:#fff} body.x0t-mg a:focus-visible, body.x0t-mg button:focus-visible{outline:2px solid var(--mg-a);outline-offset:4px;border-radius:2px} /* أدق تفاصيل الشكل: الحواف الحادة بدل الحواف الدائرية الكبيرة */ body.x0t-mg .card, body.x0t-mg .work, body.x0t-mg .step, body.x0t-mg .q, body.x0t-mg .tm-card, body.x0t-mg .hero-card{border-radius:6px} /* =================================================================== 1) كروم الصفحة: شريط التقدّم + المؤشّر + شاشة التحميل =================================================================== */ .mg-progress{ position:fixed;top:0;left:0;height:2px;width:100%; transform:scaleX(0);transform-origin:0 50%; background:var(--mg-grad);z-index:9995;will-change:transform;pointer-events:none; } .mg-ring{ position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%; border:1.5px solid #B6FF3D;pointer-events:none;z-index:9999; opacity:0;transition:opacity .3s var(--mg-ease);will-change:transform; } .mg-dot{ position:fixed;top:0;left:0;width:4px;height:4px;border-radius:50%; background:#B6FF3D;box-shadow:0 0 6px rgba(182,255,61,.7);pointer-events:none;z-index:9999; opacity:0;transition:opacity .3s var(--mg-ease);will-change:transform; } body.mg-cursor-on .mg-ring, body.mg-cursor-on .mg-dot{opacity:1} @media (hover:none),(pointer:coarse){.mg-ring,.mg-dot{display:none!important}} /* ---- شاشة التحميل ---- */ .mg-pre{ position:fixed;inset:0;z-index:99999;background:var(--mg-deep);overflow:hidden; display:flex;align-items:center;justify-content:center; opacity:1;transition:opacity .6s var(--mg-ease); } .mg-pre.is-out{opacity:0} .mg-pre__glow{ position:absolute;width:70vw;height:70vw;max-width:900px;max-height:900px;border-radius:50%; background:radial-gradient(circle,rgba(var(--mg-a-rgb),.22),transparent 62%);filter:blur(60px); animation:mg-breathe 4s ease-in-out infinite; } @keyframes mg-breathe{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.12);opacity:1}} .mg-pre__brand{ position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center; } .mg-pre__mark{ height:clamp(46px,6vw,64px);width:auto;opacity:0;transform:translateY(10px) scale(.96);filter:blur(6px); animation:mg-pl-mark 1s var(--mg-ease) .1s forwards; } .mg-pre__tag{ font-family:'Cairo',sans-serif;font-size:12px;font-weight:700;letter-spacing:.22em; color:var(--mg-soft);opacity:0;animation:mg-pl-fade .8s var(--mg-ease) .45s forwards; } .mg-pre__line{ width:clamp(150px,40vw,240px);height:2px;border-radius:2px;overflow:hidden; background:rgba(255,255,255,.12);opacity:0;animation:mg-pl-fade .6s var(--mg-ease) .55s forwards; } .mg-pre__line i{ display:block;height:100%;width:0;border-radius:2px;background:var(--mg-grad); box-shadow:0 0 14px rgba(var(--mg-a-rgb),.8);animation:mg-pl-bar 1.8s var(--mg-ease) .35s forwards; } @keyframes mg-pl-mark{to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}} @keyframes mg-pl-fade{to{opacity:.92}} @keyframes mg-pl-bar{0%{width:0}70%{width:84%}100%{width:100%}} /* =================================================================== 2) الطباعة والأساسيات =================================================================== */ /* العربي محتاج تنفيس أكبر من اللاتيني، و letter-spacing السالب بيلخبط وصل الحروف */ body.x0t-mg h1, body.x0t-mg h2, body.x0t-mg h3, body.x0t-mg h4{font-weight:900;letter-spacing:0;line-height:1.38;color:var(--mg-text)} body.x0t-mg .section{padding-block:clamp(34px,4.4vh,66px)} body.x0t-mg .wrap{max-width:var(--wrap);padding-inline:var(--mg-shell)} /* شارة القسم — خط قصير + نص بلون الهوية (بديل eyebrow في Magnet) */ body.x0t-mg .eyebrow{ background:none;padding:0;border-radius:0;margin-bottom:20px; font-size:12px;font-weight:700;letter-spacing:.20em;color:var(--mg-soft); display:inline-flex;align-items:center;gap:14px; } body.x0t-mg .eyebrow::before{ content:"";width:30px;height:1px;border-radius:0;background:var(--mg-grad);flex:none; } /* ch في العربي ضيّقة جداً (26ch ≈ 285px) وكانت بتكسر العناوين لسطرين */ body.x0t-mg .section-head{max-width:min(960px,100%);margin-bottom:clamp(22px,2.6vw,38px)} body.x0t-mg .section-head.center{max-width:min(960px,100%);margin-inline:auto} body.x0t-mg h2.title{ font-size:clamp(1.35rem,2.5vw,2.2rem);line-height:1.34;max-width:none;text-wrap:balance; } body.x0t-mg .lead{color:var(--mg-muted);font-size:clamp(15px,1.3vw,18px);line-height:1.65} body.x0t-mg .section-head .lead{margin-top:16px;max-width:min(680px,100%)} body.x0t-mg .section-head.center .lead{margin-inline:auto} body.x0t-mg .x0t-sec{position:relative;overflow:hidden} body.x0t-mg .x0t-sec > .wrap{position:relative;z-index:1} /* سطور تظهر من تحت القناع */ body.x0t-mg .mg-line{display:block;overflow:hidden;padding-bottom:.32em;margin-bottom:-.32em} body.x0t-mg .mg-line > span{display:block;transform:translateY(108%)} body.x0t-mg .mg-line.in > span{transform:translateY(0)} /* الكشف عند التمرير. الإخفاء مشروط بكلاس mg-anim الذي تضيفه magnet.js بعد إقلاعها بنجاح، فلو تعطّلت الجافاسكربت لأي سبب يظهر المحتوى كاملاً بدل صفحة فاضية. */ html.mg-anim body.x0t-mg .reveal{opacity:0;transform:translateY(38px)} html.mg-anim body.x0t-mg .reveal.in{ opacity:1;transform:none; transition:opacity .9s var(--mg-ease),transform .9s var(--mg-ease); } html.mg-anim body.x0t-mg .mg-line > span{transform:translateY(108%)} body.x0t-mg .mg-line > span{transform:none} /* =================================================================== 3) الأزرار — تعبئة تصعد من الأسفل عند المرور =================================================================== */ body.x0t-mg .btn{ position:relative;overflow:hidden;isolation:isolate; font-weight:700;font-size:14.5px;letter-spacing:0; padding:15px 28px;min-height:50px;border-radius:100px; border:1px solid var(--mg-hair2);background:transparent;color:var(--mg-text); box-shadow:none;transition:color .4s var(--mg-ease),border-color .4s var(--mg-ease); } body.x0t-mg .btn > *, body.x0t-mg .btn svg{position:relative;z-index:1;color:inherit;transition:color .4s var(--mg-ease)} body.x0t-mg .btn{isolation:isolate} body.x0t-mg .btn svg{stroke:currentColor} /* z-index:-1 لا z-index:0 — العنصر المموضَع بـ 0 يُرسم فوق النص العاري داخل نفس سياق التكديس، فكانت التعبئة تغطّي الكتابة وتخفيها عند المرور. */ body.x0t-mg .btn::before{ content:"";position:absolute;inset:0;z-index:-1;background:var(--mg-grad); transform:translateY(102%);transition:transform .5s var(--mg-ease); } body.x0t-mg .btn:hover, body.x0t-mg .btn:hover *, body.x0t-mg .btn:focus-visible, body.x0t-mg .btn:focus-visible *{color:#fff;transform:none} body.x0t-mg .btn:hover, body.x0t-mg .btn:focus-visible{border-color:transparent;box-shadow:none} body.x0t-mg .btn:hover::before, body.x0t-mg .btn:focus-visible::before{transform:translateY(0)} body.x0t-mg .btn-cta{font-size:13px;padding:11px 20px;min-height:42px;gap:7px} body.x0t-mg .btn-cta svg{width:16px;height:16px} body.x0t-mg .btn-primary{background:var(--mg-grad);border-color:transparent;color:#fff} body.x0t-mg .btn-primary::before{background:#fff} body.x0t-mg .btn-primary:hover, body.x0t-mg .btn-primary:hover *, body.x0t-mg .btn-primary:focus-visible, body.x0t-mg .btn-primary:focus-visible *{color:#0A0A0A} body.x0t-mg .btn-ghost{border-color:var(--mg-hair2);color:var(--mg-text)} body.x0t-mg .btn-light{background:#fff;border-color:#fff;color:#0A0A0A} body.x0t-mg .btn-light *{color:#0A0A0A} body.x0t-mg .btn-light::before{background:var(--mg-grad)} body.x0t-mg .btn-light:hover, body.x0t-mg .btn-light:hover *{color:#fff} body.x0t-mg .btn-lime{background:var(--mg-grad);border-color:transparent;color:#fff} body.x0t-mg .btn-lime::before{background:#fff} body.x0t-mg .btn-lime:hover, body.x0t-mg .btn-lime:hover *{color:#0A0A0A} /* السهم القُطري (زي Magnet) — يتحرّك لبرّه عند المرور */ /* مقاس افتراضي للسهم — بدونه يرجع SVG لمقاس 300x150 الافتراضي */ body.x0t-mg .mg-arrow{width:16px;height:16px;flex:none} body.x0t-mg .btn .mg-arrow{width:15px;height:15px;flex:none;transition:transform .4s var(--mg-ease)} body.x0t-mg .btn:hover .mg-arrow{transform:translate(-3px,-3px)} /* =================================================================== 4) الشريط العلوي + الهيدر =================================================================== */ body.x0t-mg .topbar{ background:var(--mg-deep);color:#9aa0b8;font-size:12.5px;border-bottom:1px solid var(--mg-hair); } body.x0t-mg .topbar a{color:#9aa0b8} body.x0t-mg .topbar a:hover{color:var(--mg-soft)} body.x0t-mg .topbar .tb-social a{border-color:var(--mg-hair)} body.x0t-mg .topbar .tb-social a:hover{background:var(--mg-a);border-color:var(--mg-a);color:#fff} body.x0t-mg .site-header{ background:transparent;backdrop-filter:none;border-bottom:1px solid transparent; transition:background .45s var(--mg-ease),border-color .45s var(--mg-ease),backdrop-filter .45s var(--mg-ease); } body.x0t-mg .site-header.scrolled{ background:rgba(var(--mg-bg-rgb),.78);backdrop-filter:blur(16px); border-bottom:1px solid var(--mg-hair);box-shadow:none; } body.x0t-mg .header-inner{padding-block:12px;gap:0;align-items:center} body.x0t-mg .scrolled .header-inner{padding-block:8px} /* القائمة في منتصف الصفحة تماماً. space-between مع هوامش تلقائية يضع القائمة في منتصف *المساحة المتبقّية*، وبما أنّ عرض اللوجو يختلف عن عرض الزرار تنزاح عن المركز. شبكة بعمودين جانبيين متساويين (1fr) تضمن مركزاً حقيقياً مهما اختلفت أطراف الشريط. */ body.x0t-mg .header-inner{ display:grid;grid-template-columns:1fr auto 1fr;justify-content:initial; } body.x0t-mg .header-inner > .brand{justify-self:start} body.x0t-mg .header-inner > .nav{justify-self:center;margin-inline:0} body.x0t-mg .header-inner > .header-actions{justify-self:end;margin-inline-start:0} @media (max-width:900px){ /* القائمة مخفيّة على الجوال، فنرجع لصفّ عادي بطرفين */ body.x0t-mg .header-inner{display:flex;justify-content:space-between} } body.x0t-mg .brand{color:var(--mg-text);font-size:1.22rem;gap:12px} /* صورة اللوجو تحمل اسم العلامة أصلاً، فالنصّ المجاور تكرار. نخفيه بصرياً فقط — نصّ alt على الصورة يبقى للقارئات الشاشية. */ body.x0t-mg .site-header .brand .brand-name, body.x0t-mg .mnav .brand .brand-name{ position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap; } body.x0t-mg .site-header .brand, body.x0t-mg .mnav .brand{gap:0} /* نفس التكرار في التذييل: اللوجو يحمل الاسم */ body.x0t-mg .footer .brand > span{ position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap; } body.x0t-mg .footer .brand{gap:0} /* اللوجو عريض (1199×674). حشره في مربّع كان يعرضه بارتفاع ~26px فقط. نحرّر العرض ونثبّت الارتفاع فيظهر بنسبته الطبيعية وبحجم حقيقي. نحترم ارتفاع الـ Customizer لكن بسقف يمنع تضخّم الهيدر. */ body.x0t-mg .brand .mark{ width:auto;height:var(--x0t-logo-h,56px);max-width:none; max-width:170px;object-fit:contain;object-position:center; border-radius:0;box-shadow:none;background:transparent; transition:height .35s var(--mg-ease); } body.x0t-mg .scrolled .brand .mark{height:calc(var(--x0t-logo-h,48px) * .82)} @media (max-width:600px){ body.x0t-mg .brand .mark{height:min(var(--x0t-logo-h,44px),64px);max-width:160px} body.x0t-mg .brand{font-size:1.05rem;gap:9px} } body.x0t-mg .brand b{background:var(--mg-grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* روابط القائمة: خط سفلي يمتدّ من اليمين (RTL) */ body.x0t-mg .nav > li > a, body.x0t-mg .nav a{ position:relative;background:none!important;border-radius:0;padding:7px 0;margin-inline:13px; font-size:13.5px;font-weight:600;color:var(--mg-text); } body.x0t-mg .nav > li > a::after{ content:"";position:absolute;inset-inline:0;bottom:2px;height:1px;background:var(--mg-grad); transform:scaleX(0);transform-origin:right center;transition:transform .4s var(--mg-ease); } body.x0t-mg .nav > li > a:hover{color:var(--mg-soft)} body.x0t-mg .nav > li > a:hover::after, body.x0t-mg .nav > li.current-menu-item > a::after, body.x0t-mg .nav > li.current_page_item > a::after{transform:scaleX(1)} body.x0t-mg .nav > li.current-menu-item > a, body.x0t-mg .nav > li.current_page_item > a{color:var(--mg-soft)} body.x0t-mg .nav .sub-menu{ background:var(--mg-panel);border:1px solid var(--mg-hair);border-radius:6px;box-shadow:var(--shadow); } body.x0t-mg .nav .sub-menu a{color:var(--mg-muted);margin-inline:0;padding:10px 16px} body.x0t-mg .nav .sub-menu a::after{display:none} body.x0t-mg .nav .sub-menu a:hover{background:var(--mg-hover)!important;color:var(--mg-text)} body.x0t-mg .menu-toggle{background:transparent;border-color:var(--mg-hair2);border-radius:6px} body.x0t-mg .menu-toggle span{background:var(--mg-text)} /* قائمة الجوال — طبقة سوداء تنزل من الأعلى بعناوين ضخمة */ body.x0t-mg .mnav{background:var(--mg-bg)} body.x0t-mg .mnav-list > li > a{ font-size:clamp(22px,5.2vw,34px);font-weight:900;letter-spacing:0;line-height:1.4;color:var(--mg-text); } body.x0t-mg .mnav-list > li > a:hover{color:var(--mg-soft)} /* =================================================================== 5) الهيرو — شاشة كاملة + حقل جزيئات + توهّج =================================================================== */ body.x0t-mg .hero{ position:relative;min-height:clamp(560px,82svh,860px);display:flex;flex-direction:column;justify-content:center; padding-block:clamp(52px,8vh,96px) clamp(52px,8vh,96px); border-bottom:1px solid var(--mg-hair); } body.x0t-mg .hero .blob{display:none} body.x0t-mg .mg-hero-canvas{ position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none; } body.x0t-mg .mg-hero-glow{ position:absolute;top:-30vh;inset-inline-start:-16vw;z-index:0;pointer-events:none; width:80vw;height:80vw;max-width:1100px;max-height:1100px;border-radius:50%; background:radial-gradient(circle,rgba(var(--mg-a-rgb),var(--mg-glow)),rgba(var(--mg-b-rgb),calc(var(--mg-glow) * .5)) 45%,transparent 66%); filter:blur(50px); } body.x0t-mg .hero-slider, body.x0t-mg .hero-slides, body.x0t-mg .hero-slide{position:relative;z-index:2} body.x0t-mg .hero-grid{grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center} body.x0t-mg .hero h1{ font-size:clamp(1.7rem,3.6vw,3.15rem);line-height:1.34;font-weight:900; letter-spacing:0;max-width:19ch; } body.x0t-mg .hero h1 .hl{background:var(--mg-grad);-webkit-background-clip:text;background-clip:text;color:transparent} body.x0t-mg .hero .lead{margin:clamp(20px,2.6vw,32px) 0 clamp(26px,3.4vw,40px);max-width:58ch;color:var(--mg-text-2)} body.x0t-mg .hero-cta{gap:14px} body.x0t-mg .hero-card{ background:transparent;border:0;border-radius:0;overflow:visible;box-shadow:none; } body.x0t-mg .hero-card img{ filter:saturate(1.08) contrast(1.04) drop-shadow(0 30px 60px rgba(var(--mg-a-rgb),.35)); animation:mg-float 7s ease-in-out infinite;will-change:transform; } @keyframes mg-float{ 0%,100%{transform:translateY(0) rotate(0deg) scale(1)} 25%{transform:translateY(-16px) rotate(-1.2deg) scale(1.015)} 50%{transform:translateY(-6px) rotate(0deg) scale(1.005)} 75%{transform:translateY(-20px) rotate(1.2deg) scale(1.02)} } /* هالة ناعمة خلف الصورة بدل الصندوق الداكن */ body.x0t-mg .hero-visual{position:relative} body.x0t-mg .hero-visual::before{ content:"";position:absolute;inset:6% 10%;z-index:0;border-radius:50%; background:radial-gradient(circle,rgba(var(--mg-a-rgb),.28),rgba(var(--mg-b-rgb),.14) 45%,transparent 68%); filter:blur(48px);animation:mg-pulse 7s ease-in-out infinite; } @keyframes mg-pulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}} body.x0t-mg .hero-card{position:relative;z-index:1} /* أزرار وأنقُط السلايدر */ body.x0t-mg .hero-nav{ background:rgba(var(--mg-bg-rgb),.62);border:1px solid var(--mg-hair2);color:var(--mg-text); backdrop-filter:blur(8px);border-radius:50%; inset-inline-start:auto; } body.x0t-mg .hero-nav.prev{inset-inline-end:clamp(10px,1.6vw,26px)} body.x0t-mg .hero-nav.next{inset-inline-start:clamp(10px,1.6vw,26px)} body.x0t-mg .hero-nav:hover{background:var(--mg-grad);border-color:transparent;color:#fff} body.x0t-mg .hero-dots{gap:10px} body.x0t-mg .hero-dot{ width:30px;height:3px;border-radius:2px;background:rgba(255,255,255,.28);border:0; transition:.4s var(--mg-ease);cursor:pointer; } body.x0t-mg .hero-dot:hover{background:rgba(255,255,255,.5)} body.x0t-mg .hero-dot.is-active{width:56px;background:var(--mg-grad)} /* =================================================================== 6) البطاقات — «لماذا نحن» و«الخدمات» =================================================================== */ body.x0t-mg .cards{gap:clamp(14px,1.8vw,22px)} body.x0t-mg .card{ background:var(--mg-panel);border:1px solid var(--mg-hair);box-shadow:none; transition:transform .5s var(--mg-ease),border-color .5s var(--mg-ease),background .5s var(--mg-ease); } body.x0t-mg .card:hover{ transform:translateY(-10px);background:var(--mg-hover);border-color:var(--mg-hair2);box-shadow:none; } body.x0t-mg .card h3{font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:700;letter-spacing:-.01em} body.x0t-mg .card p{color:var(--mg-muted);font-size:14.5px;line-height:1.62} body.x0t-mg .card .ic{ width:46px;height:46px;border-radius:50%;background:transparent; border:1px solid var(--mg-hair2);color:var(--mg-soft); display:grid;place-items:center;box-shadow:none;transition:.45s var(--mg-ease); } body.x0t-mg .card:hover .ic{background:var(--mg-grad);border-color:transparent;color:#fff} /* بطاقات الخدمات: صورة + سهم يتحرّك */ body.x0t-mg .cards-service .card{overflow:hidden} body.x0t-mg .cards-service .card-media{position:relative;overflow:hidden;border-radius:0} body.x0t-mg .cards-service .card-media::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 35%,rgba(var(--mg-scrim-rgb),.85)); opacity:.9;transition:opacity .5s var(--mg-ease); } body.x0t-mg .cards-service .card:hover .card-media::after{opacity:.7} body.x0t-mg .cards-service .card-media img{ transition:transform .8s var(--mg-ease);transform:scale(1.02); } body.x0t-mg .cards-service .card:hover .card-media img{transform:scale(1.07)} body.x0t-mg .cards-service .card-body{text-align:start;padding:26px 28px 28px} body.x0t-mg .cards-service .card-btn{ background:transparent;border:1px solid var(--mg-hair2);color:var(--mg-text);box-shadow:none; } /* =================================================================== 7) شريط الأرقام — كتلة متدرّجة كاملة العرض =================================================================== */ body.x0t-mg .x0t-sec-stats{ background:var(--mg-bg);color:var(--mg-text);overflow:hidden; padding-block:clamp(34px,4.4vw,68px); } body.x0t-mg .x0t-sec-stats .section-head{margin-bottom:clamp(26px,3.2vw,44px)} /* الحجب المتدرّجة كانت لازمة للكتلة البنفسجية فقط */ body.x0t-mg .x0t-sec-stats::before{content:none} body.x0t-mg .x0t-sec-stats.band::after{background:none} body.x0t-mg .x0t-sec-stats .eyebrow{background:none;color:var(--mg-muted)} body.x0t-mg .x0t-sec-stats .eyebrow::before{background:var(--mg-soft)} body.x0t-mg .x0t-sec-stats h2.title{color:var(--mg-text)} body.x0t-mg .x0t-sec-stats .lead{color:var(--mg-muted);opacity:1} /* صفّ واحد يفصله خطّ شعري علوي — لا حدود جانبية ولا خلفية */ body.x0t-mg .stats{ display:flex;flex-wrap:wrap;gap:0; border-top:1px solid var(--mg-hair2); text-align:start; } body.x0t-mg .stat{ flex:1 1 0;min-width:150px; border:0;background:none; padding-block:26px 0; padding-inline:0 clamp(14px,2vw,30px); } body.x0t-mg .stat .n{ font-weight:900;letter-spacing:-.04em;line-height:1; font-size:clamp(30px,3.4vw,50px); background:none;-webkit-background-clip:border-box;background-clip:border-box; -webkit-text-fill-color:var(--mg-text);color:var(--mg-text); } body.x0t-mg .stat .l{ margin-top:8px;font-size:clamp(11px,.95vw,13px);font-weight:600; letter-spacing:.12em;color:var(--mg-muted); } @media (max-width:680px){ body.x0t-mg .stat{flex:1 1 45%} } /* =================================================================== 8) خطوات العمل — قسم مثبّت تتقدّم خطواته مع التمرير =================================================================== */ /* تصميم الثيم الأصلي (دوائر متّصلة) لكن على الخلفية الداكنة */ body.x0t-mg .steps.steps-flow{ display:grid;grid-template-columns:repeat(var(--stepcols,4),minmax(0,1fr)); gap:0 18px;margin-top:8px;border:0; } body.x0t-mg .steps-flow .step{ position:relative;display:block;background:transparent;border:0;box-shadow:none; border-radius:0;padding:0 8px;min-height:0;text-align:center; } body.x0t-mg .steps-flow .step::after{display:none} body.x0t-mg .steps-flow .step:not(:last-child)::before{ display:block;content:"";position:absolute;top:34px;inset-inline-start:50%; width:100%;height:2px;background:var(--mg-hair);z-index:0;transform:none; } body.x0t-mg .steps-flow .step-ic{ position:relative;z-index:1;width:68px;height:68px;margin:0 auto 18px; border-radius:50%;display:grid;place-items:center; background:var(--mg-grad);color:#fff; border:5px solid var(--mg-bg); box-shadow:0 12px 28px -12px rgba(var(--mg-a-rgb),.75); transition:transform .5s var(--mg-ease),box-shadow .5s var(--mg-ease); } body.x0t-mg .steps-flow .step:hover .step-ic, body.x0t-mg .steps-flow .step.is-on .step-ic{ transform:translateY(-4px) scale(1.05);box-shadow:0 18px 36px -12px rgba(var(--mg-a-rgb),.9); } body.x0t-mg .steps-flow .step-ic svg{width:26px;height:26px} body.x0t-mg .steps-flow .step h3{margin:0 0 8px;font-size:clamp(1rem,1.35vw,1.15rem)} body.x0t-mg .steps-flow .step p{ color:var(--mg-muted);font-size:.94rem;line-height:1.7;margin:0; max-width:260px;margin-inline:auto; } /* القسم داخل خلفية surface: حدّ الأيقونة يطابق تلك الخلفية */ body.x0t-mg .sec-bg-surface .steps-flow .step-ic{border-color:var(--mg-panel)} @media (max-width:900px){ body.x0t-mg .steps.steps-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 18px} body.x0t-mg .steps-flow .step:not(:last-child)::before{display:none} } @media (max-width:560px){ body.x0t-mg .steps.steps-flow{grid-template-columns:1fr} } /* =================================================================== 9) شريط الشركاء — قناع جانبي + توقّف عند المرور =================================================================== */ body.x0t-mg .x0t-sec-partners{padding-block:clamp(32px,3.8vw,54px)} body.x0t-mg .x0t-sec-partners .section-head{margin-bottom:clamp(22px,2.6vw,34px)} body.x0t-mg .x0t-sec-partners .pmarquee{ border-top:1px solid var(--mg-hair);border-bottom:1px solid var(--mg-hair); background:transparent;padding-block:clamp(18px,2.2vw,30px);overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } body.x0t-mg .pm-track{gap:0;align-items:center;will-change:transform} body.x0t-mg .pm-group{display:flex;align-items:center;gap:0;flex:0 0 auto} body.x0t-mg .ps-item{ background:transparent;border:0;box-shadow:none; flex:0 0 auto;width:auto;padding-inline:clamp(26px,3.4vw,58px);gap:8px; } body.x0t-mg .ps-logo{min-height:0;padding:0;width:auto} body.x0t-mg .ps-logo img{max-height:96px;width:auto} body.x0t-mg .ps-item:hover .ps-logo{transform:none} body.x0t-mg .ps-logo img{ filter:grayscale(1) brightness(2.2) contrast(.7);opacity:.72;transition:.4s var(--mg-ease); } body.x0t-mg .ps-item:hover .ps-logo img{filter:none;opacity:1} body.x0t-mg .pmarquee:hover .pm-track{animation-play-state:paused} /* =================================================================== 10) آراء العملاء =================================================================== */ body.x0t-mg .tm-card{ background:var(--mg-panel);border:1px solid var(--mg-hair);box-shadow:none; transition:border-color .5s var(--mg-ease),background .5s var(--mg-ease); } body.x0t-mg .tm-card:hover{border-color:var(--mg-hair2);background:var(--mg-hover)} body.x0t-mg .tm-quote{color:var(--mg-text-2);font-size:clamp(15px,1.35vw,18px);line-height:1.7} body.x0t-mg .tm-stars i.on{color:var(--mg-soft)} body.x0t-mg .tm-av{background:var(--mg-grad);color:#fff} body.x0t-mg .tms-dots button{background:rgba(255,255,255,.2)} body.x0t-mg .tms-dots button.is-active{background:var(--mg-grad)} body.x0t-mg .tm-nav button{background:transparent;border:1px solid var(--mg-hair2);color:var(--mg-text)} body.x0t-mg .tm-nav button:hover{background:var(--mg-grad);border-color:transparent;color:#fff} /* =================================================================== 11) الأسئلة الشائعة — صفوف بخطوط شعرية =================================================================== */ body.x0t-mg .faq{border-top:1px solid var(--mg-hair);max-width:none;margin-inline:0} body.x0t-mg .q{ background:transparent;border:0;border-bottom:1px solid var(--mg-hair); border-radius:0;box-shadow:none;margin:0;position:relative; } body.x0t-mg .q::before{ content:"";position:absolute;inset:0;background:rgba(var(--mg-a-rgb),.05); transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--mg-ease); } body.x0t-mg .q:hover::before, body.x0t-mg .q.open::before{transform:scaleY(1)} body.x0t-mg .q-head{ position:relative;z-index:1;padding:clamp(20px,2.4vw,30px) 0; font-size:clamp(1rem,1.7vw,1.35rem);font-weight:700;color:var(--mg-text); } body.x0t-mg .q.open .q-head{color:var(--mg-soft)} /* max-height:0 لا يمنع ظهور الحشو، فكان بيسيب شريط فاضي تحت كل سؤال مقفول */ body.x0t-mg .q-body{position:relative;z-index:1;color:var(--mg-muted);padding:0} body.x0t-mg .q-body p{padding:0 0 clamp(18px,2vw,26px);margin:0;color:var(--mg-muted);font-size:15px;line-height:1.75} body.x0t-mg .q .pm{ border:1px solid var(--mg-hair2);color:var(--mg-soft);background:transparent;border-radius:50%; } body.x0t-mg .q.open .pm{background:var(--mg-grad);border-color:transparent;color:#fff} /* =================================================================== 12) نداء الإجراء — كتلة فاتحة للتباين (نفس إيقاع Magnet) =================================================================== */ body.x0t-mg .x0t-sec-cta{padding-block:clamp(42px,5vw,76px);background:var(--mg-bg)} body.x0t-mg .x0t-sec-cta .wrap{max-width:var(--wrap);padding-inline:var(--mg-shell)} body.x0t-mg .cta{ background:var(--mg-panel);border:1px solid var(--mg-hair);border-radius:12px; padding:clamp(38px,5vw,72px) clamp(24px,4vw,64px); text-align:center;overflow:hidden;color:var(--mg-text); max-width:min(1180px,100%);margin-inline:auto;box-shadow:none; } body.x0t-mg .cta::before{ background:radial-gradient(circle at 50% -10%,rgba(var(--mg-a-rgb),.20),transparent 62%); } body.x0t-mg .cta h2, body.x0t-mg .cta h3{ color:var(--mg-text);font-size:clamp(1.35rem,2.5vw,2.2rem);font-weight:900; letter-spacing:0;line-height:1.34;max-width:min(760px,100%);margin:0 auto; } body.x0t-mg .cta p{color:var(--mg-muted);max-width:min(700px,100%);margin:16px auto 0} body.x0t-mg .cta-actions{justify-content:center;margin-top:clamp(26px,3.4vw,40px)} body.x0t-mg .cta .btn{border-color:var(--mg-hair2);color:var(--mg-text)} body.x0t-mg .cta .btn::before{background:var(--mg-grad)} body.x0t-mg .cta .btn:hover, body.x0t-mg .cta .btn:hover *{color:#fff} body.x0t-mg .cta .btn-lime{background:var(--mg-grad);border-color:transparent;color:#fff} body.x0t-mg .cta .btn-lime::before{background:#fff} body.x0t-mg .cta .btn-lime:hover, body.x0t-mg .cta .btn-lime:hover *{color:#0A0A0A} body.x0t-mg .cta .btn-light{background:transparent;border-color:var(--mg-hair2);color:var(--mg-text)} body.x0t-mg .cta .btn-light *{color:inherit} /* صفّ التواصل داخل بطاقة الـ CTA (هاتف · واتساب · اتصال · بريد) */ body.x0t-mg .cta-contact{ display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between; background:var(--mg-field);border:1px solid var(--mg-hair);border-radius:10px; padding:12px 12px 12px 12px;margin-top:clamp(24px,3vw,36px); } body.x0t-mg .cta-contact .cc-num{ font-weight:900;font-size:clamp(1.05rem,1.8vw,1.5rem);letter-spacing:0; color:var(--mg-text);direction:ltr;padding-inline:14px; } body.x0t-mg .cta-contact .cc-btns{display:flex;gap:10px;flex-wrap:wrap} body.x0t-mg .cta-mail{ display:flex;align-items:center;justify-content:center;gap:10px; margin-top:12px;padding:14px 18px;border:1px solid var(--mg-hair);border-radius:100px; color:var(--mg-text);font-weight:700;font-size:14.5px;transition:.35s var(--mg-ease); } body.x0t-mg .cta-mail:hover{border-color:var(--mg-soft);color:var(--mg-soft)} body.x0t-mg .cta-mail svg{width:17px;height:17px} @media (max-width:640px){ body.x0t-mg .cta-contact{justify-content:center;text-align:center} body.x0t-mg .cta-contact .cc-btns{justify-content:center;width:100%} } /* =================================================================== 13) قسم التضمين + التذييل =================================================================== */ body.x0t-mg .x0t-embed{background:var(--mg-panel);border:1px solid var(--mg-hair);border-radius:6px;overflow:hidden} body.x0t-mg .footer{background:var(--mg-deep);color:var(--mg-muted);border-top:1px solid var(--mg-hair)} body.x0t-mg .footer h4{color:var(--mg-text);font-size:12px;letter-spacing:.18em;font-weight:700} body.x0t-mg .footer a{color:var(--mg-muted);transition:color .3s var(--mg-ease)} body.x0t-mg .footer a:hover{color:var(--mg-soft)} body.x0t-mg .footer .news input{ background:transparent;border:1px solid rgba(255,255,255,.16);color:#eaecf5;border-radius:100px; } body.x0t-mg .footer .news button{background:var(--mg-grad);color:#fff;border:0;border-radius:100px} body.x0t-mg .footer .news input::placeholder{color:#6f748a} body.x0t-mg .footer-bottom{border-top:1px solid rgba(255,255,255,.09);color:#6f748a} body.x0t-mg .fsoc a{border:1px solid var(--mg-hair);color:var(--mg-muted);background:transparent} body.x0t-mg .fsoc a:hover{background:var(--mg-grad);border-color:transparent;color:#fff} body.x0t-mg .totop{background:var(--mg-grad);color:#fff;border:0;box-shadow:var(--shadow)} /* =================================================================== 14) الاستجابة + تفضيل تقليل الحركة =================================================================== */ @media (max-width:980px){ body.x0t-mg .hero-grid{grid-template-columns:1fr} body.x0t-mg .hero{min-height:72svh;padding-block:clamp(70px,12vh,110px) clamp(46px,8vh,80px)} } @media (max-width:640px){ body.x0t-mg .hero{min-height:78svh} body.x0t-mg .section{padding-block:clamp(38px,6vh,62px)} body.x0t-mg .cta{padding:clamp(30px,7vw,48px) clamp(18px,5vw,28px)} } @media (prefers-reduced-motion:reduce){ body.x0t-mg .reveal{opacity:1!important;transform:none!important} body.x0t-mg .mg-line > span{transform:none!important} body.x0t-mg .pm-track{animation:none!important} .mg-pre__mark,.mg-pre__tag,.mg-pre__line,.mg-pre__line i,.mg-pre__glow{animation:none!important;opacity:1!important;transform:none!important;filter:none!important} .mg-pre__line i{width:100%!important} } /* =================================================================== التذييل والشريط العلوي يبقيان داكنين في الوضعين — تباين مقصود =================================================================== */ html[data-theme="light"] body.x0t-mg .footer{color:#9aa0b8} html[data-theme="light"] body.x0t-mg .footer h4{color:#f4f5fa} html[data-theme="light"] body.x0t-mg .footer a{color:#9aa0b8} html[data-theme="light"] body.x0t-mg .footer a:hover{color:#a892ff} html[data-theme="light"] body.x0t-mg .footer .fsoc a{border-color:rgba(255,255,255,.16);color:#9aa0b8} html[data-theme="light"] body.x0t-mg .topbar{color:#9aa0b8;border-bottom-color:rgba(255,255,255,.09)} html[data-theme="light"] body.x0t-mg .topbar a{color:#9aa0b8} html[data-theme="light"] body.x0t-mg .topbar .tb-social a{border-color:rgba(255,255,255,.14)} /* زرّ تبديل الوضع — كان مخفياً لأن الطبقة كانت تفرض الداكن */ body.x0t-mg .mode-toggle{ display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto; background:transparent;border:1px solid var(--mg-hair2);border-radius:50%; color:var(--mg-text);cursor:pointer;transition:.35s var(--mg-ease); } body.x0t-mg .mode-toggle:hover{border-color:var(--mg-soft);color:var(--mg-soft)} body.x0t-mg .mode-toggle svg{width:18px;height:18px} body.x0t-mg .header-actions{display:flex;align-items:center;gap:10px} /* =================================================================== 15) الموبايل — هيرو مختصر على الشاشة الصغيرة كانت صورة السلايدر تقع خلف النصّ فيصعب قراءة الاثنين، والسطر التعريفي + الفقرة يدفعان الأزرار تحت الطيّة. نُبقي العنوان والأزرار فقط. =================================================================== */ @media (max-width:640px){ body.x0t-mg .hero .hero-visual{display:none} body.x0t-mg .hero .eyebrow{display:none} body.x0t-mg .hero .lead{display:none} body.x0t-mg .hero-cta .btn{font-size:.82rem;padding:12px 18px} /* بعد حذف الصورة والنصّين لم يبقَ ما يملأ 78svh */ body.x0t-mg .hero{min-height:40svh} } /* =================================================================== 16) الموبايل — محاذاة الهيرو والأرقام الهيرو كان يرث text-align:start فيلتصق كل شيء بيمين الشاشة بينما ترويسة الأقسام تحته متوسّطة، وسطر العنوان 1.15 لا يكفي للعربية فتتلامس الأسطر. والأرقام كانت محاذاة يميناً داخل خاناتها. =================================================================== */ @media (max-width:640px){ body.x0t-mg .hero .hero-grid{text-align:center} body.x0t-mg .hero h1{line-height:1.45;text-wrap:balance;margin-inline:auto} body.x0t-mg .hero-cta{justify-content:center} body.x0t-mg .stats{justify-content:center} body.x0t-mg .stats .stat{text-align:center} }