/* ============================================================ Divano - RTL overlay (Arabic / ديفانو) Loaded ONLY by /ar/ pages, ALWAYS LAST (after every theme + custom stylesheet). Every rule is scoped under [dir="rtl"] (set on by the Arabic pages) so it is inert on the English site. Grid & flex containers already flip with dir="rtl"; this file only (a) sets Arabic typography, and (b) mirrors *physical* properties (float / text-align / left|right offsets / margin|padding|border sides) that do NOT follow direction. Written defensively - no browser was available to preview, so it prefers text-align / start-end fixes over risky absolute repositioning. ============================================================ */ /* ============================================================ A · ARABIC TYPOGRAPHY Almarai first, then the existing Latin stacks (Arabic glyphs always resolve to Almarai; the Latin families remain as fallbacks for any Latin runs). Applied to body (cascades by inheritance) + every element/class that declares its OWN font-family, so Dosis / Cormorant do not block Almarai. NOTE: font-family is deliberately NOT forced on bare / - that would clobber FontAwesome glyph fonts. Icons keep their own direct font-family and are unaffected. ============================================================ */ [dir="rtl"] body, [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] a, [dir="rtl"] blockquote, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] label, [dir="rtl"] nav, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] .ot_custom_heading, [dir="rtl"] #subheader h1, [dir="rtl"] #subheader .crumb, [dir="rtl"] #mainmenu, [dir="rtl"] #mainmenu a, [dir="rtl"] .hm-hero__title, [dir="rtl"] .hm-hero__ey, [dir="rtl"] .hm-hero__lead, [dir="rtl"] .hm-btn, [dir="rtl"] .dm-factory__ey, [dir="rtl"] .dm-factory__title, [dir="rtl"] .dm-factory__lead, [dir="rtl"] .dm-factory__body, [dir="rtl"] .dm-clients__ey, [dir="rtl"] .dm-clients__title, [dir="rtl"] .cs-hero__title, [dir="rtl"] .cs-hero__cat, [dir="rtl"] .cs-hero__loc, [dir="rtl"] .cs-hero__fact .v, [dir="rtl"] .cs-hero__fact .k, [dir="rtl"] .cs-hero__tags span, [dir="rtl"] .cs-sh__t, [dir="rtl"] .cs-sh__s, [dir="rtl"] .cs-fact .k, [dir="rtl"] .cs-fact .v, [dir="rtl"] .cs-inline-k, [dir="rtl"] .cs-stat__n, [dir="rtl"] .cs-stat__l, [dir="rtl"] .cs-tl__n, [dir="rtl"] .cs-tl__txt h3, [dir="rtl"] .cs-ba__label, [dir="rtl"] .cs-ba__thumb, [dir="rtl"] .cs-ba__hint, [dir="rtl"] .cs-pal__card h3, [dir="rtl"] .cs-ed__cap, [dir="rtl"] .cs-cta p, [dir="rtl"] .cs-cta a, [dir="rtl"] .cs-nav a, [dir="rtl"] .cs-btn, [dir="rtl"] .pf-side button, [dir="rtl"] .pf-side__n, [dir="rtl"] .pf-card__badge, [dir="rtl"] .pf-card__cat, [dir="rtl"] .pf-card__name, [dir="rtl"] .pf-card__meta, [dir="rtl"] .pf-card__view, [dir="rtl"] .pf-empty, [dir="rtl"] .ab .ey, [dir="rtl"] .ab h2, [dir="rtl"] .ab-hero h1, [dir="rtl"] .ab-hero__tag, [dir="rtl"] .ab-stat .n, [dir="rtl"] .ab-stat .l, [dir="rtl"] .ab-card h3, [dir="rtl"] .ab-feat h3, [dir="rtl"] .ab-step__n, [dir="rtl"] .ab-step__t, [dir="rtl"] .ab-quote p, [dir="rtl"] .ab-quote__name, [dir="rtl"] .ab-quote__role, [dir="rtl"] .ab-cta__btn, [dir="rtl"] .ab-tst__google a, [dir="rtl"] .ct .ey, [dir="rtl"] .ct h2, [dir="rtl"] .ct-hero h1, [dir="rtl"] .ct-btn, [dir="rtl"] .ct-info__item h4, [dir="rtl"] .ct-why__item, [dir="rtl"] .ct-step .n, [dir="rtl"] .ct-step h4, [dir="rtl"] .sv-ey, [dir="rtl"] .sv h2, [dir="rtl"] .sv-lead, [dir="rtl"] .sv-point .n, [dir="rtl"] .sv-point h3, [dir="rtl"] .sv-card .t, [dir="rtl"] .sv-card .v, [dir="rtl"] .sv-btn, [dir="rtl"] footer .widget h3, [dir="rtl"] footer address span strong, [dir="rtl"] .subfooter, [dir="rtl"] .dv3d-title, [dir="rtl"] .dv3d-hint, [dir="rtl"] .dv3d-loader span, [dir="rtl"] .dv3d-error { font-family: "Almarai", 'Dosis', 'Cormorant Garamond', 'Open Sans', -apple-system, "Segoe UI", Tahoma, Arial, sans-serif !important; } /* Connected Arabic script breaks with tracking - kill every letter-spacing the theme sets on user-visible text. Each selector is prefixed with [dir="rtl"] so it out-specifies (and !important-beats) the original, including the mobile overrides. */ [dir="rtl"] body, [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] a, [dir="rtl"] span, [dir="rtl"] blockquote, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] label, [dir="rtl"] nav, [dir="rtl"] address, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] .ot_custom_heading, [dir="rtl"] h1.ot_custom_heading, [dir="rtl"] .btn-line, [dir="rtl"] a.btn-line, [dir="rtl"] .btn-fullwidth, [dir="rtl"] .box-four-columns h3, [dir="rtl"] .service-excerpt p, [dir="rtl"] .de_testi blockquote p, [dir="rtl"] #subheader h1, [dir="rtl"] #subheader .crumb, [dir="rtl"] #mainmenu, [dir="rtl"] #mainmenu > li > a, [dir="rtl"] footer .widget h3, [dir="rtl"] footer address span strong, [dir="rtl"] .subfooter, [dir="rtl"] .hm-hero__ey, [dir="rtl"] .hm-hero__title, [dir="rtl"] .hm-btn, [dir="rtl"] .dm-factory__ey, [dir="rtl"] .dm-factory__points li span, [dir="rtl"] .dm-clients__ey, [dir="rtl"] .pf-side button, [dir="rtl"] .pf-side__n, [dir="rtl"] .pf-card__badge, [dir="rtl"] .pf-card__cat, [dir="rtl"] .pf-card__meta, [dir="rtl"] .pf-card__view, [dir="rtl"] .cs-btn, [dir="rtl"] .cs-sh__t, [dir="rtl"] .cs-hero__cat, [dir="rtl"] .cs-hero__title, [dir="rtl"] .cs-hero__loc, [dir="rtl"] .cs-hero__fact .v, [dir="rtl"] .cs-hero__fact .k, [dir="rtl"] .cs-hero__tags span, [dir="rtl"] .cs-fact .k, [dir="rtl"] .cs-fact .v, [dir="rtl"] .cs-inline-k, [dir="rtl"] .cs-stat__l, [dir="rtl"] .cs-tl__txt h3, [dir="rtl"] .cs-ba__label, [dir="rtl"] .cs-ba__thumb, [dir="rtl"] .cs-ba__hint, [dir="rtl"] .cs-pal__card h3, [dir="rtl"] .cs-ed__cap, [dir="rtl"] .cs-cta a, [dir="rtl"] .cs-nav a, [dir="rtl"] .dv-lb-cap, [dir="rtl"] .ab .ey, [dir="rtl"] .ab h2, [dir="rtl"] .ab-hero h1, [dir="rtl"] .ab-hero__tag, [dir="rtl"] .ab-stat .l, [dir="rtl"] .ab-card h3, [dir="rtl"] .ab-feat h3, [dir="rtl"] .ab-step__n, [dir="rtl"] .ab-step__t, [dir="rtl"] .ab-quote__stars, [dir="rtl"] .ab-quote__name, [dir="rtl"] .ab-quote__role, [dir="rtl"] .ab-cta__btn, [dir="rtl"] .ab-tst__google a, [dir="rtl"] .ab-tst__gstars, [dir="rtl"] .ct .ey, [dir="rtl"] .ct h2, [dir="rtl"] .ct-hero h1, [dir="rtl"] .ct-btn, [dir="rtl"] .ct-info__item h4, [dir="rtl"] .ct-why__item, [dir="rtl"] .ct-step h4, [dir="rtl"] .ct-field label, [dir="rtl"] .sv-ey, [dir="rtl"] .sv h2, [dir="rtl"] .sv-point .n, [dir="rtl"] .sv-point h3, [dir="rtl"] .sv-btn, [dir="rtl"] .sv-card .v, [dir="rtl"] .dv3d-title, [dir="rtl"] .dv3d-hint, [dir="rtl"] .dv3d-btn { letter-spacing: 0 !important; } /* Slightly roomier leading for Arabic body copy */ [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] blockquote p, [dir="rtl"] .cs-story2__body p, [dir="rtl"] .ab p, [dir="rtl"] .ct p, [dir="rtl"] .sv-lead, [dir="rtl"] .dm-factory__lead, [dir="rtl"] .hm-hero__lead { line-height: 1.9; } /* ============================================================ B · MIRRORING - physical properties that don't follow dir ============================================================ */ /* ---- Header (legacy theme) : logo right, nav/hamburger left ---- */ [dir="rtl"] header div#logo { float: right; } [dir="rtl"] header nav { float: left; } [dir="rtl"] #mainmenu { float: left; } [dir="rtl"] #mainmenu li { float: right; } /* the 20px inter-item gutter lived on the link's LEFT - move it right. Desktop-only: the mobile stacked menu (divano-modern) is centred and sets its own link padding, which must not be overridden here. */ @media (min-width: 993px) { [dir="rtl"] #mainmenu a { padding: 25px 20px 22px 0; } } [dir="rtl"] #menu-btn { float: left; } /* desktop nav underline (divano-modern) hangs off the link's left edge */ [dir="rtl"] #mainmenu > li > a::after { left: auto; right: 20px; } @media (min-width: 980px) and (max-width: 1199px) { [dir="rtl"] #mainmenu > li > a::after { left: 5px; right: 5px; } } /* dropdown submenus (site menu is flat today - defensive) */ [dir="rtl"] #mainmenu ul { float: left; } [dir="rtl"] #mainmenu > li > ul { left: auto; right: 0; } [dir="rtl"] #mainmenu li li a { text-align: right; } /* ---- Inner-page hero / breadcrumb (#subheader) ---- */ [dir="rtl"] #subheader h1 { text-align: right !important; } [dir="rtl"] #subheader .crumb { text-align: right; } [dir="rtl"] #subheader .crumb li:after { margin-left: 0; margin-right: 5px; } /* ---- Footer : bootstrap .col-* are float:left - flip so the logo column starts on the right and the columns read R→L ---- */ [dir="rtl"] .main-footer [class*="col-"], [dir="rtl"] .subfooter [class*="col-"] { float: right; } /* animated footer link underline + hover nudge */ [dir="rtl"] footer .widget_nav_menu li a::after { left: auto; right: 0; transform-origin: right; } [dir="rtl"] footer .widget_nav_menu li a:hover { transform: translateX(-4px); } /* ---- "Read More" arrow (divano-modern .btn-fullwidth) ---- */ [dir="rtl"] .btn-fullwidth::after { content: "\2190"; margin-left: 0; margin-right: 0.5em; } [dir="rtl"] .btn-fullwidth:hover::after { transform: translateX(-5px); } /* ============================================================ C · PROJECTS grid + filter rail ============================================================ */ /* side rail hairline + active accent bar flip to the right edge */ [dir="rtl"] .pf-side { border-left: 0; border-right: 1px solid rgba(228, 211, 192, 0.16); } [dir="rtl"] .pf-side button { text-align: right; margin-left: 0; margin-right: -1px; border-left: 0; border-right: 2px solid transparent; } [dir="rtl"] .pf-side button.active { border-left-color: transparent; border-right-color: #E4D3C0; background: linear-gradient(to left, rgba(228, 211, 192, 0.09), transparent 80%); } /* mobile chip-strip variant (<=860px): reset the right-side accents back so the horizontal scroll strip stays usable */ @media (max-width: 860px) { [dir="rtl"] .pf-side { border-right: 0; } [dir="rtl"] .pf-side button { margin-right: 0; border-right: 0; } [dir="rtl"] .pf-side button.active { border-right-color: transparent; border-bottom-color: #E4D3C0; } } /* card: body copy right-aligned; category badge to the top-right, and the inline 3D cue (inline-styled top/right) to the top-left */ [dir="rtl"] .pf-card__body { text-align: right; } [dir="rtl"] .pf-card__badge { left: auto; right: 14px; } [dir="rtl"] .dv3d-badge { right: auto !important; left: 14px !important; } /* ============================================================ D · CASE STUDY (project.html) ============================================================ */ /* hero title + facts rail (hairline moves to the rail's right edge) */ [dir="rtl"] .cs-hero__title { text-align: right !important; } [dir="rtl"] .cs-hero__facts { padding-left: 0; padding-right: 28px; border-left: 0; border-right: 1px solid rgba(228, 211, 192, 0.35); } @media (max-width: 860px) { [dir="rtl"] .cs-hero__facts { padding-right: 0; border-right: 0; border-top: 1px solid rgba(228, 211, 192, 0.35); } } /* tag separator dot sits after the item on the left in RTL */ [dir="rtl"] .cs-hero__tags span:not(:last-child)::after { right: auto; left: -19px; } /* timeline: rail + dots move to the right side (grid columns already flip so the number column lands on the right) */ [dir="rtl"] .cs-tl { padding-left: 0; padding-right: 30px; } [dir="rtl"] .cs-tl::before { left: auto; right: 4px; } [dir="rtl"] .cs-tl__item::before { left: auto; right: -25.5px; transform: translate(50%, -50%); } /* before/after: swap the two corner labels (divider + clip stay LTR - direction-agnostic) */ [dir="rtl"] .cs-ba__label--before { left: auto; right: 14px; } [dir="rtl"] .cs-ba__label--after { right: auto; left: 14px; } /* thumb's extra padding (image gutter) moves to the left */ [dir="rtl"] .cs-ba__thumb { padding: 6px 6px 6px 14px; } /* In-Brief bullets to the right */ [dir="rtl"] .cs-hl li { padding-left: 0; padding-right: 26px; } [dir="rtl"] .cs-hl li::before { left: auto; right: 2px; } /* gallery hover caption to the bottom-right */ [dir="rtl"] .cs-ed__cap { left: auto; right: 14px; } /* shared lightbox: close to the top-left, caption name spacing */ [dir="rtl"] .dv-lb-name { margin-right: 0; margin-left: 14px; } [dir="rtl"] .dv-lb-x { right: auto; left: 26px; } @media (max-width: 600px) { [dir="rtl"] .dv-lb-x { right: auto; left: 12px; } } /* ============================================================ E · HOME ============================================================ */ [dir="rtl"] .hm-hero__title { text-align: right !important; } /* .hm-hero__actions is flex - it already reverses with dir=rtl (no fix) */ [dir="rtl"] .hm-hero__dots { left: auto; right: clamp(20px, 5vw, 48px); } /* Divano Factory band: heading + the numbered points column */ [dir="rtl"] .dm-factory__title { text-align: right !important; } [dir="rtl"] .dm-factory__points li { padding-left: 0; padding-right: 34px; } [dir="rtl"] .dm-factory__points li span { left: auto; right: 0; } /* ---- Reviews ---- Every review is now shown in the language of the page it sits on, so on /ar/ the quote text is Arabic and reads RTL like the rest of the page. (Was: the whole block defaulted to LTR/left because these cards still carried the English & Russian originals - that would now left-align Arabic quotes. The companion `.dm-testi-en` rule went with the markup.) */ [dir="rtl"] .de_testi blockquote p { direction: rtl; text-align: right !important; } /* …and in the Arabic face: `.de_testi blockquote p` is not in the block-A font list, and divano-modern.css forces Latin-only Cormorant on it with !important, so Arabic quotes were falling back to a generic serif. */ [dir="rtl"] .de_testi blockquote p { font-family: "Almarai", 'Dosis', 'Cormorant Garamond', 'Open Sans', -apple-system, "Segoe UI", Tahoma, Arial, sans-serif !important; } /* The "مترجم من …" provenance note (home + about). home.css / about.css style it for Latin - Dosis with a little tracking - with !important, so the Arabic face, zero tracking and Arabic leading have to be re-asserted here at higher weight. Alignment is inherited from the rules above / from .ab-tst__grid, so it is deliberately not repeated (that keeps the dir="ltr" safety net below authoritative). */ [dir="rtl"] .testimonial__carousel .de_testi blockquote p.dm-testi-src, [dir="rtl"] .ab-tst__grid .ab-quote p.ab-quote__src { font-family: "Almarai", 'Dosis', 'Open Sans', -apple-system, "Segoe UI", Tahoma, Arial, sans-serif !important; font-size: 12.5px !important; line-height: 1.8 !important; letter-spacing: 0 !important; } /* Safety net: a quote deliberately left in its original language and marked dir="ltr" keeps Latin/Cyrillic reading order inside the RTL page. */ [dir="rtl"] .de_testi blockquote p[dir="ltr"], [dir="rtl"] .ab-quote p[dir="ltr"] { direction: ltr; text-align: left !important; } /* ============================================================ F · ABOUT ============================================================ */ /* decorative offset frame behind the story image (mirror horizontally) */ [dir="rtl"] .ab-story__img::before { left: -18px; right: 18px; } /* Testimonial cards: about.css hard-sets `text-align: left` on the grid to opt out of the section's centring - a physical value that does not follow dir, so the Arabic quotes were left-aligned. Mirror it. One rule covers the stars, the quote, the "translated from" note and the attribution; the section heading and the Google link keep their own centring. */ [dir="rtl"] .ab-tst__grid { text-align: right; } /* ============================================================ G · CONTACT ============================================================ */ [dir="rtl"] .ct-hero h1 { text-align: right !important; } [dir="rtl"] .ct-hero p { text-align: right; } /* info panel hairline flips to its right edge (top border on mobile) */ [dir="rtl"] .ct-info { border-left: 0; border-right: 1px solid rgba(228, 211, 192, 0.16); } @media (max-width: 900px) { [dir="rtl"] .ct-info { border-right: 0; border-top: 1px solid rgba(228, 211, 192, 0.16); } } /* floating-label form fields: label + icon + input gutter mirror */ [dir="rtl"] .ct-field input, [dir="rtl"] .ct-field textarea, [dir="rtl"] .ct-field select { padding: 14px 0 10px 34px; } [dir="rtl"] .ct-field label { left: auto; right: 0; } [dir="rtl"] .ct-field .ico { right: auto; left: 0; } /* "what happens next" connector line runs toward the next (left) step */ [dir="rtl"] .ct-step:not(:last-child)::after { left: auto; right: calc(50% + 44px); background: linear-gradient(270deg, rgba(228, 211, 192, 0.4), rgba(228, 211, 192, 0.08)); } /* ============================================================ H · SERVICE PAGES (sv-*) ============================================================ */ /* intro / band grids flip automatically; only the decorative outline frame + the card label are physical */ [dir="rtl"] .sv-intro__img::after { inset: 18px 18px -18px -18px; } [dir="rtl"] .sv-card .v { left: auto; right: 22px; } [dir="rtl"] .sv-card:hover .v { transform: translateX(-4px); } /* .sv-ey / .sv-lead / .sv-intro__txt / .sv-band__txt and the .sv-point number + heading set NO text-align, so they inherit `start` and already align right under dir="rtl" - nothing to add. The one exception is the phone override in mobile.css, which hard-left-aligns service-page prose (`.service-template-default #content p { text-align: left !important }` under 600px, written for the English column). Undo it for Arabic: identical specificity, and rtl.css is loaded last, so this wins - which also stops .sv-point's body copy drifting left while its number and heading stay right. */ @media (max-width: 600px) { [dir="rtl"] .service-template-default #content p { text-align: right !important; } } /* CTA fill wipe is a horizontal sweep - run it with the reading direction (right to left) instead of against it */ [dir="rtl"] .sv-btn::before { transform-origin: left; } [dir="rtl"] .sv-btn:hover::before { transform-origin: right; } /* ------------------------------------------------------------ Arabic sizing corrections Arabic glyphs have no capital height, so a size tuned for Latin small-caps reads noticeably smaller once translated. Nudge the places where the theme sets a caps-sized Latin string. ------------------------------------------------------------ */ [dir="rtl"] #mainmenu > li > a { font-size: 14px; } @media (min-width: 980px) and (max-width: 1199px) { [dir="rtl"] #mainmenu > li > a { font-size: 13px; } }