/* Theme Name: Нуруль Ислам Theme URI: https://medrese.ihermes.app/ Author: Медресе «Нуруль Ислам» Description: Тема сайта медресе «Нуруль Ислам» (ЦДУМ России, г. Октябрьский). Собрана по согласованному эталону дизайна. Шрифты локальные, внешние CDN не используются. Version: 1.18.2 Requires at least: 6.0 Tested up to: 7.1 Requires PHP: 8.0 Text Domain: nurul-islam */ /* ========================================================================== 1. Токены. Светлая палитра — на :root, тёмная — на .theme-dark (класс вешается на инлайн-скриптом в , поэтому FOUC нет). Значения взяты из эталона 1:1. ========================================================================== */ :root { --bg: #FAF7F0; --surface: #FFFFFF; --border: #E7DDCA; --borderSoft: #F1EBDD; --text: #20261D; --muted: #6A705F; /* Приглушённая подпись (даты новостей, подписи таблиц, примечания страниц). Была #9A8F77 — 2,99 к фону страницы, ниже AA, и костюм Поста в фазе Кадра дожимал до 2,88. Тон и насыщенность те же (hsl 41°, 15%), опущена только светлота: 53,5% → 38,5%. */ --datemut: #716854; --heading: #0F3D29; --navtext: #3A3F33; --iconbg: #EAF2EC; --icongreen: #17573A; --link: #17573A; --ph1: #E9E0CD; --ph2: #E3D8C2; --burgerborder:#D9CDB5; --zebra: #F3EEE2; /* Постоянные цвета бренда — не зависят от темы */ --brand-deep: #0f3d29; --brand-mid: #17573a; --brand-lite: #1e6d47; --gold: #c19a49; --gold-lite: #e9c877; --on-deep: #cfe0d4; --cream: #f4efe2; --on-hero: #eef2ea; /* В эталоне контейнера нет вовсе — вёрстка во всю ширину с полями 40px. Рамка 1680 держит эталонную ширину на 1440–1680 и не растягивает страницу на ультрашироких мониторах. */ --wrap: 1680px; --padx: 40px; --padx-m:18px; /* Единый язык движения (пакет №4, блок F): ОДНА база длительности и ОДИН easing на весь сайт — иначе получается зоопарк, где каждая карточка отвечает по-своему. Значения — литералы: var() в значении кастомного свойства эта тема уже роняла (§2, грабля 7). Не разрешится var() в старом движке — переход просто не случится, состояние сменится мгновенно; раскладка при этом цела. */ --dur: 180ms; --ease: cubic-bezier(.22, .61, .36, 1); } .theme-dark { --bg: #121B15; --surface: #1A2820; --border: #2B3C31; --borderSoft: #233326; --text: #ECEEE6; --muted: #A0AD9B; --datemut: #8F9A86; --heading: #ECF2EA; --navtext: #CFD8CC; --iconbg: #213829; --icongreen: #8FD0AB; --link: #E9C877; --ph1: #1F2E24; --ph2: #24352A; --burgerborder:#2B3C31; --zebra: #1F2E24; } /* ========================================================================== 2. База ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; /* Страховка от системного увеличения текста: слово, которое физически не влезает в свою колонку, разрывается, а не рисуется поверх соседей. На обычном кегле не срабатывает — слова помещаются. 🪤 Именно anywhere, а не break-word: break-word разрывает строку, но НЕ уменьшает min-content, поэтому блок с длинным словом всё равно распирал контейнер и утаскивал страницу в горизонтальную прокрутку. */ overflow-wrap: anywhere; background: var(--bg); color: var(--text); font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.55; } img { max-width: 100%; height: auto; } a { color: var(--link); } h1, h2, h3, h4 { font-family: 'Cormorant', Georgia, serif; color: var(--heading); line-height: 1.1; margin: 0; } p { margin: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--gold); color: var(--brand-deep); padding: 10px 18px; font-weight: 800; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* Фокус-кольцо в три шага вместо `:where(...):focus-visible`. `:where()` (Chromium 88 / Safari 14) и `:focus-visible` (Chromium 86 / Safari 15.4) вместе выбрасывали всё правило целиком в движках ниже базлайна — там клавиатурный фокус был не виден вовсе. Теперь: старый движок берёт первое правило и всегда рисует кольцо (для ГОСТ это скорее плюс); современный гасит его для мыши вторым правилом и возвращает для клавиатуры третьим — то есть ведёт себя ровно как раньше. */ a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: 3px solid var(--gold); outline-offset: 2px; } a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) { outline: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .wrap { max-width: var(--wrap); margin: 0 auto; } .only-desktop { display: block; } .only-mobile { display: none; } /* ========================================================================== 3. Верхняя утилитарная полоса ========================================================================== */ .topbar { background: var(--brand-deep); color: var(--on-deep); font-size: 13px; } .topbar__in { /* Перенос разрешён, но левой группе задан flex-basis: 0 — иначе строка ломалась бы уже на обычном кегле: решение о переносе flex принимает по МАКСИМАЛЬНОЙ ширине элементов, до всякого сжатия. С нулевой базой левая группа не требует места под свой текст, и вторая строка появляется только когда правая группа и правда не влезает — то есть при системном увеличении текста. */ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 9px var(--padx); max-width: var(--wrap); margin: 0 auto; } /* Подпись слева не должна ломаться посреди слова («ЦДУ/М» на скрине с телефона — следствие overflow-wrap: anywhere на body). Фраза целиком неразрывна; если места нет, она обрезается многоточием, а на телефоне её нет вовсе (см. блок 10). Спрятать «по нехватке места» средствами CSS нельзя — многоточие ближайшее к требованию поведение. */ .topbar__left { display: flex; align-items: center; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; } .topbar__left > span { overflow: hidden; text-overflow: ellipsis; } .topbar__left .sep { opacity: .5; } .topbar__left span { opacity: .85; } .topbar__right { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; } .topbar a { color: var(--on-deep); text-decoration: none; } .topbar a:hover { text-decoration: underline; } .cta { display: inline-flex; align-items: center; color: var(--brand-deep); background: var(--gold); text-decoration: none; font-weight: 700; padding: 5px 12px; border-radius: 6px; border: 0; cursor: pointer; font-family: inherit; font-size: inherit; } .cta:hover { text-decoration: none; } /* подложка — блок 15 */ .cta[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--brand-deep); } .themetoggle { width: 2.143em; height: 2.143em; border-radius: 50%; border: 1px solid rgba(207,224,212,.4); background: transparent; color: var(--gold-lite); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex: none; } .themetoggle:hover { border-color: var(--gold-lite); } /* Значок кнопки — инлайновый SVG, по одному на состояние темы (пакет №7, блок E). Обе иконки в разметке; какую показать, решает класс `theme-dark` на , а не скрипт: класс ставится ДО отрисовки, поэтому чужой значок не мелькает. Размер 16px против 14px у соседнего глифа ◐ намеренно: контурный знак при равной высоте коробки читается мельче заливного. */ .themetoggle .ticon { display: block; width: 16px; height: 16px; } .themetoggle .ticon--sun { display: none; } .theme-dark .themetoggle .ticon--moon { display: none; } .theme-dark .themetoggle .ticon--sun { display: block; } /* ========================================================================== 4. Шапка ========================================================================== */ .masthead { background: var(--bg); border-bottom: 1px solid var(--border); } .masthead__in { /* nowrap — конструктивный запрет второго ряда меню (§4). Пока стояло wrap, башкирское меню на десктопе молча съезжало под логотип вторым рядом вместо того, чтобы уйти под бургер (пакет №4, блок D). */ display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 20px var(--padx); max-width: var(--wrap); margin: 0 auto; } .brand { display: flex; align-items: center; text-decoration: none; min-width: 0; } /* Знак медресе: книга с полумесяцем. Пропорции 1.583:1, цвет — токеном темы через currentColor, поэтому знак живёт и в тёмной теме, и в версии для слабовидящих без отдельных файлов. */ .brand__mark { display: block; width: 66px; flex: none; color: var(--gold); line-height: 0; } .brand__mark svg { width: 100%; height: auto; display: block; } .brand__kicker { display: block; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 700; } .brand__name { /* nowrap снят: на обычном кегле название и так в строку, а на системном увеличении текста оно выталкивало бургер за край экрана. */ display: block; font-family: 'Cormorant', Georgia, serif; font-size: 28px; font-weight: 700; color: var(--heading); line-height: 1; } /* Название учреждения в кавычках — неделимая единица (микробатч №5.1). ------------------------------------------------------------------------ `inline-block` даёт ровно ту очерёдность переносов, которая нужна: сперва строка рвётся ПЕРЕД кавычкой («Медресе / «Нуруль Ислам»»), и только если название не влезает целиком — внутри него («Медресе / «Нуруль / Ислам»»). Неразрывный пробел так не умеет: он запрещает второй перенос совсем, и название уезжает за край. 🪤 Подчёркивание ссылки на inline-block обрывается — он атомарный для строчного контекста, а `text-decoration` предок РИСУЕТ, а не передаёт по наследству (свойство ненаследуемое, `inherit` тут бесполезен — проверено: у обёртки всё равно `none`). Заметнее всего это в ГОСТ, где подчёркнуты все ссылки. Поэтому ВНУТРИ ссылок обёртка остаётся обычным строчным элементом: единственная такая точка — логотип шапки, а там в `.brand__name` и так нет ничего, кроме самого названия, и делить нечего. `vertical-align: top` — на случай запасного варианта: у обёртки из двух строк базовой становится ПОСЛЕДНЯЯ, и без выравнивания название съезжало бы вниз относительно соседнего слова. */ .brand__q { display: inline-block; vertical-align: top; } a .brand__q { display: inline; } /* Меню: ряд ОДИН, а пункт в нём может занять ДВЕ СТРОКИ (пакет №5, D2). Полное «Сведения об образовательной организации» и башкирское «Мәғариф ойошмаһы тураһында мәғлүмәт» в одну строку на 64em не помещаются ничем, кроме нечитаемого кегля, — поэтому переносим текст внутри пункта. Второй ряд ПУНКТОВ остаётся запрещённым (§4): за это отвечает `flex-wrap: nowrap` здесь и у `.masthead__in`. */ .mainnav ul { display: flex; align-items: center; flex-wrap: nowrap; justify-content: flex-end; list-style: none; margin: 0; padding: 0; } .mainnav a { text-decoration: none; color: var(--navtext); /* Нижняя ступень кегля — 12px при базовых 16 (пакет №5, D2): ниже пункт нечитаем, а выше башкирский ряд не садится на 64em. */ font-size: clamp(12px, .98vw, 15px); font-weight: 600; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: .15s; /* Перенос разрешён ПО СЛОВАМ и только по ним: `white-space: normal` — можно перенести строку; `overflow-wrap: normal` — слово не рвать посреди; `hyphens: none` — и не ставить знак переноса (дефект пилота «Расписани-е», §4). Ширину ограничиваем в em: она едет за кеглем пункта, и рамка держится на любом размере шрифта. */ display: inline-block; white-space: normal; max-width: 22em; line-height: 1.15; hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; } /* Длинный пункт «Сведения…» — на полшага мельче и с поджатым трекингом, чтобы не выдавливать соседей. */ .mainnav > ul > .menu-item-has-children > a { font-size: clamp(11.2px, .9vw, 13.5px); letter-spacing: -.006em; } .mainnav a:hover { color: var(--heading); border-bottom-color: var(--gold); } .theme-dark .mainnav a:hover { color: var(--gold-lite); } .mainnav .current-menu-item > a, .mainnav .current-menu-ancestor > a, .mainnav .current_page_item > a, .mainnav .current_page_ancestor > a { border-bottom-color: var(--gold); } /* Подменю «Сведений» — раскрывашка */ /* 🪤 Сжатие пунктов оставлено НАМЕРЕННО, хотя оно и маскирует нехватку места: пол сжатия — min-content, то есть длина самого длинного слова пункта, и ниже него флекс не опускается. Это единственное, что не даёт ряду вытолкнуть страницу в горизонтальную прокрутку — главный грех этой вёрстки (§13, §16, §18). Цена: на башкирском в узком десктопе пункт уходит на третью строку. Замер числа строк — tools/shots/navcheck2.mjs, натуральную ширину там же меряют с временно снятым сжатием. */ .mainnav li { position: relative; } .mainnav .sub-menu { display: none; position: absolute; right: 0; top: 100%; z-index: 60; min-width: 320px; padding: 8px 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(15,61,41,.45); flex-direction: column; align-items: stretch; gap: 0; } .mainnav li:hover > .sub-menu, .mainnav li:focus-within > .sub-menu { display: flex; } .mainnav .sub-menu a { display: block; padding: 9px 18px; white-space: normal; font-weight: 600; font-size: 14.5px; border-bottom: 0; } .mainnav .sub-menu a:hover { background: var(--iconbg); border-bottom: 0; } /* ========================================================================== 5. Сезонный баннер ========================================================================== */ /* Полоса приёма реагирует на тему. На телефоне первый экран — это полоса приёма плюс фото героя, и пока полоса была тёмной в ОБЕИХ темах, переключение темы там просто не читалось: «сайт всегда тёмный». В светлой теме полоса светлая. Цвета только из палитры, новых не вводим. Контраст замерен: --heading (#0F3D29) на --iconbg (#EAF2EC) — 10,7:1; подпись --icongreen — 7,5:1; кнопка (золото на тёмно-зелёном) — 4,65:1. Все выше порога AA. */ .banner { background: var(--iconbg); color: var(--heading); border-bottom: 3px solid var(--gold); } .banner__sub { color: var(--icongreen); } /* Тёмная тема — прежняя брендовая полоса, без изменений. Правило стоит ЗДЕСЬ, а не в блоке 11: у ГОСТ-версии селекторы той же специфичности, и она идёт ниже по файлу — значит выигрывает, как и должно быть при включённой версии для слабовидящих. */ .theme-dark .banner { background: linear-gradient(90deg, var(--brand-mid), var(--brand-lite)); color: var(--cream); } .theme-dark .banner__sub { color: var(--cream); } .banner__in { display: flex; align-items: center; justify-content: space-between; /* Дубль-фолбэк: движок без кастомных свойств возьмёт первую строку, современный — вторую. Полоса приёма и герой — те два места, где потеря паддинга читается как «полоса схлопнулась». */ padding: 16px 40px; padding: 16px var(--padx); max-width: var(--wrap); margin: 0 auto; } .banner__left { display: flex; align-items: center; } .banner__glyph { width: 2.2em; height: 2.2em; border-radius: .5em; background: rgba(201,162,73,.22); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--gold); flex: none; } .theme-dark .banner__glyph { background: rgba(201,162,73,.22); color: var(--gold-lite); } .banner__title { font-weight: 800; font-size: 17px; } .banner__sub { font-size: 14px; } .banner__cta { flex: none; background: var(--gold); color: var(--brand-deep); text-decoration: none; font-weight: 800; padding: 11px 22px; border-radius: 8px; font-size: 15px; } /* ========================================================================== 6. Герой ========================================================================== */ .hero { /* min-height, а не height: при системном увеличении текста (Android text-zoom) содержимое перестаёт помещаться, и при жёсткой высоте оно вылезало ВВЕРХ, накрывая полосу приёма. Проверено на 150% и 200%. */ position: relative; min-height: 440px; background-size: cover; background-position: center 40%; display: flex; align-items: center; } .hero::before { /* Не `inset: 0`: сокращение появилось в Chromium 87 / Safari 14.1 — ниже базлайна. Отдельные стороны понимают все движки, результат тот же. */ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, rgba(15,61,41,.86) 0%, rgba(15,61,41,.55) 45%, rgba(15,61,41,.15) 100%); } .hero__in { position: relative; max-width: var(--wrap); margin: 0 auto; width: 100%; padding: 0 40px; padding: 0 var(--padx); } /* Текст героя лежит ВЫШЕ костюмного декора (пакет №7, блок G1). Декор костюма — псевдоэлементы `.hero__in`, а позиционированные псевдоэлементы по умолчанию рисуются ПОВЕРХ обычного содержимого. Без этой пары `z-index` ажурная скоба Праздника легла бы прямо на буквы пилюли. Раскладку правило не трогает: `position: relative` без смещений и `z-index` в потоке ничего не двигают. */ .hero__box { max-width: 640px; color: #fff; position: relative; z-index: 1; } .hero__badge { /* Бейдж и так в потоке (position: static) — «вылезал» он не из-за абсолютного позиционирования, а из-за ШИРИНЫ: inline-block ужимается только до min-content, а min-content у него — самое длинное слово «ПРОФЕССИОНАЛЬНОЕ» с трекингом .16em. На системном увеличении текста это слово шире экрана, плашка вылезала за hero и ложилась поверх соседних строк, утаскивая за собой горизонтальную прокрутку страницы. 🪤 overflow-wrap: break-word тут НЕ помогает: он не уменьшает min-content. Уменьшает только anywhere. Плюс жёсткий потолок ширины. */ max-width: 100%; overflow-wrap: anywhere; display: inline-block; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lite); font-weight: 700; margin-bottom: 18px; border: 1px solid rgba(233,200,119,.5); padding: 5px 12px; border-radius: 100px; } .hero__title { font-family: 'Cormorant', Georgia, serif; font-size: 62px; line-height: 1.02; font-weight: 700; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); } .hero__lead { font-size: 19px; line-height: 1.5; margin-top: 18px; color: var(--on-hero); max-width: 520px; } .hero__actions { display: flex; margin-top: 28px; } .hero__cta { background: var(--gold); color: var(--brand-deep); text-decoration: none; font-weight: 800; padding: 14px 26px; border-radius: 9px; font-size: 16px; } /* ========================================================================== 7. Плашка намаза «Сегодня» — ТОЛЬКО мобильный экран. Канон эталона: на десктопной главной намаз присутствует лишь карточкой «Быстрого доступа», которая ведёт на страницу с полной таблицей. ========================================================================== */ .prayer { display: none; margin: 24px auto 4px; max-width: calc(var(--wrap) - var(--padx) * 2); background: linear-gradient(120deg, var(--brand-deep), var(--brand-mid)); border-radius: 18px; padding: 20px 24px 8px; color: #fff; box-shadow: 0 14px 30px -18px rgba(15,61,41,.7); } .prayer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .prayer__title { font-family: 'Cormorant', Georgia, serif; font-size: 22px; font-weight: 700; color: #fff; } .prayer__badge { font-size: 12px; color: var(--gold-lite); font-weight: 700; } .prayer__sub { font-size: 12px; color: var(--on-deep); margin-bottom: 12px; } .prayer__list { display: block; } .prayer__row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(201,162,73,.22); } .prayer__name { font-size: 15px; font-weight: 600; color: var(--on-hero); } .prayer__time { font-family: 'Cormorant', Georgia, serif; font-size: 20px; font-weight: 700; color: #fff; } .prayer__note { font-size: 12px; color: var(--on-deep); opacity: .8; padding: 10px 0 12px; } /* Плашка редактору лежит на тёмно-зелёной карточке — там золото светлой ступени, иначе метка тонет (базовое --gold на этом фоне даёт 3,1). */ .prayer__note .orgchart__hint-tag { color: var(--gold-lite); } /* Ближайший намаз. Подсветка — фоном и подписью: высота строки и разделители те же, иначе список дёргался бы сам по себе раз в несколько часов. */ .prayer__row.is-next { /* Только фон: полоска-указатель слева легла бы на первую букву — у строки нет горизонтального паддинга, а добавить его нельзя (нижняя граница строки стала бы шире соседних). */ background: rgba(201,162,73,.16); border-bottom-color: rgba(201,162,73,.45); } .prayer__soon { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-hero); opacity: .85; } .prayer__more { display: inline-block; color: var(--gold-lite); font-weight: 700; text-decoration: none; font-size: 13px; padding: 10px 0 14px; } /* ========================================================================== 8. Секции главной ========================================================================== */ .section { padding: 44px var(--padx); max-width: var(--wrap); margin: 0 auto; } /* Секция плиток идёт сразу за мудростью и без заголовка (пакет №4, блок A): верхний отступ ужат с 44 до 20px. Вместе с padding-bottom мудрости (30→16) разрыв между линейкой мудрости и карточками сокращён вдвое: 74px → 36px. Правим ИСТОЧНИК зазора — два паддинга, без отрицательных margin. На мобильном оба значения перекрыты правилами медиазапроса (блок 11), поэтому телефона правка не касается: там порядок другой (мудрость → намаз → плитки) и зазор считается от плашки намаза. */ .section--tight { padding-top: 20px; padding-bottom: 8px; } .section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; margin-bottom: 22px; } .section__title { font-family: 'Cormorant', Georgia, serif; font-size: 32px; font-weight: 600; color: var(--heading); } .section__more { /* nowrap снят: на системном увеличении текста «Все новости →» вылезало за край экрана. На обычном кегле ссылка и так в строку. */ color: var(--link); font-weight: 700; text-decoration: none; font-size: 15px; } .section__more:hover { text-decoration: underline; } /* Карточки быстрого доступа. Компактная посадка (пакет правок №2): плитки ужаты по вертикали, значок и заголовок сведены ближе — так на первый экран главной входят ещё и «Курсы», а сетка и состав карточек остались прежними. */ .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .tile { min-width: 0; /* элемент сетки: иначе не ужимается ниже слова */ text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; display: block; transition: .2s; box-shadow: 0 2px 0 rgba(15,61,41,.03); /* Дефект пилота: «Расписани-е» — переносов СО ЗНАКОМ в плитках нет. break-word знака не ставит и срабатывает лишь когда слово не влезает физически (системное увеличение текста) — иначе плитка распирала сетку. */ hyphens: none; -webkit-hyphens: none; overflow-wrap: break-word; } /* Ответ плитки на указатель и клавиатуру — в блоке 15 (единый язык движения). Здесь состояния больше нет: два набора значений на один элемент — как раз тот зоопарк, ради которого блок 15 и заводили. */ .tile__glyph { /* Размер в em: коробка значка растёт вместе с системным кеглем */ width: 2em; height: 2em; border-radius: .52em; background: var(--iconbg); color: var(--icongreen); display: flex; align-items: center; justify-content: center; font-size: 21px; margin-bottom: 11px; } .tile__body { display: block; min-width: 0; } .tile__label { display: block; font-size: 18px; font-weight: 800; color: var(--text); } .tile__sub { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; } .tile__arrow { display: none; } /* Курсы при мечети. Светлая карточка, а не ещё одна тёмная плашка: тёмных подложек на главной уже две (намаз и блок доверия), третья перегружает экран. Акцент держат золотая линейка слева и золотые метки в списке предметов. */ .courses { display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: 20px; padding: 30px 34px; } .courses__kicker { display: inline-block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 10px; } .courses__title { font-family: 'Cormorant', Georgia, serif; font-size: 32px; font-weight: 600; color: var(--heading); } .courses__lead { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin-top: 12px; max-width: 560px; } .courses__facts { display: flex; flex-wrap: wrap; margin-top: 20px; } .courses__fact { background: var(--iconbg); border-radius: 12px; padding: 10px 16px; } .courses__factlabel { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .courses__factvalue { display: block; font-size: 15px; font-weight: 800; color: var(--text); margin-top: 2px; } .courses__cta { display: inline-block; margin-top: 22px; background: var(--brand-mid); color: var(--cream); text-decoration: none; font-weight: 800; padding: 12px 24px; border-radius: 9px; font-size: 15px; } .courses__side { border-left: 1px solid var(--borderSoft); padding-left: 30px; align-self: center; } .courses__sidehead { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 12px; } .courses__list { list-style: none; margin: 0; padding: 0; } .courses__item { position: relative; padding-left: 26px; font-size: 15px; color: var(--text); line-height: 1.5; } .courses__item + .courses__item { margin-top: 10px; } .courses__item::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--gold); font-size: 13px; line-height: 1.7; } /* Новости */ .newsgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .newscard { text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: block; transition: .2s; } /* Состояния карточки новости — блок 15. */ .newscard__thumb { display: block; height: 150px; position: relative; overflow: hidden; background: repeating-linear-gradient(135deg, var(--ph1), var(--ph1) 12px, var(--ph2) 12px, var(--ph2) 24px); } .newscard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .newscard__tag { position: absolute; top: 14px; left: 14px; background: var(--brand-mid); color: var(--cream); font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 100px; letter-spacing: .03em; } .newscard__body { display: block; padding: 20px 22px 24px; } .newscard__date { display: block; font-size: 13px; color: var(--datemut); font-weight: 600; } .newscard__title { display: block; font-size: 18px; font-weight: 800; color: var(--text); margin-top: 8px; line-height: 1.25; font-family: 'Manrope', system-ui, sans-serif; } .newscard__text { display: block; font-size: 14px; color: var(--muted); margin-top: 10px; line-height: 1.5; } .news-empty { border: 1px dashed var(--border); border-radius: 16px; padding: 28px 24px; color: var(--muted); font-size: 15px; grid-column: 1 / -1; } /* Мудрость дня — тихая вставка между новостями и блоком доверия. Ни карточки, ни подложки: две золотые линейки и набор Cormorant’ом курсивом. Это пауза в ритме главной, а не ещё один блок. */ .wisdom { /* padding-bottom 30→16 (пакет №4, блок A) — см. .section--tight */ max-width: var(--wrap); margin: 0 auto; padding: 8px var(--padx) 16px; } .wisdom__in { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 30px 24px; text-align: center; max-width: 900px; margin: 0 auto; } .wisdom__mark { display: block; font-family: 'Cormorant', Georgia, serif; font-size: 34px; line-height: .8; color: var(--gold); margin-bottom: 12px; } .wisdom__text { font-family: 'Cormorant', Georgia, serif; font-style: italic; font-size: 26px; line-height: 1.42; color: var(--heading); } .wisdom__src { margin-top: 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 700; } /* Блок доверия */ .trust { /* Ширина ровно как у содержимого секций: max-width один на всех, а боковой отступ держится и на узких экранах — иначе блок уезжал в край, пока секции стояли с полями. */ margin: 0 auto 44px; width: calc(100% - var(--padx) * 2); max-width: calc(var(--wrap) - var(--padx) * 2); background: linear-gradient(120deg, var(--brand-deep), var(--brand-mid)); border-radius: 20px; padding: 40px 44px; color: var(--on-hero); display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; align-items: center; } /* На тёмном фоне градиент блока почти сливается со страницей — держим край. */ .theme-dark .trust { box-shadow: inset 0 0 0 1px var(--border); } .theme-dark .prayer { box-shadow: inset 0 0 0 1px var(--border); } .trust__title { font-family: 'Cormorant', Georgia, serif; font-size: 30px; font-weight: 600; color: #fff; margin-bottom: 12px; } .trust__text { font-size: 15px; line-height: 1.6; color: var(--on-deep); } .trust__col { border-left: 1px solid rgba(201,162,73,.35); padding-left: 28px; } .trust__label { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--gold-lite); font-weight: 700; margin-bottom: 6px; } .trust__value { font-family: 'Cormorant', Georgia, serif; font-size: 34px; font-weight: 700; color: #fff; } .trust__value--sm { font-size: 24px; line-height: 1.15; } .trust__sub { font-size: 14px; color: var(--on-deep); margin-top: 4px; } /* ========================================================================== 9. Подвал ========================================================================== */ .sitefooter { background: var(--brand-deep); color: var(--on-deep); } .sitefooter__in { max-width: var(--wrap); margin: 0 auto; padding: 40px var(--padx) 32px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; } .sitefooter__brand { display: flex; align-items: center; margin-bottom: 14px; } .sitefooter__mark { display: block; width: 52px; flex: none; color: var(--gold); line-height: 0; } .sitefooter__mark svg { width: 100%; height: auto; display: block; } .sitefooter__name { font-family: 'Cormorant', Georgia, serif; font-size: 20px; color: #fff; font-weight: 700; } .sitefooter__about { font-size: 14px; line-height: 1.6; max-width: 340px; opacity: .85; } .sitefooter__label { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--gold-lite); font-weight: 700; margin-bottom: 14px; } .sitefooter__contacts { font-size: 15px; line-height: 2; } .sitefooter__contacts a { color: var(--on-deep); text-decoration: none; } .sitefooter__contacts a.tel { color: #fff; font-weight: 700; } /* Городской номер — не ссылка (микробатч 1.18.1, блок C): без кода города он не звонится, а код за медресе тема не выдумывает. Значит и выглядеть он ссылкой не должен — иначе по нему будут жать. */ .sitefooter__contacts .tel--plain { color: #fff; font-weight: 700; text-decoration: none; } .sitefooter__links { display: flex; flex-direction: column; font-size: 15px; } .sitefooter__links a { color: var(--on-deep); text-decoration: none; } .sitefooter__links a:hover { text-decoration: underline; } .sitefooter__links a.strong { color: #fff; font-weight: 700; } .vkblock { grid-column: 1 / -1; padding-top: 4px; } .vkblock__link { display: inline-block; color: var(--gold-lite); font-weight: 700; text-decoration: none; font-size: 15px; } .vkblock__link:hover { text-decoration: underline; } @media (min-width: 48.0625em) { .sitefooter__in { grid-template-columns: 1.4fr 1fr 1fr; } .vkblock { grid-column: 2 / -1; } } .sitefooter__legal { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--padx) 28px; font-size: 13px; opacity: .7; } /* ========================================================================== 10. Мобильная версия (брейкпоинт эталона — 768px) ========================================================================== */ /* На узком десктопе логотип уступает место меню: полный пункт «Сведения…» важнее пары пунктов кегля в названии. */ @media (max-width: 90em) { .brand { } .brand__mark { width: 56px; } .brand__name { font-size: 24px; } .brand__kicker { font-size: 11px; letter-spacing: .2em; } } .burger { width: 42px; height: 42px; border: 1px solid var(--burgerborder); background: var(--surface); border-radius: 11px; display: none; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; flex: none; } .burger span { width: 18px; height: 2px; background: var(--icongreen); border-radius: 2px; } .masthead { position: relative; } /* ПОРОГ СВЁРТКИ МЕНЮ В БУРГЕР — ОДИН НА ВСЕ ЯЗЫКИ, В `em` (пакет №5, D2). ------------------------------------------------------------------------ До пакета №5 порогов было три (ru 1024px, tt 1200px, ba 1600px) плюс calc()-интерполяция плотности: пункты BA/TT в одну строку не влезали, и порог им поднимали. Решение Антона 31.08 — разрешить пункту меню ПЕРЕНОС ТЕКСТА на вторую строку. Как только пункт может занять две строки, ряд садится на 64em на всех трёх языках, и вся языковая машинерия становится не нужна: её убрали, а не наслоили сверху. ⚠ Второй ряд ПУНКТОВ по-прежнему запрещён (§4): переносится текст ВНУТРИ пункта, сам ряд остаётся один (`flex-wrap: nowrap` у `.masthead__in` и у `.mainnav ul`). 🪤 Порог в `em`, а не в `px`. `em` в медиазапросе считается от БАЗОВОГО кегля браузера (настройка «Размер шрифта»), а не от font-size корня. Значит у посетителя с крупным шрифтом меню уходит под бургер раньше — ровно тогда, когда ряд перестаёт помещаться. На базовых 16px 64em = 1024px, то есть канон §4 сохранён буква в букву. Это же закрывает давний дефект «меню вылезает за край при системном увеличении текста» (§27, блок D). 🪤 Ниже 64em правило `white-space: normal` пунктам уже не нужно — в бургер-режиме они и так блочные; но переносы по слогам запрещены везде (`hyphens: none`, дефект пилота «Расписани-е», §4). */ /* Логотип не ужимается — но только в горизонтальном режиме, где за место спорит ряд меню (§27, блок D: знак отъедали до 94px). Ниже 64em это правило вредно: там меню под бургером, а на системном увеличении текста несжимаемое название выталкивало страницу вбок на телефоне. */ @media (min-width: 64em) { .brand { flex-shrink: 0; } } @media (max-width: 63.999em) { .burger { display: flex; } .mainnav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--border); padding: 8px 0; z-index: 50; } .mainnav.is-open { display: block; } .mainnav ul { display: block; } .mainnav a, .mainnav > ul > .menu-item-has-children > a { display: block; padding: 12px 20px; font-size: 15px; letter-spacing: normal; white-space: normal; max-width: none; line-height: 1.35; border-bottom: 1px solid var(--borderSoft); } .mainnav .sub-menu { display: block; position: static; min-width: 0; border: 0; border-radius: 0; box-shadow: none; padding: 0; background: transparent; } .mainnav .sub-menu a { padding-left: 36px; font-size: 14px; } } /* ГОСТ с увеличенным кеглем — тоже бургер (пакет №5, D2). ------------------------------------------------------------------------ В версии для слабовидящих `.a11y a { font-size: inherit }` поднимает пункты меню до 18px (шкала 1), 22,5px (2) и 27,9px (3). На третьей ступени ряд не помещается ни на одной ширине и выталкивал страницу в горизонтальную прокрутку — проверено и на коде пакета №4, дефект давний, приёмка его не видела (стенд врал, см. README стенда). Медиазапрос тут бессилен: `em` в нём считается от базового кегля браузера, а ГОСТ увеличивает кегль внутри страницы. Поэтому условие — селектор, а набор правил тот же, что и у порога выше. Две копии блока: объединить их нельзя, у медиазапроса и класса разная природа. */ .a11y[data-a11y-font="2"] .burger, .a11y[data-a11y-font="3"] .burger { display: flex; } .a11y[data-a11y-font="2"] .mainnav, .a11y[data-a11y-font="3"] .mainnav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--border); padding: 8px 0; z-index: 50; } .a11y[data-a11y-font="2"] .mainnav.is-open, .a11y[data-a11y-font="3"] .mainnav.is-open { display: block; } .a11y[data-a11y-font="2"] .mainnav ul, .a11y[data-a11y-font="3"] .mainnav ul { display: block; } .a11y[data-a11y-font="2"] .mainnav a, .a11y[data-a11y-font="3"] .mainnav a { display: block; padding: 12px 20px; letter-spacing: normal; white-space: normal; max-width: none; line-height: 1.35; border-bottom: 1px solid var(--borderSoft); } .a11y[data-a11y-font="2"] .mainnav .sub-menu, .a11y[data-a11y-font="3"] .mainnav .sub-menu { display: block; position: static; min-width: 0; border: 0; border-radius: 0; box-shadow: none; padding: 0; background: transparent; } .a11y[data-a11y-font="2"] .mainnav .sub-menu a, .a11y[data-a11y-font="3"] .mainnav .sub-menu a { padding-left: 36px; } .a11y[data-a11y-font="2"] .mainnav ul > li + li, .a11y[data-a11y-font="3"] .mainnav ul > li + li { margin-left: 0; } @media (max-width: 48em) { /* 🪤 Было `--padx: var(--padx-m)`. Косвенность (кастомное свойство, значение которого — var() на другое кастомное свойство) в старых движках разрешается ненадёжно, а --padx кормит паддинги ВСЕХ полос во всю ширину: верхней, шапки, полосы приёма, героя, секций, подвала. Стоит цепочке не разрешиться — объявление становится невалидным на этапе вычисления значения, паддинг падает в 0, и полосы схлопываются. Срабатывало только ниже 768px, то есть ровно на телефоне. Держим литерал: значение то же, цепочки нет. */ :root { --padx: 18px; } .only-desktop { display: none; } .only-mobile { display: block; } /* На телефоне полоса несёт три управляющих элемента — переключатель языков, слабовидящих и тему. Подпись «При ЦДУМ России» их только теснит: на крупном системном тексте «России» срывалось на вторую строку. Формулировка остаётся в первом экране, подвале и «О медресе», поэтому здесь её убираем целиком, а не сокращаем. */ .topbar__left { display: none; } .topbar__right { flex: 1 1 auto; justify-content: flex-end; } .topbar__in { padding: 8px var(--padx); font-size: 11px; } .topbar { font-size: 11px; } .topbar__left { } .topbar__right { } .themetoggle { width: 2.17em; height: 2.17em; font-size: 12px; } .masthead__in { padding: 14px var(--padx); } .brand { } .brand__mark { width: 46px; } .brand__kicker { font-size: 10px; letter-spacing: .18em; } .brand__name { font-size: 20px; } .banner__in { display: block; padding: 14px 18px; padding: 14px var(--padx); } .banner__glyph { display: none; } .banner__title { font-size: 14px; } .banner__sub { font-size: 12px; margin-top: 2px; } .banner__cta { display: inline-block; margin-top: 10px; padding: 8px 16px; font-size: 13px; } .hero { min-height: 260px; align-items: flex-end; } .hero::before { background: linear-gradient(180deg, rgba(15,61,41,.25) 0%, rgba(15,61,41,.8) 100%); } .hero__in { padding: 20px 18px; padding: 20px var(--padx); } .hero__badge { font-size: 10px; letter-spacing: .14em; margin-bottom: 8px; padding: 3px 9px; } .hero__title { font-size: 34px; } .hero__lead { font-size: 13px; line-height: 1.45; margin-top: 8px; } .hero__actions { margin-top: 16px; } .hero__cta { padding: 10px 18px; font-size: 14px; } .prayer { display: block; margin: 16px var(--padx); border-radius: 18px; padding: 18px 18px 8px; } .section { padding: 20px var(--padx) 4px; } .section__title { font-size: 24px; } .section__more { font-size: 13px; } .tiles { grid-template-columns: 1fr; gap: 10px; } .tile { border-radius: 15px; padding: 13px 16px; display: flex; align-items: center; } /* Гасить hover по ширине больше не нужно: блок 15 включает его только там, где есть указатель (@media hover: hover). */ .tile__glyph { width: 2em; height: 2em; font-size: 20px; margin-bottom: 0; flex: none; } .tile__body { flex: 1; } .tile__label { font-size: 16.5px; } .tile__sub { font-size: 12.5px; margin-top: 1px; } .tile__arrow { display: block; color: var(--gold); font-size: 20px; font-weight: 700; } .courses { grid-template-columns: 1fr; gap: 20px; border-radius: 18px; padding: 20px 18px; border-left-width: 3px; } .courses__title { font-size: 24px; } .courses__lead { font-size: 14px; margin-top: 8px; } .courses__facts { margin-top: 14px; } .courses__fact { padding: 8px 12px; } .courses__factvalue { font-size: 13.5px; } .courses__cta { margin-top: 16px; padding: 10px 18px; font-size: 14px; } .courses__side { border-left: 0; border-top: 1px solid var(--borderSoft); padding: 18px 0 0; } .courses__item { font-size: 14px; } .newsgrid { grid-template-columns: 1fr; gap: 14px; } .newscard { border-radius: 15px; } .newscard__thumb { height: 120px; } .newscard__tag { top: 12px; left: 12px; font-size: 11px; padding: 4px 10px; } .newscard__body { padding: 14px 16px 18px; } .newscard__date { font-size: 12px; } .newscard__title { font-size: 16px; margin-top: 6px; } .newscard__text { display: none; } .wisdom { padding: 4px var(--padx) 18px; } .wisdom__in { padding: 22px 4px; } .wisdom__mark { font-size: 26px; margin-bottom: 8px; } .wisdom__text { font-size: 20px; line-height: 1.38; } .wisdom__src { margin-top: 10px; font-size: 11px; } .trust { margin: 20px 16px; border-radius: 18px; padding: 22px 20px; display: block; } .trust__title { font-size: 22px; margin-bottom: 10px; } .trust__text { font-size: 13.5px; } .trust__cols { display: flex; margin-top: 18px; } .trust__col { flex: 1; min-width: 0; border-left: 0; padding-left: 0; background: rgba(201,162,73,.12); border-radius: 12px; padding: 12px 14px; } .trust__label { font-size: 11px; letter-spacing: .08em; margin-bottom: 2px; } .trust__value { font-size: 24px; } .trust__value--sm { font-size: 19px; margin-top: 2px; } .trust__sub { font-size: 11px; } .sitefooter__in { display: block; padding: 28px var(--padx) 22px; } .sitefooter__in > div + div { margin-top: 24px; } .sitefooter__legal { padding: 0 var(--padx) 22px; } } /* Узкий телефон (≤24em ≈ 384px): бейдж героя на ступень мельче. Пара «профессиональное образование» склеена неразрывным пробелом (гард висячего слова поднят до 40 — front-page.php) и обязана влезть в плашку ЦЕЛИКОМ: иначе неразрывная пара распирает контейнер и уводит страницу вбок — сага text-zoom, §18. На 10px/.14em ей нужно ~292px при 269px доступных; на 9px/.12em выходит ~254px. Замерено стендом. Правило отдельным блоком, а не вложенным медиазапросом: в этом файле все условия плоские, и старые движки с вложенностью не спорят. */ @media (max-width: 24em) { .hero__badge { font-size: 9px; letter-spacing: .12em; } } /* Десктоп: колонки блока доверия — соседи, а не обёртка. Первая строка — фолбэк движку, который не умеет display: contents: там обёртка останется одной ячейкой сетки, но колонки внутри неё встанут рядом, а не столбиком. В современном движке выигрывает вторая строка, и вид не меняется. */ @media (min-width: 48.0625em) { .trust__cols { display: flex; align-items: center; } .trust__cols { display: contents; } } /* ========================================================================== 10b. Базовая типографика внутренних страниц. Полноценные шаблоны (page/single/archive/sveden) — фаза B. ========================================================================== */ .page-head { margin-bottom: 22px; } .page-title { font-family: 'Cormorant', Georgia, serif; font-size: 42px; font-weight: 600; color: var(--heading); line-height: 1.08; } .entry { max-width: 820px; font-size: 16.5px; line-height: 1.7; color: var(--text); } .entry > * + * { margin-top: 1.1em; } .entry h2 { font-size: 30px; font-weight: 600; margin-top: 1.6em; } .entry h3 { font-size: 24px; font-weight: 600; margin-top: 1.4em; } .entry ul, .entry ol { padding-left: 1.4em; } .entry li + li { margin-top: .4em; } .entry a { color: var(--link); } .entry img { border-radius: 12px; } .entry blockquote { border-left: 3px solid var(--gold); padding-left: 18px; color: var(--muted); font-style: italic; } .entry table { border-collapse: collapse; width: 100%; } .entry th, .entry td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; } .entry th { background: var(--zebra); } @media (max-width: 48em) { .page-title { font-size: 28px; } .entry { font-size: 16px; } } /* ========================================================================== 12. Внутренние страницы: шапка раздела, карточки, таблицы, «Сведения», контакты, новости и статья. Геометрия и цвета — из эталона. ========================================================================== */ /* --- Шапка раздела (одна на все внутренние экраны эталона) --- */ .pagehead { background: linear-gradient(120deg, var(--brand-deep), var(--brand-mid)); color: #fff; border-bottom: 3px solid var(--gold); } .pagehead__in { max-width: var(--wrap); margin: 0 auto; padding: 24px var(--padx); } .pagehead__crumbs { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lite); font-weight: 700; margin-bottom: 6px; } .pagehead__crumbs a { color: var(--gold-lite); text-decoration: none; } .pagehead__crumbs a:hover { text-decoration: underline; } .pagehead__crumbs .sep { opacity: .55; margin: 0 2px; } .pagehead__title { font-family: 'Cormorant', Georgia, serif; font-size: 38px; font-weight: 700; line-height: 1; color: #fff; } /* --- Общая сетка внутренней страницы --- */ .pagebody { max-width: var(--wrap); margin: 0 auto; padding: 36px var(--padx) 44px; } .pagebody--tight { padding-bottom: 10px; } /* --- Карточка: базовый кирпич всех внутренних экранов --- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px 30px; } .card--flush { padding: 0; overflow: hidden; } .card__head { padding: 16px 22px; border-bottom: 1px solid var(--border); font-family: 'Cormorant', Georgia, serif; font-size: 24px; font-weight: 600; color: var(--heading); } .card__note { padding: 12px 22px 16px; font-size: 12.5px; color: var(--datemut); border-top: 1px solid var(--border); } .card--dark { background: linear-gradient(120deg, var(--brand-deep), var(--brand-mid)); border: 0; color: var(--on-hero); } .card--dark h2, .card--dark h3 { color: #fff; } /* --- Таблицы (TablePress и ручные): тёмная шапка, зебра, скролл на узком --- */ /* TablePress раскрашивает себя СВОИМИ css-переменными и в светлых тонах (#fff / #f9f9f9 / #111). Перебивать их правилами бесполезно — часть строк всё равно оставалась белой в тёмной теме. Поэтому переопределяем сами переменные плагина токенами темы: тогда таблица живёт в обеих темах, а режим слабовидящих со своими принудительными цветами не ломается. */ .entry .tablepress { --text-color: var(--text); --head-bg-color: var(--brand-deep); --head-text-color: #faf7f0; --odd-bg-color: var(--surface); --odd-text-color: var(--text); --even-bg-color: var(--zebra); --even-text-color: var(--text); --hover-bg-color: var(--iconbg); --hover-text-color: var(--text); --border-color: var(--borderSoft); } .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Таблице anywhere не нужен: она и так листается вбок, а внутри ячеек он рвал слова посреди («№ па/ры»). Возвращаем обычный перенос по словам. */ .tablewrap, .tablewrap * { overflow-wrap: break-word; } .tablewrap table, .entry table.tablepress { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; } .tablewrap thead th, .entry .tablepress thead th { background: var(--brand-deep); color: #faf7f0; font-weight: 700; text-align: left; padding: 12px 18px; border: 0; white-space: nowrap; } .tablewrap tbody td, .entry .tablepress tbody td { padding: 9px 18px; border: 0; border-top: 1px solid var(--borderSoft); } .tablewrap tbody td { color: var(--muted); } .tablewrap tbody td:first-child, .entry .tablepress tbody td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; } .tablewrap tbody tr:nth-child(even) { background: var(--zebra); } .entry .tablepress .row-hover tr:hover td { background: var(--iconbg); } .tablescroll-hint { display: none; padding: 8px 22px 0; font-size: 12.5px; color: var(--datemut); } /* Служебная ссылка «Изменить» — по паттерну каркасов edit_posts в «Сведениях»: приглушённо, с отступом, с явной пометкой. Живёт ВНЕ скролл-контейнера (см. nurul_pull_table_edit_link), поэтому не уезжает вместе с таблицей и не липнет к её рамке. */ .tbl-editlink { padding: 14px 22px 16px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--datemut); font-weight: 600; } .tbl-editlink a { color: var(--link); font-weight: 700; } .tbl-editlink__tag { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); } .a11y .tbl-editlink__tag { font-size: inherit; letter-spacing: normal; text-transform: none; } @media (max-width: 48em) { .tablescroll-hint { display: block; } } /* --- Гарнитура башкирской и татарской версий --------------------------- Manrope не покрывает семь из десяти спецглифов (ҡ ҙ ә ғ ң ҫ җ) — они уходили в системный DejaVu, и слово набиралось двумя гарнитурами. На /ba/ и /tt/ текстовая гарнитура целиком меняется на Inter: одна гарнитура в слове, швов нет по построению. Подробности выбора — в шапке блока Inter в assets/css/fonts.css. Заголовки НЕ трогаем: Cormorant покрывает все десять глифов (замерено), и серифная линия сайта на языковых версиях остаётся прежней. Русская версия сюда не попадает и остаётся эталоном пиксель-в-пиксель. Manrope оставлен в стеке вторым: редкие знаки latin-ext, которых в башкирском и татарском нет, подхватит он. */ html[lang^="ba"] body, html[lang^="tt"] body, html[lang^="ba"] .newscard__title, html[lang^="tt"] .newscard__title { font-family: 'Inter', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* --- Документы «Сведений» — карточки-ссылки ---------------------------- Разметку готовит inc/sveden-docs.php. Карточка живёт в текстовом потоке: золотой кикер с форматом и объёмом, название ссылкой, под ним пояснение. Значка формата фиксированного размера здесь намеренно нет — он не масштабируется при системном увеличении текста (см. §16 карты), а кикер растёт вместе со всем остальным. Пункты без файла остаются обычными пунктами списка: разный вид честно показывает, где файл уже есть, а где ещё нет. */ .card--sveden .entry .doclist { list-style: none; margin-left: 0; padding-left: 0; } .card--sveden .entry .doccard { display: block; position: relative; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 10px; padding: 13px 18px; margin: 0 0 10px; } .card--sveden .entry .doccard:last-child { margin-bottom: 0; } .card--sveden .entry .doccard__kicker { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 700; line-height: 1.4; margin-bottom: 3px; } .card--sveden .entry .doccard > a { font-weight: 700; color: var(--heading); text-decoration: none; line-height: 1.45; } .card--sveden .entry .doccard > a:hover { text-decoration: underline; } .card--sveden .entry .doccard__note { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.6; color: var(--muted); } /* В ГОСТ подложки и цветные акценты снимаются, остаётся контур; кикер возвращается в общую шкалу кегля — иначе он застынет на 12px. */ .a11y .card--sveden .entry .doccard { border: 2px solid var(--text); border-left: 2px solid var(--text); } .a11y .card--sveden .entry .doccard__kicker { font-size: inherit; letter-spacing: normal; text-transform: none; } .a11y .card--sveden .entry .doccard__note { font-size: inherit; } /* --- Таблицы «Сведений» → карточки записей на узком экране ------------- Разметку готовит inc/sveden-tables.php: каждой ячейке проставлен `data-label` с заголовком её колонки. Здесь только раскладка. На десктопе не меняется НИЧЕГО — правила живут внутри медиазапросов, и таблица остаётся таблицей: на 1280px колонкам хватает (44–815px, слова целые, замерено). Ужимаются они только на узком экране. Два порога, а не один: реестр на восемь колонок разваливается уже на планшете (~95px на колонку), а четырёхколоночный до 768px держится. Ниже 768px первый блок ловит и широкие тоже — они тоже `.dtable`. */ @media (max-width: 48em) { .entry .dtable table, .entry .dtable tbody, .entry .dtable tr, .entry .dtable td { display: block; width: auto; } .entry .dtable thead { display: none; } .entry .dtable table { border-collapse: separate; border: 0; } .entry .dtable tr { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; } .entry .dtable tr:last-child { margin-bottom: 0; } .entry .dtable td { border: 0; padding: 0; margin-top: 11px; } .entry .dtable td:first-child { margin-top: 0; } /* Подпись поля — бывший заголовок колонки */ .entry .dtable td::before { content: attr(data-label); display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 700; line-height: 1.4; margin-bottom: 3px; } .entry .dtable td[data-label=""]::before { display: none; } /* Якорь записи: короткая первая (или вторая) ячейка — заголовок карточки, подпись ему не нужна. Длинная ячейка заголовком НЕ становится: там смысл несёт именно подпись поля. */ .entry .dtable td[data-role="title"] { font-size: 17px; font-weight: 800; color: var(--text); line-height: 1.35; } .entry .dtable td[data-role="title"]::before { display: none; } /* Порядковый номер — мелкой строкой над заголовком, а не полем карточки */ .entry .dtable td[data-role="num"] { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--datemut); margin-bottom: 2px; } .entry .dtable td[data-role="num"]::before { display: none; } } /* Широкие реестры (шесть колонок и больше) — карточки уже с планшета */ @media (min-width: 48.0625em) and (max-width: 67.5em) { .entry .dtable--wide table, .entry .dtable--wide tbody, .entry .dtable--wide tr, .entry .dtable--wide td { display: block; width: auto; } .entry .dtable--wide thead { display: none; } .entry .dtable--wide table { border-collapse: separate; border: 0; } .entry .dtable--wide tr { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; } .entry .dtable--wide tr:last-child { margin-bottom: 0; } .entry .dtable--wide td { border: 0; padding: 0; margin-top: 11px; } .entry .dtable--wide td:first-child { margin-top: 0; } .entry .dtable--wide td::before { content: attr(data-label); display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 700; line-height: 1.4; margin-bottom: 3px; } .entry .dtable--wide td[data-label=""]::before { display: none; } .entry .dtable--wide td[data-role="title"] { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.35; } .entry .dtable--wide td[data-role="title"]::before { display: none; } .entry .dtable--wide td[data-role="num"] { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--datemut); margin-bottom: 2px; } .entry .dtable--wide td[data-role="num"]::before { display: none; } } /* --- Липкие шапка и первый столбец таблицы намаза ---------------------- Таблица месяца длинная (30 строк × 8 колонок), при прокрутке теряется, какой это день и какой намаз. Шапка липнет по вертикали, столбец «Число» — по горизонтали, угловая ячейка — по обеим осям. Только CSS, без скрипта. 🪤 Почему у обёртки появилась ВЫСОТА. `position: sticky` считается от ближайшего скролл-контейнера, а `.tablewrap` им уже является: при `overflow-x: auto` спецификация переводит `overflow-y: visible` в `auto`, и обёртка становится скролл-портом по ОБЕИМ осям. Замерено живьём: computed `overflow` = auto/auto. Но по вертикали она не прокручивалась (`clientHeight` = `scrollHeight` = 1332), поэтому `top: 0` был бы мёртвой строкой — липнуть не к чему. Высота даёт обёртке собственную вертикальную прокрутку, и шапка получает опору. Липнуть к окну страницы здесь нельзя в принципе: горизонтальная прокрутка таблицы и вертикальная прокрутка страницы не могут жить в одном скролл-порту. Шапка сайта не фиксированная (`position: fixed/sticky` в теме нет вовсе), поэтому компенсировать её высоту в `top` не нужно. `min()`/`clamp()` в max-height намеренно НЕ используются: базовый движок темы — Chromium 66–83 (§13, §16), а `min()` появился в 79. Обычные `vh` понимают все. */ .tablewrap--sticky { max-height: 76vh; } /* Скроллбары САМОГО контейнера — под тему. На тёмной теме нативный белый скроллбар посреди карточки читался чужеродной деталью. Скроллбар ОКНА не трогаем: это территория браузера и системы. Оба механизма нужны: `scrollbar-color` понимают Firefox и свежий Chromium, `::-webkit-scrollbar` — остальные вебкиты. Бегунок приглушённый, но различимый: невидимый скроллбар отнимает единственный признак того, что содержимое вообще прокручивается. */ .tablewrap--sticky { scrollbar-width: thin; scrollbar-color: var(--border) var(--surface); } .tablewrap--sticky::-webkit-scrollbar { width: 10px; height: 10px; } .tablewrap--sticky::-webkit-scrollbar-track { background: var(--surface); } .tablewrap--sticky::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 2px solid var(--surface); } .tablewrap--sticky::-webkit-scrollbar-thumb:hover { background: var(--datemut); } .tablewrap--sticky::-webkit-scrollbar-corner { background: var(--surface); } /* В версии для слабовидящих контраст важнее приглушённости */ .a11y .tablewrap--sticky { scrollbar-color: var(--text) var(--bg); } .a11y .tablewrap--sticky::-webkit-scrollbar-track { background: var(--bg); } .a11y .tablewrap--sticky::-webkit-scrollbar-thumb { background: var(--text); border-color: var(--bg); } .tablewrap--sticky .tablepress > thead > tr > th { position: -webkit-sticky; position: sticky; top: 0; z-index: 2; } .tablewrap--sticky .tablepress > tbody > tr > td.column-1 { position: -webkit-sticky; position: sticky; left: 0; z-index: 1; } /* Угловая ячейка липнет по обеим осям и лежит ВЫШЕ обеих полос: иначе при диагональной прокрутке столбец уезжает под шапку. */ .tablewrap--sticky .tablepress > thead > tr > th.column-1 { left: 0; z-index: 3; } /* Непрозрачность липких ячеек. TablePress красит `td` своими переменными, и тема их переопределяет — замерено во всех трёх режимах (светлая #fff/#f3eee2, тёмная #1a2820/#1f2e24, ГОСТ #000). Правило ниже повторяет ту же чётность явно, чтобы прозрачность липкой ячейки не зависела от чужого стиля: сквозь неё поехали бы соседние строки. Чётность — `nth-child`, как в зебре темы выше. Класса `row-alt` у этой таблицы НЕТ (он появляется только в режиме фильтра групп на /studentu/), и правило по нему стёрло бы зебру липкого столбца. */ .tablewrap--sticky .tablepress > tbody > tr:nth-child(odd) > td.column-1 { background-color: var(--odd-bg-color); } .tablewrap--sticky .tablepress > tbody > tr:nth-child(even) > td.column-1 { background-color: var(--even-bg-color); } /* Липкий столбец не должен съедать экран при системном увеличении текста. Ширину столбца задаёт самая широкая ячейка, а это ЗАГОЛОВОК «Число» с `white-space: nowrap` из общего правила таблиц: цифры дня узкие, а заголовок на 400% растягивал столбец до 54% экрана (замерено). В липком режиме снимаем nowrap и ограничиваем ширину — тот же приём, что у `.tblock--single` с колонками расписания. */ .tablewrap--sticky .tablepress > thead > tr > th.column-1 { white-space: normal; } .tablewrap--sticky .tablepress > thead > tr > th.column-1, .tablewrap--sticky .tablepress > tbody > tr > td.column-1 { max-width: 30vw; } /* Границы у липких ячеек отклеиваются при прокрутке (border схлопнут `border-collapse: collapse` и остаётся на соседе) — рисуем тенью. */ .tablewrap--sticky .tablepress > thead > tr > th { box-shadow: 0 2px 0 var(--gold); } .tablewrap--sticky .tablepress > tbody > tr > td.column-1 { box-shadow: 1px 0 0 var(--borderSoft); } .tablewrap--sticky .tablepress > thead > tr > th.column-1 { box-shadow: 1px 0 0 var(--gold), 0 2px 0 var(--gold); } /* --- Переключатель групп над расписанием ------------------------------- Разметку отдаёт сервер скрытой (hidden), показывает её скрипт темы: без JS страница остаётся с полной таблицей и без мёртвых кнопок. Колонки и строки гасятся классом (не атрибутом hidden) — у TablePress свои display у ячеек, атрибут они перебивают. */ .tfilter { display: flex; align-items: center; flex-wrap: wrap; padding: 14px 22px; border-bottom: 1px solid var(--border); } .tfilter__label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 700; } .tfilter__btns { display: flex; flex-wrap: wrap; } .tfilter__btn { font-family: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 100px; padding: 7px 15px; font-size: 13.5px; font-weight: 700; line-height: 1.2; transition: .15s; white-space: nowrap; hyphens: none; -webkit-hyphens: none; } .tfilter__btn:hover { border-color: var(--gold); color: var(--text); } .tfilter__btn.is-on { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--cream); } .theme-dark .tfilter__btn.is-on { border-color: var(--gold); } /* --- Расписание: дни недели одним разделителем ------------------------ Ячейки дня размечает inc/schedule-days.php, группировку по видимым строкам пересчитывает theme.js после каждой фильтрации. Здесь только вид: повтор дня гаснет, первая строка дня получает линию. Данные таблицы не трогаются: CSV один на все языки, медресе ведёт его сам. Полная и короткая формы лежат в разметке обе, подмена на узком экране презентационная. */ .daycell .day__short { display: none; } /* Повтор прячем ВИЗУАЛЬНО, но оставляем скринридеру: в таблице каждая строка обязана нести свой день, иначе со второй строки блока теряется, о каком дне речь. display:none и visibility:hidden это бы отняли. */ .daycell.is-daydup .day__full, .daycell.is-daydup .day__short { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Первая строка дня — линия-разделитель блока */ .tablewrap tbody tr.is-daystart > * { border-top: 2px solid var(--gold); } .tablewrap tbody tr.is-daystart:first-child > * { border-top: 0; } .daycell.is-daystart { font-weight: 800; } @media (max-width: 48em) { /* Порог тот же, что у мобильной раскладки таблицы (theme.js, mqMobile) */ .daycell .day__full { display: none; } .daycell .day__short { display: inline; } } .tblock .tf-off { display: none; } /* Своя зебра: у плагина полосатость считается по nth-child, а часть строк при фильтре скрыта — иначе две соседние видимые строки красятся одинаково. Цвета берём переменными плагина, поэтому тёмная тема и ГОСТ-режим, которые эти переменные переопределяют, продолжают работать сами. */ .tblock--single .entry .tablepress > tbody > tr > * { background-color: var(--odd-bg-color); } .tblock--single .entry .tablepress > tbody > tr.row-alt > * { background-color: var(--even-bg-color); } .tblock--single .tablewrap tbody tr:nth-child(even) { background: transparent; } .tblock--single .tablewrap tbody tr.row-alt { background: var(--zebra); } /* Одна группа в экран влезает — подсказка про боковой скролл не нужна. Шапка колонки при этом должна переноситься: «Группа 31-ЮО (ауд. 5)» в одну строку шире телефона и возвращает скролл, который мы убрали. */ .tblock--single .tablescroll-hint { display: none; } .tblock--single .tablewrap thead th, .tblock--single .entry .tablepress thead th { white-space: normal; } /* Осталось три колонки вместо пяти — освободившуюся ширину браузер сам между ними не раздаёт (проверено: и при table-layout: fixed тоже), таблица упиралась в 617px посреди карточки. Поэтому в этом режиме доли колонок задаём явно; последняя доля достаётся той группе, которая сейчас выбрана, какой бы по счёту она ни была. */ .tblock--single .tablewrap .column-1 { width: 18%; } .tblock--single .tablewrap .column-2 { width: 12%; } .tblock--single .tablewrap tr > *:not(.column-1):not(.column-2) { width: 70%; } /* На телефоне режима «Все» нет (см. theme.js) */ .tblock--mobile .tfilter__btn--all { display: none; } @media (max-width: 48em) { .tfilter { padding: 12px var(--padx-m); } .tfilter__label { width: 100%; } .tfilter__btn { padding: 8px 14px; font-size: 13px; } /* На телефоне «Понедельник» в одну строку занимает больше 18% */ .tblock--single .tablewrap .column-1 { width: 30%; } .tblock--single .tablewrap .column-2 { width: 14%; } .tblock--single .tablewrap tr > *:not(.column-1):not(.column-2) { width: 56%; } } /* --- Время намаза: карточка «Сегодня» --- */ .today { background: linear-gradient(120deg, var(--brand-deep), var(--brand-mid)); border-radius: 18px; padding: 24px 28px; color: #fff; } .today__head { display: flex; align-items: baseline; justify-content: space-between; } .today__title { font-family: 'Cormorant', Georgia, serif; font-size: 26px; font-weight: 700; color: #fff; } .today__where { font-size: 13px; color: var(--gold-lite); font-weight: 700; text-align: right; } .today__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 18px; } .today__cell { background: rgba(201,162,73,.12); border-radius: 12px; padding: 14px 12px; text-align: center; } .today__name { font-size: 13px; font-weight: 700; color: var(--on-deep); } .today__time { font-family: 'Cormorant', Georgia, serif; font-size: 26px; font-weight: 700; color: #fff; margin-top: 4px; } .today__note { margin-top: 14px; font-size: 13px; color: var(--on-deep); opacity: .85; } /* Ближайший намаз. Подсветка — только фон, контур и подпись: рамки и отступы у всех ячеек одинаковые, иначе сетка дёргалась бы раз в несколько часов сама по себе. */ .today__cell.is-next { background: rgba(201,162,73,.30); box-shadow: inset 0 0 0 1px var(--gold-lite); } .today__soon { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; /* Не золотом: подпись мелкая, а подложка подсветки сама золотистая — замер дал 3,39 против нужных 4,5. На светлом --on-hero выходит 4,78. */ text-transform: uppercase; color: var(--on-hero); } /* Плашка редактору: сегодняшнего дня в таблице нет. Посетитель её не видит — блока «Сегодня» для него просто не существует. */ .namaz-empty { border: 1px dashed var(--border); border-radius: 12px; padding: 14px 16px; color: var(--muted); font-size: 14px; } /* Переключатель месяцев годовой таблицы снят вместе с годовым режимом (микробатч 1.18.1): афиша ЦДУМ помесячная, в таблице всегда один текущий месяц. */ .pagenote { padding: 14px 0 0; color: var(--datemut); font-size: 13px; font-weight: 600; } /* --- «Сведения об образовательной организации»: 14 подразделов --- */ .sveden-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .sveden-card { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; transition: .2s; } /* Состояния карточки «Сведений» — блок 15. */ .sveden-card__num { font-family: 'Cormorant', Georgia, serif; font-size: 26px; font-weight: 700; color: var(--gold); line-height: 1; } .sveden-card__title { display: block; margin-top: 8px; font-size: 16px; font-weight: 800; color: var(--text); line-height: 1.35; } .sveden-card__state { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); } .sveden-legal { margin-top: 22px; font-size: 13.5px; color: var(--muted); line-height: 1.7; } /* --- Схема структуры и органов управления (/sveden/struct/) ------------- Повторяет бумажную схему медресе: слева высокая колонка «Ректор», справа столбец коллегиальных органов, связанных вертикалью и засечками-стрелками. Ни картинок, ни JS — сетка и псевдоэлементы. Первая колонка задана minmax(0, 260px), а НЕ 260px: при системном увеличении текста (до 400%, §16 карты) фиксированная колонка не сжимается ниже min-content длинного слова и утаскивает страницу в горизонтальную прокрутку. minmax(0, …) разрешает колонке стать уже содержимого — слово переносится (на body стоит overflow-wrap: anywhere), и переполнения не возникает. Просветы — grid-gap и margin'ы: flex-gap в теме запрещён (блок 14). */ .orgchart { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); column-gap: 28px; margin-top: 6px; } .orgchart__rector { display: grid; align-content: center; background: linear-gradient(150deg, var(--brand-deep), var(--brand-mid)); border-radius: 16px; padding: 24px; color: #fff; } .orgchart__kicker { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-lite); font-weight: 700; line-height: 1.4; } .orgchart__post { display: block; margin-top: 8px; font-family: 'Cormorant', Georgia, serif; font-size: 34px; font-weight: 700; line-height: 1.05; color: #fff; } .orgchart__person { display: block; margin-top: 8px; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--on-deep); } .orgchart__bodies { position: relative; list-style: none; margin: 0; padding: 0 0 0 26px; } /* Связующая вертикаль слева — линия у колонки «Ректор» с бумажной схемы */ .orgchart__bodies::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--gold); } .orgchart__item { position: relative; margin-bottom: 12px; } .orgchart__item:last-child { margin-bottom: 0; } /* Засечка и стрелка от вертикали к карточке. Отступ сверху в em, а не в px: при увеличении кегля засечка остаётся у первой строки названия. */ .orgchart__item::before { content: ''; position: absolute; left: -26px; top: 1.45em; width: 16px; height: 2px; background: var(--gold); } .orgchart__item::after { content: ''; position: absolute; left: -10px; top: 1.45em; width: 0; height: 0; margin-top: -5px; border-left: 8px solid var(--gold); border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .orgchart__card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 13px 18px; } .orgchart__name { display: block; font-size: 16px; font-weight: 800; color: var(--text); line-height: 1.35; } /* Каркас недостающих полей приказа № 831 — только под edit_posts. Посетитель видит схему чистой, без пустых строк. */ .orgchart__todo, .orgchart__hint { display: block; margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 12.5px; line-height: 1.5; color: var(--datemut); font-weight: 600; } .orgchart__todo-lead { color: var(--muted); font-weight: 700; } .orgchart__hint-tag { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); } .orgchart__rector .orgchart__hint { color: var(--on-deep); border-top-color: rgba(255, 255, 255, .28); } .orgchart__rector .orgchart__hint-tag { color: var(--gold-lite); } .orgchart__note { margin-top: 20px; font-size: 13.5px; color: var(--muted); line-height: 1.7; } /* Служебная подсказка редактору у пустой ленты новостей */ .news-empty__hint { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--datemut); font-weight: 600; } /* --- Контентные фотографии подразделов «Сведений» ---------------------- Снимки там иллюстративные (кнопка «Вызов персонала»): во всю ширину колонки фотография читается абстрактной текстурой. Правило живёт в теме, а не ручной правкой одного блока: медресе ведёт контент само и вернёт как было. */ .card--sveden .entry .wp-block-image { max-width: 440px; } .card--sveden .entry .wp-block-image img { width: 100%; height: auto; } /* Галерея сама раскладывает свои снимки — ограничение её не касается */ .card--sveden .entry .wp-block-gallery .wp-block-image { max-width: none; } /* --- Контакты --- */ .contacts { display: grid; grid-template-columns: 1fr 1.5fr; gap: 22px; align-items: start; } .contacts__col { display: flex; flex-direction: column; } .contacts .card { padding: 22px 24px; } .contacts__label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 8px; } .contacts__value { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.5; } .contacts__value a { text-decoration: none; } .contacts__tel { color: var(--heading); font-weight: 800; } .contacts__tel--plain { text-decoration: none; cursor: default; } .contacts__map { background: repeating-linear-gradient(135deg, var(--ph1), var(--ph1) 14px, var(--ph2) 14px, var(--ph2) 28px); border: 1px solid var(--border); border-radius: 16px; min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .contacts__pin { width: 46px; height: 46px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--gold); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px -8px rgba(0,0,0,.4); } .contacts__pin span { transform: rotate(45deg); color: var(--brand-deep); font-size: 18px; font-weight: 800; } /* 🪤 Подпись лежит НЕ на фоне темы, а на плейсхолдер-подложке (--ph1/--ph2, штриховка #E9E0CD). Она темнее и фона страницы, и карточек: приглушённый --datemut берёт там только 4,20 даже после правки токена. Здесь нужен основной цвет текста — это адрес, а не декоративная подпись. */ .contacts__maplabel { color: var(--text); font-size: 14px; font-weight: 700; } .contacts__map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; border-radius: 16px; } /* --- Лента новостей и постраничная навигация --- */ .newsfeed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .nav-links, .pagination .nav-links { display: flex; justify-content: center; align-items: center; padding: 28px 0 4px; font-size: 15px; font-weight: 800; } .pagination .page-numbers { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); color: var(--muted); display: flex; align-items: center; justify-content: center; text-decoration: none; } .pagination .page-numbers.current { background: var(--brand-mid); color: var(--cream); border-color: var(--brand-mid); } .pagination .page-numbers:hover:not(.current) { border-color: var(--gold); color: var(--heading); } .pagination .page-numbers.dots { border: 0; } /* --- Статья --- */ .article { max-width: 900px; margin: 0 auto; } .article__meta { display: flex; align-items: center; flex-wrap: wrap; } .article__tag { background: var(--brand-mid); color: var(--cream); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 100px; letter-spacing: .03em; } .article__date { font-size: 14px; color: var(--datemut); font-weight: 600; } .article__title { font-family: 'Cormorant', Georgia, serif; font-size: 40px; font-weight: 700; color: var(--heading); line-height: 1.1; margin-top: 14px; } .article__cover { margin-top: 22px; } .article__cover img { width: 100%; border-radius: 16px; display: block; } .article__cover--empty { min-height: 320px; border-radius: 16px; border: 1px solid var(--border); background: repeating-linear-gradient(135deg, var(--ph1), var(--ph1) 12px, var(--ph2) 12px, var(--ph2) 24px); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text); font-size: 13px; font-weight: 600; /* Тот же случай, что у подписи карты: текст на плейсхолдер-подложке. */ } /* Заглушку видит только редактор — подпись это проговаривает, чтобы никто не искал её потом на публичной странице. */ .article__cover--note { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); } .article .entry { max-width: none; margin-top: 24px; font-size: 16px; line-height: 1.75; } .backlink { display: inline-block; margin-top: 26px; background: var(--brand-mid); color: var(--cream); text-decoration: none; font-weight: 700; padding: 12px 24px; border-radius: 9px; font-size: 15px; } .vkbox { margin-top: 36px; } .vkbox__title { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 14px; } .vkbox__stub { border: 1px dashed var(--border); border-radius: 12px; padding: 22px 24px; color: var(--muted); font-size: 14px; line-height: 1.6; } /* --- Галерея --- */ .gallery-note { color: var(--muted); font-size: 15px; } /* --- Папки галереи (пакет №5, блок H) --- */ .folders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .folder { display: block; text-decoration: none; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; } .folder__thumb { display: block; position: relative; overflow: hidden; /* Пропорция 4:3 паддингом, а не aspect-ratio: свойство новее движков, на которые рассчитана тема (та же причина, что у .gtile__thumb). */ height: 0; padding-bottom: 75%; background: repeating-linear-gradient(135deg, var(--ph1), var(--ph1) 12px, var(--ph2) 12px, var(--ph2) 24px); } .folder__thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .folder__body { display: block; padding: 14px 16px 16px; } .folder__title { display: block; font-size: 17px; font-weight: 800; color: var(--text); line-height: 1.25; hyphens: none; -webkit-hyphens: none; overflow-wrap: break-word; } .folder__meta { display: block; margin-top: 5px; font-size: 13px; color: var(--datemut); font-weight: 600; } /* Группа фотографий одной новости внутри папки «Новости» */ .album { margin-bottom: 34px; } .album__title { font-family: 'Cormorant', Georgia, serif; font-size: 26px; font-weight: 700; color: var(--heading); } .album__title a { color: inherit; text-decoration: none; } .album__date { font-size: 13px; color: var(--datemut); font-weight: 600; margin: 4px 0 14px; } .crumbback { margin-bottom: 20px; font-size: 15px; font-weight: 700; } .crumbback a { color: var(--link); text-decoration: none; } @media (min-width: 48.0625em) { .folders { grid-template-columns: repeat(3, 1fr); gap: 18px; } } @media (min-width: 75em) { .folders { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 48em) { .folder { border-radius: 13px; } .folder__body { padding: 11px 13px 13px; } .folder__title { font-size: 15px; } .folder__meta { font-size: 12px; } .album { margin-bottom: 26px; } .album__title { font-size: 21px; } } /* Единая сетка галереи (пакет №4, блок E): свои фотографии страницы и все снимки из новостей в одном ритме. Просвет — grid gap: он работает и в старых движках, ловушка §16 была у flex-gap, а не у сетки. */ .gallerygrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .gtile { display: block; text-decoration: none; margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .gtile__thumb { display: block; position: relative; overflow: hidden; /* Квадрат держим паддингом, а не aspect-ratio: свойство новее движков, на которые тема рассчитана, и плитки съезжали бы в ноль высоты. */ height: 0; padding-bottom: 75%; background: repeating-linear-gradient(135deg, var(--ph1), var(--ph1) 12px, var(--ph2) 12px, var(--ph2) 24px); } .gtile__thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .gtile__cap { display: block; padding: 12px 14px 14px; font-size: 13.5px; line-height: 1.35; color: var(--muted); /* Подпись — название новости; переносим по словам, но не рвём слово */ hyphens: none; -webkit-hyphens: none; overflow-wrap: break-word; } .gtile--plain { border-style: dashed; } @media (max-width: 62.5em) { .gallerygrid { grid-template-columns: repeat(3, 1fr); gap: 14px; } } @media (max-width: 48em) { .gallerygrid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .gtile { border-radius: 12px; } .gtile__cap { padding: 9px 11px 11px; font-size: 12.5px; } } .entry .wp-block-gallery { margin-top: 10px; } .entry .wp-block-gallery img { border-radius: 12px; } .entry .wp-block-image img { border-radius: 12px; } /* --- Контент Gutenberg внутри карточки --- */ .card > .entry { max-width: none; } .entry .wp-block-group.has-background { border-radius: 16px; padding: 26px 28px; } .entry .wp-block-columns { gap: 22px; } .entry .wp-block-separator { border: 0; border-top: 1px solid var(--border); margin: 28px 0; } .entry figcaption { font-size: 13px; color: var(--datemut); margin-top: 6px; } @media (max-width: 62.5em) { .sveden-grid { grid-template-columns: repeat(2, 1fr); } .newsfeed { grid-template-columns: repeat(2, 1fr); } .contacts { grid-template-columns: 1fr; } .today__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 48em) { .pagehead__in { padding: 18px var(--padx); } .pagehead__title { font-size: 28px; } .pagebody { padding: 20px var(--padx) 32px; } .card { padding: 20px 18px; } .card--flush { padding: 0; } .sveden-grid, .newsfeed { grid-template-columns: 1fr; } /* Схема управления на телефоне — вертикальный список карточек: связей не рисуем, порядок сам всё и рассказывает. */ .orgchart { display: block; } .orgchart__rector { margin-bottom: 14px; padding: 18px; } .orgchart__post { font-size: 28px; } .orgchart__bodies { padding-left: 0; } .orgchart__bodies::before, .orgchart__item::before, .orgchart__item::after { display: none; } /* На телефоне фотография занимает колонку целиком — это её ширина */ .card--sveden .entry .wp-block-image { max-width: none; } .today { padding: 18px 18px; } .today__head { display: block; } .today__where { text-align: left; margin-top: 4px; } .today__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .today__time { font-size: 22px; } .article__title { font-size: 28px; } .article__cover--empty { min-height: 200px; } .contacts__map, .contacts__map iframe { min-height: 260px; } .tablewrap thead th, .tablewrap tbody td, .entry .tablepress thead th, .entry .tablepress tbody td { padding: 8px 12px; } } /* ========================================================================== 11. Версия для слабовидящих (ГОСТ Р 52872). Включается кнопкой в шапке; под шапкой разворачивается панель настроек: кегль, цветовая схема, интервал, изображения. Каждый выбор пишется в localStorage и переживает переходы между страницами и новые визиты (ТЗ §3). Применяется до отрисовки инлайн-скриптом в . ========================================================================== */ .a11ybar { display: none; } .a11y .a11ybar { display: block; background: var(--surface); border-bottom: 2px solid var(--border); } .a11ybar__in { max-width: var(--wrap); margin: 0 auto; padding: 14px var(--padx); display: flex; flex-wrap: wrap; align-items: center; } .a11ybar__group { display: flex; align-items: center; } .a11ybar__label { font-weight: 700; font-size: 15px; } .a11ybar__btns { display: flex; } .a11ybar button { font-family: inherit; cursor: pointer; border: 2px solid var(--border); background: var(--bg); color: var(--text); border-radius: 8px; padding: 6px 12px; font-weight: 700; line-height: 1.2; } .a11ybar button[aria-pressed="true"] { border-color: var(--heading); background: var(--heading); color: var(--bg); } .a11y .a11ybar button { background: var(--bg); color: var(--text); border-color: var(--text); } .a11y .a11ybar button[aria-pressed="true"] { background: var(--text); color: var(--bg); } .a11ybar__off { margin-left: auto; } .a11ybar__off button { border-color: var(--heading); } /* --- Кегль и межбуквенный интервал --- */ .a11y { --k: 1; --sp: normal; } .a11y[data-a11y-font="2"] { --k: 1.25; } .a11y[data-a11y-font="3"] { --k: 1.55; } .a11y[data-a11y-space="2"] { --sp: .06em; } .a11y[data-a11y-space="3"] { --sp: .14em; } .a11y body { font-size: calc(18px * var(--k)); line-height: 1.7; letter-spacing: var(--sp); } /* Кегль по всему документу подчиняется одной шкале: «версия для слабовидящих» намеренно уплощает типографику. */ .a11y p, .a11y li, .a11y td, .a11y th, .a11y div, .a11y span, .a11y a, .a11y button, .a11y figcaption, .a11y address { font-size: inherit; letter-spacing: inherit; } .a11y h1, .a11y .pagehead__title, .a11y .hero__title, .a11y .page-title, .a11y .article__title { font-size: calc(30px * var(--k)); line-height: 1.2; } .a11y h2, .a11y .section__title, .a11y .card__head, .a11y .today__title, .a11y .trust__title, /* «Ректор» — корневой узел схемы; в этой версии он тоже должен быть крупнее подписи над ним, иначе Cormorant оптически проигрывает набранной капителью надписи «единоличный исполнительный орган». */ .a11y .orgchart__post { font-size: calc(24px * var(--k)); line-height: 1.25; } .a11y h3 { font-size: calc(21px * var(--k)); } .a11y .a11ybar__in { font-size: 16px; letter-spacing: normal; } .a11y .a11ybar button, .a11y .a11ybar__label { font-size: 16px; letter-spacing: normal; } /* --- Цветовые схемы --- */ .a11y[data-a11y-scheme="wb"] { --bg: #FFFFFF; --surface: #FFFFFF; --text: #000000; --muted: #000000; --datemut: #000000; --heading: #000000; --navtext: #000000; --link: #000000; --border: #000000; --borderSoft: #000000; --zebra: #FFFFFF; --iconbg: #FFFFFF; --icongreen: #000000; --burgerborder: #000000; /* Тёмные подложки эталона в этой версии становятся фоном страницы, */ --brand-deep: #FFFFFF; --brand-mid: #FFFFFF; --brand-lite: #FFFFFF; /* а «золотые» надписи поверх них — обычным текстом. */ --gold: #000000; --gold-lite: #000000; --on-deep: #000000; --cream: #000000; --on-hero: #000000; --ph1: #FFFFFF; --ph2: #FFFFFF; } .a11y[data-a11y-scheme="bw"] { --bg: #000000; --surface: #000000; --text: #FFFFFF; --muted: #FFFFFF; --datemut: #FFFFFF; --heading: #FFFFFF; --navtext: #FFFFFF; --link: #FFFFFF; --border: #FFFFFF; --borderSoft: #FFFFFF; --zebra: #000000; --iconbg: #000000; --icongreen: #FFFFFF; --burgerborder: #FFFFFF; /* Тёмные подложки эталона в этой версии становятся фоном страницы, */ --brand-deep: #000000; --brand-mid: #000000; --brand-lite: #000000; /* а «золотые» надписи поверх них — обычным текстом. */ --gold: #FFFFFF; --gold-lite: #FFFFFF; --on-deep: #FFFFFF; --cream: #FFFFFF; --on-hero: #FFFFFF; --ph1: #000000; --ph2: #000000; } .a11y[data-a11y-scheme="bb"] { --bg: #F7F3D6; --surface: #F7F3D6; --text: #4D4B43; --muted: #4D4B43; --datemut: #4D4B43; --heading: #4D4B43; --navtext: #4D4B43; --link: #4D4B43; --border: #4D4B43; --borderSoft: #4D4B43; --zebra: #F7F3D6; --iconbg: #F7F3D6; --icongreen: #4D4B43; --burgerborder: #4D4B43; /* Тёмные подложки эталона в этой версии становятся фоном страницы, */ --brand-deep: #F7F3D6; --brand-mid: #F7F3D6; --brand-lite: #F7F3D6; /* а «золотые» надписи поверх них — обычным текстом. */ --gold: #4D4B43; --gold-lite: #4D4B43; --on-deep: #4D4B43; --cream: #4D4B43; --on-hero: #4D4B43; --ph1: #F7F3D6; --ph2: #F7F3D6; } /* Плоская подача: никаких градиентов, теней и подложек-полосок. */ .a11y .hero, .a11y .trust, .a11y .prayer, .a11y .today, .a11y .card--dark, .a11y .banner, .a11y .pagehead, .a11y .brand__mark, .a11y .sitefooter__mark, .a11y .contacts__map, .a11y .newscard__thumb, .a11y .article__cover--empty, .a11y .contacts__pin, .a11y .orgchart__rector { background-image: none !important; background: var(--brand-deep); } .a11y .newscard__thumb, .a11y .article__cover--empty, .a11y .contacts__map { background: var(--surface); } .a11y .hero::before { background: transparent; } .a11y .hero { min-height: 0; height: auto; padding: 28px 0; } .a11y .hero__title { text-shadow: none; } .a11y * { box-shadow: none !important; } .a11y .tile:hover, .a11y .newscard:hover, .a11y .sveden-card:hover { transform: none; } .a11y a { text-decoration: underline; } .a11y .cta, .a11y .hero__cta, .a11y .banner__cta, .a11y .backlink, .a11y .a11ybar button { text-decoration: none; } .a11y .card, .a11y .tile, .a11y .newscard, .a11y .sveden-card, .a11y .today, .a11y .trust, .a11y .prayer, .a11y .orgchart__rector, .a11y .orgchart__card { border: 2px solid var(--border); } /* Схема управления в этой версии — контур и линии цветом схемы. Подложка «Ректора» уже снята выше вместе с остальными плашками эталона (грабля §17: --gold-lite в Ч/Б становится чёрным, и золотая подложка давала бы чёрное на чёрном). Вертикаль, засечки и стрелки берут --gold, а он в каждой схеме равен цвету текста, поэтому отдельных правил на них не нужно — нужен только контраст у «Ректора», который в этой версии перестаёт быть тёмной плашкой. */ .a11y .orgchart__rector { background: var(--bg); } .a11y .orgchart__todo, .a11y .orgchart__hint { border-top: 2px dashed var(--text); } /* Изображения: включены / выключены / чёрно-белые */ .a11y[data-a11y-img="off"] img, .a11y[data-a11y-img="off"] .hero, .a11y[data-a11y-img="off"] .newscard__thumb, .a11y[data-a11y-img="off"] .gtile__thumb, .a11y[data-a11y-img="off"] .folder__thumb, .a11y[data-a11y-img="off"] .article__cover { display: none; } /* Без картинок плитка галереи без подписи пуста — прячем и её */ .a11y[data-a11y-img="off"] .gtile--plain { display: none; } .a11y[data-a11y-img="bw"] img, .a11y[data-a11y-img="bw"] .hero { filter: grayscale(1); } /* В теме есть жёстко заданные #fff поверх тёмных подложек эталона. В версии для слабовидящих подложек нет, поэтому цвет текста задаётся одной схемой на весь документ — иначе такие надписи пропадают. */ .a11y * { color: var(--text) !important; } .a11y .a11ybar button[aria-pressed="true"] { color: var(--bg) !important; } /* Плашки намаза: золотистая подложка задана rgba и схеме не подчиняется */ .a11y .today__cell { background: var(--bg); border: 1px solid var(--text); } /* Ближайший намаз в ГОСТ — ТОЛЩИНОЙ КОНТУРА, не подложкой: подача здесь плоская, а золотой тинт на Ч/Б превращается в грязное пятно (та же причина, по которой в этой версии снимаются золотые подложки, §18). */ .a11y .today__cell.is-next, .a11y .prayer__row.is-next { background: transparent; /* Именно outline, а не border: он не участвует в раскладке вовсе. Толщина рамки меняла бы высоту строки, и список дёргался бы сам по себе, когда ближайший намаз переходит на следующий. */ outline: 2px solid var(--text); outline-offset: -2px; } .a11y .today__soon, .a11y .prayer__soon { opacity: 1; } /* Переменные TablePress в этой версии — строго по выбранной схеме */ .a11y .entry .tablepress { --text-color: var(--text); --odd-bg-color: var(--bg); --even-bg-color: var(--bg); --odd-text-color: var(--text); --even-text-color: var(--text); --head-bg-color: var(--bg); --head-text-color: var(--text); --hover-bg-color: var(--bg); --hover-text-color: var(--text); --border-color: var(--text); } /* Подписи полей в карточках «Сведений». 🪤 Псевдоэлемент не попадает в шкалу кегля этой версии: список `.a11y p, .a11y li, .a11y td…` перечисляет элементы, а `::before` в нём не значится — подпись оставалась 12px рядом с 28px текста. Плюс капитель с разрядкой здесь противопоказана: подача должна быть плоской, а подпись у «Материально-технического обеспечения» — это полторы строки заглавных. */ .a11y .entry .dtable td::before { font-size: inherit; letter-spacing: normal; text-transform: none; } /* Липкие шапка и столбец таблицы намаза в этой версии. 🪤 Выше стоит `.a11y * { box-shadow: none !important }` — оно стирает разделители липких ячеек, и при прокрутке строки наезжают друг на друга без единой линии. Возвращаем их адресно: `!important` против `!important` решается специфичностью, и эти селекторы её берут. Цвет — из палитры схемы (--gold в ГОСТ равен цвету текста), контраст не задавлен. */ .a11y .tablewrap--sticky .tablepress > thead > tr > th { box-shadow: 0 2px 0 var(--text) !important; } .a11y .tablewrap--sticky .tablepress > tbody > tr > td.column-1 { box-shadow: 2px 0 0 var(--text) !important; } .a11y .tablewrap--sticky .tablepress > thead > tr > th.column-1 { box-shadow: 2px 0 0 var(--text), 0 2px 0 var(--text) !important; } /* Прокручиваемая область получает видимый фокус: без этого клавиатурный пользователь не понимает, что стрелки сейчас листают таблицу. */ .tablewrap--sticky:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .a11y .tablewrap--sticky:focus-visible { outline: 3px solid var(--text); } /* Шапка таблиц в этой версии — не тёмная плашка, а строка с линейкой */ .a11y .tablewrap thead th, .a11y .entry thead th { background: var(--bg); border-bottom: 2px solid var(--text); } .a11y .tablewrap tbody tr:nth-child(even), .a11y .entry tbody tr:nth-child(even) { background: var(--bg); } /* Плашки-кнопки — контурные, чтобы не терять контраст в любой схеме */ .a11y .cta, .a11y .hero__cta, .a11y .banner__cta, .a11y .backlink { background: var(--bg); color: var(--text); border: 2px solid var(--text); } /* Декоративные значки в этой версии не нужны */ .a11y .tile__glyph, .a11y .banner__glyph, .a11y .contacts__pin, .a11y .tile__arrow { display: none; } @media (max-width: 48em) { .a11ybar__in { padding: 12px var(--padx); } .a11ybar__off { margin-left: 0; } } /* ========================================================================== 12b. Переключатель языков — выпадающий список (Настройщик → «Языки сайта»). Три чипа в ряд съедали ширину утилитарной полосы; теперь там одна кнопка с текущим языком, а список раскрывается по ней. Без JS кнопка скрыта, а список показан обычным рядом — страница остаётся рабочей. ========================================================================== */ .langsw { position: relative; } .langsw__btn { display: flex; align-items: center; font-family: inherit; cursor: pointer; border: 1px solid rgba(207,224,212,.4); background: transparent; color: var(--on-deep); border-radius: 6px; padding: 4px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; } .langsw__btn:hover { color: var(--gold-lite); border-color: var(--gold-lite); } .langsw__caret { margin-left: 4px; font-size: 9px; opacity: .8; } .langsw.is-open .langsw__btn { color: var(--brand-deep); background: var(--gold-lite); border-color: var(--gold-lite); } /* Без JS — простой ряд языков, как было */ .langsw__list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; } .langsw__list > li + li { margin-left: 2px; } .langsw__item { display: block; padding: 3px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--on-deep); opacity: .65; line-height: 1.3; white-space: nowrap; } .langsw__item:hover { opacity: 1; color: var(--gold-lite); } .langsw__item.is-on { opacity: 1; color: var(--brand-deep); background: var(--gold-lite); } /* С JS — раскрывающийся список под кнопкой */ .langsw.is-js .langsw__list { display: block; position: absolute; right: 0; top: 100%; margin-top: 6px; z-index: 70; min-width: 168px; padding: 6px 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 18px 40px -18px rgba(15,61,41,.55); } .langsw.is-js .langsw__list > li + li { margin-left: 0; } /* Класс с display перебивает браузерное [hidden] { display: none }, и правило-заплатка обязано быть НЕ СЛАБЕЕ его по специфичности — иначе список висит раскрытым. */ .langsw .langsw__list[hidden], .langsw.is-js .langsw__list[hidden] { display: none; } .langsw.is-js .langsw__item { padding: 10px 16px; border-radius: 0; opacity: 1; font-size: 14px; letter-spacing: normal; text-transform: none; color: var(--text); font-weight: 600; } .langsw.is-js .langsw__item:hover { background: var(--iconbg); color: var(--heading); } .langsw.is-js .langsw__item.is-on { background: transparent; color: var(--heading); font-weight: 800; cursor: default; } .langsw.is-js .langsw__item.is-on::before { content: "✓ "; color: var(--gold); } /* ГОСТ-версия: контур вместо подложек, крупная зона нажатия. Золотые подложки в этой схеме становятся чёрными (--gold-lite = #000), и кнопка выходила чёрным прямоугольником с чёрной же надписью. */ .a11y .langsw.is-open .langsw__btn, .a11y .langsw__item.is-on { background: var(--bg); } .a11y .langsw__btn { border: 2px solid var(--text); color: var(--text); padding: 8px 12px; font-size: 15px; } .a11y .langsw.is-js .langsw__list { background: var(--bg); border: 2px solid var(--text); } .a11y .langsw.is-js .langsw__item { font-size: 16px; padding: 12px 16px; } .a11y .langsw__item { border: 1px solid var(--text); opacity: 1; text-decoration: none; } .a11y .langsw.is-js .langsw__item { border: 0; } .a11y .langsw.is-js .langsw__item.is-on { background: var(--bg); } @media (max-width: 48em) { .langsw__btn { padding: 4px 7px; font-size: 11px; } .langsw.is-js .langsw__list { min-width: 150px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ========================================================================== 13. Система костюмов — общий каркас. Гардероб: Будни (база) · Пост · Праздник. Костюм включается КЛАССОМ НА (`costume-fast` / `costume-holiday`, плюс `costume-kadr`) — его ставит сервер по календарю слотов (inc/costume.php). 🪤 В ГОСТ-режиме класс СНИМАЕТСЯ скриптом, а не перекрывается стилями. Отсюда правило вёрстки: всё, что рисует костюм, живёт под `.costume-fast` / `.costume-holiday`, а базовый вид элемента обязан быть самодостаточным. Так полоса костюма в ГОСТ-режиме остаётся читаемой служебной строкой (сухур и ифтар — это функция, а не декор), но теряет весь орнамент и всё золото разом. Полоса — ЕДИНСТВЕННЫЙ элемент, который костюм добавляет в DOM. Всё остальное — фоны, тени, контуры и псевдоэлементы: раскладка от костюма не сдвигается ни на пиксель (CLS 0). ========================================================================== */ .cstrip { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); } .cstrip__in { max-width: var(--wrap); margin: 0 auto; padding: 10px var(--padx); text-align: center; } /* Строки полосы кладём друг под друга обычным margin, а не flex-gap: встроенный WebView без сервисов Google gap не знает (блок 14). */ .cstrip__in > * + * { margin-top: 4px; } /* Служебная строка Поста — данные, а не украшение: гротеск, не антиква. */ .cstrip__line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; font-size: 15px; font-weight: 600; } .cstrip__line > * + * { margin-left: 8px; } .cstrip__t { font-weight: 800; } .cstrip__dot { opacity: .55; } .cstrip__greet { font-family: 'Cormorant', Georgia, serif; font-size: 20px; font-weight: 700; line-height: 1.25; } .cstrip__kadr { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } @media (max-width: 48em) { .cstrip__in { padding: 8px var(--padx); } .cstrip__line { font-size: 14px; } .cstrip__greet { font-size: 16px; } .cstrip__kadr { font-size: 11px; } } /* ========================================================================== 13a. Костюм «Пост» — Рамадан. ПРИНЦИП: УБАВИТЬ. Слой глубже и тише базы; сайт на месяц становится сдержаннее, чтобы утро Праздника было чем вспыхнуть. Анимаций костюм не добавляет ни одной — ни при каких настройках движения. ПАЛИТРА: только токены темы плюс ДВА производных значения — одна более глубокая ступень брендового зелёного (--fast-deep) и одна приглушённая ступень золота (--fast-gold). Новых оттенков нет. СЛОИ: звёздное поле в фоне страницы, строгий геометрический орнамент в утилитарной полосе и в полосе костюма, золотая линейка под шапкой, хиляль со звёздами в углу героя, разделители секций «линия со звездой по центру», приглушённо-золотой кант карточек. ГЕОМЕТРИЯ НЕ МЕНЯЕТСЯ: только фоны, цвета рамок и абсолютные псевдоэлементы. Толщины границ те же, отступы те же — CLS 0. 🪤 Всё живёт под классом `.costume-fast` на : в ГОСТ-режиме класс снимается скриптом, и элементы возвращаются к базовому виду сами. Поэтому базовый вид полосы костюма обязан быть самодостаточным. ========================================================================== */ .costume-fast { /* ------------------------------------------------------------------ ПРИГЛУШЕНИЕ ДЕСАТУРАЦИЕЙ БАЗЫ (пакет №7, блок H). До пакета №7 Пост читался как «ночная версия Будней»: сверху ложилась вуаль в 2%, а зелень и золото оставались полной насыщенности. Получалось темнее — но не тише. Пост же длится тридцать дней и должен звучать НА ТОН НИЖЕ, чтобы утро Праздника было чем вспыхнуть. Приглушаем не серым слоем поверх (он гасит и текст, и фотографии, и контраст), а самими токенами фона: у зелени и золота срезана насыщенность, светлота оставлена ПРЕЖНЕЙ до десятой доли процента. Отсюда два следствия: контрасты почти не двигаются (проверено стендом), а разница видна боковым зрением — падает громкость, не яркость. Зелень заодно уведена на 12° к сине-зелёному: холоднее, как предрассветные сумерки. Монохрома нет — тон остался. зелень: hsl 154° 60% → 166° 27% (светлота та же) золото: hsl 41° 49% → 41° 24% фон: hsl 42° 50% → 165° 12% ТЕКСТОВЫЕ токены (--text, --muted, --heading, --on-deep, --on-hero, --icongreen, --datemut) НЕ трогаются вовсе: десатурируется фон, а не буквы. 🪤 Насыщенный акцент остаётся РОВНО В ТРЁХ местах — кнопка «Поступить в медресе», строка сухур/ифтар и декор фазы Кадр. Для них заведены `--gold-full` и `--gold-lite-full`: полное золото нужно уметь позвать после того, как основное приглушено. ------------------------------------------------------------------ */ --gold-full: #c19a49; --gold-lite-full: #e9c877; --brand-deep: #1c302b; --brand-mid: #29453e; --brand-lite: #34574d; --gold: #a29068; --gold-lite: #caba96; /* Ступень глубже нового brand-deep и ещё тише золото. */ --fast-deep: #13201d; --fast-gold: #9d8e6c; /* Вуаль поверх фона делает светлую тему «предрассветной» — холоднее и тише. 2%, не больше: на 3,5% контраст --muted к фону падал до 4,45 и переставал брать AA. Замерено, а не на глаз. */ --fast-veil: rgba(19,32,29,.02); --fast-line: rgba(157,142,108,.42); --fast-edge: rgba(157,142,108,.30); --fast-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%231c302b' fill-opacity='.03'%3E%3Cpath transform='translate(18 30) scale(0.55)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(92 14) scale(0.4)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(128 72) scale(0.6)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(54 100) scale(0.45)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(108 130) scale(0.5)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(24 118) scale(0.35)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3C/g%3E%3C/svg%3E"); --fast-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath transform='scale(.875)' fill='%239d8e6c' fill-opacity='.75' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3C/svg%3E"); --fast-geo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cg fill='none' stroke='%239d8e6c' stroke-opacity='.22' stroke-width='1'%3E%3Cpath d='M60 13l7 7-7 7-7-7z'/%3E%3Cpath d='M0 20h14M106 20h14'/%3E%3C/g%3E%3Cg fill='%239d8e6c' fill-opacity='.16'%3E%3Ccircle cx='30' cy='20' r='1.2'/%3E%3Ccircle cx='90' cy='20' r='1.2'/%3E%3C/g%3E%3C/svg%3E"); --fast-hero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='140'%3E%3Cg transform='translate(96 8) scale(3.6)' fill='none' stroke='%23caba96' stroke-opacity='.55' stroke-width='.45'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z'/%3E%3C/g%3E%3Cg fill='%23caba96' fill-opacity='.45'%3E%3Cpath transform='translate(24 44) scale(.7)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(62 96) scale(.5)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(150 108) scale(.6)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3C/g%3E%3C/svg%3E"); } /* Фоновые токены светлой темы: та же светлота, срезанная насыщенность. Отдельным правилом с `:not(.theme-dark)` — иначе оно перебило бы тёмную палитру: `.costume-fast` идёт в файле ПОЗЖЕ `.theme-dark`, а вес у них одинаковый. */ .costume-fast:not(.theme-dark) { --bg: #f4f6f6; --iconbg: #ecf0ef; --zebra: #e9edec; --border: #d5dcda; --borderSoft: #e5e9e8; --ph1: #d7dfdc; --ph2: #ced7d4; } .costume-fast.theme-dark { --bg: #141918; --surface: #1d2523; --iconbg: #273230; --zebra: #222b29; --border: #2e3937; --borderSoft: #272f2e; --ph1: #222b29; --ph2: #283230; } /* Кадр — последние десять ночей. Меняются ТОЛЬКО переменные: фон ещё на ступень глубже, звёзд больше и они ярче. Ни одного нового правила. С пакета №7 сюда же вернулось ПОЛНОЕ золото: декор Кадра — один из трёх насыщенных акцентов Поста. */ .costume-fast.costume-kadr { /* Полное золото — один из трёх насыщенных акцентов Поста. */ --fast-gold: #c19a49; --fast-veil: rgba(19,32,29,.04); --fast-line: rgba(193,154,73,.60); --fast-edge: rgba(193,154,73,.42); --fast-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%231c302b' fill-opacity='.055'%3E%3Cpath transform='translate(18 30) scale(0.55)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(92 14) scale(0.4)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(128 72) scale(0.6)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(54 100) scale(0.45)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(108 130) scale(0.5)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(24 118) scale(0.35)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(70 44) scale(0.4)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(146 116) scale(0.45)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(40 74) scale(0.35)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(120 34) scale(0.5)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(84 150) scale(0.4)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(4 88) scale(0.3)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3C/g%3E%3C/svg%3E"); } .costume-fast.theme-dark { --fast-veil: rgba(0,0,0,.16); --fast-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23caba96' fill-opacity='.07'%3E%3Cpath transform='translate(18 30) scale(0.55)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(92 14) scale(0.4)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(128 72) scale(0.6)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(54 100) scale(0.45)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(108 130) scale(0.5)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(24 118) scale(0.35)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3C/g%3E%3C/svg%3E"); } .costume-fast.theme-dark.costume-kadr { --fast-veil: rgba(0,0,0,.26); --fast-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23caba96' fill-opacity='.13'%3E%3Cpath transform='translate(18 30) scale(0.55)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(92 14) scale(0.4)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(128 72) scale(0.6)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(54 100) scale(0.45)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(108 130) scale(0.5)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(24 118) scale(0.35)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(70 44) scale(0.4)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(146 116) scale(0.45)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(40 74) scale(0.35)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(120 34) scale(0.5)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(84 150) scale(0.4)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3Cpath transform='translate(4 88) scale(0.3)' d='M8 0l1.4 6.6L16 8l-6.6 1.4L8 16l-1.4-6.6L0 8l6.6-1.4z'/%3E%3C/g%3E%3C/svg%3E"); } /* Фон страницы: звёздное поле поверх вуали. Тайл 160x160, вес байты. */ .costume-fast body { background-image: var(--fast-field), linear-gradient(var(--fast-veil), var(--fast-veil)); background-repeat: repeat, no-repeat; background-position: left top, left top; background-size: 160px 160px, 100% 100%; } /* Утилитарная полоса: глубже и с редким геометрическим орнаментом. */ .costume-fast .topbar { background-color: var(--fast-deep); background-image: var(--fast-geo); background-repeat: repeat; background-position: center; } /* Линейка под шапкой: обычная граница уступает место приглушённо-золотой. Рисуем фоном, а не border-image — правило переживает смену темы и не трогает остальные стороны; толщина та же 1px, раскладка не двигается. */ .costume-fast .masthead { border-bottom-color: transparent; background-image: linear-gradient(90deg, transparent 0%, var(--fast-line) 16%, var(--fast-line) 84%, transparent 100%); background-repeat: no-repeat; background-size: 100% 1px; background-position: bottom left; } /* Герой: холоднее и глубже, в верхней зоне — тонкий хиляль со звёздами. 🪤 ХИЛЯЛЬ ЖИВЁТ В КОНТЕЙНЕРЕ, НЕ В ПОЛОСЕ ГЕРОЯ (пакет №7, блок G2). Был `.hero::after` с отступом от КРАЯ ЭКРАНА — и на 1920 хиляль уезжал за правую границу колонки текста (край экрана 1905, колонка кончается на 1793), а на мобильном его вовсе перебрасывало ВНИЗ, под горизонт, в кроны деревьев. Канон один на все ширины: верхняя зона героя, над горизонтом, в стороне от минарета. Отсчёт от контейнера это и даёт — ровно так же считается место пилюли. */ .costume-fast .hero::before { background: linear-gradient(90deg, rgba(19,32,29,.90) 0%, rgba(19,32,29,.62) 45%, rgba(19,32,29,.22) 100%); } .costume-fast .hero__in::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background-image: var(--fast-hero); background-repeat: no-repeat; background-position: right var(--padx) top 0; background-size: 200px 140px; /* Тонкий золотой штрих поверх ФОТОГРАФИИ пропадает: затемнение героя идёт слева направо, и справа фон светлый. Тень по контуру делает хиляль читаемым на любом кадре и ничего не сдвигает. Движок без filter просто покажет хиляль без ореола. */ filter: drop-shadow(0 0 3px rgba(19,32,29,.85)); pointer-events: none; } /* Разделители секций: тонкая линия с одной звездой по центру. Псевдоэлемент абсолютный и живёт внутри верхнего паддинга секции (44px) — ничего не сдвигает. */ .costume-fast .section, .costume-fast .sitefooter { position: relative; } .costume-fast .section + .section::before, .costume-fast .sitefooter::before { content: ""; position: absolute; top: 0; left: var(--padx); right: var(--padx); height: 14px; pointer-events: none; background-image: var(--fast-star), linear-gradient(90deg, transparent 0%, var(--fast-line) 8%, var(--fast-line) 46%, transparent 46%, transparent 54%, var(--fast-line) 54%, var(--fast-line) 92%, transparent 100%); background-repeat: no-repeat, no-repeat; background-position: center center, center center; background-size: 14px 14px, 100% 1px; } .costume-fast .sitefooter::before { top: 12px; } /* Кант карточек — цвет, не толщина: рамка остаётся 1px, ничего не пересчитывается. */ .costume-fast .tile, .costume-fast .card { border-color: var(--fast-edge); } /* АКЦЕНТ 1 из 3: кнопка целевого действия. Приглушается ВСЁ, кроме призыва поступить: в приглушённом сайте единственное яркое пятно и работает указателем. Остальные золотые плашки — полоса приёма, «Версия для слабовидящих», кнопка языка — остаются тише вместе с базой (пакет №7, блок H). */ .costume-fast .hero__cta { background: var(--gold-full); } /* --- Полоса костюма в режиме Поста --- */ .costume-fast .cstrip { background-color: var(--fast-deep); background-image: var(--fast-geo); background-repeat: repeat; background-position: center; color: var(--cream); border-bottom-color: rgba(157,142,108,.35); } /* АКЦЕНТ 2 из 3: строка сухур/ифтар. Времена — единственное, ради чего человек открывает сайт в Рамадан, поэтому цифры звучат полным золотом, а не приглушённым (пакет №7, блок H). */ .costume-fast .cstrip__t { color: var(--gold-lite-full); } /* АКЦЕНТ 3 из 3: надпись фазы Кадр — в кадровые ночи --fast-gold и есть полное золото. */ .costume-fast .cstrip__kadr { color: var(--fast-gold); } .costume-fast .cstrip__greet { color: var(--cream); } /* --- Служебная строка на странице намаза --- */ .fastline { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; margin-bottom: 16px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 12px; font-size: 15px; font-weight: 700; color: var(--text); } .fastline > * + * { margin-left: 8px; } .costume-fast .fastline { border-color: var(--fast-edge); background-color: rgba(157,142,108,.06); } .costume-fast .fastline .cstrip__t { color: var(--icongreen); } /* Та же строка внутри карточки намаза на главной: там тёмно-зелёная подложка, и базовые «тёмный текст на светлой рамке» не читаются. Специфичность .prayer .fastline--onprayer (0,3,0) намеренно выше костюмного .costume-fast .fastline (0,2,0) — иначе костюм перекрасил бы строку обратно под светлый фон, и порядок правил в файле начал бы значить больше, чем смысл. */ .prayer .fastline--onprayer { margin: 0 0 12px; padding: 8px 12px; border-color: rgba(201,162,73,.35); background-color: rgba(201,162,73,.10); font-size: 14px; color: var(--on-hero); } /* Времена сухура и ифтара — акцент 2 из 3 (пакет №7, блок H): полное золото и здесь, внутри карточки намаза на главной. */ .prayer .fastline--onprayer .cstrip__t { color: var(--gold-lite-full, var(--gold-lite)); } .prayer .fastline--onprayer .cstrip__dot { opacity: .5; } @media (max-width: 48em) { /* Костюм обязан читаться и на 360px — это главная претензия к прежнему. Хиляль уменьшается, но НЕ исчезает; орнамент, линейка, поле и полоса остаются на месте. */ /* На телефоне бейдж «Духовное профессиональное образование» тянется почти во всю ширину, и место ровно в углу занято. Раньше хиляль из-за этого уезжал ВНИЗ — под горизонт, в кроны деревьев, рядом с кнопкой. Теперь он остаётся сверху, но мельче и на ступеньку ниже бейджа: справа от заголовка там чистое небо (пакет №7, блок G2). */ .costume-fast .hero__in::after { background-position: right 6px top 46px; background-size: 78px 54px; /* Ореол вдвое сильнее: справа от заголовка самый светлый кусок фото, без ореола тонкий штрих читается только вблизи. */ filter: drop-shadow(0 0 4px rgba(19,32,29,.95)) drop-shadow(0 0 12px rgba(19,32,29,.6)); } .costume-fast .section + .section::before, .costume-fast .sitefooter::before { left: var(--padx-m); right: var(--padx-m); } } /* ========================================================================== 13b. Костюм «Праздник» — Ураза, Курбан, 1 сентября, выпуск. ПРИНЦИП: ПРИБАВИТЬ. Градус — «пиджак», а не «фрак»: нарядно, светло, без крикливости. Костюм ОДИН на все праздники: символики конкретного дня в нём нет вовсе, различается только строка поздравления из слота. МОТИВ: татаро-башкирский растительный орнамент Волго-Уральской традиции — тюльпан-лалә, трилистник, побеги. Ни гириха, ни луны: геометрия и полумесяц — язык костюма Поста, и путать их нельзя. Рисунок в файлах ВРЕМЕННЫЙ: кускар лентой рисуется отдельным тактом и придёт готовыми SVG. На нынешнем отлаживается геометрия. ───────────────────────────────────────────────────────────────────── ДВА РАЗНЫХ ПРИЁМА, КОТОРЫЕ НЕЛЬЗЯ ПУТАТЬ (пакет №7, блок I). 1. ЛЕНТА — строка. Повтор ТОЛЬКО по X, читаемая, непрозрачность 55% (тёмная тема 72%). Места применения ровно три: • верхняя утилитарная полоса, по нижнему краю; • полоса над подвалом; • кайма полосы поздравления (сверху и снизу). 2. ПАТТЕРН-ПОДЛОЖКА — фон. Повтор в ОБЕ стороны, непрозрачность 7% (тёмная 8%) — правило «не выше 8%» из блока F. Место применения ровно одно: фон страницы (`body`). До пакета №7 в обоих местах стоял один и тот же тайл, отчего праздничный сайт читался как обои. Теперь это два разных рисунка с разным ритмом: у ленты мотив идёт ровной строкой с шагом 160px, у подложки — редкими россыпями с шагом 220px. ───────────────────────────────────────────────────────────────────── КОНТРАКТ МАСШТАБА. `background-size` задаётся ЯВНО и в пикселях, высота фиксирована, повтор — `repeat-x`. Лишняя высота полосы уходит в воздух, узор НЕ растягивается под неё. Отсюда главное следствие: полосы разной высоты на одной странице (верхняя 48px, полоса поздравления ~86px, полоса над подвалом 38px) дают ОДИН И ТОТ ЖЕ масштаб узора. Никаких `contain`, `cover` и `auto` в костюме. ───────────────────────────────────────────────────────────────────── ОДНА ТОЧКА ПОДКЛЮЧЕНИЯ МОТИВА — блок `.costume-holiday` ниже. Все рисунки лежат отдельными файлами в `assets/img/holiday/` с явными именами. Следующий такт (кускар) меняет ТОЛЬКО содержимое файлов: ни одного правила вёрстки трогать не придётся. Это пункт приёмки. ───────────────────────────────────────────────────────────────────── ИЕРАРХИЯ ПРАЗДНИЧНОГО ЭКРАНА — что вспыхивает первым: 1) СТРОКА ПОЗДРАВЛЕНИЯ — на первом экране это второй по величине кегль после заголовка героя (30px против 62px; заголовок раздела 32px лежит уже ниже сгиба). Антиква, тёмным по кремовому, между двумя лентами — единственное такое пятно на всей странице; 2) ЛЕНТА — золото 55%, три места, ровный ритм; 3) ОСТАЛЬНОЕ ЗОЛОТО — канты карточек и кнопки; с пакета №7 тише: сплошное кольцо `0 0 0 1px` снято, свечение убавлено 16% → 10%. До этого всё звучало одной громкостью, и «главный день года» ничем не отличался от нарядной страницы. БЮДЖЕТ ЗОЛОТА: не больше 15% площади экрана на любом вьюпорте. Поэтому лента поздравления — светлая, с золотой каймой, а не сплошное золотое поле: сплошная золотая полоса одна съедала бы до десятой части экрана телефона. ГЕОМЕТРИЯ НЕ МЕНЯЕТСЯ: свечение карточек даётся box-shadow и контуром, а не утолщением рамки; орнамент — фоны и псевдоэлементы. ========================================================================== */ .costume-holiday { --hol-gold: #c19a49; --hol-lite: #e9c877; --hol-glow: rgba(193,154,73,.10); /* --- ЕДИНСТВЕННАЯ ТОЧКА ПОДКЛЮЧЕНИЯ МОТИВА ---------------------- */ --hol-ribbon: url("/wp-content/themes/nurul-islam/assets/img/holiday/ribbon.svg"); --hol-pattern: url("/wp-content/themes/nurul-islam/assets/img/holiday/pattern.svg"); --hol-corner-top: url("/wp-content/themes/nurul-islam/assets/img/holiday/corner-top.svg"); --hol-corner-bot: url("/wp-content/themes/nurul-islam/assets/img/holiday/corner-bottom.svg"); --hol-vign: url("/wp-content/themes/nurul-islam/assets/img/holiday/vignette.svg"); --hol-flour: url("/wp-content/themes/nurul-islam/assets/img/holiday/flourish.svg"); --hol-spark: url("/wp-content/themes/nurul-islam/assets/img/holiday/sparks.svg"); /* Раппорты. Меняются вместе с файлами — и больше нигде. */ --hol-ribbon-w: 160px; --hol-ribbon-h: 38px; --hol-pattern-sz: 220px; } .costume-holiday.theme-dark { --hol-glow: rgba(233,200,119,.10); --hol-ribbon: url("/wp-content/themes/nurul-islam/assets/img/holiday/ribbon-dark.svg"); --hol-pattern: url("/wp-content/themes/nurul-islam/assets/img/holiday/pattern-dark.svg"); } /* Фон страницы: ПАТТЕРН-ПОДЛОЖКА, повтор в обе стороны, 7%. */ .costume-holiday body { background-image: var(--hol-pattern); background-repeat: repeat; background-position: left top; background-size: var(--hol-pattern-sz) var(--hol-pattern-sz); } /* ЛЕНТА, место 1: верхняя утилитарная полоса, по нижнему краю. */ .costume-holiday .topbar { background-image: var(--hol-ribbon); background-repeat: repeat-x; background-position: center bottom; background-size: var(--hol-ribbon-w) var(--hol-ribbon-h); } /* ЛЕНТА, место 2: полоса над подвалом. Высота контейнера равна высоте раппорта — лишнего воздуха здесь не нужно. */ .costume-holiday .sitefooter { position: relative; } .costume-holiday .sitefooter::before { content: ""; position: absolute; top: 10px; left: 0; right: 0; height: var(--hol-ribbon-h); background-image: var(--hol-ribbon); background-repeat: repeat-x; background-position: center top; background-size: var(--hol-ribbon-w) var(--hol-ribbon-h); pointer-events: none; } /* Золотая линейка под шапкой — ярче, чем в Посте: Праздник прибавляет. */ .costume-holiday .masthead { border-bottom-color: transparent; background-image: linear-gradient(90deg, transparent 0%, var(--hol-gold) 14%, var(--hol-lite) 50%, var(--hol-gold) 86%, transparent 100%); background-repeat: no-repeat; background-size: 100% 2px; background-position: bottom left; } /* Разделители секций: линия с растительной виньеткой по центру. */ .costume-holiday .section { position: relative; } .costume-holiday .section + .section::before { content: ""; position: absolute; top: -4px; left: var(--padx); right: var(--padx); height: 24px; pointer-events: none; background-image: var(--hol-vign), linear-gradient(90deg, transparent 0%, var(--hol-gold) 8%, var(--hol-gold) 42%, transparent 42%, transparent 58%, var(--hol-gold) 58%, var(--hol-gold) 92%, transparent 100%); background-repeat: no-repeat, no-repeat; background-position: center center, center center; background-size: 56px 24px, 100% 1px; opacity: .75; } /* Герой: ажурные скобы, мягкое сияние и искры. 🪤 ДЕКОР СЧИТАЕТСЯ ОТ КОНТЕЙНЕРА, НЕ ОТ КРАЯ ЭКРАНА (пакет №7, блок G1). Было: скоба лежала на `.hero::after` с отступом 18px от края полосы, а пилюля «Духовное профессиональное образование» — от контейнера (край экрана + 40px поля). Две системы координат сходятся ровно на одной ширине: на 1920 колонка отодвинута на 113px и всё в порядке, а на 1280 и 1480 колонка прижата к краю — и скоба перечёркивала пилюлю насквозь. Теперь обе считаются от `.hero__in`, то есть их взаимное положение одинаково на любой ширине. И «по месту»: верхняя скоба переехала налево→направо. Верхний левый угол героя занят пилюлей всегда и на всех ширинах — спорить за него бессмысленно; справа сверху чистое небо. Искры сдвинуты левее скобы, чтобы не тесниться с ней. */ .costume-holiday .hero__in::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 0; background-image: var(--hol-corner-top), var(--hol-corner-bot), var(--hol-spark), radial-gradient(120% 90% at 78% 22%, rgba(233,200,119,.16) 0%, rgba(233,200,119,0) 62%); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-position: right var(--padx) top 0, right var(--padx) bottom 0, right calc(var(--padx) + 120px) top 0, center; background-size: 90px 90px, 90px 90px, 240px 160px, 100% 100%; /* Искры — только opacity, медленным циклом. Ни одного пикселя раскладки: анимируется прозрачность, не размер и не позиция. */ animation: nurul-hol-spark 5.5s ease-in-out infinite; } @keyframes nurul-hol-spark { 0%, 100% { opacity: .62; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .costume-holiday .hero__in::before { animation: none; opacity: .8; } } /* Кант карточек. Ступень 3 иерархии — САМАЯ ТИХАЯ: сплошное золотое кольцо снято (пакет №7, блок I), осталась та же рамка 1px цветом и мягкая тень. Толщина рамки прежняя — свет даёт тень, не геометрия. */ .costume-holiday .tile, .costume-holiday .card, .costume-holiday .today, .costume-holiday .banner, .costume-holiday .wisdom { border-color: var(--hol-gold); box-shadow: 0 8px 26px var(--hol-glow); } @media (hover: hover) { /* 🪤 Тач-устройству hover «залипает»: эффект только там, где указатель действительно наводится. Длительность и кривая — общие токены темы. */ .costume-holiday .tile:hover { box-shadow: 0 0 0 1px var(--hol-lite), 0 10px 30px rgba(193,154,73,.20); } } /* Кнопки: золотой градиент с тонкой внутренней обводкой. */ .costume-holiday .cta, .costume-holiday .hero__cta, .costume-holiday .banner__cta { background-image: linear-gradient(180deg, var(--hol-lite) 0%, var(--hol-gold) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.38); } /* Кавычки мудрости — орнаментальные: росчерк за глифом, сам глиф на месте. */ .costume-holiday .wisdom__mark { background-image: var(--hol-flour); background-repeat: no-repeat; background-position: center; background-size: 72px 24px; } /* --- ЛЕНТА, место 3: кайма полосы поздравления --------------------- */ /* Ступень 1 иерархии. Поздравление — главное, что человек должен прочитать в праздничное утро: крупнее прежнего в 1,3 раза, с воздухом под ленту сверху и снизу. Высота полосы больше высоты раппорта — лишнее уходит в воздух, узор не тянется (контракт масштаба). */ .costume-holiday .cstrip { background-color: var(--cream); background-image: var(--hol-ribbon), var(--hol-ribbon); background-repeat: repeat-x, repeat-x; background-position: center top, center bottom; background-size: var(--hol-ribbon-w) var(--hol-ribbon-h), var(--hol-ribbon-w) var(--hol-ribbon-h); color: var(--brand-deep); border-bottom-color: var(--hol-gold); } .costume-holiday .cstrip__in { padding-top: calc(var(--hol-ribbon-h) + 8px); padding-bottom: calc(var(--hol-ribbon-h) + 8px); } .costume-holiday .cstrip__greet { color: var(--brand-deep); font-size: 30px; line-height: 1.2; } @media (max-width: 48em) { /* Костюм обязан читаться и на 360px — но верхняя скоба здесь снята: бейдж «Духовное профессиональное образование» тянется почти во всю ширину, и скоба обводила бы его рамкой. Нижний правый угол свободен, там скоба и остаётся; искры и сияние на месте. */ .costume-holiday .hero__in::before { background-image: var(--hol-corner-bot), var(--hol-spark), radial-gradient(120% 90% at 78% 22%, rgba(233,200,119,.16) 0%, rgba(233,200,119,0) 62%); background-repeat: no-repeat, no-repeat, no-repeat; background-position: right 8px bottom 8px, right 10px top 14px, center; background-size: 62px 62px, 170px 112px, 100% 100%; } .costume-holiday .section + .section::before { left: var(--padx-m); right: var(--padx-m); } /* На телефоне лента УПРОЩЁННАЯ и мельче: 160px раппорта на 360px экрана — это два с небольшим повтора, мотив перестаёт читаться строкой. Масштаб снова задан явно и одинаков во всех трёх местах. 🪤 Адрес файла здесь ЛИТЕРАЛОМ, а не `var(--hol-ribbon-m)`: var() в значении кастомного свойства эта тема уже роняла (§2, грабля 7), и тёмная тема всё равно потребовала бы отдельного правила — её `.costume-holiday.theme-dark` весит больше (0,2,0 против 0,1,0). */ .costume-holiday { --hol-ribbon: url("/wp-content/themes/nurul-islam/assets/img/holiday/ribbon-mobile.svg"); --hol-ribbon-w: 120px; --hol-ribbon-h: 30px; } .costume-holiday.theme-dark { --hol-ribbon: url("/wp-content/themes/nurul-islam/assets/img/holiday/ribbon-mobile-dark.svg"); } .costume-holiday .cstrip__greet { font-size: 21px; } } /* ========================================================================== 13c. Лента костюма и текст НЕ ПЕРЕСЕКАЮТСЯ (пакет №7, блок F). ПРАВИЛО НА БУДУЩЕЕ, а не разовая заплатка: орнаментальная лента и текст никогда не лежат друг на друге. Паттерн-подложка под текстом допустима — но только очень тихая (не выше 8% непрозрачности) и с пересчитанным контрастом на ИТОГОВОМ фоне, вместе с узором. Что было. Узор верхней полосы рисовался фоном всей `.topbar` и шёл насквозь: у Поста горизонтальный штрих `--fast-geo` приходится ровно на середину строки и перечёркивал «г. Октябрьский, Республика Башкортостан» и «При ЦДУМ России» — буквы читались как зачёркнутые. У Праздника лента-побег проходила под теми же словами и сквозь кнопку языка. Почему подложка, а не отдельная зона. Высота полосы — 48px, из них текст занимает середину; свободной горизонтальной полосы, куда уместить тайл 40px, в ней нет. Отдать ленте свою зону можно было бы только надставив полосу — а костюму запрещено менять геометрию (CLS 0). Поэтому текстовым блокам дана собственная подложка цветом самой полосы: лента идёт по свободной середине и краям и заходит за текст, как за табличку. 🪤 Подложка — `background-color` + `box-shadow` с растяжкой, а НЕ padding: тень не участвует в раскладке, поэтому просветы и высота полосы остаются прежними до пикселя. В ГОСТ-режиме ничего этого нет: там класс костюма снимается со ещё до отрисовки, то есть орнамента под текстом не существует вовсе. ========================================================================== */ .costume-fast { --topbar-bed: var(--fast-deep); } .costume-holiday { --topbar-bed: var(--brand-deep); } .costume-fast .topbar__left > span, .costume-holiday .topbar__left > span { background-color: var(--topbar-bed); box-shadow: 0 0 0 4px var(--topbar-bed); border-radius: 2px; } /* Кнопка языка прозрачна и обведена контуром — лента шла прямо сквозь буквы «RU». Растяжки тут не нужно: границы кнопки достаточно. 🪤 `:not(.is-open)` обязателен — у раскрытого списка кнопка золотая, и без исключения костюм перекрасил бы её обратно в цвет полосы. */ .costume-fast .langsw:not(.is-open) .langsw__btn, .costume-holiday .langsw:not(.is-open) .langsw__btn, .costume-fast .themetoggle, .costume-holiday .themetoggle { background-color: var(--topbar-bed); } /* ========================================================================== 14. Совместимость: раскладка без flex-gap. Подтверждено на Huawei P60 Pro без сервисов Google: встроенный WebView (Telegram in-app, системный просмотрщик) не знает gap во flex — полоса приёма схлопывалась, герой наезжал. В полноценном браузере того же телефона всё было ровно. Поэтому у flex-контейнеров темы gap снят СОВСЕМ, а просветы заданы margin'ами: они работают одинаково в любом движке, и вид в свежих браузерах не меняется (сверено попиксельно). Grid-раскладки не тронуты — grid-gap старые движки знают. @supports (gap: …) здесь намеренно НЕ используется: движки Chromium 66–83 разбирают свойство gap (оно у них работает в grid), поэтому проверка вернула бы «поддерживается» ровно там, где flex-gap не работает, и фолбэк был бы отключён именно на проблемных движках. ========================================================================== */ /* --- Строчные контейнеры: просвет между соседями --- */ .topbar__in > * + * { margin-left: 16px; } .topbar__left > * { margin-right: 22px; } .topbar__left > *:last-child { margin-right: 0; } .topbar__right > * + * { margin-left: 20px; } .cta > * + * { margin-left: 7px; } .masthead__in > * + * { margin-left: 24px; } .brand > * + * { margin-left: 16px; } .banner__in > * + * { margin-left: 24px; } .banner__glyph { margin-right: 16px; } /* просвет внутри .banner__left */ .hero__actions > * + * { margin-left: 14px; } .prayer__head > * + * { margin-left: 16px; } .section__head > * + * { margin-left: 20px; } .sitefooter__brand > * + * { margin-left: 12px; } .today__head > * + * { margin-left: 16px; } .article__meta > * + * { margin-left: 14px; } .langsw > * + * { margin-left: 2px; } .a11ybar__group > * + * { margin-left: 10px; } .a11ybar__btns > * + * { margin-left: 6px; } .nav-links > * + *, .pagination .nav-links > * + * { margin-left: 14px; } /* Меню: просвет между пунктами верхнего уровня и его отмена в подменю */ /* Просвет ужат на нижней ступени (пакет №5, D2): 9 просветов по 13px съедали 117px из 582, доступных ряду на 64em. */ .mainnav ul > li + li { margin-left: clamp(10px, 1.05vw, 20px); } .mainnav .sub-menu > li + li { margin-left: 0; } /* --- Колоночные контейнеры --- */ .sitefooter__links > * + * { margin-top: 9px; } .burger > * + * { margin-top: 4px; } .contacts__col > * + * { margin-top: 16px; } .contacts__pin { margin-bottom: 12px; } .article__cover--note { margin-top: 6px; } /* --- Переносимые контейнеры: просвет margin'ами у детей, а лишний нижний ряд гасится компенсацией у контейнера --- */ .courses__facts { margin: 20px -12px -12px 0; } .courses__facts > * { margin: 0 12px 12px 0; } .tfilter__btns { margin: 0 -8px -8px 0; } .tfilter__btns > * { margin: 0 8px 8px 0; } /* У .tfilter всего два ребёнка — просвет вешаем на первый, тогда висячего поля справа нет и кнопки не переносятся раньше времени. */ .tfilter__label { margin-right: 14px; } .a11ybar__in { padding-bottom: 0; } .a11ybar__in > * { margin: 0 28px 18px 0; } @media (max-width: 90em) { .brand > * + * { margin-left: 12px; } } /* Меню ушло под бургер и стало блочным — горизонтальный просвет снять. Порог тот же единственный, что и у самого бургера (блок 10). */ @media (max-width: 63.999em) { .mainnav ul > li + li { margin-left: 0; } } /* На десктопе просвет колонок блока доверия margin'ом НЕ задаём: в свежих движках .trust__cols — display: contents, и margin достался бы элементам сетки, сузив их. В старых движках колонки разделены своим padding-left. */ @media (max-width: 48em) { /* На телефоне полоса приёма — display: block, а не flex: там gap не работал и раньше, значит и просвета быть не должно. */ .banner__in > * + * { margin-left: 0; } .topbar__left > * { margin-right: 10px; } .topbar__left > *:last-child { margin-right: 0; } .topbar__right > * + * { margin-left: 12px; } .brand > * + * { margin-left: 11px; } .tile__glyph { margin-right: 14px; } .tile__arrow { margin-left: 14px; } .trust__cols > * + * { margin-left: 14px; } .courses__facts { margin: 14px -8px -8px 0; } .courses__facts > * { margin: 0 8px 8px 0; } /* Подпись занимает всю ширину — просвет уходит вниз */ .tfilter__label { margin: 0 0 8px; } .a11ybar__in { padding-bottom: 0; } .a11ybar__in > * { margin: 0 18px 12px 0; } } /* Полоса приёма и полоса поздравления держат высоту сами, а не благодаря просветам: если движок потеряет что-то ещё, полосы всё равно не схлопнутся. */ .banner__in { min-height: 48px; } @media (max-width: 48em) { .banner__in { min-height: 0; } } /* ========================================================================== 15. Микро-интеракции: единый язык движения (пакет №4, блок F) Одна длительность (--dur 180ms) и один easing (--ease, ease-out) на весь сайт. Анимируем ТОЛЬКО transform / opacity / box-shadow / color / border-color / background-color — свойства, которые движок считает на композиторе или перекрашивает без пересчёта раскладки. Ни ширин, ни отступов, ни `filter`: hover не должен двигать соседей. Блок стоит последним по файлу намеренно: он сводит разнобой прежних состояний (сдвиги −4px и −3px, три разные тени, `filter: brightness`) к одному набору и обязан выигрывать по порядку у секций-компонентов. Четыре обязательных ограничения — ниже по блоку: · hover только там, где есть указатель (@media hover: hover); · :focus-visible получает ТО ЖЕ состояние, что hover; · ГОСТ-режим — без движения и без подложек, только подчёркивание; · prefers-reduced-motion — всё в статику. ========================================================================== */ /* --- Что вообще участвует в переходах ------------------------------------ */ .tile, .newscard, .sveden-card, .gtile, .folder, .cta, .hero__cta, .banner__cta, .courses__cta, .backlink, .tfilter__btn, .themetoggle, .burger, .langsw__btn, .langsw__item, .mainnav a, .mainnav .sub-menu a, .topbar a, .section__more, .prayer__more, .pagehead__crumbs a, .sitefooter__links a, .sitefooter__contacts a, .vkblock__link, .pagination .page-numbers, .doccard > a, .entry a, .entry .tablepress tbody td { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } /* --- Плитки и карточки: один сдвиг, одна тень ---------------------------- */ /* Сдвиг делаем transform'ом: он не участвует в раскладке, соседи стоят. */ @media (hover: hover) { .tile:hover, .newscard:hover, .sveden-card:hover, .gtile:hover, .folder:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(15, 61, 41, .42); } } /* Клавиатура получает ровно то же состояние, что и указатель. */ .tile:focus-visible, .newscard:focus-visible, .sveden-card:focus-visible, .gtile:focus-visible, .folder:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(15, 61, 41, .42); } /* --- Кнопки: подложка светлеет, кегль и коробка не двигаются ------------- */ @media (hover: hover) { html:not(.a11y) .cta:hover, html:not(.a11y) .hero__cta:hover, html:not(.a11y) .banner__cta:hover { background: var(--gold-lite); } html:not(.a11y) .courses__cta:hover, html:not(.a11y) .backlink:hover { background: var(--brand-lite); } } html:not(.a11y) .cta:focus-visible, html:not(.a11y) .hero__cta:focus-visible, html:not(.a11y) .banner__cta:focus-visible { background: var(--gold-lite); } html:not(.a11y) .courses__cta:focus-visible, html:not(.a11y) .backlink:focus-visible { background: var(--brand-lite); } /* Кнопки-переключатели (фильтр расписания, тема, бургер, языки) */ @media (hover: hover) { .tfilter__btn:hover { border-color: var(--gold); color: var(--text); } .themetoggle:hover { border-color: var(--gold-lite); } .burger:hover { border-color: var(--gold); } .langsw__btn:hover { color: var(--gold-lite); border-color: var(--gold-lite); } } .tfilter__btn:focus-visible { border-color: var(--gold); color: var(--text); } .themetoggle:focus-visible { border-color: var(--gold-lite); } .burger:focus-visible { border-color: var(--gold); } .langsw__btn:focus-visible { color: var(--gold-lite); border-color: var(--gold-lite); } /* --- Меню и выпадашка ---------------------------------------------------- */ @media (hover: hover) { .mainnav a:hover { color: var(--heading); border-bottom-color: var(--gold); } .theme-dark .mainnav a:hover { color: var(--gold-lite); } .mainnav .sub-menu a:hover { background: var(--iconbg); border-bottom: 0; } } .mainnav a:focus-visible { color: var(--heading); border-bottom-color: var(--gold); } .theme-dark .mainnav a:focus-visible { color: var(--gold-lite); } .mainnav .sub-menu a:focus-visible { background: var(--iconbg); } /* --- Текстовые ссылки: подчёркивание, цвет не трогаем -------------------- */ @media (hover: hover) { .topbar a:hover, .section__more:hover, .prayer__more:hover, .pagehead__crumbs a:hover, .sitefooter__links a:hover, .sitefooter__contacts a:hover, .vkblock__link:hover, .doccard > a:hover, .entry a:hover { text-decoration: underline; } } .topbar a:focus-visible, .section__more:focus-visible, .prayer__more:focus-visible, .pagehead__crumbs a:focus-visible, .sitefooter__links a:focus-visible, .sitefooter__contacts a:focus-visible, .vkblock__link:focus-visible, .doccard > a:focus-visible, .entry a:focus-visible { text-decoration: underline; } /* --- Плитки и таблицы «Сведений» ----------------------------------------- */ @media (hover: hover) { .pagination .page-numbers:hover:not(.current) { border-color: var(--gold); color: var(--heading); } .entry .tablepress .row-hover tr:hover td { background: var(--iconbg); } } .pagination .page-numbers:focus-visible:not(.current) { border-color: var(--gold); color: var(--heading); } /* --- ГОСТ-режим: движение выключено, различие держит подчёркивание ------- Ч/Б-схема строится на двух цветах; смена подложки на hover в ней либо не видна, либо ломает контраст (§17, грабля 3: --gold-lite в Ч/Б чернеет). Поэтому в ГОСТ остаётся только подчёркивание. */ .a11y .tile, .a11y .newscard, .a11y .sveden-card, .a11y .gtile, .a11y .folder, .a11y .cta, .a11y .hero__cta, .a11y .banner__cta, .a11y .courses__cta, .a11y .backlink, .a11y .tfilter__btn, .a11y .themetoggle, .a11y .burger, .a11y .langsw__btn, .a11y .mainnav a, .a11y .entry .tablepress tbody td { transition: none; } .a11y .tile:hover, .a11y .newscard:hover, .a11y .sveden-card:hover, .a11y .gtile:hover, .a11y .folder:hover, .a11y .tile:focus-visible, .a11y .newscard:focus-visible, .a11y .sveden-card:focus-visible, .a11y .gtile:focus-visible, .a11y .folder:focus-visible { transform: none; box-shadow: none; } /* Подложку в ГОСТ не меняем вовсе — правила выше отсечены html:not(.a11y); различие там держит подчёркивание. */ .a11y .cta:hover, .a11y .hero__cta:hover, .a11y .banner__cta:hover, .a11y .courses__cta:hover, .a11y .backlink:hover, .a11y .cta:focus-visible, .a11y .hero__cta:focus-visible, .a11y .banner__cta:focus-visible, .a11y .courses__cta:focus-visible, .a11y .backlink:focus-visible { text-decoration: underline; } .a11y .mainnav a:hover, .a11y .mainnav a:focus-visible, .a11y .gtile:hover, .a11y .gtile:focus-visible { text-decoration: underline; } /* --- Меньше движения: всё в статику -------------------------------------- */ /* Дублирует и усиливает общий блок ниже: там гасится длительность, здесь снимается сам сдвиг — иначе состояние просто «телепортируется». */ @media (prefers-reduced-motion: reduce) { .tile:hover, .newscard:hover, .sveden-card:hover, .gtile:hover, .folder:hover, .tile:focus-visible, .newscard:focus-visible, .sveden-card:focus-visible, .gtile:focus-visible, .folder:focus-visible { transform: none !important; } } /* ========================================================================== 16. Типографика вывода (пакет №5, блок G) Неразрывные пробелы расставляет inc/typograf.php на выводе — здесь только то, что делается вёрсткой: перенос строк и запрет разрыва. ========================================================================== */ /* `text-wrap` — прогрессивное улучшение: движки, которые его не знают, просто переносят как раньше. Ничего не ломается по построению. `pretty` убирает висячие слова в абзацах — там, где типограф не клеит их из-за гарда на 24 символа. `balance` выравнивает заголовки и короткие плашки: ради него гард и оставлен. */ p, li, dd, figcaption, blockquote, .card p, .entry p, .courses__lead, .trust__text, .sitefooter__about { text-wrap: pretty; } h1, h2, h3, h4, .hero__title, .hero__badge, .hero__lead, .banner__title, .banner__sub, .pagehead__title, .article__title, .section__title, .courses__title, .trust__title, .wisdom__text, .gtile__cap { text-wrap: balance; } /* Неразрывный кусок: телефон (типограф оборачивает его сам) и любая ссылка «позвонить». Страховка к неразрывным пробелам: если строку всё же скопируют без них, номер не разъедется. */ .u-nb, a[href^="tel:"] { white-space: nowrap; } /* 🪤 На телефоне запрет переноса снимаем. `white-space: nowrap` не знает слова «по возможности»: он запрещает перенос НАСОВСЕМ, аварийные переносы (`overflow-wrap: anywhere`) при нём тоже не работают. На системном увеличении текста номер разрастается и уводит страницу в горизонтальную прокрутку — замерено: на 320px это начинается с ~250%, на 376px при 400% номер занимает 506px из 361 доступных. Регрессия пакета №5 (коммит 0829ecc, блок G): проверка «до 400%» (§18) после него не перезапускалась. На обычном кегле номер и так помещается в строку на 320px (~130px из 305), так что видимой цены у этого правила нет. */ @media (max-width: 48em) { .u-nb, a[href^="tel:"] { white-space: normal; } } /* 🪤 `overflow-wrap: anywhere` на body (сага text-zoom, §18) НЕ снимаем: типограф склеивает слова в неразрывные единицы, и без «anywhere» слишком длинная единица распирала бы контейнер ровно так же, как когда-то «ПРОФЕССИОНАЛЬНОЕ» в бейдже героя. Пост-гард типографа (28 символов) и `anywhere` работают в паре. */