/* Тема rtl — арабский спутник. Родня теме default по духу («инфо-агентство»), но не по разметке: другие имена классов, потому что две одинаковые HTML-структуры на разных доменах — сами по себе след сети (ROADMAP, Фаза 2). Три вещи, которые нельзя вернуть «как в default», — это не вкусовщина, а требования арабской графики: 1. letter-spacing РАЗРЫВАЕТ вязь: буквы перестают соединяться, слово рассыпается. Поэтому во всей теме его нет ни на заголовках, ни на кикерах. 2. text-transform: uppercase для арабицы — пустая операция (регистра нет), но она осталась бы висеть на латинских вставках и рвала бы единство строки. Убрано. 3. Межстрочный интервал больше латинского: у арабского выше надстрочные и подстрочные элементы, при 1.6 строки сцепляются. База — 1.75, чтение — 1.9. Направление задаётся атрибутом dir="rtl" на , а не CSS: все отступы ниже выражены логическими свойствами (inline-start/end), поэтому раскладка зеркалится сама и тема осталась бы рабочей и для LTR-языка. Классы контента — общие с другими темами: .video-embed проставляет ContentRewriter (PHP) на HTML статьи, одинаково для всех спутников. Переименовать его в теме нельзя — стили просто перестали бы применяться. Внешних запросов нет: ни шрифтов с CDN, ни иконочных наборов (CONCEPT §6). */ /* Слот под самохостинг арабского веб-шрифта: положить woff2 в assets/fonts/ и раскомментировать; имя семейства должно совпасть с brand.fonts.heading / .body. @font-face { font-family: "Noto Naskh Arabic"; src: url("/assets/fonts/noto-naskh-arabic.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } */ /* ---------- Токены раскладки (от бренда не зависят) ---------- */ :root { --measure: 42rem; /* колонка чтения чуть шире: арабская строка плотнее */ --shell: 75rem; --gutter: 1.25rem; --radius: 10px; --radius-sm: 4px; --step--2: 0.8125rem; /* мелкий кегль поднят: арабица хуже читается мелкой */ --step--1: 0.875rem; --step-0: 1.0625rem; --step-1: 1.1875rem; --step-2: clamp(1.3125rem, 1.15rem + 0.7vw, 1.5625rem); --step-3: clamp(1.5625rem, 1.35rem + 1vw, 1.9375rem); --step-4: clamp(1.9375rem, 1.55rem + 1.9vw, 2.8125rem); --step-5: clamp(2.1875rem, 1.65rem + 2.8vw, 3.5rem); /* Производные поверхности: одна формула работает и в светлой, и в тёмной схеме, потому что считается от текущих --bg/--fg. */ --surface: color-mix(in srgb, var(--fg) 4%, var(--bg)); --surface-2: color-mix(in srgb, var(--fg) 8%, var(--bg)); --border: color-mix(in srgb, var(--fg) 14%, transparent); --border-strong: color-mix(in srgb, var(--fg) 32%, transparent); --fg-soft: color-mix(in srgb, var(--fg) 78%, var(--bg)); --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--bg)); --accent-ink: color-mix(in srgb, var(--accent) 88%, var(--fg)); } /* ---------- База ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.75; font-synthesis-weight: none; text-rendering: optimizeLegibility; display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1 0 auto; } h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.4; /* заголовкам тоже нужен воздух: 1.15 режет диакритику */ font-weight: 700; margin: 0; text-wrap: balance; } p { margin: 0 0 1em; } a { color: var(--accent-ink); text-underline-offset: 0.18em; } a:hover { color: var(--accent); } img { max-width: 100%; height: auto; } hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; } /* Латиница и цифры внутри арабской строки: без изоляции двунаправленный алгоритм переносит знаки препинания и скобки на противоположный край фрагмента. */ bdi, code, time, .pager__count, .stream__count { unicode-bidi: isolate; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } .wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .jump-link { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 20; padding: 0.75rem 1rem; background: var(--accent); color: var(--bg); font-weight: 600; text-decoration: none; } .jump-link:focus { inset-inline-start: 0; color: var(--bg); } /* Верхняя строка карточки: рубрика · дата. Без капса и трекинга — см. шапку файла. */ .topline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--step--2); font-weight: 700; line-height: 1.5; color: var(--muted); } .topline__cat { color: var(--accent); text-decoration: none; } .topline__cat:hover { text-decoration: underline; } .topline__sep { color: var(--border-strong); } .topline time { font-variant-numeric: tabular-nums; } /* ---------- Шапка ---------- */ .masthead { border-bottom: 1px solid var(--border); background: var(--bg); } .masthead__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding-block: 0.875rem; } .masthead__brand { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--fg); text-decoration: none; min-width: 0; } .masthead__brand:hover { color: var(--fg); } /* Знак бренда: акцентная плашка + название. Логотип-картинка не годится для тёмной схемы (в SVG зашит цвет), поэтому по умолчанию знак — текстовый. */ .logotype { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; } .logotype__bar { flex: none; width: 0.375rem; height: 1.625rem; background: var(--accent); border-radius: 1px; } .logotype__name { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4375rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .masthead__slogan { display: none; font-size: var(--step--2); color: var(--muted); padding-inline-start: 0.75rem; border-inline-start: 1px solid var(--border); } .masthead__logo { display: block; width: auto; height: 1.75rem; } .masthead__menu { justify-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.375rem 0.625rem; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--fg); font: inherit; font-size: var(--step--1); cursor: pointer; } .masthead__menu:hover { border-color: var(--border-strong); } .masthead__bars { position: relative; width: 1.125rem; height: 2px; background: currentColor; } .masthead__bars::before, .masthead__bars::after { content: ""; position: absolute; inset-inline-start: 0; width: 100%; height: 2px; background: currentColor; } .masthead__bars::before { top: -6px; } .masthead__bars::after { top: 6px; } /* Мобильная навигация — раскрывающаяся панель на всю ширину под шапкой. */ .topnav { grid-column: 1 / -1; display: none; } .topnav.is-shown { display: block; } .topnav__list { list-style: none; margin: 0; padding: 0.25rem 0 0.75rem; display: flex; flex-direction: column; } .topnav__list a { display: block; padding: 0.625rem 0; border-bottom: 1px solid var(--border); color: var(--fg); text-decoration: none; font-size: var(--step--1); font-weight: 600; } .topnav__list a:hover { color: var(--accent); } /* ---------- Ленты ---------- */ .stream { padding-block: 1.5rem 2.5rem; } .stream__heading { font-size: var(--step-3); padding-bottom: 0.625rem; border-bottom: 2px solid var(--accent); margin-bottom: 1.5rem; } .stream__heading--line { display: flex; align-items: baseline; gap: 0.75rem; } .stream__count { font-family: var(--font-body); font-size: var(--step--1); font-weight: 500; color: var(--muted); } .stream__grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem 1.5rem; } .stream__empty { color: var(--muted); padding-block: 2rem; } /* Карточка. Ссылка — только на заголовке (карточку целиком в один заворачивать нельзя: скринридер зачитывает подпись, дату и лид как один бесконечный линк). */ .entry { display: grid; gap: 0.625rem; min-width: 0; } .entry__media { display: block; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); aspect-ratio: 16 / 9; } .entry__img { width: 100%; height: 100%; object-fit: cover; display: block; } .entry__title { font-size: var(--step-2); } .entry__title a { color: inherit; text-decoration: none; } .entry__title a:hover { color: var(--accent); text-decoration: underline; } .entry__excerpt { margin: 0; color: var(--fg-soft); font-size: var(--step-0); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Ведущий материал ленты. */ .entry--hero { gap: 0.875rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--border); } .entry--hero .entry__title { font-size: var(--step-4); } .entry--hero .entry__excerpt { font-size: var(--step-1); -webkit-line-clamp: 4; } /* Компактные строки «ещё материалы» — без картинки, плотным списком. */ .entry--row { gap: 0.375rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .entry--row .entry__title { font-size: var(--step-1); } /* ---------- Статья ---------- */ .story { padding-block: 1.25rem 2rem; } .crumbs { font-size: var(--step--2); color: var(--muted); margin-bottom: 1rem; } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--accent); } .crumbs__sep { padding-inline: 0.375rem; color: var(--border-strong); } .story__head { max-width: var(--measure); margin-bottom: 1.5rem; } .story__title { font-size: var(--step-5); margin: 0.625rem 0 0; } .story__lead { margin: 0.875rem 0 0; font-family: var(--font-reading); font-size: var(--step-2); line-height: 1.7; color: var(--fg-soft); } .story__info { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 1.125rem; padding-top: 0.875rem; border-top: 1px solid var(--border); font-size: var(--step--1); color: var(--muted); } .story__by { color: var(--fg); font-weight: 600; } .story__info time { font-variant-numeric: tabular-nums; } /* Подпись под картинкой: акцентная линейка со стороны начала строки, то есть справа — inline-start сам разворачивается по dir. */ .figcaption, .story__body figcaption { margin-top: 0.5rem; font-size: var(--step--1); line-height: 1.6; color: var(--muted); border-inline-start: 2px solid var(--accent); padding-inline-start: 0.625rem; } /* Колонка чтения. Внутри — переведённый HTML, поэтому селекторы работают по тегам: классов у контента нет и не будет. */ .story__body { max-width: var(--measure); font-family: var(--font-reading); font-size: 1.1875rem; line-height: 1.9; } .story__body > * + * { margin-top: 1.1em; } .story__body p { margin: 0; } .story__body h2 { font-family: var(--font-heading); font-size: var(--step-3); margin-top: 2.25rem; } .story__body h3 { font-family: var(--font-heading); font-size: var(--step-2); margin-top: 1.75rem; } .story__body h4 { font-family: var(--font-heading); font-size: var(--step-1); margin-top: 1.5rem; } .story__body a { color: var(--accent-ink); } .story__body ul, .story__body ol { padding-inline-start: 1.5rem; } .story__body li + li { margin-top: 0.4em; } .story__body blockquote { margin-inline: 0; padding-block: 0.25rem; padding-inline: 1.125rem 0; border-inline-start: 3px solid var(--accent); font-size: var(--step-2); line-height: 1.7; color: var(--fg-soft); } .story__body blockquote p + p { margin-top: 0.6em; } .story__body figure { margin-inline: 0; } /* Видео: нативный плеер с постером. Ролик лежит на CDN и отдаётся через свой поддомен; preload="none" держит вес страницы прежним — до нажатия на play браузер не грузит ни байта. Класс .video-embed приходит из ContentRewriter, он общий для всех тем (см. шапку файла). */ .video-embed { position: relative; margin-inline: 0; } .video-embed video { width: 100%; height: auto; display: block; border-radius: var(--radius); /* Пока постер не загрузился, за плеером не должна просвечивать страница. */ background: #000; } /* Карточка-ссылка из статей, отрендеренных до появления плеера: если страницу ещё не пересобрали, значок воспроизведения на постере должен остаться. Треугольник направлен по ходу чтения, то есть в RTL — влево. */ .video-embed a { display: block; position: relative; } .video-embed img { width: 100%; border-radius: var(--radius); display: block; } .video-embed a::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 1.125rem 1.75rem 1.125rem 0; border-color: transparent var(--bg) transparent transparent; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--fg) 55%, transparent)); } .video-embed a:hover::after { border-right-color: var(--accent); } .story__body img { border-radius: var(--radius); display: block; } .story__body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--surface-2); padding: 0.1em 0.35em; border-radius: var(--radius-sm); direction: ltr; } .story__body pre { background: var(--surface-2); padding: 1rem; border-radius: var(--radius); overflow-x: auto; font-size: var(--step--1); line-height: 1.5; direction: ltr; text-align: left; } .story__body pre code { background: none; padding: 0; } /* Таблицы из источника бывают широкими — на телефоне прокручиваем их, а не ломаем макет. */ .story__body table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: var(--step--1); display: block; overflow-x: auto; } .story__body th, .story__body td { border: 1px solid var(--border); padding: 0.5rem 0.625rem; text-align: start; vertical-align: top; } .story__body th { background: var(--surface); font-weight: 700; } /* ---------- Автор ---------- */ .byline { display: flex; gap: 1rem; align-items: flex-start; max-width: var(--measure); margin: 2.5rem 0 0; padding: 1.125rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .byline__pic { flex: none; border-radius: 50%; background: var(--surface-2); } .byline__name { font-family: var(--font-heading); font-weight: 700; } .byline__bio { margin: 0.25rem 0 0; color: var(--muted); font-size: var(--step--1); line-height: 1.6; } /* ---------- Смежные материалы ---------- */ .alsoread { margin-top: 3rem; padding-top: 1.5rem; border-top: 2px solid var(--accent); } .alsoread__heading { font-size: var(--step-1); margin-bottom: 1.25rem; } .alsoread__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } /* ---------- Пагинация ---------- */ .pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .pager a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.375rem 0.875rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--fg); text-decoration: none; font-size: var(--step--1); font-weight: 600; } .pager a:hover { border-color: var(--accent); color: var(--accent); } .pager__count { color: var(--muted); font-size: var(--step--1); font-variant-numeric: tabular-nums; } /* ---------- Служебные страницы и 404 ---------- */ .infopage { padding-block: 2rem 3rem; max-width: var(--measure); } .infopage h1 { font-size: var(--step-4); margin-bottom: 1.25rem; } .infopage__body { font-family: var(--font-reading); font-size: 1.125rem; line-height: 1.9; } .nopage { padding-block: 4rem 5rem; text-align: center; } .nopage__code { font-size: var(--step-5); color: var(--accent); margin-bottom: 0.5rem; } .nopage__text { color: var(--fg-soft); font-size: var(--step-1); } .nopage__links { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; } .nopage__links a { padding: 0.5rem 0.875rem; border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; color: var(--fg); font-size: var(--step--1); font-weight: 600; } .nopage__links a:hover { border-color: var(--accent); color: var(--accent); } /* ---------- Подвал ---------- */ .colophon { margin-top: 3rem; padding-block: 2rem 1.5rem; background: var(--surface); border-top: 1px solid var(--border); font-size: var(--step--1); } .colophon__grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; } .colophon__about { max-width: 28rem; } .colophon__desc { margin: 0.625rem 0 0; color: var(--muted); line-height: 1.7; } .colophon__heading { font-family: var(--font-heading); font-size: var(--step--2); font-weight: 700; color: var(--muted); margin-bottom: 0.75rem; } .colophon__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .colophon__list a { color: var(--fg); text-decoration: none; } .colophon__list a:hover { color: var(--accent); } .colophon__bottom { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--muted); } .colophon__copy { margin: 0; } /* ---------- Адаптив ---------- */ @media (min-width: 40rem) { :root { --gutter: 1.75rem; } .stream__grid { grid-template-columns: repeat(2, 1fr); } .alsoread__grid { grid-template-columns: repeat(2, 1fr); } .colophon__grid { grid-template-columns: 2fr 1fr 1fr; } /* Ведущий материал во всю ширину ленты: фото и текст в две колонки (в RTL фото окажется справа — раскладку разворачивает dir, правила этого не знают). */ .entry--hero { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; column-gap: 1.75rem; } .entry--hero .entry__media { grid-row: 1 / span 4; aspect-ratio: 4 / 3; } /* Делить лид на две колонки нечем, если у материала нет фото. */ .entry--hero.entry--textonly { grid-template-columns: 1fr; } .entry--hero.entry--textonly .entry__title { max-width: 26ch; } } @media (min-width: 48rem) { .masthead__slogan { display: inline; } } @media (min-width: 64rem) { :root { --gutter: 2rem; } /* Меню разворачивается в строку, кнопка не нужна. */ .masthead__row { grid-template-columns: auto 1fr; } .masthead__menu { display: none; } .topnav { display: block; grid-column: auto; grid-row: 1; justify-self: end; } .topnav__list { flex-direction: row; gap: 1.5rem; padding: 0; } .topnav__list a { padding: 0; border: 0; font-size: var(--step--2); } .stream__grid { grid-template-columns: repeat(3, 1fr); } .alsoread__grid { grid-template-columns: repeat(4, 1fr); } .entry--hero { column-gap: 2.5rem; } .entry--hero .entry__media { aspect-ratio: 16 / 10; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } @media print { .masthead, .colophon, .pager, .alsoread, .crumbs { display: none; } body { background: #fff; color: #000; } .story__body { max-width: none; font-size: 11pt; } a { text-decoration: underline; } }