/* Арабская версия: письмо справа налево. * * Файл подключается только когда язык страницы пишется справа налево * (includes/head.php смотрит на pl_seo_dir), поэтому здесь можно * переопределять что угодно, не оглядываясь на остальные пять языков. * * Само направление задаёт атрибут dir="rtl" на : флексы, порядок * колонок и выравнивание текста браузер разворачивает сам. Ниже — только то, * что он развернуть не может: физические отступы (left/right), декоративные * элементы на ::before/::after и блоки, которые в зеркале ломаются и потому * намеренно оставлены слева направо. */ /* --- Шрифт --------------------------------------------------------------- * roboto.ttf и roboto-c.ttf арабских глифов не содержат, а веб-шрифты со * стороны подключить нельзя: Content-Security-Policy разрешает font-src * только 'self' (includes/security.php). Поэтому арабский диапазон * добавляется к тем же семействам отдельным начертанием из системных * шрифтов — правила вёрстки, где стоит font-family: roboto, править не * приходится. Если ни одного из перечисленных шрифтов в системе нет, * начертание просто не загрузится и браузер уйдёт на sans-serif. */ @font-face { font-family: "roboto"; src: local("Noto Naskh Arabic"), local("Noto Sans Arabic"), local("Segoe UI"), local("Geeza Pro"), local("Tahoma"), local("Arabic Typesetting"), local("Amiri"); font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+060C, U+061B, U+061F; } @font-face { font-family: "roboto-c"; src: local("Noto Naskh Arabic"), local("Noto Sans Arabic"), local("Segoe UI"), local("Geeza Pro"), local("Tahoma"), local("Arabic Typesetting"), local("Amiri"); font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+060C, U+061B, U+061F; } /* Арабская вязь выше латиницы и с подстрочными элементами: там, где вёрстка ужимала строку под кириллицу и латиницу, буквы налезали бы друг на друга. */ [dir="rtl"] body { line-height: 1.5; } [dir="rtl"] .timeline__item_text, [dir="rtl"] .main__text-big, [dir="rtl"] .catalog__title, [dir="rtl"] .products__card_title, [dir="rtl"] .blog__text_title, [dir="rtl"] .post__text_title { line-height: 1.4; } /* --- Шапка ---------------------------------------------------------------- */ [dir="rtl"] .menu__top_link { margin-left: 0; margin-right: 9px; } [dir="rtl"] .contact-us__text { margin-left: 0; margin-right: 1.1vw; } [dir="rtl"] .contact-us__text::before { left: auto; right: -0.8vw; } /* Переключатель языков висел в правом верхнем углу — в зеркале уезжает в левый вместе с иконкой глобуса и выпадающим списком. */ [dir="rtl"] .lang-auth { right: auto; left: 2vw; } [dir="rtl"] .lang-auth::before { left: auto; right: -1.6vw; } [dir="rtl"] .lang__ul { right: auto; left: 1.5vw; } [dir="rtl"] .arrow { right: auto; left: -0.4vw; } /* Коды языков в переключателе — латиница внутри арабской строки: без собственного направления «ar» и «en» браузер выстраивает по правилам абзаца, и порядок букв в списке становится непредсказуемым. */ [dir="rtl"] .lang-auth, [dir="rtl"] .lang__a { direction: ltr; } /* --- Главная -------------------------------------------------------------- */ [dir="rtl"] .main__text-index { margin-right: 0; margin-left: 9vw; } [dir="rtl"] .earth__index { left: auto; right: 2.6vw; } /* --- Лента работ --------------------------------------------------------- * Лента — это композиция из абсолютно спозиционированных карточек, линий и * кружков, разложенных по обе стороны от центральной оси: там больше сотни * координат left/right в main.css и media.css плюс анимации по translateX. * Зеркалить её целиком — значит переписать половину вёрстки и получить те же * восемь карточек, только переставленные местами. Поэтому сама композиция * остаётся слева направо, а справа налево читается текст внутри карточек. */ [dir="rtl"] .timeline, [dir="rtl"] .timeline__wrap { direction: ltr; } [dir="rtl"] .timeline__item_text { direction: rtl; text-align: right; } [dir="rtl"] .text__bottom, [dir="rtl"] .text__top { text-align: right; } /* --- Слайдеры услуг и продуктов ------------------------------------------ * Та же причина: карточки разъезжаются анимациями anime-*-left/-right по * заранее посчитанным координатам. Разворачиваем только текст. */ [dir="rtl"] .slider__wrap, [dir="rtl"] .products-slider, [dir="rtl"] .products-slider__wrap { direction: ltr; } [dir="rtl"] .slider__title, [dir="rtl"] .products-slider__item_title { direction: rtl; } /* --- Списки и карточки ---------------------------------------------------- */ [dir="rtl"] .list { text-align: right; } [dir="rtl"] .list li::before { left: auto; right: -3vw; } [dir="rtl"] .main__content .main__text-small span { text-align: right; } /* --- Форма обратной связи ------------------------------------------------- */ [dir="rtl"] .contacts-form__label { left: auto; right: 1.3vw; } [dir="rtl"] .wrap__input::after { right: auto; left: 0; } /* Уголок рамки рисуется двумя границами — в зеркале это верх и правая. */ [dir="rtl"] .wrap__input::before { left: auto; right: -0.6vw; border-left: none; border-right: 0.4vw solid #19bfb5; } [dir="rtl"] .wrap__input.error::before { border-left: none; border-right: 0.4vw solid #c93e65; } [dir="rtl"] .contacts-form__label::after { left: auto; right: 0.4vw; } [dir="rtl"] .contacts-form__label::before { left: auto; right: -1.6vw; } /* --- Блог и страница материала -------------------------------------------- */ [dir="rtl"] .blog__text_info, [dir="rtl"] .post__text_info { margin-left: 0; margin-right: 10.5vw; } [dir="rtl"] .blog__text_info::before, [dir="rtl"] .post__text_info::before { left: auto; right: -11.8vw; } [dir="rtl"] .post__text_title-before::before { left: auto; right: 0; } [dir="rtl"] .btn-left, [dir="rtl"] .btn-right { margin-left: 0; margin-right: 1.5vw; } [dir="rtl"] .btn-right { margin-right: 1.5vw; margin-left: 15px; } /* --- Правовые страницы и карта сайта -------------------------------------- */ [dir="rtl"] .legal__text ul { padding-left: 0; padding-right: 1.2em; } /* Выключка по формату у арабского текста растягивает вязь: слова в строке разъезжаются сильнее, чем в латинице, и абзац становится рыхлым. */ [dir="rtl"] .legal__text, [dir="rtl"] .catalog__text, [dir="rtl"] .products__card_text, [dir="rtl"] .blog__text_p, [dir="rtl"] .post__text_p, [dir="rtl"] .main__text-small_services { text-align: right; } /* --- Мобильная вёрстка ---------------------------------------------------- */ @media (max-width: 767px) { /* Кнопка меню и переключатель языков стояли в правом углу — уходят в левый, в том же порядке относительно края экрана. */ [dir="rtl"] .navigation__trigger { right: auto; left: 2px; } [dir="rtl"] .lang-auth { right: auto; left: 70px; } [dir="rtl"] .lang-auth::before { left: auto; right: -20px; } [dir="rtl"] .arrow { left: -4px; } [dir="rtl"] .menu { right: auto; left: 0; } [dir="rtl"] .menu__top { text-align: right; align-items: flex-end; } [dir="rtl"] .list li::before { left: auto; right: -20px; } [dir="rtl"] .contacts-form__label::before { left: auto; right: -16px; } [dir="rtl"] .wrap__input::before { left: auto; right: -6px; border-left: none; border-right: 4px solid #19bfb5; } [dir="rtl"] .wrap__input.error::before { border-left: none; border-right: 4px solid #c93e65; } [dir="rtl"] .bottom__icon { margin-left: 0; margin-right: 6px; } [dir="rtl"] .btn-left, [dir="rtl"] .btn-right { margin-left: 0; margin-right: 10px; } [dir="rtl"] .btn-left { margin-right: 0; } } @media (min-width: 768px) { [dir="rtl"] .bottom__icon { margin-left: 0; margin-right: 12px; } } @media (min-width: 1280px) { [dir="rtl"] .lang-auth { right: auto; left: 25px; } [dir="rtl"] .lang-auth::before { left: auto; right: -18px; } [dir="rtl"] .earth__index { left: auto; right: 33px; } [dir="rtl"] .main__text-index { margin-right: 0; margin-left: 115px; } }