/* ==== بداية كود CSS للصفحة الرئيسية المخصصة عبر الإضافة [my_custom_homepage] ==== */ /* أنماط أساسية تطبق على body الصفحة التي يتم فيها استخدام الشورت كود [my_custom_homepage]. مهم: هذه الأنماط قد تحتاج إلى تعديل أو استهداف أكثر تحديدًا لتجنب التأثير على صفحات أخرى، خاصة إذا لم يكن قالب الصفحة فارغًا تمامًا. ملاحظة: يُفضل أن تقوم الإضافة بإضافة الكلاس 'my-custom-homepage-active' إلى عبر فلتر 'body_class' في PHP لضمان تطبيق هذه الأنماط بشكل موثوق. */ body.page-template-blank #page, body.page-template-default #page, /* قد تحتاج لإضافة معرفات قوالب أخرى هنا */ body.my-custom-homepage-active { /* كلاس يمكنك إضافته عبر PHP إذا استخدمت الشورت كود */ margin: 0 !important; padding: 0 !important; background-color: #EAEAEA; /* لون الخلفية الأساسي تحت كل شيء */ height: 100vh; /* لضمان أن body يملأ ارتفاع الشاشة */ overflow: hidden; /* لمنع أي تمرير غير مرغوب فيه */ } html, body.page-template-blank, body.page-template-default, body.my-custom-homepage-active { height: 100%; width: 100%; overflow: hidden; /* لمنع أي تمرير غير مرغوب فيه */ } #custom-homepage-container { /* متغيرات CSS للألوان والميلان */ --mchp-slant-angle: 50px; --mchp-cnc-bg-color: #333333; --mchp-cnc-text-color: #ffffff; --mchp-cnc-icon-color: #FFD700; --mchp-digital-bg-color: #FFD700; --mchp-digital-text-color: #333333; --mchp-digital-icon-color: #333333; --mchp-learn-bg-color: #f5f5f5; --mchp-learn-text-color: #333333; --mchp-learn-icon-color: #FFD700; display: flex; flex-direction: column; width: 100vw; height: 100vh; overflow: hidden; position: relative; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* --- أنماط الأيقونة (صورة PNG) العائمة في وسط أسفل الصفحة --- */ /* استهداف الأيقونة مباشرة تحت #custom-homepage-container */ #custom-homepage-container > .mchp-page-icon { position: absolute; /* لجعلها تطفو فوق المحتوى الآخر */ bottom: 20px; /* المسافة من الحافة السفلية للحاوية الرئيسية (الشاشة) */ left: 50%; /* لتوسيطها أفقيًا */ transform: translateX(-50%); /* لضبط التوسيط الأفقي بدقة */ z-index: 10; /* للتأكد من أنها فوق جميع الأقسام الأخرى (الأقسام تصل إلى z-index: 4 عند المرور) */ line-height: 0; /* جيد لحاويات الصور لتجنب مسافات إضافية */ background-color: transparent; /* خلفية شفافة للأيقونة نفسها */ padding: 0; /* إزالة أي حشوة قديمة */ } #custom-homepage-container .mchp-page-icon img { /* ينطبق على الصورة داخل حاوية الأيقونة */ display: block; max-width: 100px; /* الحجم الافتراضي للأيقونة، يمكنك تعديله */ max-height: 100px; /* الحجم الافتراضي للأيقونة */ height: auto; /* للحفاظ على نسبة العرض إلى الارتفاع */ } #custom-homepage-container .diag-section { flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; box-sizing: border-box; text-decoration: none; position: relative; transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease; /* إخبار المتصفح بأن هذه الخصائص ستتغير لتحسين الأداء */ will-change: transform, filter; } /* --- القسم الأول: ماكينات CNC --- */ #custom-homepage-container .section-cnc { background-color: var(--mchp-cnc-bg-color); color: var(--mchp-cnc-text-color); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--mchp-slant-angle)), 0 100%); margin-bottom: calc(-1 * var(--mchp-slant-angle)); z-index: 3; } #custom-homepage-container .section-cnc .diag-icon .fas.fa-cogs { display: inline-block; animation-name: mchp-spin; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite; color: var(--mchp-cnc-icon-color); font-size: 2.5em; margin-bottom: 15px; } #custom-homepage-container .section-cnc .diag-content h2, #custom-homepage-container .section-cnc .diag-content p { color: var(--mchp-cnc-text-color); } /* --- القسم الثاني: منتجات رقمية --- */ #custom-homepage-container .section-digital { background-color: var(--mchp-digital-bg-color); color: var(--mchp-digital-text-color); clip-path: polygon(0 var(--mchp-slant-angle), 100% 0, 100% calc(100% - var(--mchp-slant-angle)), 0 100%); margin-top: calc(-1 * var(--mchp-slant-angle)); margin-bottom: calc(-1 * var(--mchp-slant-angle)); z-index: 2; } #custom-homepage-container .section-digital .diag-icon .fas.fa-palette { color: var(--mchp-digital-icon-color); font-size: 2.5em; margin-bottom: 15px; } #custom-homepage-container .section-digital .diag-content h2, #custom-homepage-container .section-digital .diag-content p { color: var(--mchp-digital-text-color); } /* --- القسم الثالث: تعلم --- */ #custom-homepage-container .section-learn { background-color: var(--mchp-learn-bg-color); color: var(--mchp-learn-text-color); clip-path: polygon(0 var(--mchp-slant-angle), 100% 0, 100% 100%, 0 100%); margin-top: calc(-1 * var(--mchp-slant-angle)); z-index: 1; } #custom-homepage-container .section-learn .diag-icon .fas.fa-book-open { color: var(--mchp-learn-icon-color); font-size: 2.5em; margin-bottom: 15px; margin-top:30px; } #custom-homepage-container .section-learn .diag-content h2, #custom-homepage-container .section-learn .diag-content p { color: var(--mchp-learn-text-color); } /* --- تنسيق المحتوى الداخلي للأقسام (عام) --- */ #custom-homepage-container .diag-content h2 { font-size: 1.8em; margin-top: 0; margin-bottom: 8px; font-weight: 600; } #custom-homepage-container .diag-content p { font-size: 1em; margin-bottom: 0; line-height: 1.4; } /* --- تأثيرات عند مرور الفأرة (Hover) --- */ #custom-homepage-container .diag-section:hover { transform: scale(1.02); filter: brightness(105%); /* إذا استمرت مشكلة نعومة الحركة، يمكن تجربة إزالة هذا السطر أو استبداله */ z-index: 4 !important; /* Important to ensure hovered section is above others but below the main icon */ } #custom-homepage-container .section-cnc:hover { box-shadow: 0px 5px 20px rgba(255, 255, 255, 0.25); } #custom-homepage-container .section-digital:hover { box-shadow: 0px 5px 20px rgba(80, 80, 80, 0.25); } #custom-homepage-container .section-learn:hover { box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2); } /* تعريف إطارات الحركة (keyframes) لدوران أيقونة المسننات */ @keyframes mchp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* --- تعديلات للشاشات الصغيرة (Responsive) --- */ @media (max-width: 768px) { #custom-homepage-container { --mchp-slant-angle: 35px; } /* تعديل موضع وحجم الأيقونة الرئيسية في الشاشات الصغيرة */ #custom-homepage-container > .mchp-page-icon { bottom: 15px; /* تقليل المسافة من الأسفل قليلاً */ } #custom-homepage-container .mchp-page-icon img { max-width: 80px; /* تصغير الأيقونة قليلاً للشاشات المتوسطة */ max-height: 80px; } #custom-homepage-container .section-cnc .diag-icon .fas.fa-cogs, #custom-homepage-container .section-digital .diag-icon .fas.fa-palette, #custom-homepage-container .section-learn .diag-icon .fas.fa-book-open { font-size: 2.2em; margin-bottom: 10px; } #custom-homepage-container .diag-content h2 { font-size: 1.6em; } #custom-homepage-container .diag-content p { font-size: 0.9em; } } @media (max-width: 480px) { #custom-homepage-container { --mchp-slant-angle: 25px; } /* تعديل موضع وحجم الأيقونة الرئيسية في الشاشات الأصغر */ #custom-homepage-container > .mchp-page-icon { bottom: 10px; /* تقليل المسافة من الأسفل أكثر */ } #custom-homepage-container .mchp-page-icon img { max-width: 60px; /* تصغير الأيقونة أكثر للشاشات الصغيرة جداً */ max-height: 60px; } #custom-homepage-container .section-cnc .diag-icon .fas.fa-cogs, #custom-homepage-container .section-digital .diag-icon .fas.fa-palette, #custom-homepage-container .section-learn .diag-icon .fas.fa-book-open { font-size: 2em; margin-bottom: 8px; } #custom-homepage-container .diag-content h2 { font-size: 1.4em; } #custom-homepage-container .diag-content p { font-size: 0.85em; } } /* ==== نهاية كود CSS للصفحة الرئيسية المخصصة ==== */