/* ========================================================================== Arabic pages: direction, typeface and the handful of places the theme hard-codes a side. ========================================================================== */ /* Tajawal is the Arabic face the Arabesco Holding site uses, self hosted. The Latin subset is included so a Latin word inside an Arabic sentence does not jump to a different family mid-line. */ @font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/tajawal-400-arabic.woff2?v=1) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;} @font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/tajawal-400-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/tajawal-500-arabic.woff2?v=1) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;} @font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/tajawal-500-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/tajawal-700-arabic.woff2?v=1) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;} @font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/tajawal-700-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/tajawal-800-arabic.woff2?v=1) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;} @font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/tajawal-800-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} html[dir="rtl"]{ --default-font: "AED Sign", 'Tajawal', 'Stack Sans Headline', sans-serif; } html[dir="rtl"] body, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] .btn-default, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea, html[dir="rtl"] button{ font-family: "AED Sign", 'Tajawal', 'Stack Sans Headline', sans-serif; } /* Arabic letters sit lower and run wider than the Latin face the theme was drawn for; a little more leading keeps lines from touching, and the tight tracking the headings use does not suit a joined script. */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3{ letter-spacing: 0; line-height: 1.3em; } /* Headings carry their weight differently in Arabic. Tajawal at 400 reads thin and under-set at heading sizes, and the theme has no Arabic bold to fall back on, so the English pages' weight does not transfer. 500 is the medium cut, and it is what the Arabic banking and government sites set their headings in, ADCB included. Anything heavier closes the counters on a joined script and the line turns into a dark band. */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6{ font-weight: 500; } html[dir="rtl"] body{ line-height: 1.8em; } /* Arabic sets marks above and below the line, so the leading the Latin theme uses runs them into the row above. The main body copy already sits near 1.6; this catches the smaller paragraphs the theme left at about 1.4, where the crowding actually shows. */ html[dir="rtl"] p{ line-height: 1.7; } /* The theme's heading animation splits words into characters. Arabic letters join, so splitting them breaks every word. The animation script is told to leave Arabic pages alone (see mcis-reveal.js) and the class is neutralised. */ html[dir="rtl"] .text-anime-style-3{ opacity: 1; visibility: visible; } /* Text that the theme pins to the left */ html[dir="rtl"] .text-start{ text-align: right !important; } html[dir="rtl"] .text-end{ text-align: left !important; } html[dir="rtl"] .section-title, html[dir="rtl"] .hero-content, html[dir="rtl"] .about-us-content, html[dir="rtl"] .footer-links, html[dir="rtl"] .footer-contact-item, html[dir="rtl"] .mcis-footer-banner-brand, html[dir="rtl"] .our-faqs-content, html[dir="rtl"] .accordion-button, html[dir="rtl"] .team-item-content, html[dir="rtl"] .programs-item-content, html[dir="rtl"] .core-feature-item-content, html[dir="rtl"] .mcis-journey-item, html[dir="rtl"] .testimonial-item, html[dir="rtl"] .how-it-work-step-item, html[dir="rtl"] .why-choose-item-content, html[dir="rtl"] .mcis-sister-card, html[dir="rtl"] .mcis-ql-card{ text-align: right; } /* The eyebrow dot and the bullet dots sit before the text, which in this direction means on the right */ html[dir="rtl"] .section-eyebrow{ padding-left: 0; padding-right: 20px; } html[dir="rtl"] .section-eyebrow::before{ left: auto; right: 0; } html[dir="rtl"] .mcis-chairman-list li, html[dir="rtl"] .mcis-chairman-facts li, html[dir="rtl"] .core-feature-item-body ul li, html[dir="rtl"] .our-faqs-list ul li, html[dir="rtl"] .program-entry ul li{ padding-left: 0; padding-right: 28px; } html[dir="rtl"] .mcis-chairman-list li::before, html[dir="rtl"] .mcis-chairman-facts li::before, html[dir="rtl"] .core-feature-item-body ul li::before, html[dir="rtl"] .our-faqs-list ul li::before, html[dir="rtl"] .program-entry ul li::before{ left: auto; right: 0; } /* Buttons put their arrow after the label */ html[dir="rtl"] .btn-default .arrow-img, html[dir="rtl"] .btn-default i{ margin-left: 0; margin-right: 10px; transform: scaleX(-1); } /* Menu: dropdown arrow and submenu alignment */ html[dir="rtl"] .main-menu ul li.submenu > a:after{ margin-left: 0; margin-right: 8px; } html[dir="rtl"] .main-menu ul li.submenu ul{ left: auto; right: 0; text-align: right; } /* Breadcrumb separators read the other way */ html[dir="rtl"] .page-header-box ol{ flex-direction: row; } /* The accordion plus sign sits at the end of the row, which is the left */ html[dir="rtl"] .accordion-button::after{ margin-left: 0; margin-right: auto; } /* Footer contact rows: icon then text */ html[dir="rtl"] .footer-contact-item p:first-child{ margin-right: 0; margin-left: 12px; } /* The mobile drawer slides in from the reading side */ /* The open class goes on (js/mcis-menu.js: documentElement.classList.add), so a DESCENDANT selector can never reach it from html[dir="rtl"]: html is not inside itself. The second rule below had a space and so never matched, while the first one did, which left the panel parked at translateX(100%) even while open, aria-hidden="false" and not inert: on every Arabic page the burger did nothing a visitor could see, because the menu opened just off the right edge of the screen. The two classes belong on one element. */ html[dir="rtl"] .mcis-panel{ left: auto; right: 0; transform: translateX(100%); } html[dir="rtl"].mcis-panel-open .mcis-panel{ transform: translateX(0); } html[dir="rtl"] .mcis-foot-toggle{ text-align: right; } /* Chat and WhatsApp launchers keep the bottom corner they have on every page */ html[dir="rtl"] .mcis-chat-launcher, html[dir="rtl"] .mcis-whatsapp-launcher{ direction: ltr; } /* Numbers, phone numbers and email addresses stay left to right inside Arabic text */ html[dir="rtl"] a[href^="tel:"], html[dir="rtl"] a[href^="mailto:"], html[dir="rtl"] .mcis-hours-row span:last-child{ direction: ltr; unicode-bidi: isolate; display: inline-block; } /* The language switch */ .mcis-lang a{ font-weight: 500; white-space: nowrap; } html[dir="ltr"] .mcis-lang a{ font-family: 'Tajawal', sans-serif; } /* The header logo. The brand is a flex item sized by its image, and the image is capped at 100% of the brand: in the other direction Chrome resolved that circle to zero and the logo vanished. A definite basis breaks the circle. */ html[dir="rtl"] .navbar-brand{ flex: 0 0 auto; } html[dir="rtl"] .navbar-brand img{ max-width: none; } /* The WhatsApp number is a wa.me link, not a tel: link, so the number rule above missed it and the digits ran backwards. */ /* These links hold a phone number or an e-mail, so they are kept reading left to right inside an otherwise right to left page. inline-block did that, but it also replaced the flex box the theme uses to centre the icon and text, which is why the top bar text sat hard against the top edge. inline-flex isolates the direction the same way and keeps the centring. */ html[dir="rtl"] a[href*="wa.me"], html[dir="rtl"] .mcis-topbar a, html[dir="rtl"] .footer-contact-item a{ direction: ltr; unicode-bidi: isolate; display: inline-flex; align-items: center; } /* About: the small classroom picture is pulled 170px over the big one with a negative left margin. In this direction the two swap places, so the pull has to come from the other side or it lands on the text. The decorative backdrop swaps corners with it. */ html[dir="rtl"] .about-us-image-box-prime{ margin-right: 0; margin-left: 15px; background-position: top 30px left; } html[dir="rtl"] .about-us-image-prime.box-2 figure{ margin-left: 0; margin-right: -170px; } /* Why choose: same construction as About. The second photo is pulled 135px over the first from the left, and the accreditation badge hangs off the photo's left edge. Both come from the right here. */ html[dir="rtl"] .why-choose-images{ margin-left: 0; margin-right: 15px; } html[dir="rtl"] .why-choose-img-2 figure{ margin-left: 0; margin-right: -135px; } html[dir="rtl"] .why-choose-img-2 .years-experience-circle{ left: auto; right: -135px; transform: translate(50%, -50%); } /* Form fields: text sits on the right like the rest of the page; the phone field keeps its digits left to right but still starts from the right edge. */ html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select{ text-align: right; } html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="email"]{ direction: ltr; text-align: right; } /* A percentage reads 100% in Arabic too; isolated so the sign stays after the digits. */ html[dir="rtl"] .hero-info-item ul li span, html[dir="rtl"] .counter{ direction: ltr; unicode-bidi: isolate; display: inline-block; } /* The digital journey title runs longer in Arabic than in English and fell onto three lines inside the 800px title column. Two lines is the shape the section was designed for, so the column widens for this one heading. */ @media only screen and (min-width: 1200px){ html[dir="rtl"] .mcis-journey .section-title{ max-width: 1100px; } } @media only screen and (min-width: 1200px){ html[dir="rtl"] .mcis-journey .section-title h2{ font-size: 44px; } } /* The top bar holds no Arabic: an e-mail address, two phone numbers and four social icons, all of it left to right content already. Mirroring it moved the contact details to the left and the icons to the right, which is the one place the Arabic header stopped matching the English one. The row keeps the English arrangement; everything inside each item was already identical, icon first and the number reading left to right. */ html[dir="rtl"] .mcis-topbar .container { direction: ltr; } /* The arrow on a button is a ::before pinned to right: 20px, and the button reserves 44px of padding on that side for it. CSS offsets do not mirror on their own, so in Arabic the arrow stayed on the right, where the text now begins, and sat on top of the label. It moves to the left, is flipped so it still points away from the text, and the padding reserves the left instead. */ html[dir="rtl"] .btn-default{ padding: 17px 20px 17px 44px; } html[dir="rtl"] .btn-default::before{ right: auto; left: 20px; transform: translateY(-7px) scaleX(-1); } /* The top bar sets line-height: 14px on 14px text, which is exactly right for the Latin face and wrong for Tajawal, whose glyphs are about 19px tall at that size. The text overflowed its own line box upward, so it sat hard against the top edge of the red bar with all the space underneath it, while the English bar looked centred. Giving the line box room to hold the glyphs lets the existing centring do its job. */ html[dir="rtl"] .mcis-topbar li, html[dir="rtl"] .mcis-topbar a, html[dir="rtl"] .mcis-topbar span{ line-height: 1.5; } /* Arabic sits optically smaller than Latin at the same pixel size, so the badge is nudged up. */ .mcis-home-firsts-track li.mcis-is-first b{ font-size: 14px; } /* The three firsts: the columns and their dividers mirror, and the numeral stays in Latin figures reading left to right, the way the school's own cards set it. */ html[dir="rtl"] .mcis-first{ padding-right: 0; padding-left: 36px; } html[dir="rtl"] .mcis-first + .mcis-first{ padding-left: 0; padding-right: 36px; border-left: 0; border-right: 1px solid rgba(5, 5, 5, 0.12); } html[dir="rtl"] .mcis-first-num{ direction: ltr; text-align: right; } @media only screen and (max-width: 991px){ html[dir="rtl"] .mcis-first, html[dir="rtl"] .mcis-first + .mcis-first{ padding-right: 0; padding-left: 0; border-right: 0; } html[dir="rtl"] .mcis-first + .mcis-first{ border-top: 1px solid rgba(5, 5, 5, 0.12); } } /* "st" is an English ordinal ending; on the Arabic page the heading already opens with "أول", so the mark keeps the numeral, which reads the same in both languages, and drops the ending rather than printing English inside an Arabic sentence. */ html[dir="rtl"] .mcis-first-num i{ display: none; } /* The chat's three buttons were being caught by the bidi rules above. Those rules keep a phone number or an email address reading left to right inside Arabic prose, which is right, and they match on a[href^="tel:"], a[href^="mailto:"] and a[href*="wa.me"]. The chat's Call, Email and WhatsApp buttons have exactly those hrefs, so they inherited direction: ltr and, from one of them, display: inline-block. Two things went wrong: the icon jumped to the left of its label instead of the leading side, and the button stopped being a flex row. No number or address is printed in these buttons, only an icon and a word, so there is nothing here to isolate. They go back to being RTL flex rows. */ html[dir="rtl"] .mcis-chat-actions a.mcis-action{ direction: rtl; unicode-bidi: normal; display: flex; } /* The paper plane points the way the text runs, so on an Arabic page it points left. The same treatment the theme's own button arrows already get. */ html[dir="rtl"] .mcis-chat-send i{ transform: scaleX(-1); }