/* Theme Name: Нуруль Ислам Theme URI: https://medrese.ihermes.app/ Author: Медресе «Нуруль Ислам» Description: Тема сайта медресе «Нуруль Ислам» (ЦДУМ России, г. Октябрьский). Собрана по согласованному эталону дизайна. Шрифты локальные, внешние CDN не используются. Version: 1.0 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; --datemut: #9A8F77; --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; } .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; 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(a, button, input, select, 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 { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 9px var(--padx); max-width: var(--wrap); margin: 0 auto; } .topbar__left { display: flex; gap: 22px; align-items: center; } .topbar__left .sep { opacity: .5; } .topbar__left span { opacity: .85; } .topbar__right { display: flex; gap: 20px; align-items: center; } .topbar a { color: var(--on-deep); text-decoration: none; } .topbar a:hover { text-decoration: underline; } .cta { display: inline-flex; align-items: center; gap: 7px; 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 { filter: brightness(1.07); text-decoration: none; } .cta[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--brand-deep); } .themetoggle { width: 30px; height: 30px; 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); } /* ========================================================================== 4. Шапка ========================================================================== */ .masthead { background: var(--bg); border-bottom: 1px solid var(--border); } .masthead__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px var(--padx); max-width: var(--wrap); margin: 0 auto; } .brand { display: flex; align-items: center; gap: 16px; text-decoration: none; } .brand__mark { width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #1c6a45, #0f3d29); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px var(--gold), 0 6px 16px -8px rgba(15,61,41,.7); position: relative; flex: none; } .brand__moon { position: relative; width: 26px; height: 26px; } .brand__moon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--gold-lite); } .brand__moon::after { content: ""; position: absolute; top: -2px; left: 6px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #1c6a45, #0f3d29); } .brand__kicker { display: block; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 700; } .brand__name { display: block; white-space: nowrap; font-family: 'Cormorant', Georgia, serif; font-size: 28px; font-weight: 700; color: var(--heading); line-height: 1; } /* Меню в одну строку при полной формулировке «Сведения об образовательной организации»: кегль и просветы сжимаются вместе с шириной окна, не опускаясь ниже читаемого минимума. Переносить меню на второй ряд нельзя, поэтому ниже 1260px оно уходит под бургер (см. блок 10). */ .mainnav ul { display: flex; gap: clamp(13px, 1.2vw, 22px); 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); font-size: clamp(13.5px, .98vw, 15px); font-weight: 600; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: .15s; white-space: nowrap; /* Дефект пилота: «Расписани-е». Переносов внутри пунктов быть не должно. */ hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; } /* Длинный пункт «Сведения…» — на полшага мельче и с поджатым трекингом, чтобы не выдавливать соседей. */ .mainnav > ul > .menu-item-has-children > a { font-size: clamp(12.5px, .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); } /* Подменю «Сведений» — раскрывашка */ .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. Сезонный баннер ========================================================================== */ .banner { background: linear-gradient(90deg, var(--brand-mid), var(--brand-lite)); color: var(--cream); border-bottom: 3px solid var(--gold); } .banner__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px var(--padx); max-width: var(--wrap); margin: 0 auto; } .banner__left { display: flex; align-items: center; gap: 16px; } .banner__glyph { width: 44px; height: 44px; border-radius: 10px; background: rgba(201,162,73,.22); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--gold-lite); flex: none; } .banner__title { font-weight: 800; font-size: 17px; } .banner__sub { font-size: 14px; opacity: .85; } .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; } .banner__cta:hover { filter: brightness(1.07); } /* ========================================================================== 6. Герой ========================================================================== */ .hero { position: relative; height: 440px; background-size: cover; background-position: center 40%; display: flex; align-items: center; } .hero::before { content: ""; position: absolute; inset: 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 var(--padx); } .hero__box { max-width: 640px; color: #fff; } .hero__badge { 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; gap: 14px; 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; } .hero__cta:hover { filter: brightness(1.07); } /* ========================================================================== 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; gap: 16px; 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; } .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; } .section--tight { padding-bottom: 8px; } .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 22px; } .section__title { font-family: 'Cormorant', Georgia, serif; font-size: 32px; font-weight: 600; color: var(--heading); } .section__more { color: var(--link); font-weight: 700; text-decoration: none; font-size: 15px; white-space: nowrap; } .section__more:hover { text-decoration: underline; } /* Карточки быстрого доступа */ .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .tile { text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 26px 24px; display: block; transition: .2s; box-shadow: 0 2px 0 rgba(15,61,41,.03); /* Дефект пилота: «Расписани-е» — переносов в подписях плиток нет */ hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; } .tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(15,61,41,.5); } .tile__glyph { width: 52px; height: 52px; border-radius: 13px; background: var(--iconbg); color: var(--icongreen); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 18px; } .tile__body { display: block; } .tile__label { display: block; font-size: 19px; font-weight: 800; color: var(--text); } .tile__sub { display: block; font-size: 14px; color: var(--muted); margin-top: 5px; } .tile__arrow { display: none; } /* Новости */ .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; } .newscard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(15,61,41,.35); } .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; } /* Блок доверия */ .trust { margin: 20px auto 44px; 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; } .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; gap: 12px; margin-bottom: 14px; } .sitefooter__mark { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #1c6a45, #0f3d29); box-shadow: inset 0 0 0 1.5px var(--gold); flex: none; } .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; } .sitefooter__links { display: flex; flex-direction: column; gap: 9px; 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; } .sitefooter__legal { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--padx) 28px; font-size: 13px; opacity: .7; } /* ========================================================================== 10. Мобильная версия (брейкпоинт эталона — 768px) ========================================================================== */ /* На узком десктопе логотип уступает место меню: полный пункт «Сведения…» важнее пары пунктов кегля в названии. */ @media (max-width: 1440px) { .brand { gap: 12px; } .brand__mark { width: 52px; height: 52px; } .brand__moon { width: 22px; height: 22px; } .brand__moon::after { top: -2px; left: 5px; width: 20px; height: 20px; } .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; gap: 4px; cursor: pointer; flex: none; } .burger span { width: 18px; height: 2px; background: var(--icongreen); border-radius: 2px; } .masthead { position: relative; } /* Меню сворачивается в бургер раньше остальной вёрстки: ниже 1260px полный пункт «Сведения об образовательной организации» перестаёт помещаться в строку (замерено), а второй ряд меню запрещён. Эталон эту ширину не описывает — решение наше. */ @media (max-width: 1260px) { .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; 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; } } @media (max-width: 768px) { :root { --padx: var(--padx-m); } .only-desktop { display: none; } .only-mobile { display: block; } .topbar__in { padding: 8px var(--padx); font-size: 11px; } .topbar { font-size: 11px; } .topbar__left { gap: 10px; } .topbar__right { gap: 12px; } .themetoggle { width: 26px; height: 26px; font-size: 12px; } .masthead__in { padding: 14px var(--padx); } .brand { gap: 11px; } .brand__mark { width: 42px; height: 42px; box-shadow: inset 0 0 0 1.5px var(--gold); } .brand__moon { display: none; } .brand__kicker { font-size: 10px; letter-spacing: .18em; } .brand__name { font-size: 20px; } .banner__in { display: block; 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 { 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 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; 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: 12px; } .tile { border-radius: 15px; padding: 18px; display: flex; align-items: center; gap: 16px; } .tile:hover { transform: none; box-shadow: 0 2px 0 rgba(15,61,41,.03); } .tile__glyph { margin-bottom: 0; flex: none; } .tile__body { flex: 1; } .tile__label { font-size: 17px; } .tile__sub { font-size: 13px; margin-top: 2px; } .tile__arrow { display: block; color: var(--gold); font-size: 20px; font-weight: 700; } .newsgrid { grid-template-columns: 1fr; gap: 14px; } .newscard { border-radius: 15px; } .newscard:hover { transform: none; box-shadow: none; } .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; } .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; gap: 14px; margin-top: 18px; } .trust__col { flex: 1; 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; } } /* Десктоп: колонки блока доверия — соседи, а не обёртка */ @media (min-width: 769px) { .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: 768px) { .page-title { font-size: 28px; } .entry { font-size: 16px; } } /* ========================================================================== 11. Версия для слабовидящих (ГОСТ Р 52872). Включается кнопкой в шапке, состояние живёт в localStorage. Базовый режим; расширяется на фазе B. ========================================================================== */ .a11y body { font-size: 20px; line-height: 1.75; } .a11y .hero::before { background: rgba(15,61,41,.9); } .a11y .hero__title { text-shadow: none; } .a11y .tile:hover, .a11y .newscard:hover { transform: none; } .a11y a { text-decoration: underline; } .a11y .cta, .a11y .hero__cta, .a11y .banner__cta { text-decoration: none; } .a11y .newscard__thumb { background: var(--ph1); } /* Размеры у элементов заданы в px, поэтому увеличение базового кегля само по себе ничего не даёт — поднимаем ключевой текст поимённо. */ .a11y .topbar, .a11y .topbar__in { font-size: 15px; } .a11y .mainnav a { font-size: 18px; } .a11y .brand__name { font-size: 32px; } .a11y .brand__kicker { font-size: 14px; } .a11y .banner__title { font-size: 21px; } .a11y .banner__sub, .a11y .banner__cta { font-size: 17px; } .a11y .hero__badge { font-size: 15px; } .a11y .hero__lead { font-size: 22px; } .a11y .hero__cta { font-size: 19px; } .a11y .section__title { font-size: 36px; } .a11y .section__more { font-size: 18px; } .a11y .prayer__title { font-size: 26px; } .a11y .prayer__badge, .a11y .prayer__sub, .a11y .prayer__more { font-size: 16px; } .a11y .prayer__name { font-size: 17px; } .a11y .prayer__time { font-size: 30px; } .a11y .tile__label { font-size: 23px; } .a11y .tile__sub { font-size: 17px; } .a11y .newscard__title { font-size: 21px; } .a11y .newscard__date, .a11y .newscard__text { font-size: 17px; } .a11y .trust__title { font-size: 34px; } .a11y .trust__text, .a11y .trust__sub { font-size: 18px; } .a11y .trust__label { font-size: 15px; } .a11y .page-title { font-size: 48px; } .a11y .entry { font-size: 20px; line-height: 1.8; } .a11y .sitefooter__about, .a11y .sitefooter__contacts, .a11y .sitefooter__links, .a11y .sitefooter__legal { font-size: 18px; } .a11y .sitefooter__label { font-size: 15px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }