/* * LTR overrides for the Arabic-first Dawah Center stylesheet. * Loaded only when , so Arabic users are unaffected. * Targets the visible chrome of the i18n surface: header, nav, footer, * languages-storehouse pages (/languages, /books, /translations). */ html[dir="ltr"] body { direction: ltr; text-align: left; } /* ---------- header / logo / nav ---------- */ html[dir="ltr"] #logo, html[dir="ltr"] #navigation, html[dir="ltr"] .left-side { float: left; } html[dir="ltr"] .right-side { float: right; } html[dir="ltr"] #logo img { float: left; } html[dir="ltr"] #logo .site-tagline { text-align: left; margin-left: 8px; } html[dir="ltr"] #navigation > ul > li { float: left; } html[dir="ltr"] #navigation > ul > li > a { text-align: left; } html[dir="ltr"] .user-menu ul, html[dir="ltr"] .mega-menu-section, html[dir="ltr"] .mega-menu-section ul { float: left; text-align: left; } html[dir="ltr"] .mmenu-trigger { float: right; } /* ---------- titlebar / breadcrumbs ---------- */ html[dir="ltr"] #titlebar { text-align: left; } html[dir="ltr"] #titlebar h2 { text-align: left; } html[dir="ltr"] #breadcrumbs { left: auto; right: 15px; float: right; text-align: left; } html[dir="ltr"] #breadcrumbs ul { padding: 0; } html[dir="ltr"] #breadcrumbs ul li { float: left; } html[dir="ltr"] #breadcrumbs ul li + li:before { content: "/"; padding: 0 8px; } /* ---------- card / listing layout ---------- */ html[dir="ltr"] .listing-item-container, html[dir="ltr"] .listing-item, html[dir="ltr"] .listing-item-content, html[dir="ltr"] .listing-item-inner { direction: ltr; text-align: left; } html[dir="ltr"] .listing-item-container.list-layout .listing-item-image { float: left; border-radius: 4px 0 0 4px; } html[dir="ltr"] .listing-item-container.list-layout .listing-item-inner { right: auto; left: 30px; padding-left: 0; /* Mirrors the RTL reserve: the like icon ends 79px in on this side too. */ padding-right: 90px; } /* Grid cards: style.css parks the like button bottom-left, the empty side in RTL; in LTR that is where the title starts. The list-layout rule below is more specific and keeps its own 35px. */ html[dir="ltr"] span.like-icon { left: auto; right: 30px; } html[dir="ltr"] .listing-item-container.list-layout span.like-icon { left: auto; right: 35px; } html[dir="ltr"] .listing-item-container.list-layout .listing-item-details { left: auto; right: 35px; } html[dir="ltr"] .listing-item-content { padding-left: 16px; } /* The corner ribbon (style.css: left -64px, rotate -45deg) already crosses the top-left corner of its card in both directions. Pin it there so no older LTR rule (the header's inline right: 30px) can pull it off the corner. */ html[dir="ltr"] .listing-badge { left: -64px; right: auto; } html[dir="ltr"] .star-rating { text-align: left; } /* ---------- language storehouse specifics ---------- */ html[dir="ltr"] .lang-totals, html[dir="ltr"] .lang-stats, html[dir="ltr"] .lang-flags, html[dir="ltr"] .lang-tabs { direction: ltr; } html[dir="ltr"] .lang-totals li { text-align: center; } html[dir="ltr"] .lang-tab .badge { margin-right: 0; margin-left: 6px; } html[dir="ltr"] .continent-block h3 { border-right: 0; border-left: 4px solid #0a42cd; padding-right: 0; padding-left: 10px; text-align: left; } html[dir="ltr"] .highlight-section h3 { text-align: left; } html[dir="ltr"] .highlight-section .pill { margin-left: 6px; margin-right: 0; } html[dir="ltr"] .language-card .listing-item-content { padding-left: 14px; } html[dir="ltr"] .language-card .language-name { text-align: left; } html[dir="ltr"] .language-card .listing-item-inner > span { text-align: left; } /* ---------- pagination / forms ---------- */ html[dir="ltr"] .pagination { direction: ltr; } html[dir="ltr"] .pagination li { float: left; } html[dir="ltr"] .input-with-icon i { left: 14px; right: auto; } html[dir="ltr"] .input-with-icon input { padding-left: 40px; padding-right: 16px; text-align: left; } /* ---------- footer ---------- */ html[dir="ltr"] #footer { direction: ltr; text-align: left; } html[dir="ltr"] #footer h4 { text-align: left; } html[dir="ltr"] #footer .footer-links li { text-align: left; } html[dir="ltr"] #footer .copyrights { text-align: left; } html[dir="ltr"] #footer .col-md-5, html[dir="ltr"] #footer .col-md-3 { float: left; } html[dir="ltr"] #footer .social-icons li { float: left; } /* ---------- general row flow inside language pages ---------- */ html[dir="ltr"] .fs-listings { direction: ltr; } html[dir="ltr"] .fs-listings > [class^="col-"] { float: left; } /* ---------- English home-page polish ---------- */ @media (min-width: 1025px) { html[dir="ltr"] #header > .container { min-height: 88px; display: flex; align-items: center; gap: 28px; } html[dir="ltr"] #header > .container > .header-utility { order: 3; flex: 0 0 auto; float: none; position: static; margin-top: 0; margin-left: auto; } html[dir="ltr"] #header > .container > div:not(.header-utility) { order: 1; min-width: 0; flex: 1 1 auto; display: flex; align-items: center; } html[dir="ltr"] #logo { width: 350px; min-width: 350px; display: flex; align-items: center; gap: 12px; margin-right: 22px; } html[dir="ltr"] #logo a { flex: 0 0 178px; } html[dir="ltr"] #logo img { width: 178px; max-height: 58px; object-fit: contain; } html[dir="ltr"] #logo .site-tagline { max-width: 155px; margin: 0; font-size: 11px; line-height: 1.45; letter-spacing: .01em; } html[dir="ltr"] #navigation { float: none; width: auto; min-width: 0; flex: 1 1 auto; } html[dir="ltr"] #navigation.style-1 { margin: 0; } html[dir="ltr"] #navigation.style-1 > ul { display: flex; align-items: center; gap: 2px; float: none; } html[dir="ltr"] #navigation.style-1 > ul > li { margin: 0; } html[dir="ltr"] #navigation.style-1 > ul > li > a { padding: 8px 13px; font-size: 14px; white-space: nowrap; } html[dir="ltr"] .header-utility .header-widget .button.border { min-height: 42px; padding: 8px 22px; border-radius: 999px; font-size: 14px; } html[dir="ltr"] #navigation .mega-menu.three-columns { width: 650px; } html[dir="ltr"] #navigation .mega-menu.two-columns { width: 440px; } html[dir="ltr"] #navigation ul li .mega-menu { left: 0; right: auto; padding: 18px 0; border: 1px solid rgba(24, 52, 42, .08); border-radius: 12px; box-shadow: 0 18px 50px rgba(12, 24, 28, .18); } html[dir="ltr"] #navigation .mega-menu-section { width: auto; flex: 1 1 0; border-left: 0; border-right: 1px solid #e8ecea; } html[dir="ltr"] #navigation .mega-menu-section:last-child { border-right: 0; } html[dir="ltr"] #navigation .mega-menu-headline { padding: 5px 24px 10px !important; font-size: 13px; letter-spacing: .02em; } html[dir="ltr"] #navigation .mega-menu ul li { padding: 0 24px; } html[dir="ltr"] #navigation ul .mega-menu ul a { display: flex; align-items: center; gap: 9px; min-height: 35px; font-size: 14px; white-space: nowrap; } html[dir="ltr"] #navigation ul .mega-menu ul a i { position: static; width: 18px; flex: 0 0 18px; padding: 0; text-align: center; } } html[dir="ltr"] .main-search-input input, html[dir="ltr"] .main-search-input input:focus { text-align: left; } html[dir="ltr"] .main-search-input input::placeholder { color: #7a8580; opacity: 1; } html[dir="ltr"] .main-search-input .chosen-container-single .chosen-single { text-align: left; } html[dir="ltr"] .categories-boxes-container { direction: ltr; } @media (max-width: 1200px) and (min-width: 1025px) { html[dir="ltr"] #logo { width: 205px; min-width: 205px; } html[dir="ltr"] #logo .site-tagline { display: none; } html[dir="ltr"] #navigation.style-1 > ul > li > a { padding-inline: 10px; } } @media (max-width: 767px) { html[dir="ltr"] #breadcrumbs { position: static; right: auto; float: none; margin-top: 14px; transform: none; } html[dir="ltr"] #breadcrumbs ul li { margin-right: 0; } } /* ---------- home hero headline ---------- */ /* style.css sets the hero headline in Amiri, an Arabic display face whose Latin glyphs are a serif. Use the site's body stack for Latin text. */ html[dir="ltr"] .transparent-header .main-search-container h4 { font-family: "IBM Plex Sans Arabic", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }