/* ============================================================ Alkamous — the ONLY CSS Elementor cannot express. Everything else lives in Elementor Site Settings / widget controls. ============================================================ */ /* 1. HERO BOTTOM HAND-OFF — the only gradient still needed. The hero render is composed with its own empty dark negative space on the copy side (measured: avg luminance 0.0068 there, giving 18.5:1 for white and 7.0:1 for body grey), so the six-stop horizontal ramp that the previous render required is gone. What remains is a fade to the NEXT section's colour so the hero hands off to the trust bar with no visible seam. Direction-independent, so it needs no RTL/LTR variant. Elementor: class on the hero Container; photo set as that Container's background (Cover, Center Center), overlay left OFF. */ .alk-hero { position: relative; } .alk-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(to top, rgb(11,15,26) 0%, rgba(11,15,26,.72) 7%, rgba(11,15,26,.28) 18%, rgba(11,15,26,0) 34%); } .alk-hero > .e-con-inner, .alk-hero > .elementor-element { position: relative; z-index: 1; } /* 2. Latin runs inside Arabic text must be bidi-isolated or the algorithm reorders them ("+964 790…" renders backwards). No Elementor field does this — wrap the Latin fragment in inside the widget. */ .alk-en { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* 3. `clip`, not `hidden` — `hidden` computes overflow-y to `auto`, making its own scroll container; in RTL that scrollbar sits on the LEFT and shifts the whole page sideways. */ body { overflow-x: clip; } /* 4. Correctness guard, not styling: letter-spacing and text-transform break Arabic letter-joining, and both are one click away in Elementor's typography panel. Line-height belongs in Site Settings > Typography, not here. */ html[dir="rtl"] :is(h1,h2,h3,h4,h5,h6,p,li,a,span,button) { letter-spacing: normal; text-transform: none; } html[dir="rtl"] .alk-en { letter-spacing: revert; text-transform: revert; } /* 5. Stacked, a section photo becomes its own band above the copy (an Image widget set to Hide-on-Desktop), so the container background would double it up. .alk-hero = homepage hero, .alk-banner = the Evolis banner. */ @media (max-width: 1080px) { .alk-hero, .alk-banner { background-image: none !important; min-height: 0 !important; } .alk-hero::after { background: none !important; } } /* 6. Phone header has room for the emblem, the wordmark, one CTA and the burger — but not the Latin sub-line as well. */ @media (max-width: 600px) { .hide-on-phone { display: none !important; } } /* 7. A flex row can squeeze a button narrow enough to break its label across two lines. Elementor has no white-space control, so pin it here. */ .alk-header .elementor-button-text, .alk-header .elementor-button-content-wrapper { white-space: nowrap; } /* 8. A gold second line inside ONE H1 (one heading, for SEO). The Heading widget has no per-word colour, so the title wraps those words in . It reads the Global Color "Primary", so changing that in Site Settings follows. */ .alk-accent { color: var(--e-global-color-primary); } /* 9. Breadcrumb links. The Text Editor widget has no link-colour control; this keeps the trail muted and turns it gold on hover. */ .elementor-widget.alk-crumbs a { color: inherit; transition: color .2s; } .elementor-widget.alk-crumbs a:hover, .elementor-widget.alk-crumbs a:focus-visible { color: var(--e-global-color-primary); } /* 10. Separators between the items of a row (use cases, support). Elementor's border controls are physical (left/right), so one setting can't sit BETWEEN the items in Arabic and on /en/ alike; the logical border-inline-start mirrors by itself. Widths and padding are set in Elementor. Add class "alk-sep" to the row. */ .alk-sep > .elementor-widget + .elementor-widget { border-inline-start: 1px solid rgba(255,255,255,.08); } @media (max-width: 767px) { .alk-sep > .elementor-widget + .elementor-widget { border-inline-start: 0; border-top: 1px solid rgba(255,255,255,.08); } } /* 11. "Forward" arrows point left in Arabic. Icons don't mirror with the text direction, so turn them around on the left-to-right /en/ pages. */ html:not([dir="rtl"]) :is(.e-fas-arrow-left, .e-fas-chevron-left) { transform: scaleX(-1); } /* 12. A full-bleed photo's fade toward the text is an Elementor background-overlay gradient, drawn for Arabic (photo on the left). On the left-to-right /en/ pages the photo swaps sides, so the overlay is mirrored. Vertical fades are unaffected. */ html:not([dir="rtl"]) .alk-fade::before { transform: scaleX(-1); } /* 13. A heading that wraps splits into lines of even length, so no word is left alone on the last line (on phones, "مؤسستك" under the use-cases title did). Elementor has no control for it; browsers without support keep the ordinary wrapping. */ .elementor-heading-title { text-wrap: balance; } /* Paragraphs keep their natural rag but don't end on a lone word either. */ :is(.elementor-widget-text-editor, .elementor-icon-box-description, .elementor-counter-title) { text-wrap: pretty; } /* 14. Header language switcher (TranslatePress shortcode, "opposite language" mode: EN on Arabic pages, AR on English ones). Its colours and border are set in TranslatePress > Language Switcher; this only removes the plugin's own vertical padding and inline spacing so the chip centres on the header row, and gives it the buttons' type. */ .alk-header .trp-shortcode-switcher__wrapper, .alk-header .trp-language-switcher { display: flex; align-items: center; padding: 0; line-height: 1; } .alk-header .trp-language-item { padding: 11px 13px 9px; font-size: 13px; font-weight: 700; letter-spacing: .04em; } /* 15. Contact page. Links inside text (phone, email, WhatsApp) take the brand gold — the Text Editor widget has no link-colour control; add class "alk-links" to a container. Email and phone are typed left to right even in Arabic, so those inputs are LTR (otherwise "+964 …" shows as "… 964+"), still aligned with the other fields. */ .alk-links a { color: var(--e-global-color-primary); transition: color .2s; } .alk-links a:hover, .alk-links a:focus-visible { color: #F3C75F; } .elementor-form :is(input[type="email"], input[type="tel"]) { direction: ltr; } html[dir="rtl"] .elementor-form :is(input[type="email"], input[type="tel"]) { text-align: right; } /* 16. The homepage hero and the Evolis banner are full-bleed photos with the subject on the left and the copy on the right. On the left-to-right /en/ pages the copy keeps that side, left-aligned from the middle of the page. The hero photo (widened with dark wall on the right, wp-generator/hero_wide.py) is 780px tall at every desktop width, so its printer always ends 910px from the photo's left edge; the photo slides left just enough to keep the printer clear of the copy: the Arabic copy's lowest row (the three tiles) starts at about 0.73 x width - 122px, the English copy at half the width. Measured grey text contrast 5.6:1 (Arabic) and 4.2:1 (English, 1100px) or more from 1100 to 2560px. Desktop only: from 1080px down the photo is its own band (see 5). */ @media (min-width: 1081px) { html:not([dir="rtl"]) :is(.alk-hero, .alk-banner) > .e-con > .e-con-inner { justify-content: flex-end; } .alk-hero { background-position: min(0px, calc(72.9vw - 1052px)) 50% !important; } html:not([dir="rtl"]) .alk-hero { background-position: min(0px, calc(50vw - 980px)) 50% !important; } }