@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap'); /* ===================================================================== Arabic RTL adjustments for the Al Shohab (Science Lab) build. The Science Lab visual design is preserved as-is. This file only: - fixes Arabic reading direction (set via dir="rtl" on ) - stops Latin letter-spacing from breaking Arabic typography No colors, fonts, spacing or layout are redesigned here. ===================================================================== */ /* Arabic text must never be letter-spaced (kills broken "tracked" Arabic on headings, buttons and CTAs while leaving the layout untouched). */ html[dir="rtl"] body, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] p, html[dir="rtl"] a, html[dir="rtl"] span, html[dir="rtl"] li, html[dir="rtl"] label, html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] figcaption { letter-spacing: normal; } /* Keep numbers / Latin service terms (AI Automation, CRM, ERP, SEO, API, email, phone) rendering left-to-right inside RTL Arabic copy. */ html[dir="rtl"] input[type="email"], html[dir="rtl"] a[href^="mailto:"], html[dir="rtl"] a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; } /* ===================================================================== Inner pages rebuilt from the real Science Lab "service-details" template. The template styles the title as a markdown

; we promote it to

for SEO, so mirror the exact h2 sizing here (no visual change). ===================================================================== */ .service-details-markdown h1 { font-family: var(--font-sora); font-size: var(--text-sora-heading-4); line-height: var(--text-sora-heading-4--line-height); font-weight: var(--font-weight-normal); color: var(--color-white); } @media (min-width: 40rem) { .service-details-markdown h1 { font-size: var(--text-sora-heading-3); line-height: var(--text-sora-heading-3--line-height); } } @media (min-width: 64rem) { .service-details-markdown h1 { font-size: var(--text-sora-heading-2); line-height: var(--text-sora-heading-2--line-height); } } .service-details-markdown h1 + p { margin-top: calc(var(--spacing) * 3); } /* RTL: put the markdown list bullet spacing on the correct (right) side. */ html[dir="rtl"] .service-details-markdown ul li:before { margin-right: 0; margin-left: calc(var(--spacing) * 2); } /* ===================================================================== ARABIC PREMIUM TYPOGRAPHY (Arabic tree only — /en is untouched). Headings: Alexandria. Body / UI / CTA labels: IBM Plex Sans Arabic. Implemented by re-pointing the template's own font CSS variables under html[dir="rtl"], so NO layout, color or structure changes — only the font family the Science Lab classes already reference. ===================================================================== */ html[dir="rtl"] { /* display / headings (was Sora + Instrument-Serif → Times-like for Arabic) */ --font-sora: "Alexandria", "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif; --font-instrument-serif: "Alexandria", "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif; /* body / UI / CTA labels (was Inter-Tight / Manrope / IBM Plex Mono) */ --font-inter-tight: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif; --font-manrope: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif; --font-ibm-plex-mono: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif; /* loosen the tight (120–130%) heading line-heights so Arabic ascenders/ descenders never clip; larger leading reads better in Arabic display. */ --text-sora-heading-1--line-height: 1.35; --text-sora-heading-2--line-height: 1.35; --text-sora-heading-3--line-height: 1.35; --text-sora-heading-4--line-height: 1.4; --text-is-heading-1--line-height: 1.35; --text-is-heading-2--line-height: 1.35; --text-is-heading-3--line-height: 1.35; --text-is-heading-4--line-height: 1.4; } /* Apply the heading font (Alexandria) to every Arabic display heading. The template's heading utilities only set font-SIZE, so headings would otherwise inherit the body font. This guarantees the split the brief asks for: headings = Alexandria, body/UI = IBM Plex Sans Arabic. */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] [class*="text-sora-heading"], html[dir="rtl"] [class*="text-is-heading"], html[dir="rtl"] [class*="text-manrope-heading"] { font-family: var(--font-sora); } /* premium, slightly bolder Arabic display headings */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { font-weight: 600; } /* Arabic has no true italic — stop the template's italic accent spans from being synthetically slanted (looks broken in Arabic); keep them upright. */ html[dir="rtl"] .italic { font-style: normal; } /* comfortable Arabic reading rhythm in the long-form service copy */ html[dir="rtl"] .service-details-markdown p, html[dir="rtl"] .service-details-markdown li { line-height: 1.9; } /* ===================================================================== Header "الخدمات" dropdown (desktop) — services sub-pages under the main menu. Self-contained CSS (no dependency on compiled utilities). ===================================================================== */ .al-nav-dd { position: absolute; top: 100%; right: 0; min-width: 264px; padding: 8px; border-radius: 16px; background: rgba(13, 16, 23, 0.92); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; z-index: 60; } .al-nav-has-dd:hover .al-nav-dd { opacity: 1; visibility: visible; transform: translateY(0); } .al-nav-dd a { display: block; padding: 10px 14px; border-radius: 10px; font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); white-space: nowrap; transition: background 0.2s ease, color 0.2s ease; } .al-nav-dd a:hover { background: rgba(34, 126, 255, 0.14); color: #ffffff; } /* ===================================================================== MOBILE / TABLET responsive hardening (Arabic tree). Self-contained CSS (no dependency on the prebuilt utility classes in assets/main.css). ===================================================================== */ /* Prevent any accidental horizontal scroll on small screens (safety net for the right-anchored off-canvas sidebar + absolutely-positioned gradients). */ html[dir="rtl"], html[dir="rtl"] body { overflow-x: hidden; } /* Hamburger menu button: the visual is two thin bars (~10px tall hit area), which is far below the ~44px touch-target guideline. Enlarge the TAP area with an invisible overlay — zero layout/visual change. */ .nav-hamburger { position: relative; } .nav-hamburger::after { content: ""; position: absolute; inset: -14px; } /* Footer bottom-bar legal links (سياسة الخصوصية / شروط الخدمة / الكوكيز): the inline links have a ~18px tap height. Enlarge the vertical TAP area with an invisible overlay — zero layout shift (the bar height is unchanged). */ footer .border-y ul a.footer-link { position: relative; } footer .border-y ul a.footer-link::after { content: ""; position: absolute; inset: -12px 0; } /* ===================================================================== Services MEGA dropdown (desktop) — 4 categories in a 2×2 grid. Builds on the existing .al-nav-dd panel; self-contained, no compiled utility dependency. Mobile uses the in-sidebar accordion (unchanged shell). ===================================================================== */ .al-nav-dd.al-nav-mega { display: grid; grid-template-columns: repeat(2, minmax(158px, 1fr)); gap: 2px 8px; min-width: 412px; max-width: 92vw; padding: 12px 8px; } .al-dd-col { display: flex; flex-direction: column; } .al-dd-head { display: block; font-family: "Alexandria", "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.5); padding: 8px 14px 5px; margin-top: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .al-dd-col:first-child .al-dd-head, .al-dd-col:nth-child(2) .al-dd-head { margin-top: 0; } /* ===================================================================== HEADER v2 (2026-07-11) — the single "الخدمات" mega menu was split into 4 top-level dropdowns (البرمجة / التسويق الإلكتروني / أنظمة السيستم / الأتمتة والذكاء الاصطناعي). Desktop menu now shows at >=1280px (xl); the off-canvas drawer handles tablet + mobile. Self-contained CSS, no compiled utility dependency. Colours/identity unchanged. ===================================================================== */ /* Larger brand logo in the header (was 48/36px, then 56/44). File unchanged. */ .al-logo-d img { height: 62px; } /* header — desktop (>=1280px) */ .al-logo-m img { height: 48px; } /* header — mobile/tablet (<1280px) */ .al-logo-menu img { height: 50px; } /* mobile menu drawer */ /* 8 top-level items now share the bar. The template renders nav labels in IBM Plex MONO which is very wide for Arabic and overflowed the pill. Force a compact PROPORTIONAL Arabic font for the top-level labels only (dropdown links keep their own font) so all 8 items fit the pill at xl without wrapping/breaking. Identity colours unchanged. */ .al-nav-top > li > a > span { font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Inter Tight", Tahoma, sans-serif !important; font-size: 13px !important; letter-spacing: 0 !important; white-space: nowrap; } .al-nav-top > li { white-space: nowrap; } /* --------------------------------------------------------------------- Show the horizontal PC menu earlier — from >=1024px (lg) instead of only >=1280px (xl). Many PCs/laptops (esp. with OS display scaling) report a CSS width of 1024–1279, so the desktop menu was hidden and only the hamburger ("phone" menu) showed. Done in CSS via :has() so NO page HTML is touched (case studies / /tools stay untouched). Below 1024px = hamburger drawer. --------------------------------------------------------------------- */ @media (min-width: 64rem) { header nav div:has(> ul.al-nav-top) { display: flex !important; } header nav .nav-hamburger { display: none !important; } .header-scroll { max-width: 1150px !important; } /* room for 8 items at lg */ } @media (min-width: 80rem) { .header-scroll { max-width: 1320px !important; } /* xl: full menu + CTA */ } /* The header CTA button duplicates the "تواصل معنا" nav link; hide it below xl so the 8 nav items fit the pill at lg. Shown again from xl. */ header nav div:has(> ul.al-nav-top) > a[href="/contact"] { display: none; } @media (min-width: 80rem) { header nav div:has(> ul.al-nav-top) > a[href="/contact"] { display: block; } } /* --------------------------------------------------------------------- Force ALL header navigation labels WHITE in every state (top-level items, dropdown links, hover, and the mobile drawer). Some were rendering dark. The CTA button keeps its dark-on-light styling (it sits on a light gradient). --------------------------------------------------------------------- */ header nav .al-nav-top > li > a > span, header nav .al-nav-top > li > a:hover > span, header nav .al-nav-top > li:hover > a > span { color: #ffffff !important; } .al-nav-dd a { color: rgba(255, 255, 255, 0.92) !important; } .al-nav-dd a:hover { color: #ffffff !important; } #mobile-sidebar .footer-link > span, #mobile-sidebar summary > span { color: rgba(255, 255, 255, 0.95) !important; } #mobile-sidebar .al-m-sub a > span { color: rgba(255, 255, 255, 0.72) !important; } /* Single-column service dropdowns: cap height on short viewports + scroll. */ .al-nav-dd { max-height: 78vh; overflow-y: auto; } /* Mobile / tablet drawer — 4 collapsible
accordions for services. Native open/close, no JS. RTL-safe. */ .al-m-acc { border-radius: 12px; } .al-m-sum { list-style: none; cursor: pointer; } .al-m-sum::-webkit-details-marker { display: none; } .al-m-sum::marker { content: ""; } .al-m-caret { flex: 0 0 auto; transition: transform 0.25s ease; opacity: 0.7; } details[open] > .al-m-sum .al-m-caret { transform: rotate(180deg); } .al-m-sub { animation: al-m-reveal 0.25s ease; } @keyframes al-m-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .al-m-caret { transition: none; } .al-m-sub { animation: none; } } /* ===================================================================== HERO title (homepage only, #home) — reduce the oversized heading a bit and tighten line-height, responsively. Text / structure / colours unchanged. Was: lg 4rem (sora-1) / sm 3rem (sora-2) / base 2rem (sora-4); italic span even larger. Scoped to #home so no other page is affected. ===================================================================== */ /* Site-wide design visuals (Al Shohab) embedded on service pages. Rounded, bordered, responsive; never distorts (height auto). */ .al-visual { margin: 0; } .al-visual img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid rgba(34, 126, 255, 0.18); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8); } #home h1 { line-height: 1.2 !important; } /* comfortable, not clipped */ #home h1 { font-size: 1.8rem !important; } /* base / mobile */ #home h1 span { font-size: 1.04em !important; line-height: 1.12 !important; } @media (min-width: 40rem) { #home h1 { font-size: 2.5rem !important; } } /* sm */ @media (min-width: 64rem) { #home h1 { font-size: 3rem !important; } } /* lg+ */ @media (min-width: 96rem) { #home h1 { font-size: 3.25rem !important; } } /* 2xl */