/* * Блок «Время намаза». Источник: компонент NAMAZ_TIME макета (0:2662) - * единственный настоящий компонент во всём файле Figma; мобильный вариант - * узел 0:13. Значения сняты 17.08.2026 через get_design_context. * * Состав по макету (слева направо): исламская дата | текущее время табло | * Фаджр, Восход, Зухр, Аср, Магриб, Иша | «Расписание на месяц» (порядок * менялся дважды 28.08.2026 - сначала шесть намазов свели подряд без разрыва, * потом дату и табло перенесли к началу ряда, сразу после лого/города; * разбор в комментарии namaz.html.twig). * На мобильной в самой строке остаются только табло и ближайшее время (шесть * намазов и ссылка на расписание не влезают); дата по хиджре с 17.09.2026 * выводится отдельной строкой под ней - см. блок «Мобильная: дата по хиджре» * ниже. * * Прошедшие времена набраны коричневым, наступающие - чёрным. Та же логика * уже есть в старом виджете (классы active/future в jquery-скрипте), поэтому * имена состояний сохраняем по смыслу. */ /* Локальный сброс: блок работает и на страницах старой вёрстки, где общего сброса из base.css нет, а main.css задаёт свои правила по тегам. */ .it-namaz, .it-namaz *, .it-namaz *::before, .it-namaz *::after { box-sizing: border-box; } .it-namaz { display: flex; align-items: center; gap: var(--sp-12); font-family: var(--font-main); line-height: 1.2; } .it-namaz a { color: inherit; text-decoration: none; } /* ---------- Одно время: подпись сверху, часы снизу ---------- */ .it-namaz__item { display: none; /* на мобильной видно только табло, см. ниже */ flex-direction: column; gap: var(--sp-4); font-size: var(--fs-namaz-label); letter-spacing: var(--ls-namaz); white-space: nowrap; color: var(--c-text-black); } /* Время уже прошло сегодня - приглушено */ .it-namaz__item--past { color: var(--c-brown); } /* ---------- Разделители ---------- */ .it-namaz__sep { display: none; flex: none; width: 1px; align-self: stretch; background: var(--c-brown-light); border-radius: var(--r-10); } /* ---------- Табло текущего времени ---------- */ .it-namaz__clock { display: flex; align-items: center; gap: 2px; flex: none; } .it-namaz__digit { display: flex; align-items: center; justify-content: center; min-width: 22px; padding: 0 var(--sp-4); background: var(--grad-namaz-digit); border-radius: var(--r-3); color: var(--c-white); font-size: var(--fs-namaz-digit); line-height: 1.4; } .it-namaz__colon { padding: 0 2px; color: var(--c-text-black); font-size: var(--fs-namaz-digit); } /* 🛑 17.09.2026 (просьба Дмитрия): на мобильной табло ужато сильнее, чем на десктопе, - освобождает место под компактную дату по хиджре, см. блок «Мобильная: дата по хиджре» ниже. Гейт `max-width: 999px` обязателен - базовые 22px/2px выше общие для десктопа и мобильной (десктопного переопределения у размеров табло не было вовсе), без гейта ужалась бы и десктопная строка, которую Заказчик не просил трогать. */ @media (max-width: 999px) { .it-namaz__clock { gap: 1px; } .it-namaz__digit { min-width: 18px; padding: 0 2px; } } /* ---------- Исламская дата ---------- */ .it-namaz__hijri { display: none; align-items: center; /* 🛑 29.08.2026: было --sp-8 (8px) - на фоне общего gap ряда .it-namaz (30-31px, токен --gap-namaz) день и месяц смотрелись слипшимися, а снаружи блока - непропорционально просторно (замечание Дмитрия по скриншоту). --sp-12 не разъезжает день и месяц далеко (они остаются одной группой «дата»), но убирает ощущение слипания. */ gap: var(--sp-12); flex: none; /* 29.08.2026: слева от блока - не gap этого ряда, а gap ВНЕШНЕГО flex-контейнера `.it-header__bar` (фиксированные 12px) - он меньше промежутков ВНУТРИ .it-namaz (там justify-content: space-between растягивает их до 30px+ на десктопе). На глаз это читалось как «дата прижата к лого». margin-left не может повторить space-between дословно на любой ширине, но приближает к нему на типичном экране. */ margin-left: var(--sp-20); } .it-namaz__hijri-day { display: flex; align-items: center; justify-content: center; min-width: 34px; padding: var(--sp-4); background: var(--grad-hijri); border-radius: var(--r-3); color: var(--c-white); font-size: var(--fs-namaz-digit); } .it-namaz__hijri-month { color: var(--c-brown); font-size: var(--fs-12); line-height: 1.15; /* 🛑 23.09.2026, указание Дмитрия: имя месяца идёт ОДНОЙ строкой - здесь стоял `max-width: 70px`, и «Раби ас-сани» ломалось на «Раби ас-» и «сани» даже там, где места хватало с запасом. Самое длинное имя («Джумада ас-сани») занимает 104px, ряд шапки от этого не рвётся ни на 1000px, ни на 1440 - замер на стенде. Перенос остаётся только в компактном виде на мобильной, где место действительно на исходе: его включает класс `.it-header--hijri-wrap` (блок в конце файла). */ white-space: nowrap; /* 29.08.2026: название месяца при переносе на 2 строки («Раби аль-» / «авваль») по умолчанию прижималось к левому краю - короткая вторая строка висела слева, а не под серединой первой (замечание Дмитрия). */ text-align: center; } /* Если данных нет (`ServiceController::getHijriDate()` вернул null - нет расширения intl или незнакомый месяц календаря), Twig не выводит блок вовсе - `:empty` здесь подстраховка на случай пустой разметки, а не основной путь скрытия. */ .it-namaz__hijri:empty { display: none; } /* ---------- Мобильная: дата по хиджре отдельной строкой (17.09.2026) ---------- * * 🛑 До этой правки дата на мобильной была скрыта совсем (жалоба заказчика - * «нет даты календаря по хиджре»), хотя источник данных с 24.08.2026 есть и * приходит в шаблон на каждой странице. Причина - не пропущенные данные, а * место: в строке `.it-header__bar` и так впритык лого + табло + бургер * (см. `header.css`, разбор узких телефонов), день+месяц туда просто не * влезали. Отдаём дате отдельную строку под общим рядом, а не втискиваем в * него - `flex-wrap` на `.it-header__bar` (header.css) плюс перенос здесь. * * `.it-namaz` переводим в `display: contents`: сама дата вложена в него на * два уровня глубже бара, и без этого `flex-basis: 100%` сработал бы внутри * узкой коробки `.it-namaz`, а не во всю ширину бара. Соседей (табло, ближайшее * время) это не портит - их взаимный отступ теперь берёт `gap` бара, то же * значение 12px, что было у `.it-namaz` до этого. */ @media (max-width: 999px) { .it-namaz { display: contents; } /* 🛑 Группа времени («дата + табло + ближайший намаз») отодвигается от логотипа ОДНИМ отступом, а внутри неё элементы стоят вплотную по `gap: 4px` строки шапки (header.css). Иначе `space-between` раздавал остаток поровну, и части одних и тех же часов читались как отдельные блоки (замечание Дмитрия 17.09.2026). В двухстрочном виде группа начинается с табло - отступ на нём; в компактном первой идёт дата, и он переносится на неё (ниже). */ .it-namaz__clock { margin-left: auto; } .it-namaz__hijri { display: flex; flex: 1 1 100%; /* Любое значение больше нуля - соседи (бренд, табло, бургер) по умолчанию order:0 и остаются в исходном DOM-порядке на первой строке, дата уходит на вторую. */ order: 5; /* 🛑 Базовый `margin-left: 20px` (выше) был рассчитан на десктоп - там дата стоит В ОДНОМ ряду с логотипом и добирает разницу до `justify-content: space-between`. На отдельной строке это просто лишний отступ слева от края страницы - обнуляем. */ margin: var(--sp-8) 0 0; /* Между цифрой и месяцем - как в компактном виде, иначе на узких телефонах дата выглядит просторнее, чем на обычных. */ gap: var(--sp-8); /* 🛑 По центру своей строки (замечание Дмитрия 17.09.2026: «большой отступ слева, давай по центру»): блок занимает всю ширину, а сама дата - узкая, и прижатая влево она читалась как случайно оставшийся хвост под шапкой, а не как строка календаря. */ justify-content: center; } /* 🛑 Плашка той же формы, что цифра табло - на ВСЕЙ мобильной, а не только в компактном виде (замечание Дмитрия 17.09.2026 про одинаковые размеры): иначе на узких телефонах, где дата падает на свою строку, она внезапно крупнее, чем на обычных. Десктоп сохраняет свои 34px - там у табло и кегль крупнее. */ .it-namaz__hijri-day { padding: 0 2px; line-height: 1.4; } /* 🛑 Цифры табло и плашка дня ужаты ещё раз 23.09.2026 (просьба Дмитрия «на мобильной всё должно вмещаться в одну строку шапки»): 19 → 17px, ширина 18 → 16. Это 10px в строке - та часть дефицита, которую не удалось снять промежутками. Кегль у двух плашек общий, врозь их менять нельзя: замечание Дмитрия 17.09.2026 про одинаковые размеры двух блоков календаря. Ниже 16px не опускаться - цифра времени должна читаться на ходу, а не только с рук. */ .it-namaz__digit, .it-namaz__hijri-day { font-size: 17px; min-width: 16px; } /* Двоеточие уже цифры, поэтому отдельной плашки ему не нужно - его поля здесь чистый воздух, и 1px хватает. */ .it-namaz__colon { font-size: 17px; padding: 0 1px; } } /* ---------- Мобильная: попытка уместить дату в ОДНУ строку (17.09.2026) ---------- * * Просьба Дмитрия после сжатия логотипа и табло (header.css, блок выше в * этом файле) - «должно вместиться». Свободное место действительно * появилось, но зависит от текущих дня и месяца («Джумада аль-уля» с * двузначным числом шире «Раби ас-сани»), поэтому решение НЕ жёсткий CSS-порог - * `namaz.js` (`fitHijriInline`) меряет реальную раскладку и включает класс * `.it-header--hijri-inline`, только если дата легла в тот же ряд, что * БУРГЕР (не табло - у длинных месяцев дата рядом с табло ещё помещалась, * но выталкивала бургер вниз). Не получилось - остаётся рабочий двухстрочный * вид из блока выше, класс просто не ставится. */ @media (max-width: 999px) { /* 🛑 Имя месяца СПРАВА от плашки, как на десктопе (решение Дмитрия 17.09.2026 - вариант с подписью под плашкой был промежуточным). Строка от этого шире примерно на 20px, и место под неё даёт уменьшенный промежуток ряда: 12 → 8px в `header.css` (просьба Дмитрия «просто gap сделать поменьше» - логотип и табло больше не режем). Не хватило на конкретный месяц - `namaz.js` откатит на двухстрочный вид. */ .it-header--hijri-inline .it-namaz__hijri { flex: 0 0 auto; order: 0; /* 🛑 23.09.2026, правка Дмитрия: было `margin-left: auto` - группа времени прижималась вправо, и весь остаток строки собирался в один зазор между логотипом и датой. Теперь дата идёт сразу за логотипом с отбивкой 4px, а свободное место уходит в правый `margin-left: auto` бургера (`header.css`). Справа и по вертикали отступов нет: до табло дату держит `gap` строки шапки плюс собственная отбивка имени месяца. */ margin: 0 0 0 var(--sp-4); align-items: center; /* Между цифрой и месяцем - минимум: десктопные 12px здесь съели бы ровно то место, ради которого ужимались логотип и табло. */ gap: var(--sp-4); } /* В компактном виде группу открывает дата, поэтому отступ с табло снят - иначе дата отделилась бы от часов таким же промежутком. */ .it-header--hijri-inline .it-namaz__clock { margin-left: 0; } /* Размеры самой плашки здесь НЕ задаём - они общие для всей мобильной (блок выше, `.it-namaz__hijri-day`) и совпадают с плашкой цифры табло: 18×26.6, кегль 19px, радиус 3. Замечание Дмитрия 17.09.2026 про одинаковые размеры двух блоков календаря закрыто там. */ /* 🛑 23.09.2026, замечание Заказчика «месяц полностью не прописан»: здесь стояло сокращение («Раби II») - теперь и в компактном виде имя полное и по умолчанию в ОДНУ строку, как на десктопе. Кегль мельче основного (подпись, а не текст) - тот же, что у «МАГРИБ» рядом. */ .it-header--hijri-inline .it-namaz__hijri-month { font-size: var(--fs-namaz-label); line-height: 1.2; /* 🛑 Отбивка от табло (правка Дмитрия 17.09.2026): к промежутку ряда добавляет ещё немного - дата и часы стоят вплотную по смыслу, но это два разных календаря, и без этой паузы имя месяца читалось как подпись к цифрам времени. 10 → 6px 23.09.2026: пауза читается и так, а шесть пикселей нужнее строке. Отступ на самом месяце, а не на контейнере даты: у него `margin-left: auto`, и правка там сбила бы раздачу свободного места по краям ряда. */ margin-right: var(--sp-6); } /* 🛑 Последняя ступень перед тем, как отдать дате отдельную строку: имя месяца переносится на две строки и строка шапки снова складывается. Класс ставит `namaz.js` - сам по себе он не включается: сначала пробуем имя одной строкой, и только если ряд не сошёлся, разрешаем перенос (порядок и замеры - в комментарии там). 44px - НИЖНИЙ предел ширины: столько занимает «Мухаррам», самое длинное имя без дефиса и пробела (переносить его не по чему, при меньшем значении оно просто вылезет за границу). Остальные одиннадцать в 44px укладываются в две строки высотой 22px - ниже плашки дня, то есть шапку это не удлиняет. Замер всех двенадцати имён на стенде. */ .it-header--hijri-wrap .it-namaz__hijri-month { white-space: normal; max-width: 44px; } } /* ---------- Ближайшее время рядом с табло (мобильная) ---------- */ .it-namaz__next { display: flex; flex-direction: column; /* 🛑 Без промежутка (было --sp-4, 17.09.2026, замечание Дмитрия «сильно далеко»): подпись и время - одна пара, как цифра и месяц в дате слева, но там они стоят в строку с зазором 4px, а здесь тот же зазор идёт по вертикали и складывается с интерлиньяжем обеих строк - на кегле 9px пара разъезжалась и читалась как два отдельных элемента. Расстояние между строками теперь даёт только `line-height`. */ gap: 0; font-size: var(--fs-namaz-label); letter-spacing: var(--ls-namaz); line-height: 1.3; white-space: nowrap; } /* ---------- Ссылка на расписание ---------- */ .it-namaz__schedule { display: none; align-items: center; gap: var(--sp-8); flex: none; font-size: var(--fs-namaz-sched); font-weight: var(--fw-medium); letter-spacing: var(--ls-namaz); line-height: 1.2; } /* Значок слева от подписи, как в макете. Размер из самого файла (16x20), не растягиваем. */ .it-namaz__schedule-icon { flex: none; width: 16px; height: 20px; } /* ---------- Десктоп: показываем всё ---------- * * Порог общий десктопный - 1000 (решение Дмитрия 20.08.2026): полный ряд * (шесть времён намаза, дата по хиджре, табло и ссылка на расписание) виден * везде, кроме мобильной, где остаётся табло и ближайшее время. * * ⚠️ До 20.08.2026 порог был 1280: ряд требовал около 840px и на 1024 вылезал * за контейнер, давая горизонтальную прокрутку всей страницы. С тех пор кегли * шапки стали плавными и на 1000 ряд помещается - проверено замером ширины * блока и прокрутки на 1000/1100/1280. Если ряд снова начнёт вылезать (добавят * элемент, вернут крупный кегль), первым делом проверять именно это. */ @media (min-width: 1000px) { .it-namaz { flex: 1 1 auto; justify-content: space-between; gap: var(--gap-namaz); height: 40px; } .it-namaz__item, .it-namaz__sep, .it-namaz__schedule { display: flex; } .it-namaz__hijri { display: flex; } /* На десктопе ближайшее время не дублируем - оно и так в общем ряду */ .it-namaz__next { display: none; } } /* 🛑 Отдельный порог 360px здесь БЫЛ (23.08.2026: на 320px табло вместе с логотипом и бургером выходило за край) - снят 17.09.2026, потому что ужатые под него значения (gap 1px, min-width 18px) с этого дня стали базой для ВСЕЙ мобильной ширины (см. блок выше). Полям страницы и логотипу на 320px по-прежнему нужен отдельный шаг - `blocks/header.css`. */