/* =================================================================== X0T — طبقة الحركة الإضافية "motion-plus" إضافات حركية فوق طبقة magnet: بارالاكس، كشف بقصّ، لمعة على العناوين، توهّج يتبع المؤشّر، تدوير روابط القائمة، تعبئة سائلة للأزرار، وميلان خفيف يتبع سرعة التمرير. قواعد ملتزمة من الطبقة الأصلية: - لا مكتبات خارجية إطلاقاً. - لا نضع overflow على أبداً. - لا يُخفى أي محتوى من CSS وحده. كل حالة «قبل الظهور» مشروطة بـ ‎html.mgp-on‎ التي تضيفها الجافاسكربت، ولها صمّام أمان زمني — فلو تعطّل السكربت تظهر الصفحة كاملة كما هي. - العربية متصلة الحروف: لا نقسّم النصّ إلى حروف مفردة إطلاقاً، لأن ذلك يفكّ اتصال الحروف. كل حركة على النصّ تتعامل مع الكلمة/السطر كوحدة. =================================================================== */ body.x0t-mg{ --mgp-vel:0; /* سرعة التمرير المُطبَّعة، من -1 إلى 1 */ --mgp-skew:0deg; /* الميلان المشتقّ منها */ --mgp-ease:cubic-bezier(.16,1,.3,1); } /* =================================================================== 1) كشف بقصّ (wipe) للوسائط — ستارة تنكشف مع دخول العنصر =================================================================== */ html.mgp-on body.x0t-mg .mgp-wipe{ clip-path:inset(0 0 100% 0); transition:clip-path 1.05s var(--mgp-ease); will-change:clip-path; } html.mgp-on body.x0t-mg .mgp-wipe.mgp-in{clip-path:inset(0 0 0 0)} /* الصورة نفسها تتقدّم من تكبير خفيف — يعطي إحساس «كاميرا». نستخدم خاصيّة scale المستقلّة لا transform: نفس الصورة تحمل بارالاكس عبر transform، ولو تشارك الاثنان الخاصيّة نفسها ألغى أحدهما الآخر. */ html.mgp-on body.x0t-mg .mgp-wipe img{ scale:1.12; transition:scale 1.5s var(--mgp-ease); will-change:scale; } html.mgp-on body.x0t-mg .mgp-wipe.mgp-in img{scale:1} /* =================================================================== 2) بارالاكس — انزياح رأسي محسوب بجافاسكربت =================================================================== */ body.x0t-mg .mgp-par{ transform:translate3d(0,var(--mgp-y,0px),0); will-change:transform; } /* =================================================================== 3) ميلان يتبع سرعة التمرير — بصمة ماجنت. على الوسائط فقط، لا على النصّ، حتى تبقى القراءة مريحة. =================================================================== */ body.x0t-mg .mgp-skew{ transform:skewY(var(--mgp-skew,0deg)); transition:transform .2s linear; will-change:transform; } /* =================================================================== 4) لمعة تمرّ على العنوان عند ظهوره =================================================================== */ html.mgp-on body.x0t-mg .mgp-sheen{ background-image:linear-gradient( 100deg, currentColor 0%, currentColor 38%, var(--mg-soft) 47%, #ffffff 51%, var(--mg-soft) 55%, currentColor 64%, currentColor 100% ); background-size:280% 100%; background-position:220% 0; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } html.mgp-on body.x0t-mg .mgp-sheen.mgp-in{ transition:background-position 1.5s cubic-bezier(.22,.61,.36,1) .15s; background-position:-60% 0; } /* بعد انتهاء اللمعة نُعيد اللون الطبيعي حتى لا يبقى النصّ معتمداً على القصّ */ html.mgp-on body.x0t-mg .mgp-sheen.mgp-done{ background-image:none; -webkit-text-fill-color:currentColor; } /* =================================================================== 5) توهّج وحافة مضيئة يتبعان المؤشّر داخل البطاقات =================================================================== */ /* التوهّج يجلس فوق خلفية البطاقة وتحت محتواها. لهذا ترفع الجافاسكربت الأبناء ذوي الوضع static إلى z-index:1 — ولا تلمس أي ابن مُموضَع أصلاً حتى لا ينكسر أي تخطيط قائم. */ body.x0t-mg .mgp-glow{position:relative;isolation:isolate} body.x0t-mg .mgp-glow > .mgp-lift{position:relative;z-index:1} body.x0t-mg .mgp-glow::after{ content:"";position:absolute;inset:0;z-index:0; border-radius:inherit;pointer-events:none; opacity:0;transition:opacity .35s var(--mgp-ease); background:radial-gradient( 320px circle at var(--mgp-mx,50%) var(--mgp-my,50%), rgba(var(--mg-a-rgb),.20), rgba(var(--mg-b-rgb),.10) 40%, transparent 68% ); } body.x0t-mg .mgp-glow:hover::after{opacity:1} body.x0t-mg .mgp-glow::before{ content:"";position:absolute;inset:0;z-index:2; border-radius:inherit;pointer-events:none; padding:1px; background:radial-gradient( 260px circle at var(--mgp-mx,50%) var(--mgp-my,50%), var(--mg-soft), transparent 60% ); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; opacity:0;transition:opacity .35s var(--mgp-ease); } body.x0t-mg .mgp-glow:hover::before{opacity:.85} /* =================================================================== 6) تدوير روابط القائمة — الكلمة كاملة، فلا يتأثّر اتصال الحروف =================================================================== */ body.x0t-mg .mgp-roll{ display:inline-block;overflow:hidden;vertical-align:bottom; line-height:1.45; } body.x0t-mg .mgp-roll > .mgp-rollin{ display:inline-block;position:relative; transition:transform .46s var(--mgp-ease); will-change:transform; } body.x0t-mg .mgp-roll > .mgp-rollin::after{ content:attr(data-t); position:absolute;inset-inline-start:0;top:100%; white-space:nowrap;color:var(--mg-soft); } body.x0t-mg a:hover > .mgp-roll > .mgp-rollin, body.x0t-mg li:hover > a > .mgp-roll > .mgp-rollin{transform:translateY(-100%)} /* =================================================================== 7) تعبئة سائلة للأزرار تنطلق من موضع المؤشّر =================================================================== */ /* نفس المبدأ: التعبئة فوق خلفية الزرّ وتحت نصّه. الجافاسكربت تلفّ نصّ الزرّ في ‎.mgp-lbl‎ لأن العقد النصّية المجرّدة لا يمكن رفعها بـ z-index. */ body.x0t-mg .mgp-fill{position:relative;overflow:hidden;isolation:isolate} body.x0t-mg .mgp-fill > .mgp-lbl, body.x0t-mg .mgp-fill > svg{position:relative;z-index:2} body.x0t-mg .mgp-fill::after{ content:"";position:absolute;z-index:1; top:var(--mgp-my,50%);inset-inline-start:var(--mgp-mx,50%); width:0;height:0;border-radius:50%; transform:translate(50%,-50%); background:var(--mg-grad); transition:width .55s var(--mgp-ease),height .55s var(--mgp-ease),opacity .3s ease; opacity:0;pointer-events:none; } body.x0t-mg .mgp-fill:hover::after{width:280%;height:620%;opacity:1} /* =================================================================== 8) خط ضوئي يمشي على الفواصل =================================================================== */ body.x0t-mg .mgp-rule{ position:relative;height:1px;border:0;margin:0; background:var(--mg-hair);overflow:hidden; } body.x0t-mg .mgp-rule::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent,var(--mg-soft),transparent); transform:translateX(-100%); animation:mgp-rule-run 4.5s linear infinite; } @keyframes mgp-rule-run{to{transform:translateX(100%)}} /* =================================================================== احترام تفضيل تقليل الحركة — كل شيء يسكن ويظهر فوراً =================================================================== */ @media (prefers-reduced-motion: reduce){ html.mgp-on body.x0t-mg .mgp-wipe, html.mgp-on body.x0t-mg .mgp-wipe img{ clip-path:none !important;transform:none !important;scale:1 !important; transition:none !important; } html.mgp-on body.x0t-mg .mgp-sheen{ background-image:none !important;-webkit-text-fill-color:currentColor !important; } body.x0t-mg .mgp-par, body.x0t-mg .mgp-skew{transform:none !important} body.x0t-mg .mgp-roll > .mgp-rollin{transition:none !important} body.x0t-mg .mgp-rule::after{animation:none} } /* =================================================================== لوحة الخدمة البديلة — تظهر فقط للخدمات بلا صورة بارزة =================================================================== */ body.x0t-mg .mgp-svc-tile{ display:grid;place-items:center;width:100%;height:100%;min-height:220px; background: radial-gradient(120% 90% at 78% 12%, rgba(var(--mg-a-rgb),.42), transparent 62%), radial-gradient(100% 80% at 12% 92%, rgba(var(--mg-b-rgb),.34), transparent 60%), linear-gradient(150deg,#12101f,#0a0a10 62%); position:relative;overflow:hidden; } /* شبكة خفيفة تعطي عمقاً بدل السطح المصمت */ body.x0t-mg .mgp-svc-tile::before{ content:"";position:absolute;inset:0;opacity:.5; background-image: linear-gradient(var(--mg-hair) 1px,transparent 1px), linear-gradient(90deg,var(--mg-hair) 1px,transparent 1px); background-size:38px 38px; -webkit-mask:radial-gradient(75% 75% at 50% 50%,#000,transparent 78%); mask:radial-gradient(75% 75% at 50% 50%,#000,transparent 78%); } body.x0t-mg .mgp-svc-tile i{ position:relative;font-size:clamp(38px,4.6vw,60px); background:var(--mg-grad);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 10px 30px rgba(var(--mg-a-rgb),.45)); } html[data-theme="light"] body.x0t-mg .mgp-svc-tile{ background: radial-gradient(120% 90% at 78% 12%, rgba(var(--mg-a-rgb),.20), transparent 62%), radial-gradient(100% 80% at 12% 92%, rgba(var(--mg-b-rgb),.16), transparent 60%), linear-gradient(150deg,#ffffff,#f1f2f8 62%); } /* لوحة الهوية نفسها لبطاقات الرئيسية التي بلا صورة بعد */ body.x0t-mg .mgw-media:not(:has(img)){ background: radial-gradient(120% 90% at 78% 12%, rgba(var(--mg-a-rgb),.45), transparent 62%), radial-gradient(100% 80% at 12% 92%, rgba(var(--mg-b-rgb),.36), transparent 60%), linear-gradient(150deg,#12101f,#0a0a10 62%); } body.x0t-mg .mgw-media:not(:has(img))::after{ content:"";position:absolute;inset:0;opacity:.45;pointer-events:none; background-image: linear-gradient(var(--mg-hair) 1px,transparent 1px), linear-gradient(90deg,var(--mg-hair) 1px,transparent 1px); background-size:38px 38px; -webkit-mask:radial-gradient(75% 75% at 50% 50%,#000,transparent 78%); mask:radial-gradient(75% 75% at 50% 50%,#000,transparent 78%); } /* =================================================================== 9) المؤشّر — الحلقة كانت تكبر وتمتلئ باللون والتسمية داخلها فارغة، فتظهر ككتلة بنفسجية بلا معنى. الآن: تمتلئ فقط حين توجد تسمية (وهذا ما تفعله magnetofficial بالضبط)، وإلا تكبر كحلقة مفرغة. =================================================================== */ /* الحلقة كانت تظهر خضراء في الوضع الفاتح، والسبب mix-blend-mode:difference: يطرح لون الأكسنت من الخلفية — (246,247,251) − (90,47,208) = (156,200,43) أي أصفر مخضرّ. المزج مصمَّم لخلفية ماجنت شبه السوداء وحدها. نلغيه ونستعمل لون الهوية مباشرةً فيبقى بنفسجياً في الوضعين. */ .mg-ring{ mix-blend-mode:normal; border-color:var(--mg-soft); } .mg-dot{ mix-blend-mode:normal; background:var(--mg-soft); } body.mg-cursor-grow:not(.mg-cursor-lbl) .mg-ring{ width:54px;height:54px; background:transparent; mix-blend-mode:difference; border-color:var(--mg-soft); border-width:1.5px; } body.mg-cursor-grow.mg-cursor-lbl .mg-ring{ width:66px;height:66px; background:var(--mg-soft); mix-blend-mode:normal; border-color:var(--mg-soft); box-shadow:0 10px 34px -10px rgba(var(--mg-a-rgb),.7); } body.mg-cursor-grow.mg-cursor-lbl .mg-ring .mg-clabel{ opacity:1;color:#0A0A0A;font-size:11px;font-weight:800; } /* =================================================================== 10) الهيرو على تخطيط magnetofficial: النصّ يملأ العرض بحجم ضخم، والصورة تنزل خلفه كطبقة خافتة محجوبة من جهة النصّ. لا تغيير في أي HTML — نفس السلايدات الثلاث بمحتواها. =================================================================== */ body.x0t-mg .hero.has-slider{ min-height:100svh; padding-block:clamp(120px,18vh,215px) clamp(40px,8vh,90px); } /* الشبكة عمودان → كتلة واحدة، فيأخذ النصّ العرض كلّه. ‎.hero-slide‎ حاوية مرنة، فكان ‎.wrap‎ يتقلّص إلى عرض محتواه (794px داخل قسم عرضه 1385px) بدل بلوغ حدّه الأقصى — لذا نفرض عليه العرض الكامل. ونجعل ‎.wrap‎ و‎.hero-grid‎ بوضع static حتى تتموضع الصورة نسبةً إلى ‎.hero-slide‎ فتمتدّ إلى حافة القسم كما في ماجنت، لا نسبةً إلى الشبكة. */ body.x0t-mg .hero-slide > .wrap{ position:static; width:100%;flex:1 1 100%; max-width:var(--wrap);margin-inline:auto; } body.x0t-mg .hero.has-slider .hero-grid{display:block;position:static} body.x0t-mg .hero.has-slider .hero-grid > *:first-child{position:relative;z-index:2;width:100%} body.x0t-mg .hero .eyebrow{margin-bottom:clamp(20px,3vw,36px)} body.x0t-mg .hero h1{ font-size:clamp(2.1rem,6.1vw,5.3rem); line-height:1.15; letter-spacing:-.02em; max-width:17ch; font-weight:900; } body.x0t-mg .hero .lead{ margin:clamp(22px,3vw,36px) 0 clamp(28px,3.6vw,42px); max-width:60ch; font-size:clamp(15px,1.3vw,19px); line-height:1.75; } /* الصورة تصير طبقة خلفية على الجهة المقابلة للنصّ (يسار في RTL) */ /* في RTL النصّ على اليمين، فالصورة تجلس على الطرف المقابل: inset-inline-END هو الحافة اليسرى هنا. الصورة المستعملة الآن ‎x0t-hero-soft.png‎ نسخة معالَجة بـGD من الأصل: قناة الشفافية مضروبة في تدرّج بيضاوي، فذابت الحواف المستقيمة للكتلة المعتمة المدموجة في الملف — وهي التي كانت تظهر كإطار مربّع. لهذا لم نعد نحتاج أي قناع في CSS، وصار بالإمكان تكبيرها وزيادة وضوحها. */ body.x0t-mg .hero-visual{ position:absolute; inset-inline-end:0; inset-inline-start:auto; inset-block-start:50%; transform:translateY(-50%); width:min(58%,760px); aspect-ratio:1; z-index:0;margin:0;pointer-events:none; display:grid;place-items:stretch; } body.x0t-mg .hero-visual::after{content:none} body.x0t-mg .hero-visual::before{inset:6%} body.x0t-mg .hero-visual .hero-card{ aspect-ratio:1 !important; width:100% !important;height:100% !important;max-width:100% !important; display:grid;place-items:center; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; overflow:visible !important; } body.x0t-mg .hero-visual .hero-card img{ width:100% !important;height:100% !important;max-width:100% !important; object-fit:contain; opacity:.62; filter:saturate(1.02) contrast(1.04); } @media (max-width:900px){ body.x0t-mg .hero.has-slider{min-height:88svh} body.x0t-mg .hero-visual{ width:min(92%,420px);inset-inline:auto 0; } body.x0t-mg .hero-visual .hero-card img{opacity:.30} body.x0t-mg .hero h1{max-width:none} } /* =================================================================== الموبايل — تنفيس أسطر عنوان الهيرو 1.15 مقاس لاتيني؛ في العربية على 3 أسطر تتلامس النقاط والذيول. القاعدة هنا لأن motion-plus.css يُحمّل بعد magnet.css فيفوز عليه. =================================================================== */ @media (max-width:640px){ body.x0t-mg .hero h1{line-height:1.42} }