/* ========================================================================== rtl.css - right-to-left layout for the Persian section (/fa/) -------------------------------------------------------------------------- The original template is an English (LTR) layout. The previous developer patched a few things towards RTL by hand - the section headings, the content lists, the menu bullet image - but left the page frame itself left-to-right, which is why the orange menu sat on the left and several blocks of text stayed aligned to the left. This file finishes the job. It is loaded only by the pages in /fa/, AFTER templatemo_style.css, and every rule is scoped to html[dir="rtl"] so it can never affect the English pages even if the file is copied elsewhere. Nothing in templatemo_style.css is deleted - these are overrides, so you can always disable this one to get the old behaviour back. ========================================================================== */ /* -------------------------------------------------------------------------- 1. THE PAGE FRAME IS MIRRORED The orange sidebar was pinned 10% in from the left edge; it now sits 10% in from the right. The content column and slider swap sides to match. -------------------------------------------------------------------------- */ html[dir="rtl"] #main-sidebar { float: right; left: auto; right: 0; margin-left: 0; margin-right: 10%; background-position: right top; } html[dir="rtl"] #main-menu-sidebar { float: left; } html[dir="rtl"] #main-content, html[dir="rtl"] .full-width-slider, html[dir="rtl"] .top-content, html[dir="rtl"] .footer-content { float: left; } html[dir="rtl"] .main-slider { float: right; } /* The company-name strip is a 73% wide block. In LTR it floated right and aligned its contents left, so the logos ended up next to the sidebar. Mirrored: float left, align right - the logos hug the sidebar again. */ html[dir="rtl"] #main h1 { float: left; text-align: right; } /* The large watermark "N" in the page background follows the sidebar. */ html[dir="rtl"] body { background-position: right bottom; } /* -------------------------------------------------------------------------- 2. LANGUAGE SWITCHER MOVES TO THE LEFT In the English pages it stays top-right. On the Persian pages the natural place for a secondary control is the opposite corner, so it goes top-left. (Keeping the two labels on one line is handled in templatemo_style.css, so both languages get it - see the block appended at the end of that file.) -------------------------------------------------------------------------- */ html[dir="rtl"] .trasalater-button { right: auto; left: 150px; } /* -------------------------------------------------------------------------- 3. TEXT THAT WAS HARD-CODED TO THE LEFT dir="rtl" on already flips everything that simply inherited the default alignment. These are the rules that said "left" explicitly. -------------------------------------------------------------------------- */ html[dir="rtl"] h4, html[dir="rtl"] .our-story h3 { text-align: right; } html[dir="rtl"] .footer-head { text-align: right; background-position: right center; padding-left: 0; padding-right: 22px; margin-right: 0; margin-left: 25px; } /* Long Persian paragraphs stay justified, but the last line and any short paragraph now settle against the right edge instead of the left. */ html[dir="rtl"] .our-story p, html[dir="rtl"] .section-content p, html[dir="rtl"] .section-content span { text-align: justify; text-align-last: right; } /* -------------------------------------------------------------------------- 4. SIDEBAR MENU The chevron already sits on the right (fa/images/menu-bulet.png is the mirrored, left-pointing arrow). What was missing: the label itself was still aligned to the left of each row, because the 35px of padding was reserved on the left. Swap the padding and align the text right, so each item reads from the right edge inwards, next to its chevron. -------------------------------------------------------------------------- */ html[dir="rtl"] .main-menu > ul li a { text-align: right; padding-right: 35px; padding-left: 14px; background-position: right center; } /* Hover state: the arrow is nudged 8px past the edge so it reads as sliding in. In LTR that was "-8px"; on the right edge it becomes 100% + 8px. fa/images/menu-bulet-ul.png is now mirrored to match. */ html[dir="rtl"] .main-menu ul li a:hover, html[dir="rtl"] .main-menu ul li.hassub.selected > a { background-image: url(../images/menu-bulet-ul.png); background-repeat: no-repeat; background-position: calc(100% + 8px) center; } /* Sub-menus are commented out in the HTML today, but mirror them anyway so they open towards the left (into the page) if they are ever switched on. */ html[dir="rtl"] .main-menu ul li > div, html[dir="rtl"] .main-menu ul li > ul { left: auto; right: 100%; } html[dir="rtl"] .main-menu > ul li.hassub > a::after { right: auto; left: 5px; border-left-color: transparent; border-right-color: #000; } html[dir="rtl"] .main-menu > ul li.hassub.selected > a::after { border-left-color: transparent; border-right-color: red; } html[dir="rtl"] .main-menu ul li > div ul li a { text-align: right; padding-right: 25px; padding-left: 10px; background-position: calc(100% + 8px) center; } html[dir="rtl"] .main-menu > ul li.line { background-position: calc(100% - 30px) bottom; } /* -------------------------------------------------------------------------- 5. BOOTSTRAP 3 GRID Bootstrap 3 has no RTL build; its columns are floated left at every breakpoint. Floating them right is what makes rows read from the right - including the six agency logos on the homepage, which should start at the right-hand side in Persian. -------------------------------------------------------------------------- */ html[dir="rtl"] .col-xs-1, html[dir="rtl"] .col-sm-1, html[dir="rtl"] .col-md-1, html[dir="rtl"] .col-lg-1, html[dir="rtl"] .col-xs-2, html[dir="rtl"] .col-sm-2, html[dir="rtl"] .col-md-2, html[dir="rtl"] .col-lg-2, html[dir="rtl"] .col-xs-3, html[dir="rtl"] .col-sm-3, html[dir="rtl"] .col-md-3, html[dir="rtl"] .col-lg-3, html[dir="rtl"] .col-xs-4, html[dir="rtl"] .col-sm-4, html[dir="rtl"] .col-md-4, html[dir="rtl"] .col-lg-4, html[dir="rtl"] .col-xs-5, html[dir="rtl"] .col-sm-5, html[dir="rtl"] .col-md-5, html[dir="rtl"] .col-lg-5, html[dir="rtl"] .col-xs-6, html[dir="rtl"] .col-sm-6, html[dir="rtl"] .col-md-6, html[dir="rtl"] .col-lg-6, html[dir="rtl"] .col-xs-7, html[dir="rtl"] .col-sm-7, html[dir="rtl"] .col-md-7, html[dir="rtl"] .col-lg-7, html[dir="rtl"] .col-xs-8, html[dir="rtl"] .col-sm-8, html[dir="rtl"] .col-md-8, html[dir="rtl"] .col-lg-8, html[dir="rtl"] .col-xs-9, html[dir="rtl"] .col-sm-9, html[dir="rtl"] .col-md-9, html[dir="rtl"] .col-lg-9, html[dir="rtl"] .col-xs-10, html[dir="rtl"] .col-sm-10, html[dir="rtl"] .col-md-10, html[dir="rtl"] .col-lg-10, html[dir="rtl"] .col-xs-11, html[dir="rtl"] .col-sm-11, html[dir="rtl"] .col-md-11, html[dir="rtl"] .col-lg-11 { float: right; } /* -------------------------------------------------------------------------- 6. MIXED PERSIAN / LATIN CONTENT The contact details are written in English inside a Persian page. In an RTL paragraph a Latin line's trailing punctuation jumps to the far side, so "Head Office : Unit #9, 8 th Floor," rendered as ",Head Office ...". unicode-bidi: plaintext makes each line take its direction from its own first strong character, which is exactly what mixed content needs. -------------------------------------------------------------------------- */ html[dir="rtl"] label, html[dir="rtl"] label b, html[dir="rtl"] label font, html[dir="rtl"] .quote-text, html[dir="rtl"] ul.contact li, html[dir="rtl"] ul.contact li span, html[dir="rtl"] .contact-details, html[dir="rtl"] table td { unicode-bidi: plaintext; text-align: start; } /* -------------------------------------------------------------------------- 7. SMALL ITEMS -------------------------------------------------------------------------- */ /* Slider pagination dots. The list items are floated (in templatemo_misc.css .flex-control-nav li { float: right }), which beats the parent's text-align, so they pile up on the right - directly under the sidebar in RTL. Float them left instead: bottom-left of the slider, clear of the menu. */ html[dir="rtl"] .flex-control-nav { right: auto; left: 0; } html[dir="rtl"] .flex-control-nav li { float: left; } /* Bootstrap's carousel controls are positioned by side name, so dir does not move them: .left holds "prev" and .right holds "next". In Persian the control that goes back belongs on the right, so swap the two sides - and flip the arrow bitmaps so each one still points outwards from its edge. (This mirrors prev.png / next.png in CSS rather than shipping two more images.) */ html[dir="rtl"] .carousel-control.left { left: auto; right: 0; } html[dir="rtl"] .carousel-control.right { right: auto; left: 0; } html[dir="rtl"] .carousel-control img { transform: scaleX(-1); } html[dir="rtl"] .image_margin { margin-right: 0; margin-left: 15px; } html[dir="rtl"] .load-more { margin-left: 0; margin-right: 14px; } /* Forms: labels and inputs read right-to-left. */ html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; direction: rtl; } /* ...except the fields that hold Latin-only data, where RTL would put the cursor and any punctuation in the wrong place. */ html[dir="rtl"] input[type="email"], html[dir="rtl"] input[name="phoneno"], html[dir="rtl"] input[name="email"] { direction: ltr; text-align: left; } /* Narrow screens: the sidebar is hidden (hidden-xs hidden-sm) and the content goes full width, so drop the mirrored float and the 10% inset. */ @media (max-width: 991px) { html[dir="rtl"] #main-content, html[dir="rtl"] .full-width-slider { float: none; width: 100%; } html[dir="rtl"] #main h1 { float: none; width: 100%; } /* templatemo_style.css already puts the box back into the flow on phones. Two things still need saying: cancel the 150px offset from the desktop rule above (harmless while absolute, but it shifts a relative box off the screen), and put the labels at the left end of the strip. */ html[dir="rtl"] .trasalater-button { left: auto; text-align: left; } } /* -------------------------------------------------------------------------- 8. HEADER COMPANY NAMES The names are text now (see the block at the end of templatemo_style.css). Markup order is name-then-emblem in both languages, so dir="rtl" already puts Shams Jahan Pars and its globe to the left of the main name. Only the divider and the emblem's gap need to change sides. -------------------------------------------------------------------------- */ html[dir="rtl"] #main h1 .brand-sjp { margin-left: 0; margin-right: 22px; padding-left: 0; padding-right: 22px; border-left: 0; border-right: 1px solid #dcdcdc; } html[dir="rtl"] #main h1 .brand-mark { margin-left: 0; margin-right: 12px; } /* The header divider is dropped on phones by templatemo_style.css; the mirrored side has to go with it. This block must come AFTER the desktop .brand-sjp rule above - same specificity, so source order decides. */ @media (max-width: 991px) { html[dir="rtl"] #main h1 .brand-sjp { margin-right: 0; padding-right: 0; border-right: 0; } }