/* ============================================================================ Explore.com.sa — Arabic RTL + Cairo font + language switch styling Applied only when (Arabic mode). Latin brand/email kept LTR. Designed to respect the existing layout. ========================================================================== */ /* ---- Cairo font (loaded via in head) applied in Arabic mode ---- */ body.explore-rtl, body.explore-rtl h1, body.explore-rtl h2, body.explore-rtl h3, body.explore-rtl h4, body.explore-rtl h5, body.explore-rtl h6, body.explore-rtl p, body.explore-rtl a, body.explore-rtl span, body.explore-rtl li, body.explore-rtl button, body.explore-rtl input, body.explore-rtl textarea, body.explore-rtl div, body.explore-rtl label { font-family: "Cairo", "Tajawal", system-ui, sans-serif !important; } /* ---- icon fonts must NOT be overridden by Cairo (otherwise glyphs like the dropdown chevron break into boxes). Restore Webflow's icon font. ---- */ body.explore-rtl [class*="w-icon"], body.explore-rtl .nav-dropdown-icon, body.explore-rtl .w-icon-dropdown-toggle, body.explore-rtl .w-icon-nav-menu, body.explore-rtl [class^="w-icon"] { font-family: 'webflow-icons' !important; } /* generic icon-font helpers (fa / material / iconfont) keep their own font */ body.explore-rtl .fa, body.explore-rtl [class*="icon-"]:before, body.explore-rtl [class*="material-icons"] { font-family: inherit; } /* ---- global direction in Arabic ---- */ html[dir="rtl"] body { direction: rtl; text-align: right; } body.explore-rtl { direction: rtl; } /* keep Latin-only items running left-to-right inside an RTL page (brand wordmark, email, social handle, anything tagged) */ body.explore-rtl [data-ltr], body.explore-rtl .w-nav-brand, body.explore-rtl a[href^="mailto:"], body.explore-rtl .brand, body.explore-rtl .logo, body.explore-rtl .logo-text { direction: ltr !important; unicode-bidi: isolate; } /* ============================================================================ CRITICAL: sliders & scroll-animations are built for LTR (splide--ltr / swiper). A global dir=rtl breaks their transform math (slides skew / fly off-screen). Force every animated/slider component to stay LTR so the mechanics work; the Arabic TEXT inside still renders correctly (unicode-bidi isolates each run). ========================================================================== */ body.explore-rtl .splide, body.explore-rtl .splide__track, body.explore-rtl .splide__list, body.explore-rtl .splide__slide, body.explore-rtl .splide__img, body.explore-rtl .swiper, body.explore-rtl .swiper-wrapper, body.explore-rtl .swiper-slide, body.explore-rtl .slider-thumbs_wrapper, body.explore-rtl .slider-thumbs_overflow, body.explore-rtl .slider-thumbs_height, body.explore-rtl .slider-thumbs_img, body.explore-rtl .home-scroll, body.explore-rtl [class*="home-scroll"], body.explore-rtl .logo-ani, body.explore-rtl [class*="logo-ani"], body.explore-rtl .sec.is--slider, body.explore-rtl .contin.is--slider, body.explore-rtl .overflow, body.explore-rtl [class*="infiniteslide"], body.explore-rtl .ts-card, body.explore-rtl [class*="marquee"], body.explore-rtl [class*="-track"], body.explore-rtl [class*="_track"], body.explore-rtl .moving-text-div, body.explore-rtl .moving-text-holder, body.explore-rtl .single-text-div, body.explore-rtl .link-text, body.explore-rtl .all-links-div, body.explore-rtl [class*="moving-text"], body.explore-rtl [class*="link-text"], body.explore-rtl .slide_wrap, body.explore-rtl .slide_contain, body.explore-rtl .slide_card, body.explore-rtl [class*="slide_"], body.explore-rtl .section-30 .container-5, body.explore-rtl [class*="customers__"] { direction: ltr !important; } /* but the Arabic text INSIDE the cards must read RTL/right */ body.explore-rtl .slide_card *, body.explore-rtl [class*="slide_"] p, body.explore-rtl [class*="slide_"] h1, body.explore-rtl [class*="slide_"] h2, body.explore-rtl [class*="slide_"] h3, body.explore-rtl [class*="slide_"] span { direction: rtl; unicode-bidi: plaintext; } /* Arabic text inside those LTR components stays right-reading per-run */ body.explore-rtl .splide__slide *, body.explore-rtl .swiper-slide *, body.explore-rtl .ts-card * { unicode-bidi: plaintext; } /* ---- nav: keep the SAME position/order in both languages (don't shift on toggle) ---- The whole page is RTL, but the navbar layout stays put — only the labels change. */ body.explore-rtl .navbar, body.explore-rtl .w-nav, body.explore-rtl .navbar-container, body.explore-rtl .nav-menu-two, body.explore-rtl .nav-menu-wrapper, body.explore-rtl .w-nav-menu, body.explore-rtl .w-nav-brand { direction: ltr; } /* dropdown panel keeps aligning under its toggle (no jump) */ body.explore-rtl .nav-dropdown-list { text-align: center; } /* ---- text blocks: right align headings/paragraphs ---- */ body.explore-rtl h1, body.explore-rtl h2, body.explore-rtl h3, body.explore-rtl h4, body.explore-rtl p, body.explore-rtl li, body.explore-rtl .text-block, body.explore-rtl [class*="paragraph"], body.explore-rtl [class*="heading"], body.explore-rtl [class*="title"], body.explore-rtl [class*="text"] { text-align: right; letter-spacing: 0 !important; /* Arabic must never be letter-spaced */ } /* centered sections stay centered */ body.explore-rtl [class*="center"], body.explore-rtl [style*="text-align: center"], body.explore-rtl [style*="text-align:center"] { text-align: center !important; } /* Arabic should not be uppercased (it has no case; transform can break shaping) */ body.explore-rtl * { text-transform: none !important; } /* ---- forms: right align labels + inputs ---- */ body.explore-rtl input, body.explore-rtl textarea, body.explore-rtl select { text-align: right; direction: rtl; } body.explore-rtl input[type="email"], body.explore-rtl input[name*="mail" i] { text-align: right; direction: rtl; } /* ---- footer columns mirror ---- */ body.explore-rtl .footer-link, body.explore-rtl .footer-h4 { text-align: right; } /* Arabic line-height a touch taller for legibility */ body.explore-rtl p, body.explore-rtl li { line-height: 1.9; } /* ============================================================================ Language switch button (fixed, bottom corner; flips side by dir) ========================================================================== */ #explore-lang-switch{ position: fixed; bottom: 22px; z-index: 2147483600; inset-inline-end: 22px; /* right in LTR, left in RTL */ width: 52px; height: 52px; border-radius: 50%; background: #111; color: #fff; border: 1px solid rgba(255,255,255,.25); font-family: "Cairo", system-ui, sans-serif; font-size: 16px; font-weight: 700; cursor: pointer; display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 26px rgba(0,0,0,.35); transition: transform .2s ease, background .2s ease; } #explore-lang-switch:hover{ transform: translateY(-2px); background:#000; } #explore-lang-label{ line-height:1; pointer-events:none; } @media (max-width: 640px){ #explore-lang-switch{ width:46px; height:46px; bottom:16px; inset-inline-end:16px; font-size:15px; } } /*EXPLORE-SVC*/ /* hide leftover Webflow style-guide junk (side-nav + 'One small step' demo hero) */ #side-nav, .hero-alt, .nav__sub-container { display:none !important; } /* fix reversed phone/email/address in RTL footer — each line auto-directions */ body.explore-rtl .about-description .subtitle, body.explore-rtl .subtitle.white.add, body.explore-rtl .about-description { unicode-bidi: plaintext; } /* ---- Our Marketing Services section ---- */ .exp-svc-sec{padding:clamp(48px,7vw,100px) clamp(20px,5vw,80px);background:#ffffff;} .exp-svc-head{max-width:780px;margin:0 auto clamp(34px,5vw,56px);text-align:center;} .exp-svc-eyebrow{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#e0492a;margin:0 0 12px;font-weight:700;} .exp-svc-title{font-size:clamp(28px,4.2vw,46px);line-height:1.2;color:#171717;margin:0 0 14px;font-weight:800;} .exp-svc-sub{font-size:clamp(15px,1.6vw,18px);line-height:1.8;color:#666;margin:0;} .exp-svc-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:clamp(14px,2vw,22px);max-width:1220px;margin:0 auto;} @media(min-width:600px){.exp-svc-grid{grid-template-columns:repeat(2,1fr);}} @media(min-width:1024px){.exp-svc-grid{grid-template-columns:repeat(4,1fr);}} .exp-svc-card{position:relative;background:#fff;border:1px solid #ececec;border-radius:16px;padding:30px 26px;text-align:left;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;overflow:hidden;} .exp-svc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#e0492a,#f7941d);transform:scaleX(0);transform-origin:left;transition:transform .38s cubic-bezier(.2,.8,.2,1);} .exp-svc-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(224,73,42,.15);border-color:transparent;} .exp-svc-card:hover::before{transform:scaleX(1);} .exp-svc-num{display:inline-block;font-size:14px;font-weight:800;color:#f7941d;letter-spacing:1px;margin-bottom:14px;font-family:'Cairo',sans-serif;} .exp-svc-name{font-size:19px;font-weight:800;color:#171717;margin:0 0 10px;line-height:1.35;} .exp-svc-desc{font-size:14px;line-height:1.85;color:#6a6a6a;margin:0;} .exp-svc-cta{text-align:center;margin-top:clamp(34px,5vw,52px);} .exp-svc-btn{display:inline-block;padding:15px 38px;border-radius:40px;background:linear-gradient(90deg,#e0492a,#f7941d);color:#fff;font-weight:700;font-size:15px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease;} .exp-svc-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(224,73,42,.35);} /* RTL alignment */ body.explore-rtl .exp-svc-card{text-align:right;} body.explore-rtl .exp-svc-card::before{transform-origin:right;} body.explore-rtl .exp-svc-name,body.explore-rtl .exp-svc-desc{text-align:right;} /*/EXPLORE-SVC*/ /*EXPLORE-HARMONY*/ /* ---- visual harmony for the EXPLORE / MARKETING GROUP intro section ---- */ .marketing .text-block-62, .marketing .text-block-62.normal{ font-size: clamp(15px, 1.15vw, 17px) !important; line-height: 2.1 !important; color: #4c4c4c !important; max-width: 900px; margin-left: auto; margin-right: auto; margin-top: 22px; } .marketing .text-block-62 strong{ color:#222; font-weight:700; } /* heading hierarchy: EXPLORE (big) -> التسويق (accent) -> المجموعة (sub) */ .marketing .heading-37.plus{ font-size: clamp(20px, 1.8vw, 26px) !important; font-weight: 700 !important; color:#e0492a !important; letter-spacing: .5px; margin-top: 8px; line-height:1.3; } .marketing .heading-37.plus._1{ font-size: clamp(15px, 1.3vw, 19px) !important; font-weight: 600 !important; color:#f7941d !important; letter-spacing: 2px; margin-top: 2px; } /* a touch more breathing room around the heading block */ .marketing .div-block-115{ margin-bottom: 6px; } @media(max-width:640px){ .marketing .text-block-62, .marketing .text-block-62.normal{ font-size:15px !important; line-height:2 !important; } } /*/EXPLORE-HARMONY*/ /*EXPLORE-PAGES*/ .xp-wrap{max-width:1220px;margin:0 auto;padding:0 clamp(20px,5vw,80px);} /* hero */ .xp-hero{background:linear-gradient(135deg,#e0492a 0%,#f7941d 100%);color:#fff;text-align:center;padding:clamp(90px,13vw,160px) clamp(20px,5vw,80px) clamp(60px,8vw,100px);} .xp-hero__inner{max-width:880px;margin:0 auto;} .xp-hero__eyebrow{font-size:13px;letter-spacing:4px;text-transform:uppercase;opacity:.9;margin:0 0 16px;font-weight:700;} .xp-hero__wordmark{font-family:Arial,Helvetica,sans-serif;font-size:clamp(48px,10vw,120px);letter-spacing:.12em;font-weight:800;margin:0;line-height:1;opacity:.16;} .xp-hero__word{font-size:clamp(30px,5.5vw,64px);font-weight:800;margin:-.35em 0 18px;line-height:1.1;} .xp-hero__intro{font-size:clamp(15px,1.7vw,19px);line-height:1.9;opacity:.96;margin:0 auto;max-width:680px;} /* generic section */ .xp-sec{padding:clamp(48px,7vw,96px) 0;background:#fff;} .xp-sec--tint{background:#fbf6f3;} /* steps */ .xp-steps{display:grid;grid-template-columns:1fr;gap:clamp(14px,2vw,22px);} @media(min-width:600px){.xp-steps{grid-template-columns:repeat(2,1fr);}} @media(min-width:1024px){.xp-steps{grid-template-columns:repeat(4,1fr);}} .xp-step{position:relative;background:#fff;border:1px solid #eee;border-radius:16px;padding:30px 24px;} .xp-step__n{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#e0492a,#f7941d);color:#fff;font-weight:800;font-size:18px;margin-bottom:16px;} .xp-step__t{font-size:19px;font-weight:800;color:#171717;margin:0 0 8px;} .xp-step__d{font-size:14px;line-height:1.85;color:#6a6a6a;margin:0;} /* stats */ .xp-stats-sec{padding:clamp(40px,6vw,80px) 0;background:#143a3b;} .xp-stats-sec .xp-wrap{background:transparent;} .xp-stats{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,40px);text-align:center;} @media(min-width:700px){.xp-stats{grid-template-columns:repeat(3,1fr);}} .xp-stat__n{display:block;font-size:clamp(40px,6vw,68px);font-weight:800;background:linear-gradient(135deg,#f7941d,#e0492a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;} .xp-stat__l{display:block;margin-top:12px;color:#cfe3e0;font-size:15px;} /* chips */ .xp-chips{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;} .xp-chip{padding:14px 28px;border-radius:40px;border:1px solid rgba(224,73,42,.3);color:#e0492a;font-weight:700;font-size:16px;transition:all .25s ease;} .xp-chip:hover{background:linear-gradient(135deg,#e0492a,#f7941d);color:#fff;border-color:transparent;transform:translateY(-3px);} /* news cards */ .xp-news-grid{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,26px);} @media(min-width:600px){.xp-news-grid{grid-template-columns:repeat(2,1fr);}} @media(min-width:1024px){.xp-news-grid{grid-template-columns:repeat(3,1fr);}} .xp-news-card{background:#fff;border:1px solid #ececec;border-radius:16px;padding:30px 26px;text-align:left;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;} .xp-news-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(224,73,42,.14);} .xp-news-cat{display:inline-block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#f7941d;font-weight:800;margin-bottom:14px;} .xp-news-t{font-size:20px;font-weight:800;color:#171717;margin:0 0 12px;line-height:1.4;} .xp-news-d{font-size:14px;line-height:1.85;color:#6a6a6a;margin:0 0 16px;} .xp-news-more{font-size:13px;font-weight:700;color:#e0492a;} /* cta */ .xp-cta-sec{padding:clamp(56px,8vw,110px) 0;background:#fbf6f3;text-align:center;} .xp-cta-title{font-size:clamp(26px,4vw,44px);font-weight:800;color:#171717;margin:0 0 28px;} /* RTL alignment for page content */ body.explore-rtl .xp-step,body.explore-rtl .xp-news-card{text-align:right;} body.explore-rtl .xp-news-card{ } /*/EXPLORE-PAGES*/