/* Fixes for the standalone (non-Odoo) build */ /* ── Light green header (theme-color-1, matches the live site) ── */ .cs_site_header.cs_style_1 { background-color: var(--theme-color-1); padding: 0 15px; /* fixed header */ position: fixed; top: 0; left: 0; width: 100%; z-index: 999; box-shadow: 0 1px 8px rgba(2, 59, 89, 0.08); } body { padding-top: 90px !important; } .cs_site_header.cs_style_1 .cs_main_header_in { height: 90px; } .cs_site_branding img { max-height: 64px; } .cs_site_header.cs_style_1 .cs_nav .cs_nav_list > li > a { color: var(--heading-color); } .cs_site_header.cs_style_1 .cs_nav .cs_nav_list > li > a:hover { color: var(--theme-color-5); } /* Header buttons on light green background — identical size for both */ .cs_site_header .cs_header_btn { white-space: nowrap; height: 48px; padding: 0 22px !important; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } .cs_site_header .cs_header_btn_outline { background: transparent; border: 1px solid var(--accent-color); color: var(--theme-color-5); } .cs_site_header .cs_header_btn_outline:hover { background: var(--theme-color-5); border-color: var(--theme-color-5); color: var(--white-color); } .cs_site_header .cs_header_btn_solid { background: var(--theme-color-5); color: var(--white-color); } .cs_site_header .cs_header_btn_solid:hover { background: var(--heading-color); } /* Support button icon in blue */ .cs_site_header .cs_header_btn_outline .cs_btn_icon i { color: var(--heading-color); } .cs_site_header .cs_header_btn_outline:hover .cs_btn_icon i { color: var(--white-color); } /* Mobile: the theme hides the whole right side under 480px, which would remove the hamburger menu | keep it visible */ @media (max-width: 480px) { .cs_site_header.cs_style_1 .cs_main_header_right { display: flex !important; } } /* ── Keep logo + menu + buttons on one single line on desktop ── */ @media screen and (min-width: 1200px) { .cs_site_header.cs_style_1 .cs_main_header_in { flex-wrap: nowrap; padding: 0; max-width: none; } .cs_site_header.cs_style_1 .cs_main_header_right { gap: 14px; margin-right: 0; flex-shrink: 0; } .cs_site_header.cs_style_1 .cs_nav { font-size: 15px; } .cs_site_header.cs_style_1 .cs_nav .cs_nav_list { flex-wrap: nowrap; } .cs_site_header.cs_style_1 .cs_nav .cs_nav_list > li { margin-right: 18px !important; white-space: nowrap; } .cs_site_header.cs_style_1 .cs_nav .cs_nav_list > li:last-child { margin-right: 0 !important; } .cs_site_header .cs_header_btn { padding: 11px 18px; } } /* ── RTL header fix ───────────────────────────────────────── The translator sets dir="rtl" on , which already mirrors flexbox rows. rtl-comprehensive.css was written for the Odoo header and adds row-reverse/order on top, double-flipping the menu. Neutralize those so RTL mirrors correctly. */ body.lang-ar .cs_main_header_in { flex-direction: row !important; } body.lang-ar .cs_main_header_left, body.lang-ar .cs_main_header_center, body.lang-ar .cs_main_header_right { order: 0 !important; } body.lang-ar .cs_main_header_right { margin-right: 0 !important; margin-left: 0 !important; } /* ── Page heading redesign: compact, brand gradient, no dead space ── */ .cs_page_heading { height: auto !important; padding: 80px 0 60px !important; } .cs_page_heading .breadcrumb { justify-content: center; margin-bottom: 0; } .cs_page_heading p { max-width: 720px; margin-left: auto; margin-right: auto; } /* ── Comparison block: force perfect centering on every screen ── */ .zahy-comparison { max-width: 1200px; margin-left: auto !important; margin-right: auto !important; } .zahy-comparison .zahy-comparison__filters, .zahy-comparison [class*="filter"], .zahy-comparison [class*="products"] { margin-left: auto !important; margin-right: auto !important; } /* ── Modern segmented language switcher (sliding thumb) ── */ .zahy-lang-seg { position: relative; display: inline-flex; align-items: center; direction: ltr; /* EN always left, عربي always right */ height: 44px; padding: 4px; border-radius: 999px; background: rgba(2, 59, 89, 0.08); box-shadow: inset 0 1px 3px rgba(2, 59, 89, 0.08); } .zahy-lang-seg__opt { position: relative; z-index: 1; width: 58px; height: 36px; border: 0; background: transparent; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--heading-color); cursor: pointer; transition: color 0.3s ease; -webkit-tap-highlight-color: transparent; } .zahy-lang-seg__thumb { position: absolute; top: 4px; left: 4px; width: 58px; height: 36px; border-radius: 999px; background: linear-gradient(135deg, var(--accent-color), var(--theme-color-5)); box-shadow: 0 3px 10px rgba(55, 144, 36, 0.35); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); transform: translateX(0); } .zahy-lang-seg[data-active="ar"] .zahy-lang-seg__thumb { transform: translateX(58px); } .zahy-lang-seg[data-active="en"] .zahy-lang-seg__opt[data-lang="en"], .zahy-lang-seg[data-active="ar"] .zahy-lang-seg__opt[data-lang="ar"] { color: var(--white-color); } .zahy-lang-seg__opt:hover { opacity: 0.85; } /* the options are links now (URL-based language switch) */ a.zahy-lang-seg__opt { display: inline-flex; align-items: center; justify-content: center; text-decoration: none !important; line-height: 1; } /* mobile menu: Login + Support rendered as real buttons with icons */ @media (max-width: 1199.98px) { .zahy-mobile-cta { padding: 6px 15px !important; } .zahy-mobile-cta .cs_header_btn { display: flex !important; width: 100%; height: 48px; align-items: center; justify-content: center; gap: 8px; border-radius: 26px; padding: 0 18px !important; } .zahy-mobile-cta .cs_header_btn_solid { background: var(--theme-color-5); color: var(--white-color) !important; } .zahy-mobile-cta .cs_header_btn_outline { border: 1px solid var(--accent-color); color: var(--theme-color-5) !important; } .zahy-mobile-cta .cs_header_btn_outline .cs_btn_icon i { color: var(--heading-color); } } /* mobile copy lives inside the hamburger menu; keep it hidden on desktop */ @media (max-width: 1199.98px) { .zahy-lang-seg-wrap--mobile { display: flex !important; justify-content: center; padding: 10px 0; } } @media (min-width: 1200px) { .zahy-lang-seg-wrap--mobile { display: none !important; } } /* ── Card consistency: equal heights + aligned logo/title rows ── */ .cs_iconbox.cs_style_4 { height: 100%; display: flex; } .cs_iconbox.cs_style_4 .cs_iconbox_content { display: flex; flex-direction: column; width: 100%; } .cs_iconbox.cs_style_4 .cs_iconbox_header { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; } .cs_iconbox.cs_style_4 .cs_iconbox_header .cs_iconbox_icon { flex: 0 0 auto; display: flex; align-items: center; } .cs_iconbox.cs_style_4 .cs_iconbox_info { flex: 1; } .cs_iconbox.cs_style_4 .cs_iconbox_info p { margin-bottom: 0; } /* ── Language toggle: perfectly centered on the header line ── */ .cs_site_header .cs_lang_toggle { display: flex; align-items: center; align-self: center; } .cs_site_header .cs_lang_toggle .switch { margin: 0; display: flex; align-items: center; line-height: 1; } /* ── Sector cards: pastel icon circles (reference design) ── */ .zahy-sector-icon { width: 72px; height: 72px; } .zahy-sector-icon i { font-size: 28px; color: inherit; } .zahy-tint-1 { background-color: #fff4dc !important; color: #e0982f; } .zahy-tint-2 { background-color: #dff6fb !important; color: #2aa7c4; } .zahy-tint-3 { background-color: #e2f8ea !important; color: #379024; } .zahy-tint-4 { background-color: #fde7ee !important; color: #e05c8a; } .zahy-tint-5 { background-color: #ede9fb !important; color: #7a63d8; } .zahy-tint-6 { background-color: #e0f0ff !important; color: #3b82d6; } /* ── Comparison, Arabic internal alignment fixes ── rtl-comprehensive right-aligns everything via `body.lang-ar *`, and its `[class*="col-"]` rule accidentally catches `zahy-table__col--featured` (the Pro column). Restore centering inside the product card and the featured column, in both languages. */ body.lang-ar .zahy-comparison [class*="products"], body.lang-ar .zahy-comparison [class*="products"] * { text-align: center !important; } .zahy-comparison th[class*="--featured"], .zahy-comparison td[class*="--featured"], body.lang-ar .zahy-comparison th[class*="--featured"], body.lang-ar .zahy-comparison td[class*="--featured"], body.lang-ar .zahy-comparison [class*="--featured"] * { text-align: center !important; } /* ── Partner logo cloud: every logo contained and consistent (Apple Pay and other tall marks were overflowing their cards) ── */ .cs_toolset_logos .cs_iconbox .cs_iconbox_icon { height: 40px; display: flex; align-items: center; justify-content: center; } .cs_toolset_logos .cs_iconbox img { max-height: 34px !important; max-width: 96px !important; width: auto !important; height: auto !important; object-fit: contain; } /* ── Counters: digits must always read left-to-right (24/7, 100%, 35+) even in Arabic, otherwise RTL mirrors them into 7/42, %001... ── */ .cs_counter_number, body.lang-ar .cs_counter_number { direction: ltr !important; unicode-bidi: isolate; text-align: center !important; } /* cache sentinel: the self-heal script reads this to detect stale CSS */ .zahy-cache-sentinel { z-index: 31; } /* ── Comparison filter tabs: icon sits next to its label ── */ .zahy-comparison__filter-btn { justify-content: center !important; gap: 10px !important; } .zahy-comparison__filter-btn .zahy-comparison__filter-icon { margin: 0 !important; } /* ── Feature blocks: one per row on mobile and tablet (no 2-up squeeze) ── */ @media (max-width: 991px) { .cs_features_items_wrapper { grid-template-columns: 1fr !important; } .cs_features_items_wrapper .cs_feature_item:nth-child(1) { grid-column: auto / span 1 !important; padding: 50px 30px; } } /* ── Floating WhatsApp button (opposite side of the scroll-up) ── */ .zahy-whatsapp-fab { position: fixed; bottom: 30px; left: 30px; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff !important; display: flex; align-items: center; justify-content: center; font-size: 30px; z-index: 998; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4); transition: transform 0.3s ease; animation: zahyWaPulse 2.2s infinite; } .zahy-whatsapp-fab:hover { transform: scale(1.1); color: #fff; } @keyframes zahyWaPulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); } 70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } @media (max-width: 767px) { .zahy-whatsapp-fab { width: 50px; height: 50px; font-size: 26px; bottom: 20px; left: 20px; } } /* ── Loading screen ── */ #zahy-preloader { position: fixed; inset: 0; z-index: 99999; background: var(--theme-color-1, #d5fde0); display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; transition: opacity 0.45s ease, visibility 0.45s ease; } #zahy-preloader.zahy-preloader--done { opacity: 0; visibility: hidden; pointer-events: none; } .zahy-preloader__inner { position: relative; width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; } .zahy-preloader__logo { max-width: 150px; height: auto; animation: zahyPulse 1.1s ease-in-out infinite; } @media (max-width: 767px) { .zahy-preloader__inner { width: 190px; height: 190px; } .zahy-preloader__logo { max-width: 120px; } } .zahy-preloader__ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(55, 144, 36, 0.15); border-top-color: var(--theme-color-5, #379024); animation: zahySpin 0.9s linear infinite; } @keyframes zahySpin { to { transform: rotate(360deg); } } @keyframes zahyPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.92); opacity: 0.85; } } /* ── Saudi Riyal symbol sizing (pricing cards) ── */ .zahy-riyal { height: 0.8em; width: auto; vertical-align: -0.05em; margin: 0 3px; } /* ── E-commerce hero: remove the offset that was designed for Odoo's transparent overlay header (showed as a green band) ── */ .cs_hero.cs_style_3 { padding-top: 0 !important; } .cs_hero.cs_style_3 .cs_hero_content { padding: 110px 0 90px !important; } /* ── Keep centered sections centered in Arabic ── (rtl-comprehensive forces text-align:right on everything) */ body.lang-ar .text-center, body.lang-ar .text-center * { text-align: center !important; } /* ── Breadcrumb separator mirrored correctly in RTL ── */ body.lang-ar .breadcrumb-item + .breadcrumb-item { padding-right: 0.5rem; padding-left: 0; } body.lang-ar .breadcrumb-item + .breadcrumb-item::before { float: right; padding-left: 0.5rem; padding-right: 0; } /* ── Icon boxes: icon-text spacing follows reading direction ── */ body.lang-ar .cs_list.cs_style_2 li .cs_list_icon { margin-right: 0; margin-left: 10px; } @media screen and (min-width: 1200px) { body.lang-ar .cs_nav_list { flex-direction: row !important; } body.lang-ar .cs_site_header.cs_style_1 .cs_nav .cs_nav_list > li { margin-right: 0 !important; margin-left: 18px !important; } body.lang-ar .cs_site_header.cs_style_1 .cs_nav .cs_nav_list > li:last-child { margin-left: 0 !important; } } /* zahy-nav-v2: global nav rules — the menu renders on EVERY page, so its styles must live here, not in a page-specific stylesheet */ @media (min-width:1200px){ .cs_nav .cs_menu_dropdown_toggle{display:none !important} } .cs_nav .cs_nav_list li ul.zs-mega{width:320px;padding:12px} .cs_nav .cs_nav_list li ul.zs-mega li{margin:0} .cs_nav .cs_nav_list li ul.zs-mega a{display:block;padding:10px 14px;border-radius:12px; line-height:1.5;transition:background .2s;white-space:normal} .cs_nav .cs_nav_list li ul.zs-mega a:hover{background:#e9fbee} .cs_nav .cs_nav_list li ul.zs-mega a b{display:block;font-weight:700;font-size:15px; color:#023b59} .cs_nav .cs_nav_list li ul.zs-mega a:hover b{color:#379024} .cs_nav .cs_nav_list li ul.zs-mega a small{display:block;font-size:12.5px;color:#7d8896; font-weight:500;margin-top:2px} .cs_nav .cs_nav_list li ul.zs-mega.zs-mega-wide{width:660px;column-count:2;column-gap:6px} .cs_nav .cs_nav_list li ul.zs-mega.zs-mega-wide li{break-inside:avoid} @media (max-width:1199px){ .cs_nav .cs_nav_list li ul.zs-mega, .cs_nav .cs_nav_list li ul.zs-mega.zs-mega-wide{width:auto;column-count:1} /* the drawer is position:fixed and grows with its content; without a viewport cap an expanded submenu extends below the screen with no way to scroll to it */ .cs_nav .cs_nav_list{max-height:100vh;max-height:100dvh;overflow-y:auto; -webkit-overflow-scrolling:touch;padding-bottom:60px} /* the theme's +/− toggler is an invisible full-width overlay, so the parent link (Solutions / Sectors) could never be tapped on mobile. Shrink it to the icon zone: text opens the page, icon opens the menu */ .cs_menu_dropdown_toggle{width:56px !important;left:auto !important;right:auto !important; inset-inline-end:0 !important;justify-content:center !important} } /* ── WordPress block-gap neutralizer ── WP injects 24px margin-block-start between root blocks (header part, post-content, footer part) creating a white band under the header. Inner-block gaps are zeroed via theme.json styles.spacing.blockGap (low specificity), so design margins like .cs_banner's -100px overlap survive — never use !important here */ .wp-site-blocks > * + *{margin-block-start:0} /* ── unified card elevation ── the solutions-hub hover shadow, applied to every card-like block on the site so the whole product feels like one system */ .zahy-post-card,.zs-faq-item,.zahy-popular-item,.zahy-feature-card, .cs_iconbox.cs_style_1,.cs_iconbox.cs_style_2,.cs_iconbox.cs_style_3, .cs_pricing_table{transition:transform .3s ease,box-shadow .3s ease} .zahy-post-card:hover,.zs-faq-item:hover,.zahy-popular-item:hover,.zahy-feature-card:hover, .cs_iconbox.cs_style_1:hover,.cs_iconbox.cs_style_2:hover,.cs_iconbox.cs_style_3:hover, .cs_pricing_table:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(2,59,89,.12)} /* accordions are click targets: shadow only, no lift */ .cs_accordian{transition:box-shadow .3s ease} .cs_accordian:hover{box-shadow:0 12px 32px rgba(2,59,89,.10)} /* ── RTL centering parity ── rtl-comprehensive.css forces text-align:right on EVERY element in Arabic; these blocks are centered by design in English and must stay centered in Arabic too (audited pairwise ar/en) */ body.lang-ar .zs-hub-hero, body.lang-ar .zs-hub-hero *, body.lang-ar .zahy-blog-hero, body.lang-ar .zahy-blog-hero *, body.lang-ar .zs-cta, body.lang-ar .zs-cta *, body.lang-ar .zs-pkg, body.lang-ar .zs-pkg *, body.lang-ar .cs_btn, body.lang-ar .cs_btn *, body.lang-ar .zahy-table th, body.lang-ar .zahy-comparison__filter-btn, body.lang-ar .zahy-comparison__filter-btn *, body.lang-ar .cs_counter, body.lang-ar .cs_counter *, body.lang-ar .zahy-chip, body.lang-ar .zs-kicker, body.lang-ar .zs-hub-card, body.lang-ar .zs-hub-card *, body.lang-ar .zahy-badge{text-align:center !important} /* inside the centered card, the tick list stays start-aligned as a block */ body.lang-ar .zs-hub-card .zs-ticks li{text-align:right !important}