/* =================================================================== RTL OVERRIDES — Residem "Apartment Homepage 1" template Load this AFTER bootstrap.min.css, style.css, coloring.css. Purpose: fix the handful of places in the theme's own CSS that use physical left/right/float instead of logical start/end, which do NOT auto-flip just by adding dir="rtl" to . =================================================================== */ /* Base typography: swap in the Arabic web font everywhere the theme uses its default typeface. Adjust the font-family list if the theme's headings use a different selector for display type. */ body, h1, h2, h3, h4, h5, h6, p, a, span, li, .btn-main { font-family: 'Tajawal', -apple-system, Arial, sans-serif; } /* Brand accent color: the theme drives its button background, amenities checkmarks, and .id-color icons (footer contact icons, etc.) all from this single CSS variable, defined originally in colors/scheme-01.css. Overriding it here — loaded last — updates every one of the 54 places in style.css that reference it, in one change, rather than hunting each usage individually. */ :root { --primary-color: #a28d5e !important; --bg-dark-1: #1D3C34 !important; --bg-dark-1-rgb: 29, 60, 52 !important; --bg-dark-2: #1D3C34 !important; --bg-dark-3: #1D3C34 !important; } /* Mega-menu / dropdown: theme likely opens submenus assuming LTR (e.g. subnav positioned via left:0). Force them to anchor to the right edge of their parent instead. */ #mainmenu > li > ul { right: 0; left: auto; text-align: right; } /* Directional icons (arrows, carets, slide-arrows) that imply "forward" in LTR should point the opposite way in RTL. Hero slider: Swiper has its own built-in RTL handling (adds a .swiper-rtl class and repositions prev/next natively) — that only activates because dir="rtl" is now set directly on the .swiper container in the HTML. Swiper's own CSS handles the correct left/right swap; this rule only needs to mirror this theme's custom background-image arrow icons to match, since Swiper's native RTL handling doesn't know about icons the theme added itself outside Swiper's default icon font. */ /* Directional icons (arrows, carets, slide-arrows): Swiper's own CSS (confirmed from the actual file) already fully handles RTL — it repositions prev/next AND rotates the SVG/icon 180° AND swaps which one reads "prev" vs "next" automatically, all keyed off a single .swiper-rtl class on the .swiper container. No custom transform is needed here — adding one on top double-flips the icon back to looking wrong. The .swiper-rtl class is hardcoded directly in the HTML on the hero slider as a safety net in case Swiper's own JS auto-detection doesn't add it. */ /* "Half-fluid" split image/text sections: the theme defines .right-half { right:0; } and .left-half { left:0; } as literal physical offsets. These are intentionally used (and swapped section-by-section in the HTML) to mirror the alternating image/text rhythm for RTL — no change needed here as long as the HTML uses the correct class per section. */ /* Custom RTL-safe offset for the second split section, replacing Bootstrap's .offset-lg-6 (which always pushes right via margin-left, regardless of dir) with one that pushes left. */ @media (min-width: 992px) { .offset-lg-6-rtl { margin-right: 50% !important; margin-left: 0 !important; } } /* Site-plan hotspot dots (.de-dot): positions are set inline per-dot in the HTML and have already been mirrored there (100 - original left%). If the underlying site-plan IMAGE itself contains baked-in text/labels or a north-arrow/legend on one side, that graphic will need to be re-exported or manually mirrored by design — CSS cannot flip text baked into a raster image. */ /* Hero heading: theme's scale doesn't include a 72px size or a 700 weight (it stops at fs-64/fs-84 and fw-600), so defining both here to fit "أبراج العبسلي" on one line, bold, per request. */ .fs-72 { font-size: 72px; } .fw-700 { font-weight: 700 !important; } /* Hero: space between the location line and the "map" button. Bootstrap's me-4/me-5 utility didn't visibly move anything, which suggests this template ships the standard (non-RTL-compiled) Bootstrap build, where those classes add physical margin-right — the outward-facing side here, not the side facing the button. Forcing it directly on the correct physical side instead. */ #section-hero h4.me-4, #section-hero h4.me-5 { margin-right: 0 !important; margin-left: 2.5rem !important; } /* Header: keep it pinned and visible at all scroll positions. Root cause (confirmed from designesia.js + style.css): the theme adds a "scroll-down" class to
while scrolling down, and style.css defines `.scroll-down { margin-top: -90px; }` — it shoves the header upward off-screen via negative margin, not via opacity/display/transform, which is why earlier attempts guessing at those properties had no effect. Neutralizing that specific rule is the actual fix. Position:fixed keeps it pinned at all times instead of scrolling away with the page content. */ header.transparent { position: fixed !important; top: 0 !important; } header.scroll-down { margin-top: 0 !important; } /* Forms (if/when a contact form is added to this page): force inputs and labels to right-align text by default. */ input, textarea, select { text-align: right; } /* Date/time fields on the contact page: left-align the text inside, since dates and times read more naturally LTR even within an Arabic RTL form. */ #date input, #time { text-align: left; } /* Map hotspot tooltips (.de-dot): the theme hardcodes these to grow from the top-left with a left-offset margin, so the tooltip floats away from the dot in the wrong direction under RTL. Flip the anchor and offset so it grows from the top-right instead, anchored right next to the dot. */ .de-dot .d-content { transform-origin: top right; margin-left: 0; margin-right: 10px; } /* Numbers, phone numbers, emails, and any English brand terms should stay LTR even inside RTL flow. In the HTML these are already wrapped in ... — this rule is a fallback for any that get missed during future content additions. */ .ltr, [dir="ltr"] { unicode-bidi: isolate; } /* Local video popup: keep it a neat, contained size instead of filling most of the viewport (Magnific Popup's inline type otherwise just matches the video element's own width). */ #video-popup-1 { max-width: 700px; margin: 40px auto; position: relative; } #video-popup-1 video { width: 100%; height: auto; display: block; } .video-popup-close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border-radius: 50%; border: none; background: #fff; color: #111; font-size: 24px; line-height: 1; cursor: pointer; z-index: 10; } /* ------------------------------------------------------------- FIX 1 — Main menu order The theme lays #mainmenu items out with float:left per
  • , which is a physical property and ignores dir="rtl" entirely. Forcing the list to flex (with no direction override) makes the browser place the first DOM item — "الرئيسية" — at the true RTL start, which is the right edge, with each following item flowing further left. This preserves the theme's HTML order (Home, Rooms, Facilities, About, News) while fixing the visual order to match RTL reading direction. ------------------------------------------------------------- */ @media (min-width: 992px) { #mainmenu { display: flex !important; float: none !important; } #mainmenu > li { float: none !important; margin: 0 20px !important; } #mainmenu > li:first-child, #mainmenu > li:last-child { margin: 0 20px !important; } } /* ------------------------------------------------------------- FIX 2 — Amenities checklist bullet position .ul-check draws its checkmark with a :before pseudo-element pinned to left:0, and reserves space for it with padding-left. Both are physical, so under RTL the checkmark stays stuck on the left of already-right-aligned Arabic text. Flip both. Note: the 1.8em padding value is an estimate — nudge it up or down if the gap between checkmark and text doesn't look even once you can see it live against the real theme CSS. ------------------------------------------------------------- */ .ul-check li { position: relative; text-align: right; padding-left: 0 !important; padding-right: 2.6em !important; } .ul-check li:before { left: auto !important; right: 0 !important; } /* ------------------------------------------------------------- FIX 3 — Footer: more breathing room between icon and text Scoped to the footer's icon rows only, so it doesn't affect .ms-3 usage anywhere else on the page. ------------------------------------------------------------- */ footer .d-flex.justify-content-center > div.ms-3 { margin-inline-start: 2rem !important; }