/* ============================================================= إضافات شباب تك — تُحمَّل بعد ملفات القالب الأصلي القاعدة: لا نُعيد تعريف مكوّنات القالب، بل نضيف ما لا يوجد فيه (بطاقات الأعمال، الشارات، المرشّحات، نموذج التواصل، شريط الأرقام). الألوان مأخوذة من القالب: #756de7 · #3f3d59 · #65d692 · #5d9cec ============================================================= */ /* ============================================================= 1. الحركة — كشف تدريجي عند التمرير ============================================================= */ /* ⚠️ الإخفاء مشروط بـ .js-anim التي يضيفها سكربت مضمّن في . بلا جافاسكربت — أو لو فشل المراقب لأي سبب — يبقى المحتوى ظاهراً. المحتوى المخفي أسوأ بكثير من محتوى بلا حركة. */ .js-anim .reveal { opacity: 0; -webkit-transform: translateY(28px); transform: translateY(28px); -webkit-transition: opacity 0.7s cubic-bezier(0.22, 0.68, 0.35, 1), transform 0.7s cubic-bezier(0.22, 0.68, 0.35, 1); transition: opacity 0.7s cubic-bezier(0.22, 0.68, 0.35, 1), transform 0.7s cubic-bezier(0.22, 0.68, 0.35, 1); will-change: opacity, transform; } .js-anim .reveal.is-visible { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* تدرّج زمني للعناصر المتجاورة داخل صف واحد */ .reveal-d1 { transition-delay: 0.08s; } .reveal-d2 { transition-delay: 0.16s; } .reveal-d3 { transition-delay: 0.24s; } .reveal-d4 { transition-delay: 0.32s; } .reveal-d5 { transition-delay: 0.4s; } /* نبضة خفيفة دائمة لأيقونات الأقسام */ @-webkit-keyframes soft-float { 0%, 100% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(-9px); } } @keyframes soft-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .float-slow { -webkit-animation: soft-float 4.5s ease-in-out infinite; animation: soft-float 4.5s ease-in-out infinite; } /* من يفضّل تقليل الحركة يرى المحتوى ثابتاً وظاهراً */ @media (prefers-reduced-motion: reduce) { .js-anim .reveal { opacity: 1; -webkit-transform: none; transform: none; transition: none; } .float-slow, .icons-animation-holder .aicon { -webkit-animation: none !important; animation: none !important; opacity: 1 !important; } } /* ============================================================= مقاسات النص — تكبير درجة واحدة عن القالب القالب صُمّم لنص لاتيني؛ العربية تحتاج مقاساً أكبر قليلاً وارتفاع سطر أعلى لتُقرأ بالراحة نفسها. العناوين تُترك كما هي. ============================================================= */ body { font-size: 17px; line-height: 1.9; } /* نص الخدمات والمزايا وبطاقات القطاعات */ .service-box .service-details, .service-box .service-details p { font-size: 17px; line-height: 1.95; } #features-holder .feature-box .feature-details, #features-holder .feature-box .feature-details p { font-size: 18px; line-height: 1.9; } #more-features .mfeature-box .mfeature-details { font-size: 16px; line-height: 1.85; } .mega-box .mega-title { font-size: 16px; } .mega-box .mega-details { font-size: 16px; } /* بطاقات الأسعار في صفحة الاستضافة */ .pricing-box .pricing-content .pricing-details p { font-size: 15px; line-height: 30px; } /* فقرة القصة في الرئيسية */ #info .info-text { font-size: 23px; line-height: 1.85; } /* الفوتر */ #footer ul.footer-menu li a { font-size: 16px; } #footer .address div, #footer .phone a, #footer .email a { font-size: 16px; } /* التنقل العلوي — القالب يستخدم .navbar-default فنطابق تخصيصه */ .navbar-default .navbar-nav > li > a { font-size: 15px; } /* نص شرائط الفعل */ .message-area .text-other-color2 { font-size: 19px; } @media (max-width: 767px) { body { font-size: 16px; } #info .info-text { font-size: 19px; } #features-holder .feature-box .feature-details, #features-holder .feature-box .feature-details p { font-size: 17px; } } /* ---------- عام ---------- */ .sec-lead { color: #7a7896; font-size: 17px; font-weight: 300; line-height: 2; max-width: 760px; margin: 0 auto 20px; text-align: center; } .center-action { text-align: center; margin-top: 35px; } .also-line { text-align: center; color: #87838e; font-size: 16px; font-weight: 300; margin-top: 30px; line-height: 2; } .also-line a { color: #756de7; } .also-line a:hover { text-decoration: underline; } /* ---------- أزرار شريحة الهيرو ---------- */ /* ملاحظة: القالب يخفي أول عنصرين في كل شريحة (opacity:0) ويُظهرهما عبر كلاس .animated الذي يضيفه السكربت — فبقاء العنصرين اثنين مقصود. */ /* عنوان الشريحة الأولى وسم h1 لا div — نلغي هوامش المتصفح الافتراضية ليطابق مظهر بقية الشرائح تماماً. */ #top-content h1.big-title { margin-top: 0; } /* الشريحة الأولى بلا أيقونة دائرية، فتكون أقصر من بقية الشرائح ويقصر معها الهيرو البنفسجي كله. نوحّد الارتفاع بما يطابق ارتفاع شرائح القالب. */ #main-slider .slide { min-height: 330px; } #main-slider .slide.hero-first { padding-top: 58px; } @media (max-width: 767px) { #main-slider .slide { min-height: 280px; } #main-slider .slide.hero-first { padding-top: 30px; } } #main-slider .slide .buttons-holder { text-align: center; } #main-slider .slide .buttons-holder .ybtn { margin: 0 6px 12px; } /* ---------- شريط الأرقام ---------- حُذف تنسيق #stats القديم بالكامل. سببان: 1. لم يعد له ترميز: صفّ الأرقام صار مكوّن StatStrip بأصناف .ent-stat، وتنسيقه في enterprise.css. 2. كان يحمل خللين ظاهرين: خلفية `rebeccapurple` — وهي لون افتراضي لا صلة له بالهوية، ويناقض تعليق الكتلة نفسه الذي وصفها بأنها «خفيفة على أبيض» — وأربعة ألوان نيون متنافرة للأرقام. ملاحظة للمستقبل: `#stats` محدّد مُعرِّف (1,0,0)، فلو بقي هنا لغلب `.ent-stats` مهما تأخّر ملفها في الترتيب. */ /* ---------- بطاقات إثبات الحجم ---------- تحاكي #pricing في الأصل: شريط لوني مائل خلف بطاقات بيضاء بارزة. */ #scale { padding-top: 60px; padding-bottom: 60px; position: relative; text-align: center; } #scale .bg-color { background-color: #d6e0f5; position: absolute; width: 100%; height: 100%; left: 0; -webkit-transform: skewY(-10deg) scaleY(0.7); -moz-transform: skewY(-10deg) scaleY(0.7); -ms-transform: skewY(-10deg) scaleY(0.7); transform: skewY(-10deg) scaleY(0.7); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; z-index: -1; } #scale .bg-color { left: inherit; right: 0; -webkit-transform: skewY(10deg) scaleY(0.7); -moz-transform: skewY(10deg) scaleY(0.7); -ms-transform: skewY(10deg) scaleY(0.7); transform: skewY(10deg) scaleY(0.7); } #scale .scale-box { background-color: #ffffff; border-radius: 9px; padding: 34px 22px; margin-top: 18px; margin-bottom: 18px; text-align: center; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; -webkit-box-shadow: 0 10px 30px rgba(69, 84, 122, 0.14); box-shadow: 0 10px 30px rgba(69, 84, 122, 0.14); } #scale .scale-box:hover { -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-box-shadow: 0 18px 40px rgba(69, 84, 122, 0.2); box-shadow: 0 18px 40px rgba(69, 84, 122, 0.2); } #scale .scale-icon { display: block; font-size: 44px; line-height: 60px; width: 70px; height: 70px; padding: 10px; border-radius: 50%; margin: 0 auto 16px; } #scale .scale-box:nth-child(1) .scale-icon, #scale .col-sm-6:nth-child(1) .scale-icon { color: #756de7; } #scale .scale-value { color: #756de7; font-size: 32px; font-weight: 500; display: block; line-height: 1.25; unicode-bidi: plaintext; } /* الألوان مُعرَّفة مرة واحدة أدناه لسبع بطاقات — راجع «ألوان بطاقات القدرة» */ #scale .scale-box:hover .scale-icon { -webkit-transform: scale(1.12); transform: scale(1.12); -webkit-transition: all 0.35s ease 0s; transition: all 0.35s ease 0s; } #scale .scale-label { color: #4a4a4a; font-size: 16px; font-weight: 400; margin-top: 12px; margin-bottom: 14px; line-height: 1.8; } #scale .scale-attr { color: #a09dad; font-size: 13px; font-weight: 300; border-top: 1px solid #eeeef4; padding-top: 12px; display: block; line-height: 1.7; } /* ---------- قسم التطبيقات (يستعمل تدرّج #apps من القالب) ---------- */ #apps .apps-count { margin-bottom: 45px; } #apps .apps-num { color: #ffffff; display: block; font-size: 58px; font-weight: 500; line-height: 1.1; text-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); unicode-bidi: plaintext; } #apps .apps-text { color: #cfc9f6; display: block; font-size: 18px; font-weight: 300; margin-top: 12px; line-height: 1.9; } #apps .app-kind { padding: 18px 6px; } #apps .app-kind-icon { background-color: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; color: #ffffff; display: inline-block; font-size: 26px; height: 66px; line-height: 66px; margin-bottom: 12px; text-align: center; width: 66px; -webkit-transition: all 0.35s ease 0s; transition: all 0.35s ease 0s; } #apps .app-kind:hover .app-kind-icon { background-color: rgba(255, 255, 255, 0.22); -webkit-transform: translateY(-6px); transform: translateY(-6px); } #apps .app-kind-title { color: #dddde8; display: block; font-size: 15px; font-weight: 300; } #apps .center-action { margin-top: 30px; } @media (max-width: 767px) { #apps .apps-num { font-size: 44px; } } /* ---------- إيقاع خلفيات الأقسام ---------- يتبع تناوب القالب الأصلي: أبيض ← شريط لوني مائل ← أبيض ← رمادي فاتح. لا كتلة داكنة قبل الفوتر. */ #industries { background-color: #f9f9fd; padding-top: 55px; padding-bottom: 55px; text-align: center; } #industries .mega-link { display: block; } /* شارات التقنيات — شريط داخل قسم «كيف نعمل» لا قسماً مستقلاً، حتى لا تطول الصفحة بقسم إضافي بلا خلفية مميّزة. */ .tech-strip { border-top: 1px solid #eeeef4; margin-top: 45px; padding-top: 40px; text-align: center; } .tech-strip-title { color: #3f3d59; font-size: 20px; font-weight: 500; margin-bottom: 22px; } .tech-strip .tag-list { display: inline-block; margin-bottom: 10px; } /* ---------- بطاقة عمل ---------- */ .work-box { display: block; background-color: #ffffff; border: 1px solid #eeeef4; border-radius: 10px; padding: 28px 24px; margin-top: 15px; margin-bottom: 15px; height: calc(100% - 30px); -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.08); box-shadow: 0 0 0 rgba(0, 0, 0, 0.08); -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .work-box:hover, .work-box:focus { text-decoration: none; -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); } /* أيقونة دائرية ملوّنة أعلى البطاقة — نفس روح .mega-icon في القالب */ .work-box .work-icon { border-radius: 50%; color: #ffffff; display: inline-block; font-size: 24px; height: 54px; line-height: 54px; margin-bottom: 18px; text-align: center; width: 54px; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .work-box:hover .work-icon { -webkit-transform: scale(1.1) rotate(-6deg); transform: scale(1.1) rotate(-6deg); } .work-icon.wc-erp { background-image: linear-gradient(-30deg, #b3aff2, #756de7); box-shadow: 0 8px 18px rgba(117, 109, 231, 0.4); } .work-icon.wc-integrations { background-image: linear-gradient(-30deg, #7cc0f8, #5d9cec); box-shadow: 0 8px 18px rgba(93, 156, 236, 0.4); } .work-icon.wc-ecommerce { background-image: linear-gradient(-30deg, #84ebad, #26dd6c); box-shadow: 0 8px 18px rgba(38, 221, 108, 0.35); } .work-icon.wc-education { background-image: linear-gradient(-30deg, #f1a9f7, #f16ff9); box-shadow: 0 8px 18px rgba(241, 111, 249, 0.35); } .work-icon.wc-crm { background-image: linear-gradient(-30deg, #9c8df1, #6057e3); box-shadow: 0 8px 18px rgba(96, 87, 227, 0.4); } .work-icon.wc-mobile { background-image: linear-gradient(-30deg, #ffc48c, #ff9a5a); box-shadow: 0 8px 18px rgba(255, 154, 90, 0.35); } .work-icon.wc-cloud { background-image: linear-gradient(-30deg, #8fa6c9, #526489); box-shadow: 0 8px 18px rgba(82, 100, 137, 0.35); } .work-icon.wc-ai { background-image: linear-gradient(-30deg, #c48cf5, #8700ee); box-shadow: 0 8px 18px rgba(135, 0, 238, 0.3); } .work-box .work-meta { font-size: 14px; color: #a09dad; font-weight: 300; margin-bottom: 14px; line-height: 1.8; } .work-box .work-meta .work-type { color: #756de7; font-weight: 500; } .work-box .work-meta .sep { padding: 0 6px; opacity: 0.5; } .work-box .work-title { color: #4a4a4a; font-size: 18px; font-weight: 500; line-height: 1.75; margin-bottom: 16px; } .work-box:hover .work-title { color: #756de7; } .work-box .work-impact { background-color: rgba(101, 214, 146, 0.1); border-radius: 8px; color: #2f7a51; font-size: 15px; font-weight: 400; line-height: 1.85; padding: 13px 15px; margin-bottom: 16px; } .work-box .work-impact .fa { color: #65d692; margin-left: 6px; } .work-box .work-more { color: #756de7; font-size: 15px; font-weight: 500; display: block; margin-top: 4px; } .work-box .work-more .fa { margin-right: 5px; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .work-box:hover .work-more .fa { -webkit-transform: translateX(-5px); transform: translateX(-5px); } /* ---------- شارات التقنيات ---------- */ .tag-list { list-style: none; padding: 0; margin: 0 0 14px; } .tag-list li { display: inline-block; background-color: #f7f7fb; border: 1px solid #eeeef4; border-radius: 20px; color: #7a7896; font-size: 14px; font-weight: 300; padding: 4px 12px; margin: 0 0 6px 6px; line-height: 1.7; unicode-bidi: plaintext; } .tag-list.tag-lg li { font-size: 15px; padding: 7px 18px; background-color: #ffffff; } /* ---------- مرشّحات صفحة الأعمال ---------- */ .work-filters { text-align: center; margin-bottom: 30px; } .work-filters .filter-btn { display: inline-block; background-color: #ffffff; border: 1px solid #eeeef4; border-radius: 25px; color: #7a7896; font-family: inherit; font-size: 15px; font-weight: 400; padding: 8px 20px; margin: 0 0 8px 8px; cursor: pointer; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .work-filters .filter-btn:hover { border-color: #b3aff2; color: #756de7; } .work-filters .filter-btn.is-active { background-color: #756de7; border-color: #756de7; color: #ffffff; font-weight: 500; -webkit-box-shadow: 0 8px 18px rgba(117, 109, 231, 0.35); box-shadow: 0 8px 18px rgba(117, 109, 231, 0.35); } .work-filters .filter-btn .count { font-size: 12px; opacity: 0.7; margin-right: 5px; unicode-bidi: plaintext; } .work-empty { text-align: center; color: #a09dad; padding: 50px 0; } /* ---------- ملاحظة السرية ---------- */ .nda-note { background-color: #f7f7fb; border: 1px solid #eeeef4; border-radius: 10px; padding: 28px 30px; margin-top: 45px; } .nda-note p { color: #7a7896; font-size: 16px; font-weight: 300; line-height: 2; margin-bottom: 18px; } .nda-note p strong { color: #4a4a4a; font-weight: 500; } /* ---------- متن الصفحات الداخلية ---------- */ .page-body { color: #6b6979; font-size: 17px; font-weight: 300; line-height: 2.05; } .page-body h2 { color: #3f3d59; font-size: 24px; font-weight: 500; margin-top: 45px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #eeeef4; line-height: 1.6; position: relative; } /* خط لوني قصير تحت العنوان — نفس فكرة .row-title:after في القالب */ .page-body h2:after { background-image: -webkit-linear-gradient(-30deg, #b3aff2, #756de7); background-image: linear-gradient(-30deg, #b3aff2, #756de7); border-radius: 3px; bottom: -1px; content: ""; height: 3px; position: absolute; right: 0; width: 54px; } .page-body h3 { color: #756de7; font-size: 18px; font-weight: 500; margin-top: 32px; margin-bottom: 12px; line-height: 1.7; padding-right: 18px; position: relative; } /* نقطة ملوّنة أمام العناوين الفرعية */ .page-body h3:before { background-image: -webkit-linear-gradient(-30deg, #b3aff2, #756de7); background-image: linear-gradient(-30deg, #b3aff2, #756de7); border-radius: 50%; content: ""; height: 9px; position: absolute; right: 0; top: 12px; width: 9px; } .page-body h4 { color: #4a4a4a; font-size: 17px; font-weight: 500; margin-top: 24px; margin-bottom: 10px; } .page-body p { margin-bottom: 18px; } .page-body strong { color: #4a4a4a; font-weight: 500; } .page-body ul { list-style: none; padding: 0; margin: 0 0 20px; } .page-body ul li { position: relative; padding-right: 24px; margin-bottom: 10px; } .page-body ul li:before { content: ""; position: absolute; right: 6px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background-color: #9c8df1; -webkit-box-shadow: 0 0 0 4px rgba(156, 141, 241, 0.15); box-shadow: 0 0 0 4px rgba(156, 141, 241, 0.15); } /* الفقرة الأولى بعد كل h2 أكبر قليلاً — تكسر رتابة كتلة النص */ .page-body h2 + p { color: #5f5d70; font-size: 18px; } .page-body ol { padding-right: 22px; margin-bottom: 20px; } .page-body ol li { margin-bottom: 10px; } .page-body hr { border-top: 1px solid #eeeef4; margin: 40px 0; } .page-body blockquote { background-color: #f7f7fb; border-right: 4px solid #9c8df1; border-left: 0; border-radius: 8px 0 0 8px; color: #7a7896; font-size: 16px; padding: 18px 22px; margin: 28px 0; } .page-body blockquote p:last-child { margin-bottom: 0; } .page-body a { color: #756de7; font-weight: 400; } .page-body a:hover { text-decoration: underline; } .page-body code { background-color: #f7f7fb; border: 1px solid #eeeef4; border-radius: 4px; color: #6b6979; font-size: 14px; padding: 2px 8px; unicode-bidi: plaintext; } .page-body .table-wrap { overflow-x: auto; border: 1px solid #eeeef4; border-radius: 10px; margin: 28px 0; } .page-body table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 16px; } .page-body thead { background-color: #f7f7fb; } .page-body th, .page-body td { padding: 13px 16px; text-align: right; border-bottom: 1px solid #eeeef4; vertical-align: top; } .page-body th { color: #3f3d59; font-weight: 500; white-space: nowrap; } .page-body tbody tr:last-child td { border-bottom: 0; } /* ---------- العمود الجانبي لصفحة العمل ---------- */ .side-box { background-color: #ffffff; border: 1px solid #eeeef4; border-radius: 10px; padding: 24px 22px; margin-bottom: 22px; } .side-box .side-title { color: #a09dad; font-size: 14px; font-weight: 500; margin-bottom: 16px; letter-spacing: 0.5px; } .side-box dl { margin: 0; } .side-box dt { color: #a09dad; font-size: 13px; font-weight: 300; margin-top: 12px; } .side-box dt:first-child { margin-top: 0; } .side-box dd { color: #4a4a4a; font-size: 16px; font-weight: 400; margin: 3px 0 0; line-height: 1.8; } .side-box .side-impact { background-color: rgba(101, 214, 146, 0.1); border-radius: 8px; color: #2f7a51; font-size: 14px; line-height: 1.85; padding: 12px 14px; margin-top: 18px; } .side-box .side-impact .fa { color: #65d692; margin-left: 6px; } .side-box ul.plain { list-style: none; padding: 0; margin: 0; } .side-box ul.plain li { color: #7a7896; font-size: 15px; font-weight: 300; line-height: 1.85; margin-bottom: 8px; } .side-box ul.plain li a { color: #756de7; } .side-box ul.plain li a:hover { text-decoration: underline; } /* ---------- فتات الخبز ---------- */ .crumbs { color: rgba(255, 255, 255, 0.55); font-size: 14px; font-weight: 300; margin-bottom: 18px; position: relative; z-index: 10; } .crumbs a { color: rgba(255, 255, 255, 0.8); } .crumbs a:hover { color: #ffffff; text-decoration: none; } .crumbs .sep { padding: 0 8px; opacity: 0.5; } #page-head .page-lead { color: rgba(255, 255, 255, 0.75); font-size: 18px; font-weight: 300; line-height: 2; max-width: 780px; margin-top: 18px; position: relative; z-index: 10; } #page-head .page-eyebrow { color: rgba(255, 255, 255, 0.65); font-size: 15px; font-weight: 400; margin-bottom: 10px; position: relative; z-index: 10; } /* ============================================================= ترويسة الصفحات الداخلية — نفس الشكل المائل في الرئيسية ============================================================= */ /* الأصل يجعل الترويسة الداخلية مستطيلاً بنفسجياً مسطّحاً بحافة مقطوعة. هنا نُبقي آلية الرئيسية نفسها: الحاوية بيضاء و.bg-animation المائلة هي ما يرسم البنفسجي، فتنتهي الترويسة بحافة مائلة لا بقطع حاد. */ #header-holder.inner-hero { /*background-color: #ffffff;*/ } /* هندسة الشكل المائل — تصحيح لعيب في القالب الأصلي. الميل skewY(-10°) يزيح الحافة رأسياً بمقدار (العرض ÷ 2) × tan(10°) ≈ 8.8% من عرض الشاشة، بينما القالب يحدّد الإزاحة العلوية بنسبة مئوية من ارتفاع الترويسة (-20%). فوق 1600px تكبر الإزاحة على الارتفاع وتظهر فجوة بيضاء في الزاوية العليا — في الرئيسية والصفحات الداخلية معاً. الحل: ربط الإزاحة العلوية بعرض الشاشة (11vw > 8.8vw) مع إبقاء الحافة السفلى عند 88% من الترويسة كما في الأصل، فيبقى القطع المائل ظاهراً. */ #header-holder .bg-animation { top: -11vw; height: calc(88% + 11vw); } #header-holder.inner-hero #page-head { padding-top: 45px; padding-bottom: 135px; } @media (max-width: 767px) { #header-holder.inner-hero #page-head { padding-top: 25px; padding-bottom: 55px; } } /* ============================================================= خلفيات أقسام الصفحات الداخلية نفس لغة الرئيسية: أبيض ← شريط مائل ← رمادي فاتح ← أبيض ============================================================= */ /* قسم عادي على أبيض */ .sec { padding-top: 55px; padding-bottom: 55px; position: relative; } /* قسم برمادي القالب المسطّح — نفس .message-area.normal-bg */ .sec-tint { background-color: #f9f9fd; } /* قسم بشريط لوني مائل خلفه — نفس .message-area .bg-color */ .sec-band { overflow: hidden; } .sec-band .bg-color { background-color: #f6f9fc; position: absolute; width: 100%; height: 100%; left: 0; top: 0; -webkit-transform: skewY(10deg) scaleY(1.15); -moz-transform: skewY(10deg) scaleY(1.15); -ms-transform: skewY(10deg) scaleY(1.15); transform: skewY(10deg) scaleY(1.15); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; z-index: -1; } /* شريط أزرق أعمق — للأقسام التي تحمل ثقلاً بصرياً أكبر */ .sec-band.band-blue .bg-color { background-color: #d6e0f5; } /* ---------- خطوات "كيف نعمل" ---------- */ .step-box { background-color: #ffffff; border: 1px solid #eeeef4; border-radius: 10px; padding: 26px 26px; margin-bottom: 16px; -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); } .step-box .step-num { background-color: #f2f0fe; border-radius: 10px; color: #756de7; display: inline-block; font-size: 18px; font-weight: 500; height: 42px; line-height: 42px; text-align: center; width: 42px; float: right; margin-left: 18px; unicode-bidi: plaintext; } .step-box .step-content { overflow: hidden; } .step-box .step-title { color: #4a4a4a; font-size: 18px; font-weight: 500; margin-bottom: 8px; line-height: 1.7; } .step-box .step-text { color: #7a7896; font-size: 16px; font-weight: 300; line-height: 1.95; margin: 0; } /* ---------- نموذج التواصل ---------- */ .contact-form-box { background-color: #ffffff; border: 1px solid #eeeef4; border-radius: 10px; padding: 34px 32px; -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06); } .honest-note { background-color: #f4f3fe; border: 1px solid #e3e0fb; border-radius: 10px; padding: 18px 22px; margin-bottom: 30px; } .honest-note p { color: #6b6979; font-size: 16px; font-weight: 300; line-height: 1.95; margin: 0; } .honest-note .fa { color: #756de7; margin-left: 8px; } .form-field { margin-bottom: 20px; } .form-field label { color: #4a4a4a; font-size: 15px; font-weight: 400; display: block; margin-bottom: 8px; } .form-field label .req { color: #d94a4a; } .form-field input[type="text"], .form-field input[type="email"], .form-field input[type="tel"], .form-field select, .form-field textarea { background-color: #ffffff; border: 1px solid #dedde8; border-radius: 8px; color: #4a4a4a; display: block; font-family: inherit; font-size: 16px; padding: 12px 16px; width: 100%; -webkit-transition: all 0.25s ease 0s; transition: all 0.25s ease 0s; } .form-field textarea { line-height: 1.9; resize: vertical; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #756de7; outline: none; -webkit-box-shadow: 0 0 0 3px rgba(117, 109, 231, 0.14); box-shadow: 0 0 0 3px rgba(117, 109, 231, 0.14); } .form-field input[aria-invalid="true"], .form-field select[aria-invalid="true"], .form-field textarea[aria-invalid="true"] { border-color: #d94a4a; } .form-hint { color: #a09dad; font-size: 14px; font-weight: 300; line-height: 1.8; margin: -10px 0 20px; } .form-privacy { color: #a09dad; font-size: 14px; font-weight: 300; margin-top: 16px; } .form-status { border-radius: 8px; font-size: 16px; line-height: 1.9; margin-top: 20px; padding: 15px 18px; } .form-status.success { background-color: rgba(101, 214, 146, 0.13); border: 1px solid rgba(101, 214, 146, 0.4); color: #2f7a51; } .form-status.error { background-color: rgba(217, 74, 74, 0.09); border: 1px solid rgba(217, 74, 74, 0.3); color: #b03b3b; } /* الإخفاء بالقصّ لا بالإزاحة: الإزاحة السالبة في RTL توسّع الصفحة أفقياً */ .hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---------- قنوات التواصل ---------- */ .channel-list { list-style: none; padding: 0; margin: 0; } .channel-list li { margin-bottom: 18px; } .channel-list li:last-child { margin-bottom: 0; } .channel-list .ch-icon { background-color: #f2f0fe; border-radius: 9px; color: #756de7; display: block; float: right; font-size: 17px; height: 38px; line-height: 38px; margin-left: 14px; text-align: center; width: 38px; } .channel-list .ch-icon.wa { background-color: #25d366; color: #ffffff; } .channel-list .ch-body { overflow: hidden; } .channel-list .ch-body strong { color: #4a4a4a; display: block; font-size: 15px; font-weight: 500; } .channel-list .ch-body span { color: #7a7896; display: block; font-size: 15px; font-weight: 300; unicode-bidi: plaintext; } .channel-list a:hover .ch-body span { color: #756de7; } /* ---------- صفحة 404 ---------- */ .notfound-code { color: #756de7; font-size: 90px; font-weight: 500; line-height: 1; unicode-bidi: plaintext; } /* ---------- تخطّي إلى المحتوى ---------- */ /* يُزاح رأسياً لا أفقياً — الإزاحة الأفقية السالبة توسّع الصفحة في RTL */ .skip-link { position: absolute; top: 0; right: 0; z-index: 100; background: #ffffff; color: #756de7; padding: 12px 20px; font-weight: 500; -webkit-transform: translateY(-200%); transform: translateY(-200%); -webkit-transition: transform 0.2s ease; transition: transform 0.2s ease; } .skip-link:focus { -webkit-transform: translateY(0); transform: translateY(0); } /* ---------- تسويات صغيرة ---------- */ /* Bootstrap 3 يحسب شريط التمرير ضمن استعلام الوسائط، فيثبّت عرض الحاوية على 750px بينما مساحة المحتوى أقل بقليل — ينتج تمرير أفقي في النطاق الضيق 754–767px. هذا السقف يزيله دون تغيير أي شيء في العروض الطبيعية. */ .container { max-width: 100%; } .equal-row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .equal-row > [class*="col-"] { display: -webkit-box; display: -ms-flexbox; display: flex; } .equal-row > [class*="col-"] > * { width: 100%; } @media (max-width: 767px) { #stats .stat-value { font-size: 30px; } .contact-form-box { padding: 24px 20px; } .nda-note { padding: 22px 20px; } .page-body .table-wrap { margin: 20px 0; } } /* ============================================================= الصفحات الداخلية — مكوّنات القالب الأصلي المحتوى يُفكَّك آلياً من Markdown ويُوزَّع على هذه المكوّنات بدل عرضه ككتلة نصّية واحدة. ============================================================= */ /* ---------- ترويسة الصفحة + الأيقونة الدائرية ---------- */ #page-head .page-title { font-size: 34px; font-weight: 500; line-height: 1.5; margin: 0; } #page-head .page-lead { margin-inline: auto; } #page-head .crumbs { text-align: center; } #page-icon { margin-top: 34px; position: relative; z-index: 10; opacity: 0; } #page-icon .pricing-icon { display: inline-block; margin: 0; } /* ---------- قسم المشكلة ---------- */ #h-info { padding-bottom: 55px; } #h-info .row-icon { color: #b3aff2; font-size: 32px; margin-bottom: 14px; } #h-info .info-text { padding-left: 8%; padding-right: 8%; margin-top: 22px; } #h-info .info-text.purple-text { color: #7971e8; font-weight: 400; } /* ---------- بطاقات ما نبنيه ---------- */ #ifeatures { background-color: #f9fbff; padding-top: 55px; padding-bottom: 45px; } #ifeatures .feature-box { background-color: transparent; height: 100%; padding: 30px 14px; } #ifeatures .feature-details { opacity: 0.85; line-height: 1.9; } /* ---------- اللوح البنفسجي التفاعلي ---------- */ #more-info { /*background-color: rgb(249, 251, 255);*/ } #more-info .bg-custom .obj-gradiant1, #more-info .bg-custom .obj-gradiant2 { -webkit-transform: skewY(10deg) scaleY(0.7); -moz-transform: skewY(10deg) scaleY(0.7); -ms-transform: skewY(10deg) scaleY(0.7); transform: skewY(10deg) scaleY(0.7); width: 100%; height: 120%; } #more-info .row-title.panel-title { color: #ffffff; margin-bottom: 40px; } #more-info .row-title.panel-title:after { background-color: rgba(255, 255, 255, 0.35); } #more-info .links-holder { position: relative; z-index: 10; text-align: right; padding-top: 0; } #more-info .links-holder ul { width: 100%; } #more-info .links-holder ul li .info-link { cursor: pointer; font-size: 16px; line-height: 1.7; padding: 14px 20px; text-align: right; font-weight: 500; } #more-info .info-details-holder { position: relative; z-index: 10; min-height: 230px; } #more-info .info-details { display: none; } #more-info .info-details.show-details { display: block; -webkit-animation: fade-slide 0.45s ease both; animation: fade-slide 0.45s ease both; } #more-info .info-details h2, #more-info .info-details h3 { color: #ffffff; font-size: 24px; font-weight: 500; line-height: 1.6; margin: 0 0 16px; } #more-info .info-details p { color: rgba(255, 255, 255, 0.82); font-size: 17px; line-height: 2; margin: 0; } @-webkit-keyframes fade-slide { from { opacity: 0; -webkit-transform: translateY(14px); } to { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fade-slide { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ---------- أقسام إضافية ببطاقات ---------- */ .more-features-sec { padding-top: 55px; padding-bottom: 45px; text-align: center; } .more-features-sec .mfeature-box { background-color: #ffffff; border: 1px solid #eeeef4; border-radius: 10px; height: calc(100% - 30px); margin: 15px 0; padding: 30px 22px; text-align: right; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .more-features-sec .mfeature-box:hover { -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); -webkit-transform: translateY(-4px); transform: translateY(-4px); } .more-features-sec .mfeature-title { color: #756de7; font-size: 17px; font-weight: 500; line-height: 1.7; margin-bottom: 12px; } .more-features-sec .mfeature-details { color: #7a7896; font-size: 16px; font-weight: 300; line-height: 1.95; } .more-features-sec:nth-of-type(even) { background-color: #fcfcfd; } /* ---------- شريط التقنيات ---------- */ #tech-strip { background-color: #f9f9fd; padding-top: 50px; padding-bottom: 45px; text-align: center; } #tech-strip .tag-list { display: inline-block; margin-top: 26px; } /* ---------- الأسئلة الشائعة ---------- */ #page-content { padding-top: 55px; padding-bottom: 45px; background: unset; } #page-content .content-holder { background-color: #ffffff; border: 1px solid #eeeef4; border-radius: 10px; margin-bottom: 22px; padding: 26px 26px; } #page-content .content-holder h4 { color: #3f3d59; font-size: 17px; font-weight: 500; line-height: 1.75; margin: 0 0 12px; padding-right: 26px; position: relative; } #page-content .content-holder h4:before { color: #b3aff2; content: " 059"; font-family: FontAwesome; font-size: 17px; position: absolute; right: 0; top: 1px; } #page-content .content-holder p { color: #7a7896; font-size: 16px; font-weight: 300; line-height: 1.95; margin: 0; } @media (max-width: 991px) { #more-info .info-details-holder { margin-top: 26px; min-height: 0; } } @media (max-width: 767px) { #page-head .page-title { font-size: 26px; } #h-info .info-text { padding-left: 0; padding-right: 0; } } /* ============================================================= صفحة دراسة الحالة — تخطيط مقالة + شريط جانبي (post.html) ============================================================= */ #page-head .head-meta { list-style: none; margin: 16px 0 0; padding: 0; position: relative; z-index: 10; } #page-head .head-meta li { color: rgba(255, 255, 255, 0.75); display: inline-block; font-size: 15px; font-weight: 300; margin: 0 12px; } #page-head .head-meta .fa { margin-left: 6px; opacity: 0.7; } /* ---------- شريط الأثر ---------- */ #impact-bar { padding-top: 34px; } #impact-bar .impact-strip { background-image: -webkit-linear-gradient(-30deg, #84ebad, #26dd6c); background-image: linear-gradient(-30deg, #84ebad, #26dd6c); border-radius: 12px; color: #10502f; font-size: 19px; font-weight: 500; line-height: 1.8; padding: 22px 28px; text-align: center; -webkit-box-shadow: 0 12px 30px rgba(38, 221, 108, 0.25); box-shadow: 0 12px 30px rgba(38, 221, 108, 0.25); } #impact-bar .impact-strip .fa { font-size: 24px; margin-left: 10px; vertical-align: -2px; } /* ---------- كتل دراسة الحالة ---------- */ .case-block { margin-bottom: 50px; } .case-label { border-radius: 20px; color: #ffffff; display: inline-block; font-size: 14px; font-weight: 500; margin-bottom: 22px; padding: 6px 20px; } .case-label-problem { background-color: #ef8b6d; } .case-label-build { background-color: #756de7; } .case-label-decision { background-color: #5d9cec; } .case-label-impact { background-color: #26dd6c; } .case-lead { color: #4a4a4a; font-size: 19px; font-weight: 300; line-height: 2; margin-bottom: 18px; } /* ---------- شبكة ما بنيناه ---------- */ .build-grid { display: block; } .build-item { border-right: 2px solid #eeeef4; margin-bottom: 8px; padding: 6px 26px 22px 0; position: relative; } .build-item:last-child { border-right-color: transparent; padding-bottom: 0; } .build-num { background-color: #f2f0fe; border-radius: 50%; color: #756de7; font-size: 13px; font-weight: 500; height: 34px; line-height: 34px; position: absolute; right: -18px; text-align: center; top: 0; width: 34px; unicode-bidi: plaintext; } .build-item h3 { color: #3f3d59; font-size: 17px; font-weight: 500; line-height: 1.7; margin: 4px 0 8px; } .build-item p { color: #7a7896; font-size: 16px; font-weight: 300; line-height: 1.95; margin: 0; } /* ---------- القرارات الهندسية ---------- */ .decision-item { background-color: #fafaff; border: 1px solid #eeeef4; border-radius: 10px; margin-bottom: 16px; padding: 22px 24px; -webkit-transition: all 0.35s ease 0s; transition: all 0.35s ease 0s; } .decision-item:hover { border-color: #d5d1fb; -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); } .decision-item h3 { color: #756de7; font-size: 17px; font-weight: 500; line-height: 1.7; margin: 0 0 10px; padding-right: 24px; position: relative; } .decision-item h3:before { color: #b3aff2; content: " 0eb"; font-family: FontAwesome; position: absolute; right: 0; top: 1px; } .decision-item p { color: #7a7896; font-size: 16px; font-weight: 300; line-height: 1.95; margin: 0; } .impact-body ul li:before { background-color: #26dd6c; -webkit-box-shadow: 0 0 0 4px rgba(38, 221, 108, 0.15); box-shadow: 0 0 0 4px rgba(38, 221, 108, 0.15); } /* ---------- الشريط الجانبي ---------- */ #sidebar .widget { background-color: #ffffff; border: 1px solid #eeeef4; border-radius: 10px; margin-bottom: 22px; padding: 24px 24px; } #sidebar .widget-title { color: #3f3d59; font-size: 16px; font-weight: 500; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid #eeeef4; } #sidebar .summary-widget dl { margin: 0; } #sidebar .summary-widget dt { color: #a09dad; font-size: 13px; font-weight: 300; margin-top: 14px; } #sidebar .summary-widget dt:first-child { margin-top: 0; } #sidebar .summary-widget dd { color: #4a4a4a; font-size: 16px; margin: 3px 0 0; } #sidebar .plain-list { list-style: none; margin: 0; padding: 0; } #sidebar .plain-list li { color: #7a7896; font-size: 15px; font-weight: 300; line-height: 1.85; margin-bottom: 10px; } #sidebar .plain-list .fa { color: #b3aff2; margin-left: 7px; } #sidebar #categories .item { border-bottom: 1px solid #f4f4f8; } #sidebar #categories .item:last-child { border-bottom: 0; } #sidebar #categories .item a { color: #7a7896; display: block; font-size: 15px; padding: 10px 0; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } #sidebar #categories .item a span { background-color: #f2f0fe; border-radius: 12px; color: #756de7; float: left; font-size: 12px; min-width: 26px; padding: 2px 8px; text-align: center; unicode-bidi: plaintext; } #sidebar #categories .item a:hover { color: #756de7; padding-right: 6px; } #sidebar #categories .item.current a { color: #756de7; font-weight: 500; } #sidebar .cta-widget { background-image: -webkit-linear-gradient(-30deg, #b3aff2, #756de7); background-image: linear-gradient(-30deg, #b3aff2, #756de7); border: 0; text-align: center; } #sidebar .cta-widget .widget-title { border-bottom-color: rgba(255, 255, 255, 0.2); color: #ffffff; } #sidebar .cta-widget p { color: rgba(255, 255, 255, 0.85); font-size: 15px; font-weight: 300; line-height: 1.9; margin-bottom: 18px; } /* ---------- بطاقات الأعمال ذات الصلة ---------- */ #articles { background-color: unset; padding-top: 55px; padding-bottom: 50px; } .related-card { background-color: #ffffff; border: 1px solid #eeeef4; border-radius: 10px; display: block; height: calc(100% - 30px); margin: 15px 0; padding: 26px 22px; text-align: center; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .related-card:hover { text-decoration: none; -webkit-transform: translateY(-5px); transform: translateY(-5px); -webkit-box-shadow: 0 14px 30px rgba(0, 0, 0, 0.09); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.09); } .related-icon { border-radius: 50%; color: #ffffff; display: inline-block; font-size: 22px; height: 50px; line-height: 50px; margin-bottom: 14px; text-align: center; width: 50px; } .related-type { color: #a09dad; display: block; font-size: 13px; margin-bottom: 8px; } .related-title { color: #4a4a4a; display: block; font-size: 16px; font-weight: 500; line-height: 1.75; } .related-card:hover .related-title { color: #756de7; } @media (max-width: 991px) { #sidebar { margin-top: 40px; } } @media (max-width: 767px) { #impact-bar .impact-strip { font-size: 17px; padding: 18px 20px; } .case-lead { font-size: 17px; } } /* ============================================================= صفحة القطاع ============================================================= */ #more-info .built-item { color: rgba(255, 255, 255, 0.92); font-size: 16px; font-weight: 300; line-height: 1.95; padding: 14px 34px 14px 10px; position: relative; z-index: 10; } #more-info .built-item .fa { background-color: rgba(255, 255, 255, 0.18); border-radius: 50%; font-size: 11px; height: 24px; line-height: 24px; position: absolute; right: 0; text-align: center; top: 17px; width: 24px; } #more-info .built-item strong { color: #ffffff; font-weight: 500; } /* قائمة تحقّق عامة */ .check-list { list-style: none; margin: 0; padding: 0; text-align: right; } .check-list li { color: #6b6979; font-size: 16px; font-weight: 300; line-height: 1.95; margin-bottom: 14px; padding-right: 34px; position: relative; } .check-list li:before { background-color: #f2f0fe; border-radius: 50%; color: #756de7; content: " 00c"; font-family: FontAwesome; font-size: 11px; height: 24px; line-height: 24px; position: absolute; right: 0; text-align: center; top: 4px; width: 24px; } .check-list li strong { color: #4a4a4a; font-weight: 500; } /* كتلة الصراحة */ .honest-block { background-color: #fffdf5; border: 1px solid #f2e6c4; border-radius: 12px; padding: 30px 32px; position: relative; } .honest-badge { background-color: #f0b429; border-radius: 20px; color: #4a3708; display: inline-block; font-size: 14px; font-weight: 500; margin-bottom: 18px; padding: 6px 20px; } .honest-badge .fa { margin-left: 7px; } .honest-block p { color: #6b5f42; font-size: 17px; font-weight: 300; line-height: 2; margin-bottom: 14px; } .honest-block p:last-child { margin-bottom: 0; } .honest-block strong { color: #4a3708; font-weight: 500; } /* ============================================================= صفحة من نحن — بطاقات التواصل واللوح ============================================================= */ #more-info .panel-lead { color: rgba(255, 255, 255, 0.8); font-size: 17px; font-weight: 300; line-height: 2; margin: -20px auto 34px; max-width: 780px; position: relative; text-align: center; z-index: 10; } #contact-info { background-color: unset; padding-top: 55px; padding-bottom: 50px; text-align: center; } #contact-info .contact-box { background-color: #ffffff; border: 1px solid #eeeef4; border-radius: 10px; height: calc(100% - 30px); margin: 15px 0; padding: 32px 22px; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } #contact-info .contact-box:hover { -webkit-box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07); -webkit-transform: translateY(-4px); transform: translateY(-4px); } #contact-info .contact-icon { background-image: -webkit-linear-gradient(-30deg, #b3aff2, #756de7); background-image: linear-gradient(-30deg, #b3aff2, #756de7); border-radius: 50%; color: #ffffff; display: inline-block; font-size: 22px; height: 56px; line-height: 56px; margin-bottom: 16px; text-align: center; width: 56px; -webkit-box-shadow: 0 8px 18px rgba(117, 109, 231, 0.35); box-shadow: 0 8px 18px rgba(117, 109, 231, 0.35); } #contact-info .contact-label { color: #a09dad; font-size: 14px; margin-bottom: 8px; } #contact-info .contact-value { color: #4a4a4a; font-size: 17px; font-weight: 500; line-height: 1.8; } /* ============================================================= صفحة التقنيات ============================================================= */ #stack-grid { padding-top: 55px; padding-bottom: 50px; text-align: center; } .stack-card { background-color: #ffffff; border: 1px solid #eeeef4; border-radius: 12px; height: calc(100% - 30px); margin: 15px 0; padding: 26px 24px; text-align: right; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .stack-card:hover { -webkit-box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); -webkit-transform: translateY(-4px); transform: translateY(-4px); } .stack-head { border-bottom: 1px solid #f2f2f7; margin-bottom: 18px; padding-bottom: 16px; } .stack-icon { border-radius: 50%; color: #ffffff; display: inline-block; float: right; font-size: 19px; height: 44px; line-height: 44px; margin-left: 14px; text-align: center; width: 44px; } .stack-head h2, .stack-head h3 { color: #3f3d59; font-size: 17px; font-weight: 500; line-height: 44px; margin: 0; overflow: hidden; } .stack-note { border-top: 1px solid #f6f6fa; color: #8b899c; font-size: 15px; font-weight: 300; line-height: 1.9; margin: 14px 0 0; padding-top: 14px; } /* ممارسات على اللوح البنفسجي */ #more-info .practice-item { padding: 14px 40px 14px 10px; position: relative; z-index: 10; } #more-info .practice-item .fa { color: rgba(255, 255, 255, 0.75); font-size: 19px; position: absolute; right: 0; top: 17px; } #more-info .practice-item strong { color: #ffffff; display: block; font-size: 16px; font-weight: 500; line-height: 1.7; margin-bottom: 4px; } #more-info .practice-item span { color: rgba(255, 255, 255, 0.78); font-size: 15px; font-weight: 300; line-height: 1.9; } @media (max-width: 767px) { .stack-icon { float: none; margin: 0 0 12px; } .stack-head h2, .stack-head h3 { line-height: 1.6; } } /* لوح للأقسام النثرية/الجدولية التي لا تتفكّك إلى بطاقات */ .prose-panel { background-color: #ffffff; border: 1px solid #eeeef4; border-radius: 12px; padding: 30px 32px; text-align: right; -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); } .prose-panel .page-body > *:first-child { margin-top: 0; } .prose-panel .page-body h2 { display: none; } .prose-panel .page-body .table-wrap { margin-top: 0; } @media (max-width: 767px) { .prose-panel { padding: 22px 20px; } } /* ============================================================= بطاقة العمل — بروح .article-summary في القالب ============================================================= */ .article-summary.work-card { background-color: #ffffff; border: 1px solid #eeeef4; border-radius: 12px; display: block; height: calc(100% - 30px); margin: 15px 0; overflow: hidden; padding: 0; position: relative; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .article-summary.work-card:hover { border-color: #d5d1fb; text-decoration: none; -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-box-shadow: 0 18px 36px rgba(50, 50, 93, 0.13); box-shadow: 0 18px 36px rgba(50, 50, 93, 0.13); } /* شريط لوني علوي يظهر عند المرور */ .article-summary.work-card:before { background-image: -webkit-linear-gradient(-30deg, #b3aff2, #756de7); background-image: linear-gradient(-30deg, #b3aff2, #756de7); content: ""; height: 4px; left: 0; position: absolute; right: 0; top: 0; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right center; transform-origin: right center; -webkit-transition: transform 0.4s ease 0s; transition: transform 0.4s ease 0s; } .article-summary.work-card:hover:before { -webkit-transform: scaleX(1); transform: scaleX(1); } .work-card .article-icon { border-radius: 50%; color: #ffffff; font-size: 24px; height: 56px; line-height: 56px; margin: 26px 24px 0; text-align: center; width: 56px; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .work-card:hover .article-icon { -webkit-transform: scale(1.08) rotate(-6deg); transform: scale(1.08) rotate(-6deg); } .work-card .article-body { padding: 18px 24px 24px; } .work-card .article-meta { color: #a09dad; font-size: 14px; font-weight: 300; line-height: 1.8; margin-bottom: 10px; } .work-card .article-meta .a-type { color: #756de7; font-weight: 500; } .work-card .article-meta .sep { opacity: 0.45; padding: 0 6px; } .work-card .article-title { color: #4a4a4a; font-size: 17px; font-weight: 500; line-height: 1.75; margin-bottom: 14px; } .work-card:hover .article-title { color: #756de7; } .work-card .article-impact { background-color: rgba(101, 214, 146, 0.1); border-radius: 8px; color: #2f7a51; font-size: 15px; line-height: 1.85; margin-bottom: 14px; padding: 12px 14px; } .work-card .article-impact .fa { color: #26dd6c; margin-left: 6px; } .work-card .article-foot { border-top: 1px solid #f4f4f8; margin-top: 16px; padding-top: 14px; } .work-card .a-market { color: #a09dad; font-size: 14px; font-weight: 300; } .work-card .a-market .fa { margin-left: 5px; } .work-card .a-more { color: #756de7; float: left; font-size: 14px; font-weight: 500; } .work-card .a-more .fa { margin-right: 5px; -webkit-transition: transform 0.25s ease 0s; transition: transform 0.25s ease 0s; } .work-card:hover .a-more .fa { -webkit-transform: translateX(-5px); transform: translateX(-5px); } @media (max-width: 767px) { .work-card .article-icon { margin: 22px 20px 0; } .work-card .article-body { padding: 16px 20px 20px; } } /* ============================================================= فهرس الحلول ============================================================= */ #solutions-grid { padding-top: 55px; padding-bottom: 50px; text-align: center; } .solution-card { background-color: #ffffff; border: 1px solid #eeeef4; border-radius: 12px; display: block; height: calc(100% - 30px); margin: 15px 0; padding: 30px 26px; position: relative; text-align: right; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .solution-card:hover { border-color: #d5d1fb; text-decoration: none; -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-box-shadow: 0 18px 36px rgba(50, 50, 93, 0.12); box-shadow: 0 18px 36px rgba(50, 50, 93, 0.12); } .solution-icon { border-radius: 50%; color: #ffffff; display: inline-block; font-size: 24px; height: 58px; line-height: 58px; margin-bottom: 18px; text-align: center; width: 58px; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .solution-card:hover .solution-icon { -webkit-transform: scale(1.08) rotate(-6deg); transform: scale(1.08) rotate(-6deg); } .solution-card h2 { color: #3f3d59; font-size: 18px; font-weight: 500; line-height: 1.7; margin: 0 0 12px; } .solution-card:hover h2 { color: #756de7; } .solution-card > p { color: #7a7896; font-size: 16px; font-weight: 300; line-height: 1.9; margin: 0 0 18px; } .solution-points { list-style: none; margin: 0 0 18px; padding: 0; } .solution-points li { color: #6b6979; font-size: 15px; font-weight: 300; line-height: 1.9; margin-bottom: 7px; } .solution-points .fa { color: #26dd6c; font-size: 11px; margin-left: 8px; } .solution-foot { border-top: 1px solid #f4f4f8; display: block; padding-top: 15px; } .solution-count { color: #a09dad; font-size: 14px; font-weight: 300; } .solution-count strong { color: #756de7; font-weight: 500; unicode-bidi: plaintext; } .solution-more { color: #756de7; float: left; font-size: 14px; font-weight: 500; } .solution-more .fa { margin-right: 5px; -webkit-transition: transform 0.25s ease 0s; transition: transform 0.25s ease 0s; } .solution-card:hover .solution-more .fa { -webkit-transform: translateX(-5px); transform: translateX(-5px); } /* ---------- بطاقات المجالات المساندة على اللوح البنفسجي ---------- */ .support-card { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; display: block; height: calc(100% - 24px); margin: 12px 0; padding: 24px 24px; position: relative; z-index: 10; -webkit-transition: all 0.35s ease 0s; transition: all 0.35s ease 0s; } .support-card:hover { background-color: rgba(255, 255, 255, 0.18); text-decoration: none; -webkit-transform: translateY(-4px); transform: translateY(-4px); } .support-icon { background-color: rgba(255, 255, 255, 0.18); border-radius: 50%; color: #ffffff; display: block; float: right; font-size: 20px; height: 48px; line-height: 48px; margin-left: 16px; text-align: center; width: 48px; } .support-body { display: block; overflow: hidden; } .support-body strong { color: #ffffff; display: block; font-size: 17px; font-weight: 500; line-height: 1.7; margin-bottom: 6px; } .support-body span { color: rgba(255, 255, 255, 0.78); display: block; font-size: 15px; font-weight: 300; line-height: 1.9; } /* ---------- بطاقات "ابدأ من الألم" ---------- */ .feature-box.path-box { display: block; border-radius: 12px; -webkit-transition: all 0.35s ease 0s; transition: all 0.35s ease 0s; } .feature-box.path-box:hover { background-color: #ffffff; text-decoration: none; -webkit-transform: translateY(-5px); transform: translateY(-5px); -webkit-box-shadow: 0 14px 30px rgba(0, 0, 0, 0.07); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.07); } .feature-box.path-box .feature-title { color: #3f3d59; } .feature-box.path-box:hover .feature-title { color: #756de7; } @media (max-width: 767px) { .support-icon { float: none; margin: 0 0 12px; } } /* ============================================================= صفحتا التواصل والاستضافة ============================================================= */ /* بطاقات القنوات تصبح روابط */ #contact-info a.contact-box { display: block; } #contact-info a.contact-box:hover { text-decoration: none; } #contact-info a.contact-box:hover .contact-value { color: #756de7; } #contact-info .contact-icon.wa { background-image: -webkit-linear-gradient(-30deg, #5ef2a0, #25d366); background-image: linear-gradient(-30deg, #5ef2a0, #25d366); -webkit-box-shadow: 0 8px 18px rgba(37, 211, 102, 0.35); box-shadow: 0 8px 18px rgba(37, 211, 102, 0.35); } #extra-info { padding-top: 55px; padding-bottom: 55px; text-align: center; } #extra-info .row-title { margin-bottom: 10px; } #extra-info .contact-form-box, #extra-info .side-box { text-align: right; } /* خطوات ما بعد الإرسال */ .step-list { counter-reset: cstep; list-style: none; margin: 0; padding: 0; } .step-list li { border-right: 2px solid #f0eefc; margin-bottom: 6px; padding: 0 26px 20px 0; position: relative; } .step-list li:last-child { border-right-color: transparent; padding-bottom: 0; } .step-list .step-icon { background-color: #f2f0fe; border-radius: 50%; color: #756de7; font-size: 14px; height: 32px; line-height: 32px; position: absolute; right: -17px; text-align: center; top: 0; width: 32px; } .step-list strong { color: #3f3d59; display: block; font-size: 16px; font-weight: 500; line-height: 1.7; margin-bottom: 5px; } .step-list .step-text { color: #7a7896; display: block; font-size: 15px; font-weight: 300; line-height: 1.9; } .side-box .side-text { color: #7a7896; font-size: 15px; font-weight: 300; line-height: 1.9; margin-bottom: 10px; } .side-box .side-tip { color: #756de7; font-size: 15px; font-weight: 500; margin: 0; } .side-box.cta-widget { background-image: -webkit-linear-gradient(-30deg, #b3aff2, #756de7); background-image: linear-gradient(-30deg, #b3aff2, #756de7); border: 0; text-align: center; } .side-box.cta-widget .side-title { border-bottom-color: rgba(255, 255, 255, 0.22); color: #ffffff; } .side-box.cta-widget p { color: rgba(255, 255, 255, 0.85); font-size: 15px; font-weight: 300; line-height: 1.9; margin-bottom: 16px; } .side-box .side-title { border-bottom: 1px solid #eeeef4; color: #3f3d59; font-size: 16px; font-weight: 500; margin: 0 0 18px; padding-bottom: 12px; } /* ---------- الاستضافة ---------- */ #pricing .pricing-box-simple .billing-cycle { color: #a09dad; font-size: 14px; font-weight: 300; margin-top: -6px; margin-bottom: 14px; } .advice-block { background-color: #f4f8ff; border: 1px solid #d9e6fb; border-radius: 12px; height: calc(100% - 30px); margin: 15px 0; padding: 30px 32px; } .advice-badge { background-color: #5d9cec; border-radius: 20px; color: #ffffff; display: inline-block; font-size: 14px; font-weight: 500; margin-bottom: 18px; padding: 6px 20px; } .advice-badge .htfy { margin-left: 7px; } .advice-block p { color: #4e6484; font-size: 16px; font-weight: 300; line-height: 2; margin-bottom: 16px; } .advice-block strong { color: #2f4661; font-weight: 500; } .honest-block { height: calc(100% - 30px); margin: 15px 0; } @media (max-width: 767px) { .advice-block { padding: 22px 20px; } } /* ============================================================= بطاقة العمل بمكوّن .pricing-box-simple نضبط ما يخصّ نصاً عربياً طويلاً فقط — بقية المظهر من القالب. ============================================================= */ /* بلا الأيقونة العائمة: لا حاجة للمسافة العلوية التي كانت تفسح لها */ .work-pricing-card { height: 100%; margin-top: 15px; margin-bottom: 25px; text-align: center; } .work-pricing-card .pricing-icon { display: none; } .work-pricing-card .pricing-content { border-radius: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; overflow: hidden; } /* العنوان مكان السعر: القالب يضعه 25px بوزن 300 — ثقيل على عنوان عربي طويل */ .pricing-box.pricing-box-simple.work-pricing-card .pricing-content .pricing-price { font-size: 18px !important; font-weight: 500; line-height: 1.75; margin-bottom: 16px !important; padding: 0 6px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.18); } .pricing-box.pricing-box-simple.work-pricing-card .pricing-content .pricing-title { font-size: 13px; font-weight: 400; } .work-pricing-card .pricing-features { margin-bottom: 0; margin-top: 0; } .pricing-box.pricing-box-simple.work-pricing-card .pricing-content .pricing-features ul li { display: inline-block !important; font-size: 14px; margin: 0 8px; opacity: 0.92; } .work-pricing-card .pricing-details { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding-bottom: 6px; } /* سطر الأثر — يستفيد من المساحة السالبة تحت الرأس المنحني */ .work-pricing-card .work-impact-line { background-color: rgba(101, 214, 146, 0.12); border-radius: 9px; color: #2f7a51; font-size: 15px; font-weight: 400; line-height: 1.85; margin-top: 22px; padding: 13px 15px; text-align: right; } .work-pricing-card .work-impact-line .fa { color: #26dd6c; margin-left: 7px; } .pricing-box.pricing-box-simple.work-pricing-card .pricing-content .pricing-details ul { margin-top: 18px !important; margin-bottom: 14px !important; text-align: right; } .pricing-box.pricing-box-simple.work-pricing-card .pricing-content .pricing-details ul li { color: #7a7896; font-size: 15px; font-weight: 300; line-height: 1.9; padding: 5px 22px 5px 0; position: relative; unicode-bidi: plaintext; } .pricing-box.pricing-box-simple.work-pricing-card .pricing-content .pricing-details ul li:before { color: #b3aff2; content: " 105"; font-family: FontAwesome; position: absolute; right: 4px; top: 5px; } .work-pricing-card .pricing-link { padding: 0 27px 27px; } .pricing-box.pricing-box-simple.work-pricing-card .pricing-content .pricing-link a { border-radius: 25px; display: inline-block; font-size: 15px; font-weight: 500; padding: 11px 26px; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .work-pricing-card:hover .pricing-content { -webkit-transform: translateY(-6px); transform: translateY(-6px); } @media (max-width: 767px) { .work-pricing-card .pricing-price { font-size: 17px !important; } } /* ============================================================= لونان إضافيان لبطاقات الأعمال — بنفس نمط القالب (القالب يعرّف pricing-color1..3 فقط لمكوّن pricing-box-simple) ============================================================= */ /* 4 — وردي */ .pricing-box.pricing-box-simple.work-pricing-card.pricing-color4 .pricing-content .pricing-head:before { background-repeat: repeat-x; background-image: -webkit-linear-gradient(90deg, #f9a1fd, #e83ff2); background-image: linear-gradient(90deg, #f9a1fd, #e83ff2); } .pricing-box.pricing-box-simple.work-pricing-card.pricing-color4 .pricing-content { -webkit-box-shadow: 0 9px 18px rgba(232, 63, 242, 0.19); box-shadow: 0 9px 18px rgba(232, 63, 242, 0.19); } .pricing-box.pricing-box-simple.work-pricing-card.pricing-color4 .pricing-content .pricing-details ul li:hover { color: #d229dc; } .pricing-box.pricing-box-simple.work-pricing-card.pricing-color4 .pricing-content .pricing-link a { background-color: #d229dc; color: #ffffff; } .pricing-box.pricing-box-simple.work-pricing-card.pricing-color4 .pricing-content .pricing-link a:hover, .pricing-box.pricing-box-simple.work-pricing-card.pricing-color4 .pricing-content .pricing-link a:focus { background-color: #b117ba !important; } .pricing-box.pricing-box-simple.work-pricing-card.pricing-color4 .pricing-content .pricing-details ul li:before { color: #f9a1fd; } /* 5 — برتقالي */ .pricing-box.pricing-box-simple.work-pricing-card.pricing-color5 .pricing-content .pricing-head:before { background-repeat: repeat-x; background-image: -webkit-linear-gradient(90deg, #ffc48c, #ff8a3c); background-image: linear-gradient(90deg, #ffc48c, #ff8a3c); } .pricing-box.pricing-box-simple.work-pricing-card.pricing-color5 .pricing-content { -webkit-box-shadow: 0 9px 18px rgba(255, 138, 60, 0.19); box-shadow: 0 9px 18px rgba(255, 138, 60, 0.19); } .pricing-box.pricing-box-simple.work-pricing-card.pricing-color5 .pricing-content .pricing-details ul li:hover { color: #ef7620; } .pricing-box.pricing-box-simple.work-pricing-card.pricing-color5 .pricing-content .pricing-link a { background-color: #ef7620; color: #ffffff; } .pricing-box.pricing-box-simple.work-pricing-card.pricing-color5 .pricing-content .pricing-link a:hover, .pricing-box.pricing-box-simple.work-pricing-card.pricing-color5 .pricing-content .pricing-link a:focus { background-color: #d15e0d !important; } .pricing-box.pricing-box-simple.work-pricing-card.pricing-color5 .pricing-content .pricing-details ul li:before { color: #ffc48c; } /* الأخضر: علامات الرأس بيضاء لتبقى مقروءة على تدرّج فاتح */ .pricing-box.pricing-box-simple.work-pricing-card.pricing-color3 .pricing-content .pricing-features ul li:before { color: #ffffff; } /* ============================================================= قسم «كيف نعمل» — تصحيحان على مكوّن القالب 1) الصناديق absolute بلا عرض محدّد، فتتقلّص حسب النص ويتغيّر عرض اللوح بين عنصر وآخر. نثبّته على عرض العمود. 2) ارتفاع الحاوية يُضبط بالسكربت — نضيف انتقالاً حتى لا يقفز. ============================================================= */ /* الارتفاع ثابت على أطول صندوق (يضبطه site.js) — لا انتقال ولا قفز */ #features-holder .feature-box { width: 100%; } /* عنوان القوس: سطر واحد دائماً — الالتفاف يكسر مواضع القوس المطلقة */ #features-links-holder .feature-icon-holder .feature-title { line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 991px) { /* عمودان متكدّسان: القوس يعود لتدفّق طبيعي والعناوين تلتفّ بحرية */ #features-links-holder .feature-icon-holder .feature-title { white-space: normal; } } /* ============================================================= شريط إثبات القدرة على المشاريع الضخمة يبني على #scale ويضيف عليه: نسخة مدمجة للصفحات الداخلية، وسطر إسناد صريح يفصل أرقامنا عن أرقام أنظمة عملائنا. ============================================================= */ .scale-proof.compact { background-color: #f9f9fd; padding-top: 55px; padding-bottom: 50px; position: relative; text-align: center; } .scale-proof .scale-note { border-top: 1px solid rgba(63, 61, 89, 0.12); color: #7a7896; font-size: 14px; font-weight: 300; line-height: 1.9; margin: 34px auto 0; max-width: 820px; padding-top: 18px; text-align: center; } .scale-proof .scale-note .fa { color: #9c8df1; margin-left: 6px; } /* في النسخة المدمجة تبرز البطاقات على الرمادي بلا شريط مائل */ .scale-proof.compact .scale-box { -webkit-box-shadow: 0 6px 20px rgba(69, 84, 122, 0.1); box-shadow: 0 6px 20px rgba(69, 84, 122, 0.1); } /* ---------- ألوان بطاقات القدرة ---------- العمود يحمل col-sm-6 دائماً (سواء col-md-3 أو col-md-4)، فنستهدفه به. المُعرِّف #scale ضروري: قواعد القالب والقواعد الأساسية تحمل مُعرِّفاً، وأي قاعدة بأصناف فقط تُغلَب — وهو ما حدث فعلاً في نسخة سابقة. */ #scale .col-sm-6:nth-child(1) .scale-icon, #scale .col-sm-6:nth-child(1) .scale-value { color: #756de7; } #scale .col-sm-6:nth-child(2) .scale-icon, #scale .col-sm-6:nth-child(2) .scale-value { color: #26dd6c; } #scale .col-sm-6:nth-child(3) .scale-icon, #scale .col-sm-6:nth-child(3) .scale-value { color: #5d9cec; } #scale .col-sm-6:nth-child(4) .scale-icon, #scale .col-sm-6:nth-child(4) .scale-value { color: #f16ff9; } #scale .col-sm-6:nth-child(5) .scale-icon, #scale .col-sm-6:nth-child(5) .scale-value { color: #ff8a3c; } #scale .col-sm-6:nth-child(6) .scale-icon, #scale .col-sm-6:nth-child(6) .scale-value { color: #6057e3; } #scale .col-sm-6:nth-child(7) .scale-icon, #scale .col-sm-6:nth-child(7) .scale-value { color: #0dcf77; } @media (max-width: 767px) { .scale-proof .scale-note { font-size: 13px; } }