/* ============================================================================= Playgama Blog — theme layer Ships to WordPress as wp-content/themes/playgama-blog/assets/css/theme.css This file is ONLY the blog-specific layer. The foundation comes from the landing design system, copied verbatim from Playgama/platform-landings (public/adv/css/) and loaded before this file: system/tokens.css colour ramps, radii, spacing, motion — generated from the Figma library xwAzt5GCfCsP9RbHtwZXo4 system/typography.css .heading-*, .heading-promo-*, .body-*, .label-*, .caption-* plus CalSans Keeping those two untouched means the blog inherits landing fixes for free and never drifts from the brand. Everything below is what a blog needs and a landing does not: article body typography, cover cards, archives, TOC. Button and card class names deliberately match the landing system's components.css (.btn, .btn-fill, .btn-ghost, .btn-m). components.css itself is 45 KB and mostly landing-specific, so the handful of rules the blog actually uses are restated here — swap in the shared file later if the team wants one bundle. ========================================================================== */ /* Dark by default, exactly like playgama.com. The landing tokens resolve through light-dark(), so a light branch exists the moment anyone sets data-theme="light" — nothing here hardcodes a dark value. */ :root { color-scheme: dark; } /* ------------------------------------------------------------------ шрифт Две гарнитуры и больше никаких. Cal Sans (--font-promo) — только заголовки. В наборе одно начертание, поэтому вес у них всегда 400: при 500 и выше браузер рисует синтетический жир и знак плывёт. DM Sans (--font-body / --font-heading) — весь остальной текст. Ровно два начертания: 400 и 500. Значений 600 и 700 в проекте нет — в файле шрифта их тоже нет, и браузер подделал бы их сам. Кегли — закрытый список. Заголовки идут по одной шкале, текст по другой, между ними нет пересечений, чтобы не появлялось «почти таких же» размеров. -------------------------------------------------------------------------- */ :root { /* Cal Sans, вес всегда 400 */ --fs-display-xxl: 64px; /* код ошибки на 404 */ --fs-display-xl: 48px; /* h1 статьи и раздела */ --fs-display-l: 32px; /* h2 в тексте */ --fs-display-m: 28px; /* заголовок поста в ленте */ --fs-display-s: 23px; /* h3 в тексте, заголовок в CTA */ /* DM Sans, 400 или 500 */ --fs-text-l: 17px; /* лид статьи */ --fs-text-m: 16px; /* тело */ --fs-text-s: 14px; /* второстепенное: оглавление, меню, кнопки */ --fs-text-xs: 13px; /* служебное: даты, время чтения, адреса */ --fs-label: 11px; /* мелкие капсовые подписи */ --fw-regular: 400; --fw-medium: 500; } /* ------------------------------------------------------------------ ритм База — 8px. Всё, что разделяет блоки, кратно ей: 8, 16, 24, 32, 40, 64, 80. 4px — единственный полушаг и только внутри компонента (зазор между иконками, строка плотного списка). Значений 2, 3, 5, 6, 7 в файле нет. По близости: 8 подпись и её значение — читаются как одно целое 16 элементы одной группы 32 группы внутри секции 64 секции между собой ---------------------------------------------------------------------- */ /* Один акцент на весь сайт. Раньше здесь было четыре: фиолетовый гайдам, золотой паблишерам, лайм подборкам, лаванда разработке. Выглядело как раскраска: четыре цвета в одной сетке ничего читателю не сообщают — он и так видит подпись категории словами. Цвет теперь означает ровно одно — «сюда можно нажать». Классы .tier-* оставлены: разметка на них уже завязана, и если цвет по разделам когда-нибудь понадобится, включается он в одном месте. */ .tier-guides, .tier-publisher, .tier-top, .tier-dev, .tier-news { --accent: var(--color-purple-400); } /* Дисплейные заголовки — CalSans (--font-promo из системы лендингов). В наборе только Regular, поэтому вес задаём 400 явно: при 600 браузер рисует синтетический жир и знак плывёт. Дисплейной гарнитуре нужен тесный интерлиньяж и слегка поджатый трекинг. */ .display { font-family: var(--font-promo); font-weight: var(--fw-regular); line-height: 1.05; letter-spacing: -0.01em; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-text-m); line-height: 1.45; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--accent-purple-text); } :focus-visible { outline: 2px solid var(--accent-purple); outline-offset: 2px; } /* Одна колонка на всех разрешениях, не шире 800px. Раньше контейнер был 1240px и на широком экране лента растягивалась: текст уезжал влево, обложка вправо, между ними пустота. Узкая колонка держит длину строки в читаемых пределах и делает раскладку одной — то, что видно на телефоне, то же самое видно и на мониторе. */ .shell { max-width: 800px; margin: 0 auto; padding: 0 var(--space-24); } /* Скрыть от глаз, оставить для скринридера и разметки. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: var(--space-16); top: var(--space-16); z-index: 99; background: var(--accent-purple); color: var(--color-white); padding: var(--space-8) var(--space-16); border-radius: var(--radius-8); } /* ---------------------------------------------------------------- buttons Pill geometry and purple fill follow the landing system. */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); border: none; cursor: pointer; text-decoration: none; font-family: var(--font-body); font-weight: var(--fw-medium); line-height: 1; white-space: nowrap; border-radius: var(--radius-rounded); /* Фокус подсвечивается лаймом — так же, как активный пункт меню и как на портале (--focus-accent: electric-lime). */ transition: background-color var(--duration-base) var(--ease-out), background-image var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), filter var(--duration-instant) var(--ease-out); } .btn:focus-visible { outline: 2px solid var(--color-electric-lime); outline-offset: 2px; } /* Нажатие — приглушение яркости, а не масштаб: так на портале (:active:before { filter: brightness(.92) }). */ .btn:not(:disabled):active { filter: brightness(.92); } .btn:disabled { color: var(--color-white-40); background: var(--color-carbon-400); cursor: default; } .btn-m { min-height: 40px; padding: 0 var(--space-24); font-size: var(--fs-text-s); } .btn-l { min-height: 48px; padding: 0 var(--space-24); font-size: var(--fs-text-m); } .btn-fill { background-color: var(--color-purple-400); color: var(--color-white); } .btn-ghost { background-color: transparent; color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--color-white-12); } /* ---------------------------------------------------------------- header */ .site-header { border-bottom: 1px solid var(--border-default); } .site-header__in { display: flex; align-items: center; justify-content: center; min-height: 60px; } .site-brand { display: inline-flex; align-items: center; text-decoration: none; } /* viewBox 224x40 — соотношение 5.6:1, поэтому задаём только высоту. Знак нарисован сплошной заливкой с выбитыми буквами, поэтому цвет берётся из --text-primary, а не из акцента: на тёмной теме это белый, на светлой он сам переворачивается, и знак не пропадает вместе с фоном. */ .site-brand__mark { height: 32px; width: auto; color: var(--text-primary); display: block; transition: opacity var(--duration-base) var(--ease-out); } /* Строка разделов. Прилипает она, а не логотип: при чтении длинной статьи полезны разделы, а не знак бренда. */ .site-nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg-primary) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-default); } /* Строка разделов идёт во всю ширину вьюпорта, а не по колонке в 800px. Помещается — стоит по центру, не помещается — начинается от левого края и прокручивается вбок. Центрируют это автоотступы на крайних пунктах, а не justify-content: center. При center содержимое, которое шире экрана, обрезается слева и доскроллить до него нельзя — первый раздел становится недостижим. Автоотступы при нехватке места сами обращаются в ноль, и список честно прижимается к началу. Тот же приём вместо safe center: он делает ровно это, но поддержан не везде. */ .site-nav__in { display: flex; gap: var(--space-24); align-items: center; max-width: none; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .site-nav__in > :first-child { margin-inline-start: auto; } .site-nav__in > :last-child { margin-inline-end: auto; } .site-nav__in::-webkit-scrollbar { display: none; } .site-nav a { color: var(--text-secondary); text-decoration: none; font-size: var(--fs-text-s); font-weight: var(--fw-medium); white-space: nowrap; padding: var(--space-16) 0; border-bottom: 2px solid transparent; transition: var(--transition-colors); } .site-nav .current-menu-item > a, .site-nav a[aria-current="page"] { color: var(--text-primary); border-bottom-color: var(--color-electric-lime); } /* ---------------------------------------------------------------- cards */ /* Лента — список, а не сетка карточек. В сетке смешанная лента не выравнивается: у половины постов обложки нет и не будет, и колонки идут вразнобой. В строке выравнивать нечего — текст всегда на месте, а обложка просто появляется справа или нет. Заодно это ближе к тому, чем блог является: чтение, а не витрина. */ .feed { display: flex; flex-direction: column; } /* Карточка — не коробка. Была: заливка, рамка, радиус 24, подъём на ховер, а у постов без обложки ещё и цветная полоса сверху с другой заливкой — то есть два разных вида карточки в одной сетке. Стало: изображение, заголовок, служебная строка. Разделяет воздух, а не контейнеры. Пост без обложки — та же карточка, просто без картинки; ничем это не компенсируется, и поэтому лента перестаёт выглядеть собранной из двух разных дизайнов. */ /* Разделителей между постами нет: расстояние справляется само, а линии на каждой строке возвращали ту самую сетку из рамок, от которой уходили. */ .card-post { display: flex; flex-direction: column; gap: var(--space-16); } /* Расстояние между постами — единственное, что их разделяет: линий нет. 72px, то есть на половину больше базовых 48; в шкале лендингов такого шага нет, поэтому выводим его из существующего токена, а не вписываем числом. */ .feed { gap: calc(var(--space-48) * 1.5); } /* Обложка держит рамку 16:9 независимо от пропорций файла. Абсолютное позиционирование здесь не украшение: при aspect-ratio у родителя и height:100% у потомка высота считается по кругу и картинка распирает рамку — тем сильнее, чем дальше файл от 16:9. */ .card-post__media { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; } .card-post__media > a { position: absolute; inset: 0; display: block; } .card-post__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: url(#pg-squircle); transition: opacity var(--duration-base) var(--ease-out); } .card-post__body { display: flex; flex-direction: column; gap: var(--space-8); } /* Один стиль заголовка на всю ленту, включая первый пост. Разные кегли означали бы разную важность — в ленте её нет. */ .card-post__title { margin: 0; color: var(--text-primary); font-family: var(--font-promo); font-weight: var(--fw-regular); font-size: var(--fs-display-m); line-height: 1.08; letter-spacing: -0.01em; } .card-post__title a { color: inherit; text-decoration: none; } /* Длина строки под чтение, а не под ширину контейнера. Выдержка — две строки: она подсказывает, о чём текст, а не пересказывает его. */ .card-post__excerpt { margin: 0; color: var(--text-tertiary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Служебная строка — дата и время чтения. Это техническая справка, а не текст статьи, поэтому она уходит на ступень тише выдержки: у выдержки --text-tertiary, здесь --color-white-40. Цена решения: контраст падает с 4.91:1 до примерно 3.7:1, то есть ниже порога WCAG AA для мелкого текста. Осознанный размен: строка дублирует машинные данные из datetime и ничего уникального не сообщает. Если понадобится вернуть соответствие — достаточно поменять цвет обратно на --text-tertiary. */ .card-post__meta { display: flex; gap: var(--space-16); color: var(--color-white-40); font-size: var(--fs-text-xs); font-variant-numeric: tabular-nums; } /* Подпись раздела — один стиль на весь сайт: над чипсами тем, над каталогом категорий в подвале, над блоком «ещё по теме». Раньше каждый такой заголовок был описан отдельно и они разъезжались. */ .section-label { font-family: var(--font-body); font-size: var(--fs-label); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .1em; color: var(--text-tertiary); margin: 0 0 var(--space-16); } /* Категория — подпись, а не цветная пилюля на заливке. */ /* Мелкие капсовые подписи — один кегль 11px на весь сайт: чип раздела, подпись блока, кикер у CTA. Раньше чип не имел своего размера и наследовал 16px от тела, а подписи блоков были 10px — три разных кегля на одну роль. */ .chip { display: inline-block; align-self: flex-start; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; color: var(--text-tertiary); font-size: var(--fs-label); font-weight: var(--fw-medium); line-height: 1.2; transition: var(--transition-colors); } /* Темы — чипсы. Сначала это была строка голого текста, и было непонятно, что там нажимается; я подписал её «Browse by topic». В виде чипсов подпись не нужна: форма сама говорит, что это нажимаемые метки. Ссылки здесь не украшение — ими держится перелинковка на большие хабы (Minecraft 1779, Unity 1170, Roblox 1134). */ .hubs { display: flex; flex-wrap: wrap; gap: var(--space-8); padding: var(--space-8) 0 var(--space-40); } .hubs--center { justify-content: center; } .hub { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 32px; padding: var(--space-8) var(--space-16); border-radius: var(--radius-rounded); background: var(--color-white-8); color: var(--text-primary); text-decoration: none; font-size: var(--fs-text-s); font-weight: var(--fw-medium); line-height: 1.2; transition: var(--transition-colors); } /* Число — справочная величина, а не часть названия. */ .hub i { font-style: normal; color: var(--text-tertiary); font-size: var(--fs-text-xs); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; } .section-title { margin: var(--space-40) 0 var(--space-32); color: var(--text-primary); font-family: var(--font-promo); font-weight: var(--fw-regular); font-size: var(--fs-display-xl); line-height: 1.05; letter-spacing: -0.01em; } /* ---------------------------------------------------------------- archive */ /* Отступы вокруг заголовка раздела приведены к тем же, что у заголовка статьи: сверху столько же, снизу описание прижато к заголовку. */ .archive-head { padding: var(--space-32) 0 0; margin-bottom: var(--space-24); } .archive-head h1 { margin: var(--space-8) 0 var(--space-8); color: var(--text-primary); font-family: var(--font-promo); font-weight: var(--fw-regular); font-size: var(--fs-display-xl); line-height: 1.02; letter-spacing: -0.015em; } .archive-head p { color: var(--text-tertiary); margin: 0; } .archive-head__count { color: var(--text-tertiary); font-size: var(--fs-text-s); margin: 0; } /* Пагинация остаётся: архивы уходят до 446-й страницы, и сейчас именно ею краулер добирается до глубоких постов. Курирование встаёт над списком, а не вместо него. Визуал взят с playgama.com: там номера страниц — это те же кнопки, что и везде (.yLHjx + .W4Dc5), вариант с фоном --carbon-400, высотой 40px и пилюльным радиусом; наведение осветляет на brightness(1.2), нажатие притемняет на .92. */ .pagination { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; padding: var(--space-40) 0; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 var(--space-16); border-radius: var(--radius-rounded); background: var(--color-carbon-400); color: var(--color-white); text-decoration: none; font-size: var(--fs-text-s); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; transition: filter var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out); } .pagination a:active { filter: brightness(.92); } .pagination .current { background: var(--color-purple-400); } /* Номера страниц, которых стенд не собрал: существуют на живом сайте, но здесь некликабельны — показываем приглушённо, а не прячем. */ .pagination span:not(.current):not(.dots) { color: var(--color-white-40); } .pagination .dots { background: none; color: var(--text-tertiary); min-width: auto; padding: 0 var(--space-4); } /* ---------------------------------------------------------------- single */ /* Статья — одна колонка. Боковая панель убрана: она была вторым местом на сайте с многоколоночной раскладкой. Ссылки, которые в ней жили, никуда не делись — они переехали вниз статьи, то есть внутренняя перелинковка сохранилась, а вёрстка стала одной. */ /* article.single, не просто .single: класс `single` WordPress вешает и на страницы поста, поэтому голое правило накрыло бы всю страницу. */ article.single { padding: var(--space-32) 0 var(--space-80); } .entry-header { margin-bottom: var(--space-24); } /* Раздел, дата и время чтения — одной строкой и одним стилем. Раньше раздел был отдельным капсовым чипом над заголовком, а даты — строкой под ним: два разных мелких стиля подряд ради одного и того же класса информации. */ .entry-meta a { color: var(--text-secondary); text-decoration: none; text-transform: uppercase; letter-spacing: .08em; } .entry-title { margin: var(--space-8) 0 0; color: var(--text-primary); font-family: var(--font-promo); font-weight: var(--fw-regular); font-size: var(--fs-display-xl); line-height: 1.02; letter-spacing: -0.015em; } .entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin: var(--space-16) 0 0; color: var(--color-white-40); font-size: var(--fs-text-xs); font-variant-numeric: tabular-nums; } /* Плашка служебных данных — та же геометрия, что у чипсов тем, кегль как в оглавлении. Так дата и время чтения читаются как одна группа, а не как обрывок текста под заголовком. */ .pill { display: inline-flex; align-items: center; min-height: 32px; padding: var(--space-8) var(--space-16); border-radius: var(--radius-rounded); background: var(--color-white-8); color: var(--text-tertiary); font-size: var(--fs-text-s); line-height: 1.2; } /* Answer-first. Outrank posts open with a
"Who this is for" note; the template lifts it here so a reader who came from search meets the answer, not a framed box. */ /* Лид — просто более крупный текст. Полоса слева была декором: читатель и так видит, что это первый абзац. */ .entry-lead { color: var(--text-primary); font-size: var(--fs-text-l); line-height: 1.55; margin: var(--space-24) 0; } .entry-content { color: var(--text-secondary); font-size: var(--fs-text-m); line-height: 1.65; } .entry-content > * + * { margin-top: 1.1em; } .entry-content h2 { font-family: var(--font-promo); font-weight: var(--fw-regular); font-size: var(--fs-display-l); line-height: 1.1; letter-spacing: -0.01em; color: var(--text-primary); margin-top: 1.9em; margin-bottom: .45em; } .entry-content h3 { font-family: var(--font-promo); font-weight: var(--fw-regular); font-size: var(--fs-display-s); line-height: 1.15; color: var(--text-primary); margin-top: 1.6em; margin-bottom: .4em; } .entry-content p { margin: 0; } .entry-content ul, .entry-content ol { margin: 0; padding-left: 1.4em; } .entry-content li + li { margin-top: .4em; } .entry-content strong { color: var(--text-primary); font-weight: var(--fw-medium); } .entry-content a { text-decoration: underline; text-underline-offset: 2px; } .entry-content img { border-radius: var(--radius-16); margin: 1.4em 0; } .entry-content hr { border: 0; border-top: 1px solid var(--border-default); margin: 2em 0; } /* Цитата — отступ и тонкая линия, без заливки и радиуса. */ .entry-content blockquote, .wp-block-quote { margin: 1.6em 0; padding: 0 0 0 var(--space-24); border-left: 2px solid var(--border-strong); color: var(--text-secondary); font-style: normal; } .entry-content blockquote p { margin: 0; } /* Outrank posts close with a TL;DR block — a
with its own

. That inner heading must not take section-heading styling. */ .entry-content blockquote h2, .entry-content blockquote h3 { margin: 0 0 var(--space-8); padding: 0; border: 0; font-family: var(--font-body); font-size: var(--fs-label); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .1em; color: var(--text-tertiary); } .entry-content blockquote:empty { display: none; } /* Абзац-призыв внутри текста: «Ready to jump in? Play …» со ссылкой на портал. Его ставит генератор в каждый FAQ-пост, и в потоке текста он терялся — выглядел как обычный абзац, хотя это единственное место в статье, которое зовёт куда-то нажать. */ .entry-content .entry-cta { display: inline-block; margin: 1.6em 0; padding: var(--space-16) var(--space-24); border-radius: var(--radius-rounded); background: var(--color-white-8); color: var(--text-primary); font-size: var(--fs-text-m); line-height: 1.35; } .entry-content .entry-cta a { color: var(--accent-purple-text); } .wp-block-pullquote { border: 0; padding: 0; } .wp-block-pullquote cite { display: block; margin-top: var(--space-8); color: var(--text-tertiary); font-style: normal; font-size: var(--fs-text-s); } /* Tables arrive two ways: .table-scroll-wrapper (105 of 240 sampled posts use it) and core's .wp-block-table. Both scroll inside their own box so the page body never scrolls sideways. */ .table-scroll-wrapper, .wp-block-table { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin: 1.6em 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); } /* min-width в пикселях, а не max-content. С max-content ячейка отказывается переносить текст, и таблица с целым предложением в колонке растягивалась на тысячи пикселей: колонка уезжала за край экрана, а читать приходилось прокруткой вбок. Теперь текст переносится, и вбок таблица едет только когда ей действительно тесно — на узком экране. */ .table-scroll-wrapper table, .wp-block-table table, .entry-content table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: var(--fs-text-s); color: var(--text-secondary); background: none; } .table-scroll-wrapper th, .wp-block-table th, .entry-content th { text-align: left; padding: var(--space-16) var(--space-16) var(--space-16) 0; color: var(--text-primary); font-weight: var(--fw-medium); white-space: nowrap; border-bottom: 1px solid var(--border-strong); } .table-scroll-wrapper td, .wp-block-table td, .entry-content td { padding: var(--space-16) var(--space-16) var(--space-16) 0; border-top: 1px solid var(--border-default); } .entry-content pre, .wp-block-code { background: none; border: 1px solid var(--border-default); border-radius: var(--radius-16); padding: var(--space-16); overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-text-xs); line-height: 1.5; color: var(--color-lavender-400); } .entry-content :not(pre) > code { background: var(--color-white-8); border-radius: var(--radius-6); padding: var(--space-4) var(--space-8); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; color: var(--accent-purple-text); } /* Оглавление — список со скромной линией сверху, не панель с заливкой. Класс .table-of-contents сохранён: его печатает сайт уже сегодня. Подпись «Table of Contents» тема больше не выводит, но правило для h2/h3 оставлено: если оглавление придёт из самого текста поста и со своим заголовком, он будет набран подписью, а не как заголовок раздела. */ .table-of-contents { margin: var(--space-24) 0 var(--space-32); padding: var(--space-16) 0 0; border-top: 1px solid var(--border-default); } .table-of-contents h2, .table-of-contents h3 { margin: 0 0 var(--space-16); padding: 0; border: 0; font-family: var(--font-body); font-size: var(--fs-label); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .1em; color: var(--text-tertiary); } .table-of-contents ul { margin: 0; padding: 0; list-style: none; } .table-of-contents li + li { margin-top: var(--space-4); } .table-of-contents a { display: block; line-height: 1.35; color: var(--text-secondary); text-decoration: none; font-size: var(--fs-text-s); transition: var(--transition-colors); } /* rate-my-post / FeedbackWP. Its markup also carries the CreativeWorkSeries AggregateRating that puts stars in the SERP — it has to survive the port. */ /* Оценку спрашиваем после текста, а не до него: до чтения вопрос «помогло ли» не имеет смысла и просто стоит на пути. */ .rmp-rating-widget { display: flex; align-items: center; gap: var(--space-16); margin: var(--space-40) 0 0; padding: 0; } .rmp-rating-widget__title { color: var(--text-tertiary); margin: 0; } .rmp-icon--star { display: inline-flex; gap: var(--space-4); color: var(--color-golden-400); } .rmp-icon--star svg { fill: currentColor; display: block; } .rmp-icon--star .is-empty { display: inline-flex; gap: var(--space-4); color: var(--color-white-16); } .rmp-rating-widget__count { color: var(--text-tertiary); } /* Play-the-game call to action. Every sampled FAQ post links the portal — 52% a specific game, 48% a category — so this block always has a target. */ .game-cta { display: flex; gap: var(--space-24); align-items: center; margin: var(--space-40) 0; padding: 0; } .game-cta__art { flex: 0 0 148px; aspect-ratio: 16/9; } .game-cta__art img { width: 100%; height: 100%; object-fit: cover; clip-path: url(#pg-squircle); } .game-cta__body { flex: 1; min-width: 0; } .game-cta__kicker { text-transform: uppercase; letter-spacing: .1em; color: var(--text-tertiary); font-size: var(--fs-label); font-weight: var(--fw-medium); } .game-cta__title { margin: var(--space-4) 0 var(--space-16); color: var(--text-primary); } /* Aside replaces the old #secondary sidebar. It carries internal links, which is why it cannot simply be dropped: the sidebar is what links deep posts. */ .entry-more { margin-top: var(--space-64); padding-top: var(--space-24); border-top: 1px solid var(--border-default); } .entry-more ul { list-style: none; margin: 0; padding: 0; } .entry-more li + li { margin-top: var(--space-16); } .entry-more a { color: var(--text-primary); text-decoration: none; font-size: var(--fs-text-l); line-height: 1.35; display: block; transition: var(--transition-colors); } /* ---------------------------------------------------------------- search / 404 */ /* Поле поиска — один контейнер с кнопкой внутри, как в мессенджерах. Раньше это было голое подчёркивание, и поле не читалось как поле: непонятно, куда кликать и где оно заканчивается. Рамка рисуется на всём блоке, фокус подсвечивает его целиком, а не только строку ввода. */ .search-form { display: flex; align-items: center; gap: var(--space-8); background: var(--color-white-8); border: 1px solid transparent; border-radius: var(--radius-rounded); padding: var(--space-8) var(--space-8) var(--space-8) var(--space-24); margin: var(--space-24) 0 var(--space-16); transition: var(--transition-colors); } .search-form:focus-within { background: var(--color-white-8); border-color: var(--color-purple-400); } .search-field { flex: 1; min-width: 0; background: none; border: 0; padding: 0; height: 40px; color: var(--text-primary); font: inherit; font-size: var(--fs-text-m); appearance: none; } /* Крестик очистки в WebKit ломает вертикальный ритм строки — убираем. */ .search-field::-webkit-search-cancel-button { display: none; } .search-field::placeholder { color: var(--text-tertiary); } .search-field:focus { outline: none; } .state { text-align: center; padding: var(--space-80) var(--space-24); } .state__code { font-family: var(--font-promo); font-size: var(--fs-display-xxl); line-height: 1; color: var(--color-purple-400); margin: 0; } .state h1 { margin: var(--space-16) 0 var(--space-8); color: var(--text-primary); font-family: var(--font-promo); font-weight: var(--fw-regular); font-size: var(--fs-display-xl); line-height: 1.05; letter-spacing: -0.01em; } .state p { color: var(--text-tertiary); margin: 0 auto var(--space-24); max-width: 52ch; } /* Свежие посты в подвале. Тихий список, а не витрина: он тут ради ссылок, а не ради внимания — сразу под ним идёт каталог на 213 ссылок, и две заметные конструкции подряд читались бы как свалка. */ .footer-latest { max-width: 800px; margin: var(--space-64) auto 0; padding: 0 var(--space-24); } .footer-latest .section-label { margin-bottom: var(--space-16); } .footer-latest ul { list-style: none; margin: 0; padding: 0; columns: 240px auto; column-gap: var(--space-32); } .footer-latest li { break-inside: avoid; margin-bottom: var(--space-8); } .footer-latest a { color: var(--text-secondary); text-decoration: none; font-size: var(--fs-text-s); line-height: 1.35; transition: var(--transition-colors); } /* -------------------------------------------------- games categories ----- Каталог категорий игр: 213 ссылок на портал, перенесён из подвала живого блога. Набран мелко и тихо намеренно — это справочник и ссылочная конструкция, а не раздел для чтения. Колонки раскладываются потоком, чтобы на любой ширине не оставалось дыр. */ .game-cats { border-top: 1px solid var(--border-default); margin-top: var(--space-64); padding: var(--space-40) var(--space-24) var(--space-24); max-width: 800px; margin-left: auto; margin-right: auto; } .game-cats__title { margin-bottom: var(--space-24); } .game-cats__grid { columns: 180px auto; column-gap: var(--space-32); } .cat-group { break-inside: avoid; margin-bottom: var(--space-24); } .cat-group__letter { font-family: var(--font-promo); font-weight: var(--fw-regular); font-size: var(--fs-text-m); color: var(--text-primary); margin: 0 0 var(--space-8); } .game-cats ul { list-style: none; margin: 0; padding: 0; } .game-cats li + li { margin-top: var(--space-4); } .game-cats a { color: var(--text-tertiary); text-decoration: none; font-size: var(--fs-text-xs); line-height: 1.4; transition: var(--transition-colors); } /* ---------------------------------------------------- contacts footer ----- Перенесён дословно с лендинга about-us (platform-landings/public/about-us — блок
). Имена классов сохранены (.au-*), чтобы перенос был прослеживаем и чтобы правки на лендинге можно было переносить сюда диффом. Порядок на странице: почты, соцсети, юридический блок, маскот — как на живой странице. В исходной разметке соцсети идут первыми; здесь порядок приведён к отрисованному. Блок светло-лавандовый и на тёмном блоге читается как отдельная плита — так он и выглядит на about-us. Иконки соцсетей рисуются маской по SVG, поэтому цвет задаётся через background-color, а не fill. -------------------------------------------------------------------------- */ .au-contacts { /* Не лавандовая плита, как на лендинге: на тёмном блоге блок живёт на общем фоне и отделяется волосяной линией — как все остальные секции. */ background: none; border-top: 1px solid var(--border-default); padding: var(--space-64) 0; } .au-contacts-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-32); } .au-social { display: flex; /* На широком экране все десять иконок стоят одной строкой: 10x32 плюс девять зазоров по 24 — это 536px, в колонку 800px помещается с запасом. Перенос включается только в мобильной ветке ниже, сеткой 5 на 2. */ flex-wrap: nowrap; justify-content: center; gap: var(--space-24); } .au-social a { display: block; width: 32px; height: 32px; } /* Внимание при переносе в тему: url() внутри кастомного свойства --icon резолвится относительно ЭТОГО файла стилей, а не относительно страницы. Поэтому в разметке пути записаны как ../icons/… — от /assets/css/. */ .au-social i { display: block; width: 100%; height: 100%; background-color: var(--text-secondary); mask: var(--icon) center / contain no-repeat; -webkit-mask: var(--icon) center / contain no-repeat; transition: background-color var(--duration-base) var(--ease-out); } .au-emails { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); } .au-email-row { display: flex; align-items: center; gap: var(--space-8); } .au-email-tag { background: var(--color-white-8); border-radius: 40px; padding: var(--space-8) var(--space-8); font-size: var(--fs-label); font-weight: var(--fw-medium); line-height: 1.2; text-transform: uppercase; color: var(--text-tertiary); } .au-email-row a { font-size: var(--fs-text-xs); line-height: 1.2; color: var(--text-primary); text-decoration: none; } .au-legal { margin: 0; color: var(--text-tertiary); font-size: var(--fs-text-xs); line-height: 1.3; text-align: center; color: var(--text-tertiary); } .au-legal a { color: var(--text-secondary); } .au-mascot { display: flex; flex-direction: column; align-items: center; margin-top: var(--space-16); } .au-mascot-art { max-width: 240px; height: auto; display: block; } @media (max-width: 700px) { .au-emails { order: -1; } .au-email-row { flex-direction: column; gap: var(--space-4); } .au-email-row a { font-size: min(13px, 4vw); } .au-social { /* Колонки по размеру иконки, а не 1fr: при 1fr колонки растягивались на всю ширину и зазор доходил до 83px. Ширина группы теперь равна содержимому, а сама группа центрируется. */ display: grid; grid-template-columns: repeat(5, 32px); justify-content: center; gap: var(--space-24); width: auto; } } /* ---------------------------------------------------------------- footer */ .site-footer { border-top: 1px solid var(--border-default); margin-top: var(--space-64); padding: var(--space-40) 0; color: var(--text-tertiary); } .site-footer a { color: var(--text-secondary); text-decoration: none; } /* ------------------------------------------------- WordPress output ------- Markup printed by WordPress itself and by the installed plugins. The bench drew simplified stand-ins for these; what follows covers them in the shape the live site actually emits. */ /* WordPress hides screen-reader captions with this class and expects the theme to define it. Undefined, the words "Posts navigation" and "Skip to content" simply appear on the page. */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .screen-reader-text:focus { position: static !important; width: auto; height: auto; margin: 0; clip-path: none; white-space: normal; } /* Pagination. the_posts_pagination() wraps the numbers in