/* League Spartan (brand wordmark) — loaded locally so it never silently falls back */ @font-face{ font-family:"League Spartan";font-style:normal;font-weight:700;font-display:swap; src:url("/absher/league-spartan-700.woff2") format("woff2"); } @font-face{ font-family:"League Spartan";font-style:normal;font-weight:800;font-display:swap; src:url("/absher/league-spartan-800.woff2") format("woff2"); } /* Absher logo sizing to fit Webflow's existing brand wrappers */ .absher-logo{display:block;width:100%;height:100%} .nav__symbol-wrapper .absher-logo{width:2em;height:2em} .absher-logo--footer{width:44px;height:44px} /* kill the leftover Webflow rotation interaction on the brand link */ .nav__symbol-wrapper,.nav__symbol-wrapper .absher-logo{transform:none!important;animation:none!important} /* text wordmark that replaces the old "contiant" logotype. mix-blend keeps it readable on both the dark hero nav and the white scrolled nav */ .absher-wordmark{ font-family:"League Spartan",system-ui,-apple-system,Segoe UI,sans-serif; font-weight:700!important;font-size:1.6rem;line-height:1;letter-spacing:-.005em; white-space:nowrap;color:#1e1e1e; } .footer__logo-wrap .absher-wordmark{font-size:1.7rem} /* nav is fixed + transparent over varying sections: the wordmark auto-inverts. JS toggles .on-dark based on the luminance of whatever is behind the nav. */ .absher-wordmark.on-dark{color:#fff} /* --- nav brand: bigger mark + vertically centre mark with the wordmark --- mark and wordmark are SIBLINGS; centre both within their common flex parent. */ .symbol-wrap,.nav__logotype-wrapper{align-self:center!important;margin-bottom:0!important} .symbol-wrap{align-items:center!important} .nav__symbol-wrapper{width:38px!important;height:38px!important;margin-right:10px!important} .nav__symbol-wrapper .absher-logo{width:38px!important;height:38px!important} .nav__logotype-wrapper{align-items:center!important;height:38px!important} .nav__logotype-wrapper .absher-wordmark{font-size:1.85rem;line-height:1;display:flex;align-items:center} /* --- integration logo marquee ------------------------------------------------ Contiant puts filter:grayscale() on .marquee__container. A parent's filter cannot be undone by a child, so hover-to-colour requires moving the filter onto the images themselves. Tune --logo-dim to taste (0 = pure black). */ .marquee__container{filter:none!important} .logo__wrapper img{ height:48px;width:auto;max-width:none; filter:grayscale(1) brightness(var(--logo-dim,.35)) contrast(1.15); transition:filter .28s ease; } .logo__wrapper:hover img{filter:none} @media (prefers-reduced-motion:reduce){.logo__wrapper img{transition:none}} /* --- USP card icons ----------------------------------------------------------- Contiant drew these as CSS circles (var(--deep) plus translucent noise-textured glass). Swapping them via background-image keeps the existing flex layout, z-order and overlap offsets, so no markup changes are needed. The icon row is 60px tall (.usp-icon_wrap). */ /* 1. "Speaks your dialect": two half-circles -> one wave */ .usp-card__wrap.first .usp-icon_wrap{ background:url("/absher/icons/dialect-wave.png") left center/auto 60px no-repeat; } .usp-card__wrap.first .half-circle__one, .usp-card__wrap.first .half-circle__two{display:none} /* 2. "Always on, 24/7": three glass circles -> one flat day/night mark. Same approach as card 1: one artwork on the wrapper, inner divs hidden. */ .usp-card__wrap.second .usp-icon_wrap{ background:url("/absher/icons/always-on-daynight.svg") left center/auto 60px no-repeat; } .usp-card__wrap.second .circle__one, .usp-card__wrap.second .circle__two, .usp-card__wrap.second .circle__tr{display:none} /* 3. "Takes real action": glass circle + dark badge -> one flat check mark */ .usp-card__wrap.third .usp-icon_wrap{ background:url("/absher/icons/takes-action.svg") left center/auto 60px no-repeat; } .usp-card__wrap.third .circle__f, .usp-card__wrap.third .circle__check{display:none} /* the icon sits on the leading edge of the row, which flips under RTL */ [dir="rtl"] .usp-icon_wrap{background-position:right center!important} /* The badge sat behind the circle (z-index 3 vs 4). Fine for Contiant's wide checkmark, but it clipped the tail of the diagonal arrow, so lift it in front. */ .circle__check{z-index:5} /* --- dark section phone imagery ---------------------------------------------- Contiant frosted .card-img-1 with backdrop-filter over a 14px rounded box to make a credit card read as glass. On a phone-shaped PNG that just paints a blurred rectangle around the phone, so drop it. */ .card-img-1{ -webkit-backdrop-filter:none!important;backdrop-filter:none!important; border-radius:0!important; } /* Keep the phones behind the copy. The wrapper was z-index:auto with a z-index:9 child, so the imagery painted over the headline. Contain the wrapper at 0 and lift the headline/paragraph above it. The CTA is already z-index:10. */ .cards-img_wrapper{z-index:0} .usps__child.right .contents__wrapper{position:relative;z-index:1} /* ---- channel cards (One voice for every channel) ---- */ .bank__logo .channel-icon{ width:100%;height:100%; object-fit:contain; display:block; } /* Contiant padded these for short bank names; our labels need the width. Desktop only: below 992px the cards get much wider and keep their own padding. */ @media (min-width:992px){ .section__payment-grid .bank__box{padding-left:.75em;padding-right:.75em} .section__payment-grid .bank___name{width:100%} .section__payment-grid .bank___name .p-tiny{white-space:nowrap} /* larger channel cards: borrow 3% from the centre and right columns */ .section__payment-grid .payment_child.left{width:36%} .section__payment-grid .payment_child.center, .section__payment-grid .payment_child.right{width:32%} .section__payment-grid .p-banks__wrap{width:31.5%} .section__payment-grid .bank__box{height:9.8em} .section__payment-grid .bank__logo{width:3.4em;height:3.4em;margin-top:.6em} } /* the phone glyph is 29x48 of ink where the others are ~45x45, so contain-fit makes it read smaller; scale it back to matching optical size */ .bank__logo .channel-icon--tall{transform:scale(1.16)} /* ---- Listens / Understands / Acts icons ---- */ /* Listens: the dot rides into the ear on scroll (logo-hover.js) */ .usp-ear{position:relative;width:13.5em;height:13.5em} .usp-ear img{position:absolute;inset:0;width:100%;height:100%;display:block} .usp-ear__dot{transform-origin:35% 50%;will-change:transform} /* Understands: two bubbles, dark up-left over light down-right */ .usp-bubbles{position:relative;width:13.5em;height:13.5em} .usp-bubble{position:absolute;display:block;height:auto;will-change:transform} .usp-bubble--dark {width:72%;left:0; top:6%} .usp-bubble--light{width:58%;left:42%;top:42%} @media (max-width:991.9px){ .usp-ear,.usp-bubbles{width:9em;height:9em} } /* --- comparison tabs ("From hello to handled") ----------------------------- Webflow hid the 7-step grid below 767px and swapped in a baked SVG of Contiant's payment chain. That asset is gone, so stack the real grid. */ @media screen and (max-width:767px){ .section__tabs .tab-content-boxes-grid{display:flex;flex-direction:column;margin-bottom:0} .section__tabs .tab-content-boxes-grid.top-margin{margin-top:0} .section__tabs .arrow__embed-svg.hide-on-mobile{display:block} .section__tabs .tab-content-box-gray{margin:.5em 0} } /* The chip icon is a transparent line glyph, not a photo: sit it on a tile. */ .section__tabs .customer__product-image{background:#fff;padding:.75em} /* The chip carries a sentence where Contiant had a price, so it is wider than the circle. Contiant's `left:50%` pushes a wide chip clean out of the card (and needs a different magic number per breakpoint), so pin it to the circle's bottom-right instead: width can then never push it outside. */ .section__tabs .tab-content-box:first-child .tab-content-imagery{width:100%;display:flex;justify-content:center} .section__tabs .customer__product-wrap{position:absolute;top:auto;left:auto;right:0;bottom:-1.6em} /* --- industries grid ------------------------------------------------------ Contiant's icon disc was #cddedd behind #537C7A glyphs: a teal pair the global recolour map never covered. Peach disc, brand-red glyph instead. */ .section__payment-evolution .evolution-circle{background-color:#FCEAE5;opacity:1} /* --- RTL (Arabic tree) ----------------------------------------------------- CSS transforms are physical: they ignore `direction`, so nothing that points or slides horizontally flips itself on /ar/. Mirror the ones that carry meaning. Scoped to [dir="rtl"], so these are inert on the English pages. */ /* Process and button arrows. The flip goes on the wrapper, never on the inner /, because Webflow IX2 writes inline transforms onto those during hover and an inline style would beat this rule mid-animation. */ [dir="rtl"] .arrow__embed-svg, [dir="rtl"] .m-b-arrow{transform:scaleX(-1)} [dir="rtl"] .m-b-arrow{margin-left:0;margin-right:.6em} @media screen and (max-width:991px){ /* the chain stacks vertically here and the arrow already rotates to point down, which needs no mirroring */ [dir="rtl"] .arrow__embed-svg{transform:rotate(90deg)} } /* The three-lines burst is pinned to `left:100%`, the physical right edge of its word. In RTL that is the START of the phrase, so move it to the other side and mirror it so the strokes still radiate outward. */ [dir="rtl"] .js-three-lines .svg-three-lines{left:auto;right:100%;transform:scaleX(-1)} /* The hero cards are absolutely positioned by JS (`positionCards`), which sets `style.left` from a DOCUMENT-coordinate getBoundingClientRect().left. That only works while the containing block starts at x=0. `.hero__imgs` has no explicit inset, so it falls back to its static position: x=0 under LTR, but the RIGHT edge under RTL, which threw all 9 cards ~1330px off-screen. Pinning it to the left edge makes document and containing-block coords agree in both directions, exactly as they already do in English. */ [dir="rtl"] .hero__imgs{left:0;right:auto} /* The logo marquee is GSAP's horizontalLoop, whose maths assume DOM order runs left-to-right: it derives total track width from `last.offsetLeft - first.offsetLeft`. Under RTL the flex row lays the three wrappers out right-to-left, so that difference goes NEGATIVE and the timeline ends up with no duration: the strip freezes outright. The logos carry no reading order, so give just the track LTR layout. The label beside it is a sibling and stays RTL. */ [dir="rtl"] .marquee__container{direction:ltr} /* Overlapping stacks (the 24/7 circles, the action badge, the two phones) are built with `position:relative; left:-Npx` to pull each element back over its predecessor. CSS 2.1 says that when a relatively positioned box has both offsets resolved, `direction:rtl` makes `right` win instead of `left` — so under RTL every one of these shifts the opposite way and the stacks fly APART. Measured on /ar/: the 24/7 circles went from a 27px pitch to 81px, and the two phones from 112px apart to 293px. Restate each offset on the `right` side, with `left:auto` so it wins. */ [dir="rtl"] .circle__two {left:auto;right:-30px} [dir="rtl"] .circle__tr {left:auto;right:-60px} [dir="rtl"] .circle__check {left:auto;right:-20px} [dir="rtl"] .half-circle__two {left:auto;right:-49px} [dir="rtl"] .card-img-2 {left:auto;right:-91px} @media screen and (max-width:991px){ [dir="rtl"] .card-img-1{left:auto;right:-6em} } /* Channels grid connector. The SVG draws a single trunk at its RIGHT edge (x=584 in a 0 0 586 266 viewBox) fanning into four branches on the LEFT. In English that matches the columns: channels left, outcome right. RTL mirrors the columns but not the SVG, so the fan ends up pointing at the outcome card and the trunk at the channels: backwards. Mirror it, then counter-mirror the Absher mark, which lives INSIDE this SVG (.logo-contiant) because the sibling Lottie is display:none at this size. */ [dir="rtl"] .svg-contiant-links{transform:scaleX(-1)} [dir="rtl"] .svg-contiant-links .logo-contiant{transform:scaleX(-1);transform-origin:center} @media only screen and (max-width:991.9px){ /* below this the grid stacks and the connector is rotated upright; vertical order does not flip under RTL, so keep Webflow's own transforms */ [dir="rtl"] .svg-contiant-links{transform:rotate(90deg)} [dir="rtl"] .svg-contiant-links .logo-contiant{transform:rotate(-90deg)} } /* The "request completed" card is pulled back over the WhatsApp card with `right:2em` on a relatively positioned box. RTL keeps `right` winning, so the same offset now pushes it AWAY from the card it should overlap. Negate it. Breakpoint variants carry their own values; ≤479px switches to absolute positioning, where the offset belongs on the opposite physical edge. */ [dir="rtl"] .transaction__card{right:-2em} @media screen and (min-width:1920px){ [dir="rtl"] .transaction__card{right:-7.6em} } @media screen and (max-width:479px){ [dir="rtl"] .transaction__card{right:auto;left:-1em} } /* --- horizontal USP row ---------------------------------------------------- Webflow IX2 slides this row with a physical translateX written inline, which CSS cannot override. Under RTL the heading moves to the right, so the row ran straight through it and travelled the wrong way. Fix by composition instead: the standalone `scale` property is applied BEFORE `transform` in the CSS transform pipeline, so scaling the row by -1 negates whatever translateX IX2 writes, this frame and every frame. `direction:ltr` restores the DOM-order geometry IX2 assumes; the mirror then puts the cards back in RTL reading order. The card CONTENTS are counter-mirrored, not the cards themselves, because the cards carry IX2 rotate origins of 100%/50%/0% that a scale would pivot around. */ @media screen and (min-width:992px){ [dir="rtl"] .usp-horizontal__wrap{direction:ltr;scale:-1 1} [dir="rtl"] .h-usp-card__wrap > *{scale:-1 1;direction:rtl} } /* Row connector in the "old way" chain. Between the two rows the flow has to travel back across the grid, so a single arrow says nothing: it needs an elbow from row 1's last box to row 2's first box. The existing [dir="rtl"] scaleX(-1) on .arrow__embed-svg mirrors it for Arabic, where the same 560px of travel runs the other way. Stacked layouts keep a plain arrow. */ .section__tabs .row-link{width:100%} .section__tabs .row-link__stack{display:none} @media screen and (max-width:991px){ .section__tabs .row-link__elbow{display:none} .section__tabs .row-link__stack{display:inline-block} } /* Arabic descenders. `.h--huge` ships with line-height:1, which fits Latin (worst ink 56px in a 59px box) but not Arabic: measured descents run to 27px against only 9.5px of room below the baseline. In the hero rotator `.home-hero__ab-headings` is overflow:hidden, so the glyphs were clipped outright; elsewhere they collide with the next line. IBM Plex Sans Arabic reports ascent 64 + descent 24 on a 58.88px font, a natural line box of 1.494. 1.6 clears the deepest descender with margin. */ [dir="rtl"] .h--huge{line-height:1.6} /* --------------------------------------------------------------------------- Cookie consent banner (absher/consent.js) Keeps Contiant's original pill: centred, peach, 40px radius, 8px/16px padding, fixed at bottom 2%. Everything below is the minimum needed to fit two buttons where the close cross used to sit, so the banner can take a real choice. The buttons echo the old close button's translucent circle. --------------------------------------------------------------------------- */ #cookie-banner.absher-consent{display:none} /* the pill sizes itself; the original fixed 400px is too narrow for two buttons */ #cookie-banner.absher-consent .cookie-info-wrapper{ width:auto;max-width:min(92vw,514px);gap:10px} /* the Arabic string is longer; give it room to stay on one line */ [dir="rtl"] #cookie-banner.absher-consent .cookie-info-wrapper{max-width:min(92vw,594px)} #cookie-banner.absher-consent .absher-consent__icon{ flex:none;color:#E94535;display:block;margin-left:2px} #cookie-banner.absher-consent .absher-consent__text{min-width:0} #cookie-banner.absher-consent .absher-consent__actions{ display:flex;gap:8px;flex:none;align-items:center} .absher-consent__btn{ font:inherit;font-weight:600;line-height:1;cursor:pointer; white-space:nowrap;padding:10px 16px;font-size:14px;border:0;border-radius:40px; transition:background-color .3s,color .3s} .absher-consent__btn.is--reject{background:#0000001a;color:#292929} .absher-consent__btn.is--reject:hover{background:#16101033} .absher-consent__btn.is--accept{background:#E94535;color:#fff} .absher-consent__btn.is--accept:hover{background:#c0301f} .absher-consent__btn:focus-visible{outline:2px solid #292929;outline-offset:2px} /* fade in, matching the old close button's .3s feel */ #cookie-banner.absher-consent .cookie-info-wrapper{ opacity:0;transition:opacity .3s ease} #cookie-banner.absher-consent.is--visible .cookie-info-wrapper{opacity:1} @media screen and (max-width:479px){ #cookie-banner.absher-consent .cookie-info-wrapper{ flex-wrap:wrap;border-radius:1.5em;padding:1em} #cookie-banner.absher-consent .absher-consent__actions{width:100%} .absher-consent__btn{flex:1 1 0} } @media (prefers-reduced-motion:reduce){ #cookie-banner.absher-consent .cookie-info-wrapper{transition:none} } /* --------------------------------------------------------------------------- Join the waiting list (absher/waitlist.js) Sits in the dark CTA section. The submit button reuses .m-button__wrap, so it inherits the hero button's shape, colour and IX2 hover animation. --------------------------------------------------------------------------- */ .waitlist{width:100%;max-width:34em;margin:2.2em auto 0;text-align:center} .waitlist__row{display:flex;gap:.6em;align-items:stretch;flex-wrap:wrap;justify-content:center} .waitlist__input{ flex:1 1 15em;min-width:0;font:inherit;font-size:1em;color:var(--white,#fff); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);border-radius:300px; padding:1em 1.6em;outline:none; transition:border-color .3s,background-color .3s} .waitlist__input::placeholder{color:rgba(255,255,255,.45)} .waitlist__input:hover{border-color:rgba(255,255,255,.3)} .waitlist__input:focus{border-color:rgba(233,69,53,.55);background:rgba(255,255,255,.1); box-shadow:0 0 0 3px rgba(233,69,53,.18)} /* the button is a