/* ============================================================= إضافات شباب تك — تُحمَّل بعد ملفات القالب الأصلي القاعدة: لا نُعيد تعريف مكوّنات القالب، بل نضيف ما لا يوجد فيه (بطاقات الأعمال، الشارات، المرشّحات، نموذج التواصل، شريط الأرقام). الألوان مأخوذة من القالب: #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; } /* ---------- شريط الأرقام ---------- خفيف على أبيض، بألوان نصية كما في #h-info بالقالب الأصلي. لا كتلة داكنة: الأصل لا يضع أي داكن قبل الفوتر. */ #stats { background-color: #ffffff; padding-top: 10px; padding-bottom: 55px; } #stats .stat-box { text-align: center; padding: 15px 5px; } #stats .stat-icon { display: block; font-size: 32px; margin-bottom: 10px; } #stats .stat-value { color: #3f3d59; font-size: 38px; font-weight: 700; line-height: 1.2; display: block; unicode-bidi: plaintext; } /* ألوان #h-info نفسها: بنفسجي، أخضر، أزرق، وردي */ #stats .col-xs-6:nth-child(1) .stat-icon, #stats .col-xs-6:nth-child(1) .stat-value { color: #7971e8; } #stats .col-xs-6:nth-child(2) .stat-icon, #stats .col-xs-6:nth-child(2) .stat-value { color: #26dd6c; } #stats .col-xs-6:nth-child(3) .stat-icon, #stats .col-xs-6:nth-child(3) .stat-value { color: #5d9cec; } #stats .col-xs-6:nth-child(4) .stat-icon, #stats .col-xs-6:nth-child(4) .stat-value { color: #f16ff9; } #stats .stat-label { color: #7a7896; font-size: 15px; font-weight: 300; display: block; margin-top: 8px; line-height: 1.7; } /* ---------- بطاقات إثبات الحجم ---------- تحاكي #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 .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; margin-bottom: 16px; line-height: 1; } #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: 700; display: block; line-height: 1.25; unicode-bidi: plaintext; } /* كل بطاقة بلون من ألوان القالب — نفس منطق m-color1..4 */ #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 .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: 700; 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: 700; 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: 700; } .work-box .work-meta .sep { padding: 0 6px; opacity: 0.5; } .work-box .work-title { color: #4a4a4a; font-size: 18px; font-weight: 700; 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: 700; 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: 700; -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: 700; } /* ---------- متن الصفحات الداخلية ---------- */ .page-body { color: #6b6979; font-size: 17px; font-weight: 300; line-height: 2.05; } .page-body h2 { color: #3f3d59; font-size: 24px; font-weight: 700; 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: 700; 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: 700; margin-top: 24px; margin-bottom: 10px; } .page-body p { margin-bottom: 18px; } .page-body strong { color: #4a4a4a; font-weight: 700; } .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: 700; 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: 700; 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: 85px; } @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(-6deg) scaleY(1.15); -moz-transform: skewY(-6deg) scaleY(1.15); -ms-transform: skewY(-6deg) scaleY(1.15); transform: skewY(-6deg) 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: 700; 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: 700; 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: 700; } .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: 700; 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: 700; -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; } }