/* |-------------------------------------------------------------------------- | SHENDY TECH | GLOBAL HOME RESPONSIVE SYSTEM |-------------------------------------------------------------------------- | | هذا الملف يتم تحميله بعد جميع ملفات أقسام الصفحة الرئيسية. | | وظيفته: | | 01. منع الارتفاعات الثابتة على Mobile | 02. إلغاء Sticky غير المناسب | 03. إصلاح Reveal | 04. منع Horizontal Overflow | 05. توحيد المسافات بين الأقسام | 06. حماية RTL | 07. إصلاح Grids | 08. جعل الصفحة Flow طبيعي | */ /* ========================================================================== GLOBAL HOME ========================================================================== */ body.st-site #main-content { width: 100%; max-width: 100%; overflow-x: hidden; } body.st-site .st-home-section-slot { position: relative; display: block; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 0; overflow: visible; } body.st-site .st-home-section-slot > section { position: relative; width: 100%; max-width: 100%; min-width: 0; margin: 0; } /* ========================================================================== MEDIA ========================================================================== */ body.st-site .st-home-section-slot img, body.st-site .st-home-section-slot video, body.st-site .st-home-section-slot canvas, body.st-site .st-home-section-slot svg { max-width: 100%; } /* ========================================================================== TEXT ========================================================================== */ body.st-site .st-home-section-slot h1, body.st-site .st-home-section-slot h2, body.st-site .st-home-section-slot h3, body.st-site .st-home-section-slot p { max-width: 100%; } /* ========================================================================== RTL SAFETY ========================================================================== */ html[dir="rtl"] body.st-site .st-home-section-slot { direction: rtl; } html[dir="ltr"] body.st-site .st-home-section-slot { direction: ltr; } /* ========================================================================== TABLET ========================================================================== */ @media (max-width: 980px) { /* |-------------------------------------------------------------------------- | أهم إصلاح |-------------------------------------------------------------------------- | | نمنع أي سكشن من احتجاز ارتفاع فارغ. | */ body.st-site .st-home-section-slot, body.st-site .st-home-section-slot > section { height: auto !important; min-height: 0 !important; max-height: none !important; } /* |-------------------------------------------------------------------------- | Reveal |-------------------------------------------------------------------------- | | على الموبايل لا نعتمد على JavaScript لإظهار المحتوى. | | الصورة التي أرسلتها تشير إلى أن بعض العناصر موجودة لكن opacity = 0 | وبالتالي نرى خلفية السكشن فقط. | */ body.st-site .st-home-section-slot .st-reveal, body.st-site .st-home-section-slot [class*="reveal"] { opacity: 1 !important; visibility: visible !important; transform: none !important; translate: none !important; } /* |-------------------------------------------------------------------------- | Remove Animation Delays |-------------------------------------------------------------------------- */ body.st-site .st-home-section-slot [class*="delay"] { transition-delay: 0s !important; animation-delay: 0s !important; } /* |-------------------------------------------------------------------------- | Sticky |-------------------------------------------------------------------------- */ body.st-site .st-home-section-slot .sticky-copy, body.st-site .st-home-section-slot .st-svc-copy-inner, body.st-site .st-home-section-slot .st-products-sticky, body.st-site .st-home-section-slot .st-product-sticky, body.st-site .st-home-section-slot .st-why-sticky, body.st-site .st-home-section-slot .st-tech-sticky { position: relative !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; } /* |-------------------------------------------------------------------------- | Overflow |-------------------------------------------------------------------------- */ body.st-site .st-home-section-slot > section { overflow-x: hidden; } /* |-------------------------------------------------------------------------- | General Section Spacing |-------------------------------------------------------------------------- | | Hero مستثنى لأنه له Responsive خاص. | */ body.st-site .st-home-section-slot:not( .st-home-hero-slot ) > section { padding-block: 72px !important; } } /* ========================================================================== MOBILE GLOBAL ========================================================================== */ @media (max-width: 700px) { /* |-------------------------------------------------------------------------- | Root |-------------------------------------------------------------------------- */ body.st-site #main-content { overflow: hidden visible; } body.st-site .st-home-section-slot { overflow-x: clip; } /* |-------------------------------------------------------------------------- | No Ghost Heights |-------------------------------------------------------------------------- */ body.st-site .st-home-section-slot, body.st-site .st-home-section-slot > section, body.st-site .st-home-section-slot > section > div { max-height: none; } body.st-site .st-home-section-slot > section { height: auto !important; min-height: 0 !important; } /* |-------------------------------------------------------------------------- | Standard Section Padding |-------------------------------------------------------------------------- */ body.st-site .st-home-section-slot:not( .st-home-hero-slot ) > section { padding-block: 58px !important; } /* |-------------------------------------------------------------------------- | No External Section Margins |-------------------------------------------------------------------------- */ body.st-site .st-home-section-slot + .st-home-section-slot { margin-top: 0 !important; } /* |-------------------------------------------------------------------------- | Containers |-------------------------------------------------------------------------- */ body.st-site .st-home-section-slot .st-container { width: calc( 100% - 24px ); max-width: 100%; margin-inline: auto; } /* |-------------------------------------------------------------------------- | All Grid Children |-------------------------------------------------------------------------- */ body.st-site .st-home-section-slot * { min-width: 0; } /* |-------------------------------------------------------------------------- | Text Safety |-------------------------------------------------------------------------- */ body.st-site .st-home-section-slot h1, body.st-site .st-home-section-slot h2, body.st-site .st-home-section-slot h3 { overflow-wrap: normal; word-break: normal; } body.st-site .st-home-section-slot p { overflow-wrap: break-word; } /* |-------------------------------------------------------------------------- | Images |-------------------------------------------------------------------------- */ body.st-site .st-home-section-slot img { height: auto; object-fit: contain; } } /* ========================================================================== HERO SLOT ========================================================================== */ @media (max-width: 700px) { body.st-site .st-home-hero-slot { position: relative; z-index: 2; background: #f5f9ff; } body.st-site .st-home-hero-slot > section { height: auto !important; min-height: 0 !important; margin: 0 !important; } /* |-------------------------------------------------------------------------- | لا يوجد Margin ضخم أسفل Hero |-------------------------------------------------------------------------- */ body.st-site .st-home-hero-slot { margin-bottom: 0 !important; } } /* ========================================================================== PRODUCTS SLOT ========================================================================== */ @media (max-width: 980px) { /* |-------------------------------------------------------------------------- | Products Layout |-------------------------------------------------------------------------- */ body.st-site .st-home-products-slot .st-products-layout, body.st-site .st-home-products-slot .st-product-layout, body.st-site .st-home-products-slot .products-layout { display: grid !important; grid-template-columns: minmax( 0, 1fr ) !important; height: auto !important; min-height: 0 !important; gap: 35px !important; } /* |-------------------------------------------------------------------------- | Products Grid |-------------------------------------------------------------------------- */ body.st-site .st-home-products-slot .st-products-grid, body.st-site .st-home-products-slot .st-product-grid, body.st-site .st-home-products-slot .product-grid { height: auto !important; min-height: 0 !important; } } @media (max-width: 700px) { body.st-site .st-home-products-slot > section { padding-block: 58px !important; } /* |-------------------------------------------------------------------------- | Cards = Single Column |-------------------------------------------------------------------------- */ body.st-site .st-home-products-slot .st-products-grid, body.st-site .st-home-products-slot .st-product-grid, body.st-site .st-home-products-slot .product-grid { display: grid !important; grid-template-columns: minmax( 0, 1fr ) !important; gap: 14px !important; } /* |-------------------------------------------------------------------------- | Cards Width |-------------------------------------------------------------------------- */ body.st-site .st-home-products-slot .st-product-card, body.st-site .st-home-products-slot .product-card { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; } /* |-------------------------------------------------------------------------- | Prevent Huge Visual |-------------------------------------------------------------------------- */ body.st-site .st-home-products-slot .st-products-visual, body.st-site .st-home-products-slot .st-product-visual { height: auto !important; min-height: 0 !important; } } /* ========================================================================== SERVICES ========================================================================== */ @media (max-width: 980px) { body.st-site .st-home-services-slot .st-svc { height: auto !important; min-height: 0 !important; padding-block: 75px !important; } body.st-site .st-home-services-slot .st-svc-layout { display: grid !important; grid-template-columns: minmax( 0, 1fr ) !important; align-items: start !important; gap: 50px !important; height: auto !important; min-height: 0 !important; } body.st-site .st-home-services-slot .st-svc-copy { height: auto !important; min-height: 0 !important; } body.st-site .st-home-services-slot .st-svc-copy-inner { position: relative !important; inset: auto !important; top: auto !important; height: auto !important; min-height: 0 !important; } body.st-site .st-home-services-slot .st-svc-list { height: auto !important; min-height: 0 !important; } } @media (max-width: 700px) { body.st-site .st-home-services-slot .st-svc { padding-block: 60px !important; } /* |-------------------------------------------------------------------------- | Services Header |-------------------------------------------------------------------------- */ body.st-site .st-home-services-slot .st-svc-top { margin-block-end: 38px !important; } /* |-------------------------------------------------------------------------- | Copy |-------------------------------------------------------------------------- */ body.st-site .st-home-services-slot .st-svc-copy-inner { max-width: 100% !important; margin-inline: auto; text-align: center; } body.st-site .st-home-services-slot .st-svc-title { max-width: 340px; margin-inline: auto; font-size: clamp( 32px, 9.5vw, 40px ) !important; line-height: 1.4 !important; } body.st-site .st-home-services-slot .st-svc-title > span { margin-inline: auto; } body.st-site .st-home-services-slot .st-svc-description { max-width: 340px; margin-inline: auto; font-size: 12.5px !important; line-height: 1.9 !important; text-align: center; } /* |-------------------------------------------------------------------------- | Main Button |-------------------------------------------------------------------------- */ body.st-site .st-home-services-slot .st-svc-main-btn { width: 100% !important; max-width: 340px; margin-inline: auto; justify-content: space-between; } /* |-------------------------------------------------------------------------- | Process |-------------------------------------------------------------------------- */ body.st-site .st-home-services-slot .st-svc-process { width: 100%; max-width: 340px; margin-inline: auto; } /* |-------------------------------------------------------------------------- | List |-------------------------------------------------------------------------- */ body.st-site .st-home-services-slot .st-svc-list { display: grid !important; grid-template-columns: minmax( 0, 1fr ) !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; } /* |-------------------------------------------------------------------------- | Service Card |-------------------------------------------------------------------------- */ body.st-site .st-home-services-slot .st-svc-card { width: 100%; height: auto !important; min-height: 0 !important; } body.st-site .st-home-services-slot .st-svc-card-link { width: 100%; height: auto !important; min-height: 0 !important; grid-template-columns: 28px minmax( 0, 1fr ) 38px !important; gap: 10px !important; padding: 18px 14px !important; border-radius: 17px !important; } body.st-site .st-home-services-slot .st-svc-card-number { min-height: 70px !important; } body.st-site .st-home-services-slot .st-svc-card-content h3 { font-size: 17px !important; line-height: 1.45 !important; } body.st-site .st-home-services-slot .st-svc-card-content p { font-size: 9px !important; line-height: 1.7 !important; } /* |-------------------------------------------------------------------------- | Disable Desktop Hover Movement |-------------------------------------------------------------------------- */ body.st-site .st-home-services-slot .st-svc-card-link:hover { transform: none !important; } } /* ========================================================================== WHY US ========================================================================== */ @media (max-width: 980px) { body.st-site .st-home-why-slot > section { height: auto !important; min-height: 0 !important; } body.st-site .st-home-why-slot .st-why-grid, body.st-site .st-home-why-slot .why-grid { display: grid !important; grid-template-columns: minmax( 0, 1fr ) !important; gap: 40px !important; height: auto !important; min-height: 0 !important; } } @media (max-width: 700px) { body.st-site .st-home-why-slot > section { padding-block: 58px !important; } body.st-site .st-home-why-slot .st-why-visual, body.st-site .st-home-why-slot .why-visual { height: auto !important; min-height: 0 !important; } body.st-site .st-home-why-slot .st-check-grid, body.st-site .st-home-why-slot .check-grid { grid-template-columns: minmax( 0, 1fr ) !important; } } /* ========================================================================== TECHNOLOGY ========================================================================== */ @media (max-width: 980px) { body.st-site .st-home-technology-slot > section { height: auto !important; min-height: 0 !important; } body.st-site .st-home-technology-slot .st-tech-shell, body.st-site .st-home-technology-slot .tech-shell { height: auto !important; min-height: 0 !important; display: grid !important; grid-template-columns: minmax( 0, 1fr ) !important; gap: 35px !important; } } @media (max-width: 700px) { body.st-site .st-home-technology-slot > section { padding-block: 58px !important; } body.st-site .st-home-technology-slot .st-tech-cloud, body.st-site .st-home-technology-slot .tech-cloud { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px; } body.st-site .st-home-technology-slot .st-tech-pill, body.st-site .st-home-technology-slot .tech-pill { max-width: 100%; } } /* ========================================================================== CLIENTS ========================================================================== */ @media (max-width: 980px) { body.st-site .st-home-clients-slot > section { height: auto !important; min-height: 0 !important; } } @media (max-width: 700px) { body.st-site .st-home-clients-slot > section { padding-block: 58px !important; } body.st-site .st-home-clients-slot .st-client-grid, body.st-site .st-home-clients-slot .client-grid { display: grid !important; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important; gap: 9px !important; } body.st-site .st-home-clients-slot .st-client-logo, body.st-site .st-home-clients-slot .client-logo { min-width: 0 !important; width: 100% !important; } } /* ========================================================================== FINAL CTA ========================================================================== */ @media (max-width: 980px) { body.st-site .st-home-cta-slot > section { height: auto !important; min-height: 0 !important; } } @media (max-width: 700px) { body.st-site .st-home-cta-slot > section { padding-block: 52px !important; } body.st-site .st-home-cta-slot .st-cta-card, body.st-site .st-home-cta-slot .cta-card { height: auto !important; min-height: 0 !important; display: grid !important; grid-template-columns: minmax( 0, 1fr ) !important; gap: 25px !important; padding: 27px 22px !important; border-radius: 20px !important; } body.st-site .st-home-cta-slot .st-cta-actions, body.st-site .st-home-cta-slot .cta-actions { display: grid !important; grid-template-columns: minmax( 0, 1fr ) !important; gap: 9px !important; width: 100%; } body.st-site .st-home-cta-slot .st-cta-actions > a, body.st-site .st-home-cta-slot .cta-actions > a { width: 100% !important; } } /* ========================================================================== REMOVE OLD FULL VIEWPORT SECTIONS ========================================================================== */ @media (max-width: 980px) { body.st-site .st-home-section-slot .full-height, body.st-site .st-home-section-slot .full-screen, body.st-site .st-home-section-slot .screen-height, body.st-site .st-home-section-slot [class*="full-height"], body.st-site .st-home-section-slot [class*="full-screen"] { min-height: 0 !important; height: auto !important; } } /* ========================================================================== REVEAL FALLBACK ========================================================================== */ @media (max-width: 980px) { /* |-------------------------------------------------------------------------- | أي عنصر كان مخفي بسبب reveal يظهر. |-------------------------------------------------------------------------- */ body.st-site .st-home-section-slot .reveal, body.st-site .st-home-section-slot .st-reveal { opacity: 1 !important; visibility: visible !important; transform: translate3d( 0, 0, 0 ) !important; } } /* ========================================================================== SMALL MOBILE ========================================================================== */ @media (max-width: 420px) { body.st-site .st-home-section-slot:not( .st-home-hero-slot ) > section { padding-block: 50px !important; } /* |-------------------------------------------------------------------------- | Container |-------------------------------------------------------------------------- */ body.st-site .st-home-section-slot .st-container { width: calc( 100% - 20px ); } /* |-------------------------------------------------------------------------- | Services |-------------------------------------------------------------------------- */ body.st-site .st-home-services-slot .st-svc { padding-block: 52px !important; } body.st-site .st-home-services-slot .st-svc-title { max-width: 315px; font-size: 32px !important; } body.st-site .st-home-services-slot .st-svc-description { max-width: 315px; font-size: 12px !important; } body.st-site .st-home-services-slot .st-svc-main-btn, body.st-site .st-home-services-slot .st-svc-process { max-width: 315px; } } /* ========================================================================== 360 MOBILE ========================================================================== */ @media (max-width: 360px) { body.st-site .st-home-section-slot .st-container { width: calc( 100% - 18px ); } body.st-site .st-home-section-slot:not( .st-home-hero-slot ) > section { padding-block: 46px !important; } body.st-site .st-home-services-slot .st-svc-card-link { grid-template-columns: 25px minmax( 0, 1fr ) 34px !important; padding: 16px 11px !important; gap: 8px !important; } body.st-site .st-home-services-slot .st-svc-card-arrow { width: 33px !important; height: 33px !important; } } /* ========================================================================== REDUCED MOTION ========================================================================== */ @media ( prefers-reduced-motion: reduce ) { body.st-site .st-home-section-slot * { scroll-behavior: auto !important; } }