/* Theme Name: Знак по дате Theme URI: https://znakpodate.ru/ Author: znakpodate.ru Description: Классическая тема справочника «знак зодиака по дате рождения». Без блочного редактора, без jQuery, без внешних запросов. Version: 1.0 Requires at least: 6.4 Requires PHP: 8.1 Text Domain: znakpodate */ /* ═══════════════════════════════════════════════════════════════════════ Система дизайна. Цвет здесь — данные, а не украшение. Сайт рассказывает про один момент: Солнце пересекает границу и меняет стихию. Стихий четыре, и они уже встроены в предмет. Значит цвет страницы может нести смысл: страница знака окрашена цветом его стихии, и читатель на третьей странице начинает узнавать свой цвет без подписи. На спорной дате это работает буквально. 23 августа — Лев (огонь) против Девы (земля): две краски стоят рядом как две чаши весов. Это изображение самого конфликта, ради которого сайт сделан, а не контраст ради красоты. Пигменты взяты не из веб-палитр, а из тех, которыми от руки раскрашивали звёздные атласы XVII–XIX веков: марена, жжёная охра, вайда, берлинская лазурь. Они приглушённые и не спорят друг с другом на одной странице. Хром намеренно нейтральный — чернила на холодном белом. Всё цветное на странице относится к знаку, и ничего кроме. Соседний проект держит одну константную пару индиго с латунью на тёплой бумаге. Спутать невозможно, а это требование развязки. ═══════════════════════════════════════════════════════════════════════ */ :root { --zpd-bg: #ffffff; --zpd-bg-2: #f4f5f7; --zpd-bg-3: #eaecf0; --zpd-ink: #14131a; /* типографская чернь с фиолетовым подтоном */ --zpd-ink-2: #4c4a58; --zpd-ink-3: #777584; /* 4,5:1 на белом: подписи мелкие, послабления нет */ --zpd-line: #e4e3e9; --zpd-line-2: #cfced8; /* Пигменты стихий. Проверены на контраст с белым: все выше 5,5:1, то есть годятся не только для заливки, но и для текста. */ --zpd-fire: #a6392b; /* марена — Овен, Лев, Стрелец */ --zpd-fire-bg: #fbefec; --zpd-fire-line: #eed6d0; --zpd-earth: #7a5a12; /* охра жжёная — Телец, Дева, Козерог */ --zpd-earth-bg: #f8f2e3; --zpd-earth-line:#e8dcc0; --zpd-air: #4f4a7a; /* вайда — Близнецы, Весы, Водолей */ --zpd-air-bg: #f0eff7; --zpd-air-line: #d9d7ea; --zpd-water: #1a4c66; /* берлинская лазурь — Рак, Скорпион, Рыбы */ --zpd-water-bg: #e9f1f6; --zpd-water-line:#cfe0ea; /* Цвет текущей страницы. Шаблон подставляет пигмент её знака; на служебных страницах остаются чернила, и страница выходит нейтральной. */ --zpd-a: var(--zpd-ink); --zpd-a-bg: var(--zpd-bg-2); --zpd-a-line: var(--zpd-line); /* Цвет второго знака на спорной дате. */ --zpd-b: var(--zpd-ink-2); --zpd-b-bg: var(--zpd-bg-2); --zpd-b-line: var(--zpd-line); --zpd-font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; --zpd-w: 46rem; --zpd-w-wide: 68rem; --zpd-radius: 10px; } /* Стихия задаётся классом на или на блоке — так пигмент попадает разом и в заголовок, и в карточку, и в ссылки, без повторения в разметке. */ .zpd-e-fire { --zpd-a: var(--zpd-fire); --zpd-a-bg: var(--zpd-fire-bg); --zpd-a-line: var(--zpd-fire-line); } .zpd-e-earth { --zpd-a: var(--zpd-earth); --zpd-a-bg: var(--zpd-earth-bg); --zpd-a-line: var(--zpd-earth-line); } .zpd-e-air { --zpd-a: var(--zpd-air); --zpd-a-bg: var(--zpd-air-bg); --zpd-a-line: var(--zpd-air-line); } .zpd-e-water { --zpd-a: var(--zpd-water); --zpd-a-bg: var(--zpd-water-bg); --zpd-a-line: var(--zpd-water-line); } .zpd-b-fire { --zpd-b: var(--zpd-fire); --zpd-b-bg: var(--zpd-fire-bg); --zpd-b-line: var(--zpd-fire-line); } .zpd-b-earth { --zpd-b: var(--zpd-earth); --zpd-b-bg: var(--zpd-earth-bg); --zpd-b-line: var(--zpd-earth-line); } .zpd-b-air { --zpd-b: var(--zpd-air); --zpd-b-bg: var(--zpd-air-bg); --zpd-b-line: var(--zpd-air-line); } .zpd-b-water { --zpd-b: var(--zpd-water); --zpd-b-bg: var(--zpd-water-bg); --zpd-b-line: var(--zpd-water-line); } *, *::before, *::after { box-sizing: border-box; } /* 🔴 Атрибут hidden проигрывает любому классу с display. Скрывать элемент им — общепринятый приём, и в разметке калькулятора поля часа и минут помечены именно так. Но display: none у hidden приходит из стилей браузера, а `.zpd-calc__row { display: flex }` — из наших: по специфичности класс сильнее, и поля времени стояли открытыми при снятой галочке «знаю время рождения». Форма выглядела вдвое сложнее, чем она есть, и на телефоне это лишний экран прокрутки. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--zpd-bg); color: var(--zpd-ink); font-family: var(--zpd-font); font-size: 1.0625rem; line-height: 1.65; /* Цифр на этом сайте больше, чем на обычном сайте: градусы, проценты, годы, даты. Моноширинные цифры не дают колонкам таблиц дёргаться. */ font-variant-numeric: tabular-nums; } a { color: var(--zpd-a); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--zpd-ink); } h1, h2, h3 { line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; } h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.4rem); margin: 0 0 .6rem; } h2 { font-size: 1.4rem; margin: 2.4rem 0 .8rem; } h3 { font-size: 1.13rem; margin: 1.8rem 0 .5rem; } p { margin: 0 0 1.05rem; } .zpd-wrap { width: 100%; max-width: var(--zpd-w); margin-inline: auto; padding-inline: 1.15rem; } .zpd-wide { width: 100%; max-width: var(--zpd-w-wide); margin-inline: auto; padding-inline: 1.15rem; } /* ── шапка ──────────────────────────────────────────────────────────── */ .zpd-header { border-bottom: 1px solid var(--zpd-line); background: var(--zpd-bg); position: sticky; top: 0; z-index: 20; } .zpd-header__in { display: flex; align-items: center; gap: 1.5rem; min-height: 3.75rem; } .zpd-logo { font-weight: 700; font-size: 1.06rem; letter-spacing: -0.02em; color: var(--zpd-ink); text-decoration: none; white-space: nowrap; } .zpd-logo b { color: var(--zpd-a); } .zpd-nav { display: flex; gap: 1.15rem; flex-wrap: wrap; margin-left: auto; list-style: none; margin-block: 0; padding: 0; } .zpd-nav a { color: var(--zpd-ink-2); text-decoration: none; font-size: .94rem; font-weight: 500; } .zpd-nav a:hover { color: var(--zpd-a); } /* ── крошки ─────────────────────────────────────────────────────────── */ .zpd-crumbs { font-size: .84rem; color: var(--zpd-ink-3); margin: 1.4rem 0 .9rem; } .zpd-crumbs a { color: var(--zpd-ink-3); text-decoration: none; } .zpd-crumbs a:hover { color: var(--zpd-a); text-decoration: underline; } .zpd-crumbs span + span::before { content: " → "; color: var(--zpd-line-2); } /* ── ответ: главный блок страницы даты ──────────────────────────────── */ /* Читатель пришёл за одним словом. Оно должно быть крупным, первым и читаться, не требуя прокрутки, даже на узком телефоне. */ .zpd-answer { border: 1px solid var(--zpd-line); border-radius: var(--zpd-radius); overflow: hidden; margin: 0 0 1.6rem; } .zpd-answer__row { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; padding: 1.05rem 1.15rem; } .zpd-answer__row + .zpd-answer__row { border-top: 1px dashed var(--zpd-line); } .zpd-answer__main { background: var(--zpd-a-bg); } .zpd-answer__alt { background: var(--zpd-b-bg); } .zpd-answer__sign { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .zpd-answer__main .zpd-answer__sign { color: var(--zpd-a); } .zpd-answer__alt .zpd-answer__sign { color: var(--zpd-b); } .zpd-answer__share { font-weight: 700; font-size: 1.02rem; } .zpd-answer__note { color: var(--zpd-ink-2); font-size: .95rem; flex-basis: 100%; } /* ── карточка фактов ────────────────────────────────────────────────── */ /* Линии сетки рисуют САМИ ячейки, а не фон контейнера. Раньше контейнер был залит цветом линии, а ячейки — белым, и разделители получались из зазоров. Приём работает, пока ряды полные: у страницы знака фактов четыре, а колонок на широком экране три — и «пустая» половина второго ряда оставалась залитой серым, будто карточка сломалась. Тень шириной в зазор даёт те же линии, но только там, где есть содержимое. */ .zpd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--zpd-bg); border: 1px solid var(--zpd-line); border-radius: var(--zpd-radius); overflow: hidden; margin: 1.6rem 0; } .zpd-fact { background: var(--zpd-bg); padding: .85rem 1rem; box-shadow: 0 0 0 1px var(--zpd-line); } .zpd-fact__k { font-size: .82rem; color: var(--zpd-ink-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .15rem; } .zpd-fact__v { font-weight: 600; font-size: 1.02rem; } .zpd-fact__v small { display: block; font-weight: 400; font-size: .84rem; color: var(--zpd-ink-2); } /* ── предупреждение о спорной дате ──────────────────────────────────── */ .zpd-warn { border-left: 3px solid var(--zpd-b); background: var(--zpd-b-bg); border-radius: 0 var(--zpd-radius) var(--zpd-radius) 0; padding: .95rem 1.15rem; margin: 1.6rem 0; } .zpd-warn strong { color: var(--zpd-b); } .zpd-warn p:last-child { margin-bottom: 0; } /* ── таблица лет ────────────────────────────────────────────────────── */ /* Список лет-исключений выводит шаблон, а не текст статьи: сорок чисел в абзаце нечитаемы, а в сетке ищутся глазом за секунду. */ .zpd-years { margin: 1.2rem 0; } .zpd-years__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); gap: .35rem; } .zpd-year { text-align: center; padding: .34rem .2rem; border-radius: 6px; font-size: .92rem; font-weight: 600; background: var(--zpd-b-bg); color: var(--zpd-b); border: 1px solid var(--zpd-b-line); } .zpd-years__cap { font-size: .87rem; color: var(--zpd-ink-2); margin-bottom: .5rem; } /* ── калькулятор ────────────────────────────────────────────────────── */ .zpd-calc { border: 1px solid var(--zpd-line-2); border-radius: var(--zpd-radius); background: var(--zpd-bg-2); padding: 1.25rem; margin: 1.5rem 0 2rem; } .zpd-calc__row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; } .zpd-field { display: flex; flex-direction: column; gap: .28rem; } .zpd-field label { font-size: .8rem; color: var(--zpd-ink-2); font-weight: 500; } /* Поля рисуем сами, иначе их рисует система. ───────────────────────────────────────────── Рамку и радиус мы задали, а всё остальное у осталось системным: свой значок раскрытия, свои стрелки-крутилки, своя высота строки. Из-за разной высоты полей подписи в ряду разъезжались по вертикали (ряд выровнен по нижнему краю), и «Месяц» стоял ниже «Дня». Плюс на каждой ОС свой вид: у macOS одни стрелки, у Windows другие — сайт выглядел собранным из чужих деталей. Лечение: снять системную отрисовку, задать ОДНУ высоту на всё, включая кнопку, и нарисовать значок раскрытия своей стрелкой. */ .zpd-field input, .zpd-field select, .zpd-btn { height: 2.85rem; } .zpd-field input, .zpd-field select { font: inherit; font-size: 1rem; padding: 0 .65rem; border: 1px solid var(--zpd-line-2); border-radius: 7px; background: var(--zpd-bg); color: var(--zpd-ink); min-width: 5rem; appearance: none; -webkit-appearance: none; } /* Крутилки у числовых полей не нужны: возраст стрелками не набирают, а места они съедают столько же, сколько сама цифра. */ .zpd-field input[type="number"] { -moz-appearance: textfield; } .zpd-field input[type="number"]::-webkit-outer-spin-button, .zpd-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Своя стрелка вместо системной. Цвет вшит в картинку (--zpd-ink-2), переменные внутрь data-URI не проходят. */ .zpd-field select { padding-right: 2.1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%234c4a58' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; cursor: pointer; } .zpd-field input:focus, .zpd-field select:focus { outline: 2px solid var(--zpd-a); outline-offset: 1px; border-color: var(--zpd-a); } .zpd-field input::placeholder { color: var(--zpd-ink-3); } .zpd-btn { font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; padding: 0 1.3rem; border: 0; border-radius: 7px; background: var(--zpd-a); color: #fff; } .zpd-btn:hover { background: var(--zpd-ink); } .zpd-calc__opt { margin-top: .8rem; font-size: .88rem; color: var(--zpd-ink-2); } /* Галочка: цвет от страницы, а не системный синий или зелёный. Строка — flex, чтобы длинная подпись переносилась ровно под собой, а не под квадратиком. */ .zpd-calc__opt > label { display: flex; align-items: flex-start; gap: .5rem; cursor: pointer; line-height: 1.45; } .zpd-calc__opt input[type="checkbox"] { accent-color: var(--zpd-a); width: 1.05rem; height: 1.05rem; margin: .16rem 0 0; flex: none; cursor: pointer; } .zpd-calc__out { margin-top: 1.15rem; } .zpd-calc__out:empty { display: none; } /* ── списки ссылок (даты знака, декады) ─────────────────────────────── */ .zpd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .4rem; margin: 1.1rem 0 1.8rem; padding: 0; list-style: none; } .zpd-grid a { display: block; text-align: center; padding: .45rem .3rem; border: 1px solid var(--zpd-line); border-radius: 7px; text-decoration: none; color: var(--zpd-ink-2); font-size: .93rem; background: var(--zpd-bg); } .zpd-grid a:hover { border-color: var(--zpd-a); color: var(--zpd-a); background: var(--zpd-a-bg); } .zpd-grid a.is-edge { border-color: var(--zpd-b-line); background: var(--zpd-b-bg); color: var(--zpd-b); } /* ── карточки знаков и указатели ────────────────────────────────────── */ /* Двенадцать одинаковых прямоугольников читаются как список, и только. Здесь у каждой карточки пигмент своей стихии — тот же, каким окрашена страница этого знака, — и список сам собой распадается на четыре видимые группы по три. Читатель замечает деление на стихии раньше, чем прочитает слово «стихия», а перейдя на страницу знака, видит тот же цвет и понимает, что попал куда шёл. */ .zpd-signs { list-style: none; margin: 1.2rem 0 2rem; padding: 0; display: grid; gap: .55rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } .zpd-signs a { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; padding: .8rem .9rem; height: 100%; border: 1px solid var(--zpd-a-line); border-radius: var(--zpd-radius); background: var(--zpd-a-bg); color: var(--zpd-ink); text-decoration: none; } .zpd-signs a:hover { border-color: var(--zpd-a); } .zpd-signcard__g { grid-row: 1 / span 3; font-size: 2.1rem; line-height: 1; color: var(--zpd-a); font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "DejaVu Sans", serif; font-variant-emoji: text; } .zpd-signcard__n { font-weight: 700; font-size: 1.05rem; color: var(--zpd-a); } .zpd-signcard__d { font-size: .88rem; color: var(--zpd-ink-2); } .zpd-signcard__m { font-size: .8rem; color: var(--zpd-ink-3); } /* Таблица по месяцам — самый спрашиваемый свод раздела. */ .zpd-months { width: 100%; border-collapse: collapse; margin: 1.1rem 0 2rem; font-size: .95rem; } .zpd-months th, .zpd-months td { text-align: left; vertical-align: top; padding: .6rem .7rem; border-bottom: 1px solid var(--zpd-line); } .zpd-months thead th { font-size: .82rem; color: var(--zpd-ink-3); text-transform: uppercase; letter-spacing: .04em; } .zpd-months tbody th { font-weight: 700; white-space: nowrap; } .zpd-months a { text-decoration: none; color: var(--zpd-ink); } .zpd-months a:hover { color: var(--zpd-a); } .zpd-months small { color: var(--zpd-ink-3); } .zpd-glyph--sm { font-size: 1.05em; vertical-align: -.1em; } .zpd-dash { color: var(--zpd-ink-3); } /* Календарь: 366 дней, каждый в один клик от узла. */ .zpd-cal { list-style: none; margin: .8rem 0 1.8rem; padding: 0; display: grid; gap: .35rem; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); } .zpd-cal a { display: block; text-align: center; padding: .5rem .2rem; border: 1px solid var(--zpd-line); border-radius: 7px; text-decoration: none; color: var(--zpd-ink-2); background: var(--zpd-bg); line-height: 1.25; } .zpd-cal a b { display: block; font-size: 1.02rem; color: var(--zpd-ink); } .zpd-cal a small { font-size: .75rem; color: var(--zpd-ink-3); } /* Пограничные дни — цветом своего знака: их видно, не читая подписей. */ .zpd-cal a.is-edge { border-color: var(--zpd-a-line); background: var(--zpd-a-bg); } .zpd-cal a.is-edge b, .zpd-cal a.is-edge small { color: var(--zpd-a); } .zpd-cal a:hover { border-color: var(--zpd-a); } @media (max-width: 40rem) { .zpd-signs { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); } .zpd-signcard__g { font-size: 1.7rem; } .zpd-cal { grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); } .zpd-months th, .zpd-months td { padding: .5rem .4rem; } } /* ── глиф знака и буквица ───────────────────────────────────────────── */ /* Ряд шрифтов здесь не украшение, а страховка. Onest подрезан до кириллицы с латиницей, глифов зодиака в нём нет; если не назвать символьные шрифты явно, система вольна дойти до шрифта эмодзи — и вместо линейного знака покажет цветной значок. Разметка со своей стороны просит текстовое начертание символом U+FE0E (см. zpd_glyph). */ .zpd-glyph { font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "DejaVu Sans", serif; color: var(--zpd-a); line-height: 1; font-size: 1.5em; font-variant-emoji: text; } /* Второй знак спорной даты берёт свой пигмент — как и его название рядом. */ .zpd-answer__alt .zpd-glyph { color: var(--zpd-b); } /* Глиф равняется по ПЕРВОЙ строке заголовка, а не по его середине. На узком экране «Лев: 23 июля — 22 августа, характеристика знака» занимает четыре строки, и глиф, выровненный по центру, повисал сбоку сам по себе. У первой строки он читается как инициал — то, чем и является. */ .zpd-signhead { display: flex; align-items: flex-start; gap: 1rem; margin: 0 0 .6rem; } .zpd-signhead h1 { margin: 0; } .zpd-glyph--big { font-size: 3.4rem; flex: none; /* Оптическая посадка: у символьных шрифтов своя высота строки, и глиф без сдвига встаёт выше прописной буквы соседней строки. */ margin-top: -.12em; } /* Буквица. ───────── Страница знака — это сплошной текст на пять-шесть тысяч знаков, и на телефоне он читается как стена. Буквица разбивает её на видимые части, не требуя ни подзаголовков, которых в тексте нет, ни картинок, которых мы не рисуем. Засечная гарнитура выбрана намеренно: одна крупная буква с засечками рядом с рубленым текстом даёт тот самый контраст, ради которого буквицу и ставят. Три строки высотой — классическая мера, ниже она читается как опечатка, выше начинает спорить с заголовком. */ .zpd-text--drop > p::first-letter { float: left; font-family: Georgia, "Times New Roman", "Noto Serif", serif; font-size: 3.1em; line-height: .84; font-weight: 400; color: var(--zpd-a); margin: .06em .12em 0 0; } /* Абзац сразу после буквицы не должен «висеть» на её хвосте. */ .zpd-text--drop > p { clear: both; } @media (max-width: 40rem) { .zpd-signhead { gap: .7rem; } .zpd-glyph--big { font-size: 2.6rem; } .zpd-text--drop > p::first-letter { font-size: 2.8em; } } /* ── содержимое страницы ────────────────────────────────────────────── */ /* Всё, что попадает внутрь .zpd-text, приходит из двух источников: текст модели и вручную написанные служебные страницы. У первого разметки нет по условию — генератор штрафует её, — а второй пишется руками, и однажды там появится список. До сих пор для списков не было НИ ОДНОГО правила: браузер дал бы им свой отступ в 40 пикселей против нуля у абзацев, и на телефоне это заметный уступ вбок посреди ровного текста. Поэтому отступы списков привязаны к тем же величинам, что у абзаца: снизу столько же, сколько у

, слева ровно на маркер. Сам маркер красится пигментом стихии страницы — тем же, что заголовок и рамки. */ .zpd-text > :first-child { margin-top: 0; } .zpd-text > :last-child { margin-bottom: 0; } .zpd-text ul, .zpd-text ol { margin: 0 0 1.05rem; padding-left: 1.4rem; } .zpd-text li { margin-bottom: .4rem; } .zpd-text li:last-child { margin-bottom: 0; } .zpd-text li::marker { color: var(--zpd-a); } /* Вложенный список — часть родительского пункта, а не новый абзац. */ .zpd-text li > ul, .zpd-text li > ol { margin: .4rem 0 0; } .zpd-text blockquote { margin: 1.5rem 0; padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--zpd-a-line); color: var(--zpd-ink-2); } .zpd-text hr { border: 0; border-top: 1px solid var(--zpd-line); margin: 2rem 0; } /* Картинка в тексте не должна распирать страницу на телефоне. */ .zpd-text img { max-width: 100%; height: auto; display: block; } .zpd-text figure { margin: 1.5rem 0; } .zpd-text figcaption { font-size: .84rem; color: var(--zpd-ink-3); margin-top: .4rem; } .zpd-text a { color: var(--zpd-a); } /* Таблица в тексте: правило border-collapse было, а ячейки не оформлены вовсе — первая же таблица выглядела бы чужой. И ей нужен свой прокрут, иначе широкая таблица утащит вбок всю страницу. */ .zpd-text table { margin: 1.5rem 0; font-size: .94rem; } .zpd-text th, .zpd-text td { padding: .5rem .7rem; border-bottom: 1px solid var(--zpd-line); text-align: left; } .zpd-text th { font-weight: 600; color: var(--zpd-ink-2); } /* ── соседние дни ───────────────────────────────────────────────────── */ .zpd-adjacent { display: flex; gap: .6rem; justify-content: space-between; margin: 2rem 0 1rem; font-size: .95rem; } .zpd-adjacent a { text-decoration: none; color: var(--zpd-ink-2); } .zpd-adjacent a:hover { color: var(--zpd-a); } /* ── попадание пальцем и клавиатура ─────────────────────────────────── */ /* Ссылки в шапке, подвале и переходах «вчера/завтра» — это голый текст без отступов: высота строки 23–26 пикселей при рекомендованных 44. На мышке разницы нет, на телефоне это промахи, а телефон здесь — 90 % посетителей. Приём: вертикальный отступ добавляем, а ровно на столько же уменьшаем внешний. Зона нажатия вырастает до нужной, а видимая вёрстка не сдвигается ни на пиксель — иначе пришлось бы заново подбирать все соседние отступы. */ .zpd-nav a, .zpd-footer__nav a, .zpd-adjacent a, .zpd-crumbs a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; } /* Обводка при переходе с клавиатуры. Своих правил фокуса не было вовсе, а у ссылок с убранным подчёркиванием браузерная обводка — единственный признак того, где сейчас курсор. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--zpd-a); outline-offset: 2px; border-radius: 3px; } /* ── подвал ─────────────────────────────────────────────────────────── */ .zpd-footer { margin-top: 3.5rem; border-top: 1px solid var(--zpd-line); background: var(--zpd-bg-2); padding: 1.8rem 0 2.4rem; font-size: .9rem; color: var(--zpd-ink-2); } .zpd-footer a { color: var(--zpd-ink-2); } .zpd-footer__nav { display: flex; gap: 1.1rem; flex-wrap: wrap; margin: 0 0 .9rem; list-style: none; padding: 0; } .zpd-disclaimer { font-size: .84rem; color: var(--zpd-ink-3); max-width: 42rem; } .zpd-updated { font-size: .84rem; color: var(--zpd-ink-3); margin-top: 2rem; } /* ── мелочи ─────────────────────────────────────────────────────────── */ .zpd-lead { font-size: 1.13rem; color: var(--zpd-ink-2); } table { border-collapse: collapse; width: 100%; } .zpd-scroll { overflow-x: auto; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; } /* ── Поделиться ────────────────────────────────────────────────────────── Кнопки одноцветные, а фирменный цвет появляется только под курсором и в фокусе. Причина в правиле системы: на этих страницах цветное значит знак зодиака и ничего больше. Четыре чужих логотипа в своих красках забирают внимание у ответа, ради которого читатель пришёл, — а узнаются они и по форме значка с подписью рядом. Мишень 44 пикселя набрана честной высотой, а не отступами вокруг: кнопки стоят в ряд и переносятся, и отрицательные поля здесь сцепились бы. */ .zpd-share { margin: 2.5rem 0 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--zpd-line); } .zpd-share__cap { font-size: .95rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--zpd-ink-3); margin: 0 0 .8rem; } .zpd-share__row { display: flex; flex-wrap: wrap; gap: .5rem; } .zpd-share__btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .95rem; border: 1px solid var(--zpd-line-2); border-radius: 999px; background: var(--zpd-bg); color: var(--zpd-ink-2); font: inherit; font-size: .92rem; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; transition: color .12s, border-color .12s, background-color .12s; } .zpd-share__ico { flex: none; } .zpd-share__btn:hover, .zpd-share__btn:focus-visible { border-color: currentColor; background: var(--zpd-bg-2); } .zpd-share__btn--tg:hover, .zpd-share__btn--tg:focus-visible { color: #1f8fc4; } /* Оттенок MAX подобран на глаз по фирменному сине-фиолетовому: точного значения в открытых материалах нет. Меняется одной строкой. */ .zpd-share__btn--max:hover, .zpd-share__btn--max:focus-visible { color: #4a56d2; } .zpd-share__btn--vk:hover, .zpd-share__btn--vk:focus-visible { color: #0062d1; } .zpd-share__btn--ok:hover, .zpd-share__btn--ok:focus-visible { color: #d2740a; } .zpd-share__btn--wa:hover, .zpd-share__btn--wa:focus-visible { color: #1a9e4b; } .zpd-share__btn--copy:hover, .zpd-share__btn--copy:focus-visible { color: var(--zpd-ink); } .zpd-share__btn.is-done { color: var(--zpd-ink); border-color: var(--zpd-ink); background: var(--zpd-bg-2); } /* Телефон — не крайний случай, а основной. Замер Вордстата: 90 % запросов раздела идут с телефона (92 % на «какой знак зодиака»). Поэтому узкий экран правится по данным, а не по остаточному принципу: подписи не мельче 13 пикселей, ссылки в сетках с запасом на палец. */ @media (max-width: 40rem) { body { font-size: 1rem; } .zpd-fact__k { font-size: .84rem; } .zpd-grid a { padding: .6rem .3rem; } .zpd-year { padding: .45rem .2rem; } /* Пунктов в шапке стало четыре, и в 360 пикселей они с логотипом больше не помещаются: меню переносилось вторым рядом вплотную к логотипу и выглядело сломанным. Переносим его целой строкой под логотип — так это читается как решение, а не как авария. */ .zpd-header__in { gap: .3rem .8rem; min-height: 0; flex-wrap: wrap; padding-block: .5rem; } .zpd-nav { width: 100%; margin-left: 0; gap: 1.1rem; } .zpd-nav a { font-size: .88rem; } /* Подписи длинные («Одноклассники»), и в 360 пикселей четыре кнопки в строку не встают. Перенос оставляем, поля ужимаем. */ .zpd-share__btn { font-size: .88rem; padding: 0 .8rem; gap: .4rem; } .zpd-share__row { gap: .45rem; } }