/* * islam-today.ru - токены дизайн-системы * * Источник: макет Figma, файл Fhm9rBfdGGsbSq9FIakt2v, экраны 0:2654 (десктоп, главная) * и 0:6 (мобильная, главная). Снято 17.08.2026 через Figma MCP (get_design_context). * * В самом макете дизайн-системы нет: переменных там три, компонент один. Всё, что ниже, * собрано из фактических значений макета - это первая версия, роли цветов уточняются * по мере вёрстки блоков (сейчас часть ролей выведена по внешнему виду, а не по имени слоя). * * ПРАВИЛО: в остальных css-файлах не писать значения напрямую - только var(--...). * Нового цвета/кегля/радиуса в проекте быть не должно, пока он не появился здесь. */ :root { /* ---------- Цвет: текст ---------- */ --c-text: #1d1d1d; /* основной текст, заголовки */ --c-text-black: #000000; /* редкий чистый чёрный из макета */ --c-text-muted: #6f6f6f; /* подписи под карточками */ --c-text-secondary: #838383; /* вторичный текст */ --c-text-meta: #9b9b9b; /* даты, служебные подписи - самый частый серый */ /* ---------- Цвет: фирменные акценты ---------- */ --c-accent: #ef6431; /* фирменный оранжевый: логотип, кнопка play, активные точки */ --c-accent-amber: #ffa300; /* янтарный: рамка поиска, выделения */ /* ---------- Цвет: бежево-коричневая гамма ---------- */ --c-sand-bg: #ffe3b0; /* фон блока «Благородный Куръан» */ --c-sand-light: #f3ebdc; /* светлый фон секций (шапка мобильной) */ --c-sand: #ecd4c4; --c-brown-light: #e7e0dc; /* переменная макета «1-brown» */ --c-brown: #ab998f; /* переменная макета «2-brown» */ --c-brown-dark: #b48e73; /* ---------- Цвет: линии и подложки ---------- */ --c-line: #e1e1e1; /* разделители, рамки карточек */ --c-line-soft: #e3e3e3; --c-line-strong: #d1d1d1; --c-line-alt: #dadada; --c-surface: #f5f5f5; /* светлая подложка */ --c-white: #ffffff; /* ---------- Шрифты ---------- */ /* Golos Text - основной шрифт макета (Regular / Medium / DemiBold). Kazan Basma Mushaf - арабский текст аятов, файл шрифта нужен от Заказчика. Inter встречается в макете 8 раз - похоже на случайность дизайнера, уточняется. */ --font-main: "Golos Text", "Helvetica Neue", Arial, sans-serif; --font-arabic: "Kazan Basma Quran Web", serif; --fw-regular: 400; --fw-medium: 500; --fw-demibold: 600; /* ---------- Кегли (все размеры, встречающиеся в макете) ---------- */ --fs-9: 9px; --fs-10: 10px; /* подписи, даты - один из самых частых */ --fs-11: 11px; --fs-12: 12px; /* самый частый: текст карточек */ --fs-14: 14px; /* заголовки карточек, пункты меню */ --fs-16: 16px; --fs-18: 18px; /* заголовки блоков */ --fs-20: 20px; --fs-22: 22px; --fs-24: 24px; /* крупные заголовки */ --fs-26: 26px; /* заголовок материала на мобильной - см. --fs-article-title */ /* ---------- Плавные кегли ---------- Растут вместе с шириной экрана между 1000 и 1280 (решение Дмитрия 20.08.2026): 1280 - кадр макета, там кегль макетный; 1000 - нижняя граница десктопа, там он уменьшен, чтобы текст помещался в узкие колонки. Ниже 1000 и выше 1280 clamp держит границы. Считается скриптом навыка clamp-css, в уме не выводить. */ /* Заголовок карточки в ленте: 14px на 1000, 18px на 1280 */ --fs-card-title: clamp(14px, -0.286px + 1.429vw, 18px); /* Заголовок главного материала: 16px на 1000, 22px на 1280 (сверено с макетом 17.09.2026, узел 4132:133 - было 20px, макет держит 22) */ --fs-lead-title: clamp(16px, -5.429px + 2.143vw, 22px); /* Заголовок страницы материала: 26 на телефоне -> 28 на десктопе. Единственный кегль крупнее заголовков секций - у самой страницы он один, и текст под ним длинный (20.08.2026, было 45px «Manrope Bold»). 🛑 На телефоне было 20px - при том что в кеглях выше заведён `--fs-26` с подписью «заголовок материала на мобильной», то есть размер снят из макета и просто нигде не применялся (23.08.2026). */ --fs-article-title: clamp(26px, 25.124px + 0.225vw, 28px); /* Заголовок секции («Новости», «Фото дня»): 15px на 1000, 18px на 1280 */ --fs-feed-title: clamp(15px, 4.286px + 1.071vw, 18px); /* Действие рядом с заголовком («Все фотоматериалы»): 11px на 1000, 12 на 1280 */ --fs-feed-action: clamp(11px, 7.429px + 0.357vw, 12px); /* Крупный заголовок секции («Рубрики»): 17px на 1000, 20px на 1280 */ --fs-feed-title-big: clamp(17px, 6.286px + 1.071vw, 20px); /* Пилюля рубрики: 13px на 1000, 14px на 1280 */ --fs-chip: clamp(13px, 9.429px + 0.357vw, 14px); /* Пункт меню в шапке: 12px на 1000, 14px на 1280 */ --fs-nav-link: clamp(12px, 4.857px + 0.714vw, 14px); /* ---------- Плавные отступы ---------- Та же шкала, что у кеглей: значение макета на 1280, уменьшенное на 1000. Считается скриптом навыка clamp-css. */ /* Внутренние промежутки блока «Куръан»: по строкам 12 -> 24, по колонкам 30 -> 32 */ --gap-koran-row: clamp(12px, -30.857px + 4.286vw, 24px); --gap-koran-col: clamp(30px, 22.857px + 0.714vw, 32px); /* Поля вопроса в блоке «Вопрос-ответ» сверху и снизу: 13 -> 16 */ --sp-qa-item: clamp(13px, 2.286px + 1.071vw, 16px); /* Промежуток между колонками страницы: 23 -> 30 */ --gap-columns: clamp(23px, -2px + 2.5vw, 30px); /* Расстояние между блоками одноколоночной раскладки (до 999px). Задаётся ОДНИМ местом, потому что на него завязаны отрицательные поля тех блоков, что должны стоять встык («Куръан», «хадис») или вплотную к линии («Топ статей»): раньше там стояло `calc(-1 * var(--sp-30))` рядом с `gap: var(--sp-30)`, и смена одного молча ломала другое. 15px - решение Дмитрия 20.08.2026, было 30. */ --gap-mobile: 15px; /* Ряд времён намаза в шапке. Полный состав (шесть времён, дата по хиджре, табло, ссылка на расписание) виден с 1000px, а на этой ширине строка шапки узкая - поэтому сжимаются и кегли, и промежутки, и разрядка. */ --fs-namaz-label: clamp(9px, 1.857px + 0.714vw, 11px); /* подписи времён */ --fs-namaz-digit: clamp(19px, 1.143px + 1.786vw, 24px); /* цифры табло и даты */ --fs-namaz-sched: clamp(8px, 4.429px + 0.357vw, 9px); /* «Расписание на месяц» */ --gap-namaz: clamp(10px, -11.429px + 2.143vw, 16px); /* между частями ряда */ --ls-namaz: clamp(1.2px, -2.371px + 0.357vw, 2.2px); /* разрядка подписей */ /* Блок «Куръан» */ --fs-koran-title: clamp(16px, 1.714px + 1.429vw, 20px); /* заголовок: 16 -> 20 */ --fs-koran-translation: clamp(15px, 4.286px + 1.071vw, 18px); /* перевод смыслов: 15 -> 18 */ --fs-koran-more: clamp(13px, 9.429px + 0.357vw, 14px); /* «Читать полностью»: 13 -> 14 */ /* Блок «Вопрос-ответ» */ --fs-qa-item: clamp(14px, 6.857px + 0.714vw, 16px); /* вопрос: 14 -> 16 */ /* заголовок: 17 -> 26 (сверено с макетом 17.09.2026, узел 4133:134 - было 20 максимум, макет держит 26) */ --fs-qa-title: clamp(17px, -15.143px + 3.214vw, 26px); --fs-qa-all: clamp(13px, 9.429px + 0.357vw, 14px); /* «Все вопросы»: 13 -> 14 */ --fs-qa-label: clamp(9px, 5.429px + 0.357vw, 10px); /* плашки «НОВЫЕ»: 9 -> 10 */ /* Текст хадиса: 15px на 1000, 18px на 1280. Значение совпало с заголовком секции - это совпадение шкалы, не общая переменная: кегли меняются независимо друг от друга. */ --fs-hadis-text: clamp(15px, 4.286px + 1.071vw, 18px); /* ---------- Радиусы ---------- */ --r-3: 3px; --r-4: 4px; /* карточки, картинки - основной */ --r-6: 6px; /* кнопки, плашки */ --r-10: 10px; --r-20: 20px; /* пилюли: табы рубрик, поле поиска */ /* ---------- Отступы (шкала выведена из макета, шаг 4px) ---------- */ --sp-4: 4px; /* 5px вне основной шкалы: поля плашек «НОВЫЕ»/«ПОПУЛЯРНЫЕ» (макет 0:2861) */ --sp-5: 5px; /* 6px вне основной шкалы: отбивка имени месяца от табло в компактной шапке - там 8px шкалы уже не помещались (правка 23.09.2026) */ --sp-6: 6px; /* 7px вне основной шкалы: отбивка заголовка секции (правка 19.08.2026) */ --sp-7: 7px; --sp-8: 8px; /* 10px вне основной шкалы: отступ поля поиска от лупы (правка 19.08.2026) */ --sp-10: 10px; --sp-12: 12px; /* 14px вне основной шкалы: поля нижней строки подвала (правка 19.08.2026) */ --sp-14: 14px; /* 15px вне основной шкалы: отбивка заголовка блока приложений (правка 19.08.2026) */ --sp-15: 15px; --sp-16: 16px; /* 17px вне основной шкалы: верхнее поле шапки (правка 19.08.2026) */ --sp-17: 17px; --sp-20: 20px; --sp-24: 24px; /* 25px вне основной шкалы: отбивка колонок подвала (правка 19.08.2026) */ --sp-25: 25px; /* 30px вне основной шкалы: отбивка карточек в ленте и шаг сетки страницы */ --sp-30: 30px; --sp-32: 32px; /* 35px вне основной шкалы: отбивка подвала от содержимого (правка 19.08.2026) */ --sp-35: 35px; --sp-40: 40px; /* ---------- Раскладка ---------- */ /* Решение Дмитрия 17.08.2026: контейнер РЕЗИНОВЫЙ - на любом десктопном разрешении поля по 80px, контент занимает всё остальное. В макете кадр 1280 при полях 80 давал контент 1120 - это частный случай той же формулы, а не жёсткая ширина. С 20.08.2026 рост ограничен сверху - см. --container-max ниже. На мобильной поля 20 (кадр макета 390, контент 350). */ --container-pad: 20px; /* боковые поля на мобильной */ /* Боковые поля на десктопе растут вместе с экраном: 10px при 1000 и 80px начиная с 1280 (решение Дмитрия 20.08.2026). Раньше 80 стояли с самого порога десктопа, и на узком экране от контента оставалось слишком мало. Формула прямой через две точки: 70px прироста на 280px ширины - это 25vw, свободный член 25% * 1000 - 10 = 240. Проверка: 1000 -> 250-240=10, 1280 -> 320-240=80, выше clamp держит потолок. */ --container-pad-desktop: clamp(10px, 25vw - 240px, 80px); /* Предел ширины на больших мониторах, ВМЕСТЕ с полями: 1440 снаружи - это 1280 контента внутри (решение Дмитрия 20.08.2026). Колонки выходят 438 / 487 / 292 при нарисованных 380 / 422 / 256. Пробовали 1600 (колонки 496 / 550 / 334) и вернулись к 1440: плашки приложений в правой колонке жёсткие, 3 по 70 с шагом 20 = 250, и при колонке 334 под ними оставалось 84px пустоты против 42 здесь. */ --container-max: 1440px; /* Планшетные ширины (700-999): раскладка ещё одноколоночная, и без предела контент растягивается во всю ширину - на 999 картинка карточки ленты выходила 944×674, кадр Хузур ТВ 944×662 (решение Дмитрия 20.08.2026). 680 снаружи - это 640 контента плюс поля по 20. Правила - в layout.css (`.it-container`) и legacy-bridge.css (старый `.container`). */ --container-tablet: 680px; /* Справочно: ширина контента в макете. Как max-width НЕ используется - нужна, когда надо свериться с макетом по числам. */ --container: 1120px; /* ---------- Разрядка ---------- */ /* Заглавными в макете набраны подписи времён намаза и служебные ссылки - у них заметная разрядка, без неё блок выглядит иначе. */ --ls-wide: 2.2px; /* подписи времён намаза, 11px */ --ls-wider: 2.4px; /* «РАСПИСАНИЕ НА МЕСЯЦ», 9px */ /* ---------- Значки ---------- */ /* Глаз у счётчика просмотров. Держим рисунком в переменной, чтобы ставить его маской: цвет тогда берётся от текста рядом, а не зашит в картинку. */ --icon-eye: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 5c-5 0-9.27 3.11-11 7 1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7zm0 11.5A4.5 4.5 0 1 1 12 7.5a4.5 4.5 0 0 1 0 9zm0-7A2.5 2.5 0 1 0 12 14.5 2.5 2.5 0 0 0 12 9.5z'/%3E%3C/svg%3E"); /* ---------- Градиенты шапки ---------- */ /* Цвета встречаются только здесь, поэтому держим их в самих градиентах, а не заводим в общую палитру. Значения Дмитрия 19.08.2026. */ /* Плашки цифр времени намаза */ --grad-namaz-digit: linear-gradient(86deg, #232323 16.16%, #6f6f6f 199.82%); /* Полоса под строкой поиска на мобильной (макет 4100:154). В самом файле градиент записан со стопами за пределами 0-100% (`#ffa300 148.67%`, `#ffffff 129.76%`), то есть видна только его хвостовая часть - в CSS такая запись даёт сплошную заливку, поэтому цвета сняты пипеткой с отрисовки узла: левый верх #ffd488, правый низ #fff1d9. */ --grad-search: linear-gradient(172deg, #ffd488 0%, #fff6e6 100%); /* Песочная плашка первого экрана мобильной главной - `Rectangle 1` узла 0:6 (390×900): на ней лежат строка поиска, сетка тем и плеер суры (замечание Дмитрия 16.09.2026 со скриншотом макета). Цвета сняты пипеткой с отрисовки узла: верх #ffd488, низ #ffe9c4. 🛑 Градиент ОДИН на всю плашку, а не по градиенту на блок: блоки лежат в разных контейнерах разметки, поэтому одна и та же картинка рисуется в двух элементах (полоса поиска и `.content`) со сдвигом - разбор в legacy-bridge.css. Поэтому здесь именно готовый градиент, а не набор цветов для стыков. */ --grad-hero: linear-gradient(to bottom, #ffd488 0%, #ffe9c4 100%); /* Тень поля поиска оттуда же: 0 16px 18.5px rgba(255,163,0,.25) */ --shadow-search: 0 16px 18.5px rgba(255, 163, 0, 0.25); /* Плашка исламской даты - два слоя, как в макете */ --grad-hijri: linear-gradient(37deg, #84acb9 -80.28%, #ebd9cb 107.1%), linear-gradient(41deg, #84acb9 -1.73%, #c6af9d 107.79%); /* Карточка аудиоплеера Куръана (узлы 0:24 и 0:1288, снято 02.09.2026). Угол в макете у двух копий разный (59° и 85°) - разница на глаз не видна на карточке 350×100, берём среднее округлённое. */ --grad-koran-player: linear-gradient(72deg, #ffffff 77.2%, #a9ecff 154.94%); /* Карточка второй страницы карусели - узел 80:133 (16.09.2026). Тот же приём, что у плеера: белое поле и голубой отсвет в правом верхнем углу. 🛑 Значения сняты пипеткой с отрисовки узла, а не из файла: лимит вызовов Figma MCP на тарифе Starter к этому моменту кончился. По углам карточки в макете 255 / 230 / 255 / 246 (левый верх, правый верх, левый низ, правый низ); угол и стоп подобраны расчётом под эти четыре числа - расхождение меньше единицы канала. */ --grad-koran-card: linear-gradient(81deg, #ffffff 62%, #e6f9ff 100%); } /* * Брейкпоинты (в media-запросах переменные не работают - держим их здесь как справку * и пишем те же числа в @media): * до 767px - мобильная версия, опорная ширина макета 390px * 768-999px - планшет, отдельных макетов нет, тянем от мобильной * от 1000px - десктоп, опорная ширина макета 1280px * (порог опущен с 1024 до 1000 решением Дмитрия 20.08.2026) */