мерой не ограничиваю: у неё плюс прижат к правому
краю через space-between, и обрезка меры увела бы его на середину
строки, заодно сузив область нажатия. */
.rsk-vo details p { max-width: var(--rsk-mera, 66ch); }
/* ----------------------------------------------------------------------
ПРИЁМ 7. КРОМКА: ВИСЯЧИЕ СЛОВА И ПЕРЕНОСЫ
----------------------------------------------------------------------
было: перенос там, где кончилось место. Отсюда абзацы, у которых
последняя строка — огрызок в одно слово; на тёмном фоне такая
строка читается как конец текста, и человек останавливается
раньше времени.
стало: text-wrap: pretty — браузер перебирает переносы по абзацу
целиком и не оставляет одинокое слово в последней строке.
зачем: дешевле этого приёма нет ничего, и он уже применяется в
проекте (site.css у .quote, здесь у .rsk-trakt p в строке
3076) — планка браузеров не поднимается, а где свойство не
знают, всё остаётся как было.
ПЕРЕНОСЫ ПО СЛОГАМ — ТОЛЬКО ДО 560 px. Там в строку встаёт 28 знаков
(320 px) и 36 знаков (390 px), а русские слова длинные: самое длинное
в этих текстах — «недоговорённости» и «регистрироваться», по 16
знаков. Такое слово оставляет в предыдущей строке дыру почти на
половину меры. Выше 560 px мера доходит до 56–62 знаков, дыр нет, и
переносы только мусорят правый край.
Ограничители обязательны: без них браузер спокойно оставит в конце
строки два знака, а в русском наборе это грубая ошибка. Работает от
lang="ru" на — атрибут на месте, проверил base.html. */
.rsk-text p,
.rsk-vo details p { text-wrap: pretty; }
@media (max-width: 559px) {
.rsk-text p {
-webkit-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 7 4 3;
-webkit-hyphenate-limit-before: 4;
-webkit-hyphenate-limit-after: 3;
}
}
/* ----------------------------------------------------------------------
ПРИЁМ 8. ПРОЯВЛЕНИЕ АБЗАЦЕВ НЕ РВЁТ РИТМ
----------------------------------------------------------------------
было: скрипт вешает класс явления на КАЖДЫЙ абзац — в rasklady.js,
строка 421, в списке наблюдаемого стоит '.rsk-text p'. А
.rsk-ya (строка 1351) даёт translateY(16px). Сдвиг 16 px при
отбивке 26 px — это больше половины паузы: пока читаешь,
следующий абзац на глазах встаёт на место, и вертикальный
ритм, ради которого всё выше считалось, рассыпается. Числа
эти унаследованы от карточек каталога, где они к месту.
стало: у абзацев сдвиг снят, осталось спокойное проявление цветом,
без задержки и подольше.
зачем: текст должен появляться так, чтобы этого не замечали. На
карточке «выехал» читается как жест, на абзаце — как рывок.
Заголовок, черту и карточки не касаюсь: у них тот же класс, но свои
селекторы, и сдвиг там остаётся как был.
Я НЕ ПЕРЕОБЪЯВЛЯЮ opacity НАМЕРЕННО. Прозрачность приходит из
.rsk-ya / .rsk-ya--vidno, и в блоке prefers-reduced-motion (строка
1418) она уже разжимается до 1. Если бы я написал здесь opacity: 0
селектором потяжелее, я бы перебил эту страховку и человек с
выключенной анимацией получил бы пустую страницу. Правлю только то,
что меняю, — сдвиг и длительность. */
.rsk-text > p.rsk-ya { transform: none; }
.rsk-text > p.rsk-ya--vidno {
transition: opacity .9s ease;
transition-delay: 0s;
}
/* ----------------------------------------------------------------------
ДВИЖЕНИЕ ВЫКЛЮЧЕНО
----------------------------------------------------------------------
Правило раздела: движение гасим, но ничего не прячем.
Этот блок не перестраховка, а несущий. Выше я поднял специфичность
на .rsk-ya до (0,2,1), а страховка в строке 1418 весит (0,1,0) — то
есть по transform мои селекторы теперь сильнее её. Прозрачность я не
переобъявлял (см. приём 8), поэтому пустой страницы не будет и без
этих строк, но правило, которое повышает вес на .rsk-ya, обязано
нести своё гашение с собой. Иначе следующая правка здесь сломает
доступность молча.
Кегль, мера, отбивка и вес при выключенном движении не меняются:
читаемость — это не анимация, её выключать нельзя. */
@media (prefers-reduced-motion: reduce) {
.rsk-text > p.rsk-ya,
.rsk-text > p.rsk-ya--vidno {
opacity: 1;
transform: none;
transition: none;
}
}
/* ----------------------------------------------------------------------
ПЕЧАТЬ
----------------------------------------------------------------------
Страницу с раскладом человек сохраняет в PDF, и раздел это уже
учитывает: строки 736–742 переворачивают тёмное в светлое, а строка
1428 разжимает .rsk-ya через !important. Дописываю только то, что
появилось здесь.
ЭТО САМОЕ ОПАСНОЕ МЕСТО ВСЕЙ ПРАВКИ, и оно проверено формулой. Все
наши чернила — это белый с прозрачностью, и на белой бумаге они
исчезают:
--ink на белом 1,14 : 1
--ink-70 на белом 1,11 : 1
--ink-55 на белом 1,08 : 1
--gold на белом 2,26 : 1
Корпус от этого защищён тем, что я не объявлял ему color вовсе
(приём 1). Но два правила выше специфичнее печатного: вводка (0,2,1)
и абзац перелинковки (0,2,2). Им цвет надо вернуть руками — иначе
PDF начнётся с невидимого первого абзаца и кончится невидимым
указателем. Ровно на этом и погорел один из вариантов.
Золотой волосок на бумаге исчезает — серый #8a8a8a даёт 3,45 : 1 при
норме 3 : 1 для нетекстовой линии. Подчёркивание ссылок — #767676,
4,54 : 1: это указатель, ему нужна норма текста. Числа вписаны
прямо, а не переменными: цвет только для бумаги, а переменные
раздела я не переопределяю.
Вес на бумаге возвращаю к 300: тёмное по светлому не разливается, и
400 там выглядит плотно. Одна переменная — и весь корпус.
Кегль в печати НЕ ТРОГАЮ. Соблазн поставить книжные 11pt был, но это
14,7 px, а раздел 0 CLAUDE.md пишет «не уменьшаем кегль основного
текста ниже 16 px» без оговорки про носитель. Это решение владельца,
не моё.
orphans / widows работают именно в печати (на экране они не делают
ничего): не оставлять одну строку абзаца на другом листе. И заголовок
не должен оказаться последней строкой страницы. */
@media print {
.rsk-pole { --rsk-ves: 300; }
.rsk-text > p:first-of-type,
.rsk-text > p:last-child:has(a) { color: #000; }
.rsk-text > p:last-child:has(a)::before { background: #8a8a8a; }
.rsk-text a { color: #000; text-decoration-color: #767676; }
.rsk-text p { orphans: 3; widows: 3; }
.rsk-text > .rsk-h2 { break-after: avoid; }
}
/* ======================================================================
ЧИСЛА: МЕРА, КЕГЛЬ, ХОД СТРОКИ, ОТБИВКА, КОНТРАСТ
======================================================================
Всё посчитано по метрикам самих файлов шрифта и по --col / --pad из
site.css, а знаки в строке — жадным переносом по словам на настоящих
текстах. Числа автора ни одного варианта на веру не приняты: из
шести разных значений средней ширины знака, которые называли пятеро,
не совпало с замером ни одно.
ДОСТУПНАЯ ШИРИНА КОЛОНКИ = min(окно, --col) − 2 × --pad.
Лестница --col/--pad из site.css: 430/18 (≤409) → 430/22 (≤639) →
760/40 → 1180/64 → 1320/64 → 1480/76 → 1800/92 (≥2200).
окно колонка кегль мера ход отбивка шаг абзаца /
(px) строки шаг строки
---- ------- ----- ------ ------ ------- ------------
320 284 17 px экран 30,60 26,01 1,850
390 354 17 px экран 30,60 26,01 1,850
640 560 18 px экран 32,40 27,54 1,850
1024 896 18 px 617 32,40 27,54 1,850
1440 1192 19 px 651 34,20 29,07 1,850
1920 1328 19 px 651 34,20 29,07 1,850
2880 1616 22 px 754 37,84 32,16 1,850
«экран» — мера не связывает: колонка уже её, и строку задаёт ширина
телефона. Горизонтальной прокрутки от этого быть не может: все мои
max-width только СУЖАЮТ, фиксированных ширин и отрицательных
отступов в файле нет, а самое длинное неразрывное слово (16 знаков)
занимает 141 px на телефоне при колонке 284 px и 183 px на 2880.
На телефоне мера упёрлась в экран и не изменилась (разница в один
знак — от веса 400, он чуть шире 300). Это надо сказать прямо:
28–36 знаков ниже коридора 45–75, и поднять их нельзя, не пробив
границу в 16 px. Ширина телефона иначе не позволяет, переносы это
смягчают — но нормой я это не называю.
ЧТО ВИДИТ ВЛАДЕЛЕЦ НА 2880 В МАСШТАБЕ 67 %:
корпус 22 px → видимые 14,7 px (было 20 → 13,4)
вводка 23,3 px → видимые 15,6 px
ход строки 37,8 px → видимые 25,3 px (было 36 → 24,1)
мера 62 знака (было 52; от масштаба не
зависит — она в знаках)
УВЕЛИЧЕНИЕ ШРИФТА В БРАУЗЕРЕ (кегль в rem, мера в ch — едут вместе):
корень 16 px → кегль 19,0 px, мера 651 px → 66 знаков
корень 20 px → кегль 23,8 px, мера 814 px → 66 знаков
корень 24 px → кегль 28,5 px, мера 976 px → 66 знаков
корень 32 px → кегль 38,0 px, мера 1302 px → 66 знаков (колонка 1328)
Буква крупнеет, строка не удлиняется. На px этого не бывает вовсе.
КОНТРАСТ по формуле WCAG 2.1. Прозрачность сведена с фоном честно, а
не по имени переменной. Фон колонки --ground #141b15; в скобках — на
--deep #0e130f, то есть в самом тёмном месте страницы:
--ink 15,32 : 1 (16,40) вводка
--ink-70 9,67 : 1 (10,18) корпус — выше AAA (7:1)
--ink-55 5,89 : 1 ( 6,06) абзац перелинковки
--gold 7,76 : 1 ( 8,31) волосок, ссылки
--gold-lit 10,39 : 1 (11,12) ссылка на наведении
--rsk-line-lit 3,11 : 1 ( 3,13) линия подчёркивания
(норма нетекстового 3:1 —
запас 4 %, не затемнять)
Ниже 4,5 : 1 не спускается ни один текст. Корпус до --ink я НЕ
поднимал сознательно: 15,32 : 1 светлым по тёмному на 250–380 слов
даёт свечение, от которого строки как раз и начинают слипаться, тем
заметнее при астигматизме. --ink потрачен на один абзац — один
перекал страница выдерживает, семь нет.
====================================================================== */
/* ======================================================================
ЧЕГО Я НЕ ВЗЯЛ ИЗ ПЯТИ ВАРИАНТОВ И ПОЧЕМУ
======================================================================
Здесь это затем, чтобы следующий не предлагал то же второй раз. */
/* ======================================================================
ЧТО НУЖНО В РАЗМЕТКЕ И В СКРИПТЕ
======================================================================
Разметку ведёт другая сессия — поэтому список с точной причиной, а не
правки в шаблонах. ВСЁ, ЧТО В ЭТОМ ФАЙЛЕ, РАБОТАЕТ И БЕЗ НЕГО.
Ни один пункт не требует НОВЫХ СЛОВ для клиента: это классы, теги,
пробелы и один селектор в скрипте. */
/* ======================================================================
ПОСМОТРЕТЬ ГЛАЗАМИ
======================================================================
Браузера в этой задаче у меня не было: всё выше посчитано по файлам
шрифта, по site.css и по текстам, но НЕ УВИДЕНО ни на одной ширине.
По разделу 5 CLAUDE.md это значит, что работа не сделана, пока её не
открыли на боевом taro-inspo.ru — локалка ничего не доказывает.
Смотреть в рамке 390 px, на 1920 и отдельно на 2880 в масштабе 67 %,
страницу в том виде, в каком она открывается БЕЗ КЛИКОВ. По убыванию
риска: */
/* ======================================================================
25. ТУМАННОЕ ЗВЁЗДНОЕ НЕБО (20.09.2026)
======================================================================
Первая попытка была неверной, и владелец сказал прямо: «вообще не тот».
Там был один вращающийся круг созвездий — то есть узор в одном месте,
к которому приклеивается взгляд. А просил он другое, дословно:
«он должен быть монотонный и идти сплошным, типа туманного звёздного
неба, с кометами, с погружением».
Разберём по словам, потому что каждое — это требование.
МОНОТОННЫЙ И СПЛОШНОЙ. Звёзды идут плиткой по всей площади, ровно,
без сгущений и без середины. Рисунка, который можно «прочесть», нет:
глазу не за что зацепиться, и фон остаётся фоном.
ТУМАННЫЙ. Поверх звёзд — большие мягкие пятна без единой резкой
границы. Они и делают небо туманным, а не просто тёмным в точках.
С ПОГРУЖЕНИЕМ. Два слоя звёзд едут с разной скоростью: далёкие
медленно, ближние вдвое быстрее и чуть крупнее. Это параллакс —
глубина появляется именно от разницы скоростей, а не от количества
звёзд. Плюс туман очень медленно дышит, отчего небо кажется не
плоской картинкой, а объёмом, в котором находишься.
ЦЕНА. Всё движение — только transform, то есть считает видеокарта, а
страница не пересчитывается. Каждый слой звёзд — плитка, которая
едет ровно на свою высоту: поэтому петля не видна и шва нет. Память:
слой на телефоне около 2 МБ, на 1920 около 9 МБ. Кометы — крошечные
элементы, их цена нулевая.
ЯРКОСТЬ. Звёзды 40–70 % белого золота на почти чёрном: заметно, но
не соревнуется с колодой и заголовком. Мистическое работает тем, что
его замечаешь вторым взглядом, а не первым.
Слой «ночь» держит шесть пустых элементов: первые два — пыль в свете
свечи из раздела 1, это ближний план и он остаётся; третий и
четвёртый — звёзды, пятый — туман, шестой — кометы.
*/
/* --- Далёкие звёзды: мельче, тусклее, медленнее --- */
.rsk-noch i:nth-child(3) {
top: -340px; height: calc(100% + 680px);
opacity: .5;
background-image:
radial-gradient(1px 1px at 12% 8%, rgba(255, 252, 245, .8), transparent 62%),
radial-gradient(1px 1px at 47% 19%, rgba(224, 210, 180, .6), transparent 62%),
radial-gradient(1px 1px at 78% 11%, rgba(255, 252, 245, .7), transparent 62%),
radial-gradient(1px 1px at 29% 34%, rgba(224, 210, 180, .5), transparent 62%),
radial-gradient(1px 1px at 63% 41%, rgba(255, 252, 245, .65), transparent 62%),
radial-gradient(1px 1px at 91% 37%, rgba(224, 210, 180, .55), transparent 62%),
radial-gradient(1px 1px at 7% 57%, rgba(255, 252, 245, .7), transparent 62%),
radial-gradient(1px 1px at 38% 66%, rgba(224, 210, 180, .5), transparent 62%),
radial-gradient(1px 1px at 71% 61%, rgba(255, 252, 245, .6), transparent 62%),
radial-gradient(1px 1px at 54% 83%, rgba(224, 210, 180, .55), transparent 62%),
radial-gradient(1px 1px at 20% 91%, rgba(255, 252, 245, .65), transparent 62%),
radial-gradient(1px 1px at 85% 88%, rgba(224, 210, 180, .5), transparent 62%);
background-size: 340px 340px;
animation: rsk-zvezdy-daleko 140s linear infinite;
}
@keyframes rsk-zvezdy-daleko { to { transform: translate3d(-28px, 340px, 0); } }
/* --- Ближние звёзды: крупнее, ярче, вдвое быстрее, мерцают.
Мерцание сделано на прозрачности всего слоя, а не у каждой
звезды: на каждую пришлось бы заводить свой элемент, а видно
ровно то же самое. --- */
.rsk-noch i:nth-child(4) {
top: -500px; height: calc(100% + 1000px);
opacity: .72;
background-image:
radial-gradient(1.7px 1.7px at 23% 14%, rgba(255, 253, 247, .95), transparent 60%),
radial-gradient(1.4px 1.4px at 68% 27%, rgba(255, 241, 208, .8), transparent 60%),
radial-gradient(2px 2px at 41% 52%, rgba(255, 253, 247, 1), transparent 58%),
radial-gradient(1.4px 1.4px at 88% 63%, rgba(255, 241, 208, .78), transparent 60%),
radial-gradient(1.7px 1.7px at 14% 74%, rgba(255, 253, 247, .9), transparent 60%),
radial-gradient(1.4px 1.4px at 57% 92%, rgba(255, 241, 208, .75), transparent 60%);
background-size: 500px 500px;
animation:
rsk-zvezdy-blizko 76s linear infinite,
rsk-mercanie 7s ease-in-out infinite;
}
@keyframes rsk-zvezdy-blizko { to { transform: translate3d(-46px, 500px, 0); } }
@keyframes rsk-mercanie { 0%, 100% { opacity: .72; } 50% { opacity: .95; } }
/* --- Туман. Четыре пятна, ни одной резкой границы. Дышит и плывёт
поперёк: полторы минуты на проход, на пределе заметности. Одно
пятно холодное — единственное холодное место в разделе, и оно
нужно, чтобы небо не было однотонно золотым. --- */
.rsk-noch i:nth-child(5) {
top: -20%; height: 140%;
}
/* --- Кометы. Три штриха, у каждого яркая голова и гаснущий хвост.
Летят наискось и видны примерно восьмую часть своего круга —
остальное время их нет. Поэтому комета читается как редкое
событие, а не как карусель.
Три штриха из одного элемента: сам элемент и два его
псевдоэлемента. Заводить под кометы три пустых слоя в разметке
не за чем. --- */
.rsk-noch i:nth-child(6),
.rsk-noch i:nth-child(6)::before,
.rsk-noch i:nth-child(6)::after {
content: '';
position: absolute;
opacity: 0;
}
.rsk-noch i:nth-child(6) {
top: 0; left: 0; right: auto;
background-size: auto;
}
@media (prefers-reduced-motion: reduce) {
/* Небо остаётся, движение уходит: звёзды и туман стоят, комет нет.
Звёздное небо без движения — это всё ещё звёздное небо, а вот
комета без полёта превратилась бы в непонятную чёрточку. */
.rsk-noch i:nth-child(3),
.rsk-noch i:nth-child(4),
.rsk-noch i:nth-child(5),
.rsk-noch i:nth-child(5)::before,
.rsk-noch i:nth-child(5)::after { animation: none; }
.rsk-noch i:nth-child(6) { display: none; }
}
@media print {
.rsk-noch i { display: none !important; }
}
/* ======================================================================
26. БУКВИЦА, ПОЛЕ ЧТЕНИЯ И ЗНАК КОНЦА (20.09.2026)
======================================================================
Владелец посмотрел готовую типографику раздела 24 и сказал: мало.
Дословно: «у тебя агенты должны были сделать красиво текст, ты
говорил что-то — тишина». То есть ритм и мера он принял как должное,
а роскоши не увидел.
1. КРУПНЕЕ ЗАГОЛОВКА — буквица ростом в ДВЕ строки, а не в три.
У Source Serif 4 высота прописной 0,670 em (взято из самого файла
шрифта). Значит, чтобы буквица встала ровно на базовую линию
второй строки, её кегль равен двум ходам строки, делённым на
0,670. При ходе 1,85 и корпусе 1,0625rem это около 94 px — ниже
заголовка блока (у него clamp до 34 px, но по площади буквица
остаётся спокойнее: она одна и без веса).
2. РЯДОМ С ВОЛОСКОМ — буквица стоит не у заголовка, а во вводке,
которая идёт ПОСЛЕ волоска. Между ними отбивка, и два золотых
события не сталкиваются.
3. НЕРОВНО СЯДЕТ — боковой вынос задан не на глаз, а от кегля самой
буквицы, и она прижата к оптической левой границе колонки через
отрицательный отступ: у О, С, Э круглая левая сторона, у Ч и Г —
прямая, и без выноса круглые буквы кажутся вдавленными внутрь.
4. НОВЫЙ ЗНАК НА ДЕСЯТИ СТРАНИЦАХ — да, и это решение владельца,
а не моё: он просил роскоши и увидит её на всех десяти сразу.
Кроме буквицы здесь ещё две вещи, обе без единого нового слова:
ПОЛЕ ЧТЕНИЯ. Блок текста получает свой волосок по левому краю и
чуть более тёмное поле под собой. Это не панель с рамкой, как у
каталога: поле гасится к правому краю и снизу, границы у него нет.
Смысл — отделить чтение от звёздного неба за ним: на тёмном фоне
светлый текст «плывёт», а на своём поле стоит.
ЗНАК КОНЦА. После последнего абзаца — маленький золотой ромб. Один
на весь блок, в одном месте, угадывать смысловые границы не нужно.
Он говорит «тут чтение кончилось» и делает это без слова «конец».
*/
/* --- Поле чтения --- */
.rsk-text {
position: relative;
padding-left: 26px;
}
.rsk-text::before {
content: '';
position: absolute; left: 0; top: .2em; bottom: 2.2em;
width: 1px;
background: linear-gradient(180deg,
var(--gold) 0%, rgba(201, 168, 106, .34) 42%, transparent 100%);
}
.rsk-text::after {
content: '';
position: absolute; z-index: -1;
left: -22px; right: -22px; top: -18px; bottom: -18px;
}
/* --- Буквица во вводке --- */
.rsk-text > p:first-of-type::first-letter {
float: left;
/* РОСТ БУКВИЦЫ СЧИТАЕТСЯ, А НЕ ПОДБИРАЕТСЯ.
Обтекание float учитывает не рисунок буквы, а высоту её БОКСА.
Первая попытка (2,76em при 0,74) давала бокс 2,04em — это чуть
больше одной строки в 1,85em, то есть буквица залезала во вторую
строку на две десятых и отодвигала её целиком. Выглядело как
ошибка, и это ровно то, за что буквицу и называют дешёвой.
Считаем честно: бокс должен быть равен ДВУМ строкам.
две строки = 1,85em × 2 = 3,70em
бокс = кегль × межстрочный
кегль = 3,70 / 0,74 = 5,0em
Рисунок буквы при этом 5,0 × 0,670 (высота прописной у Source
Serif 4, взята из файла шрифта) = 3,35em — то есть занимает
девять десятых своего двухстрочного места и не жмётся к краям.
ЗАМЕР НА ЖИВОЙ СТРАНИЦЕ поправил этот расчёт: у вводки свой
межстрочный,
около 1,55em, а не 1,85 как у корпуса. Значит две строки — это
3,10em, и кегль буквицы 3,10 / 0,74 = 4,2em. При 5em обтекание
захватывало третью строку, хотя рисунок буквы кончался на второй. */
font-size: 4.2em;
line-height: .74;
/* Вынос влево: круглые и прямые буквы иначе садятся по-разному. */
margin: .06em .1em -.04em -.06em;
color: var(--gold-lit);
font-weight: 400;
text-shadow:
0 1px 0 rgba(10, 14, 10, .85),
0 0 18px rgba(224, 196, 140, .28);
}
/* --- Знак конца чтения --- */
.rsk-text > p:last-of-type::after {
content: '\2726';
display: inline-block;
margin-left: .55em;
font-size: .62em;
line-height: 1;
color: var(--gold-dim);
transform: translateY(-.12em);
}
/* Телефон: буквица мельче — при корпусе 17 px и колонке 342 px
буквица в два хода строки съедает треть первой строки, и вводка
начинает рассыпаться на обрубки. Полтора хода читается так же
роскошно, а строка остаётся строкой. Поле чтения уже, волосок
остаётся. */
@media (max-width: 559px) {
.rsk-text { padding-left: 18px; }
.rsk-text::after { left: -16px; right: -16px; }
/* На телефоне буквица в две строки съедает треть первой строки, и
вводка рассыпается на обрубки. Поэтому здесь бокс ровно в ОДНУ
строку с небольшим запасом: 1,85 / 0,8 = 2,3em. Вторая строка не
отодвигается вовсе, а буквица всё равно вдвое крупнее текста. */
.rsk-text > p:first-of-type::first-letter {
font-size: 2.3em;
line-height: .8;
margin: .05em .09em 0 -.04em;
}
}
/* Экран владельца: 2880 в масштабе 67 %. Корпус там 20 px, буквица
растёт вместе с ним сама (кегль в em), а поле чтения раздвигается —
иначе волосок прилипает к тексту. */
@media (min-width: 2200px) {
.rsk-text { padding-left: 34px; }
.rsk-text::after { left: -30px; right: -30px; top: -24px; bottom: -24px; }
}
@media print {
/* На бумаге ни поля, ни подложки: это залитый тонером прямоугольник.
Буквица остаётся — она чёрная и печатается как буква. */
.rsk-text::before, .rsk-text::after { display: none; }
.rsk-text { padding-left: 0; }
.rsk-text > p:first-of-type::first-letter { color: #000; text-shadow: none; }
.rsk-text > p:last-of-type::after { color: #666; }
}
/* ======================================================================
27. КОМЕТЫ МЕДЛЕННЕЕ И МЯГЧЕ, ПЛЮС ТОНКИЕ ЛИНИИ (20.09.2026)
======================================================================
Владелец посмотрел небо и сказал, дословно: «кометы можно сделать
более медленные и растушёванные и с разных сторон, сделать ещё
что-то атмосферное типа тонких линий».
Три правки по кометам и один новый слой.
МЕДЛЕННЕЕ. Круги были 26, 31 и 37 секунд, сам полёт занимал восьмую
часть круга — то есть комета пересекала экран за три секунды. Стало
54, 67 и 79 секунд, а полёт растянут почти на треть круга: комета
идёт двенадцать-шестнадцать секунд. Её видно не как вспышку, а как
движение. Круги остались взаимно непохожими — иначе они начнут
летать строем, и станет видно, что это цикл.
РАСТУШЁВАННЫЕ. Три вещи вместо резкой чёрточки: размытие в 1,4 px,
голова не белой точкой, а мягким свечением, и хвост длиннее и
слабее — прозрачность нарастает медленно, без обрыва. Размытие
стоит дёшево: элемент 260×3 px, это не полноэкранный фильтр.
С РАЗНЫХ СТОРОН. Было три штриха в одну сторону, сверху вниз
направо. Стало: первая идёт справа налево и вниз, вторая слева
направо и вниз под малым углом, третья поднимается снизу слева
вверх направо. Разные направления и разные углы — три разных
события, а не три копии одного.
ТОНКИЕ ЛИНИИ. Новый, седьмой слой: длинные волоски под наклоном,
очень слабые, идут по всей площади ровно и медленно уезжают. Это
и есть «что-то атмосферное»: свет, проходящий через тёмное, читается
именно тонкими линиями, а не пятнами.
Про шов у линий. Узор повторяется каждые 340 px вдоль своей оси, и
слой уезжает ровно на этот период: ось под 74° даёт вектор
(sin 74°, −cos 74°) × 340 = (326,9; −93,7). Поэтому петля не видна.
Если менять угол или период — оба числа надо пересчитать вместе,
иначе на каждом круге будет заметный рывок.
*/
/* --- Тонкие линии --- */
.rsk-noch i:nth-child(7) {
top: -15%; height: 130%;
opacity: .55;
background-image: repeating-linear-gradient(74deg,
transparent 0 168px,
rgba(224, 196, 140, .05) 168px 169px,
transparent 169px 340px);
/* Маска — чтобы линии не шли краем в край: по краям они гаснут, и
слой читается как свет, а не как разлинованная бумага. */
-webkit-mask-image: radial-gradient(125% 95% at 50% 38%, #000 18%, rgba(0, 0, 0, .45) 60%, transparent 92%);
mask-image: radial-gradient(125% 95% at 50% 38%, #000 18%, rgba(0, 0, 0, .45) 60%, transparent 92%);
animation: rsk-linii 150s linear infinite;
}
@keyframes rsk-linii { to { transform: translate3d(326.9px, -93.7px, 0); } }
.rsk-noch i:nth-child(6) { animation: rsk-kometa-1 54s linear infinite; }
.rsk-noch i:nth-child(6)::before { animation: rsk-kometa-2 67s linear infinite 17s; }
.rsk-noch i:nth-child(6)::after { animation: rsk-kometa-3 79s linear infinite 38s; }
@media (max-width: 559px) {
/* Линии на узком экране заметно реже: при шаге 168 px их в 390 px
всего две, и они читаются как случайные царапины. Шаг мельче. */
.rsk-noch i:nth-child(7) {
background-image: repeating-linear-gradient(74deg,
transparent 0 96px,
rgba(224, 196, 140, .045) 96px 97px,
transparent 97px 196px);
animation-name: rsk-linii-tel;
}
@keyframes rsk-linii-tel { to { transform: translate3d(188.4px, -54px, 0); } }
}
@media (prefers-reduced-motion: reduce) {
/* Линии остаются, но стоят: тонкие волоски без движения — это всё
ещё атмосфера. Кометы без полёта превратились бы в чёрточки,
поэтому их нет (правило раздела 25). */
.rsk-noch i:nth-child(7) { animation: none; }
}
/* ======================================================================
28. КРУЖЕНИЕ: ТРИ ФИГУРЫ ИЗ ТОНКИХ ЛИНИЙ (20.09.2026)
======================================================================
Просьба владельца, дословно: «у тебя есть круглешок, который крутится
красиво, их 2 — можешь сделать что-то такое же, только необычное, тоже
из тонких линий, в разных местах, красивое, плавное, не броское, ну
кружение что-то».
Круг делений за колодой ему понравился. Значит нужно то же чувство, но
не тот же круг: ровное кольцо, повторённое в третий раз, читалось бы
как один приём, размноженный по странице. Поэтому здесь три РАЗНЫЕ
фигуры, и ни одна не простое кольцо:
1. РОЗЕТКА — девять вытянутых эллипсов, повёрнутых через двадцать
градусов. Фигура, которую рисует спирограф: линии пересекаются и
дают сетку, которой нельзя начертить циркулем. Стоит в левом низу
вопросов и ответов.
2. НАБОР ДУГ — три разорванных кольца разного радиуса, вращаются в
разные стороны с разной скоростью. Похоже на небесный циферблат,
у которого круги идут вразнобой. Стоит в правом верху там же.
3. АРМИЛЛЯРНАЯ СФЕРА — круг и три эллипса с разным наклоном: так
рисуют сферу мира на старых гравюрах. Стоит в подвале, у самого
низа страницы.
ПОЧЕМУ SVG, А НЕ ГРАДИЕНТЫ. Кольцо с делениями сделано градиентом и
маской — для ровного кольца этого хватает. Но эллипс под наклоном
градиентом не нарисуешь, а тем более девять. Поэтому фигуры лежат
inline-SVG прямо в стилях: отдельного запроса к серверу нет, вес —
полкилобайта на все три.
ПЛАВНО И НЕ БРОСКО, как и просили: оборот за три-пять минут, линия в
полпикселя, прозрачность 5–8 %. Их замечаешь, когда задержишь взгляд,
и не замечаешь, когда читаешь.
Вращается только transform — считает видеокарта, страница не
пересчитывается. Каждая фигура 260–420 px, то есть слой меньше
мегабайта.
МЕСТА ВЫБРАНЫ НЕ НА ГЛАЗ. Свободных псевдоэлементов в разделе почти
не осталось: у блока Альбины оба заняты уголками, у блока текста —
полем чтения, у стола — светом и кругом делений. Свободны были ровно
эти три, и они же оказались в трёх разных местах страницы — низ
вопросов, верх вопросов и подвал. Совпало удачно.
*/
.rsk-vo { position: relative; }
.rsk-foot { position: relative; overflow: hidden; }
/* --- 1. Розетка --- */
.rsk-vo::before {
content: '';
position: absolute; z-index: -1;
left: -120px; bottom: -90px;
width: 360px; height: 360px;
opacity: .075;
pointer-events: none;
background: no-repeat center / contain
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23c9a86a' stroke-width='.5'%3E%3Cellipse cx='100' cy='100' rx='88' ry='30'/%3E%3Cellipse cx='100' cy='100' rx='88' ry='30' transform='rotate(20 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='88' ry='30' transform='rotate(40 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='88' ry='30' transform='rotate(60 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='88' ry='30' transform='rotate(80 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='88' ry='30' transform='rotate(100 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='88' ry='30' transform='rotate(120 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='88' ry='30' transform='rotate(140 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='88' ry='30' transform='rotate(160 100 100)'/%3E%3C/g%3E%3C/svg%3E");
animation: rsk-kruzhenie-1 260s linear infinite;
}
@keyframes rsk-kruzhenie-1 { to { transform: rotate(360deg); } }
/* --- 2. Набор дуг: три разорванных кольца --- */
.rsk-vo::after {
content: '';
position: absolute; z-index: -1;
right: -70px; top: -60px;
width: 260px; height: 260px;
opacity: .085;
pointer-events: none;
background: no-repeat center / contain
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23c9a86a' stroke-width='.7' stroke-linecap='round'%3E%3Cpath d='M100 8a92 92 0 0 1 79 45'/%3E%3Cpath d='M186 130a92 92 0 0 1-120 58'/%3E%3Cpath d='M22 150a92 92 0 0 1-2-95'/%3E%3Cpath d='M100 32a68 68 0 0 1 62 41'/%3E%3Cpath d='M160 130a68 68 0 0 1-118 12'/%3E%3Cpath d='M100 56a44 44 0 0 1 40 26'/%3E%3Cpath d='M138 110a44 44 0 0 1-76 8'/%3E%3Ccircle cx='100' cy='100' r='3'/%3E%3C/g%3E%3C/svg%3E");
animation: rsk-kruzhenie-2 185s linear infinite reverse;
}
@keyframes rsk-kruzhenie-2 { to { transform: rotate(360deg); } }
/* --- 3. Армиллярная сфера --- */
.rsk-foot::after {
content: '';
position: absolute; z-index: -1;
left: 50%; bottom: -200px;
width: 420px; height: 420px;
margin-left: -210px;
opacity: .06;
pointer-events: none;
background: no-repeat center / contain
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23c9a86a' stroke-width='.6'%3E%3Ccircle cx='100' cy='100' r='92'/%3E%3Cellipse cx='100' cy='100' rx='92' ry='34'/%3E%3Cellipse cx='100' cy='100' rx='34' ry='92'/%3E%3Cellipse cx='100' cy='100' rx='92' ry='58' transform='rotate(28 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='92' ry='58' transform='rotate(-28 100 100)'/%3E%3Ccircle cx='100' cy='100' r='6'/%3E%3C/g%3E%3C/svg%3E");
animation: rsk-kruzhenie-3 320s linear infinite;
}
@keyframes rsk-kruzhenie-3 { to { transform: rotate(360deg); } }
/* Телефон: остаётся одна фигура — розетка, и мельче. Три фигуры на
390 px наезжают друг на друга и на текст: там, где на компьютере
между ними полколонки, на телефоне их разделяет полтора сантиметра. */
@media (max-width: 559px) {
.rsk-vo::before { left: -110px; bottom: -70px; width: 240px; height: 240px; opacity: .06; }
.rsk-vo::after { display: none; }
.rsk-foot::after { width: 300px; height: 300px; margin-left: -150px; bottom: -160px; }
}
/* Экран владельца: 2880 в масштабе 67 %. Фигуры растут вместе со
страницей, иначе на его ширине они становятся точками в углу. */
@media (min-width: 2200px) {
.rsk-vo::before { width: 480px; height: 480px; left: -170px; bottom: -130px; }
.rsk-vo::after { width: 340px; height: 340px; right: -110px; top: -90px; }
.rsk-foot::after { width: 560px; height: 560px; margin-left: -280px; bottom: -270px; }
}
@media (prefers-reduced-motion: reduce) {
/* Фигуры остаются, вращение уходит: тонкая линия сама по себе
украшение, а не движение. */
.rsk-vo::before, .rsk-vo::after, .rsk-foot::after { animation: none; }
}
@media print {
.rsk-vo::before, .rsk-vo::after, .rsk-foot::after { display: none; }
}
/* ======================================================================
29. КОМЕТЫ ПО ДУГЕ И ДЫМНЫЙ ХВОСТ (20.09.2026)
======================================================================
Владелец: «кометы летят как палки прямо, у них слегка не реальная
траектория» и «эффекта дыма не хватает». Оба замечания верные, и
причины у них разные.
ПОЧЕМУ ПАЛКОЙ. Комета летела из точки в точку одним translate, и угол
поворота держался постоянным всю дорогу. Прямая и есть прямая: глаз
читает такое как брошенную палку, а не как летящее тело.
ЧТО СТАЛО. Путь набран пятью-шестью точками по дуге, и на каждой
точке свой угол — штрих доворачивается ВМЕСТЕ с путём и всё время
остаётся по касательной. Именно поворот по ходу и читается как
траектория: если гнуть путь, но не доворачивать штрих, получится
палка, которую тащат боком.
Дуга небольшая нарочно: 20–24 градуса на весь полёт. Настоящий
метеор в атмосфере идёт почти по прямой с малым прогибом — если
загнуть сильнее, выйдет не комета, а брошенный бумеранг.
ПОЧЕМУ БЕЗ offset-path. Правильный способ вести элемент по кривой —
offset-path с offset-rotate: auto, он бы сам держал касательную. Но
path() задаётся в пикселях, а у нас экраны от 320 до 2880: путь,
нарисованный в пикселях, на телефоне уедет за край, а на 2880
пройдёт по уголку. Точки в vw/vh масштабируются сами, поэтому
шесть точек здесь честнее одной кривой.
ДЫМ В ХВОСТЕ. Три вещи вместо резкой чёрточки:
— хвост из шести переходов вместо четырёх: он не кончается, а
растворяется;
— размытие 3 px и высота 5 px — штрих перестал быть линией и стал
полосой дыма;
— широкий мягкий ореол тенью (26 px размыто, 8 px растянуто): это и
есть облако вокруг хвоста, без него дым читается как подсветка.
Всё это по-прежнему один маленький элемент: 300×5 px. Размытие на
таком не стоит ничего — в отличие от размытия на весь экран.
*/
.rsk-noch i:nth-child(6),
.rsk-noch i:nth-child(6)::before,
.rsk-noch i:nth-child(6)::after {
width: 300px; height: 5px;
border-radius: 5px;
background-image: linear-gradient(90deg,
rgba(255, 241, 208, 0) 0%,
rgba(255, 241, 208, .05) 22%,
rgba(255, 241, 208, .13) 44%,
rgba(255, 241, 208, .30) 68%,
rgba(255, 247, 224, .58) 86%,
rgba(255, 252, 242, .88) 97%,
rgba(255, 253, 247, .95) 100%);
box-shadow:
0 0 26px 8px rgba(255, 241, 208, .10),
0 0 10px 2px rgba(255, 245, 220, .22);
filter: blur(3px);
}
/* --- Дым: то же расхождение пятен, но без перерисовки ---------------
ПЕРЕПИСАНО 20.09.2026 по замечанию владельца, пик #211: «на заднем
плане двигается по пиксельно, глаз режет когда печатается».
Было: `background-position` ехал сразу у четырёх слоёв. Замер на
живой странице (сессия по оформлению середины): из девятнадцати
идущих анимаций раздела это была единственная, которая КРАСИТ, а не
композитит, и красила она слой во весь экран, 2117×1343, каждый кадр.
Печать разбора отнимала главный поток, и шаги становились видны.
Длинный цикл, которым это оправдывалось в прежнем комментарии, беду
не лечил, а усугублял: перерисовка идёт каждый кадр независимо от
скорости, а сдвиг за кадр при цикле в 137 секунд меньше пикселя —
движение распадается на ступеньки. Медленная некомпозитная анимация
это худший случай.
Стало: три слоя — сам `` и два его псевдоэлемента, — у каждого
свой `transform`. Расхождение пятен осталось, красить нечего.
Разметку менять не понадобилось. --- */
.rsk-noch i:nth-child(5) {
opacity: .82;
background-repeat: no-repeat;
animation: rsk-tuman 96s ease-in-out infinite;
}
.rsk-noch i:nth-child(5)::before,
.rsk-noch i:nth-child(5)::after {
content: ''; position: absolute; inset: -12%;
background-repeat: no-repeat;
will-change: transform;
}
/* Холодное пятно — единственное холодное место в разделе, ему свой ход:
расходиться оно должно заметнее прочих. */
.rsk-noch i:nth-child(5)::before {
animation: rsk-tuman-holod 137s ease-in-out infinite;
}
.rsk-noch i:nth-child(5)::after {
animation: rsk-tuman-kray 113s ease-in-out infinite;
}
@keyframes rsk-tuman-holod {
0%, 100% { transform: translate3d(0, 0, 0); }
33% { transform: translate3d(-7%, 6%, 0); }
66% { transform: translate3d(5%, -4%, 0); }
}
@keyframes rsk-tuman-kray {
0%, 100% { transform: translate3d(0, 0, 0); }
40% { transform: translate3d(6%, -5%, 0); }
75% { transform: translate3d(-4%, 3%, 0); }
}
@media (max-width: 559px) {
.rsk-noch i:nth-child(6),
.rsk-noch i:nth-child(6)::before,
.rsk-noch i:nth-child(6)::after {
width: 200px; height: 4px; filter: blur(2.4px);
box-shadow:
0 0 18px 5px rgba(255, 241, 208, .10),
0 0 8px 2px rgba(255, 245, 220, .22);
}
}
@media (prefers-reduced-motion: reduce) {
.rsk-noch i:nth-child(5),
.rsk-noch i:nth-child(5)::before,
.rsk-noch i:nth-child(5)::after { animation: none; }
}
/* НА ТЕЛЕФОНЕ НОЧЬ СТОИТ (fix70, 29.09.2026).
Владелец, видео с айфона: «когда скролиш быстро все туптит карты
пропадают потом подгружаються». На видео при быстрой прокрутке
пустеет вся страница — остаются фон, пыль, «падающая звезда» и
колода, то есть ровно то, что лежит в своих слоях.
Причина — слои этого раздела. Каждый ребёнок `.rsk-noch` (пыль,
звёзды, туман, линии, свеча) едет бесконечной анимацией с
will-change и выше экрана в полтора-два раза: на 390 × 844 при
плотности 3 это девять слоёв на ~190 МБ, на каждой странице раздела.
Телефону не хватает памяти под плитки самой страницы, и при быстрой
прокрутке они не успевают нарисоваться. Замер на эмуляторе Android
(Chrome, потолок памяти плиток 256 МБ), быстрая прокрутка «аркана»:
было 15 нехваток памяти и 1034 пропавших плитки, с неподвижной
ночью — 0 и 140 (Claude outputs/fix70-2026-09-29).
Поэтому на устройствах без наведения (телефон, планшет) ночь стоит:
те же пыль, звёзды, туман, линии и свеча в первом кадре своей
анимации, без движения и без отдельных слоёв. «Падающая звезда»
видна только в движении — стоя её нет, как и в большинстве кадров
раньше. На компьютере всё движется, как было. Селекторы той же силы,
что у правил выше, и стоят после них. */
@media (hover: none) {
.rsk-noch::before,
.rsk-noch i:nth-child(n),
.rsk-noch i:nth-child(n)::before,
.rsk-noch i:nth-child(n)::after { animation: none; will-change: auto; }
}
/* УКРАШЕНИЯ НЕ ЛОВЯТ КАСАНИЯ И НЕ ЛЕЗУТ НА КНОПКИ (fix71, 29.09.2026).
Владелец, видео с айфона: «звезда» (комета ночного слоя) пролетает
поверх кнопки и мешает нажать. Слой ночи лежит над содержимым
нарочно (колонка .rsk непрозрачная, под ней его не видно), поэтому
по слоям его не опустить, не потеряв пыль и звёзды. Вместо этого:
1) нажатия не ловит НИ ОДИН узел украшений, включая псевдоэлементы,
а не только их корень;
2) комету на устройствах без наведения не рисуем вовсе: там она и так
стоит без полёта, а пролететь над кнопкой ей больше нечем. */
.rsk-noch, .rsk-noch *, .rsk-noch *::before, .rsk-noch *::after,
.rsk-pylca, .rsk-pylca *, .rsk-pylca *::before, .rsk-pylca *::after {
pointer-events: none;
}
@media (hover: none) {
.rsk-noch i:nth-child(6) { display: none; }
}
/* КАРТОЧКИ ВИТРИНЫ НА ТЕЛЕФОНЕ ВИДНЫ СРАЗУ (fix73, 29.09.2026).
site.js помечает `.tariff`, `.sec-head` и другие блоки как `data-atm`:
до пересечения экрана они прозрачны и потом .9 с проявляются. При
быстрой прокрутке пальцем экран пустеет: замер fix73 (Chromium,
процессор x4, рамка 390, плотность 3, прокрутка по 120 px за кадр,
Claude outputs/fix73-2026-09-29/kto.py) - на витрине /rasklady
670 кадровых замеров с прозрачной карточкой тарифа. Как и у ночи,
на устройствах без наведения проявления нет: блок стоит на месте
сразу. На компьютере проявление прежнее. */
@media (hover: none) {
.js-atm .rsk-pole [data-atm] {
opacity: 1; transform: none; transition: none;
}
}
/* ======================================================================
30. НАСТОЯЩАЯ КОЛОДА: КАРТИНКИ, МЕДЛЕННЫЙ ПЕРЕВОРОТ, ОЖИДАНИЕ,
ПЕЧАТЬ ТРАКТОВКИ И РАССКАЗ ПЕРЕД РАСКЛАДОМ (20.09.2026)
======================================================================
Колода нарисована и лежит в static/img/rasklady/koloda-1/: 78 карт
по две ширины (…-360.webp и …-720.webp) плюс рубашка теми же двумя
ширинами. Все файлы 1024×1536, то есть ровно 2:3; после конвертации
360×540 и 720×1080 — пропорция та же.
До сегодняшнего дня лицо карты было НАРИСОВАНО стилями (разделы 14
и 15): плита, рамка, крупный номер, вдавленное клеймо с месяцем,
табличка под название. Это была честная заглушка на время, пока
картинок нет. Теперь картинки есть, и на лице должна быть ОНА, а не
заглушка: на самой картинке уже нарисованы и рамка, и римская цифра,
и название карты. Значит, всё, что рисовали стилями, при картинке
гаснет, иначе на карте окажутся две рамки и два номера.
ПОЧЕМУ МЕНЯЕТСЯ ПРОПОРЦИЯ КАРТЫ. Карта в этом файле жила как
--k-w × 1.72 (пропорция игральной карты 70×120). Картинка — 2:3,
то есть 1.5. Три требования сразу — картинка закрывает лицо целиком,
пропорция 2:3 и НИЧЕГО не обрезано — выполнимы ровно в одном случае:
когда сама карта 2:3. Если оставить 1.72 и взять object-fit: contain,
сверху и снизу останутся тёмные поля в 11 % высоты каждое; если взять
cover — срежутся края, а на них нарисована рамка и название. Поэтому
меняется --k-h, а не способ вписывания.
ЧТО ЭТО ЗА СОБОЙ ТЯНЕТ (и здесь же чинится):
— рамка-заглушка на лице нарисована SVG с viewBox 100×172. На карте
2:3 её растянуло бы по вертикали, ромбы по углам сплющились бы.
Ниже тот же рисунок в viewBox 100×150;
— рубашка-картинка из раздела 11 (620×930) — это тоже 2:3, и на карте
1.72 её всё это время обрезал cover. Теперь она встаёт целиком.
ПЕРЕВОРОТ. Дословно владелец: «карты медленно достаются с анимацией,
это позволит человеку насладиться процессом, волшебством, тайной».
Поэтому переворот стал 1,05 с с мягким разгоном, с подъёмом карты над
столом в середине и с тенью, которая на подъёме растёт и бледнеет,
а сразу после открытия по лицу проходит короткий блик.
ПЕРСПЕКТИВА ПЕРЕЕХАЛА НА СТОЛ. Была на каждой .rsk-karta —
значит, у каждой карты своя точка схода в собственном центре, и три
карты в ряд поворачиваются каждая в своём мире. Стало: одна точка
схода на весь стол, как у настоящего стола со свечой.
ГРАНИЦЫ, КОТОРЫЕ ЗДЕСЬ НЕ ПЕРЕСЕКАЮТСЯ (CLAUDE.md, раздел 0):
шрифт основного текста не задан нигде — наследуется Source Serif 4;
Manrope остался только на подписях прописными; ни один кегль основного
текста не опускается ниже 16 px; карты не обрезаются в круг, овал или
арку — скругление углов --k-r осталось прежним, 9–14 px. */
/* ----------------------------------------------------------------------
30.1. ПРОПОРЦИЯ КАРТЫ — 2:3
----------------------------------------------------------------------
было: --k-h считается как --k-w × 1.72 ОДИН раз, на .rsk. Из-за этого
у больших раскладов, где --k-w переопределён на самом столе
(.rsk-stol--mnogo, .rsk-stol--tri), высота продолжала считаться
от ширины .rsk — карта 148 px имела высоту 234 px, то есть
пропорцию 1.58, а не 1.72. Никто этого не замечал, потому что
лицо было нарисованное и тянулось;
стало: --k-h считается как --k-w × 1.5, а сама карта держит пропорцию
через aspect-ratio — то есть от СВОЕЙ ширины, какой бы она ни
была на этом столе. Картинка 2:3 садится без полей и без
обрезки на любой ширине из шести, что есть в файле;
зачем: см. шапку раздела.
--k-h остаётся: от него считаются min-height стола, размер стопки и
круг делений под колодой. Высоты теперь везде согласованы.
Счёт на телефоне 390 (там --k-w: 98 у стола на три карты): карта
98×147 вместо 98×169 — стол стал ниже на 22 px, первый экран от этого
только выигрывает. На 1920 (--k-w: 206) карта 206×309. */
.rsk { --k-h: calc(var(--k-w) * 1.5); }
.rsk-karta,
.rsk-stopka { height: auto; aspect-ratio: 2 / 3; }
/* Рамка-заглушка лица под новую пропорцию: тот же рисунок, что в
разделе 15.2, только viewBox 100×150 вместо 100×172 и ромбы по углам
сдвинуты на новый низ (145 вместо 167). Линии, прозрачности и доли
не тронуты — карта без картинки выглядит ровно как выглядела, просто
не растянутая. Меняется одно свойство, background-image: остальное
(размер, положение, повтор) приходит из правила раздела 15.2. */
.rsk-karta__lico::before {
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150' fill='none' stroke='%23c9a86a'%3E%3Crect x='5' y='5' width='90' height='140' stroke-width='.9' stroke-opacity='.5'/%3E%3Crect x='8.4' y='8.4' width='83.2' height='133.2' stroke-width='.6' stroke-opacity='.26'/%3E%3Cg fill='%23c9a86a' fill-opacity='.5' stroke='none'%3E%3Cpath d='M5 3 7 5 5 7 3 5z'/%3E%3Cpath d='M95 3 97 5 95 7 93 5z'/%3E%3Cpath d='M5 143 7 145 5 147 3 145z'/%3E%3Cpath d='M95 143 97 145 95 147 93 145z'/%3E%3C/g%3E%3C/svg%3E");
}
/* ----------------------------------------------------------------------
30.2. ЛИЦО — ЦЕЛИКОМ КАРТИНКА
----------------------------------------------------------------------
было: object-fit: cover (раздел «МЕСТО ПОД КАРТИНКУ КАРТЫ»). Cover
обрезает по короткой стороне — а на картинке по краю нарисована
рамка, сверху римская цифра, снизу название. Срезать их нельзя:
это и есть карта;
стало: contain. Карта и картинка теперь обе 2:3, и contain совпадает
с cover по результату — разница только в том, что при любой
будущей неточности (другая колода, другой кадр) картинка
уменьшится целиком, а не обрежется;
зачем: обрезка карты — это порча товара. Поля — это просто поля.
display: block нужен затем, что внутри .rsk-trakt, и на неё
иначе попадают два чужих правила: .rsk-trakt p (кегль, цвет, отбивка)
и .rsk-trakt.idet p (прозрачность 0 плюс анимация проявления строк
трактовки). Второе весит (0,2,1) — поэтому здесь (0,3,0), три класса,
и прозрачность с анимацией сняты явно. Без этого строка состояния
при классе .idet на блоке просто не появилась бы. */
.rsk-zhdem {
display: flex; align-items: center; gap: 14px;
margin: 0 0 18px; min-height: 30px;
}
.rsk-zhdem__znak {
position: relative; flex: 0 0 auto;
display: flex; align-items: center; gap: 7px;
padding: 0 3px;
}
/* Дыхание: тёплое пятно за искрами. Тот же свет, что за знаком на лице
карты (раздел 15.1) — раздел остаётся одним целым. */
.rsk-zhdem__znak::before {
content: ''; position: absolute; left: 50%; top: 50%;
width: 58px; height: 58px;
transform: translate(-50%, -50%);
border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, rgba(224, 196, 140, .20), transparent 66%);
animation: rsk-dyhanie 5.2s ease-in-out infinite;
}
.rsk-zhdem__znak i {
position: relative;
width: 5px; height: 5px; border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 7px rgba(224, 196, 140, .5);
opacity: .32;
animation: rsk-iskra-zhdet 3.6s ease-in-out infinite;
}
.rsk-zhdem__znak i:nth-child(2) { animation-delay: .45s; }
.rsk-zhdem__znak i:nth-child(3) { animation-delay: .9s; }
@keyframes rsk-dyhanie {
0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(.9); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.14); }
}
@keyframes rsk-iskra-zhdet {
0%, 100% { opacity: .28; transform: translateY(0); }
45% { opacity: 1; transform: translateY(-2px); }
}
.rsk-trakt .rsk-zhdem .rsk-zhdem__stroka {
margin: 0; min-width: 0;
opacity: 1; transform: none; animation: none;
font-size: 17px; line-height: 1.5; color: var(--ink-70);
transition: opacity .55s ease, transform .55s ease, filter .55s ease;
}
.rsk-trakt .rsk-zhdem .rsk-zhdem__stroka--menyaetsya {
opacity: 0; transform: translateY(4px); filter: blur(3px);
}
@media (min-width: 2200px) {
.rsk-trakt .rsk-zhdem .rsk-zhdem__stroka { font-size: 19px; }
.rsk-zhdem__znak i { width: 6px; height: 6px; }
}
/* Срок ожидания под строкой состояния (решение владельца 26.09.2026,
«Обычно это 1–3 минуты»). Своей видимости не заводим: элемент —
родной сосед .rsk-zhdem в разметке (_chasti.html и vopros.html), и
`.rsk [hidden]` (правило выше по файлу) уже прячет .rsk-zhdem саму —
здесь только зеркалим то же состояние через :not([hidden]). */
.rsk-zhdem__srok {
display: none;
margin: 6px 0 18px;
font-size: 14px; line-height: 1.5; color: var(--ink-55);
}
.rsk-zhdem:not([hidden]) + .rsk-zhdem__srok { display: block; }
/* ----------------------------------------------------------------------
30.11. ТРАКТОВКА ПЕЧАТАЕТСЯ
----------------------------------------------------------------------
Разбор приходит не целиком: скрипт добавляет абзацы в
.rsk-trakt__tekst по мере того, как ассистент их дописывает, и на
последний, пока он набирается, вешает .rsk-trakt__p--pishetsya.
было: весь текст проявлялся разом по механике .idet — восемь
заранее посчитанных задержек для восьми абзацев. Когда абзацы
приходят по одному и их может быть больше восьми, механика
тихо перестаёт работать: девятый абзац проявляется без
задержки, а первые восемь ждут своей очереди зря;
стало: каждый абзац проявляется САМ, в момент своего появления в
разметке — 0,85 с прозрачности, 6 px подъёма и снятие расфокуса
в 2 px. Задержки не нужны вовсе: очередь задаёт не CSS, а
скорость, с которой приходит текст;
зачем: так читается чужая речь. Абзац не «выехал» — он проступил.
Правило .rsk-trakt.idet p весит столько же, сколько это (0,2,1), и
стоит выше — значит, внутри .rsk-trakt__tekst выигрывает новое, а
задержка из --i обнуляется сокращённой записью animation. Снаружи
.rsk-trakt__tekst старая механика цела и работает как работала.
КУРСОР-ОГОНЁК. Маленький золотой уголёк в конце набираемой строки:
кружок .46em с тёплым ядром и свечением, дышит 1,35 с. Он висит на
::after КАЖДОГО абзаца, но с нулевой шириной и прозрачностью — и
разворачивается только у того, на котором стоит класс. Сделано так
ради исчезновения: если бы огонёк существовал только вместе с
классом, он пропадал бы мгновенно, рывком. А так и ширина, и
прозрачность уходят за 0,45 с — уголёк гаснет и сжимается.
Ширина в em, а не в пикселях: на 2880 абзац идёт 20 px, и уголёк
растёт вместе с буквами.
Вес: .rsk-trakt__tekst p::after — это (0,1,2), поэтому у правила с
классом стоит и класс абзаца, и родитель: (0,2,2). Иначе более
«элементный» селектор перебил бы классовый, и огонёк не зажёгся бы
никогда. */
@keyframes rsk-abzac {
from { opacity: 0; transform: translateY(6px); filter: blur(2px); }
to { opacity: 1; transform: none; filter: none; }
}
.rsk-trakt .rsk-trakt__tekst p {
animation: rsk-abzac .85s cubic-bezier(.2, .8, .2, 1) both;
}
.rsk-trakt__tekst p::after {
content: '';
display: inline-block; vertical-align: baseline;
width: 0; height: .46em; margin-left: 0;
border-radius: 50%;
background: radial-gradient(circle at 50% 40%,
#fff6e2 0%, var(--gold-lit) 46%, rgba(201, 168, 106, 0) 74%);
box-shadow: 0 0 10px rgba(224, 196, 140, .5);
opacity: 0;
transition: opacity .45s ease, width .45s ease, margin-left .45s ease;
}
.rsk-trakt__tekst p.rsk-trakt__p--pishetsya::after {
width: .46em; margin-left: .14em; opacity: 1;
animation: rsk-ogonek 1.35s ease-in-out infinite;
}
@keyframes rsk-ogonek {
0%, 100% { opacity: .45; transform: scale(.86); }
50% { opacity: 1; transform: scale(1.06); }
}
/* Подпись Альбины под машинным разбором. Класс пришёл из разметки
вместе с блоком печати; правил у него не было, и на боевом он
выглядел бы обычным абзацем трактовки. Здесь только отбивка, кегль
сноски и цвет — слова в нём дословные, из настроек, и их я не трогаю.
Кегль 15 px: это подпись под блоком, а не основной текст, ровно как
.rsk-ogovorka в 14 px выше по файлу. */
.rsk-trakt .rsk-trakt__podpis {
margin: 22px 0 0; padding-top: 14px;
border-top: 1px solid var(--hair);
font-size: 15px; line-height: 1.6; color: var(--ink-55);
}
/* ----------------------------------------------------------------------
30.12. РАССКАЗ О СИТУАЦИИ — ФОРМА ПЕРЕД РАСКЛАДОМ
----------------------------------------------------------------------
Решение владельца 20.09.2026: рассказ идёт ДО карт. Большое поле под
рассказ, под ним два маленьких необязательных — имя и «на кого».
Классы .rsk-pole-vvoda, .rsk-schetchik и .rsk-nad уже есть в файле и
здесь не переписываются: доопределяется только новое — сам блок, пара
полей и однострочный вариант поля.
СЧЁТЧИК В ЛЕВОМ УГЛУ ПОЛЯ. Тот же приём, что у своей строки вопроса
(раздел 5 предложения 3): поле и счётчик лежат в одной области сетки,
поэтому счётчик не занимает отдельной строки и не отодвигает кнопку
расклада вниз. pointer-events: none, чтобы нажатие на цифры
проваливалось в поле и ставило каретку.
ПОЧЕМУ ВЛЕВО (Указка, пик #267, 22.09.2026). Дословно: «в этом окне
цифра сколько строк перенести влево 0 / 2000». Правый угол занял
знак микрофона (раздел 42), и вдвоём им там тесно: на 390 счётчик и
знак сошлись бы в одну точку. Заодно ушла и оглядка на уголок
растяжки — он справа, а слева отступа хватает обычного.
ДВА ПОЛЯ В СТРОКУ. От 560 px пара раскладывается в две колонки через
grid-auto-flow: column при двух строках — подпись попадает в первую
строку, поле во вторую, и обе подписи стоят на одной линии. Если
пустить поток по строкам, подпись окажется РЯДОМ со своим полем, а
не над ним. На телефоне поток обычный, сверху вниз: два поля по 40 и
80 знаков в 354 px не стоят рядом никак.
ОДНОСТРОЧНОЕ ПОЛЕ. У .rsk-pole-vvoda min-height 150 px и нижний
отступ 34 px — это место под счётчик в большом поле. Строке ни то, ни
другое не нужно: 13 px сверху и снизу при кегле 17 и межстрочном 1,4
дают высоту около 52 px — палец попадает, и поле не выглядит
обрубком textarea. Кегль не задаётся вовсе: он наследуется от
.rsk-pole-vvoda и растёт вместе с ним до 19 px на экране владельца.
Ниже 16 px не опускается нигде — это правило проекта.
Подписи — Manrope прописными 12 px, как у поля своего вопроса: это
подписи, и правило про 16 px к ним не относится. Тихая часть подписи
(«необязательно») стоит тем же кеглем, но приглушённым цветом: своих
слов я в неё не добавляю, текст приходит из app/rasklady_teksty.py. */
.rsk-rasskaz {
display: grid;
margin: 26px 0 0;
}
.rsk-rasskaz .rsk-nad {
font-size: 12px; letter-spacing: .24em;
}
.rsk-rasskaz > .rsk-nad { grid-area: nad; margin: 0 0 12px; }
.rsk-rasskaz > .rsk-pole-vvoda { grid-area: pole; }
.rsk-rasskaz > .rsk-schetchik {
justify-self: start;
border-radius: 6px;
font-variant-numeric: tabular-nums;
pointer-events: none;
}
/* СЧЁТЧИК ПОД ПОЛЕМ (26.09.2026). В углу поля он закрывал последнюю
набранную строку: текст длиннее поля прокручивается под плашку, и на
390 строка у нижнего края читалась только наполовину. Теперь у него
своя строка сетки сразу под полем, у левого края — там же, где он
стоял («влево», пик #267), только снаружи. Плашка-подложка больше не
нужна: под счётчиком нет текста. */
.rsk-rasskaz > .rsk-schetchik {
grid-area: schet;
align-self: start;
margin: 8px 0 0 16px;
padding: 0;
background: none;
}
/* СТРОКА НАД ПОЛЕМ РАССКАЗА (26.09.2026): вопросы — подведение к
раскладу, а не сам расклад. Без своей области сетки строка (класс
`.rsk-ogovorka`, общий на весь раздел) попадала в свободную область
`pary` — а та лежит ПОСЛЕ поля и счётчика, у самой кнопки. Заводим ей
свою строку сетки первой, перед меткой поля — ровно там, где сказано
«над полем». */
.rsk-rasskaz { grid-template-areas: 'porog' 'nad' 'pole' 'schet' 'pary'; }
.rsk-rasskaz > [data-vp-sbor-porog] { grid-area: porog; margin: 0 0 16px; }
/* СЧЁТЧИК ПОПЫТОК (26.09.2026). НИЖЕ 560 `.rsk-hero__deystvie` — СТОЛБИК (`flex-direction: column`,
раздел 67), и `flex: 1 0 100%` у общей `.rsk-ogovorka` (74.2) —
это `flex-basis: 100%` ПО ГЛАВНОЙ ОСИ, а в столбике главная ось
вертикальная. Пока в блоке был только один такой элемент (строка
беды), это ничему не мешало. С кнопкой и ДВУМЯ такими элементами
(беда и теперь счётчик попыток) `flex-wrap: wrap` в column-режиме
раскладывает их по СТОЛБЦАМ, а не по строкам: второй элемент уезжает
за правый край (замер 26.09.2026, стенд 8054: x 386 из 390 при
ширине блока 354, второй столбец целиком за окном). Своей высоты
счётчику просить не у кого — он должен просто занять целую строку.
С 560 блок и так становится строкой, и родное поведение (`flex: 1 0
100%` заводит НОВУЮ строку под кнопкой) там уже верное — трогаем
только столбик. Второго `.rsk-hero__deystvie` (раздел 74.2, у кнопки
«Разложить карты») это не касается: там счётчика нет, и селектор
`:has()` до него не дотягивается. */
@media (max-width: 559px) {
.rsk-hero__deystvie:has([data-vp-popytka]) { flex-wrap: nowrap; }
.rsk-hero__deystvie > [data-vp-popytka] { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 2200px) {
.rsk-rasskaz { margin-top: 34px; }
.rsk-rasskaz .rsk-nad { font-size: 13px; }
.rsk-rasskaz > .rsk-schetchik { margin: 10px 0 0 20px; }
}
/* ----------------------------------------------------------------------
30.13. ДВИЖЕНИЕ ВЫКЛЮЧЕНО
----------------------------------------------------------------------
Правило по всему файлу одно: гасим движение, но ничего не прячем и
ничего не теряем. Здесь это важнее обычного, потому что три новых
анимации стоят на both/forwards — а значит, при простом animation:
none они застыли бы на ПЕРВОМ кадре, то есть на прозрачности 0.
Поэтому везде, где так, конечное состояние выписано руками.
Что остаётся видно человеку с выключенным движением:
— карта переворачивается мгновенно (transform из раздела КАРТА);
— тень под картой стоит на месте;
— искры ожидания горят ровно, строка состояния меняется без перехода;
— все абзацы трактовки видны сразу, уголёк в конце набираемой строки
горит ровно и по снятию класса исчезает. */
@media (prefers-reduced-motion: reduce) {
.rsk-karta.otkryta .rsk-karta__in,
.rsk-karta.otkryta::before,
.rsk-karta--art.otkryta .rsk-karta__lico::after,
.rsk-karta--art.blesnula .rsk-karta__lico::after,
.rsk-zhdem__znak::before { animation: none; }
.rsk-karta.otkryta .rsk-karta__in { transform: rotateY(180deg); }
.rsk-karta::before { opacity: .34; transform: none; }
.rsk-zhdem__znak::before { opacity: .7; }
.rsk-zhdem__znak i { animation: none; opacity: .75; transform: none; }
.rsk-trakt .rsk-zhdem .rsk-zhdem__stroka { transition: none; }
.rsk-trakt .rsk-trakt__tekst p {
animation: none; opacity: 1; transform: none; filter: none;
}
.rsk-trakt__tekst p::after { transition: none; }
.rsk-trakt__tekst p.rsk-trakt__p--pishetsya::after {
animation: none; opacity: 1; transform: none;
}
}
/* Печать. В разделе 10 страница на бумаге переворачивается в светлое, и
тень под картой — единственное новое, что на белом листе стало бы
серым пятном под каждой картой. Ореол .rsk-karta::after там уже
убран той же строкой, теперь рядом стоит и тень. */
@media print {
.rsk-karta::before { display: none; }
}
/* ======================================================================
ЧТО НУЖНО В РАЗМЕТКЕ И В СКРИПТЕ
======================================================================
Разметку ведёт другая сессия; на 20.09.2026 в
templates/rasklady/_chasti.html уже стоит всё, что нужно этим стилям.
Записываю здесь целиком — чтобы при следующей правке шаблона ничего
не отвалилось молча. */
/* ======================================================================
31. РАЗБОР ВО ВСЮ ШИРИНУ (20.09.2026)
======================================================================
Владелец сказал это дважды, и второй раз — с раздражением:
«расклад надо писать на всю длину» (Указка, пик #202) и «текст опять
написан столбиком, справа куча места» (пик #205).
Что мешало. У трактовки стоит мерка `max-width: 68ch` — её поставила
другая сессия в разделе «ТРАКТОВКА — ЛИСТ, А НЕ ПАНЕЛЬ», и довод там
верный: строка в 150 знаков читается тяжело. Довод верный, но решает
не он: владелец смотрел на живой разбор своими глазами и просил
ширины.
Почему правило стоит в КОНЦЕ файла, а не рядом с `.rsk-trakt--pod`
в разделе про обложку: вес селекторов у `.rsk-trakt` и
`.rsk-trakt--pod` одинаковый (один класс), поэтому побеждает тот, что
ниже по файлу. Поставленное выше, правило молча не работало — я это
поймал замером ширины в браузере: 557 px при 1920, ровно те самые
68 знаков. */
.rsk-trakt--pod { max-width: none; }
/* 31.1. МЕРКА ПЕРЕЕХАЛА С БЛОКА НА ТЕКСТ (23.09.2026, Указка пик #277)
----------------------------------------------------------------------
Владелец, дословно: «расклад идет вот так а надо чтобы он был на всю
ширену жкранв так он будет занимать меньше места».
Что он видел. Блок «Что говорит расклад» стоял колонкой в 557 px —
мерку 68ch ему давало правило в разделе 46 (≥1600) и базовое правило
`.rsk-trakt`. Замер на 8021 с одним и тем же текстом в 4 056 знаков:
1920 — высота 2 787 px, 2880 — 3 740 px. Место расклад занимал
именно потому, что был узким.
Что сделано. Блок (фон, золотая черта слева, заголовок) идёт во всю
ширину контейнера `.rsk`, с теми же боковыми полями, что у стола.
Строку держит не блок, а сам текст: мерка стоит здесь, на
`.rsk-trakt__tekst`, и это ЕДИНСТВЕННОЕ место, где она задана
(правило 8.7) — ни в разделе 46, ни в 51, ни в 60 своей ширины у
разбора больше нет.
Почему 104ch, а не 90. Единица `ch` считается от кегля самого
`.rsk-trakt__tekst` (16 px), а абзацы внутри крупнее: 18 px в корпусе
и 19 px у первого, 20 и 22 на 2200+. Одно число даёт строку 91 знак
при 18 px, 86 при 19, 82 при 20 и 75 при 22 — везде не длиннее ~90,
и число при этом одно. Кегль, начертание и межстрочный интервал не
тронуты: правило 0.
Текст прижат к левому краю блока (`margin-inline: 0`), как все узкие
блоки раздела, — по той же причине, что в разделе 46: центровка
ломает левый край страницы.
На телефоне и планшете НИЧЕГО не меняется: там текст 335 и 660 px,
до 104ch (852 px) он не дотягивается, и мерка просто не включается.
МЕРКИ БОЛЬШЕ НЕТ ВОВСЕ (23.09.2026, Указка пик #281). Владелец про
этот же разбор, дословно: «этот текст пишется во всю ширину окна, а
сейчас нет; не важно, телефон, ноутбук или широкоформатный монитор».
Вчерашние 124ch его не устроили: на окне 1760 текст занимал 1015,8 px
при блоке в 1608 — то самое «а сейчас нет». Число снято, а не
увеличено: любое число здесь — это снова колонка посреди пустоты, а
он просил ширину окна. Довод про длинную строку остаётся записанным
(разделы 24, 46, 51), но решает не он: так решил владелец.
`margin-inline: 0` оставлен — текст по-прежнему прижат к левому краю
блока, а не отцентрован. Кегль, начертание и межстрочный интервал не
тронуты: правило 0. Сам блок уходит во всю ширину окна в разделе 76.3. */
.rsk-trakt__tekst { max-width: none; margin-inline: 0; }
/* Оговорка переехала из-под карт вниз, под разбор («информация у таро
Альбины должна быть потом, после расклада ИИ», пик #202). На старом
месте она стояла в узкой колонке действия и ширину брала оттуда —
на новом месте от этого получалась лесенка в три коротких строки.
Даём ей ту же ширину, что у разбора, и отбивку сверху. */
.rsk-ogovorka--pod { margin: 18px 0 0; max-width: 70ch; }
/* ======================================================================
32. СВИТОК: ДЛИННОЕ ЧТЕНИЕ УХОДИТ ВНИЗ И СВОРАЧИВАЕТСЯ (20.09.2026)
======================================================================
Указка, контейнер 4, пик #204. Владелец про блок «Как здесь всё
устроено» на /rasklady, дословно: «это должно быть в самом низу, и в
идеале раскрываться красиво по блокам и вопросам, а не сплошным
текстом; всё внимание на расклад человека, а не хер пойми чё много
всего». И раньше, тем же днём: «в середине много текста, выглядит
как вордовский документ».
Сделано ровно это, тремя движениями:
1. ВНИЗ. Блок уезжает за «Вопросы и ответы», в самый конец страницы
(правка в шаблонах, её вносит сессия, которая их держит).
Середина страницы остаётся под расклад человека.
2. СВОРАЧИВАЕТСЯ. Блок становится строкой с плюсом — такой же, как
строки в «Вопросах и ответах». Закрытый он занимает 60 px вместо
1500. Вместе с пятью вопросами низ страницы читается одним
спокойным справочником: шесть строк, все закрыты.
3. РАСКРЫВАЕТСЯ РАЗВОРОТОМ, а не простынёй. Внутри — поле из сукна,
золотые уголки, корешок и закрытая карта в левом поле. На 1280 и
шире заголовок уже стоит в строке-зеве, а текст идёт своей мерой
рядом с полем: колонки вместо листа A4. */
/* ----------------------------------------------------------------------
32.1. СТРОКА-ЗЕВ
----------------------------------------------------------------------
Язык взят у «Вопросов и ответов» дословно: волосок сверху и снизу,
кружок с плюсом справа, поворот на 45° при открытии, золото у
открытой строки (.rsk-vo, строки 519–532 и 2595–2617). Второго
способа «нажми меня» в разделе не заводим.
Отличие одно: в зеве стоит настоящий h2, а не строка вопроса, и он
крупнее — это всё-таки глава, а не вопрос. Волосок под заголовком
гасится: в строке он налезал бы на кружок. */
.rsk-svitok {
/* НИЖНЯЯ ГРАНИЦА 64, А НЕ 40 (правка 21.09.2026, проход по 390 глазами).
На телефоне 5vw = 19 px, и бралось 40 — меньше, чем шаг между
строками вопросов (73 и 91). Свиток вставал в их ритм и читался
пятым вопросом: тот же волосок, тот же кружок с плюсом, только
заголовок крупнее. Идиому не меняю — она выбрана нарочно, второго
способа «нажми меня» в разделе нет; меняю только воздух над ней. */
margin-top: clamp(64px, 5vw, 72px);
border-top: 1px solid var(--hair);
border-bottom: 1px solid var(--hair);
}
.rsk-svitok__zev {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 20px 4px;
cursor: pointer;
list-style: none;
transition: color .25s ease;
}
.rsk-svitok__zev::-webkit-details-marker { display: none; }
.rsk-svitok__zev .rsk-h2 {
margin: 0;
padding-bottom: 0;
font-size: clamp(22px, 3.8vw, 30px);
}
.rsk-svitok__zev .rsk-h2::after { display: none; }
.rsk-svitok__zev::after {
content: '+';
flex: 0 0 auto;
width: 30px; height: 30px;
display: grid; place-items: center;
border: 1px solid var(--rsk-line); border-radius: 50%;
font-size: 19px; line-height: 1;
color: var(--gold);
transition: transform .3s ease, border-color .25s ease,
background-color .25s ease, color .25s ease;
}
@media (hover: hover) {
.rsk-svitok__zev:hover .rsk-h2 { color: var(--gold-lit); }
.rsk-svitok__zev:hover::after {
border-color: var(--gold);
background-color: rgba(201, 168, 106, .10);
}
}
.rsk-svitok[open] .rsk-svitok__zev .rsk-h2 { color: var(--gold-lit); }
.rsk-svitok[open] .rsk-svitok__zev::after {
transform: rotate(45deg);
border-color: var(--gold); color: var(--gold-lit);
}
/* Обводка при ходьбе клавиатурой — та же, что у вопросов. */
.rsk-svitok__zev:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 3px;
}
@media (min-width: 2200px) {
.rsk-svitok__zev::after { width: 42px; height: 42px; font-size: 26px; }
}
/* Раскрытие — тем же движением, что ответ на вопрос (.rsk-vo,
строка 1369): текст поднимается и проявляется, а не выпрыгивает. */
.rsk-svitok[open] .rsk-text { animation: rsk-otvet .45s ease both; }
@media (prefers-reduced-motion: reduce) {
.rsk-svitok[open] .rsk-text { animation: none; }
}
/* ----------------------------------------------------------------------
32.2. ПОЛЕ ЧТЕНИЯ ПОЛУЧАЕТ МАТЕРИАЛ
----------------------------------------------------------------------
было: один косой градиент, гаснущий вправо. Поле есть, материала
нет: текст лежит на подкрашенном воздухе.
стало: тот же бархат, что под всей страницей (--rsk-fakt, файл
stol-plitka.webp — уже загружен, нового запроса нет),
тёмная подложка поверх него и четыре золотых уголка.
зачем: «вордовский документ» — это текст на бумаге. Как только под
текстом оказывается сукно стола, а не лист, вид меняется
раньше, чем человек прочтёт первую строку.
РАМКИ НЕТ, И ЭТО ВАЖНО. Прямоугольник с обводкой вокруг текста —
ровно то, чем документ и выглядит. Край блока обозначен уголками
(тот же приём, что у .rsk-zov, строки 1379–1390) и очень слабым
кантом в 7 %, а не линией. Глубину даёт тень: лист лежит на столе,
а не напечатан на нём.
Уголки собраны градиентами в фоне, потому что оба псевдоэлемента у
.rsk-text заняты (::before — волосок, ниже карта; ::after — поле),
а третьего нет. Четыре слоя по одному пикселю дешевле любой
картинки. Списки слоёв вынесены в переменные, чтобы в развороте к
ним добавился корешок, а не переписался весь фон. */
.rsk-text {
--rsk-ugolki:
linear-gradient(90deg, rgba(201, 168, 106, .5), rgba(201, 168, 106, 0))
no-repeat left 16px top 16px / 30px 1px,
linear-gradient(180deg, rgba(201, 168, 106, .5), rgba(201, 168, 106, 0))
no-repeat left 16px top 16px / 1px 30px,
linear-gradient(270deg, rgba(201, 168, 106, .5), rgba(201, 168, 106, 0))
no-repeat right 16px bottom 16px / 30px 1px,
linear-gradient(0deg, rgba(201, 168, 106, .5), rgba(201, 168, 106, 0))
no-repeat right 16px bottom 16px / 1px 30px;
--rsk-sukno:
linear-gradient(105deg,
rgba(8, 12, 9, .70) 0%, rgba(8, 12, 9, .58) 52%, rgba(8, 12, 9, .42) 100%),
var(--rsk-fakt) center / 300px 300px;
}
.rsk-text::after {
border-radius: 4px;
background: var(--rsk-ugolki), var(--rsk-sukno);
box-shadow:
0 0 0 1px rgba(201, 168, 106, .07),
0 26px 60px rgba(0, 0, 0, .34);
}
/* ----------------------------------------------------------------------
32.3. РАЗВОРОТ С 1280
----------------------------------------------------------------------
ПОЧЕМУ 1280, А НЕ 1024, И ПОЧЕМУ ПОЛКА ТАКАЯ УЗКАЯ. Мера строки
важнее разворота: её раздел 24 считал и защищал, и отдавать её за
красивую сетку нельзя. Числа не выведены, а ЗАМЕРЕНЫ на живой
странице — я включал и выключал этот раздел и мерил ширину абзаца:
окно блок было полка+зазор стало
1280 1052 703 180 + 70 714 ✔
1440 1192 744 260 + 72 748 ✔
1920 1328 744 260 + 72 770 ✔
2400 1616 857 280 + 80 891 ✔
Ни на одной ширине строка не стала короче, чем была, — это условие
я держал специально. Ниже 1280 разворота нет вовсе: там на полку с
картой остаётся меньше 130 px, и она либо съела бы строку, либо не
поместилась. Блок остаётся ровно таким, каким был утверждён, —
просто на новом поле из 32.2 и внутри свитка.
ЗАКРЫТАЯ КАРТА В ПОЛЕ — та же рубашка, что у колоды на первом экране
(koloda-1/rubashka-360.webp, страницей уже загружена). Ничего нового
не рисуем и ничего чужого не берём; карта лежит слегка косо, как
оставленная на столе, и прижата к корешку. В разметке её нет вовсе:
ни диктор, ни поиск её не увидят, описывать её словами не нужно.
КОРЕШОК стал слоем фона, а не отдельной фигурой: псевдоэлемент
::before забрала карта, а третьего нет. Линия та же — золото
сверху, четверть тона в середине, ничего по краям.
СЕТКА И СХЛОПЫВАНИЕ ОТСТУПОВ. Раздел 26 предупреждал: в сетке
отступы не схлопываются, и воздух перед перелинковкой сложится в
двойной. Поэтому он задан руками: .85 (низ предыдущего абзаца) +
.65 = 1.5 хода — ровно столько, сколько давало схлопывание. */
@media (min-width: 1280px) {
.rsk-text {
--rsk-polka: 180px; /* левое поле разворота */
--rsk-zazor: 70px; /* корешок */
--rsk-vnutri: 44px; /* внутреннее поле блока */
--rsk-karta-w: 132px; /* закрытая карта, 2:3 */
--rsk-koreshok:
linear-gradient(180deg,
rgba(201, 168, 106, 0) 0%,
var(--gold) 7%,
rgba(201, 168, 106, .30) 34%,
rgba(201, 168, 106, .24) 78%,
rgba(201, 168, 106, 0) 100%)
no-repeat
left calc(var(--rsk-vnutri) + var(--rsk-polka) + var(--rsk-zazor) / 2)
top 0 / 1px 100%;
max-width: none;
display: grid;
grid-template-columns: var(--rsk-polka) minmax(0, var(--rsk-mera));
column-gap: var(--rsk-zazor);
row-gap: 0;
align-items: start;
padding: var(--rsk-vnutri);
}
.rsk-text > p { grid-column: 2; }
/* Поле совпадает с блоком, к уголкам добавляется корешок. */
.rsk-text::after {
left: 0; right: 0; top: 0; bottom: 0;
background: var(--rsk-koreshok), var(--rsk-ugolki), var(--rsk-sukno);
}
/* ::before из раздела 26 был волоском — теперь это карта. */
.rsk-text::before {
left: calc(var(--rsk-vnutri) + var(--rsk-polka) - var(--rsk-karta-w));
top: calc(var(--rsk-vnutri) + .25em);
bottom: auto;
width: var(--rsk-karta-w);
height: calc(var(--rsk-karta-w) * 1.5);
border-radius: 6px;
background:
linear-gradient(170deg, rgba(8, 12, 9, .20), rgba(8, 12, 9, .62)),
var(--rsk-rubashka) center / cover no-repeat;
box-shadow:
0 0 0 1px rgba(201, 168, 106, .20),
0 18px 40px rgba(0, 0, 0, .48);
transform: rotate(-4deg);
pointer-events: none;
}
/* Воздух перед перелинковкой — вместо схлопывания (см. выше). */
.rsk-text > p:last-child:has(a) {
margin-top: calc(var(--rsk-hod) * .65 * 1em);
}
}
@media (min-width: 1440px) {
.rsk-text { --rsk-polka: 260px; --rsk-zazor: 72px; --rsk-vnutri: 56px; }
}
/* Экран владельца. Полка НЕ растёт вместе с кеглем: буквы там уже
22 px, и мера 66ch стоит 825 px — всё, что осталось, отдаём тексту.
Карта, наоборот, крупнее: в масштабе 67 % 132 px выглядят как 88. */
@media (min-width: 2200px) {
.rsk-text {
--rsk-polka: 280px; --rsk-zazor: 80px; --rsk-vnutri: 64px;
--rsk-karta-w: 168px;
}
}
/* На бумаге: свиток раскрыт, поля и карты нет, колонок нет.
Раздел 26 уже гасит ::before и ::after в печати. */
@media print {
.rsk-svitok { border: 0; margin-top: 24px; }
.rsk-svitok__zev::after { display: none; }
.rsk-svitok .rsk-text { display: block; padding: 0; max-width: 66ch; }
}
.rsk-stol { --k-h: calc(var(--k-w) * 1.5); }
/* ======================================================================
34. КОЛОДА ОСТАЁТСЯ НА СВОЁМ СТОЛЕ (20.09.2026)
======================================================================
Раздача из раздела 33 отлаживалась на отдельной странице-прототипе,
где стол занимает всю ширину. На сайте у страницы расклада обложка —
две колонки: слева заголовок и текст, справа стол. Колода уезжала
влево на 2,1 ширины карты и оказывалась ПОВЕРХ заголовка: замерено,
колода 760–966, а её стол начинается с 975.
Поэтому переезд укорочен — колода паркуется у левого края своего
стола и с текстом больше не пересекается. Само движение, его кривая
и длительность не тронуты: владелец просил плавности, а не короткого
пути. */
/* ======================================================================
35. РАЗМЕР КАРТ СЧИТАЕТСЯ ОТ СОДЕРЖИМОГО, А НЕ ОТ ОКНА (20.09.2026)
======================================================================
Владелец просил карты крупнее: «на 17 дюймовом мониторе карты можно
сделать как по мне больше». В разделе 33 размер считается от ширины
ОКНА — там стол отлаживался на отдельной странице во всю ширину. На
сайте у содержимого есть предел: `.rsk` не шире 1480 px, внутри ещё
по 76 px полей, то есть рабочая ширина 1328 px и на 1920, и на 2880.
И второе, что съедает ширину: колода паркуется слева от ряда, и стол
резервирует ей место — `padding-left: var(--k-w) * 1.75`. То есть на
ряд остаётся не вся ширина, а на 1,75 карты меньше. */
@media (min-width: 1024px) {
/* Колода большого расклада паркуется НАД рядом: места сбоку у него
нет, ряд занимает всю рабочую ширину. Подъём ставит СКРИПТ, стилем
прямо на узле.
Почему не правилом: правило здесь молча не доходило. Проверено в
браузере трижды — и через `top`, и через `margin-top`, и в разных
формах calc: селектор совпадает, соседние объявления того же блока
применяются (`left: 50%` встал), а подъём вычисляется в ноль.
Искать дальше дороже, чем поставить число из скрипта: он и так
считает геометрию раздачи. */
.rsk-stol--mnogo {
padding-left: 0;
padding-top: calc(var(--k-h) * 1.05);
}
}
/* Ромб-огранка под картой есть и у невытянутой позиции — но пустой.
Он рисуется правилом `.rsk-poz:not(.rsk-poz--zhdet)::before`, то есть
появляется только когда карта легла. Пока позиции были вынуты из
потока, это ничего не меняло. Теперь они держат место, и разница
вылезла: открытая позиция выше закрытой на 16 px, а значит соседние
ряды подпрыгивают, когда карта открывается. Замерено: 356 против 340.
Поэтому место под ромб занято всегда, а виден он по-прежнему только
у вытянутой карты. `scale(0)` прячет рисунок, но не убирает коробку —
раскладка от этого не меняется. */
.rsk-poz--zhdet::before {
content: '';
order: 1;
width: 5px; height: 5px;
margin: -2px 0 -2px;
background: transparent;
transform: rotate(45deg) scale(0);
}
/* ======================================================================
36. ПОГАСШАЯ КНОПКА ДОЛЖНА ВЫГЛЯДЕТЬ ПОГАСШЕЙ (20.09.2026)
======================================================================
Нашла приёмка на /rasklady/vopros, проверил у себя: правило
`.rsk-porog .btn[disabled] { opacity: .45 }` (строка 586) привязано к
окну порога, а кнопки с согласием стоят ВНЕ окна — в обложке
страницы. Общего правила нет ни здесь, ни в site.css: там на
[disabled] отзывается только .rail__btn.
Значит у выключенной кнопки «Подобрать расклад» замерено opacity 1,
полный золотой фон и курсор-палец. Человек жмёт — не происходит
ничего, и почему — не написано нигде.
Это не оформление, а работоспособность: кнопка обязана показывать,
что она пока не работает. Вид берём тот же, что у порога, чтобы
выключенная кнопка везде в разделе выглядела одинаково.
pointer-events НЕ снимаю нарочно: с ними курсор показывает «нельзя»,
а без них курсор остаётся обычной стрелкой и подсказки не будет.
Нажатие браузер и так не пропустит — кнопка disabled.
Правило намеренно широкое (любая .btn в блоке действия), потому что
таких кнопок в разделе уже три: «Подобрать расклад», «Разложить
карты» и кнопка расклада на странице готового расклада. */
.rsk-hero__deystvie .btn[disabled],
.rsk-rasskaz .btn[disabled] {
opacity: .45;
cursor: not-allowed;
}
/* ======================================================================
37. СПИСОК СОБРАННЫХ ВОПРОСОВ (20.09.2026)
======================================================================
Страница «Свой вопрос»: ассистент собирает из рассказа 4–11 вопросов,
человек смотрит и лишние убирает. Разметку кладёт
static/js/rasklady_vopros.js: ul.rsk-vopros-spisok → li.rsk-vopros →
span.rsk-vopros__t + button.rsk-vopros__ubrat со знаком «×».
Язык взят у «Вопросов и ответов» (.rsk-vo, строки 519–532 и
2595–2617): строка, волосок под ней, кружок справа. Там кружок
открывает, здесь убирает — разница только в знаке, и это правильно:
человек уже знает, что кружок справа у строки нажимается.
КНОПКА 44 px. Это не круглое число, а нижний предел цели под палец
из рекомендаций по доступности; у кружка в вопросах 30 px, но тот
стоит в строке высотой 62 px и палец попадает по всей строке.
Здесь нажимается только сам кружок, поэтому он крупнее.
Слов я не добавляю: «×» и подпись для диктора ставит скрипт из
самого вопроса. Пустого места под будущую надпись не резервирую. */
.rsk-vopros-spisok {
list-style: none;
margin: 14px 0 0;
padding: 0;
border-top: 1px solid var(--hair);
}
.rsk-vopros {
display: flex; align-items: center; justify-content: space-between;
gap: 14px;
padding: 8px 4px;
border-bottom: 1px solid var(--hair);
}
/* Скрипт убранную строку удаляет, но если однажды начнёт прятать —
display: flex перебил бы hidden, и строка осталась бы видимой. */
.rsk-vopros[hidden] { display: none; }
.rsk-vopros__t {
font-size: 17px;
line-height: 1.5;
color: var(--ink);
text-wrap: pretty;
}
.rsk-vopros__ubrat {
flex: 0 0 auto;
width: 44px; height: 44px;
display: grid; place-items: center;
padding: 0;
border: 1px solid var(--rsk-line); border-radius: 50%;
background: none;
color: var(--gold-dim);
font: 22px/1 'Manrope', Arial, sans-serif;
cursor: pointer;
transition: border-color .25s ease, color .25s ease,
background-color .25s ease;
}
@media (hover: hover) {
.rsk-vopros__ubrat:hover {
border-color: var(--gold);
color: var(--gold-lit);
background-color: rgba(201, 168, 106, .10);
}
}
.rsk-vopros__ubrat:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
@media (min-width: 2200px) {
.rsk-vopros__t { font-size: 20px; }
.rsk-vopros__ubrat { width: 52px; height: 52px; font-size: 26px; }
}
/* 37а. ВЫБОР ОДНОГО ВОПРОСА — бесплатная ступень (21.09.2026).
Скрипт ставит в строку `label.rsk-vopros__t` и родной переключатель
`input[data-vp-vybor]`. Родной был 13 px с синим акцентом браузера:
чужой цвет и мимо пальца.
Языка нового нет. Кружок — тот же, что у кнопки «×» в этой же строке
(волосок `--rsk-line`, при наведении золото), выбранная строка — те
же три признака, что у выбранной ступени `.rsk-vybor__variant--active`:
золотая кромка, тёплая заливка, золотая черта снизу.
НАЖИМАЕТСЯ ВСЯ СТРОКА: подпись растянута на неё невидимым слоем, а
подпись привязана к переключателю через `for`. Скрипт не тронут.
Высота строки не меньше 56 px — с запасом над 44 px под палец. */
.rsk-vopros:has([data-vp-vybor]) {
position: relative;
min-height: 56px;
padding: 10px 12px;
border: 1px solid transparent;
border-bottom-color: var(--hair);
border-radius: 4px;
cursor: pointer;
transition: border-color .2s, background-color .2s;
}
.rsk-vopros:has([data-vp-vybor]) .rsk-vopros__t { flex: 1 1 auto; cursor: pointer; }
.rsk-vopros:has([data-vp-vybor]) .rsk-vopros__t::after {
content: ''; position: absolute; inset: 0;
}
.rsk-vopros [data-vp-vybor] {
-webkit-appearance: none; appearance: none;
flex: 0 0 auto;
width: 28px; height: 28px; margin: 0;
border: 1px solid var(--rsk-line-lit); border-radius: 50%;
background: none;
cursor: pointer;
transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.rsk-vopros [data-vp-vybor]:checked {
border-color: #c5a25d;
background: radial-gradient(circle, var(--gold-lit) 0 5px, transparent 6px);
box-shadow: 0 0 12px rgba(224, 196, 140, .35);
}
@media (hover: hover) {
.rsk-vopros:has([data-vp-vybor]):hover { background: rgba(197, 162, 93, .08); }
.rsk-vopros:has([data-vp-vybor]):hover [data-vp-vybor] { border-color: var(--gold); }
}
.rsk-vopros:has([data-vp-vybor]:checked) {
border-color: #c5a25d;
background: rgba(197, 162, 93, .17);
box-shadow: inset 0 -2px 0 #c5a25d;
}
.rsk-vopros [data-vp-vybor]:focus { outline: none; }
.rsk-vopros:has([data-vp-vybor]:focus-visible) {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
@media (min-width: 2200px) {
.rsk-vopros [data-vp-vybor] { width: 34px; height: 34px; }
.rsk-vopros [data-vp-vybor]:checked {
background: radial-gradient(circle, var(--gold-lit) 0 6px, transparent 7px);
}
}
@media (prefers-reduced-motion: reduce) {
.rsk-vopros:has([data-vp-vybor]), .rsk-vopros [data-vp-vybor] { transition: none; }
}
/* ======================================================================
38. ДВА ПУТИ ВМЕСТО ОДНОЙ НАДПИСИ (20.09.2026)
======================================================================
Указка, пик #202.4. Владелец про блок «Настоящий расклад»: «если мы
говорим, а если вы хотите обучиться, то вот здесь обучение и
показываем там ссылку на обучение. если мы говорим хотите заказать
расклад у живого таролога, то мы кидаем ссылку на аккаунт Альбины».
Стало: две ступени одного голоса. Первый путь крупнее и полным
цветом, второй тише на ступень, но тем же начертанием и тем же
цветом семейства — это выбор из двух, а не заголовок с подписью.
Кнопки уже разведены: золотая и обводкой.
ВОЛОСОК ПЕРЕД ВТОРЫМ ПУТЁМ — тот же, что под заголовками раздела
(.rsk-h2::after, строки 1334–1339): 46 px, золото, гаснет вправо.
Сплошной линии во всю колонку не даю: она разрезала бы блок на две
карточки, а это один блок с двумя выходами.
ПОЧЕМУ СЕЛЕКТОР ДВОЙНОЙ. Первый путь — это h2, второй — абзац, и на
них уже отвечают `.rsk-zov h2` (строка 464) и `.rsk-zov p` (строки
465, 3215, 3236) с весом (0,1,1). Одного класса (0,1,0) не хватает:
проверил на живой странице — кегль оставался 32 и 18, а отбивка
сверху обнулялась. Поэтому `.rsk-zov .rsk-zov__put`, вес (0,2,0). */
.rsk-zov .rsk-zov__put {
margin: 0 0 14px;
max-width: 24ch;
font-weight: 300;
font-size: clamp(22px, 3.6vw, 30px);
line-height: 1.2;
letter-spacing: -.01em;
color: var(--ink);
text-wrap: balance;
}
/* МЕРА ВТОРОГО ПУТИ ШИРЕ ПЕРВОГО, И ЭТО ИСПРАВЛЕНИЕ МОЕЙ ЖЕ ОШИБКИ.
24ch — мера ЗАГОЛОВКА, у него две-три строки и своя логика переноса.
Здесь предложение, и ему нужна мера предложения. 46ch даёт около
620 px при кегле 22 — то есть примерно 60 знаков в строке, ровно тот
коридор, в котором читают.
Первый путь остаётся на 24ch: там по-прежнему короткая фраза, и
растягивать её на всю колонку незачем. */
.rsk-zov .rsk-zov__put--vtoroy {
position: relative;
max-width: 46ch;
margin-top: clamp(28px, 3vw, 38px);
padding-top: clamp(22px, 2.4vw, 30px);
font-size: clamp(18px, 2.4vw, 22px);
color: var(--ink-70);
}
.rsk-zov .rsk-zov__put--vtoroy::before {
content: '';
position: absolute; left: 0; top: 0;
width: 46px; height: 1px;
background: linear-gradient(90deg, var(--gold), rgba(201, 168, 106, 0));
}
/* ======================================================================
39. РЯД КАРТ НЕ РВЁТСЯ: ПОЗИЦИИ СЖИМАЮТСЯ, КАРТЫ НАКЛАДЫВАЮТСЯ
======================================================================
Указка, пик #201. Владелец, дословно: «карты ужасные, не та длина,
размер и тд; карты можно красиво слегка накладывать друг на друга,
если мало места, потому что так выглядит не очень; обёртка не та».
ПОЧЕМУ РВАЛСЯ, ХОТЯ РАЗДЕЛ 35 ПОСЧИТАЛ ШИРИНУ. Там ширина карты
подобрана так, чтобы семь КАРТ плюс зазоры влезли в 1328. Но в ряду
стоят не карты, а ПОЗИЦИИ, а позиция шире карты: её ширину задаёт
подпись, у которой max-width на 16 px больше карты (строка 289).
Плюс шесть зазоров, которые во флексе не сжимаются вовсе. Замерено
на /rasklady/na-otnosheniya (7 карт), до этого раздела:
То есть на пяти ширинах из шести ряд собрался обратно в одну строку,
а накладывать почти ничего не пришлось — не хватало единиц пикселей.
Запас на нахлёст остаётся и включится сам, если карты ещё подрастут
или подписи станут длиннее.
КАК ЭТО РАБОТАЕТ, БЕЗ ЕДИНОГО ЧИСЛА «СКОЛЬКО КАРТ». Позиция (карта +
подпись) становится сжимаемой, а карта внутри — нет. Пока места
хватает, позиции стоят своей полной шириной и ряд выглядит ровно
так, как выглядел. Как только места мало, позиции ужимаются, а
карты, которые ужиматься не умеют, выходят за свои места и ложатся
друг на друга — ровно настолько, насколько не хватило. Ни скрипту,
ни стилям не нужно знать, сколько карт в раскладе.
ПОРЯДОК НАЛОЖЕНИЯ НЕ ЗАДАН СПЕЦИАЛЬНО. Соседние элементы и так
рисуются в порядке разметки, поэтому каждая следующая карта ложится
поверх предыдущей — как будто их клали слева направо. Это ровно тот
порядок, в котором их и раздаёт скрипт.
ЗАЗОР ПЕРЕЕХАЛ В ПОДКЛАДКУ ПОЗИЦИИ. column-gap во флексе не
сжимается: при семи картах шесть зазоров по 24 px — это 144 px,
которых может просто не быть. Поэтому зазор снят, а те же 12 px с
каждой стороны позиции стали её внутренним полем. Пока места
хватает, шаг ряда прежний (ширина карты + 16 + 24). Когда не
хватает — ужимается и подкладка, и карты сходятся.
ПОДПИСИ НЕ СТАЛКИВАЮТСЯ. Подпись живёт внутри своей позиции и
получает её ширину: карты находят друг на друга, а имена позиций
стоят каждое на своём шаге. Предел сжатия — 0,38 ширины карты плюс
подкладка: даже в худшем случае от карты видно больше половины.
КАРТЫ ВЫРОВНЕНЫ ПО ВЕРХУ, А НЕ ПО СЕРЕДИНЕ. У позиции с трёхстрочной
подписью («Что чувствует другой») высота больше соседних, и при
выравнивании по центру её карта физически поднималась над рядом —
на снимке это читалось как ошибка. Резерв в две строки у
.rsk-poz__p при узких позициях перестаёт спасать: строк становится
три. По верху ряд ровный при любой длине подписи.
НИЖЕ 1024 НИЧЕГО НЕ МЕНЯЕТСЯ. На телефоне большой расклад идёт по
две карты в ряд, карта 148 px — это решение уже посчитано и записано
выше (строки 833–841): нахлёст там дал бы шаг 68 px, на котором от
подписи остаётся столбик по одному слову. «Мало места» на телефоне
лечится вторым рядом, а не нахлёстом.
*/
@media (min-width: 1024px) {
.rsk-stol--mnogo {
flex-wrap: nowrap;
align-items: flex-start;
column-gap: 0;
}
.rsk-stol--mnogo .rsk-poz {
flex: 0 1 auto;
box-sizing: border-box;
padding-inline: 12px;
width: calc(var(--k-w) + 16px + 24px);
min-width: calc(var(--k-w) * .38 + 24px);
}
.rsk-stol--mnogo .rsk-poz__p { max-width: 100%; }
}
/* ======================================================================
40. МАГИЯ ЧТЕНИЯ: ЧЕМ ЗАНЯТА СЕРЕДИНА (20.09.2026)
======================================================================
Пришло готовым куском от сессии, делавшей оформление середины
(прототип — `Claude outputs/prototip-magiya-2026-09-20/`, там же
передача с замерами). Вставлено как есть.
Зачем: между тем, как легла последняя карта, и тем, как появился
разбор, проходит от пяти секунд до трёх минут. Владелец, пик #202:
«перед этим мы должны сделать какую-то магию, что карты читаются
нормально». А колоду, которой я занимал это время раньше, он же
велел успокоить: «карты двигаются как в эпилепсии». */
/* ======================================================================
МАГИЯ ЧТЕНИЯ КАРТ — середина ожидания
======================================================================
Кусок для вставки в конец static/css/rasklady.css. Сессия
wifes-website-00, 20.09.2026. Задание: пик #202, слова владельца —
«перед этим мы должны сделать какую-то магию, что карты читаются
нормально».
ДВА СОСТОЯНИЯ, ОДИН СВЕТ. Замок на разговор с моделью один, и человек
может стоять в очереди за чужим раскладом до десяти минут. Врать ему,
что его карты читают, нельзя. Поэтому плотность света разная:
.rsk-ochered — очередь. Тихо: сукно дышит, карты не трогаем.
.rsk-chitaem — читают. Живо: сукно ярче, и по картам ходит взгляд.
Переход между ними — только прозрачность, поэтому он плавный сам по
себе. Оба класса ставятся на .rsk-stol.
ПОЧЕМУ ОБРЫВ МЯГКИЙ В ЛЮБОЙ МОМЕНТ. Разбор приходит когда угодно —
и через три секунды, и через три минуты. Правило одно, и оно же
главное во всём этом файле:
АНИМАЦИЯ НИКОГДА НЕ СНИМАЕТСЯ — ОНА ВСТАЁТ НА ПАУЗУ.
ГАСИТ ДРУГОЕ СВОЙСТВО, ЧЕРЕЗ TRANSITION.
Пауза не даёт рывка: кадр замирает там, где застали. А снятие —
даёт. Я на этом обжёгся прямо здесь: сначала свет на карте гасился
тем, что правило с animation переставало совпадать, и я рассчитывал,
что прыжок прозрачности подхватит transition. Не подхватывает.
Браузер сравнивает стили БЕЗ учёта анимаций, для него прозрачность
как была нулём, так и осталась, менять нечего — и свет пропадал
мгновенно. Замерил на стенде: 0.797 → 0 за один кадр.
Поэтому у каждого слоя два разных канала:
— чем ДВИЖЕТ анимация: у пятен — прозрачность и сдвиг, у карты —
прозрачность. Этот канал только паузится;
— чем ГАСИМ: у пятен — прозрачность родителя , у карты —
filter: opacity(). Второй канал анимация не трогает, поэтому
transition на нём работает честно.
Отсюда же и то, что псевдоэлементы объявлены СНАРУЖИ классов
состояния: если бы они рождались вместе с классом, то вместе с
классом и исчезали бы — опять рывком.
ЧЕГО ЗДЕСЬ НЕТ НАРОЧНО: второго крутящегося кружка, полосы загрузки,
процентов и обратного отсчёта. Раздел про свечи и бархат, а не про
копирование файлов.
ЗАНЯТЫЕ СЛОИ НЕ ТРОНУТЫ: .rsk-karta::before и ::after,
.rsk-karta__lico::before и ::after, .rsk-karta__in::after,
.rsk-karta__ryb::before, .rsk-stopka::after, .rsk-stol::before и
::after, .rsk-poz::before (огранка-ромб, раздел 23.3 — он ЗАНЯТ,
хотя числился свободным).
Взято своё: слой .rsk-chtenie в разметке и .rsk-karta__in::before.
ИМЕНА КАДРОВ. Все три начинаются на rsk-chtenie-, и это не
аккуратность ради аккуратности. Свою первую анимацию я назвал
rsk-svecha — а такое имя в rasklady.css уже есть, это подсветка всей
страницы («ночь над столом», строка 1034). Вторые @keyframes с тем же
именем не дополняют первые, а полностью их перекрывают: их свет
поехал бы на моих кадрах, где нет translateX(-50%), и пятно на пол-
экрана прыгнуло бы вбок. Проверять имена кадров перед вставкой
обязательно — они общие на весь документ, в отличие от классов. */
/* --- 1. Сукно в свечах -------------------------------------------------
Четыре пятна тёплого света под картами. Каждое дышит и плывёт на своём
сроке — 13, 17, 21 и 19 секунд: сроки нарочно не кратны друг другу,
поэтому рисунок не повторяется и смотреть можно сколько угодно.
Ходят под картами (z-index 0 против 1 у позиций): свет на сукне, а не
плёнка поверх карт. */
.rsk-stol > .rsk-chtenie {
position: absolute; inset: -10% -6%; z-index: 0;
pointer-events: none; overflow: hidden;
border-radius: 50% / 38%;
}
.rsk-chtenie i {
position: absolute; inset: 0; display: block;
opacity: 0;
transition: opacity 900ms ease;
}
.rsk-stol.rsk-ochered > .rsk-chtenie i { opacity: .46; }
.rsk-stol.rsk-chitaem > .rsk-chtenie i { opacity: 1; }
.rsk-chtenie i::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(
40% 48% at var(--x, 50%) var(--y, 50%),
rgba(224, 196, 140, .20),
rgba(201, 168, 106, .085) 44%,
transparent 72%);
animation: rsk-chtenie-dyh var(--t, 15s) ease-in-out infinite alternate,
rsk-chtenie-plyv var(--td, 19s) ease-in-out infinite alternate;
animation-play-state: paused;
will-change: opacity, transform;
}
.rsk-stol.rsk-ochered > .rsk-chtenie i::before,
.rsk-stol.rsk-chitaem > .rsk-chtenie i::before { animation-play-state: running; }
/* Пятна держатся середины стола. Стол во всю ширину колонки, а карты
всегда по центру: если развести пятна к краям, свет уходит туда, где
карт нет, и выглядит подсветкой пустого места. */
.rsk-chtenie i:nth-child(1) { --x: 34%; --y: 36%; --t: 13s; --td: 19s; }
.rsk-chtenie i:nth-child(2) { --x: 66%; --y: 58%; --t: 17s; --td: 23s; }
.rsk-chtenie i:nth-child(3) { --x: 47%; --y: 22%; --t: 21s; --td: 29s; }
.rsk-chtenie i:nth-child(4) { --x: 56%; --y: 76%; --t: 19s; --td: 31s; }
.rsk-chtenie i:nth-child(2)::before { animation-delay: -6s, -11s; }
.rsk-chtenie i:nth-child(3)::before { animation-delay: -9s, -3s; }
.rsk-chtenie i:nth-child(4)::before { animation-delay: -14s, -17s; }
@keyframes rsk-chtenie-dyh { from { opacity: .32; } to { opacity: 1; } }
@keyframes rsk-chtenie-plyv {
from { transform: translate3d(-2.6%, -1.8%, 0) scale(1); }
to { transform: translate3d(2.6%, 1.8%, 0) scale(1.09); }
}
/* --- 2. Взгляд по картам -----------------------------------------------
Только в состоянии «читают». Свет поднимается по лицу карты, замирает
на ней и уходит — и так по картам, каждая на своём сроке.
Сроки у карт разные и не кратные (7,3 / 9,1 / 11,7 …), поэтому карты
не загораются по очереди слева направо. Это нарочно: ровная очередь
слева направо — та же полоса загрузки, только из карт, и читается как
«осталось ещё четыре». Здесь же в каждый момент горит одна-две карты,
и рисунок не повторяется.
Сроки развешены по :nth-child(8n+k) от .rsk-stol > *, а не от .rsk-poz.
Так сделано нарочно: в столе перед позициями стоят .rsk-iskry, стопка
и этот слой, и счёт позиций сдвинут. Сдвиг не важен — карте достанется
какой-то из восьми сроков, а какой именно, роли не играет. Значит
правило не сломается, если в стол добавят или уберут служебный узел.
Псевдоэлемент живёт на .rsk-karta__in, а тот после переворота стоит
на rotateY(180deg) — поэтому здесь обратный поворот, иначе свет
оказался бы с изнанки. translateZ(1px) поднимает его над лицом карты
в трёхмерной стопке. */
.rsk-karta.otkryta .rsk-karta__in::before {
content: ''; position: absolute; inset: 0; z-index: 3;
border-radius: var(--k-r);
transform: rotateY(180deg) translateZ(1px);
/* Главное здесь — не подсветка поверх рисунка, а ОРЕОЛ ВОКРУГ карты.
Пробовал сначала только заливкой по лицу: на светлых картах
(«Луна») её почти не видно, а на тёмных («Отшельник») она глушит
рисунок. Ореол же читается одинаково на любой карте и ничего не
закрывает — на картинке нарисованы рамка, номер и название, лезть
на них нельзя. Заливка оставлена слабой, только чтобы карта не
выглядела вырезанной из своего же свечения.
Тень выходит за карту: overflow у .rsk-karta и .rsk-karta__in
обычный, проверял. */
background: radial-gradient(125% 72% at 50% 0%,
rgba(240, 216, 166, .20), transparent 60%);
box-shadow:
0 0 26px 2px rgba(224, 196, 140, .45),
0 0 70px 14px rgba(201, 168, 106, .22);
pointer-events: none;
/* Канал движения: им распоряжается анимация, и только она. */
opacity: 0;
/* Канал гашения: его анимация не трогает, поэтому он гаснет плавно
хоть посреди вспышки. */
filter: opacity(0);
transition: filter 760ms ease;
/* Длинные свойства, а не сокращённое animation — и это не вкусовщина.
Сокращённая запись сбрасывает animation-delay в ноль, а задержки
раздаются ниже, правилами с меньшим весом. На стенде это стоило мне
получаса: сроки у карт разные, а фаза у всех одна, и семь карт
гасли и загорались вместе — ровно тот «одновременный мигающий
стол», которого мы избегаем. */
animation-name: rsk-chtenie-vzglyad;
animation-duration: var(--t-vz, 9.1s);
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-play-state: paused;
}
.rsk-stol.rsk-chitaem .rsk-karta.otkryta .rsk-karta__in::before {
filter: opacity(1);
animation-play-state: running;
}
/* Держится на карте дольше, чем поднимается, и на держании дышит — как
пламя, а не как лампочка.
Доля «горит» здесь около двух третей срока, и это посчитано, а не на
глаз. Сначала карта горела только треть цикла — на стенде с семью
картами получались секунды, когда не горело НИ ОДНОЙ: сроки у карт
разные, и тёмные участки иногда сходились. Стол замирал, и вместо
работы это выглядело как зависшая страница. При двух третях такое
совпадение на трёх картах случается изредка и длится меньше секунды —
получается вдох, а не провал. */
@keyframes rsk-chtenie-vzglyad {
0%, 20% { opacity: 0; }
34% { opacity: .95; }
46% { opacity: .5; }
58% { opacity: .8; }
72% { opacity: .25; }
84%, 100% { opacity: 0; }
}
.rsk-stol > *:nth-child(8n+1) .rsk-karta__in::before { --t-vz: 7.3s; animation-delay: -.4s; }
.rsk-stol > *:nth-child(8n+2) .rsk-karta__in::before { --t-vz: 9.1s; animation-delay: -5.2s; }
.rsk-stol > *:nth-child(8n+3) .rsk-karta__in::before { --t-vz: 11.7s; animation-delay: -2.1s; }
.rsk-stol > *:nth-child(8n+4) .rsk-karta__in::before { --t-vz: 8.6s; animation-delay: -7.4s; }
.rsk-stol > *:nth-child(8n+5) .rsk-karta__in::before { --t-vz: 10.3s; animation-delay: -1.3s; }
.rsk-stol > *:nth-child(8n+6) .rsk-karta__in::before { --t-vz: 6.7s; animation-delay: -4.9s; }
.rsk-stol > *:nth-child(8n+7) .rsk-karta__in::before { --t-vz: 12.9s; animation-delay: -8.8s; }
.rsk-stol > *:nth-child(8n+8) .rsk-karta__in::before { --t-vz: 8s; animation-delay: -3.5s; }
/* Карта дня. Ответ приходит за 5–7 секунд, середины почти нет: эффект
должен успеть только мигнуть. Срок короткий, а отрицательная задержка
поставлена так, что свет всходит почти сразу — ждать своей очереди
в цикле тут негде. Селектор длиннее правил выше нарочно: иначе их
:nth-child перевесит. */
.rsk-stol.rsk-stol--odna > .rsk-poz .rsk-karta__in::before {
--t-vz: 3.2s; animation-delay: -1.05s;
}
/* --- 3. Движение выключено ---------------------------------------------
Человек попросил систему не двигать картинку. Ничего не мигает и не
плывёт — но и не пропадает: свет остаётся, просто неподвижный, и по
нему всё так же видно, что работа идёт. Очередь тусклее чтения, как
и в движении. */
@media (prefers-reduced-motion: reduce) {
.rsk-chtenie i::before { animation: none; transform: none; opacity: .8; }
.rsk-chtenie i { transition: none; }
.rsk-stol.rsk-ochered > .rsk-chtenie i { opacity: .34; }
.rsk-stol.rsk-chitaem > .rsk-chtenie i { opacity: .72; }
.rsk-karta.otkryta .rsk-karta__in::before {
transition: none; animation: none; opacity: .3;
}
}
/* --- 4. Печать ---------------------------------------------------------
Расклад сохраняют в PDF. Свет на бумаге — серая муть поверх карты. */
@media print {
.rsk-chtenie { display: none; }
.rsk-karta.otkryta .rsk-karta__in::before { display: none; }
}
/* ======================================================================
41. ПАНЕЛЬ СОГЛАСИЯ — КАРТА: ЗАТЕМНЕНИЕ ОТДЕЛЬНЫМ СЛОЕМ (20.09.2026)
======================================================================
Условие сессии, сделавшей уход панели в колоду, и она проверила это
в браузере на себе: затемнение обязано жить на `::before`, а не на
самом окне. `opacity`, повешенная на окно, действует и на панель
внутри него — карта гаснет вместе с фоном, и весь перелёт не виден
вовсе: экран просто темнеет, и всё.
Поэтому фон переносим на отдельный слой под панелью. Значения цвета
берём те же, что стояли у окна, — вид не меняется.
====================================================================== */
.rsk-porog.rsk-vhod { background: none; }
.rsk-porog.rsk-vhod::before {
content: ''; position: absolute; inset: 0; z-index: 0;
background: rgba(6, 9, 6, .82);
backdrop-filter: blur(3px);
}
.rsk-vhod__karta { position: relative; z-index: 1; }
/* ======================================================================
42. ГОЛОСОВОЙ НАБОР: ВИДНО, ЧТО СЛУШАЮТ (20.09.2026)
======================================================================
Пришло куском от сессии, делавшей оформление середины. Вставлено
как есть.
Владелец, пик #215: «надо сделать норм анимации, что говорит и т. д.,
а то не понятно». Человек нажимает «Наговорить» и не знает, слушает
его машина или микрофон не дали. */
/* ======================================================================
ГОЛОСОВОЙ НАБОР — «меня слышат»
======================================================================
Кусок для вставки в конец static/css/rasklady.css. Сессия
wifes-website-00, 20.09.2026. Задание: пик #215, слова владельца —
«надо сделать норм анимации, что говорит и т. д., а то не понятно,
не решена». Тыкал в поле рассказа и в кнопку «Слушаю».
ЧТО НЕПОНЯТНО СЕЙЧАС. Человек нажал «Наговорить» — и до первого
распознанного слова не меняется ничего, кроме надписи на кнопке.
Самая длинная и самая тревожная часть здесь — как раз ТИШИНА:
человек ещё не заговорил или задумался, и не знает, слушают его
или микрофон не дали.
ТРИ ЗНАКА, И КАЖДЫЙ ОТВЕЧАЕТ НА СВОЙ ВОПРОС.
1. Кольцо у кнопки — «микрофон открыт». Видно от нажатия и до
остановки, независимо от того, говорят или молчат.
2. Курсор в строке — «жду ваших слов прямо сейчас». Он и есть
ответ на тишину: строка пустая, а курсор живой.
3. Сами слова — «слышу именно это». Лучший знак из трёх, и он уже
сделан в скрипте: недоговорённая фраза висит и меняется на лету.
ЧЕГО ЗДЕСЬ НЕТ НАРОЧНО. Спиннера, полоски, процентов. И — отдельно —
НИ ОДНОЙ анимации на самом тексте: недоговорённая фраза переписывается
по нескольку раз в секунду, и если её ещё и подсвечивать на каждое
изменение, строка начнёт мельтешить. Текст должен читаться, а не
мигать. Живёт вокруг него курсор, а не он сам.
УРОВНЯ ЗВУКА НЕТ. Браузерное распознавание громкость не отдаёт, а
второй раз просить микрофон ради полоски не будем. Поэтому жизнь
идёт от факта записи, а не от громкости.
КНОПКИ МОЖЕТ НЕ БЫТЬ ВОВСЕ: в Safari на айфоне распознавания нет и
скрипт её не ставит. Ни одно правило здесь не рассчитывает на её
присутствие — всё висит на самой кнопке и на её соседе.
МЕХАНИКА ГАШЕНИЯ та же, что в разделе «магия чтения»: анимация не
снимается, а паузится, гасит отдельный канал через transition.
Почему именно так — расписано там, в шапке; коротко: снятие анимации
transition не подхватывает, проверено замером.
---------------------------------------------------------------------- */
/* --- 0. ЗНАК В УГЛУ ПОЛЯ (Указка, пик #267, 22.09.2026) ----------------
Владелец: «кнопку „наговорить" сделать нормально внутри окна в виде
микрофона и т. д., как все привыкли видеть, и чтобы он мигал, было
видно, что он работает».
Кнопка перестала быть строкой под полем и стала знаком в его ПРАВОМ
нижнем углу; счётчик знаков ушёл в левый. Оба лежат в той же области
сетки, что и поле ('pole', раздел 30.12) — своей строки не занимают
и ничего вниз не двигают. Освободившаяся строка отдана кнопке
«Сделать расклад»: она встала сразу под полем.
БЕЗ ПОДЛОЖКИ И БЕЗ РАМКИ — по образцу, который владелец прислал
22.09.2026 (поле ввода ChatGPT): тонкий контур микрофона в правом
нижнем углу поля, без слова и без плашки под ним, вплотную к главной
кнопке действия. Рамка .btn--ghost здесь снята нарочно: обведённый
прямоугольник без надписи читается как пустая кнопка. Зона нажатия
всё равно 40 px, а промах в сторону просто ставит каретку в поле —
тупика нет.
МЕСТО ПОД ЗНАК И ПОД ЦИФРЫ поле отдаёт нижним отступом — он у него
вырос с 34 до 50 px, а высота поля — со 150 до 166, чтобы видимых
строк осталось столько же. Это всё равно на 62 px короче прежнего:
строка «Наговорить» вместе с отбивкой занимала 78.
ЗНАКА МОЖЕТ НЕ БЫТЬ ВОВСЕ (Safari на айфоне) — тогда угол поля пуст,
и ни одно правило этого не замечает. */
.rsk-hero--vopros textarea.rsk-pole-vvoda { padding-bottom: 50px; }
/* РАЗМЕР ЗНАКА СЧИТАЕТСЯ ЗДЕСЬ И БОЛЬШЕ НИГДЕ (правило 8.7).
Два числа — сторона кнопки и сторона микрофона — живут переменными
на самой кнопке; всё остальное их только спрашивает. Широкий экран
меняет их в одном месте, а не в четырёх правилах.
ПОЧЕМУ РАЗМЕРЫ СТОЯТ ЖЁСТКО, А НЕ ЧЕРЕЗ font-size. Указка, пик #271:
владелец увидел микрофон во весь экран — «это что за пиздец».
Картинка без собственных размеров занимает всё, что ей дали. Отсюда
три упора, каждый работает сам по себе:
1) width/height прямо в (rasklady.js) — пол на случай, когда
этого файла нет вовсе;
2) правило .rsk-golos ниже — без оглядки на предка: кнопку могут
перенести из .rsk-rasskaz, и она не должна раздуться;
3) max-width/max-height у знака — потолок, который не снимает ни
одно правило сверху. */
.rsk-golos {
--golos-storona: 40px; /* сторона кнопки — она же зона нажатия */
--golos-znak: 21px; /* сторона самого микрофона */
}
@media (min-width: 2200px) {
.rsk-golos { --golos-storona: 46px; --golos-znak: 24px; }
}
/* Кнопка держит размер, где бы ни стояла (вес (0,1,0) — rasklady.css
подключён после site.css, поэтому .btn отсюда перебивается). */
.rsk-golos {
flex: 0 0 auto;
width: var(--golos-storona); min-width: 0; max-width: var(--golos-storona);
height: var(--golos-storona); min-height: 0;
padding: 0;
border: 0; background: none; /* «без подложки» — так в образце владельца */
border-radius: 50%;
color: var(--ink-55);
/* overflow здесь НЕ ставим: дышащее кольцо живёт на ::before с
inset:-2px и обрезалось бы вместе со знаком. Потолок знака держит
max-width/max-height ниже. */
}
/* А это уже про МЕСТО в поле рассказа, а не про размер. */
.rsk-rasskaz > .rsk-golos {
grid-area: pole;
align-self: end; justify-self: end;
z-index: 1; /* поверх листа поля, а не под ним */
margin: 0 8px 8px 0;
}
.rsk-rasskaz > .rsk-golos:hover,
.rsk-rasskaz > .rsk-golos:focus-visible { color: var(--gold-lit); background: none; }
/* Цвет «слушаю» задан тем же весом, что и цвет покоя: иначе покой
(0,2,0) перебил бы состояние (0,1,0), и горящий знак остался бы
серым — проверено на живой странице. */
.rsk-rasskaz > .rsk-golos.rsk-golos--slushaet { color: var(--gold-lit); }
.rsk-golos__znak {
display: block;
width: var(--golos-znak, 21px); height: var(--golos-znak, 21px);
/* Потолок на случай, если знак окажется вне кнопки и переменной не
увидит: 21 — базовая сторона, 24 — та же сторона на 2200. */
max-width: var(--golos-znak, 21px); max-height: var(--golos-znak, 21px);
}
@media (min-width: 2200px) {
.rsk-rasskaz > .rsk-golos { margin: 0 10px 10px 0; }
}
/* --- 1. Кнопка: кольцо и мигание, пока открыт микрофон -----------------
Не «пинг», который отрывается и улетает — такое кольцо читается как
ожидание загрузки. Здесь ореол дышит на месте: вдох-выдох, 2,6 с,
ровно как дышат в покое. Живёт на псевдоэлементе, а не на самой
кнопке: у .btn свой transform на :active, и они бы спорили.
МИГАЕТ САМ ЗНАК — этого владелец и просил: «чтобы он мигал, было
видно, что он работает». Кольцо дышит медленно и читается как
«открыто», мигание микрофона вдвое быстрее и читается как «идёт
запись». Два разных признака одного состояния, и ни один не
держится на цвете: на телефоне в солнце цвет пропадает первым. */
.rsk-golos { position: relative; }
.rsk-golos--slushaet {
border-color: var(--gold);
color: var(--gold-lit);
}
.rsk-golos--slushaet .rsk-golos__znak {
animation: rsk-golos-migaet 1.2s ease-in-out infinite;
}
@keyframes rsk-golos-migaet {
0%, 100% { opacity: 1; }
50% { opacity: .28; }
}
.rsk-golos::before {
content: ''; position: absolute; inset: -2px;
border-radius: inherit;
pointer-events: none;
box-shadow:
0 0 0 1px rgba(201, 168, 106, .55),
0 0 18px 2px rgba(224, 196, 140, .38);
/* Канал движения — только анимация. */
opacity: 0;
/* Канал гашения — только класс. */
filter: opacity(0);
transition: filter 420ms ease;
animation-name: rsk-golos-dyhanie;
animation-duration: 2.6s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-play-state: paused;
}
.rsk-golos--slushaet::before {
filter: opacity(1);
animation-play-state: running;
}
@keyframes rsk-golos-dyhanie {
0%, 100% { opacity: .38; transform: scale(1); }
50% { opacity: .92; transform: scale(1.055); }
}
/* --- 2. Строка «что слышу» ---------------------------------------------
Кегль не ниже 16 px — правило 0. Гарнитура не задаётся: это обычный
текст раздела, значит Source Serif 4, как всё остальное.
min-height держит место под строку заранее. Без него появление первого
слова толкало бы кнопку и поле вверх — то самое дёрганье вёрстки,
на которое владелец жаловался в другом месте. */
.rsk-golos__slyshu {
margin: 10px 0 0;
min-height: 1.6em;
font-size: clamp(16px, calc(var(--k-w) * .085), 18px);
line-height: 1.6;
color: var(--ink-70);
}
/* Курсор. Тонкая золотая черта в конце строки — то же, что мигает в
любом поле ввода, и понятно без объяснений. Но не моргает по-machинному:
всходит и гаснет мягко, 1,7 с на вдох-выдох.
Соседский селектор (+), а не :has() и не лишний класс: скрипт ставит
строку сразу после кнопки (insertAdjacentElement 'afterend'), так что
сосед — это ровно то, что есть в разметке, и лишних просьб не нужно. */
.rsk-golos__slyshu::after {
content: ''; display: inline-block;
width: 1px; height: 1.05em;
margin-left: .18em; vertical-align: -.16em;
background: var(--gold-lit);
opacity: 0;
filter: opacity(0);
transition: filter 420ms ease;
animation-name: rsk-golos-kursor;
animation-duration: 1.7s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-play-state: paused;
}
.rsk-golos--slushaet + .rsk-golos__slyshu::after {
filter: opacity(1);
animation-play-state: running;
}
@keyframes rsk-golos-kursor {
0%, 100% { opacity: .18; }
50% { opacity: 1; }
}
/* --- 3. Движение выключено ---------------------------------------------
Оба знака остаются, просто перестают дышать. Неподвижное кольцо всё
так же говорит «микрофон открыт», неподвижный курсор — «жду слова».
Пропасть им нельзя: без них человек снова не поймёт, слушают его или
нет, а это и есть суть задачи. */
@media (prefers-reduced-motion: reduce) {
.rsk-golos::before,
.rsk-golos__slyshu::after,
.rsk-golos--slushaet .rsk-golos__znak {
animation: none; transition: none; transform: none;
}
.rsk-golos--slushaet::before { opacity: .7; }
.rsk-golos--slushaet + .rsk-golos__slyshu::after { opacity: .9; }
/* Знак перестаёт мигать, но остаётся зажжённым: заливка и золото
сами по себе говорят «микрофон открыт». */
.rsk-golos--slushaet .rsk-golos__znak { opacity: 1; }
}
/* --- 4. Печать ---------------------------------------------------------
Расклад сохраняют в PDF. Ни кнопки диктовки, ни недоговорённой фразы
на бумаге быть не должно. */
@media print {
.rsk-golos, .rsk-golos__slyshu { display: none; }
}
/* ======================================================================
40. РЯД НА ТЕЛЕФОНЕ: КАРТЫ СТОЯТ ПО ВЕРХУ (20.09.2026)
======================================================================
Указка, пик #219: «тут вообще карта на карту залезло, надо всё
отестировать нормально». Смотрел 390, расклад на семь карт.
2. Зато ряд стоял рвано. Карты 1–3 на высоте 411, карты 5 и 6 на
636, а карта 4 — на 626, на десять пикселей выше соседок. Причина
не в ширине: у позиции «Что чувствует другой» подпись в три
строки, позиция от этого выше на 20 px, а стол выравнивал
содержимое по СЕРЕДИНЕ — и высокая позиция подняла свою карту
над рядом. Глазом это и читается как «карта залезла на карту».
Лечится одной строкой: в ряду карты выравниваются по ВЕРХУ. Тогда
подписи разной длины свисают вниз, а верхний край ряда остаётся
прямым при любой длине имени позиции. Ровно то же самое уже сделано
для широкого экрана в разделе 39 и по той же причине.
ГРАНИЦА НАХЛЁСТА, о которой просил ведущий раздела. Владелец сказал
про одно и то же средство и «красиво слегка накладывать», и «карта
на карту залезла». Разница считается по тому, что видно на лице
карты:
до 22 % ширины — перекрывается только золотая рамка соседки,
римская цифра и рисунок целы. Это «слегка»;
22–30 % — серая зона, годится только если иначе ряд
рвётся;
больше 30 % — начинает уходить рисунок, и это уже брак.
Раздел 39 держится в первой полосе: наибольший замеренный нахлёст
на живых страницах — 1 %.
*/
@media (max-width: 1023px) {
.rsk-stol--mnogo { align-items: flex-start; }
}
/* Оговорка — обычный текст, а не подпись, значит не мельче 16 px.
Правило 0 проекта: кегль основного текста ниже 16 не опускаем.
Нашла сессия движка при разборе типографики: это был единственный
новый блок раздела, который правило нарушал, — 14 px на абзаце
сплошного текста. В подвале оговорка остаётся 14: там это давний
стиль всего сайта, и менять его в одном месте значит развести
подвал с остальными страницами. */
.rsk-ogovorka { font-size: 16px; line-height: 1.7; }
/* ======================================================================
43. ТЕЛЕФОН: КАРТА СНОВА КАРТА — ПО ДВЕ В РЯД (20.09.2026)
======================================================================
Указка, пик #222, дословно: «почему в мобильной версии карты
какие-то странные и тд, где нормальный оригинал, почему никто это
ещё не сделал». До него — #219 про то же место.
ЧТО СТАЛО. Карта считается от ширины окна под ДВЕ в ряд:
на 320 — 124 px, на 390 — 159, на 430 и шире — 170 (потолок).
Ряды: пять карт 2+2+1, шесть 2+2+2, семь 2+2+2+1. Замерено на всех
трёх ширинах: пересечений карт между собой нет, за стол ряд не
выходит, горизонтальной прокрутки не появляется.
ПОТОЛОК 170 px, А НЕ БОЛЬШЕ: на 430 две карты по 176 с зазором дают
358 при столе 379 — влезает, но поля становятся уже зазора, и ряд
прижимается к краям экрана. 170 оставляет по 14 px с каждой стороны.
ЧЕТЫРЕ РЯДА У СЕМЁРКИ — ЦЕНА, И Я ЕЁ НАЗЫВАЮ. Три в ряд дают три
ряда, но карту не крупнее 103 px (3 × 103 + зазоры = 339). Выбор
стоял между «три ряда по 103» и «четыре ряда по 159», и я взял
второе: владелец просил увидеть карту, а не сократить прокрутку.
Если он скажет иначе — это одна строка, потолок 103 и делитель 3.
ЗАЗОР МЕЖДУ РЯДАМИ 20 px вместо 12: при карте 159 подпись из двух
строк и следующая карта иначе стоят почти вплотную, и ряды
перестают читаться как ряды. */
@media (max-width: 559px) {
.rsk-stol--mnogo {
gap: 20px 6px;
}
}
/* ======================================================================
44. ТРИ КАРТЫ ТОЖЕ НЕ ВЫЛЕЗАЮТ ЗА СТОЛ (20.09.2026)
======================================================================
Нашла приёмка и подтвердил мой замер: на трёх картах ряд выходит за
правый край стола, а слева при этом пустует широкая полоса. Мерил
/rasklady/tri-karty, ширина выхода вправо в пикселях:
Причина та же, что и у семи карт в разделе 39, только с другой
стороны: ширина карты считается формулой от окна (раздел 35), а
реальная ширина ряда зависит ещё от двух вещей, которых в формуле
нет, — позиция шире карты на 16 px (её задаёт подпись) и зазоры
между позициями. Плюс стол отводит слева полосу под колоду
(`padding-left: var(--k-w) * 2.4`, раздел 33): на 1440 это 448 px,
которые ряду недоступны, и он упирается в правый край.
Лечение то же, что в разделе 39, и той же механикой: позиция
сжимается, карта нет. Пока места хватает — ряд прежний; когда не
хватает — карты слегка находят друг на друга вместо того, чтобы
уезжать за стол. После правки:
768 −4 1440 +8, нахлёст 6 %
1024 −10 1920 −8
2880 −120
Восемь пикселей на 1440 — это половина выноса крайней карты за свою
позицию, и она остаётся внутри поля страницы (76 px), до края окна
не доходит.
ПОЧЕМУ С 768, А НЕ С 560. Ниже 768 полоса под колоду съедает больше,
чем остаётся ряду: на 560 столу 509 px, из них 326 отданы колоде, а
трём картам нужно 408. Нахлёст там вышел бы 26 % и ряд всё равно
вылез бы на 95 px — лечить надо не ряд, а полосу. Замеры отправлены
той сессии, которая держит колоду; когда колода уедет наверх, как
она уже делает на телефоне, полоса освободится, и этот предел можно
будет опустить до 560 одной цифрой.
НАХЛЁСТ 6 % — в первой полосе границы из раздела 40: перекрывается
только золотая рамка соседки, рисунок и римская цифра целы.
*/
@media (min-width: 768px) {
.rsk-stol--tri {
flex-wrap: nowrap;
align-items: flex-start;
column-gap: 0;
}
.rsk-stol--tri .rsk-poz {
flex: 0 1 auto;
box-sizing: border-box;
padding-inline: 16px;
width: calc(var(--k-w) + 16px + 32px);
min-width: calc(var(--k-w) * .5 + 32px);
}
.rsk-stol--tri .rsk-poz__p { max-width: 100%; }
}
/* ======================================================================
45. ПАНЕЛЬ 18+ — ЛИЦО НАСТОЯЩЕЙ КАРТЫ (20.09.2026)
======================================================================
Указка, пики #220 и #223. Владелец, дословно: «что это за кошмар, у
нас есть нормальный задний фон карты и тд, зачем было отрисовывать
новый фон», «почему тут ещё не стоит наша карта?», «всё выглядит
криво».
ЧТО СДЕЛАНО. Лицо панели получает ту самую картинку —
koloda-1/rubashka-720.webp, ту же, что на столе, — и тёмную завесу
поверх неё, чтобы юридический текст читался. Ничего не нарисовано
заново: рамка с ромбами по углам уже стоит на `.rsk-karta__lico`
(раздел 15.2), она проявляется поверх картинки и связывает панель с
колодой.
ЗАВЕСА ГРАДИЕНТОМ, А НЕ РОВНЫМ ЦВЕТОМ. Сверху 93 %, в середине 70,
к низу 92. Сверху и снизу плотно — там знак, заголовок и мелкие
строки, им нужен ровный фон; в середине светлее — там видно, что под
текстом лежит карта, а не просто тёмное поле. На проверке при ровных
80 % рисунок пропадал совсем, при ровных 65 % текст согласия начинал
спорить с узором.
ОКНО БОЛЬШЕ НЕ РИСУЕТ СВОЁ ПОЛЕ. У `.rsk-porog__okno` были своя
рамка, свой фон и свои поля (строки 558–564 и 2202–2222) — поверх
лица карты это давало вторую рамку вокруг первой и тот самый «криво».
Поле теперь одно, и оно у карты. Тень окна оставлена: карта должна
лежать над страницей, а не быть в неё вклеена.
----------------------------------------------------------------------
390: ЮРИДИЧЕСКИЙ ТЕКСТ БОЛЬШЕ НЕ ОБРЕЗАН
----------------------------------------------------------------------
Было (замерено на 390×844): окно 342×513 — это 2:3, пропорция карты.
Содержимому нужно было 564. Лицо карты закрыто `overflow: hidden`,
прокрутки у него не было, и лишние 51 px просто исчезали: текст
согласия обрывался на полуслове, липкая кнопка стояла поверх него, а
«Мне нет 18 лет» и ссылка на политику оказывались за нижним краем.
Прятать согласие нельзя — под ним человек ставит галку.
Стало: содержимое сжато по высоте до 513, и всё видно целиком без
прокрутки. Что ужато и на сколько:
знак 54 → 34 px (−20)
отбивки знака, «18+», заголовка по долям вместо пикселей (−22)
заголовок 26 → 19 px (−7 плюс строка)
согласие: интерлиньяж 1.6 → 1.45, поля 16 → 10 (−31)
Кегль самого согласия НЕ ТРОНУТ — 16 px, ниже основной текст в этом
проекте не опускается. Уменьшены только воздух и служебные надписи.
Всё, что сжимается, задано через clamp() от ширины окна: на широком
экране числа возвращаются к прежним, и панель там выглядит ровно
так, как была утверждена, только с картинкой вместо градиента.
ПРОКРУТКА ЛИЦА ОСТАЁТСЯ ЗАПАСОМ. На совсем коротком экране (320×568
и ниже) содержимое всё равно не поместится — там лицо прокручивается
само, тонкой золотой полосой, и ничего не обрезается.
КНОПКЕ ВОЗВРАЩЁН ПОТОК. Блок `@media (max-height: 900px)` (строка
2358) делает кнопку липкой и рисует под ней полку цветом #121810 —
цветом старого дна окна. Поверх картинки карты эта полка читается
как серая заплата, а сама липкость и была тем, что перекрывало конец
согласия. Внутри панели кнопка снова в потоке.
ПОЧЕМУ `position: relative`, А НЕ `static`. Замер: при `static`
scrollHeight лица оставался 564 при clientHeight 513 — то есть
прокрутка появлялась на пустом месте, хотя всё содержимое
помещалось, и у карты вылезала полоса прокрутки. При `relative` —
513 и 513. Разницу видно только замером, поэтому записываю.
ЧЕГО Я НЕ ТРОГАЛ. Затемнение под панелью живёт на `::before`
(раздел 41) — если перенести его на само окно, перелёт панели в
колоду перестанет быть виден. Текст согласия, его версия и ссылка на
политику не тронуты ни одним словом.
*/
/* --- Лицо панели = настоящая карта из колоды --- */
.rsk-vhod__lico {
padding: clamp(16px, 4vw, 30px) clamp(14px, 3.6vw, 26px) clamp(14px, 3vw, 24px);
background:
linear-gradient(180deg,
rgba(7, 11, 8, .93) 0%, rgba(7, 11, 8, .70) 34%,
rgba(7, 11, 8, .80) 72%, rgba(7, 11, 8, .92) 100%),
var(--vhod-art, var(--rsk-rubashka)) center / cover no-repeat;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(201, 168, 106, .35) transparent;
}
/* Крупный файл рубашки — только там, где окно порога шире 500 px. */
@media (min-width: 1024px) {
.rsk-vhod__lico { --vhod-art: var(--rsk-rubashka-2x); }
}
/* РАМОК НА ЛИЦЕ ПАНЕЛИ НЕТ — пик #258: «убери ебаные рамки у карты,
выглядит ужасно».
Их было три, одна поверх другой, и я насчитал их только когда пошёл
убирать:
1. рисованная двойная линейка с ромбами по углам — это
`.rsk-karta__lico::before` из раздела 15.2. На настоящей карте
она к месту: там за ней пустое поле. Поверх рубашки, у которой
своя рамка нарисована, она вторая по счёту;
2. золотой волосок по краю лица — `inset 0 0 0 1px` из раздела
15.1, третий контур в том же месте;
3. рамка самого окна — её я снял ещё в 45 вместе с полем.
У рубашки колоды рамка УЖЕ НАРИСОВАНА в самой картинке. Всё, что мы
добавляем сверху, — это вторая и третья линия по одному краю. Отсюда
и «ужасно»: не рамка плохая, а их три.
Оставляю ту, что на картинке, и глубину от тени. Тень не трогаю:
она не контур, а то, что кладёт карту НАД страницей. */
.rsk-vhod__lico::before { display: none; }
.rsk-vhod__lico {
box-shadow: inset 0 0 calc(var(--k-w, 118px) * .16) rgba(4, 8, 5, .55);
}
/* Окно больше не рисует своё поле: поле теперь у лица карты. */
.rsk-porog.rsk-vhod .rsk-porog__okno {
padding: 0;
border: 0;
background: none;
overflow: visible;
box-shadow: 0 40px 90px rgba(0, 0, 0, .62);
/* ШИРИНА КАРТЫ СЧИТАЕТСЯ И ОТ ВЫСОТЫ ЭКРАНА.
Нашла приёмка: от 2560 в ширину при высоте меньше ~1230 панель
обрезалась снизу. Причина в том, что ширину ей давал только
`max-width` (820 px от 2200), высоту — пропорция 2:3, и на
2560×1080 выходило 795×1193 при экране 1080. Замер: «Мне нет
18 лет — выйти» кончался на 1101, строка с версией и ссылкой на
политику — на 1254. То есть несовершеннолетний не видел выхода, а
человек — ссылки на политику. `max-height: 100%` тут не спасает:
при заданной пропорции браузер тянет высоту от ширины, а не
наоборот.
Поэтому ширина берётся как наименьшее из трёх: сколько дают
по горизонтали, потолок своей ступени и СКОЛЬКО ПОЗВОЛЯЕТ ВЫСОТА
ЭКРАНА — высота, делённая на 1,5, и есть наибольшая ширина, при
которой карта 2:3 ещё помещается.
96 px вычитаются на поля порога с запасом: на 2200 у него 48 px
сверху и снизу, ниже — меньше, и запас уходит в воздух, а не в
обрезанный текст. dvh, а не vh: на телефоне адресная строка
съедает часть vh, и карта вылезала бы ровно на её высоту. */
width: min(100%, calc((100vh - 96px) / 1.5));
}
@supports (height: 100dvh) {
.rsk-porog.rsk-vhod .rsk-porog__okno {
width: min(100%, calc((100dvh - 96px) / 1.5));
}
}
/* Внутренности плотнее: содержимое должно помещаться в лицо карты. */
.rsk-vhod__lico .rsk-porog__znak {
width: clamp(34px, 9vw, 58px); height: clamp(34px, 9vw, 58px);
margin: 0 auto clamp(6px, 1.4vw, 12px);
}
.rsk-vhod__lico .rsk-porog__vozrast { margin-bottom: clamp(8px, 1.8vw, 14px); }
.rsk-vhod__lico h2 {
margin: 0 0 clamp(8px, 1.6vw, 12px);
font-size: clamp(19px, 4.8vw, 26px);
}
.rsk-vhod__lico .rsk-porog__soglasie {
margin-bottom: clamp(12px, 2.4vw, 20px);
padding: clamp(10px, 2.6vw, 16px);
background: rgba(4, 7, 4, .62);
line-height: 1.45;
/* Четвёртая рамка — у блока согласия своя обводка (строка 574).
На лице карты она оказалась ещё одним прямоугольником внутри
прямоугольника: на снимке пика #258 их видно подряд три-четыре.
Снимаю обводку, оставляю подложку: текст согласия обязан
читаться, а рамка для этого не нужна — его выделяет более
тёмное поле. */
border-color: transparent;
}
.rsk-vhod__lico .rsk-porog__vyhod { margin-top: clamp(10px, 2vw, 16px); }
.rsk-vhod__lico .rsk-porog__versiya { margin-top: clamp(8px, 1.6vw, 14px); }
/* Кнопка в потоке: полка под липкой кнопкой закрывала конец согласия
и рисовалась цветом старого дна окна. См. замер в шапке. */
@media (max-height: 900px) {
.rsk-vhod__lico .btn {
position: relative; bottom: auto;
box-shadow: none;
}
.rsk-vhod__lico .btn[disabled] { opacity: .45; }
}
/* ======================================================================
46. ШИРИНА РАЗНЕСЕНА ПО СМЫСЛУ (20.09.2026)
======================================================================
Указка, пики #213 и #224. Владелец, дословно: «почему у меня по краям
свободные места, разве нельзя сделать во всю ширину нормальную, дай
задание на оптимизацию» и, второй раз, «можно ли это сделать на весь
экран?», «тут много места на моём экране, надо оптимизировать
нормально». Тыкал в хлебные крошки и в шапку.
ПОЧЕМУ НЕЛЬЗЯ ПРОСТО РАЗДВИНУТЬ ВСЁ. Предел стоит не просто так: на
2216 px строка основного текста — это около 180 знаков, и читать её
нельзя. Раздел 24 считал меру и защищал 62 знака. Поэтому ширина
разнесена по смыслу:
во всю ширину — шапка, крошки, стол с картами, каталог раскладов
и блок с двумя путями. Им ширина нужна: стол
раскладывает карты, каталог складывает карточки,
у блока путей слева портрет;
прежняя мера — заголовок с лидом на обложке, разбор ассистента,
оговорка под ним, «Вопросы и ответы» и свиток.
Это чтение, и оно остаётся 1616 px.
ЛЕВЫЙ КРАЙ У ВСЕХ ОДИН. Узкие блоки прижаты влево (`margin-inline: 0`),
а не отцентрованы. Центровка выглядела сломанной: крошки и стол
начинались с 325, а заголовок и вопросы — с 625, и страница ехала
уступом. Пустое место у узких блоков остаётся справа, и это честная
цена за читаемую строку.
`.shell` — ЧУЖОЙ, И Я ЕГО НЕ ПЕРЕПИСЫВАЮ. Это обёртка всего сайта из
site.css, куда по правилу 0 писать нельзя. Здесь снят предел только
у той обёртки, ВНУТРИ которой лежит наш раздел: `:has(> .rsk-pole)`.
На остальных страницах сайта `.shell` остаётся прежним — 1800.
`:has` в файле уже применяется, планка браузеров не поднимается.
ПОРОГ 1600 px. Ниже него ширины не меняются вовсе: там `.shell`
и так не упирается в свой предел, и двигать нечего. */
@media (min-width: 1600px) {
.shell:has(> .rsk-pole) { max-width: none; }
.rsk-pole {
/* Предел для блоков, которым ширина нужна, но не вся: каталог и
блок путей. Стол и шапка идут до краёв. */
--rsk-shir: min(2400px, 100vw);
--rsk-uzko: 1616px;
}
/* ПОЛОСА ПО КРАЯМ — ИСПРАВЛЕНИЕ, пик #229: «вот тут по бокам чёрные
пробелы, наверху всё норм, а снизу чуть-чуть нет».
Полосы были чёрными, а не просто пустыми, потому что фон сукна и
цвет раздела лежат на `.rsk`, `.rsk-top` и `.rsk-foot`, а под ними
виден `.rsk-pole` — он темнее (#0e130f против #141b15). Отсюда и
«наверху всё норм»: сверху полосу закрывает слой ночи, он на
`.rsk-pole` и идёт до краёв.
Поэтому предел у этих трёх снят совсем: материал раздела доходит до
края окна, а поля содержимому даёт их собственный `padding`. Меру
держат блоки внутри, каждый свою. */
.rsk-top, .rsk, .rsk-foot { max-width: none; }
/* Каталог и блок путей ширины просят, но не всей: на 2880 карточка в
900 px читается как афиша.
Блок путей — по центру, как сетка каталога (28.09.2026, мерка
владельца А1; руководитель раздела): прижатый влево, он на 2880
оставлял поля 92 и 388, на 1920 и 2133 — поровну. Предел 2400 тот
же; пока окно уже него, блок во всю ширину и не сдвигается. */
.rsk-zov { max-width: var(--rsk-shir); margin-inline: auto; }
.rsk-hero__in,
.rsk-trakt,
.rsk-vo,
.rsk-svitok {
max-width: var(--rsk-uzko);
margin-inline: 0;
}
/* РАЗБОРУ ДАЁМ МЕРУ СТРОКИ, А НЕ ТОЛЬКО ШИРИНУ КОЛОНКИ.
Как получилось. Колонка у `.rsk-trakt` есть — 1616 px из списка
выше. Но у `.rsk-text` внутри своя мера 66ch, а у
`.rsk-trakt--pod` своей меры нет: её сняли в разделе 31. Для того
случая это было верно — там разбор стоял в колонке 557 px, и
мешала КОЛОНКА. Здесь колонка 1616, и мешает СТРОКА.
Предел ставится ради строки, а не ради колонки. Раздел 31 этим не
отменяется: он про 557, а не про 1616. Мера та же 68ch, что у
разбора карты дня в разделе 51, — чтобы на двух страницах разбор
читался одинаково. */
/* ПОГАШЕНО 23.09.2026, Указка пик #277. Владелец про разбор на
/rasklady/vopros, дословно: «расклад идет вот так а надо чтобы он
был на всю ширену жкранв так он будет занимать меньше места».
Это правило и было тем, что он видел: замер Playwright на живой
странице 8021 до правки — ширина блока 557 px при окне 1920 и те
же 557 при 2880 (computed max-width 557.056px = 68ch), высота на
одном и том же тексте в 4 056 знаков — 2 787 и 3 740 px.
Мерка не исчезла, она переехала с БЛОКА на ТЕКСТ: блок идёт во всю
ширину контейнера, а строку держит `.rsk-trakt__tekst` (раздел 31).
Предел по-прежнему ставится ради строки, а не ради колонки, —
довод раздела 46 цел, изменилось только то, на чём он стоит.
Ширину в 1616 px, которую `.rsk-trakt` берёт из списка выше, это
правило снимает тем же весом, стоя ниже: разбору нужна вся ширина
`.rsk`, а не «прежняя мера чтения». Остальные блоки списка
(`.rsk-hero__in`, `.rsk-vo`, `.rsk-svitok`) не тронуты. */
.rsk-trakt--pod { max-width: none; }
/* СТОИТ ПОСЛЕ СПИСКА НАРОЧНО. Вес у `.rsk-trakt` в списке выше и у
`.rsk-trakt--pod` одинаковый — один класс, — поэтому побеждает тот,
что ниже. Сначала я поставил это правило ВЫШЕ списка и получил в
замере прежние 1616 px: колонка перебивала меру. Проверено на
живой странице, а не по каскаду на глаз. */
/* Оговорки в этом списке НЕТ, и это исправление, а не недосмотр.
Сначала она тут стояла — и получила 1616 px как колонка. Но у
.rsk-trakt внутри своя мера, а оговорка САМА абзац: колонка
становится её строкой. Замер приёмки: 197 знаков в строке на
«на отношения», 127 на витрине — при том что в шапке этого же
раздела написано, что 180 знаков читать нельзя. Своя мера в
70ch у неё уже есть (строка 7855), и трогать её не надо. */
}
/* ======================================================================
47. СТАРЫЙ ВЕЕР СТОПКИ ОТМЕНЁН (20.09.2026)
======================================================================
В колоде теперь семь-десять карт со своей толщиной и наклоном
(раздел 33). Но в начале файла с 19.09 живут правила на три карты:
.rsk-stopka .rsk-karta:nth-child(1) { transform: rotate(-7deg) … }
.rsk-stopka .rsk-karta:nth-child(2) { transform: rotate(5deg) … }
.rsk-stopka .rsk-karta:nth-child(3) { transform: none }
Вес у них 0,3,0, а у нового `.rsk-stopka__k` — 0,1,0. Поэтому старые
выигрывают по силе, и весь расчёт раздела 33 до карт не доходит:
колода получает старый веер из трёх карт со старыми смещениями
вместо нового из шести-десяти. Порядок правил в файле тут не
помогает — только вес.
Отменяем их ровно для карт новой колоды, повторяя правило раздела 33
с весом побольше. Сами старые правила не трогаем: на них может
опираться что-то ещё, а здесь речь только о картах с `rsk-stopka__k`.
ЭТОТ РАЗДЕЛ НУЖЕН И БЕЗ ПОВОРОТА. Написан он был, когда колода
лежала набок, и `--kren` до карт не доезжал по той же причине.
Поворот владелец отменил в тот же день — дословно: «карты
достаются криво, а они лежат горизонтально, а достаются
вертикально; в целом меня всё устраивало как было до этого,
главное чтобы карты друг на друга не заходили». `--kren` из файла
вычищен, а отмена веера осталась: без неё колода снова станет
тройкой карт по старым правилам. Не сносить как ненужное.
ПРО `var(--kren, 0deg)` НИЖЕ — ОН ОСТАВЛЕН НАРОЧНО. Объявления
`--kren` в файле нет ни одного (проверено 20.09.2026), поэтому
подстановка берёт 0deg и колода стоит прямо. Формула повторяет ту,
что в разделе 50, слово в слово — если однажды поворот понадобится
снова, он включится в обоих местах одинаково.
Но знать надо вот что: переменная жива как вход. Объявит кто-нибудь
`--kren` в другом разделе — колода ляжет набок молча, и искать будут
долго. Нашла это 8b при проверке. Если поворот не понадобится до
конца недели, проще вычистить `var(--kren, 0deg)` здесь И в разделе
50 разом, чтобы формулы остались одинаковыми.
====================================================================== */
.rsk-stopka .rsk-karta.rsk-stopka__k {
transform:
translate3d(var(--sdvig-x), var(--sdvig-y), var(--z-svoy))
rotate(calc(var(--ugol) + var(--kren, 0deg)));
opacity: 1;
}
.rsk-stopka.razdvinuta .rsk-karta.rsk-stopka__k.nad {
transform:
translate3d(var(--sdvig-x), calc(var(--sdvig-y) - var(--k-w) * .22),
var(--z-svoy))
rotate(calc(var(--ugol) + var(--kren, 0deg) + 2.8deg));
}
/* ======================================================================
49. ДВЕ И ТРИ КАРТЫ ПОД ОДНИМ ВОПРОСОМ (20.09.2026)
======================================================================
На странице «Свой вопрос» движок кладёт под один вопрос одну, две или
три карты. Приём Альбины, решение владельца 20.09.2026: «триплет
лучше для перспектив отношений на какой-то срок». Читаются такие
карты вместе, как одна мысль, и стоят под одной подписью.
Разметку складывает rasklady_vopros.js:
…две-три .rsk-karta…
вопрос
Класс --triplet появляется только когда карт больше одной; обёртка
__karty стоит всегда, в том числе у одиночной карты.
ЧТО СТАЛО: карты в группе ложатся внахлёст, ровно как их кладут
рукой — одна поверх другой, с шагом в половину карты. Три карты
занимают две ширины вместо трёх, и ряд остаётся рядом.
ПОЧЕМУ НАХЛЁСТ ЗДЕСЬ ГЛУБЖЕ, ЧЕМ МЕЖДУ ПОЗИЦИЯМИ. В разделе 40
записана граница: между соседними позициями больше 30 % — брак.
Здесь 50 %, и это не противоречие, а другая задача. Там карты
РАЗНЫХ позиций, и каждая должна читаться сама по себе. Здесь одна
позиция, один вопрос и одна мысль: группа должна читаться как
группа, а не как три отдельных ответа, стоящих слишком тесно.
Последняя карта видна целиком, предыдущие — наполовину.
ШИРИНУ ПОЗИЦИИ ЗАДАЁТ ГРУППА, А НЕ ПОДПИСЬ. У позиции-триплета снят
тот фиксированный размер, который разделы 39 и 44 дают обычной
позиции: ширину считает сама группа карт. Иначе три карты вылезали
бы за место, отведённое одной.
Подпись при этом на ширину не влияет: `width: 0; min-width: 100%`.
Без этой пары длинный вопрос растягивал позицию шире группы, и два
триплета в одном ряду получались разной ширины — замерено на 2880:
415 против 365. Стало 378 и 378.
Карта нигде не стала меньше, чем у обычной позиции на той же
ширине, — владелец просил карты крупнее, и триплет этого не
отменяет. На 390 позиция с тремя картами занимает свой ряд целиком:
318 px из 339, рядом ничего не встаёт, и это правильно — группа
читается как одна мысль, а не как половина ряда.
НАКЛОНА КАРТАМ НЕ ДАЮ. Веер с поворотом смотрелся бы живее, но
поворот живёт на transform, а transform у карты занят: на нём
полёт из колоды и переворот. Статический наклон слетал бы на время
раздачи и вставал обратно рывком. Глубину даёт тень, она у карты
своя и при нахлёсте работает как надо.
*/
.rsk-poz__karty { display: flex; justify-content: center; }
.rsk-poz--triplet .rsk-poz__karty > .rsk-karta + .rsk-karta {
margin-left: calc(var(--k-w) * -.5);
}
/* Своя ширина у позиции-тройки ЗДЕСЬ БОЛЬШЕ НЕ ЗАДАЁТСЯ — и это не
упущение. Было: `.rsk-stol .rsk-poz--triplet { width: auto }`, то есть
ширину считала сама группа карт. Пока рядом не было чужих правил,
этого хватало.
Стало: в тесном ряду (раздел про нахлёст между позициями, ниже по
файлу) доля позиции считается от ширины карты, и тройка получает
1,5 доли на пару и 2 доли на тройку. Правило там, и оно одно.
Почему отдал его туда, а не оставил у себя: у моего `width: auto`
заход между позициями получался разный — 27 % между одиночками и
32 % там, где стоит тройка, потому что излишек масштабировался
вместе с шириной позиции. У доли от карты недостача постоянная, и
заход выходит 18 % на всех границах сразу. Замерено на ряде
1-3-2-3-1 на живой странице.
Двух правил про одну величину в файле быть не должно — иначе
следующий будет чинить то, которое проиграло.
НО ТОЛЬКО В ТЕСНОМ РЯДУ. Убрав своё правило совсем, я тут же это и
поймал замером: доля от карты живёт внутри `.rsk-stol--tesno`, а
вне его тройка попадала под общую ширину позиции из разделов 39 и
44 — `--k-w + 16 + 24`. На 1440 это 172 px при группе в 264: карты
вылезали за свою позицию на 46 px в каждую сторону и наезжали на
соседей на 35 %, то есть за границу «брак» из раздела 40.
Поэтому вне тесного ряда ширину тройке снова считает сама группа.
Два режима, два правила, и они не пересекаются по условию. */
.rsk-stol:not(.rsk-stol--tesno) .rsk-poz--triplet { width: auto; min-width: 0; }
.rsk-poz--triplet .rsk-poz__p { width: 0; min-width: 100%; }
/* В тесном ряду подкладки у позиции нет. Расстояние между картами там
задаёт заход, а не подкладка, — и подкладка становится чистым
вычетом из подписи, ничего не давая взамен. Замер на живой странице
(сессия, сделавшая нахлёст): при контейнере 344 и карте 105 подписи
оставалось 54 px с подкладкой и 86 без; в десктопной раскладке на том
же контейнере — 24 px, то есть три знака в строку.
Честно про цену: 86 px для подписи — всё равно мало, «Что чувствует
другой» встаёт в три-четыре строки. Это плата за нахлёст, и уйти от
неё вёрсткой нельзя: доля позиции при заходе в 18 % заведомо уже
карты. Если длинные имена позиций окажутся неприемлемы, решать не
стилями: или формулировки короче, или одна подпись на всю группу. */
.rsk-stol--tesno .rsk-poz { padding-inline: 0; }
/* ----------------------------------------------------------------------
49.1. ДОБОР — МЕСТО, ДОПИСАННОЕ К РАСКЛАДУ (22.09.2026)
----------------------------------------------------------------------
Класс `.rsk-poz--dobor` ставит `принестиДобор()` в rasklady_vopros.js:
движок по ходу разбора объявляет, что ему нужна ещё карта, и она
прилетает из той же колоды в НОВОЕ место, уже после того как расклад
разложен.
Добор должен читаться как дописанный, а не как забытая позиция
расклада. Отличаем его ровно двумя вещами, обе — из словаря раздела,
ни одного нового слова (правило 1):
— ВОЗДУХ. Перед добором отступ больше, чем между позициями ряда:
он пришёл отдельно и стоит отдельно;
— ВОЛОСОК. Та же золотая черта, которой в разделе отбиты строки и
группы (`--rsk-line`). Она идёт над местом и говорит «дальше —
другое», не называя это словами.
Подпись у добора своя — вопрос, который задала сама модель; её
ставит скрипт, здесь только вид.
Правило общее: добор бывает и на странице вопросов, и на готовых
раскладах. Место в ряду (свой ряд или ячейка) задаётся там, где
задана сетка конкретного стола, — здесь только воздух и волосок. */
.rsk-poz--dobor {
margin-top: 30px;
padding-top: 26px;
border-top: 1px solid var(--rsk-line);
}
/* У добора-тройки рамка группы своя (раздел 50б), и второй край сверху
ей не нужен: воздух остаётся, волосок снимаем. */
.rsk-poz--dobor.rsk-poz--triplet {
padding-top: var(--trio-pad, 20px);
border-top-color: var(--rsk-line);
}
/* ======================================================================
РАЗДАЧА КАРТ ИЗ КОЛОДЫ — движение.
РАЗДЕЛ 50 для static/css/rasklady.css.
Собрано под указание владельца, дословно (передано через b8):
«пусть карты достаются из колоды, то есть есть колода и карты
достаются сверху, снизу, с центра и тд, а не появляются из воздуха».
И под более раннее, тоже дословно:
«карты медленно достаются с анимацией и тд это позволит челоеку
наслодиться процессом волшебством тайной».
Из первого следует всё устройство этого файла. Карта здесь не
«появляется и летит» — она ЛЕЖИТ В КОЛОДЕ и оттуда выходит. Поэтому:
— колода видна всю раздачу и худеет по ходу, а не исчезает целиком
после тасования;
— у колоды есть толщина: карты стоят друг за другом по оси Z, и на
срезе видно стопку, а не один прямоугольник;
— карту берут каждый раз по-разному: сверху, снизу, из середины;
— когда берут из середины, стопка РАЗДВИГАЕТСЯ и потом смыкается;
— у летящей карты НЕТ проявления из прозрачности. Она непрозрачна с
первого кадра, потому что она не возникает — она уже была.
ЗАНЯТЫЕ МЕСТА, которые я беру. Все свободны, сверено по файлу:
.rsk-karta__in::after — ребро карты;
.rsk-karta__ryb::before — свет по рубашке на подъёме.
Псевдоэлементы, которые ты держишь (.rsk-karta::before,
.rsk-karta__lico::after, .rsk-karta__ryb::after, .rsk-karta::after),
я не трогаю ни одним правилом.
====================================================================== */
/* ----------------------------------------------------------------------
А. ПОВОДКИ
----------------------------------------------------------------------
Всё время в одном месте, и скрипт читает ЭТИ ЖЕ значения, а не свои
числа. Иначе при правке длительности в стилях паузы разъедутся и
карта начнёт переворачиваться, не долетев.
Как читать из скрипта:
var t = getComputedStyle(стол).getPropertyValue('--t-polet');
Значения в ms, parseFloat достаточно. */
/* ПРАВКА ПО ПИКУ #283 (Указка, контейнер 4, 23.09.2026).
Владелец сначала: «карта ездила слишком быстро, были фризы; лучше
спокойно и понятно». Потом, глядя на стенд, он же уточнил, и это
главное: «есть рывки — типа дошли до точки, микропауза, а хочется,
чтобы скорость движения была постоянная».
То есть просили НЕ медленнее. Просили НЕПРЕРЫВНО.
Замерено до правки (стенд `Claude outputs/ukazka-4g-2026-09-23/
razdacha/razdacha.py`, столы «5 вопросов» и «10 вопросов», окно 1760
и телефон 390 с придушенным вчетверо процессором): полёт 2303 мс,
пауза между картами 969 мс, вся раздача 21,9 с на 7 карт и 44,8 с на
14; 110 кадров в секунду в окне и 54 на телефоне.
Откуда брались рывки — два места, и ни одно из них не «тормоза».
ПЕРВОЕ: между картами на столе не двигалось ничего. Карта долетала,
выдерживалось --t-lozhitsya, потом --t-mezhdu, и только тогда
трогалась следующая — почти секунда пустоты на каждую карту. Это и
есть «дошли до точки, микропауза». Лечится не длительностью, а
тактом: --t-shag меньше --t-polet, карты идут внахлёст, и в воздухе
всегда кто-то есть (устройство — в `раздать`, rasklady_vopros.js).
ВТОРОЕ: внутри самого полёта карта 18 % времени стояла у колоды, а
потом отдавала 22 % пути за 12 % времени — в 1,83 раза быстрее
собственного среднего хода. Стойка, рывок, ползучее торможение.
Кадры выправлены (коммент у `rsk-vyhod-polet`): выемка ужата до
12 %, дальше скорость держится ровной и спадает лесенкой.
Что НЕ тронуто и почему: --t-tas (круг тасования зациклен, срезать
посреди размаха нельзя — пик #254), --t-razdvig, --t-smykanie,
--t-perevorot, --t-smotrim: про них владелец ничего не говорил. */
.rsk-stol {
--t-tas: 5200ms; /* круг тасования, зациклен */
--t-razdvig: 480ms; /* стопка раздвинулась на месте выемки */
--t-polet: 1700ms; /* выход из стопки + дуга до места */
--t-smykanie: 520ms; /* стопка сомкнулась обратно */
--t-lozhitsya: 120ms; /* коснулась и успокоилась */
--t-perevorot: 1050ms; /* твой, из 30.7 — я его только повторяю */
--t-smotrim: 980ms; /* пауза на открытой карте */
--t-mezhdu: 620ms; /* тишина между переворотами */
/* ШАГ МЕЖДУ ВЫЛЕТАМИ — не пауза, а такт. Меньше полёта, поэтому
следующая карта выходит из колоды, пока предыдущая ещё в воздухе,
и на столе всё время кто-то движется. Владелец, 23.09.2026:
«дошли до точки, микропауза, а хочется, чтобы скорость движения
была постоянная». 800 при полёте 1700 — это нахлёст 53 %.
Раздача: (карт − 1) × 800 + 1700. Семь карт — 6,5 с, десять —
8,9 с, четырнадцать — 12,1 с. Число одно и живёт здесь; скрипт
спрашивает его у стилей (`шкала()`), своего не заводит. */
--t-shag: 800ms;
/* Толщина одной карты в колоде. От неё живут и стопка, и ребро на
перевороте. Не в пикселях: на телефоне карта 98 px, на экране
владельца 248 — фиксированные 3 px были бы на одной бревном, на
другой пропали. */
--k-tol: max(2px, calc(var(--k-w) * .021));
/* Высота подъёма в верхней точке дуги. Тоже от ширины карты. */
--k-vysota: calc(var(--k-w) * -.42);
/* Насколько карта выходит к зрителю в верхней точке. Доля от глубины
сцены, а не пиксели: при --k-glub 1800 это 99 px, при 2800 — 154,
и видимое увеличение в обоих случаях одинаковое, около 6 %.
Считать увеличение через translateZ, а не через scale, — это не
красивость: так карта растёт ровно настолько, насколько она
приблизилась, и на любом экране одинаково. */
--z-verh: calc(var(--k-glub, 1800px) * .055);
}
/* --- ВТОРОЙ РИТМ: КАРТА ДНЯ ---
Числа выше — для раскладов на 3–7 карт, где разбор считается 45–175
секунд и раздачу надо растянуть. Карта дня считается 5–7 секунд, и
прятать готовый ответ за медленной раздачей нельзя: человек будет
сидеть и ждать того, что уже есть. Это твой РИТМ.одна из rasklady.js,
я только перекладываю его в стили.
Что меняется: время. Что НЕ меняется: сам жест. Карту дня тоже
достают из колоды, тоже с тенью и с ребром — просто быстро.
Берут всегда сверху: раздвигать колоду ради одной карты незачем,
и --t-razdvig здесь обнулён.
Итого от нажатия до открытой карты: 1,1 тасования + 0,7 полёта +
0,2 + 1,05 переворота + 0,45 = 3,5 с. Помещается в 5 секунд, за
которые приходит разбор. */
.rsk-stol--odna {
/* --t-tas ЗДЕСЬ БОЛЬШЕ НЕ СЖИМАЕМ, круг наследуется — 5200ms.
Было 1100: кадры rsk-tas-a/b/v рисовались под круг 5200, а тут он
сжимался в 4,7 раза, и тот же размах в 39 px проходил дважды в
секунду. Это и есть «дёргается как в припадке» из пика #254.
Плюс скрипт ждёт min(--t-tas, 2200) = 1100 мс, а движение на этой
скорости не заканчивается — класс снимали на полудвижении, и карты
прыгали обратно за один кадр.
Цена: карта дня стала длиннее на 1,1 с (весь путь 4,6 с при запасе
5). Взято сознательно: «движения не резкие» — требование владельца,
а лишняя секунда на бесплатном раскладе дешевле, чем дёрганье.
Замер 71: на 2200 мс карты в 4, 0 и 0 px от покоя — срез чистый. */
--t-razdvig: 0ms;
--t-polet: 700ms;
--t-smykanie: 300ms;
--t-lozhitsya: 200ms;
--t-perevorot: 1050ms; /* твоё, не трогаю: это сам переворот */
--t-smotrim: 450ms;
--t-mezhdu: 0ms;
}
/* ----------------------------------------------------------------------
Б. КОЛОДА КАК ПРЕДМЕТ
----------------------------------------------------------------------
Разметка (макрос stopka(), templates/rasklady/_chasti.html):
…рубашка…
… --i: 1, 2, 3, 4, 5, 6 …
--i — место в колоде снизу вверх: 0 нижняя, --stopka-n минус один
верхняя. --stopka-n скрипт уменьшает после каждой выдачи, и колода
на глазах худеет.
СЕМЬ, а не три. Три рубашки читаются как «три карты», а не как
колода: у них нет среза. Семь дают видимую толщину (7 × --k-tol —
это 14 px на телефоне и 36 на большом экране) и при этом ничего не
стоят: картинка рубашки одна и та же, браузер грузит её один раз.
Ниже трёх колода не опускается — иначе к седьмой карте расклада
человек раздаёт из воздуха, чего владелец и просил не делать.
Карты стоят друг за другом по Z и чуть смещены — стопка, собранная
руками, а не отпечатанная. Угол считается от середины колоды, чтобы
веер расходился в обе стороны, а не заваливался вбок. */
/* ----------------------------------------------------------------------
Б0. МЕСТА ПОД ВСЕ КАРТЫ ЗАНЯТЫ ЗАРАНЕЕ
----------------------------------------------------------------------
Правка владельца, дословно: «легче сразу попиксельно сделать туда,
куда она должна прийти, чтобы потом в момент доставания второй карты
она не прыгала… когда достаётся вторая карта, эта карта съезжает
первая каким-то магическим образом… каждая карта идёт на своё
понятное место».
то есть невытянутая позиция ВЫНУТА ИЗ ПОТОКА. Ряд карт центрируется
по тем позициям, которые уже видно. Появилась вторая — середина ряда
пересчиталась, и первая карта уехала вбок. Это не анимация, это
перевёрстка, и сгладить её нечем.
Поэтому место занимаем, а карту прячем. Ряд встаёт один раз при
загрузке страницы и дальше не шевелится ни разу за всю раздачу.
visibility, а не opacity: невидимую по visibility карту нельзя
нажать и её не читает экранный диктор — как и при display: none.
Разница только в том, что место за ней остаётся. */
/* Позиция — система координат для слоя пыльцы, который лежит поверх
карты и чуть шире её. Без position она считала бы от стола. */
.rsk-poz { position: relative; }
.rsk-poz--zhdet { display: flex; visibility: hidden; }
/* Вытянули — показываем. Появление мгновенное и это правильно: карта
в этот же кадр начинает выходить из колоды, и проявляться ей нечего,
она уже есть. */
.rsk-poz:not(.rsk-poz--zhdet) { visibility: visible; }
/* --- КОЛОДА ЕЗДИТ ПО СТОЛУ, А НЕ ПРЫГАЕТ ---
Правка владельца, дословно: «надо чтобы движения были не резкие как
сейчас, а она плавно двигалась по столу».
Главный рывок был не там, где кажется. Стопка стояла в том же ряду
flex, что и позиции карт. Позиции выходят из display: none по одной,
ряд каждый раз пересчитывает середину — и колода МГНОВЕННО
перескакивает влево. За раздачу из семи карт это семь скачков, и
ни один из них нельзя сгладить переходом: меняется раскладка, а не
свойство.
Поэтому колода вынута из ряда и положена на стол отдельно. Теперь её
место задаётся одним translate, а translate умеет ехать плавно.
Ряд карт при этом центрируется сам по себе и колоду больше не
двигает — двигаем её мы, и ровно тогда, когда хотим.
Два места, между которыми она ездит:
.rsk-stopka--sredina середина стола. Здесь она лежит и тасуется,
пока считается разбор, — это главное, на что
человек смотрит все 45–175 секунд;
.rsk-stopka--kraj сбоку (на телефоне — над раскладом). Сюда она
уезжает, когда начинается раздача, и отсюда
отдаёт карты.
Переезд один за всю раздачу, 900 мс, кривая с медленным началом и
медленным концом: рука не бросает колоду, а ведёт её. */
.rsk-stopka {
transform-style: preserve-3d;
position: absolute;
z-index: 2;
/* МЕСТО КОЛОДЫ ПО УМОЛЧАНИЮ — СВОЯ ПОЛОСА, А НЕ СЕРЕДИНА СТОЛА.
Причина была в устройстве, а не в числах. Раньше по умолчанию
колода стояла в СЕРЕДИНЕ стола, а в свою полосу её увозил скрипт.
Значит безопасное место существовало только если скрипт отработал:
не сведён, не дошёл, споткнулся, вкладка не отрисовывалась — и
колода остаётся лежать поверх расклада.
Теперь наоборот. По умолчанию колода В СВОЕЙ ПОЛОСЕ, и стол эту
полосу под неё резервирует. Середина — отдельное состояние
.rsk-stopka--sredina, которое скрипт вешает на время ожидания и
снимает перед раздачей. Без скрипта колода просто лежит сбоку:
не так торжественно, зато ничего не перекрывает никогда.
.rsk-stopka--kraj оставлен и означает ровно то же, что умолчание —
чтобы не ломать скрипт, который его уже вешает. */
translate: -50% -50%;
/* Перехода здесь НЕТ намеренно: переезд ведёт скрипт через Web
Animations. Переход можно ждать только по transitionend, а в
неотрисовываемой вкладке переходы стоят, тогда как setTimeout
идёт, — на этом раздача дважды уезжала не с того места. */
}
.rsk-stol { --t-pereezd: 900ms; }
/* --- ГДЕ ЛЕЖИТ КОЛОДА ---
Единственное жёсткое требование владельца: карты не заходят друг на
друга. Ни колода на первую карту расклада, ни карты ряда между
собой. Всё остальное подчинено этому.
Решается местом, а не поворотом: у колоды СВОЯ ПОЛОСА, и стол её
резервирует. Пересечься с рядом она не может по построению.
ШИРОКИЙ ЭКРАН — полоса слева, как было до 20.09 и как владельца
устраивало. Раньше она туда не влезала: полоса и ряд делят одну
ширину, а рабочая ширина была 1328 на любом экране. После того как
дизайнер снял предел (раздел 46), стол на 2880 стал 2216 — места
снова хватает. И теперь это не на глаз: ширина карты считается с
учётом полосы (см. ниже, --polosa), поэтому ряд и колода не
могут не поместиться.
ТЕЛЕФОН — полоса сверху. Сбоку там ширины нет и не будет.
Колода стоит СТОЙМЯ и там, и там. */
/* Широкий экран: колода слева от ряда. */
@media (min-width: 560px) {
.rsk-stol { padding-left: calc(var(--k-w) * 1.75); }
.rsk-stopka,
.rsk-stopka--kraj { left: calc(var(--k-w) * .875); top: 50%; }
}
/* Телефон: колода над раскладом.
ПОЧЕМУ 1.68, А НЕ 1.5. Стопка стоймя выше одной карты: веер
добавляет. При десяти картах крайние довёрнуты на ±3,2°, и такой
доворот прибавляет к высоте около 5,6 % ширины карты; плюс разбег
--sdvig-y, ещё 13 %. Замерено: 1,68 ширины карты.
Однажды я уже зарезервировал ровно по расчёту без веера и получил
касание в четыре пикселя — на снимке владельца это то же самое
«карта на карту зашла», просто тоньше. */
@media (max-width: 559px) {
.rsk-stol { padding-top: calc(var(--k-w) * 1.68 + 16px); }
.rsk-stopka,
.rsk-stopka--kraj { left: 50%; top: calc(var(--k-w) * .84 + 8px); }
}
/* Середина стола — только на время ожидания. Здесь колода стоит прямо
и крупно: пока считается разбор, смотреть человеку надо на неё. */
.rsk-stopka--sredina { left: 50%; top: 50%; }
/* Тени у отдельных карт внутри колоды нет — твоё правило из 30.8.
Повторяю только чтобы оно распространилось и на новый класс. */
.rsk-stopka .rsk-stopka__k::before { display: none; }
/* Общая тень колоды: одна на всю стопку, а не семь пятен под каждой
картой — иначе под колодой чёрное озеро. Растёт вместе с колодой:
чем толще, тем шире и темнее. Худеет колода — светлеет тень. */
.rsk-stopka::after {
content: ''; position: absolute; z-index: -1;
left: 2%; right: 2%; top: 86%; height: 28%;
border-radius: 50%;
background: radial-gradient(closest-side,
rgba(0, 0, 0, .6), rgba(0, 0, 0, .3) 54%, transparent 100%);
opacity: calc(.3 + var(--stopka-n, 7) * .035);
transform: translateZ(-1px) scaleX(calc(1 + var(--stopka-n, 7) * .012));
transition: opacity .4s, transform .4s;
pointer-events: none;
}
/* Разбег карт в колоде.
ПОЧЕМУ НЕ ТОЛЬКО ПО Z. Перспектива смотрит на стол почти в лоб
(perspective-origin 50 % 44 %), и колода стоит у самой оси взгляда.
Шесть карт по --k-tol — это 26 px глубины, что при --k-glub 1800
даёт разницу между нижней и верхней в полтора процента. Замерено:
колода из шести карт выглядит одной картой.
Поэтому толщина набирается ТРЕМЯ способами сразу, и каждый нужен:
по Z — чтобы срез был настоящим, когда колода наклоняется за
курсором (твоё правило .rsk-stol .rsk-stopka);
сдвигом — чтобы край нижних карт был виден и без наклона;
углом — чтобы стопка читалась собранной руками, а не печатной.
Всё в долях от ширины карты: разбег одинаков на телефоне и на 2880. */
.rsk-stopka__k {
position: absolute; inset: 0;
--sdvig-x: calc(var(--i, 0) * var(--k-w) * .009);
--sdvig-y: calc(var(--i, 0) * var(--k-w) * -.013);
/* 0,7° на карту. Было 0,9 — при десяти картах крайние расходились на
±4°, и колода на боку становилась на четверть выше своей ширины,
споря с полосой, которую под неё отвёл стол. */
--ugol: calc((var(--i, 0) - (var(--stopka-n, 7) - 1) / 2) * .7deg);
--z-svoy: calc(var(--i, 0) * var(--k-tol));
/* ПОВОРОТА КОЛОДЫ НАБОК ЗДЕСЬ НЕТ, И БОЛЬШЕ НЕ БУДЕТ.
20.09.2026 колода лежала боком — так полоса под неё выходила на
треть дешевле. Владелец забраковал, дословно: «карты достаются
криво, а они лежат горизонтально, а достаются вертикально; в целом
меня всё устраивало как было до этого». */
transform:
translate3d(var(--sdvig-x), var(--sdvig-y), var(--z-svoy))
rotate(var(--ugol));
/* Переход, а не анимация: раздвигание и смыкание — два состояния,
между которыми ходят туда-обратно, и их ставит скрипт классом.
Анимация тут перезапускалась бы с нуля каждый раз. */
transition:
transform var(--t-razdvig) cubic-bezier(.32, .72, .22, 1),
opacity .22s linear;
}
/* Карту уже взяли — её место в колоде пусто. Скрипт ставит этот класс
ровно в тот кадр, когда появляется летящая карта: рубашки одинаковые,
лежат в одной точке, и подмена не видна. */
.rsk-stopka__k.vzyata { display: none; }
/* --- РАЗДВИГАНИЕ ---
Берут снизу или из середины — всё, что лежит выше места выемки,
приподнимается и уходит чуть вбок. Это и есть жест руки: колоду
приоткрыли. Класс .nad скрипт вешает на карты выше разрыва,
.razdvinuta — на саму стопку.
Почему «выше/ниже» не считается в стилях: сравнить два числа в CSS
нечем, а подпорки на clamp() ломаются на дробном масштабе. Скрипт
номер и так знает, ему проставить класс — одна строка. */
.rsk-stopka.razdvinuta .rsk-stopka__k.nad {
transform:
translate3d(
calc(var(--sdvig-x) + var(--k-w) * .06),
calc(var(--sdvig-y) - var(--k-w) * .21),
calc(var(--z-svoy) + var(--k-tol) * 6))
rotate(calc(var(--ugol) + 2.8deg));
}
/* Смыкание — это снятие .razdvinuta, но обратный ход должен быть мягче
прямого: колоду приоткрывают решительно, а закрывают аккуратно. */
.rsk-stopka.smykaetsya .rsk-stopka__k {
transition-duration: var(--t-smykanie);
transition-timing-function: cubic-bezier(.22, .68, .3, 1);
}
/* ----------------------------------------------------------------------
50б. РАЗМЕР КАРТЫ СЧИТАЕТСЯ ОТ ДЕЙСТВИТЕЛЬНОЙ ШИРИНЫ СТОЛА
----------------------------------------------------------------------
Забираю расчёт из раздела 35 и переписываю. Причина — не вкус, а то,
что случилось: дизайнер снял предел ширины у обёртки раздела
(раздел 46), стол на экране владельца стал 2216 вместо 1616, а в 35
было вписано руками `min(1328px, 100vw - 152px)`. Число осталось
старым, ряд встал посередине с пустыми боками, и полоса под колоду
уехала вместе с ним.
ВПИСАННЫХ ЧИСЕЛ ПРО ШИРИНУ ЗДЕСЬ БОЛЬШЕ НЕТ. Ни предела содержимого,
ни полей, ни 100vw. Карта считается от ТОЙ ШИРИНЫ, КОТОРАЯ У СТОЛА
ЕСТЬ, через контейнерные запросы:
.rsk-hero__stol объявлен контейнером по горизонтали;
100cqw его содержимое, то есть ровно то место, которое
досталось столу после всех чужих правок.
Поэтому следующая правка ширины — чья угодно и какая угодно — ничего
не сломает: карта пересчитается сама. И наоборот, если стол когда-то
сузят, карта уменьшится, а не полезет за край.
ПОЧЕМУ КОНТЕЙНЕР — ОБЁРТКА, А НЕ САМ СТОЛ. Контейнер нельзя
спрашивать о нём самом. У .rsk-stol от --k-w зависит его
собственный padding-top (полоса под колоду), и если бы он же был
контейнером, правило стало бы недействительным. Поэтому контейнер —
.rsk-hero__stol, стол внутри него.
ЧТО ЗАДАЁТ РАЗМЕР. Два числа на расклад, и оба осмысленные:
--v-ryadu сколько карт стоит в одном ряду;
--k-max докуда карту вообще имеет смысл растить.
Ширина — меньшее из «что влезает» и «что разумно». Переполнения не
может быть по построению: делитель и зазоры учтены.
--k-max 325 ВМЕСТО 269 — это просьба владельца «на пару см… ну может
на 1». Один сантиметр у него на экране это не 38 точек: он смотрит
сайт в масштабе 67 %, и сантиметр там выходит около 56 CSS-точек.
269 + 56 = 325. Мельче не делаем, это он сказал отдельно. Для
раскладов на 5–7 карт тот же коэффициент: 177 × 325/269 = 215.
Если размер снова попросят менять — это ДВА ЧИСЛА ниже, --k-max,
и больше ничего. */
.rsk-hero__stol,
[data-vp-shag="stol"] { container-type: inline-size; }
/* Тем же правилом, но на любую будущую обёртку: контейнером становится
прямой родитель стола, как бы он ни назывался. Отдельным правилом, а
НЕ пятым селектором выше — браузер, не понимающий `:has()`, выбрасывает
весь список целиком, и вместе с ним уехали бы обе рабочие строки.
Здесь он выбросит только эту, а те продолжат работать.
Пик #260, владелец: «что тут за херня вообще происходит… всё криво,
через жопу». Разбор 71 на живой странице вопросов: контейнер был
объявлен только на `.rsk-hero__stol` (он в `_chasti.html`), а страница
вопросов строит стол в своём `` — контейнера
над ним нет ни одного, и `100cqw` падал на ОКНО. Стол 835, карта
считалась от 1920 и выходила 186,7; ряд из семи плюс полоса под
колоду просил 1914 px при столе 835 — отсюда куча карт у правого
края и колода поверх них. */
:has(> .rsk-stol) { container-type: inline-size; }
.rsk-stol {
/* НА СКОЛЬКО ПОЗИЦИЯ ШИРЕ СВОЕЙ КАРТЫ.
В ряду стоят не карты, а позиции. Сессия 1e (разделы 39/44) дала
им подкладку по 12 px с каждой стороны ВМЕСТО column-gap, а
подпись задаёт позиции --k-w + 16. Значит шаг ряда — --k-w + 40.
Я сначала считал по старому, как --k-w + зазор, и ряд от этого
вылезал: недооценка 16 px на каждую карту. Это единственное число
здесь, завязанное на чужой раздел; если 39/44 поменяются —
меняется оно одно. */
--pribavka: 40px;
/* ДОПУСТИМЫЙ НАХЛЁСТ, доля ширины карты.
Позиции сжимаемые (flex: 0 1 auto с полом), поэтому при нехватке
места карты ложатся внахлёст, а не рвут ряд. Это не авария, а
задуманное поведение: 1e с b8 договорились о шкале в разделе 40 —
до 22 % «слегка», до 30 % терпимо, больше 30 % брак.
НО ЗАКЛАДЫВАТЬ ЕГО НЕЛЬЗЯ, пока строки переносятся. При переносе
браузер СНАЧАЛА переносит и только потом сжимает: заложил 18 % —
ряд не сжался, а перенёсся, замер дал 2+2+1 вместо 3+2 при
заявленной ёмкости три. Моя ёмкость и настоящая разошлись, и
карта посчиталась от неверного делителя.
Поэтому ноль: ряд считается впритык и помещается по-настоящему.
Если 1e сделает так, что строка держит ровно --v-ryadu позиций и
излишек уходит в нахлёст, а не в перенос (например
flex-basis: calc(100% / var(--v-ryadu)) у .rsk-poz), — тогда это
число можно поднять до .18 и карта станет крупнее. Правило .rsk-poz
её, поэтому решает она. */
--nahlest: 0;
--zapas: 6px; /* чтобы дробный масштаб не выдавил ряд за край */
--v-ryadu: 3;
--k-max: 325px;
/* --polosa — во скольких ширинах карты полоса под колоду. На широком
экране колода стоит СБОКУ и делит ширину с рядом, поэтому её надо
учитывать в делителе: ряд из n карт плюс полоса это k×(n + 1.75).
На телефоне колода сверху, ширину ни с кем не делит — ноль.
Без этого ряд и полоса могут не поместиться вместе, и это было
ровно то, из-за чего колоду пришлось убирать наверх. */
--polosa: 1.75;
/* Ряд занимает n × (k + прибавка), минус то, что съест нахлёст:
(n − 1) × k × нахлёст. Плюс полоса под колоду, если она сбоку.
Решено относительно k. */
--k-w: min(var(--k-max),
calc((100cqw - var(--pribavka) * var(--v-ryadu) - var(--zapas))
/ (var(--v-ryadu) + var(--polosa)
- (var(--v-ryadu) - 1) * var(--nahlest))));
}
/* ПЕРЕНОС СТРОК — НА САМОМ СТОЛЕ, А НЕ НА КЛАССЕ РАСКЛАДА.
Урок простой: перенос строк не должен зависеть от класса, который
может не приехать. Нет такого случая, когда уехать за край лучше,
чем перенести. Поэтому wrap стоит на самом столе и безусловно.
justify-content: center — чтобы неполный последний ряд стоял по
середине, а не жался влево. */
/* column-gap: 0 — не вкус, а условие, без которого врёт расчёт ширины.
Зазор между позициями 1e заменила подкладкой по 12 px внутри самих
позиций (разделы 39/44), и моя формула считает шаг ряда как
--k-w + 40, без зазора. Но в файле выше остались прежние правила
с gap, и они этот зазор возвращают: замер на 390 показал
column-gap: 10px, то есть настоящий шаг 123 вместо 113 — три
позиции переставали помещаться, ряд переносился по две, а карта
считалась от делителя три. Моя ёмкость расходилась с настоящей.
Поэтому зазор здесь обнуляется явно: расстояние между картами
задаёт подкладка позиций, и только она. Если зазор когда-нибудь
вернут — его надо будет прибавить к --pribavka, иначе расчёт
снова разойдётся с раскладкой. */
.rsk-stol { justify-content: center; column-gap: 0; }
/* `--k-max` здесь был и не действовал (21.09.2026): класс `--mnogo`
остался только у стола «Своего вопроса», а там ширину карты задаёт
напрямую блок «СТОЛ ПО ВОПРОСАМ» (`--k-w: min(280px | 220px | 170px, …)`),
мимо этой формулы. Потолок карты на том столе — ТАМ, одно место.
`--v-ryadu` оставлен: его читает `строй()` в rasklady.js. */
.rsk-stol--mnogo { --v-ryadu: 7; }
/* Витрина: карта дня ОДНА, а делитель по умолчанию — три.
Пик #234, владелец: «колоду надо увеличить как было хотябы».
Замер 71 на живой витрине (правая колонка 867 px): при делителе три
карта выходила 163 и половина колонки стояла пустой; при единице —
312, вместе с полосой под колоду занято 834 из 867. До переноса было
268, то есть это не «как было», а на 44 px больше — в ту сторону, про
которую он и просил раньше («на пару см… ну может на 1»).
`--polosa` не трогаем: при 1.3 карта 340, но сумма 908 при столе 867,
и колода вылезает на карту. «Колода не перекрывает карты» — его
жёсткое требование, оно важнее лишних 28 px. */
.rsk-stol--odna { --v-ryadu: 1; }
/* Карта дня на телефоне — герой экрана, а не одна из ряда.
Общий потолок для узких экранов (130px) ей мал: она там одна, делить
ширину не с кем. Число получено из высоты, а не из ширины — по
ширине место есть:
полоса под колоду 1,68 × k + 16
сама карта 1,5 × k (карта 2:3)
подпись ~40
──────────────────────────────────
итого 3,18 × k + 56
На 390 × 844 под первый экран остаётся около 700 точек. 3,18k + 56
≤ 700 даёт k ≤ 202; беру 190, чтобы не впритык. Карта выходит
190 × 285, колода над ней — и всё это помещается без прокрутки. */
@media (max-width: 559px) {
.rsk-stol--odna { --k-max: 190px; }
}
/* ----------------------------------------------------------------------
50в. БОЛЬШИЕ РАСКЛАДЫ: НАХЛЁСТ ПО ПЛАНУ, А НЕ ОТ ТЕСНОТЫ
----------------------------------------------------------------------
Пик #233, владелец дословно:
> «у нас 12 вопросов может быть плюс уточнения, надо проработать, так
> как будут выглядеть такие большие расклады. Возможно карты будут
> слегка накладываться друг на друга или располагаться ближе, чтобы
> всё влезло… особенно чтобы колода не перекрывала карты. Если карты
> слегка лежат друг на друге, это нормально, ЕСЛИ ЭТО ЗАПЛАНИРОВАНО.»
Последние три слова и есть вся задача. Нахлёст, который получается
сам собой от нехватки места, — рваный: где-то две карты сошлись на
треть, где-то не сошлись вовсе, и это читается как поломка. Нахлёст
по плану — одинаковый у всех соседей, и читается как веер.
ПОЧЕМУ НЕЛЬЗЯ ПРОСТО ПОДНЯТЬ --nahlest. Я пробовал, не вышло, и
причина в самом flex: при переносе строк браузер СНАЧАЛА переносит и
только потом сжимает. Заложил 18 % — ряд не сжался, а перенёсся, и
замер дал 2+2+1 вместо 3+2. То есть карта считалась от делителя три,
а в ряду стояло две.
ЧТО ЗАСТАВЛЯЕТ СТРОКУ ДЕРЖАТЬ СКОЛЬКО СКАЗАНО. Позиции получают
жёсткую долю строки: flex: 0 0 calc(100% / --v-ryadu). Тогда в ряду
их ровно столько, сколько задано, каждая занимает одинаковую долю, а
карта шире своей доли — и соседние карты заходят друг на друга
ровно на одну и ту же величину. Это и есть «запланировано»:
величина одна на всех и берётся из числа, а не из остатка места.
АРИФМЕТИКА. Доля строки = ширина / n. Карта шире доли на k × нахлёст.
Значит k × n × (1 − нахлёст) + полоса под колоду = ширина стола,
откуда k = ширина / (n × (1 − нахлёст) + полоса).
Полоса остаётся в знаменателе — колода по-прежнему не делится ни с
кем и не перекрывает карты. Это требование владельца осталось
жёстким, и оно выполняется тем же способом, что и раньше.
КОГДА ВКЛЮЧАЕТСЯ. Только когда карт больше, чем помещается спокойно.
Класс .rsk-stol--tesno вешает скрипт: если расклад умещается в ряд
без тесноты, нахлёста нет вовсе — накладывать карты просто так,
когда места хватает, владелец не просил.
СКОЛЬКО. 18 %. Шкала 1e из раздела 40: до 22 % «слегка», до 30 %
терпимо, больше 30 % брак. 18 — внутри «слегка» с запасом. На карте
105 px это 19 px захода: видно, что карты лежат внахлёст, и видно
каждую целиком, кроме полоски у края.
СКОЛЬКО В РЯД. Больше, чем без нахлёста, — в том и смысл. На
телефоне четыре: двадцать две карты тогда ложатся шестью рядами по
105 px вместо восьми рядов по 73. Карта не мельче, а КРУПНЕЕ того,
что было, при том что карт втрое больше. */
.rsk-stol--tesno {
--nahlest: .18;
--v-ryadu: 8;
/* КОЛОДА В ТЕСНОМ РАСКЛАДЕ УХОДИТ НАВЕРХ, А НЕ ВБОК.
Тесный расклад всегда многорядный, и стол у него высокий: при
двенадцати позициях больше трёх тысяч точек. А колода сбоку стоит
по вертикали в СЕРЕДИНЕ стола — то есть между рядами, поверх карт
и подписей. Замер 71 до правки: перекрывала карту 6 на 89×128,
карту 7 и две подписи. Сдвигом это не лечится: боковая полоса
рассчитана на один ряд и для многих рядов не годится в принципе.
Сверху она ни с чем не делится, и карта от этого становится
КРУПНЕЕ: 104 → 129 при двенадцати позициях. */
--polosa: 0;
padding-left: 0;
padding-top: calc(var(--k-w) * 1.68 + 16px);
/* В знаменателе ещё и --nahlest: ряд из n позиций занимает
n × k × (1 − нахлёст), но КРАЙНЯЯ карта свисает за свою долю ещё
на k × нахлёст — доля уже карты, а карта стоит в ней по центру.
Без этого слагаемого ряд выходил за стол: 22 карты на 1920 — 12 px. */
--k-w: min(var(--k-max),
calc(100cqw / (var(--v-ryadu) * (1 - var(--nahlest))
+ var(--nahlest) + var(--polosa))));
}
.rsk-stol--tesno .rsk-stopka,
.rsk-stol--tesno .rsk-stopka--kraj {
left: 50%;
top: calc(var(--k-w) * .84 + 8px);
}
@media (max-width: 1199px) { .rsk-stol--tesno { --v-ryadu: 6; } }
@media (max-width: 559px) { .rsk-stol--tesno { --v-ryadu: 4; } }
/* Доля позиции считается ОТ КАРТЫ, А НЕ ОТ СТРОКИ. Это важно, и я
сначала сделал неправильно.
Если давать долю в процентах строки (100% / --v-ryadu), то у
позиции-тройки, которая вдвое шире, вдвое больше и заход. Замерено
на живой странице, ряд 1-3-2-3-1: нахлёст выходил 27 и 32 % вместо
18. По шкале раздела 40 это уже «терпимо» и «брак», а владелец
просил «слегка» и, главное, «запланированно» — то есть ОДИНАКОВО.
Доля от карты даёт заход ровно --nahlest на КАЖДОЙ границе, какие бы
позиции ни стояли рядом: одиночка с одиночкой, одиночка с тройкой,
тройка с тройкой. Замер того же ряда: 18, 18, 18.
min-width: 0 обязателен: иначе флекс не даст позиции стать уже
своего содержимого, и строка перенесётся вместо того, чтобы сжаться.
Порядок: левая карта поверх правой. Так расклад читается слева
направо, как текст, и у каждой карты открыт её левый край. */
.rsk-stol--tesno .rsk-poz {
--doli: 1;
flex: 0 0 calc(var(--k-w) * (var(--doli) - var(--nahlest)));
min-width: 0;
}
/* ТРОЙКИ И ПАРЫ (раздел 49 сессии 1e).
Под одним вопросом бывает две или три карты; в группе они лежат с
шагом в половину карты. Значит тройка занимает 2 ширины карты, пара
— 1,5. Столько долей им и даём.
Без этого тройка получает долю одиночки. Замерено на живой странице:
позиции сплющивались до 121 px при нужных 344, а нахлёст между
соседями доходил до 68 и 93 %. Карты буквально накрывали друг друга. */
.rsk-stol--tesno .rsk-poz--triplet:has(.rsk-poz__karty > .rsk-karta:nth-child(2):last-child) { --doli: 1.5; }
.rsk-stol--tesno .rsk-poz--triplet:has(.rsk-poz__karty > .rsk-karta:nth-child(3)) { --doli: 2; }
.rsk-stol--tesno .rsk-poz:nth-child(1) { z-index: 20; }
.rsk-stol--tesno .rsk-poz:nth-child(2) { z-index: 19; }
.rsk-stol--tesno .rsk-poz:nth-child(3) { z-index: 18; }
.rsk-stol--tesno .rsk-poz:nth-child(4) { z-index: 17; }
.rsk-stol--tesno .rsk-poz:nth-child(5) { z-index: 16; }
.rsk-stol--tesno .rsk-poz:nth-child(6) { z-index: 15; }
.rsk-stol--tesno .rsk-poz:nth-child(7) { z-index: 14; }
.rsk-stol--tesno .rsk-poz:nth-child(8) { z-index: 13; }
/* Дальше порядок уже не важен: девятая карта стоит в следующем ряду и
ни с кем в своём ряду не спорит за перекрытие. */
/* СКОЛЬКО КАРТ ВЛЕЗАЕТ В РЯД — решает ширина, а не число карт.
Теперь так: здесь написано, сколько карт ВЛЕЗАЕТ в ряд при этой
ширине, а скрипт из этого считает, сколько их встанет НА САМОМ ДЕЛЕ,
и делит поровну: пять при ёмкости четыре — это 3+2, а не 4+1; семь
при ёмкости четыре — 4+3. Ряд получается ровным, а карта такой,
какую позволяет место. Формула та же, меняется только делитель. */
@media (max-width: 1199px) { .rsk-stol--mnogo { --v-ryadu: 4; } }
@media (max-width: 559px) {
/* НА ТЕЛЕФОНЕ НАХЛЁСТ НЕ ЗАКЛАДЫВАЕМ, и это не осторожность.
Нахлёст даёт сжатие позиций, но при переносе строки (flex-wrap)
браузер СНАЧАЛА переносит и только потом сжимает. Заложил 18 % —
ряд не сжался, а перенёсся: замер дал 2+2+1 вместо 3+2 при
заявленной ёмкости три. То есть моя ёмкость и настоящая разошлись,
и карта посчиталась от неверного делителя.
Поэтому здесь ряд считается впритык, без нахлёста: три позиции по
--k-w + 40 обязаны поместиться по-настоящему. Карта выходит
мельче, чем могла бы, зато ёмкость честная и ряд не рассыпается. */
/* Разделено: потолок 130 нужен рядам, а карте дня он мешал — она
упиралась в него вместо расчёта места и выходила 130 вместо 190.
Оба правила стояли в одном медиаблоке с равной силой, побеждало
нижнее. Нашли 1e и 00 замером на живом телефоне, чинил 71. */
.rsk-stol { --polosa: 0; }
.rsk-stol:not(.rsk-stol--odna) { --k-max: 130px; }
/* Колоде нужно место СВЕРХУ везде, где нет боковой полосы, а не
только в тесном раскладе. Иначе на трёх картах она остаётся
посреди стола и ложится на среднюю карту: замер 71 — налегание
16×157, верх колоды 579 при верхе стола 218. Большие расклады
получали это из тесного режима, трёхкарточный — нет. */
.rsk-stol:not(.rsk-stol--odna) {
padding-left: 0;
padding-top: calc(var(--k-w) * 1.68 + 16px);
}
.rsk-stol:not(.rsk-stol--odna) .rsk-stopka,
.rsk-stol:not(.rsk-stol--odna) .rsk-stopka--kraj {
left: 50%;
top: calc(var(--k-w) * .84 + 8px);
}
/* Три карты на телефоне идут ПО ДВЕ в ряд — решение владельца
20.09.2026. Было: три в ряд давали карту 71 px, то есть мельче,
чем семь карт (110). Стало: (339 − 2×40 − 6) / 2 = 126. */
.rsk-stol--tri { --v-ryadu: 2; }
.rsk-stol--mnogo { --v-ryadu: 3; }
}
/* Запасной расчёт для браузера без контейнерных запросов. Он опять
через 100vw и опять с вписанными полями — то есть ровно та беда, от
которой мы уходим. Поэтому он здесь ТОЛЬКО как запас: карта выйдет
мельче, чем могла бы, зато не вылезет за край.
Контейнерные запросы понимают Chrome 105+, Safari 16+, Firefox 110+. */
@supports not (container-type: inline-size) {
.rsk-stol {
--k-w: min(var(--k-max),
calc((100vw - 152px - var(--pribavka) * var(--v-ryadu) - var(--zapas))
/ (var(--v-ryadu) + var(--polosa)
- (var(--v-ryadu) - 1) * var(--nahlest))));
}
}
/* ----------------------------------------------------------------------
В0. ТИХИЙ ЖЕСТ ОЖИДАНИЯ — ВМЕСТО ТАСОВАНИЯ
----------------------------------------------------------------------
Владелец про тасование, дословно: «карты двигаются как в эпилепсии…
эпилепсию убрать». И тут же, что вместо: «если их можно было чуть
поворачивать, это было бы хорошо».
Что здесь вместо, и почему именно так:
1. ДВИЖЕТСЯ КОЛОДА ЦЕЛИКОМ, А НЕ КАРТЫ В НЕЙ. Это главное. Стопка
поворачивается как один предмет — ни одна карта не шевелится
относительно других. Отдельные движения внутри стопки и есть то,
что читается «эпилепсией».
2. КРУГ 17 СЕКУНД, а не 5,2. За 175 секунд ожидания он повторится
десять раз вместо тридцати трёх, и на такой длине глаз петлю уже
не ловит.
3. РАЗМАХ 1,6°, а не 16. Это ровно «чуть поворачивать»: движение
видно, только если смотреть на колоду, и не мельтешит на краю
зрения, когда человек читает текст рядом.
4. КЛЮЧЕВЫЕ КАДРЫ РАССТАВЛЕНЫ НЕРОВНО (18, 34, 50, 72, 88 %), и углы
в них не симметричны. Ровный маятник читается механизмом, а
неровный — живым предметом, который чуть ведёт.
Свойство rotate, а не transform: transform у стопки занят наклоном за
курсором (твой раздел 30.6), а отдельное свойство с ним складывается
и ничего не отнимает.
КЛАСС: .rsk-stopka--zhdet. Вешать на всё время, пока считается
разбор, снимать перед раздачей. Назван так же, как .rsk-poz--zhdet,
чтобы не заводить второго словаря; если у тебя уже есть имя — скажи,
переименую, правило одно. */
.rsk-stopka--zhdet { animation: rsk-koloda-zhdet 17s ease-in-out infinite; }
@keyframes rsk-koloda-zhdet {
0% { rotate: 0 0 1 0deg; }
18% { rotate: 0 0 1 1.4deg; }
34% { rotate: 0 0 1 1.1deg; }
50% { rotate: 0 0 1 -.5deg; }
72% { rotate: 0 0 1 -1.6deg; }
88% { rotate: 0 0 1 -.3deg; }
100% { rotate: 0 0 1 0deg; }
}
/* Свет по верхней рубашке — один раз в круг, на самом медленном участке.
Движения в кадре от этого не прибавляется: это не предмет ездит, это
блик проходит. Он и держит внимание, пока колода почти стоит.
Использует твой keyframes rsk-blik, второго не завожу. */
.rsk-stopka--zhdet .rsk-stopka__k:nth-last-child(1) .rsk-karta__ryb::after {
animation: rsk-blik-tihiy 17s ease-in-out infinite;
}
@keyframes rsk-blik-tihiy {
0%, 40% { transform: translateX(-130%); }
62% { transform: translateX(130%); }
100% { transform: translateX(130%); }
}
/* Кому движение мешает — колода просто лежит. */
@media (prefers-reduced-motion: reduce) {
.rsk-stopka--zhdet,
.rsk-stopka--zhdet .rsk-stopka__k:nth-last-child(1) .rsk-karta__ryb::after {
animation: none !important;
}
}
/* ----------------------------------------------------------------------
В. ТАСОВАНИЕ, КОТОРОЕ МОЖНО СМОТРЕТЬ ДОЛГО
----------------------------------------------------------------------
Прежний вариант крутил три коротких круга по 0,62 с. Повторить такое
подряд нельзя: на пятом круге глаз ловит петлю, и дальше человек
смотрит не на карты, а на то, как они дёргаются.
Здесь круг длинный, 5,2 с, и внутри четыре разных такта:
0 → 18 % снять и отвести верхнюю половину — короткий сухой жест;
18 → 34 % вернуть на место;
34 → 52 % ПАУЗА. Колода просто лежит. Пауза важнее жеста: без неё
это карточный фокус, с ней — человек, который думает;
52 → 74 % подравнять стопку — второй жест, не похожий на первый;
74 → 100 % длинная пауза с еле заметным оседанием.
Движутся три верхние карты, каждая со своим сдвигом фазы и своим
углом, поэтому одинаковых кадров в круге нет. Нижние лежат: в живой
колоде низ и не шевелится.
БЕСКОНЕЧНОЕ. Останавливает его не таймер, а снятие класса .tasuem —
то есть ответ модели. Если разбор считался 45 секунд, тасование шло
45 секунд; если 175 — 175. */
.rsk-stopka.tasuem .rsk-stopka__k:nth-last-child(1) { animation: rsk-tas-a var(--t-tas) cubic-bezier(.4, 0, .3, 1) 0s infinite; }
.rsk-stopka.tasuem .rsk-stopka__k:nth-last-child(2) { animation: rsk-tas-b var(--t-tas) cubic-bezier(.4, 0, .3, 1) -.4s infinite; }
.rsk-stopka.tasuem .rsk-stopka__k:nth-last-child(3) { animation: rsk-tas-v var(--t-tas) cubic-bezier(.4, 0, .3, 1) -.9s infinite; }
/* Верхняя: единственная, у кого есть заметный вертикальный ход. Её же
потом и возьмут, если тянут сверху. */
@keyframes rsk-tas-a {
0% { transform: translate3d(var(--sdvig-x), var(--sdvig-y), var(--z-svoy)) rotate(var(--ugol)); }
18% { transform: translate3d(var(--sdvig-x), calc(var(--sdvig-y) - var(--k-w) * .13), calc(var(--z-svoy) + var(--k-tol) * 5)) rotate(calc(var(--ugol) - 2.4deg)); }
34%, 52% { transform: translate3d(var(--sdvig-x), var(--sdvig-y), var(--z-svoy)) rotate(var(--ugol)); }
60% { transform: translate3d(calc(var(--sdvig-x) - var(--k-w) * .03), calc(var(--sdvig-y) - var(--k-w) * .02), calc(var(--z-svoy) + var(--k-tol) * 2)) rotate(calc(var(--ugol) + 1.1deg)); }
74%, 88% { transform: translate3d(var(--sdvig-x), var(--sdvig-y), var(--z-svoy)) rotate(var(--ugol)); }
94% { transform: translate3d(var(--sdvig-x), calc(var(--sdvig-y) + 2px), var(--z-svoy)) rotate(var(--ugol)); }
100% { transform: translate3d(var(--sdvig-x), var(--sdvig-y), var(--z-svoy)) rotate(var(--ugol)); }
}
@keyframes rsk-tas-b {
0% { transform: translate3d(var(--sdvig-x), var(--sdvig-y), var(--z-svoy)) rotate(var(--ugol)); }
18% { transform: translate3d(calc(var(--sdvig-x) + var(--k-w) * .12), calc(var(--sdvig-y) - var(--k-w) * .04), var(--z-svoy)) rotate(calc(var(--ugol) + 3.1deg)); }
34%, 52% { transform: translate3d(var(--sdvig-x), var(--sdvig-y), var(--z-svoy)) rotate(var(--ugol)); }
60% { transform: translate3d(calc(var(--sdvig-x) + var(--k-w) * .025), var(--sdvig-y), var(--z-svoy)) rotate(calc(var(--ugol) + .8deg)); }
74%, 100% { transform: translate3d(var(--sdvig-x), var(--sdvig-y), var(--z-svoy)) rotate(var(--ugol)); }
}
@keyframes rsk-tas-v {
0% { transform: translate3d(var(--sdvig-x), var(--sdvig-y), var(--z-svoy)) rotate(var(--ugol)); }
18% { transform: translate3d(calc(var(--sdvig-x) - var(--k-w) * .10), calc(var(--sdvig-y) - var(--k-w) * .02), var(--z-svoy)) rotate(calc(var(--ugol) - 2.6deg)); }
34%, 56% { transform: translate3d(var(--sdvig-x), var(--sdvig-y), var(--z-svoy)) rotate(var(--ugol)); }
64% { transform: translate3d(calc(var(--sdvig-x) - var(--k-w) * .02), var(--sdvig-y), var(--z-svoy)) rotate(calc(var(--ugol) - .7deg)); }
78%, 100% { transform: translate3d(var(--sdvig-x), var(--sdvig-y), var(--z-svoy)) rotate(var(--ugol)); }
}
/* Блик по верхней рубашке раз в круг, на такте «подравнять»: свет
цепляется за карту именно тогда, когда её трогают. Использует твой
же keyframes rsk-blik — второго движения на странице не заводится. */
.rsk-stopka.tasuem .rsk-stopka__k:nth-last-child(1) .rsk-karta__ryb::after {
animation: rsk-tas-blik var(--t-tas) ease-in-out infinite;
}
@keyframes rsk-tas-blik {
0%, 52% { transform: translateX(-130%); }
76% { transform: translateX(130%); }
100% { transform: translateX(130%); }
}
/* ----------------------------------------------------------------------
Г. ВЫХОД ИЗ КОЛОДЫ И ПОЛЁТ
----------------------------------------------------------------------
Скрипт ставит на карту, как и раньше:
--dx, --dy вектор ОТ её места на столе К стопке;
--krut доворот, знаком — сторона, откуда вышла.
И новое:
--storona 1 или -1, в какую сторону выходит из середины колоды;
--glub 0…1, насколько глубоко она лежала (0 верх, 1 низ);
плюс ОДИН класс места выемки:
.vyshla--sverhu | .vyshla--snizu | .vyshla--seredina
Движение разбито на две части, и это прямо следует из указания
владельца:
0 → 22 % ВЫЕМКА. Карта ещё у колоды и выходит из неё — вверх,
вниз или вбок, смотря откуда её берут. В эти 320 мс она
почти не приближается к своему месту на столе: её
достают, а не несут;
22 → 100 % ДУГА до места.
Почему у летящей карты нет проявления из прозрачности: она и не
должна появляться. Она непрозрачна с первого кадра и стоит ровно
там, где только что лежала рубашка из колоды. Скрипт в тот же кадр
прячет ту рубашку классом .vzyata — подмены не видно.
ПРИБЛИЖЕНИЕ ЧЕРЕЗ translateZ, А НЕ scale. Перспектива теперь на столе
(твой раздел 30.6), и Z работает по-настоящему: карта, вышедшая на
--z-verh вперёд, увеличивается ровно настолько, насколько
приблизилась. Своей perspective() я нигде не завожу — помню. */
.rsk-karta.vyshla { animation: rsk-vyhod-polet var(--t-polet) both; }
/* Путь считает скрипт — запасная анимация отключается.
Почему так, а не «одна правда в CSS»: значения этих кадров собраны
из переменных (--dx, --nerv, --k-vysota), а анимацию с
пользовательскими свойствами в кадрах браузер НЕ отдаёт видеокарте
и пересчитывает на основном потоке. Пока карта идёт быстро, этого
не видно; на медленной посадке, где за кадр набегает меньше
пикселя, любая задержка основного потока становится ступенькой.
Владелец назвал это «по пиксельно… в фазы в конце», и был прав.
Скрипт считает те же точки в числах и отдаёт 72 готовых кадра без
единой переменной — такая анимация уезжает на видеокарту.
CSS-кадры остаются для браузера без Web Animations и на случай,
когда скрипт до карты не дошёл: там путь будет ломаной, но карта
долетит куда надо. */
.rsk-karta.vyshla.letit-sam { animation: none; }
/* Куда карта выходит из колоды. Один класс — один вектор выемки.
Числа от ширины карты, чтобы на всех экранах жест был одинаковым. */
.rsk-karta.vyshla--sverhu { --vx: 0px; --vy: calc(var(--k-w) * -.20); }
.rsk-karta.vyshla--snizu { --vx: 0px; --vy: calc(var(--k-w) * .24); }
.rsk-karta.vyshla--seredina { --vx: calc(var(--k-w) * .30 * var(--storona, 1)); --vy: calc(var(--k-w) * .03); }
/* ПОЧЕМУ ЭТО ПЕРЕПИСАНО (правка владельца, 20.09.2026, дословно):
«чтобы карты из колоды шли медленно как будто это человек, нет
строгой траектории, она идет на свое место непрерывно, а сейчас
как сабля».
Что сделано вместо этого — три вещи, и каждая отвечает своему слову
из правки.
«НЕПРЕРЫВНО». Кривых на участках больше нет, между кадрами стоит
linear. Скорость задаётся не кривой, а тем, КАК ЧАСТО расставлены
кадры: в середине пути карта проходит примерно равные куски за
равные доли времени. Разгон один, в самом начале, торможение одно,
в самом конце, — как рука, которая взяла предмет, пронесла его и
положила. Ни одного места, где движение сбивается.
«МЕДЛЕННО». Полёт 2300 мс вместо 1450. Выемка из колоды занимает
первые 18 % — 414 мс только на то, чтобы достать карту.
«НЕТ СТРОГОЙ ТРАЕКТОРИИ». Чистая парабола читается машиной: глаз
видит правильную дугу и перестаёт верить, что её ведёт рука.
Поэтому, во-первых, дуга несимметричная — карта поднимается рано,
а верхнюю точку проходит позже середины и опускается дольше, чем
поднималась. Во-вторых, добавлена переменная --nerv: скрипт кладёт
в неё небольшое число со случайным знаком, и карта уводится вбок
от идеальной линии — сильнее всего в середине пути, к концу сходя
на нет. У каждой карты своё число, поэтому двух одинаковых
траекторий за раздачу не бывает. Без --nerv (если скрипт её не
поставил) всё работает как раньше, просто ровнее.
Доворот тоже не строгий: он не гасится в ноль, а чуть переходит
через ноль и возвращается — запястье довернуло и поправило. */
/* ПОСТОЯННАЯ СКОРОСТЬ, А ПОТОМ РОВНОЕ ТОРМОЖЕНИЕ (пик #283).
Владелец: «хочется, чтобы скорость движения была постоянная».
Как было. Доли ОСТАВШЕГОСЯ пути шли 1 / .78 / .58 / .40 / .25 / .12 /
.03 / 0, а выемка занимала первые 18 % времени. В скорости это
0 → 1.83 → 1.67 → 1.50 → 1.25 → 1.08 → 0.75 → 0.25 среднего хода:
карта стояла, стреляла и ползла. На 1760 разгон — около 800 точек в
секунду: столько за кадр не отрисовывается, и на телефоне рывок
превращался в ступеньки.
Как стало. Выемка 12 %, дальше доли 1 / .744 / .573 / .407 / .253 /
.123 / .034 / 0. Скорость: 1.25 → 1.25 → 1.21 → 1.13 → 0.95 → 0.65 →
0.31. Первую треть пути карта идёт РОВНО, потом спадает лесенкой без
единого колена. Верх 1.25 вместо 1.83 — при полёте 1700 мс это на
7 % НИЖЕ прежних точек в секунду, хотя полёт короче.
Поэтому же с 78 % снята кривая торможения: тормозим долями пути, а
кривая поверх долей давала ступеньку ровно там, где её было видно.
Что НЕ тронуто: высота дуги (--k-vysota × --vys), боковой увод
(--nerv, --nb), доворот (--krut), выход к зрителю (--z-verh) и
верхняя точка на 54 %. Жест тот же, изменён только ХОД. */
@keyframes rsk-vyhod-polet {
/* Лежит в колоде: на своей глубине, с доворотом колоды. */
0% {
transform:
translate3d(var(--dx, 0px), var(--dy, 0px), calc(var(--k-tol) * -2))
rotate(calc(var(--krut, 0deg) * 1.06));
animation-timing-function: cubic-bezier(.36, 0, .55, .92);
}
/* 12 % — вышла из колоды. По столу ещё не продвинулась.
Было 18 %: при полёте в 2,3 с это 414 мс почти на месте, и глаз
читал их как остановку перед рывком. */
12% {
transform:
translate3d(
calc(var(--dx, 0px) + var(--vx, 0px)),
calc(var(--dy, 0px) + var(--vy, 0px)),
calc(var(--z-verh) * .3))
rotate(calc(var(--krut, 0deg) * 1));
animation-timing-function: linear;
}
30% {
transform:
translate3d(
calc((var(--dx, 0px) + var(--vx, 0px)) * .744 + var(--nerv, 0px) * .55),
calc((var(--dy, 0px) + var(--vy, 0px)) * .744 + var(--k-vysota) * var(--vys, 1) * .55),
calc(var(--z-verh) * .62))
rotate(calc(var(--krut, 0deg) * .8));
animation-timing-function: linear;
}
42% {
transform:
translate3d(
calc((var(--dx, 0px) + var(--vx, 0px)) * .573 + var(--nerv, 0px)
+ var(--nerv, 0px) * var(--nb, 1) * .15),
calc((var(--dy, 0px) + var(--vy, 0px)) * .573 + var(--k-vysota) * var(--vys, 1) * .92),
calc(var(--z-verh) * .9))
rotate(calc(var(--krut, 0deg) * .6));
animation-timing-function: linear;
}
/* Верхняя точка — позже середины пути: поднимается быстрее, чем
опускается. Так носят то, что боятся уронить. */
54% {
transform:
translate3d(
calc((var(--dx, 0px) + var(--vx, 0px)) * .407 + var(--nerv, 0px) * .55
+ var(--nerv, 0px) * var(--nb, 1) * .55),
calc((var(--dy, 0px) + var(--vy, 0px)) * .407 + var(--k-vysota) * var(--vys, 1)),
var(--z-verh))
rotate(calc(var(--krut, 0deg) * .44));
animation-timing-function: linear;
}
66% {
transform:
translate3d(
calc((var(--dx, 0px) + var(--vx, 0px)) * .253 + var(--nerv, 0px) * .15
+ var(--nerv, 0px) * var(--nb, 1)),
calc((var(--dy, 0px) + var(--vy, 0px)) * .253 + var(--k-vysota) * var(--vys, 1) * .85),
calc(var(--z-verh) * .78))
rotate(calc(var(--krut, 0deg) * .25));
animation-timing-function: linear;
}
78% {
transform:
translate3d(
calc((var(--dx, 0px) + var(--vx, 0px)) * .123
+ var(--nerv, 0px) * var(--nb, 1) * .55),
calc((var(--dy, 0px) + var(--vy, 0px)) * .123 + var(--k-vysota) * var(--vys, 1) * .55),
calc(var(--z-verh) * .5))
rotate(calc(var(--krut, 0deg) * .1));
/* Отсюда и до конца — одно длинное торможение, без единой поправки.
Карта уже над своим местом: ей некуда примеряться, место занято
за ней с самого начала. Само торможение задано ДОЛЯМИ пути, а не
кривой (см. коммент над кадрами): так оно идёт ровной лесенкой
1.25 → 1.21 → 1.13 → 0.95 → 0.65 → 0.31 среднего хода, без колена
на стыке кадров. */
animation-timing-function: linear;
}
90% {
transform:
translate3d(
calc((var(--dx, 0px) + var(--vx, 0px)) * .034
+ var(--nerv, 0px) * var(--nb, 1) * .12),
calc((var(--dy, 0px) + var(--vy, 0px)) * .034 + var(--k-vysota) * var(--vys, 1) * .18),
calc(var(--z-verh) * .16))
rotate(calc(var(--krut, 0deg) * .03));
animation-timing-function: cubic-bezier(.35, .1, .5, 1);
}
100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
/* --- ЧЕТЫРЕ ТРАЕКТОРИИ ---
Владелец: «она может идти как снизу вверх, как сверху вниз, как
восьмёркой, разными траекториями. Но последний её момент, куда она
ложится, уже определён заранее».
Ровно так и сделано: форма пути разная, конец у всех один и тот же —
translate3d(0,0,0) rotate(0), то есть точное место позиции. Никаких
«примерок» в последних кадрах нет ни у одной.
Форму задают две переменные, поэтому кадры выше одни на все четыре:
--vys насколько и в какую сторону путь отходит от прямой
(больше единицы — выше, отрицательное — провисает вниз);
--nb знак бокового увода во ВТОРОЙ половине пути. Тот же знак,
что в первой, — ровная дуга в сторону; противоположный —
карта перекладывается, и получается восьмёрка.
--nerv скрипт кладёт свой на каждую карту, поэтому даже две карты
с одинаковой траекторией идут не по одной линии. */
.rsk-karta.put--verhom { --vys: 1; --nb: 1; } /* высокая дуга сверху */
.rsk-karta.put--nizom { --vys: -.5; --nb: 1; } /* провисает низом вверх */
.rsk-karta.put--vosmerka { --vys: .8; --nb: -1; } /* перекладка, восьмёрка */
.rsk-karta.put--pryamo { --vys: .25; --nb: 1; } /* почти прямо, низко */
/* --- Свет по рубашке на выходе ---
Пока карта выходит из колоды и идёт вверх, её рубашка выбирается из
тени стопки на свет: вверху ярче, внизу темнее, и граница света едет
по карте. Это тот признак, по которому глаз отличает «предмет
подняли» от «картинку увеличили». Гаснет к посадке — карта снова
легла в общий свет стола.
.rsk-karta__ryb::before свободен: ::after у рубашки занят бликом
(разделы КАРТА и 3), ::before не занят ничем. */
.rsk-karta.vyshla .rsk-karta__ryb::before {
content: ''; position: absolute; inset: 0; z-index: 1;
border-radius: inherit; pointer-events: none;
background: linear-gradient(176deg,
rgba(255, 244, 216, .24) 0%,
rgba(255, 244, 216, .06) 34%,
transparent 58%,
rgba(6, 9, 6, .32) 100%);
/* linear по той же причине, что у тени: ease применилась бы к
каждому участку отдельно и дала бы мигание ступенями. */
animation: rsk-svet-ryb var(--t-polet) linear both;
}
@keyframes rsk-svet-ryb {
0% { opacity: 0; }
10% { opacity: .5; } /* ещё в колоде, свет только коснулся края */
30% { opacity: 1; } /* вышла — поймала лампу целиком */
58% { opacity: 1; }
72% { opacity: .7; }
88% { opacity: .22; }
96% { opacity: .06; }
100% { opacity: 0; }
}
/* --- Тень в полёте ---
Твоя тень (30.8) отзывается только на переворот. В полёте она должна
жить: у карты в воздухе пятно большое и бледное, у лежащей —
маленькое и тёмное.
БЕЗ filter: blur — твой довод из 30.8 принят и проверен: размытие по
кадрам на семи картах сразу перерисовывает каждый кадр. Пятно и так
нарисовано мягким градиентом без единой чёткой кромки, и рост мягкого
пятна глаз читает ровно как «тень стала больше и размытее».
translateZ(-1px) повторён в КАЖДОМ кадре: без него анимация сбросила
бы его на первом же кадре и тень всплыла бы поверх карты.
Тень отстаёт от карты намеренно: карта в верхней точке на 58 %, тень
доходит до максимума к 64 %. Разница ~90 мс — ровно столько, чтобы
глаз прочёл «тень догоняет», и мало, чтобы заметить ошибку. */
.rsk-karta.vyshla::before { animation: rsk-ten-polet var(--t-polet) linear both; }
/* linear, а не ease, и кадры чаще.
БЫЛО: `animation: … both` без кривой. У такой записи кривая ease
применяется НЕ ко всей анимации, а к КАЖДОМУ участку между соседними
кадрами. Шесть кадров — шесть отдельных разгонов и торможений, и на
посадке, где карта уже почти стоит, тень продолжала дышать ступенями.
Владелец увидел это как «в фазы в конце» вместе с ломаной у самой
карты. Размытое пятно ступенчатую смену размера показывает даже
лучше, чем чёткий предмет: у него нет кромки, за которую цепляется
глаз, зато хорошо видно «дёрнулось — постояло».
СТАЛО: между кадрами linear, кадров вдвое больше, и на последней
трети они сгущены — там, где тень собирается под легшую карту.
Ровное изменение мягкого пятна глаз читает как плавное, даже когда
между кадрами 200 мс. */
@keyframes rsk-ten-polet {
0% { opacity: 0; transform: translateZ(-1px) scale(.72); }
12% { opacity: .3; transform: translateZ(-1px) scale(.92); }
22% { opacity: .42; transform: translateZ(-1px) scale(1.02); }
40% { opacity: .3; transform: translateZ(-1px) scale(1.3); }
64% { opacity: .17; transform: translateZ(-1px) scale(1.52); }
78% { opacity: .26; transform: translateZ(-1px) scale(1.3); }
88% { opacity: .38; transform: translateZ(-1px) scale(1.08); }
93% { opacity: .47; transform: translateZ(-1px) scale(.98); }
96% { opacity: .52; transform: translateZ(-1px) scale(.95); } /* касание */
100% { opacity: .34; transform: translateZ(-1px) scale(1); }
}
/* ----------------------------------------------------------------------
Д. РЕБРО КАРТЫ НА ПЕРЕВОРОТЕ
----------------------------------------------------------------------
Единственное, чего не хватает твоему перевороту из 30.7, и это дорого
стоит: на 90° карта ИСЧЕЗАЕТ. Плоскость нулевой толщины, смотреть не
на что — а внимание в этот момент максимальное. Полсекунды пустоты
ровно там, где должна быть тайна.
Как устроено: пластинка шириной --k-tol, развёрнутая на 90° поперёк
карты. Пока карта лежит лицом или рубашкой, пластинка стоит к нам
ребром и не видна вовсе. Когда карта доходит до 90°, пластинка
оказывается развёрнута к зрителю — и мы видим торец. Никакой
подгонки по времени не нужно, геометрия делает это сама; опрозрачивание
ниже — только чтобы кромка не мигала на слабых телефонах.
Градиент сверху вниз — свет на столе падает на верхнюю фаску сильнее.
Тот же --k-tol, что у толщины карт в колоде: одна карта из этой
колоды, и толщина у неё та же самая. */
.rsk-karta__in::after {
content: ''; position: absolute; z-index: 4;
top: 1.5%; bottom: 1.5%; left: 50%;
width: var(--k-tol, 3px);
transform: translateX(-50%) rotateY(90deg);
background: linear-gradient(180deg,
#f0dcaf 0%, #c9a86a 16%, #7c6435 52%, #3d3220 84%, #221c12 100%);
box-shadow: 0 0 6px rgba(224, 196, 140, .45);
opacity: 0;
pointer-events: none;
}
/* Живёт только в окно переворота: появляется, когда карта ушла с
плоскости, гаснет, когда встала лицом. Время — твоё, из 30.7. */
.rsk-karta.otkryta .rsk-karta__in::after {
animation: rsk-rebro var(--t-perevorot) linear both;
}
@keyframes rsk-rebro {
0%, 24% { opacity: 0; }
40% { opacity: .85; }
50% { opacity: 1; } /* ровно твои 90° */
66% { opacity: .7; }
84%, 100% { opacity: 0; }
}
/* ----------------------------------------------------------------------
Д2. ЗОЛОТАЯ ПЫЛЬЦА И ЗВЁЗДНЫЕ СИЯНИЯ НА ПОСАДКЕ
----------------------------------------------------------------------
Правка владельца, дословно: «как они переворачиваются и падают на
стол — знаешь, такой немножко золотой пыльцы и под солнцем, можно
немножко звёздочных сияний».
Два разных эффекта, и их нельзя мешать в один.
ПЫЛЬЦА — это воздух, а не блёстки. Она поднимается от стола в тот
миг, когда карта его коснулась, и оседает. Поэтому: частицы мелкие
(полтора-два пикселя), их много, они полупрозрачные, идут ВВЕРХ и
замедляются, как пыль в луче. Два слоя с разным сносом и разной
длительностью — из-за этого не видно, что каждый слой движется
целиком. Если сделать частицы крупными и яркими, получится конфетти,
а не солнечный луч.
СИЯНИЯ — это блики, и их мало. Четыре звёздочки, вспыхивают по
очереди на уже открытом лице, каждая живёт полсекунды. Звезда —
тот же четырёхлучевой знак, что у раздела обучения и на рубашке:
своего значка ради этого не придумываю.
КОГДА. Пыльца — на 85 % переворота, там карта опускается обратно на
стол; это и есть «падают на стол». Сияния — после, по открытому
лицу, вразнобой. Сначала предмет лёг, потом заиграл свет.
Шесть пустых значков: два слоя пыльцы и четыре звёздочки. Своих
псевдоэлементов на это не хватило — у карты заняты все шесть, а
частицам нужны независимые движения. aria-hidden: для читалки здесь
ничего нет.
ЗАПУСК: скрипт вешает .zasiyala на .rsk-poz вместе с .otkryta и
снимает через 2,6 с. Всё остальное делают задержки внутри. */
.rsk-pylca {
position: absolute; inset: -18% -12% -26%;
z-index: 3; pointer-events: none;
opacity: 0;
}
.rsk-poz.zasiyala .rsk-pylca { opacity: 1; }
.rsk-pylca > i { position: absolute; inset: 0; display: block; opacity: 0; }
/* --- Пыльца ---
Частицы нарисованы многослойным градиентом: один слой — один
независимый набор точек. Двигается слой целиком, но точки в нём
стоят вразнобой и гаснут вместе с ним, поэтому «общего хода» глаз
не ловит. Это в разы дешевле, чем два десятка отдельных значков:
на семи картах их было бы полтораста. */
.rsk-pylca__p {
background-repeat: no-repeat;
background-image:
radial-gradient(circle, rgba(255,240,205,.95) 0 40%, transparent 70%),
radial-gradient(circle, rgba(255,232,186,.75) 0 40%, transparent 70%),
radial-gradient(circle, rgba(255,244,216,.9) 0 40%, transparent 70%),
radial-gradient(circle, rgba(224,196,140,.7) 0 40%, transparent 70%),
radial-gradient(circle, rgba(255,240,205,.85) 0 40%, transparent 70%),
radial-gradient(circle, rgba(255,232,186,.6) 0 40%, transparent 70%),
radial-gradient(circle, rgba(255,244,216,.8) 0 40%, transparent 70%),
radial-gradient(circle, rgba(201,168,106,.7) 0 40%, transparent 70%),
radial-gradient(circle, rgba(255,240,205,.7) 0 40%, transparent 70%);
/* Размер от ширины карты, а не в пикселях: на карте 98 px частица
в 3 px это крупная блёстка, на карте 300 — незаметная соринка.
Замерено глазами: ниже 1 % ширины пыльцу не видно вовсе, выше
2 % она перестаёт быть пылью и становится конфетти. */
background-size:
calc(var(--k-w) * .013) calc(var(--k-w) * .013),
calc(var(--k-w) * .009) calc(var(--k-w) * .009),
calc(var(--k-w) * .017) calc(var(--k-w) * .017),
calc(var(--k-w) * .010) calc(var(--k-w) * .010),
calc(var(--k-w) * .014) calc(var(--k-w) * .014),
calc(var(--k-w) * .009) calc(var(--k-w) * .009),
calc(var(--k-w) * .012) calc(var(--k-w) * .012),
calc(var(--k-w) * .016) calc(var(--k-w) * .016),
calc(var(--k-w) * .010) calc(var(--k-w) * .010);
/* Свечение вокруг частиц. Без него пыль на тёмном фоне читается
точками грязи, а не светом в луче. */
filter: drop-shadow(0 0 2px rgba(255, 228, 170, .8));
}
.rsk-pylca__p:nth-child(1) {
/* По вертикали 68–84 %: карта занимает 12–77 % этого слоя, значит
пыль поднимается от её нижней кромки и чуть из-под неё. Замерено —
до правки стояло 78–97 %, и вся пыльца оказывалась НИЖЕ карты,
отдельным облачком у подписи. */
background-position: 12% 76%, 27% 83%, 41% 71%, 55% 84%, 69% 74%,
21% 68%, 48% 79%, 78% 82%, 89% 72%;
}
.rsk-pylca__p:nth-child(2) {
background-position: 19% 81%, 34% 70%, 46% 85%, 60% 74%, 73% 83%,
30% 77%, 63% 67%, 84% 79%, 94% 77%;
}
.rsk-poz.zasiyala .rsk-pylca__p:nth-child(1) {
animation: rsk-pylca-a 1900ms cubic-bezier(.15,.7,.3,1) calc(var(--t-perevorot) * .85) both;
}
.rsk-poz.zasiyala .rsk-pylca__p:nth-child(2) {
animation: rsk-pylca-b 2300ms cubic-bezier(.12,.66,.28,1) calc(var(--t-perevorot) * .85 + 130ms) both;
}
/* Вверх и в стороны, с замедлением: пыль в воздухе тормозит, а не
летит равномерно. Гаснет не разом, а дотлевая. */
@keyframes rsk-pylca-a {
0% { opacity: 0; transform: translate3d(0, 7%, 0) scale(.85); }
10% { opacity: 1; }
55% { opacity: .8; }
100% { opacity: 0; transform: translate3d(-5%, -30%, 0) scale(1.2); }
}
@keyframes rsk-pylca-b {
0% { opacity: 0; transform: translate3d(0, 6%, 0) scale(.88); }
13% { opacity: .9; }
60% { opacity: .62; }
100% { opacity: 0; transform: translate3d(6%, -24%, 0) scale(1.16); }
}
/* --- Звёздные сияния ---
Четырёхлучевая звезда — тот же знак, что на рубашке и в разделе
обучения. Каждая вспыхивает и гаснет за полсекунды, с лёгким
доворотом: без него звезда выглядит наклейкой, а не бликом. */
.rsk-pylca__z {
background-repeat: no-repeat;
background-position: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff1cd' d='M12 0c.6 6.6 4.8 10.8 12 12-7.2 1.2-11.4 5.4-12 12-.6-6.6-4.8-10.8-12-12C7.2 10.8 11.4 6.6 12 0z'/%3E%3C/svg%3E");
}
/* Свечение обязательно: лицо карты — живопись, и золотая звезда без
ореола на ней просто теряется. Замерено глазами на КОРОЛЕ ПЕНТАКЛЕЙ:
без drop-shadow звёздочку в 12 px на картинке не найти. */
.rsk-pylca__z { filter: drop-shadow(0 0 6px rgba(255, 226, 160, .95)); }
.rsk-pylca__z:nth-child(3) { background-size: calc(var(--k-w) * .15) calc(var(--k-w) * .15); background-position: 30% 34%; }
.rsk-pylca__z:nth-child(4) { background-size: calc(var(--k-w) * .10) calc(var(--k-w) * .10); background-position: 69% 25%; }
.rsk-pylca__z:nth-child(5) { background-size: calc(var(--k-w) * .12) calc(var(--k-w) * .12); background-position: 57% 63%; }
.rsk-pylca__z:nth-child(6) { background-size: calc(var(--k-w) * .08) calc(var(--k-w) * .08); background-position: 21% 71%; }
.rsk-poz.zasiyala .rsk-pylca__z {
animation: rsk-siyanie 620ms ease-out both;
}
.rsk-poz.zasiyala .rsk-pylca__z:nth-child(3) { animation-delay: calc(var(--t-perevorot) * .92); }
.rsk-poz.zasiyala .rsk-pylca__z:nth-child(4) { animation-delay: calc(var(--t-perevorot) * .92 + 190ms); }
.rsk-poz.zasiyala .rsk-pylca__z:nth-child(5) { animation-delay: calc(var(--t-perevorot) * .92 + 360ms); }
.rsk-poz.zasiyala .rsk-pylca__z:nth-child(6) { animation-delay: calc(var(--t-perevorot) * .92 + 540ms); }
@keyframes rsk-siyanie {
0% { opacity: 0; transform: scale(.2) rotate(-14deg); }
35% { opacity: 1; transform: scale(1) rotate(0deg); }
100% { opacity: 0; transform: scale(.7) rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) {
.rsk-pylca { display: none; }
}
@media print { .rsk-pylca { display: none; } }
/* ----------------------------------------------------------------------
Е. МНОГО КАРТ — РАЗДЕЛ УБРАН
----------------------------------------------------------------------
Здесь лежал перенос ряда на телефоне со своим зазором (gap: 12px 6px)
и своим расчётом ширины карты. И то и другое переехало:
А ЗАЗОР ПРИШЛОСЬ УБРАТЬ, и это не уборка, а починка. Он перебивал
обнуление column-gap: замер на 390 — три позиции по 113 плюс два
зазора по 6 дают 351 при столе 344, и ряд переносился по две карты
вместо трёх, хотя расчёт был сделан на три. Расстояние между картами
задаёт подкладка позиций (разделы 39/44 сессии 1e), и только она.
Расстояние между РЯДАМИ осталось: это row-gap, он расчёту ширины не
мешает. */
@media (max-width: 559px) {
.rsk-stol { row-gap: 12px; }
}
/* ----------------------------------------------------------------------
Ж. СПОКОЙНОЕ ДВИЖЕНИЕ
----------------------------------------------------------------------
Кому анимация мешает — тот не должен ничего досматривать: колода
лежит, карты просто появляются открытыми. Гашу поимённо только своё:
звёздочка отсюда погасила бы и твои разделы ниже. */
@media (prefers-reduced-motion: reduce) {
.rsk-stopka,
.rsk-stopka.tasuem .rsk-stopka__k,
.rsk-stopka.tasuem .rsk-stopka__k .rsk-karta__ryb::after,
.rsk-stopka__k,
.rsk-karta.vyshla,
.rsk-karta.vyshla::before,
.rsk-karta.vyshla .rsk-karta__ryb::before,
.rsk-karta.otkryta .rsk-karta__in::after {
animation: none !important;
transition: none !important;
}
.rsk-karta.vyshla { opacity: 1; transform: none; }
.rsk-karta.vyshla::before { opacity: .34; transform: translateZ(-1px); }
.rsk-karta__in::after { opacity: 0; }
}
/* На печать движения нет вовсе, а ребро только пачкает лист. */
@media print { .rsk-karta__in::after { display: none; } }
/* ----------------------------------------------------------------------
З. ПАНЕЛЬ 18+ ПЕРЕВОРАЧИВАЕТСЯ И УХОДИТ В КОЛОДУ
----------------------------------------------------------------------
Задание владельца, пик #207, дословно: «нас встречает такая панель,
может её сделать в виде карты или чего-то — дай художнику задание,
а потом чтобы она красиво переворачивалась и уходила в колоду, где
карта дня; это задание дай специалисту по анимации».
ГЛАВНОЕ РЕШЕНИЕ: панель — ЭТО КАРТА, на тех же классах. Не «блок,
похожий на карту», а .rsk-karta с обычными __in / __lico / __ryb
внутри. Из этого само собой выходит всё остальное: переворот идёт
той же механикой, на 90° видно то же ребро, рубашка у неё та же
самая, что у колоды. Поэтому в конце пути подмена и не видна —
панель ложится на колоду своей рубашкой, а рубашка одна и та же
картинка.
Лицом панели работает __lico, поэтому в покое она стоит перевёрнутой
на 180°, как открытая карта. Уход крутит её ДАЛЬШЕ, 180° → 360°, а
не назад: рука, которая кладёт карту в колоду, не отматывает жест
обратно, она его доводит.
ДВА ДВИЖЕНИЯ ИДУТ ВНАХЛЁСТ. Перелёт начинается на 560 мс, когда
переворот ещё не кончился. Если дождаться конца переворота и только
потом трогаться, между ними будет стоп — то самое «резкое», которого
просили не делать. Внахлёст это один жест: повернул и понёс.
ЧТО СЧИТАЕТ СКРИПТ (три числа, всё от живых координат):
--uhod-x, --uhod-y от середины панели к середине колоды карты дня;
--uhod-k во сколько панель ужать: ширина карты колоды,
делённая на ширину панели.
Готовые формулы — внизу, в разделе «что проставить». */
.rsk-stol, .rsk-vhod {
--t-vhod-perevorot: 950ms;
--t-vhod-uhod: 1650ms;
/* Перелёт начинается РОВНО НА РЕБРЕ переворота (450 из 950 — это
47 %), а не после него. Владелец, пик #221: «более плавно».
Раньше стояло 560 при перевороте 880, то есть старт приходился на
64 % — панель успевала показать рубашку и только потом трогалась,
и между двумя движениями возникала пауза. Пауза и читается как
«неплавно»: это два жеста вместо одного.
На ребре же оба движения сшиваются в один: повернул и понёс. */
--t-vhod-nachalo: 450ms;
}
/* В покое панель — открытая карта: лицом к человеку. */
.rsk-vhod__karta .rsk-karta__in { transform: rotateY(180deg); }
.rsk-vhod__karta.uhodit .rsk-karta__in {
animation: rsk-vhod-perevorot var(--t-vhod-perevorot) both;
}
@keyframes rsk-vhod-perevorot {
0% {
transform: rotateY(180deg);
animation-timing-function: cubic-bezier(.45, .02, .62, .5);
}
50% {
transform: rotateY(270deg);
animation-timing-function: cubic-bezier(.3, .5, .3, 1);
}
100% { transform: rotateY(360deg); }
}
/* Ребро — то же самое, что у карт расклада: на 270° панель иначе
исчезает совсем. */
.rsk-vhod__karta.uhodit .rsk-karta__in::after {
animation: rsk-rebro var(--t-vhod-perevorot) linear both;
}
/* Перелёт. Тот же принцип, что у раздачи: один разгон в начале,
ровный ход, одно длинное торможение. Никаких примерок в конце —
место известно заранее, его посчитал скрипт. */
.rsk-vhod__karta.uhodit {
animation: rsk-vhod-uhod var(--t-vhod-uhod) var(--t-vhod-nachalo) both;
}
/* Путь считает скрипт — запасная анимация отключается. Причина та же,
что у полёта карты: в кадрах ниже стоят пользовательские свойства
(--uhod-x, --uhod-k), а такую анимацию браузер не отдаёт видеокарте.
Плюс пять опорных кадров — это ломаная, а не кривая.
Скрипт считает кубическую кривую в 72 кадрах готовыми пикселями и
ведёт размер тем же параметром, что и путь. */
.rsk-vhod__karta.uhodit.letit-sam { animation: none; }
@keyframes rsk-vhod-uhod {
0% {
transform: translate3d(0, 0, 0) scale(1);
animation-timing-function: cubic-bezier(.4, 0, .6, .45);
}
/* Оторвалась: чуть вверх и к зрителю. Карту поднимают, прежде чем
нести, иначе она едет по столу. */
14% {
transform:
translate3d(calc(var(--uhod-x, 0px) * .04), calc(var(--uhod-y, 0px) * .02 - 14px), 0)
scale(calc(1 + (1 - var(--uhod-k, .3)) * .04));
animation-timing-function: linear;
}
44% {
transform:
translate3d(calc(var(--uhod-x, 0px) * .38), calc(var(--uhod-y, 0px) * .3 - 22px), 0)
scale(calc(var(--uhod-k, .3) + (1 - var(--uhod-k, .3)) * .62));
animation-timing-function: linear;
}
70% {
transform:
translate3d(calc(var(--uhod-x, 0px) * .7), calc(var(--uhod-y, 0px) * .63 - 14px), 0)
scale(calc(var(--uhod-k, .3) + (1 - var(--uhod-k, .3)) * .3));
/* Отсюда и до конца — одно торможение, треть всего пути. Карта
подводится к колоде, а не падает в неё. */
animation-timing-function: cubic-bezier(.3, .5, .3, 1);
}
100% {
transform:
translate3d(var(--uhod-x, 0px), var(--uhod-y, 0px), 0)
scale(var(--uhod-k, .3));
}
}
/* Затемнение за панелью уходит вместе с ней, но раньше: к моменту,
когда карта подлетает к колоде, страница уже должна быть видна —
иначе непонятно, куда она летит.
ЗАТЕМНЕНИЕ ОБЯЗАНО ЖИТЬ НА ::before, А НЕ НА САМОМ .rsk-vhod.
Я на этом попался и проверил в браузере: opacity, повешенная на
окно, действует и на панель внутри него — карта гасла вместе с
фоном, и весь перелёт был не виден вовсе. Экран просто темнел, и
всё. Поэтому фон — отдельным слоем под панелью: */
.rsk-vhod.uhodit { pointer-events: none; }
.rsk-vhod.uhodit::before {
animation: rsk-vhod-fon calc(var(--t-vhod-nachalo) + var(--t-vhod-uhod) * .55)
ease-out both;
}
@keyframes rsk-vhod-fon {
0%, 40% { opacity: 1; }
100% { opacity: 0; }
}
/* Колода приняла карту.
До правки #221 здесь было только короткое оседание стопки, и владелец
сказал про весь уход «более плавно». Одна из причин — ПРИЛЁТ НИЧЕМ НЕ
ОТМЕЧЕН: панель доходит до колоды и просто исчезает. У раздачи конец
сделан как «легла» — касание, тень собирается, пыль поднимается; а
тут ничего, и поэтому движение кажется оборванным, а не законченным.
Теперь отмечен тремя вещами сразу, и все три короткие:
оседание стопки — 480 мс, чуть глубже прежнего;
вспышка света из-под колоды — та самая доля секунды, в которую
карта вошла в стопку;
тень на миг темнее — колода стала толще, ей и тень положена гуще.
Это последний кадр, который человек видит перед тем, как начать
пользоваться разделом, и он должен читаться как «принято», а не как
«что-то пропало». */
.rsk-stopka.prinyala { animation: rsk-stopka-prinyala 480ms cubic-bezier(.22,.7,.3,1); }
@keyframes rsk-stopka-prinyala {
0% { scale: 1 1; }
30% { scale: 1.016 .978; }
62% { scale: .997 1.006; }
100% { scale: 1 1; }
}
/* Вспышка из-под колоды в момент приёма. .rsk-stopka::before свободен:
::after занят общей тенью стопки, ::before не занят ничем. */
.rsk-stopka::before {
content: ''; position: absolute; z-index: -2;
left: -30%; right: -30%; top: -22%; bottom: -30%;
border-radius: 50%;
background: radial-gradient(closest-side,
rgba(255, 233, 178, .55), rgba(224, 196, 140, .18) 52%, transparent 100%);
opacity: 0; pointer-events: none;
transform: translateZ(-2px);
}
.rsk-stopka.prinyala::before { animation: rsk-stopka-vspyshka 620ms ease-out; }
@keyframes rsk-stopka-vspyshka {
0% { opacity: 0; transform: translateZ(-2px) scale(.7); }
22% { opacity: 1; transform: translateZ(-2px) scale(1); }
100% { opacity: 0; transform: translateZ(-2px) scale(1.3); }
}
.rsk-stopka.prinyala::after { animation: rsk-ten-prinyala 420ms ease-out; }
@keyframes rsk-ten-prinyala {
0% { opacity: calc(.3 + var(--stopka-n, 7) * .035); }
35% { opacity: calc(.46 + var(--stopka-n, 7) * .035); }
100% { opacity: calc(.3 + var(--stopka-n, 7) * .035); }
}
@media (prefers-reduced-motion: reduce) {
.rsk-vhod__karta.uhodit,
.rsk-vhod__karta.uhodit .rsk-karta__in,
.rsk-vhod__karta.uhodit .rsk-karta__in::after,
.rsk-vhod.uhodit,
.rsk-stopka.prinyala,
.rsk-stopka.prinyala::after { animation: none !important; }
.rsk-vhod.uhodit { opacity: 0; }
}
/* ======================================================================
51. СТОЛ ПЕРЕНОСИТ СТРОКИ ВСЕГДА (20.09.2026)
======================================================================
Найдено сессией 00 на странице «Свой вопрос», подтверждено 71 —
причина его же, он и сказал об этом прямо.
Вывод 71, и он важнее самой правки: перенос не должен зависеть от
класса, который может не приехать. Нет случая, когда уехать за край
лучше, чем перенести. Поэтому `flex-wrap` стоит на самом `.rsk-stol`
и безусловно. */
.rsk-stol { flex-wrap: wrap; }
/* ======================================================================
53. ПЕРВЫЙ ЭКРАН ВИТРИНЫ: КНОПКА СРАЗУ ВИДНА (20.09.2026)
======================================================================
Указка, пик #228. Владелец, дословно: «я открываю своё окно и хочу
сразу получить расклад, а не могу, мне надо скролить вниз; надо
поднять наверх, чтобы при открытии экрана надпись получить карту дня
была доступной сразу, и под ней было видно, что идёт мысль, а то всё
теряется».
ДВЕ ПРИЧИНЫ, И ОНИ РАЗНЫЕ.
1. Колонки обложки стоят по центру. Левая колонка (метка, заголовок,
лид) выравнивалась по середине правой, а правая высотой 1144 —
значит текст начинался с 534. Лечится здесь: на низких экранах
колонки выравниваются по верху. После правки заголовок с 210,
лид кончается на 382.
2. Кнопка лежит В ПРАВОЙ КОЛОНКЕ, под столом. А стол — это полоса
под колоду (300) плюс сама карта (350). Сколько колонки ни
выравнивай, кнопка окажется ниже карты, то есть за сгибом.
Это чинится только разметкой, и правку я отправил тому, кто
держит шаблоны:
МЕСТО ПОД СТРОКУ «ИДЁТ МЫСЛЬ» ЗАРЕЗЕРВИРОВАНО ЗАРАНЕЕ. Её ставит
скрипт, когда модель начинает работать. Если места не держать,
появление строки толкнёт вниз всё, что под ней, — а человек в этот
момент смотрит именно сюда. Поэтому у блока действия своя колонка с
постоянным зазором, а у строки — минимальная высота в одну строку:
пусто до нажатия, не прыгает после.
КАРТУ НЕ УМЕНЬШАЮ. Владелец просил её крупнее (пик #206), и она
остаётся какая есть; в первый экран попадает её верх, и это
правильно — «нажмите, и карта перевернётся» видно сразу.
ПОЧЕМУ УСЛОВИЕ ПО ВЫСОТЕ, А НЕ ПО ШИРИНЕ. У него экран широкий и
низкий. На 1920×1080 та же вёрстка помещается и без правки, а на
2880×1620 тем более. Правило включается там, где высоты мало, —
и не трогает то, что уже утверждено.
*/
@media (min-width: 1280px) and (max-height: 900px) {
.rsk-hero { align-items: start; }
.rsk-hero__stol { margin-top: 0; }
}
/* ----------------------------------------------------------------------
50.1. ВЕСЬ ПЕРВЫЙ ЭКРАН ВЫШЕ (пик #232)
----------------------------------------------------------------------
Он посмотрел на результат #228 и сказал: «этот блок должен начинаться
вот отсюда; задача — когда страница открыта, я вижу всю основу, а это
карта дня и тд; сейчас этого нет, то есть надо поднять примерно вот до
сюда… и эту надпись выше, как только заканчивается полукруг… эту
надпись тоже чуть выше». Тыкал в стол, в крошки, в секцию с кнопкой и
в метку «бесплатно, без регистрации» — то есть поднять надо всё разом,
а не один блок.
Всё уже помещается, но между шапкой и меткой 107 px пустоты, и он на
неё и показывает. Откуда она: 18 px отбивки крошек, 72 px верхнего
поля обложки и 18 px собственного поля шапки.
Срезаю все три, и только на низких экранах. Ни один кегль не тронут —
убран воздух, как он и просил. После правки метка на 116, заголовок
на 142, кнопка на 344, стол кончается на 493: до нижнего края экрана
остаётся почти 300 px, и туда попадает начало следующего блока — та
самая «вся основа».
Числа не круглые, а те, что остаются рабочими: у шапки 12 px — это
ровно половина её прежнего поля, ниже она начинает выглядеть
придавленной; у обложки 24 px — столько же, сколько у неё снизу,
то есть поле становится симметричным.
НИЗКИЙ ЭКРАН НА КОМПЬЮТЕРЕ — ДО 1000 (fix30, 27.09.2026). Ноутбук
1920×919 из мерки владельца (А5) выше 900, и правило его не брало:
на /rasklady/vopros и тематических кнопка «Сформировать вопросы»
стояла на 972–1024 при окне 919, под сгибом. Срезанные здесь поля
дают там 68 px, остальное — раздел «компактный первый экран» страницы
вопросов (`.rsk-hero--vopros`). На телефонах порог прежний, 900;
2133×1021 и 2880×1378 владельца выше 1000 — у них всё как было.
Этот же порог повторяет раздел 80 (аркан, 6а): верх липкого стола
там посчитан от этих полей — меняется здесь, меняется и там. */
@media (max-height: 900px), (min-width: 1024px) and (max-height: 1000px) {
.rsk-top { padding-top: 12px; padding-bottom: 12px; }
.rsk-crumbs { margin-top: 10px; }
.rsk-hero { padding-top: 24px; }
}
.rsk-hero__in .rsk-hero__deystvie {
display: flex;
flex-direction: column;
align-items: start;
gap: 12px;
margin-top: clamp(18px, 2vw, 30px);
}
.rsk-hero__in .rsk-hero__deystvie .btn {
width: auto;
min-width: min(100%, 280px);
}
/* Место под строку модели: одна строка держится всегда. */
.rsk-hero__in .rsk-hero__deystvie .rsk-zhdem__stroka,
.rsk-hero__in .rsk-hero__deystvie .rsk-beda {
min-height: 1.5em;
margin: 0;
}
/* ======================================================================
52. ХВОСТ КОМЕТЫ ЖИВЁТ ОТДЕЛЬНО ОТ ЕЁ ПУТИ (пик #230, 20.09.2026)
======================================================================
Вопрос владельца, дословно:
> «когда летят ккамета и поворачевае у нее ровный хвост онже по
> физике тоже должен слегка менться или нет ?»
ОТВЕТ: должен, и он прав. Хвост кометы направлен НЕ вдоль пути, а
ПРОЧЬ ОТ СОЛНЦА. Его сдувает солнечный ветер и давление света, и
поэтому он не следует за головой, как стрелка компаса за рукой.
Комета может лететь к Солнцу — хвост всё равно будет впереди неё.
Жёсткая прямая, намертво привязанная к направлению движения, — как
раз то, чего в природе не бывает.
ЧТО СТАЛО. Голова идёт ровно по своей прежней прямой — путь не
тронут, на него владелец не жаловался. А хвост за полёт уводит на
8–10°, в ту сторону, в которую уходит направление «от солнца».
ДВЕ ВЕЩИ, БЕЗ КОТОРЫХ ЭТО НЕ РАБОТАЕТ:
1. transform-origin: 100% 50% — то есть ГОЛОВА. Без этого поворот
идёт вокруг середины штриха, и на повороте голова уезжает с
линии: получится, что комета виляет. А вилять должен хвост:
голова — это ядро, оно летит по орбите, и хвост поворачивается
ВОКРУГ НЕГО.
2. Промежуточные кадры стоят РОВНО НА ПРЯМОЙ прежнего пути. Их
координаты посчитаны линейной долей между первым и последним
кадром, а анимация linear — поэтому траектория головы не
изменилась ни на пиксель. Если будете править пути, пересчитайте
и эти точки, иначе комета начнёт двигаться по ломаной.
СКОЛЬКО ИМЕННО УВОДИТЬ. Направление «от солнца» за полёт меняется
сильно: у первой кометы с 15° до 138°, замерено (солнце у нас —
тёплое свечение .rsk-pole::before вверху по центру). Следовать за
ним буквально нельзя: хвост крутился бы на сто двадцать градусов и
это была бы вертушка, а не небо. Владелец просил «слегка». Взято
8–10° — столько, чтобы дальний конец хвоста при длине 260 px ушёл
на 40 px: заметно, если смотреть, и незаметно краем глаза.
Направление увода у каждой кометы своё и считается от её пути:
первая идёт вниз-влево — угол растёт, 152° → 162°;
вторая слева направо — угол падает, 14° → 4°;
третья снизу вверх — угол падает, −32° → −42°.
ЧЕГО ЗДЕСЬ НЕТ. Ни одного нового слоя: те же три штриха (элемент и
два его псевдоэлемента). Ни filter, ни теней не добавлено — вес
кадра не изменился, требование про скорость на EDGE соблюдено.
Второй хвост (у настоящей кометы их два — пылевой дугой и газовый
строго от солнца) я не делал: это ещё один слой на каждую комету, а
на просьбу «слегка» это перебор. Скажете — добавлю.
prefers-reduced-motion не трогаю: комет там нет вовсе, и это верно.
====================================================================== */
.rsk-noch i:nth-child(6),
.rsk-noch i:nth-child(6)::before,
.rsk-noch i:nth-child(6)::after {
/* Поворот вокруг головы, а не вокруг середины штриха. */
transform-origin: 100% 50%;
}
/* Справа налево и вниз. Уходит от солнца — хвост отстаёт по часовой. */
@keyframes rsk-kometa-1 {
0% { opacity: 0; transform: translate(96vw, -12vh) rotate(152deg); }
4% { opacity: .95; }
14% { transform: translate(59.6vw, 22.5vh) rotate(155.5deg); }
24% { opacity: .95; transform: translate(33.6vw, 47.2vh) rotate(159.5deg); }
30% { opacity: 0; transform: translate(18vw, 62vh) rotate(162deg); }
100% { opacity: 0; transform: translate(18vw, 62vh) rotate(162deg); }
}
/* Слева направо, под малым углом. Проходит под солнцем — хвост
разворачивается в другую сторону, против часовой. */
@keyframes rsk-kometa-2 {
0% { opacity: 0; transform: translate(-22vw, 12vh) rotate(14deg); }
3% { opacity: .8; }
13% { transform: translate(29.1vw, 22.2vh) rotate(10deg); }
22% { opacity: .8; transform: translate(64.4vw, 29.3vh) rotate(6deg); }
28% { opacity: 0; transform: translate(88vw, 34vh) rotate(4deg); }
100% { opacity: 0; transform: translate(88vw, 34vh) rotate(4deg); }
}
/* Снизу слева вверх направо — единственная, что поднимается.
Идёт навстречу солнцу, и хвост у неё забегает вперёд. */
@keyframes rsk-kometa-3 {
0% { opacity: 0; transform: translate(-12vw, 104vh) rotate(-32deg) scale(.86); }
4% { opacity: .7; }
14% { transform: translate(23.7vw, 62.5vh) rotate(-35.5deg) scale(.86); }
23% { opacity: .7; transform: translate(46.7vw, 35.8vh) rotate(-39.5deg) scale(.86); }
29% { opacity: 0; transform: translate(62vw, 18vh) rotate(-42deg) scale(.86); }
100% { opacity: 0; transform: translate(62vw, 18vh) rotate(-42deg) scale(.86); }
}
/* ======================================================================
51. РАЗБОР ВСТАЁТ РЯДОМ С КАРТОЙ, А НЕ ПОД НЕЙ (20.09.2026)
======================================================================
Указка, пик #237. Владелец впервые прошёл живой расклад до конца и
сказал: «текст напечатался там, хотя вот тут очень много место
слева». Тыкал в разбор и во всю обложку.
СТАЛО: разбор занимает эту пустоту — он встаёт в левую колонку, под
кнопку, а стол с картой держит правую целиком. Замер после правки на
1790: разбор с y = 502 вместо 829, то есть на 327 px выше — ровно на
ту пустоту, что была. Оговорка едет за ним, в ту же колонку и той же
мерой.
ПРЕДЕЛ СТАВИТСЯ РАДИ СТРОКИ, А НЕ РАДИ КОЛОНКИ. Эта фраза — ключ к
тому, почему разделы 31, 46 и этот не спорят между собой.
Раздел 31 снял предел у разбора, когда тот стоял в колонке 557 px:
там мешала колонка. Раздел 46 держит чтение узким, потому что строка
в 180 знаков не читается: там мешает строка. Здесь колонка 755–1115,
и предел в 68ch нужен ровно по второй причине. Замерено: на 1790 это
668 px и 54 знака в строке при кегле 19, на 2560 — 623 px и 46 при
кегле 22. Обе цифры внутри коридора, за которым строку перестают
дочитывать.
23.09.2026, пик #277: ЧИСЕЛ ВЫШЕ В ФАЙЛЕ БОЛЬШЕ НЕТ, и искать их
здесь не надо. Своей мерки у `.rsk-trakt--pod` не осталось ни на
одной ширине — владелец потребовал разбор во всю ширину. Довод
раздела цел, но стоит теперь на тексте: строку держит
`.rsk-trakt__tekst` в разделе 31.1, одним числом на весь файл.
ТОЛЬКО ТАМ, ГДЕ КАРТА ОДНА. На страницах раскладов в левой колонке
лежит поле рассказа, и пустоты там нет — колонка высокая сама по
себе. Там разбор остаётся под обложкой во всю ширину, как в разделе
31. Ловлю случай через `:has(.rsk-stol--odna)` у обложки.
ТРИ СТРОКИ ОБЪЯВЛЕНЫ ЯВНО, И ЭТО ВАЖНО. У обложки была объявлена
ОДНА строка, поэтому `grid-row: 1 / -1` у стола означало «только
первая строка»: стол не проходил сквозь неявные строки, первая
распухала до его высоты, и разбор уезжал вниз — замерил, y = 829,
ровно как было до правки.
Я сначала обошёл это через `grid-row: 1 / span 99` — и тут же
получил пик #240: «сейчас между этим и этим целая пропасть».
Пропасть была настоящая и моя: `span 99` заставляет сетку создать
девяносто девять строк, и хотя пустые строки нулевой высоты,
ЗАЗОР МЕЖДУ НИМИ остаётся. При `gap: 76px` это 98 × 76 = 7448 px
пустоты. Замерено на живой странице: высота обложки 7777 px при
содержимом, кончающемся на 723.
Поэтому строки объявлены явно — ровно три, по числу того, что
стоит в левой колонке: текст с кнопкой, разбор, оговорка. Тогда
`1 / -1` работает как задумано, лишних зазоров нет.
ЗАЗОР МЕЖДУ СТРОКАМИ СВОЙ. У обложки `gap: 76px` — это расстояние
между КОЛОНКАМИ, между текстом и столом, и оно утверждено. Между
строками левой колонки 76 px много: разбор отрывается от кнопки.
Поэтому строкам задан свой зазор, колоночный не тронут.
ЧЕСТНАЯ ЦЕНА, она названа заранее и не спрятана. Пустота не исчезает
совсем: разбор в 3–4 тысячи знаков выше карты, и справа от его
нижней части остаётся пусто. То есть пустота переехала сверху вниз и
уменьшилась. Если и это не устроит — следующий шаг не вёрстка, а
движение: убирать карту в сторону после прихода разбора. Просить об
этом будет владелец, сами не решаем.
*/
@media (min-width: 1280px) {
/* СТРАНИЦА «КАРТА ДНЯ» ПОЛУЧАЕТ ТОТ ЖЕ СТРОЙ, ЧТО ВИТРИНА.
Пики #250 и #251, его слова: «если у нас есть карта дня, то она
должна быть в правом верхнем углу, так же, как на главном экране;
пусть это будет максимально похожая ситуация» и «это всё надо
применить к раскладу карта дня».
Мешало одно: у этой страницы стоит `.rsk-hero--stolbik`, а он
задаёт `display: block`. Все правила ниже расставляют содержимое по
сетке, а на блоке сетки нет, и они молча не работали. Замер до
правки, 1790×784: обложка одной колонкой, стол во всю ширину 1623,
колода посередине, разбор — под всем этим.
Столбик у страницы не отменяю совсем: он нужен раскладам на пять и
семь карт, там ряд занимает всю ширину. Отменяю только там, где
карта ОДНА, — тогда столу хватает половины, как на витрине. */
.rsk-hero--stolbik:has(.rsk-stol--odna) {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
column-gap: 76px;
}
.rsk-hero--stolbik:has(.rsk-stol--odna) .rsk-hero__stol { margin-top: 0; }
.rsk-hero:has(.rsk-stol--odna) {
grid-template-rows: auto auto auto;
row-gap: 30px;
}
.rsk-hero:has(.rsk-stol--odna) .rsk-hero__in { grid-column: 1; grid-row: 1; }
.rsk-hero:has(.rsk-stol--odna) .rsk-hero__stol {
grid-column: 2;
grid-row: 1 / -1;
align-self: start;
}
.rsk-hero:has(.rsk-stol--odna) .rsk-trakt--pod {
grid-column: 1; grid-row: 2;
}
.rsk-hero:has(.rsk-stol--odna) .rsk-ogovorka--pod {
grid-column: 1; grid-row: 3;
}
}
/* ======================================================================
52. ШЕСТЬ ТАРИФОВ НА ВИТРИНЕ (20.09.2026)
======================================================================
Указка, пики #231 и #239. Владелец: «надо заменить, не написать.
Экспресс расклад один вопрос… потом мини расклад до пяти вопросов…
так же, как у моей жены сделать… и потом расклад Таро… дальше, ниже
пишем расклад на отношения один вопрос, мини-расклад на отношения
пять вопросов и полноценный расклад на отношения». Позже, пик #240:
«ни в одном раскладе у нас нет 20 вопросов, максимум 10» — поэтому
третья ступень десять, а не 10–12.
СТРОЙ ВЗЯТ У НЕЁ ЦЕЛИКОМ. «Так же, как у моей жены» выполнено
буквально: карточки — это `.tariffs__grid` и `.tariff` из site.css,
те же самые, что на главной. Своего третьего вида я не рисовал.
Здесь только сетка раздела и три поправки на то, что карточка втрое
уже, чем на главной.
ДВА СЕМЕЙСТВА ПОКАЗАНЫ РЯДОМ, А НЕ ЗАГОЛОВКАМИ. Три в ряд: верхний
ряд — вопросы на любую тему, нижний — вопросы про отношения. Слов
для названий семейств владелец не давал, а придумывать их нельзя
(правило 1). Строй справляется без них.
ТРИ ПОПРАВКИ НА УЗКУЮ КАРТОЧКУ, все замерены:
1. Имя 20 px вместо 24. На 1440 карточка 380 px против 1100 на
главной; имя в 24 рядом с ценой не встаёт и ломается на вторую
строку.
2. Метка «бесплатно» мельче: в полную величину она занимала 98 px из
330 и добивала имя «Экспресса» до второй строки.
3. Шапке отдано 56 px под две строки имени независимо от того,
сколько их там. Замер, где начинается описание внутри карточки:
было 322 / 286 / 286 в верхнем ряду, стало 302 / 302 / 302.
Нижний ряд 310 / 310 / 342 — у «Полноценного расклада на
отношения» имя честно занимает три строки, это самое длинное
название из шести.
ПЛАШКИ «ЧАЩЕ ВСЕГО ВЫБИРАЮТ» ЗДЕСЬ НЕТ, хотя в базе она у этого
тарифа стоит. В базе она правдива — это про живую работу Альбины,
которую действительно чаще всего заказывают. У нас это было бы
утверждение про модель, которую пока не выбрал никто. Источник
законный, а по сути неправда — поэтому не берём. Захочет — скажет.
*/
.rsk-tarify {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
margin: 26px 0 0;
max-width: var(--rsk-uzko, 1616px);
}
/* ПО ЦЕНТРУ НА ШИРОКИХ ЭКРАНАХ (26.09.2026, Указка #300).
Владелец ткнул в эту сетку на 127.0.0.1:8031/rasklady и на прямой
вопрос «ставить сетку витрины по центру?» ответил «да». Это решение
именно для .rsk-tarify — раздел 30 про ЛЕВЫЙ КРАЙ выше касается
других блоков (.rsk-hero__in, .rsk-trakt, .rsk-vo, .rsk-svitok) и не
отменяется: там ступенчатый левый край был причиной, здесь владелец
просто попросил центр для этой сетки.
margin-inline: auto ничего не меняет, пока сетка занимает всю ширину
`.rsk` (везде до 1600 px и в две колонки на 1200–1439) — переопределять
узкие точки незачем. Разница видна там, где у `.rsk` снят предел
(раздел 30, 1600 px+) и своя ширина сетки 1616 px становится меньше
контейнера: тогда пустое поле уходит поровну на оба края, а не только
вправо.
Заголовок «Расклады» над сеткой (28.09.2026, мерка владельца А1, А2;
руководитель раздела) — по той же оси: та же ширина и то же
`margin-inline: auto`, что у сетки, поэтому его левый край встаёт на
левый край сетки (на 2133 — 171, на 2880 — 240, а не 76 и 92). Пока
сетка во всю ширину, не меняется ничего. Селектор — «заголовок, за
которым сразу сетка»: на странице он один, на главной раздела. */
.rsk-tarify,
.rsk-h2:has(+ .rsk-tarify) { margin-inline: auto; }
/* СТУПЕНИ ПОСТАВЛЕНЫ ПО ЗАМЕРУ КОНТЕЙНЕРА, А НЕ ПО КРУГЛЫМ ЧИСЛАМ.
Ширина содержимого прыгает не там, где кажется: до 1180 контейнер
680 px, дальше 1030, потом 1192 и 1616. Померил, сколько при этом
достаётся карточке и во сколько строк встаёт имя (шесть цифр —
шесть карточек):
900 одна колонка 680 111111
1000 две 329 211223 ← хуже, чем одна
1200 две 504 111111
1440 три 380 111223
1920 три 521 111112
Отсюда: до 1200 колонка одна, 1200–1439 две, от 1440 три. Двух по
329 быть не должно — там имя ломается у четырёх названий из шести, и
карточки перестают отличаться друг от друга с одного взгляда.
До 1024 фотографий в карточках нет вовсе (их включает site.css), так
что одна колонка там — это тот же список цен, что у тарифов на
главной на телефоне. */
@media (min-width: 1200px) {
.rsk-tarify { grid-template-columns: 1fr 1fr; gap: 22px; }
/* БЕЗ ПУСТОЙ КЛЕТКИ (28.09.2026, мерка владельца А1, А2; руководитель
раздела). Карточек девять, в две колонки ряды выходили [2,2,2,2,1],
и справа от «Угадай аркан» оставалась пустая клетка. Последняя
карточка, если она нечётная, встаёт на весь ряд. Три колонки уже с
1200 не взяты: карточка 333 px — уже 380, с которых здесь
начинаются три колонки (1440), и «Расклад да / нет» ломается на две
строки. С 1440 (три колонки, три полных ряда) карточка снова в
своей клетке — правило ниже. */
.rsk-tarify > .tariff:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* ТРИ В РЯД НАЧИНАЮТСЯ С 1200, А НЕ С 1024, И ЭТО ЗАМЕР.
На 1024 три карточки дают 276 px каждая, и четыре названия из шести
ломаются на две строки — с одного взгляда карточки перестают
отличаться друг от друга. Между 700 и 1200 лучше две по 475: имя в
строку, ряд читается.
На 1200 карточка 340, на 1920 — 521. Семейства при этом всё равно
встают рядами: три в ряд от 1200, по две — двумя парами, и порядок
в разметке сохраняет ступени. */
@media (min-width: 1440px) {
.rsk-tarify { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.rsk-tarify > .tariff:last-child:nth-child(odd) { grid-column: auto; }
.rsk-tarify .tariff__head { flex-wrap: nowrap; align-items: start; min-height: 56px; }
.rsk-tarify .tariff__name { min-width: 0; font-size: 20px; }
.rsk-tarify .tariff__price { flex: 0 0 auto; }
}
/* ШИРЕ НА БОЛЬШИХ ЭКРАНАХ (27.09.2026, мерка владельца А1, А4, З1).
Один `margin-inline: auto` поставил сетку по центру, но она осталась
1616 px: на 2880 это 56 % экрана и по 632 px пустоты с боков — «хули
тут так много места». Теперь сетка держит ту же долю экрана, что на
1920 (1616 из 1920, 84 %), и растёт до потолка широких блоков
`--rsk-shir` (раздел 46 «Ширина разнесена по смыслу»: каталог
раскладов там в списке «во всю ширину», потолок 2400 — чтобы карточка
не стала афишей).
окно 1920 сетка 1616 (84 %) карточка 521 — как было
окно 2133 сетка 1792 (84 %) карточка 580
окно 2880 сетка 2400 (83 %) карточка 783
Колонок по-прежнему три: карточек девять, три полных ряда (А2). До
~1924 px 84vw меньше 1616, и ширина не меняется: ноутбук и телефоны не
задеты. `--rsk-shir` и `--rsk-uzko` объявлены с 1600 (раздел 46). */
@media (min-width: 1600px) {
.rsk-tarify,
.rsk-h2:has(+ .rsk-tarify) { max-width: min(var(--rsk-shir), max(var(--rsk-uzko), 84vw)); }
}
.rsk-tarify .tariff__price .rsk-metka { font-size: 10px; padding: 4px 10px; }
/* Кегль в плитках (25.09.2026, правило 0: основной текст не мельче 16).
Описание плитки на телефоне брало общие с главной 15 px из site.css
(.tariff__short) — поднято до 16 только здесь; от 640 site.css и так
даёт 16, 17 и 18.
Кнопка «Открыть» — подпись прописными, как все .btn раздела, и крупнее
них быть не должна: общие 12 px из .tariff__pick выровнены по .btn —
14 px (site.css), от 2200 — 15 px (ступень 2200 в начале этого файла). */
@media (max-width: 639px) {
.rsk-tarify .tariff__short { font-size: 16px; }
}
.rsk-tarify .tariff__pick { font-size: 14px; }
@media (min-width: 2200px) {
.rsk-tarify .tariff__pick { font-size: 15px; }
}
/* ======================================================================
54. ТЕЛЕФОН В АЛЬБОМЕ: ПОТОЛОК КАРТЫ ПО ВЫСОТЕ (20.09.2026)
======================================================================
Весь расчёт ширины карты (раздел 50б) считает только ШИРИНУ. На
широком экране высоты всегда хватало, а повёрнутый телефон — это
923 × 411: ширины вдоволь, высоты почти нет.
Что выходит без потолка, выкладка 71 для Pixel 9 в альбоме:
карта по ширине 172
полоса под колоду 1,68 × 172 + 16 = 306
высота карты 1,5 × 172 = 259
низ первого ряда 564 при экране 411
То есть колода занимает три четверти экрана, а карт не видно вовсе:
человек повернул телефон и смотрит в пустоту.
Потолок по высоте — та же выкладка, что у карты дня на телефоне:
1,68k под полосу + 1,5k карта + ~32 подпись = 3,18k + 48 должно
влезть в высоту. На 411 даёт карту 113, и всё помещается.
`svh`, а не `vh`, намеренно: на телефоне адресная строка то есть, то
нет, и `vh` считает по большему состоянию — карта оказалась бы выше
экрана ровно тогда, когда строка видна.
ЧЕСТНО ПРО ПРОИСХОЖДЕНИЕ ЧИСЕЛ: это РАСЧЁТ, а не замер. 71 поднял
Android-стенд (`Telefon_Pixel9_API36`), но проверить не смог: его
страница-стенд обрезает высокий расклад, а настоящая страница
вопросов в это время правилась. Правило положено потому, что оно
только ОГРАНИЧИВАЕТ и хуже сделать не может. Глазами на повёрнутом
телефоне — проверить и записать сюда замер.
====================================================================== */
@media (max-height: 560px) {
.rsk-stol--tesno { --k-max: min(215px, calc((100svh - 48px) / 3.2)); }
.rsk-stol--odna { --k-max: min(190px, calc((100svh - 48px) / 3.2)); }
}
/* ======================================================================
55. ДЫМ ПО ВСЕЙ ОБЛОЖКЕ, А НЕ В ОДНОМ УГЛУ (пик #242, 20.09.2026)
======================================================================
Владелец, дословно:
> «тут очень крутой дым но почему тоон сьехал и есть во дном месте
> должен быть везде наверное больше меньше просто и динамичный»
ПЕРВОЕ, ЧТО НАДО ЗНАТЬ: дым на обложке — это ТРИ РАЗНЫЕ ВЕЩИ, и
только одна из них моя. Разобрал по порядку, прежде чем трогать.
1. САМА ФОТОГРАФИЯ. `.rsk-hero::before`, картинка oblozhka.webp.
Дым нарисован в ней, и нарисован вокруг колоды — справа.
Посажена она почти точно: 1916×821 в коробку 1753×739, обрезано
снизу 12 px, это два процента. Значит «съехал» — НЕ про обрезку,
картинка видна целиком. Просто дым в ней с одной стороны.
2. ЗАТЕМНЕНИЕ ПОВЕРХ ФОТОГРАФИИ. Там же, первым слоем, лежит
вертикальный градиент: непрозрачный сверху, 52 % на 9 % высоты,
25 % на 42 % и СНОВА НЕПРОЗРАЧНЫЙ к низу. То есть нижнюю половину
обложки он гасит в сплошной цвет вместе с дымом. Дым остаётся
видимым в полосе примерно от 9 % до 70 % высоты — отсюда вторая
половина ощущения «в одном месте».
ЧТО СТАЛО. Семь пятен вместо четырёх, все семь внутри обложки:
три слева, четыре справа. Плотность разная — от .040 до .070, это
и есть его «больше меньше».
ПИК ПЛОТНОСТИ СТАЛ МЕНЬШЕ: .070 против .095. Дыма больше по площади,
но нигде не ярче, чем было, — требование «не делать ярче» соблюдено
не на словах, а числом.
НОВЫХ СЛОЁВ НЕТ НИ ОДНОГО. Те же три элемента (сам `
` и два его
псевдоэлемента), пятна добавлены в тот же `background-image`. Вес
кадра не изменился: градиенты рисуются один раз, движение идёт
только через `transform`. Некомпозитных анимаций не добавлено —
это принципиально, в разделе 27 уже чинили ровно такую беду по его
же замечанию «двигается по пиксельно, глаз режет».
РАЗМЕР И ПОЛОЖЕНИЕ ПЛИТКИ УПРОЩЕНЫ до 100% / 0 0 намеренно. Раньше
было `background-size: 130%` и `background-position: 10% 20%`, и
тогда центр пятна считался как «смещение плитки плюс положение
внутри плитки» — три величины на одно пятно, и понять по коду, куда
пятно попадёт, было нельзя. Теперь центр пятна — это ровно то, что
написано в `at X% Y%`. Правится глазами, а не выкладкой.
ДИНАМИЧНОСТЬ. Три группы по-прежнему идут с разными кругами
(96, 137 и 113 секунд) и в разные стороны — это сделано раньше и я
это не трогаю. Но у самого слоя размах был велик: `translate ±3%` и
`scale` до 1.14. Когда два заметных пятна лежат рядом и вместе
уезжают на 3 % и раздуваются на 14 %, это читается как «съехал»,
а не как «дышит». Убавил до ±2 % и 1.06: теперь группы расходятся
между собой сильнее, чем каждая уезжает сама, — и движение читается
как клубление, а не как сползание.
prefers-reduced-motion не трогаю: там анимации уже погашены. */
.rsk-noch i:nth-child(5) {
background-image:
radial-gradient(40% 30% at 16% 32%, rgba(224, 196, 140, .070), transparent 72%),
radial-gradient(36% 30% at 52% 66%, rgba(201, 168, 106, .055), transparent 72%),
radial-gradient(34% 28% at 86% 38%, rgba(224, 196, 140, .060), transparent 74%);
background-size: 100% 100%;
background-position: 0 0;
}
/* Псевдоэлементы вынесены на inset: -12%, поэтому их система координат
на 24 % шире слоя. Проценты ниже пересчитаны под неё: чтобы пятно
легло в точку L слоя, пишем (L + 0.12) / 1.24. Без пересчёта два
пятна уезжали за край обложки — проверено, так и было. */
.rsk-noch i:nth-child(5)::before {
background-image:
radial-gradient(32% 26% at 64.5% 67.7%, rgba(150, 190, 210, .040), transparent 74%),
radial-gradient(30% 26% at 33.9% 50%, rgba(224, 196, 140, .045), transparent 74%);
background-size: 100% 100%;
background-position: 0 0;
}
.rsk-noch i:nth-child(5)::after {
background-image:
radial-gradient(28% 24% at 80.6% 50%, rgba(201, 168, 106, .050), transparent 74%),
radial-gradient(26% 22% at 45.2% 34.7%, rgba(224, 196, 140, .040), transparent 74%);
background-size: 100% 100%;
background-position: 0 0;
}
@keyframes rsk-tuman {
0%, 100% { transform: translate3d(-2%, 0, 0) scale(1); }
50% { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
}
/* ======================================================================
53. СТУПЕНИ В КАРТОЧКЕ И ВОЗВРАЩЁННЫЙ БЛИК (20.09.2026)
======================================================================
Витрина стала семью карточками по темам, а не шестью по тарифам:
у каждой темы внутри свои ступени. Строку ступеней ставит шаблон
(«1 вопрос — бесплатно · 5 — 200 ₽ · 10 — 500 ₽»), правил у неё не
было. Плюс пик #243: «тут была крутая раньше анимация, её надо
вернуть».
----------------------------------------------------------------------
53.1. СТРОКА СТУПЕНЕЙ
----------------------------------------------------------------------
Она стоит в шапке карточки сразу после описания и по смыслу его
продолжает: описание говорит, про что расклад, ступени — сколько
вопросов и почём. Поэтому не отбивается ни чертой, ни рамкой, а
просто идёт следующей строкой, тише описания.
14 px — не нарушение правила про 16. Это подпись, а не основной
текст, и в разделе так уже живут `.rsk-ogovorka` (14–15) и имя
позиции `.rsk-poz__p` (clamp от 14). Цена крупно стоит рядом, в
`.tariff__price`; здесь она повторяется мелко, как расшифровка.
Шрифт НЕ Manrope, хотя строка похожа на подпись: Manrope в этом
проекте разрешён только на подписях ПРОПИСНЫМИ (правило 0), а тут
строчные и цифры. Остаётся Source Serif 4, как у всего остального.
Точки-разделители в тексте ставит шаблон, я их не трогаю: это его
слова, а не моя пунктуация.
----------------------------------------------------------------------
53.2. БЛИК ВЕРНУЛСЯ
----------------------------------------------------------------------
«Была крутая раньше анимация» — это карточки каталога, `.rsk-kart`.
У них на наведении было три вещи (строки 1273–1316):
1. веер мини-рубашек — семь крошечных карт раскрывались веером;
2. косая полоса света, проходящая по карточке;
3. подъём на 3 px и тень глубже.
Что из этого есть у новых карточек и что я вернул:
3 — уже есть, приехало вместе с `.tariff` из site.css
(`translateY(-3px)` и тень на наведении);
там же есть наплыв фотографии `scale(1.05)`, которого у
старых карточек не было вовсе;
2 — НЕ БЫЛО, вернул. Тот же градиент, тот же угол 112°, та же
прозрачность .07 и та же длительность .45s — байт в байт из
правила `.rsk-kart::after`. Владелец сказал «была крутая
раньше», значит хочет ту же, а не новую;
1 — НЕ ВЕРНУЛ, и это осознанно. Веер жил на разметке `.rsk-mini`
с семью значками, и число значков равнялось числу КАРТ в
раскладе. У карточки темы карт нет — у неё ступени по числу
ВОПРОСОВ. Значки пришлось бы либо выдумать, либо поставить
десять штук на старшую ступень. Если владелец скажет, что
не хватает именно веера, — верну, но тогда нужно решить, что
эти значки означают, а это не моё решение.
Скругление у блика 14 px — ровно то, что стоит у карточки в
`.tariffs__grid`. У старых карточек было 12, и если поставить 12
здесь, полоса вылезет за угол.
Своего `::after` у `.tariff` нет — проверил в обоих файлах, свободен.
*/
.rsk-stupeni {
display: block;
margin-top: -4px;
font-size: 14px;
line-height: 1.5;
color: var(--ink-55);
}
@media (min-width: 2200px) {
.rsk-stupeni { font-size: 16px; }
}
.rsk-tarify .tariff { position: relative; }
.rsk-tarify .tariff::after {
content: '';
position: absolute; inset: 0;
pointer-events: none;
clip-path: inset(0 round 14px);
background: linear-gradient(112deg,
transparent 38%, rgba(255, 241, 208, .07) 47%, transparent 58%);
opacity: 0;
transition: opacity .45s ease;
}
@media (hover: hover) {
.rsk-tarify .tariff:hover::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.rsk-tarify .tariff::after { transition: none; }
}
/* ======================================================================
54. ХОД КАРТЫ ДНЯ: НАДПИСЬ УХОДИТ, МЕСТО ОСВОБОЖДАЕТСЯ (20.09.2026)
======================================================================
Указка, пики #238, #244 и #248. Владелец просил дважды, третий раз —
с раздражением: «ты так и не сделал ту анимацию, которую я просил
2 раза тебя». Его описание хода, дословно:
«при нажатии клавиши пропадает красивая надпись вся вот тут; потом
колода переезжает вот сюда; а карта достаётся вот тут; и вот этот
текст начинается отсюда и идёт практически до всей карты; и так
чтобы страница вниз не уходила»
Ход поделён на троих: КОГДА — скрипт (`data-scena` на столе:
`zhdet` → `idet` → `gotovo`), ГДЕ СТОИТ КОЛОДА — раздел 56,
КАК ВЫГЛЯДИТ — этот раздел.
Здесь только первая часть хода: уход надписи и освобождение места.
Место, куда встаёт разбор, уже сделано разделом 51 — он там и стоит,
в левой колонке; нового ему не нужно, нужно лишь чтобы над ним
перестали занимать высоту метка, заголовок и лид.
ТРИ ЭЛЕМЕНТА, И НИ ОДНИМ БОЛЬШЕ: `.rsk-nad`, `.rsk-h1`, `.rsk-lead`.
Кнопка остаётся — он сказал отдельно: «кнопку оставить тут окей».
Оговорка и заголовок разбора тоже остаются.
ПОЧЕМУ УХОД В ДВА ТАКТА, А НЕ ПРОСТО `display: none`.
Если убрать надпись разом, кнопка под ней прыгнет вверх на 170 px в
один кадр — а человек в этот момент смотрит именно на кнопку, он её
только что нажал. Поэтому сначала надпись гаснет и чуть уходит вверх
(0,3 с), и только потом схлопывается её высота (0,45 с). Кнопка
уезжает плавно, как будто её подтянуло.
МЕРА ВЫСОТЫ 240 px ВЗЯТА С ЗАМЕРА, А НЕ С ПОТОЛКА. Схлопнуть
`height: auto` переходом нельзя, поэтому схлопывается `max-height`,
и её начальное значение должно быть не меньше настоящей высоты,
иначе надпись обрежется ещё до начала хода. Замерено на живой
витрине: метка 14, заголовок 63, лид 92 — самый высокий из трёх 92,
на 390 лид доходит до 190. Взял 240: выше настоящей высоты на всех
ширинах, и при этом не настолько, чтобы первая половина схлопывания
прошла вхолостую.
`overflow: hidden` нужен схлопыванию: без него текст вылезает за
свою уменьшающуюся коробку и наезжает на кнопку.
ОБА СОСТОЯНИЯ, А НЕ ТОЛЬКО `idet`. `gotovo` ставится и когда разбор
пришёл, и когда его честно не будет (занято, на сегодня уже был).
В обоих случаях карты человек уже видел, и возвращать надпись
назад нельзя — иначе страница дёрнется обратно. Поэтому селектор
ловит оба значения.
БЕЗ ДВИЖЕНИЯ — ТО ЖЕ САМОЕ. При `prefers-reduced-motion` надпись
просто исчезает: результат тот же, хода нет.
*/
@keyframes rsk-nadpis-uhodit {
0% { opacity: 1; transform: none; max-height: 240px; }
40% { opacity: 0; transform: translateY(-10px); max-height: 240px; }
100% { opacity: 0; transform: translateY(-10px); max-height: 0;
margin-block: 0; }
}
.rsk-hero:has([data-scena="idet"]) .rsk-nad,
.rsk-hero:has([data-scena="idet"]) .rsk-h1,
.rsk-hero:has([data-scena="idet"]) .rsk-lead,
.rsk-hero:has([data-scena="gotovo"]) .rsk-nad,
.rsk-hero:has([data-scena="gotovo"]) .rsk-h1,
.rsk-hero:has([data-scena="gotovo"]) .rsk-lead {
overflow: hidden;
animation: rsk-nadpis-uhodit .75s cubic-bezier(.4, 0, .2, 1) both;
}
@media (prefers-reduced-motion: reduce) {
.rsk-hero:has([data-scena="idet"]) .rsk-nad,
.rsk-hero:has([data-scena="idet"]) .rsk-h1,
.rsk-hero:has([data-scena="idet"]) .rsk-lead,
.rsk-hero:has([data-scena="gotovo"]) .rsk-nad,
.rsk-hero:has([data-scena="gotovo"]) .rsk-h1,
.rsk-hero:has([data-scena="gotovo"]) .rsk-lead {
animation: none;
display: none;
}
}
/* ======================================================================
56. ВИТРИНА: КОЛОДА СПРАВА, КАРТА СЛЕВА (пик #238, 20.09.2026)
======================================================================
Владелец, дословно: «надо поменять колоду и карту местами: колода
"На сегодня" тут, а карта — здесь; а само описание карты должно
начаться вот тут ("Колода уже перед вами…"), где-то тогда всё влезет
и будет понятно».
ПРАВКА — ЗЕРКАЛО, И АРИФМЕТИКА НЕ МЕНЯЕТСЯ НИ НА ЙОТУ. Полоса под
колоду была слева (padding-left), стала справа (padding-right), той
же ширины. Сама колода стояла на 0.875 ширины карты от левого края
стола, встала на столько же от правого.
ПОЧЕМУ ЭТО ВАЖНО СКАЗАТЬ ОТДЕЛЬНО. 1e предупредила, и справедливо:
владелец весь вечер просит карту КРУПНЕЕ (#206, #234), и если
перестановка съест ширину — будет откат к тому, на что он уже дважды
жаловался. Не съедает: ширина карты входит в расчёт через --polosa,
а --polosa от стороны не зависит.
СОСТОЯНИЕ ОЖИДАНИЯ НЕ ТРОГАЮ. Пока разбор считается, колода лежит
посреди стола (.rsk-stopka--sredina) — это первый экран, и владелец
его только что принял («кнопку оставить тут окей»). Поэтому правило
ниже написано через :not(): меняется место, КУДА колода уезжает, а
не то, где она ждёт. Ехать она теперь будет вправо, а карта выходить
влево — жест тот же, зеркальный.
ТОЛЬКО ВИТРИНА. Раскладам на 3–7 карт колода по-прежнему слева: там
карты идут слева направо, как текст, и колода в начале строки. Он
про них не говорил, а менять непрошеное в этом проекте нельзя.
====================================================================== */
.rsk-stol--odna {
padding-left: 0;
padding-right: calc(var(--k-w) * 1.75);
}
.rsk-stol--odna .rsk-stopka:not(.rsk-stopka--sredina) {
left: calc(100% - var(--k-w) * .875);
}
/* Телефон: там колода над картой, а не сбоку, и менять местами нечего.
Возвращаем полосу сверху и отменяем боковую. */
@media (max-width: 559px) {
.rsk-stol--odna { padding-right: 0; }
.rsk-stol--odna .rsk-stopka:not(.rsk-stopka--sredina) { left: 50%; }
}
/* ======================================================================
55. СТРАНИЦА ВОПРОСОВ: ГОТОВЫЕ ВОПРОСЫ И КОЛОДА ВО ГЛАВЕ (20.09.2026)
======================================================================
Указка, пик #252, дословно: «ужасное оформление, что это за пиздец,
прости меня. Карта колоды всегда наверху, во главе стола». Выделил
блок готовых вопросов и всю обложку страницы.
----------------------------------------------------------------------
55.1. ДЕСЯТЬ ГОТОВЫХ ВОПРОСОВ
----------------------------------------------------------------------
Разметка есть, правил не было ни одного: `.rsk-gotovye` с заголовком
и списком из десяти `.btn.btn--ghost`. А `.btn` в site.css — это
кнопка высотой 52 px, полями по 32 и прописными вразрядку. Десять
таких кнопок столбиком — это метр экрана из одинаковых прямоугольных
плашек. Он прав дословно.
СТАЛО: не кнопки, а строчки-камушки. Вопрос — это фраза, а не
команда, поэтому у них человеческий кегль, строчные буквы и никакой
разрядки; форма скруглённая, чтобы не спорить с прямыми углами
карточек и полей ввода. Ложатся в несколько рядов и занимают
столько места, сколько нужно словам.
ЧТО ИМЕННО ПЕРЕБИВАЕТСЯ У `.btn` и почему каждое:
min-height 52 → auto десять штук по 52 это 520 px пустоты;
padding 0 32 → 9/16 поля были рассчитаны на кнопку в строке;
letter-spacing .18em → 0 вразрядку читается как надпись, а не
как вопрос, который можно прочесть;
text-transform → none вопрос прописными выглядит как заголовок;
font-size 14 → 15 это текст для чтения, а не подпись.
ВЫКЛЮЧЕННЫЕ НЕ ГАСНУТ В НОЛЬ. Кнопки стоят `disabled`, пока не дано
согласие. Если пригасить их как обычную выключенную кнопку (раздел
36, прозрачность .45), весь блок выглядит сломанным ещё до того, как
человек что-то сделал. Поэтому здесь они лишь чуть тише: видно, что
это список, но видно и что он пока не нажимается.
ЗАГОЛОВОК В СКОБКАХ — ЭТО ЗАГЛУШКА, И ОНА НАРОЧНО ВИДНА. Слов
владельца для него нет, придумывать нельзя (правило 1). Место под
заголовок выглядит задуманным: своя строка, свой воздух. Придёт
слово — заглушка заменится текстом, вёрстка не поедет.
----------------------------------------------------------------------
55.2. КОЛОДА НАВЕРХУ, ВО ГЛАВЕ СТОЛА
----------------------------------------------------------------------
«Карта колоды всегда наверху, во главе стола» — читаю как правило,
а не как замечание про одну страницу.
На 1280×720 сначала не хватало 10 px — кнопка кончалась на 730 при
экране 720. Добавлена ступень по высоте: на низких экранах зазор
между заголовком и панелью 10 вместо 20, поля панели чуть меньше.
Кегли не тронуты, убран воздух. */
/* --- 55.2. ОБЛОЖКА СТРАНИЦЫ ВОПРОСОВ — ТЕМ ЖЕ СТРОЕМ, ЧТО ВИТРИНА ---
ПЕРЕПИСАНО 20.09.2026, пик #263. Владелец на этой самой странице:
«это вообще какой-то пиздец, что за мини карты… вот это всё херня
полная, сделай пожалуйста везде как на главной странице, я прошу
тебя это раз 5». Выделил стол и блок «Опишите ситуацию / Наговорить».
ЧТО СТАЛО: ровно строй витрины. Слева заголовок, лид, поле рассказа,
готовые вопросы и кнопка; справа стол с колодой во главе, от верха
обложки. Панель перестаёт быть панелью — `display: contents`, и её
три части становятся клетками обложки. Раньше так было нельзя: у
панели была рамка, которая бы пропала. Теперь рамка и не нужна — на
главной её нет, а он просит «как на главной».
СТОЛ СЧИТАЕТСЯ КАК НА СТРАНИЦАХ РАСКЛАДОВ, теми же двумя числами
(раздел 57.2): полоса под колоду сверху, а не сбоку, и три карты в
ряду. Замер после правки, 1790×784: стол 792 — ровно как на витрине,
колода 222, карта 222 в обычном ряду и 300 в тесном, ряды по три,
за край не выходит ничего.
1600, А НЕ 1280, И ЭТО ТОТ ЖЕ ЗАМЕР, ЧТО У РАЗДЕЛА 57. В половине
обложки стол получает: при 1280 — 500 px и карту 125, при 1600 — 695
и 182, при 1790 — 792 и 222. Ниже 1600 карта выходит мельче, чем в
один столбец, где столу достаётся вся ширина. Поэтому до 1600
страница остаётся как была: заголовок, панель, стол под ней. */
/* НИЖЕ 1600 — СТОЛБИКОМ, И ЭТО ТОТ ЖЕ ВЫБОР, ЧТО У РАЗДЕЛА 57.
Замер ряда из пяти карт на этой странице:
как было до правки стол 547, карта 30 ← «мини карты» дословно
строй витрины стол 477, карта 117
столбиком стол 1050, карта 300
В половине обложки при таких ширинах столу не хватает места, поэтому
до 1600 обложка идёт в одну колонку, панель — в один столбец, а стол
получает её целиком. Вид не витринный, зато карта не мельче
телефонной. */
@media (min-width: 1280px) and (max-width: 1599px) {
.rsk-hero:has(.rsk-hero__forma) {
grid-template-columns: minmax(0, 1fr);
row-gap: 20px;
}
.rsk-hero:has(.rsk-hero__forma) .rsk-hero__in { max-width: 68ch; }
.rsk-hero__forma {
max-width: none;
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.rsk-hero__forma > [data-vp-shag] { grid-column: 1; }
.rsk-hero__forma > [data-vp-shag="stol"] { margin-top: 22px; }
}
@media (min-width: 1280px) and (max-width: 1599px) and (max-height: 760px) {
.rsk-hero:has(.rsk-hero__forma) { row-gap: 10px; }
.rsk-hero__forma { padding-top: 18px; padding-bottom: 16px; }
}
/* Числа стола — от 560, а не от 1600, и это самая дешёвая правка дня.
«Мини карты» берутся не из узкой колонки, а из двух чисел: полоса под
колоду сбоку (1.75 ширины карты) и ёмкость ряда. Они врут одинаково в
любой раскладке, поэтому и правило одно на все ширины от 560. */
@media (min-width: 560px) {
[data-vp-shag="stol"] .rsk-stol {
--polosa: 0;
--v-ryadu: 3;
--k-max: 325px;
padding-left: 0;
padding-right: 0;
padding-top: calc(var(--k-w) * 1.68 + 16px);
}
[data-vp-shag="stol"] .rsk-stopka,
[data-vp-shag="stol"] .rsk-stopka--kraj {
left: 50%;
top: calc(var(--k-w) * .84 + 8px);
}
}
/* НА ТЕЛЕФОНЕ ДВЕ КАРТЫ В РЯД, А НЕ ЧЕТЫРЕ.
Замер на 390, пять позиций:
ёмкость 3 (было) карта и колода 71 ряды 4+1 стол 529
ёмкость 2 (стало) карта и колода 127 ряды 2+2+1 стол 1068
ёмкость 2, 12 карт карта и колода 127 шесть рядов стол 1903
Карта 71 мельче, чем на любой другой странице раздела, и на ней не
видно рисунка. Цена — стол вдвое-вчетверо выше, и она принята:
на телефоне человек всё равно листает, а листать карту, на которой
ничего не разобрать, незачем.
Это то же решение, которое владелец сегодня принял дважды в таком же
выборе: три карты на телефоне идут по две в ряд, и карта дня 190
вместо 130. Оба раза он выбрал крупнее. */
@media (max-width: 559px) {
[data-vp-shag="stol"] .rsk-stol { --v-ryadu: 2; }
}
@media (min-width: 1600px) {
/* Панель перестаёт быть коробкой: рамка, подложка, поля и золотая
черта по верху уходят. Это ровно то, что уже сделано на телефоне
(раздел 3, @media до 560): «там панель — сама страница». */
.rsk-hero__forma {
display: contents;
}
.rsk-hero__forma::before { display: none; }
.rsk-hero:has(.rsk-hero__forma) {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
grid-template-rows: auto auto auto;
column-gap: 76px;
row-gap: 24px;
}
.rsk-hero:has(.rsk-hero__forma) > .rsk-hero__in {
grid-column: 1; grid-row: 1;
max-width: none;
}
/* Все части формы — в левую колонку, и порядок строк отдан
авторазмещению. По именам меток раскладывать нельзя: 00 уже
добавила блок готовых вопросов (#257) без `data-vp-shag`, и при
разметке по списку он уехал в неявную четвёртую строку. Так
правило переживёт и следующий такой блок. */
.rsk-hero__forma > * { grid-column: 1; }
.rsk-hero [data-vp-shag="stol"] {
grid-column: 2; grid-row: 1 / -1;
align-self: start;
}
}
@media (min-width: 1600px) and (max-height: 760px) {
.rsk-hero:has(.rsk-hero__forma) { row-gap: 12px; }
}
/* ======================================================================
57. ОДНА ОБЛОЖКА НА ВСЕ СТРАНИЦЫ РАЗДЕЛА (20.09.2026)
======================================================================
Владелец, через ведущую: «возьми для всех остальных раскладов пример
главной страницы, верхней части — расклад карты дня, и постарайся
там сделать так же, где поменять фон и т. д., но не тот кошмар,
который я замечаю».
СТАЛО: у страницы расклада тот же строй, что у витрины. Слева
надпись, заголовок, лид, поле рассказа и кнопка; справа стол с
колодой во главе; разбор приходит в левую колонку, под кнопку.
Новых правил почти нет — у витрины они уже написаны (разделы 51
и 56), здесь снят замок `:has(.rsk-stol--odna)`, который держал их
только там, где карта одна.
ПОЧЕМУ С 1600, А НЕ С 1280, КАК У ВИТРИНЫ. Обложка делит ширину
пополам, столу достаётся около 49 %. Замер ряда из трёх карт:
окно 1280 стол 500 карта 117 ← мельче, чем сегодня в столбик
окно 1366 стол 500 карта 117
окно 1440 стол 572 карта 141
окно 1600 стол 695 карта 182
окно 1790 стол 792 карта 214 ← экран владельца
окно 1920 стол 859 карта 236
окно 2560 стол 1170 карта 325 ← упёрлась в потолок --k-max
Ниже 1600 карта выходит мельче, чем в нынешнем столбике, а владелец
весь вечер просит КРУПНЕЕ (#206, #234). Поэтому до 1600 обложка
остаётся столбиком, как была: прежний вид лучше нового с мелкими
картами. Это решение по замеру, а не «не успел». */
@media (min-width: 1600px) {
/* Столбик отменяется там, где у обложки есть свой стол. Страница
вопросов строит стол в другом узле и сюда не попадает. */
.rsk-hero--stolbik:has(> .rsk-hero__stol) {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
column-gap: 76px;
}
/* Три строки объявлены ЯВНО, и это не украшение. Стол растянут на
1 / -1; без явных строк -1 указывает на конец единственной строки,
стол перестаёт проходить сквозь разбор, первая строка распухает до
его высоты, и разбор уезжает под всю обложку. Обратная ошибка
(1 / span 99) дала 98 неявных строк и 7448 px пустоты — пик #240,
«целая пропасть». */
.rsk-hero:has(> .rsk-hero__stol) {
grid-template-rows: auto auto auto;
row-gap: 30px;
}
.rsk-hero:has(> .rsk-hero__stol) .rsk-hero__in { grid-column: 1; grid-row: 1; }
.rsk-hero:has(> .rsk-hero__stol) > .rsk-hero__stol {
grid-column: 2;
grid-row: 1 / -1;
align-self: start;
margin-top: 0;
}
/* Предел ставится ради строки, а не ради колонки: в колонке 755 px
разбор при кегле 19 даёт 54 знака в строке — внутри коридора, за
которым строку перестают дочитывать. */
.rsk-hero:has(> .rsk-hero__stol) .rsk-trakt--pod {
grid-column: 1; grid-row: 2;
max-width: 68ch;
}
.rsk-hero:has(> .rsk-hero__stol) .rsk-ogovorka--pod {
grid-column: 1; grid-row: 3;
max-width: 68ch;
}
}
/* ----------------------------------------------------------------------
57.2. КОЛОДА НАД РЯДОМ В УЗКОЙ КОЛОНКЕ — правило сессии 71
----------------------------------------------------------------------
ПОЧЕМУ. Полоса под колоду сбоку стоит 1.75 ширины карты и делит
ширину с рядом. Пока стол занимал всю обложку, это было незаметно;
в половине обложки полоса съедает её целиком: при столе 792 три
карты выходили по 140. На телефоне та же беда решена давно —
колода встаёт НАД рядом, и ширину делить не с кем. Здесь ровно то
же правило, только порог не 559, а 1600.
ВИТРИНУ И КАРТУ ДНЯ НЕ ТРОГАЕМ (`:not(.rsk-stol--odna)`): там
колода справа, и владелец этот вид принял (#238).
СТОЛ СТРАНИЦЫ ВОПРОСОВ НЕ ТРОГАЕМ (`.rsk-hero__stol` в селекторе):
у него свой тесный режим и своя незаконченная работа. */
@media (min-width: 1600px) {
.rsk-hero__stol .rsk-stol--tri:not(.rsk-stol--odna),
.rsk-hero__stol .rsk-stol--mnogo {
--polosa: 0;
--v-ryadu: 3;
--k-max: 325px;
padding-left: 0;
padding-top: calc(var(--k-w) * 1.68 + 16px);
}
.rsk-hero__stol .rsk-stol--tri:not(.rsk-stol--odna) .rsk-stopka,
.rsk-hero__stol .rsk-stol--tri:not(.rsk-stol--odna) .rsk-stopka--kraj,
.rsk-hero__stol .rsk-stol--mnogo .rsk-stopka,
.rsk-hero__stol .rsk-stol--mnogo .rsk-stopka--kraj {
left: 50%;
top: calc(var(--k-w) * .84 + 8px);
}
}
/* ======================================================================
58. РЯД ИЗ ТРЁХ КАРТ НЕ ЛОМАЕТСЯ НА 2+1 (20.09.2026)
======================================================================
Нашла 1e, причина и число — 71, оба замером на живой странице.
`--pribavka` — на сколько позиция шире своей карты; из неё скрипт
считает, сколько карт влезает в ряд. Общее значение 40 верно для
`--mnogo`: там подкладка 12/12. А у `--tri` своё правило (строка
около 9256) прямо говорит `width: calc(var(--k-w) + 16px + 32px)`,
то есть позиция шире карты на 48, а не на 40. Замер: карта 298,4 —
позиция 344,4.
Из-за этих восьми пикселей на карту ряд из трёх считался влезающим,
а на деле не влезал и переносился как 2+1. То есть владелец весь
вечер смотрел на «три карты», которых в ряду было две.
Только для `--tri` и только от 768: на телефоне там своя раскладка,
и трогать её этим правилом нельзя.
====================================================================== */
@media (min-width: 768px) {
.rsk-stol--tri { --pribavka: 48px; }
}
/* ======================================================================
59. БЛОК «ЗАКАЗАТЬ У ЖИВОГО ТАРОЛОГА» — ФАКТУРА, А НЕ СЕРОЕ ПОЛЕ
======================================================================
Пики #247, #253, #261. Владелец, третий раз подряд:
«тут должна быть красивая картинка или узоры, динамика и тд, а тут
всё серо»
«я просил сюда красивый фон сделать или картинку через гпт, ты что,
такую задачу поручить некому не можешь»
«просил раза 3 сюда что-то красивое сделать: анимацию, какие-то
линии, или что-то, или картинку сгенерить — всё мимо, пропускаешь»
Взят вариант «сукно и дым» — он ближе всех к фактуре витрины, которую
владелец хвалил («тут очень крутой дым»). Два других лежат рядом:
`zov-fon-2-zvezdnaya-pyl.webp` (легче, 45 КБ) и
`zov-fon-3-zolotoy-uzor.webp` (филигрань, это прямо его «или узоры»).
Поменять — одна строка ниже.
Фотографию Альбины не трогаем ни одним правилом: она её лицо, и по
правилу 9 мы её не заменяем и не перерисовываем.
Заменено разделом 69 (астролябия), 21.09.2026.
====================================================================== */
/* ======================================================================
60. РАЗБОР ШИРЕ И БЛИЖЕ К КАРТЕ (пик #262, 20.09.2026)
======================================================================
Владелец на витрине после карты дня, дословно:
«мой браузер закончился на фразе "что-то не понятно спрашивай", но
ниже ещё есть текст, то есть мне надо скролить мышкой, а так не
должно быть. При этом от текста до карты полно места… можно ещё
засунуть пару строк… она может вообще печататься во всю длину,
текст сделай шире тоже, прошу который раз, чтобы это всё влезло,
а не просто ты уменьшил окно вывода текста»
ЭТО ПРЯМОЙ ОТВЕТ НА НАШ СОБСТВЕННЫЙ ДОВОД. Разделы 46 и 51 держали
разбор в 68ch ради читаемости строки — «предел ставится ради строки,
а не ради колонки». Он видит это как «уменьшил окно вывода текста»
и просит третий раз. Мера остаётся мерой, но выбирается теперь не
из справочника, а из его проверки: влезает без прокрутки.
ЧТО СДЕЛАНО, ТРИ ВЕЩИ И НИ ОДНОЙ ЛИШНЕЙ:
1. предел 68ch снят — разбор занимает свою колонку целиком, 755 px,
строка 67 знаков вместо 59;
2. воздух сжат там, где он между блоками, а не внутри текста:
ряд сетки после раздачи 30 → 12, свой отступ разбора 30 → 8,
отступ метки 18 → 10, отступ оговорки 18 → 6. Межстрочный
интервал и кегль НЕ ТРОНУТЫ: 19 px и 34,2 — правило 0;
3. оговорка идёт той же шириной, что разбор, иначе она выглядит
обрезанной рядом с ним.
ЗАМЕР ПОСЛЕ, те же 1790×784:
900 знаков низ оговорки 754 влезло
930 знаков низ оговорки 786 не влезло
Потолок вырос с ≈580 до ≈900 знаков, то есть наполовину с лишним.
Рабочее число для движка — 850: запас на длинное слово, которое
перенесёт строку.
«ВО ВСЮ ДЛИНУ» НЕ СДЕЛАНО, И ВОТ ПОЧЕМУ. Дальше 755 px разбор может
вырасти только за счёт колонки, где стоит карта. Считано: если
отдать разбору ещё 90 px, стол получит 700 и карта станет 238
вместо 269. Он просит карту КРУПНЕЕ третий пик подряд (#206, #234),
и я не могу выполнить одну его просьбу, нарушив другую. 755 — это
«во всю длину» ровно до карты, и у меня нет способа дать больше, не
уменьшив её. Если он скажет «карта меньше, зато текст шире» — это
одно число, и меняется за минуту.
ТОЛЬКО ТАМ, ГДЕ КАРТА ОДНА. Пик про витрину и карту дня; на
страницах раскладов разбор остаётся в 68ch, пока не попросят. Там
он приходит не в первый экран, и прокрутка неизбежна в любом случае:
стол из семи карт сам выше экрана.
====================================================================== */
@media (min-width: 1280px) {
/* 23.09.2026, пик #277: слой ЖИВОЙ, и я едва не снёс его как мёртвый.
Проверено Playwright на 8021: на страницах, где разбор лежит ВНУТРИ
обложки (`/rasklady`, `/rasklady/karta-dnya`), выше по файлу стоит
`.rsk-hero:has(> .rsk-hero__stol) .rsk-trakt--pod { max-width: 68ch }`
(строка около 10242, тот же вес 0,3,0). Побеждает то правило, что
НИЖЕ, — то есть это. Убери отсюда `.rsk-trakt--pod`, и разбор на
обложке снова садится в 557 px вместо своей колонки 825.
Замер после проверки: 1920 — 825 px, 2880 — 1278 px. */
.rsk-hero:has(.rsk-stol--odna) .rsk-trakt--pod,
.rsk-hero:has(.rsk-stol--odna) .rsk-ogovorka--pod { max-width: none; }
/* Воздух между блоками сжимается только ПОСЛЕ раздачи: до неё
обложка стоит просторно, и трогать её незачем. */
/* С 21.09.2026 — уже с `idet`, а не только с `gotovo`. Разбор теперь
печатается потоком, пока сцена ещё `idet`, и в миг `gotovo` весь
текст подпрыгивал на 18 px (30 → 12). Сжимаем в ту же секунду,
когда уходят надписи обложки: там страница и так перестраивается. */
.rsk-hero:has(:is([data-scena="idet"], [data-scena="gotovo"])) { row-gap: 12px; }
.rsk-hero:has(.rsk-stol--odna) .rsk-trakt--pod { margin-top: 8px; }
.rsk-hero:has(.rsk-stol--odna) .rsk-trakt__l { margin-bottom: 10px; }
.rsk-hero:has(.rsk-stol--odna) .rsk-ogovorka--pod { margin-top: 6px; }
}
/* ======================================================================
61. КАРТУ ДНЯ НЕ ТАСУЕМ (20.09.2026)
======================================================================
Решение владельца из двух вариантов, которые мы ему принесли:
оставить тасование и +1,1 с к вытягиванию — или не тасовать вовсе.
Выбрал второе: колода стоит спокойно, карта выходит сверху, время
вытягивания прежнее, около 3,5 с.
Это согласуется с тем, что он хвалил раньше: «карта достаётся из
какой-то части колоды, при этом она не дёргается как в припадке».
Ему нравилось доставание, а не тряска колоды перед ним.
Гасим в стилях, скрипт не трогаем: класс `tasuem` по-прежнему
вешается и снимается, пауза та же — просто движения под ним нет.
Так проще вернуть, если передумает.
Замену сделал 71. Это ОТМЕНЯЕТ прежнюю правку про сжатый круг: там
мы удлиняли путь на 1,1 с ради спокойного тасования, а тасования
теперь нет вовсе. Отмена старого веера (раздел 47) остаётся нужной —
она чинит дёрганье в раскладах на 3–7 карт, где тасование живёт.
====================================================================== */
.rsk-stol--odna .rsk-stopka.tasuem .rsk-stopka__k,
.rsk-stol--odna .rsk-stopka.tasuem .rsk-stopka__k .rsk-karta__ryb::after {
animation: none;
}
/* ======================================================================
62. ФАКТУРА И ФОТОГРАФИЯ В БЛОКЕ ЗОВА — ОДНА СЦЕНА (пик #264)
======================================================================
Владелец про фон, поставленный разделом 59, дословно:
«вон хз конечно, как будто сильно они сильно отличаются с тем, что
слева — он как отдельно живёт от этой фотки»
Он прав, и причина видна на снимке сразу: это две картинки разной
температуры, встык. Слева фотография — тёмная зелёная комната со
свечами. Справа «сукно и дым» — тёплое коричнево-бежевое полотно с
крупным дымом. Между ними вертикальный шов ровно по границе колонок
(681 px от края блока шириной 1623).
ЧТО СДЕЛАНО, ТРИ СЛОЯ, И НИ ОДНОГО НОВОГО ФАЙЛА.
1. ФАКТУРА ПЕРЕКРАШЕНА В ЗЕЛЁНОЕ — ровная вуаль rgba(20,44,30,.32)
поверх картинки. Смысл не в цвете ради цвета: на фотографии стол
застелен тёмно-зелёным бархатом, и «сукно» справа теперь читается
как ТО ЖЕ САМОЕ сукно, продолжение той же сцены, а не соседняя
картинка. Рисунок дыма и ткани при этом остаётся весь.
2. ЗАВЕСА ТЕМНЕЕТ РОВНО НА ШВЕ. Была — слева направо от края блока,
и к границе колонок успевала посветлеть до .84: фактура у шва
оказывалась светлее фотографии, и от этого граница читалась как
линия. Стала — самая тёмная точка на 42 % ширины, то есть там,
где кончается фотография, и дальше светлеет к правому краю.
42 % — не на глаз: 681 / 1623.
3. ПРАВЫЙ КРАЙ ФОТОГРАФИИ РАСТВОРЯЕТСЯ в фактуре — маска, последние
30 % ширины. Сама фотография не тронута ни файлом, ни обрезкой,
ни пропорциями: 1024×1536 в коробке 681×1021, отношение сходится
до третьего знака, `object-fit: cover` ничего не режет. Это не
обрезка в форму, о которой говорит правило 0, — это край, из
которого одно изображение переходит в другое.
ТОЛЬКО ТАМ, ГДЕ ДВЕ КОЛОНКИ. До 1024 блок идёт в столбик: фотография
сверху, текст под ней, и растворять её правый край не во что —
справа от неё край экрана. Маска включается вместе с колонками. */
/* Правило фона «сукно и дым» снято: заменено разделом 69 (астролябия),
21.09.2026. Маска снимка ниже осталась — новый раздел на неё опирается. */
@media (min-width: 1024px) {
.rsk-zov__foto {
-webkit-mask-image:
linear-gradient(90deg, #000 70%, rgba(0, 0, 0, .38) 88%, transparent 100%);
mask-image:
linear-gradient(90deg, #000 70%, rgba(0, 0, 0, .38) 88%, transparent 100%);
}
}
/* ----------------------------------------------------------------------
62.2. НА ТЕЛЕФОНЕ ФОТОГРАФИЯ БЫЛА ПОЛТОРА ЭКРАНА ЧЕРНОТЫ
----------------------------------------------------------------------
Найдено проходом по странице вопросов на 390 глазами, а не замером
(совет b8 после находок 8b — и он оправдался в первый же проход).
ЧТО ЭТО. Это и есть фотография Альбины. Замер на 390: коробка
337×1536 — ширина по экрану, а высота во весь рост исходника. При
`object-fit: cover` в такой коробке от портрета 1024×1536 остаётся
вертикальный ломоть шириной в треть кадра, и попадает в него тёмный
угол комнаты, а не лицо.
ОТКУДА 1536. У снимка в разметке стоят настоящие размеры,
`width="1024" height="1536"` — так и надо, иначе страница прыгает при
загрузке. Высота из атрибута работает как объявление стиля, и, пока
в CSS высоты нет, она побеждает: `aspect-ratio: 16/9` из базового
правила при этом просто не применяется — соотношение нужно только
тогда, когда одна из сторон auto. На экранах от 1024 беды не видно:
там блок в две колонки и стоит `height: 100%`.
ЧТО СДЕЛАНО: на экранах до 1024 высота отпущена (`height: auto`), и
кадр берётся портретный, 4:5. Замер после: 337×421 вместо 337×1536,
высота страницы вопросов 4140 → 3025. В кадр попадает Альбина со
свечами и картами, а не угол комнаты.
4:5, А НЕ 16:9. Отпустить высоту мало: базовое соотношение 16/9 дало
бы 337×190 — из портрета осталась бы полоска по глазам. 4:5 — это
обычный портретный кадр, и он не «обрезка в форму», про которую
говорит правило 0: рамка остаётся прямоугольной.
`object-position: 50% 22%` — лицо в верхней трети снимка; на широких
экранах там стоит 26–30 % и по той же причине. */
@media (max-width: 1023px) {
.rsk-zov__foto {
height: auto;
aspect-ratio: 4 / 5;
object-position: 50% 22%;
}
}
/* Выбор количества вопросов. 20.09.2026, продолжение контейнера 4.
Только новые элементы выбора; оформление главной и геометрия карт
остаются в существующих правилах. */
.rsk-vybor {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 24px 0 0;
max-width: 620px;
}
.rsk-vybor__variant {
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
min-height: 96px;
padding: 16px 12px;
border: 1px solid rgba(197, 162, 93, .32);
border-radius: 4px;
background: rgba(18, 23, 18, .48);
color: inherit;
text-decoration: none;
text-align: center;
transition: border-color .2s, background-color .2s;
}
/* ПОДСВЕТКА ТОЛЬКО У ССЫЛОК (22.09.2026).
Решение владельца 21.09: переключатель ступеней «оставить как прайс».
На витрине плитка — ссылка, ведущая на страницу вопросов, и там
наведение с обводкой на месте. На самой странице вопросов ступень
больше не выбирают плиткой: её предлагает сервер по числу отмеченных
вопросов (правило 10.1). Там плитки рисуются НЕ ссылками (`stupeni`
с `ssylki=false`), и наведение им ни к чему: подсвеченная плашка
обещает нажатие, которого нет. Поэтому подсветка привязана к тегу
`a`, а не к классу, — вид ссылки не тронут ни на пиксель. */
a.rsk-vybor__variant:hover,
a.rsk-vybor__variant:focus-visible {
border-color: #c5a25d;
background: rgba(197, 162, 93, .14);
}
a.rsk-vybor__variant:focus-visible { outline: 2px solid #c5a25d; outline-offset: 3px; }
.rsk-vybor__variant--active {
border-color: #c5a25d;
background: rgba(197, 162, 93, .17);
}
/* Прайс: плашка, а не кнопка. Курсор не обещает нажатия, перехода
цвета нет — менять ему нечего. */
.rsk-vybor--price .rsk-vybor__variant { cursor: default; transition: none; }
.rsk-vybor__count { font-size: 25px; line-height: 1.15; }
.rsk-vybor__count > span { font-size: 16px; }
.rsk-vybor__price { color: #d2b579; font-size: 16px; line-height: 1.3; }
.rsk-tarify .rsk-vybor { max-width: none; margin-top: 0; }
@media (max-width: 559px) {
.rsk-vybor { gap: 6px; }
.rsk-vybor__variant { padding: 12px 6px; }
.rsk-vybor__count > span { display: block; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
.rsk-vybor__variant { transition: none; }
}
/* Вопросы и колода используют композицию витрины, сохраняя DOM формы:
скрипт продолжает находить все шаги внутри data-vp. После раздачи
стол получает всю ширину, чтобы 5/10 вопросов не сжимались в колонку. */
.rsk-hero--vopros .rsk-hero__forma {
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
padding: 0;
}
.rsk-hero--vopros .rsk-hero__forma::before { display: none; }
.rsk-hero--vopros [data-vp-stol]:not(:has(.rsk-poz)) {
--k-w: min(300px, 65cqi);
min-height: calc(var(--k-w) * 1.7 + 65px);
padding: 0;
}
.rsk-hero--vopros [data-vp-stol]:not(:has(.rsk-poz)) .rsk-stopka {
left: 50%; top: 50%;
}
@media (min-width: 1024px) {
.rsk-hero.rsk-hero--vopros {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto auto;
column-gap: clamp(32px, 5vw, 76px);
row-gap: 16px;
align-items: start;
}
.rsk-hero--vopros > .rsk-hero__in {
grid-column: 1; grid-row: 1; max-width: none;
}
.rsk-hero--vopros .rsk-hero__forma { display: contents; }
.rsk-hero--vopros .rsk-hero__forma > * { grid-column: 1; min-width: 0; }
.rsk-hero--vopros .rsk-hero__forma > [data-vp-shag="stol"] {
grid-column: 2; grid-row: 1 / 4; align-self: start;
order: 0; margin: 0;
}
.rsk-hero--vopros .rsk-hero__forma > [data-vp-shag="stol"]:has(.rsk-poz) {
grid-column: 1 / -1; grid-row: auto;
}
.rsk-hero--vopros .rsk-vybor { margin-top: 18px; }
}
@media (max-width: 1023px) {
.rsk-hero--vopros .rsk-hero__forma { max-width: none; }
.rsk-hero--vopros [data-vp-shag="stol"] { margin: 0 0 22px; }
}
/* Точная настройка формы: читаемый ввод, компактный первый экран. */
.rsk-hero--vopros textarea.rsk-pole-vvoda {
min-height: 152px;
height: 166px;
font-size: 18px;
font-weight: 400;
line-height: 1.55;
}
.rsk-hero--vopros textarea.rsk-pole-vvoda::placeholder { font-weight: 400; opacity: .7; }
.rsk-hero--vopros .rsk-pole-vvoda:focus-visible {
outline: 1px solid #c5a25d;
outline-offset: 3px;
}
.rsk-vybor__variant--active { box-shadow: inset 0 -2px 0 #c5a25d; }
.rsk-hero--vopros .rsk-hero__in > [data-vp-tema] { display: none; }
/* СТРОКА СОГЛАСИЯ СРАЗУ ПОД КНОПКОЙ — П3 (27.09.2026, решение владельца
через руководителя раздела: на листе Claude outputs/soglasie-v-okne-
2026-09-27/svodka-vopros-2133x1021.jpg «картинка 3 — это П3, справа
снизу?» — «да»; замер — OTCHET.md там же). Правило 7.1: строка
«Согласие… действует» стоит рядом с кнопкой. Было: кнопка →
«Попытка» → строка, и на 2133×1021 строка уходила под край окна.
Это вид ПК по умолчанию (ширина от 1024). На низких окнах его
перекрывает вариант 3 внутри блока «Низкий экран…» сразу ниже —
порог высоты живёт только там (правило 8.7), своего здесь нет, и
поэтому этот блок должен стоять ДО того.
Порядок рядов шага: кнопка → строка согласия → «Попытка N из 3» →
строка беды. «Попытка» лежит внутри блока кнопки, а строку согласия
скрипт ставит ЗА блоком (rasklady.js, объявитьСогласие), — поэтому
блок кнопки раскрыт в сетку шага (`display: contents`), и кнопка с
«Попыткой» стали её рядами. Отбивку и предел ширины блока кнопка
берёт через `inherit` — своих чисел нет. Скрипт блок по размеру не
меряет, только ищет через closest().
Запасная галка [data-vp-zapas] (после отказа net-soglasiya) — сразу
под кнопкой, на месте строки: над кнопкой она сталкивала кнопку под
край окна на 2133×1021. Слова, шрифты и кегль не меняются, телефон
не меняется. */
@media (min-width: 1024px) {
.rsk-hero--vopros .rsk-rasskaz {
grid-template-areas: 'porog' 'nad' 'pole' 'schet' 'knopka' 'zapas' 'soglasie' 'popytka' 'beda';
}
.rsk-hero--vopros .rsk-rasskaz > .rsk-hero__deystvie { display: contents; }
.rsk-hero--vopros .rsk-rasskaz > .rsk-hero__deystvie > [data-vp-sobrat] { grid-area: knopka; margin-top: inherit; max-width: inherit; }
.rsk-hero--vopros .rsk-rasskaz > [data-vp-zapas] { grid-area: zapas; margin: 12px 0 0; }
.rsk-hero--vopros .rsk-rasskaz > [data-soglasie-deystvuet] { grid-area: soglasie; margin: 6px 0 0; }
.rsk-hero--vopros .rsk-rasskaz > .rsk-hero__deystvie > [data-vp-popytka] { grid-area: popytka; }
.rsk-hero--vopros .rsk-rasskaz > [data-vp-beda] { grid-area: beda; }
/* УПЛОТНЕНИЕ (27.09.2026, руководитель раздела по поручению владельца;
замер — Claude outputs/nizkie-okna-2026-09-27/variant-3, лист «Новый
лид: что не влезло»). Лид «Своего вопроса» стал на строку длиннее, и
на 2133×1021 и 1920×1080 строка согласия уходила под край окна.
Отбивка обложки под крошками — 48 px (было 56 до 1440 и 72 от 1440,
раздел 1 rasklady.css), строка согласия от кнопки — 6 px (было 12).
На низких окнах отбивка своя, 12 — в блоке «Низкий экран…» ниже.
Шрифты и кегль не меняются. */
.rsk-hero.rsk-hero--vopros:not(.rsk-hero--stol) { padding-top: 48px; }
/* ПОКА ВИСИТ ПОЛОСА COOKIE (28.09.2026, правило 7.1; руководитель
раздела). При первом заходе полоса (`#cookie`, site.css) лежит у
низа окна и закрывала строку «Согласие… действует» у кнопки: на
2133×1021 верх полосы 944, строка 974..1001, кнопка 916..968. Пока
полоса видна, строка «Сейчас задача…» уходит под кнопку — так же,
как на низком экране (вариант 3), — и кнопка со строкой встают над
полосой вместе. Ответили на полосу — `:has()` гаснет, вид прежний.
`:where()` держит специфичность прежней: на низких окнах сетку шага
задаёт вариант 3 в блоке «Низкий экран…» ниже, он перебивает это
порядком. */
:where(body:has(#cookie:not([hidden]))) .rsk-hero--vopros .rsk-rasskaz {
grid-template-areas: 'nad' 'pole' 'schet' 'knopka' 'zapas' 'soglasie' 'popytka' 'beda' 'porog';
}
:where(body:has(#cookie:not([hidden]))) .rsk-hero--vopros .rsk-rasskaz > [data-vp-sbor-porog] { margin: 12px 0 0; }
}
/* Низкий экран — тот же порог, что у раздела 50.1 (до 1000 на
компьютере, fix30). На 1920×919 поднятых полей 50.1 и плиток цен не
хватало: кнопка «Сформировать вопросы» вставала на 899–951 при окне
919. Дальше — воздух между шагами самой сцены: отбивка шага рассказа
(26 px сверху поверх промежутка сетки в 16 px) и отбивка кнопки от
поля (26 px под счётчиком знаков). После — кнопка на 861–913. Кегль
и поле рассказа не тронуты. */
@media (min-width: 1024px) and (max-height: 1000px) {
.rsk-hero--vopros .rsk-vybor__variant { min-height: 80px; padding-top: 12px; padding-bottom: 12px; }
.rsk-hero--vopros .rsk-lead { margin-bottom: 8px; }
.rsk-hero--vopros [data-vp-shag="rasskaz"] { margin-top: 0; }
.rsk-hero--vopros [data-vp-shag="rasskaz"] .rsk-hero__deystvie { margin-top: 14px; }
/* НИЗКИЕ ОКНА НОУТБУКОВ — ВАРИАНТ 3 (27.09.2026, решение владельца
через руководителя раздела; замер и макеты — Claude outputs/
nizkie-okna-2026-09-27/OTCHET.md). На 1280×800 и 1366×768 кнопка
«Сформировать вопросы» стояла на 976 — под краем окна, строка
согласия (правило 7.1) ещё ниже. Живёт внутри этого блока, чтобы
порог 1000 оставался одним местом (правило 8.7), и перекрывает
вид ПК по умолчанию (П3, блок выше) — два вида осознанно разные.
1. Заголовок — в одну строку над обеими колонками: `.rsk-hero__in`
растворяется в сетке (`display: contents`, как уже сделано до
1023), H1 занимает весь ряд, колода встаёт со второго ряда.
Стол после раздачи (`.rsk-hero--stol`) не трогаем.
2. Блок кнопки короткий: строка согласия — прямо над кнопкой,
«Попытка N из 3» — справа от неё, кнопка по ширине надписи (не
уже 280). Блок кнопки снова строка (П3 раскрывал его в сетку),
общий предел блока в 420 px снят: с 2200 кнопка крупнее, и
«Попытка» в остатке 420 переносилась на две строки. Запасная
галка — на месте строки согласия, над кнопкой (отбивка — из П3).
3. Строка «Сейчас задача…» и «Сегодня: …» — под блоком кнопки.
Поле рассказа прежней высоты (166). Шрифты, кегль и плитки цен не
меняются; области сетки `.rsk-rasskaz` переставлены, разметка и
скрипт не тронуты.
Уплотнение (27.09.2026, руководитель раздела по поручению
владельца): отбивка обложки под крошками 12 (было 24 — раздел 50.1;
на ПК выше порога — 48, блок П3), лид → плитки 0 (было 8), строка
согласия от счётчика 8 (было 14), кнопка от строки 6 (было 10). */
.rsk-hero.rsk-hero--vopros:not(.rsk-hero--stol) { padding-top: 12px; }
/* 1 */
.rsk-hero--vopros:not(.rsk-hero--stol) > .rsk-hero__in { display: contents; }
.rsk-hero--vopros:not(.rsk-hero--stol) > .rsk-hero__in > * { grid-column: 1; min-width: 0; }
.rsk-hero--vopros:not(.rsk-hero--stol) > .rsk-hero__in > .rsk-h1 { grid-column: 1 / -1; grid-row: 1; }
.rsk-hero--vopros:not(.rsk-hero--stol) > .rsk-hero__in > .rsk-lead { margin: 0; }
.rsk-hero--vopros:not(.rsk-hero--stol) > .rsk-hero__in > .rsk-vybor { margin-top: 0; }
.rsk-hero--vopros:not(.rsk-hero--stol) .rsk-hero__forma > [data-vp-shag="stol"]:not(:has(.rsk-poz)) { grid-row: 2 / span 6; }
/* 2, 3 */
.rsk-hero--vopros .rsk-rasskaz {
grid-template-areas: 'nad' 'pole' 'schet' 'zapas' 'soglasie' 'pary' 'beda' 'porog';
}
.rsk-hero--vopros .rsk-rasskaz > [data-soglasie-deystvuet] { margin: 8px 0 0; }
.rsk-hero--vopros .rsk-rasskaz > .rsk-hero__deystvie { display: flex; grid-area: pary; flex-wrap: nowrap; align-items: center; margin-top: 6px; max-width: none; }
.rsk-hero--vopros .rsk-rasskaz > .rsk-hero__deystvie > [data-vp-sobrat] { flex: 0 0 auto; width: auto; min-width: 280px; margin-top: 0; max-width: none; }
.rsk-hero--vopros .rsk-rasskaz > .rsk-hero__deystvie > [data-vp-popytka] { flex: 0 1 auto; margin: 0; }
.rsk-hero--vopros .rsk-rasskaz > [data-vp-sbor-porog] { margin: 12px 0 0; }
.rsk-hero--vopros:not(.rsk-hero--stol):has([data-vp-shag="rasskaz"]:not([hidden])) .rsk-lichnoe-mesto {
order: 1;
margin: 0;
}
/* Пока висит полоса cookie (28.09.2026, правило 7.1; руководитель
раздела): строка «Сейчас задача…» здесь и так под кнопкой, а полоса
(77 px на ПК) закрывала кнопку — на 1366×768 на 41 px, на 1280×800
на 9. Поле рассказа на это время ниже: 110 вместо 166, строка
согласия и кнопка встают над полосой вместе, плитки цен остаются на
первом экране. Ответили на полосу — `:has()` гаснет, поле прежнее. */
:where(body:has(#cookie:not([hidden]))) .rsk-hero--vopros textarea.rsk-pole-vvoda { min-height: 110px; height: 110px; }
}
/* На узком экране сначала тема и колода, затем выбор и вопросы.
Меняется только визуальный порядок: data-vp и обработчики остаются
в прежнем дереве. Готовый расклад снова идёт после вопросов. */
@media (max-width: 1023px) {
.rsk-hero.rsk-hero--vopros {
display: grid;
grid-template-columns: minmax(0, 1fr);
row-gap: 16px;
}
.rsk-hero--vopros > .rsk-hero__in,
.rsk-hero--vopros .rsk-hero__forma { display: contents; }
.rsk-hero--vopros .rsk-hero__in > *,
.rsk-hero--vopros .rsk-hero__forma > * { grid-column: 1; min-width: 0; }
.rsk-hero--vopros .rsk-hero__in > .rsk-nad { order: 0; margin: 0; }
.rsk-hero--vopros .rsk-h1 { order: 1; margin: 0; }
.rsk-hero--vopros .rsk-lead { order: 2; margin: 0; font-size: 18px; line-height: 1.55; }
.rsk-hero--vopros .rsk-hero__forma > [data-vp-shag="stol"] { order: 3; margin: 0; }
.rsk-hero--vopros .rsk-vybor { order: 4; margin: 0; }
.rsk-hero--vopros [data-vp-shag="rasskaz"] { order: 7; }
.rsk-hero--vopros [data-vp-shag="voprosy"] { order: 8; }
.rsk-hero--vopros .rsk-hero__forma > [data-vp-shag="stol"]:has(.rsk-poz) { order: 9; }
.rsk-hero--vopros [data-vp-stol]:not(:has(.rsk-poz)) {
--k-w: min(210px, 55cqi);
min-height: calc(var(--k-w) * 1.7 + 28px);
}
}
/* Фото уже растворяется в общем фоне. Вертикальная линия поверх
этого перехода делила его на две несвязанные панели (#264). */
.rsk-zov__in { border-left: 0; }
.rsk-hero--vopros label.rsk-nad { display: block; margin-bottom: 12px; }
/* ДОБОР БОЛЬШЕ НЕ (Указка, пик #273, стили — 22.09.2026, куски
от агента #4c). Поле своих вопросов — всегда открытый ,
метка над ним — либо строка «ещё вопросов» ([data-vp-eshche]), либо своя
(label.rsk-nad): переключает их обновитьМеткуДобора() в rasklady_vopros.js.
Сворачивать больше нечего, правила про ниже мертвы с того же
дня — гашу на месте, не удаляю. */
.rsk-hero--vopros .rsk-vopros-dobor {
margin: 20px 0; padding-block: 18px;
border-block: 1px solid rgba(197,162,93,.2);
}
/* мертво 22.09.2026 — / ушли из разметки (пик #273)
.rsk-hero--vopros .rsk-vopros-dobor > summary {
cursor: pointer; padding: 18px 0; margin: 0;
line-height: 1.6; letter-spacing: .1em;
}
.rsk-hero--vopros .rsk-vopros-dobor > summary:focus-visible { outline: 1px solid #c5a25d; outline-offset: 4px; }
.rsk-hero--vopros .rsk-vopros-dobor[open] { padding-bottom: 18px; }
*/
/* Метка над полем — тот же ритм, что у подписи рассказа (.rsk-rasskaz
> .rsk-nad, margin-bottom 12px): отступ от кромки один на оба поля.
Цвет строки «ещё» — полный, не приглушённый: она работает меткой
поля, а не мелкой оговоркой (.rsk-ogovorka--melko даёт ink-55). Это
ЕДИНСТВЕННОЕ место, где живут её отступ и цвет (правило 8.7) — прежние
правила через .rsk-predlozhenie ниже по файлу мертвы по той же причине. */
.rsk-hero--vopros .rsk-vopros-dobor > [data-vp-eshche] {
margin: 0 0 12px;
color: var(--ink);
}
/* Результат по вопросам. Старый тесный стол перекрывал соседние карты:
ширина позиции была меньше ширины самой карты. Здесь каждая позиция
занимает отдельную ячейку, триплет — общий ряд с одной подписью. */
/* СТОЛ ПО ВОПРОСАМ — ЕДИНСТВЕННОЕ МЕСТО (21.09.2026).
До этого дня сетка стола жила в двух файлах: здесь и в хвосте
rasklady-themes.css, который грузится позже и перебивал здешние числа
(правило 8.7). Теперь всё здесь, в themes остались только обложки.
Ряд — флекс с переносом по центру, а не сетка: неполный последний ряд
встаёт по середине, одиночная карта не висит слева у пустой половины.
Ширина места одиночного вопроса — та же доля ряда, что была у колонки
сетки: `--board-cols` мест через `--board-gap`.
ТРИ КАРТЫ ОДНОГО ВОПРОСА — ОДНА ГРУППА (правило 10: читаются вместе).
Карты стоят тесно (`--trio-gap` против `--board-gap` между вопросами),
группа обведена той же панелью с золотым волоском, что ступени и
строки раздела (`--rsk-panel`, `--rsk-line`), подпись вопроса — одна,
на всю ширину группы. Размер карты в группе тот же, что у одиночных.
ТЕЛЕФОН: 2 + 1 В ОБЩЕЙ РАМКЕ, а не три в ряд и не веер. Счёт на 390
(стол 354): три в ряд — карта 106 px против 168 у одиночных рядом;
веер с нахлёстом 22 % — 130 px, но нахлёст ложится на края таблички
с названием (у перевёрнутой она сверху, ступенька её не спасает).
2 + 1 держит карту 168 px, как у соседних вопросов; что это один
вопрос, говорит рамка и общая подпись. Рамка выходит за стол на
10 px в каждую сторону — ровно на свои поля, чтобы карты внутри
стояли в тех же колонках, что одиночные.
ПРАВКА 22.09.2026 — СЕТКА ВМЕСТО ПЕРЕНОСА СТРОК. Ряд был флексом с
переносом, и от этого шли три беды, все три замерены стендом
`Claude outputs/vizual-2026-09-22/stol.py` на боевых файлах:
1. ТРИПЛЕТ ВКЛИНИВАЛСЯ МЕЖДУ ОДИНОЧНЫМИ. На 2880 стол из 10
вопросов вставал «6 одиночных | 2 одиночных + триплет |
триплет»: группа из трёх карт оказывалась в одном ряду с
двумя чужими вопросами. Перенос строк выбирает браузер, и
сказать ему «группа начинает свой ряд» во флексе нечем.
2. СИРОТА. Четыре одиночных вопроса при трёх колонках вставали
3 + 1, и четвёртая карта висела одна посреди пустого ряда.
3. КАРТЫ РАЗЪЕЗЖАЛИСЬ НА ШИРОКОМ ЭКРАНЕ. Место вопроса считалось
долей стола, а стол на 2880 — 2696 px: при карте 280 между
картами оставалось по 145 px воздуха.
Стало: `display: grid`. Колонка — карта плюс запас под подпись
(`--zapas`), и больше не растёт вслед за экраном; стол встаёт по
центру. Триплет занимает ряд целиком (`grid-column: 1 / -1`) и
стоит в нём по центру своей шириной — значит, ни один триплет
больше не делит ряд с одиночным вопросом, а два триплета идут
двумя отдельными группами друг под другом.
ОДНО ЧИСЛО В ОДНОМ МЕСТЕ (правило 8.7). Потолок карты был вписан
числом 280 в четыре формулы этого блока и ещё дважды в переносах
по ширине. Теперь он один — `--k-max`, и от него считают и
одиночная карта, и карта в триплете.
СКОЛЬКО КОЛОНОК. 2 на телефоне и планшете, 3 от 1024, 4 от 1680.
Прежние 5 от 1680 и 6 от 2200 сняты: при них восемь одиночных
вопросов вставали 5 + 3 и 6 + 2, а четыре — одним рядом из четырёх
при колонках шириной в полтора экрана. Четыре колонки дают 4 + 4 и
4 ровно, и карта остаётся 280. */
.rsk-hero--vopros [data-vp-stol]:has(.rsk-poz) {
--board-cols: 3;
--board-gap: 28px;
--trio-gap: 12px;
--trio-pad: 20px;
/* Потолок карты на этом столе — ЕДИНСТВЕННОЕ место. */
--k-max: 280px;
/* Запас под подпись: на столько место вопроса шире самой карты.
96 = по 48 с каждой стороны; столько же давала прежняя колонка на
1440 (378 при карте 280). Он НЕ вычитается из карты: карта
считается сама, а колонка получает `minmax(0, карта + запас)` —
то есть берёт запас, когда место есть, и молча отдаёт его, когда
места нет. Поэтому карта нигде не стала мельче прежней, а на 2880
колонка больше не растёт вслед за экраном и стол стоит по центру. */
--zapas: 96px;
--k-w: min(var(--k-max),
calc((100cqi - (var(--board-cols) - 1) * var(--board-gap))
/ var(--board-cols)));
display: grid;
grid-template-columns:
repeat(var(--board-cols), minmax(0, calc(var(--k-w) + var(--zapas))));
justify-content: center;
align-items: start;
align-content: start;
gap: 36px var(--board-gap);
padding: calc(var(--k-w) * 1.7 + 56px) 0 28px;
min-height: 0;
}
.rsk-hero--vopros [data-vp-stol] > .rsk-poz {
width: auto; min-width: 0; max-width: none;
margin: 0; padding: 0; gap: 0;
}
/* Группа из трёх карт — свой ряд целиком и своя ширина по центру.
`justify-self: center` сам сжимает коробку до содержимого, поэтому
ни `max-width`, ни боковые поля ей больше не нужны: на телефоне она
выходит за стол ровно на свои поля, как и было задумано. */
.rsk-hero--vopros [data-vp-stol] > .rsk-poz--triplet {
--k-w: min(var(--k-max),
calc((100cqi - 2 * var(--trio-gap) - 2 * var(--trio-pad) - 2px) / 3));
grid-column: 1 / -1;
justify-self: center;
box-sizing: border-box;
/* Воздух вокруг группы больше, чем внутри неё: 36 px ряда плюс эти
8 против 12 px между картами группы. */
margin: 8px 0 0;
padding: var(--trio-pad) var(--trio-pad) calc(var(--trio-pad) - 2px);
border: 1px solid var(--rsk-line);
border-radius: calc(var(--k-r) + 8px);
background: var(--rsk-panel);
}
/* Добор приходит после того, как расклад разложен, и встаёт своим
рядом в конце стола — иначе он вклинился бы в чужой ряд и читался
бы как позиция расклада. Воздух и волосок над ним — раздел 49.1. */
.rsk-hero--vopros [data-vp-stol] > .rsk-poz--dobor {
grid-column: 1 / -1;
justify-self: center;
box-sizing: border-box;
}
.rsk-hero--vopros [data-vp-stol] .rsk-poz__karty {
display: flex; justify-content: center; align-items: start;
gap: var(--trio-gap);
width: 100%; margin: 0;
}
.rsk-hero--vopros [data-vp-stol] .rsk-poz__karty > .rsk-karta {
flex: 0 0 var(--k-w); width: var(--k-w); margin: 0;
}
.rsk-hero--vopros [data-vp-stol] .rsk-poz__p {
width: auto; min-width: 0; min-height: 0; max-width: 56ch;
margin: 16px auto 0;
font-size: 18px; line-height: 1.5;
overflow-wrap: anywhere;
}
/* Подпись группы занимает её ширину, но сама группу не распирает. */
.rsk-hero--vopros [data-vp-stol] .rsk-poz--triplet .rsk-poz__p {
width: 0; min-width: 100%; max-width: none;
}
.rsk-hero--vopros [data-vp-stol]:has(.rsk-poz) > .rsk-stopka {
left: 50%; top: calc(var(--k-w) * .85 + 12px);
}
/* Возврат прошлого расклада: скрипт прячет колоду (`hidden`), а полоса
под неё оставалась — 326 px пустоты на 390 и 532 на широком. */
.rsk-hero--vopros [data-vp-stol]:has(.rsk-poz):has(> .rsk-stopka[hidden]) {
padding-top: calc(var(--trio-pad) + 8px);
}
/* Четыре колонки — только там, где место вопроса остаётся не уже
карты-потолка: 4 × (280 + 40) + 3 × 28 = 1364, а стол на 1680 —
1528 px. На 1440 стол 1192, и четыре колонки ужали бы карту до 253:
там колонок по-прежнему три. */
@media (min-width: 1680px) {
.rsk-hero--vopros [data-vp-stol]:has(.rsk-poz) { --board-cols: 4; }
}
/* СИРОТА. Четыре одиночных вопроса в трёх колонках встают 3 + 1.
Ровно этот случай владелец и просил починить («4 одиночные карты
ставить 2+2, а не 3+1»). Считаем одиночные позиции: ровно четыре —
значит, две колонки, и ряды выходят 2 + 2 при той же карте 280.
`:nth-child(N of S)` считает среди позиций и не зависит от того,
сколько служебных слоёв лежит в столе до них. */
@media (min-width: 1024px) and (max-width: 1679px) {
.rsk-hero--vopros [data-vp-stol]:has(.rsk-poz):has(
> .rsk-poz:nth-child(4 of .rsk-poz:not(.rsk-poz--triplet))):not(:has(
> .rsk-poz:nth-child(5 of .rsk-poz:not(.rsk-poz--triplet)))) {
--board-cols: 2;
}
}
@media (max-width: 1023px) {
.rsk-hero--vopros [data-vp-stol]:has(.rsk-poz) {
--board-cols: 2;
--board-gap: 24px;
--k-max: 220px;
row-gap: 28px;
}
}
@media (max-width: 699px) {
/* 2 + 1: три в ряд здесь дали бы карту заметно мельче одиночных. */
.rsk-hero--vopros [data-vp-stol] > .rsk-poz--triplet {
--k-w: min(var(--k-max),
calc((100cqi - var(--trio-gap) - 2 * var(--trio-pad) - 2px) / 2));
}
.rsk-hero--vopros [data-vp-stol] .rsk-poz--triplet .rsk-poz__karty {
display: grid; grid-template-columns: repeat(2, auto);
justify-content: center; justify-items: center;
}
.rsk-hero--vopros [data-vp-stol] .rsk-poz--triplet .rsk-karta:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
}
@media (max-width: 559px) {
.rsk-hero--vopros [data-vp-stol]:has(.rsk-poz) {
--board-gap: 18px;
--trio-gap: 14px;
--trio-pad: 10px;
--k-max: 170px;
/* Запас под подпись здесь не отменяем и не обнуляем: две колонки
по 168 занимают стол целиком, свободного места нет, и колонка
сама берёт ровно ширину карты. */
padding-top: calc(var(--k-w) * 1.7 + 40px);
}
/* Карта в группе — такая же, как у соседних вопросов; поля группы
выходят за стол на свои 10 px, и `justify-self: center` ставит её
ровно по середине. */
.rsk-hero--vopros [data-vp-stol] > .rsk-poz--triplet {
--k-w: min(var(--k-max), calc((100cqi - var(--board-gap)) / 2));
padding-bottom: 14px;
}
.rsk-hero--vopros [data-vp-stol] .rsk-poz__p { font-size: 16px; margin-top: 12px; }
/* ПОДПИСЬ ОДИНОЧНОГО ВОПРОСА — НЕ ВЫШЕ ТРЁХ СТРОК.
Замер стенда до правки: на 390 подписи доходили до пяти строк, и
ряд карт разъезжался по высоте — под одной картой три строки, под
соседней пять. Кегль здесь трогать нельзя (16 px — нижняя граница
оформления, CLAUDE.md, правило 0), поэтому лишнее прячется
многоточием. Своих слов не добавляем: текст вопроса остаётся тем
же, целиком он виден на планшете и шире, а экранный диктор читает
его из `aria-label` карты, куда его кладёт скрипт.
Общая подпись триплета не обрезается: она идёт на всю ширину
группы и в три строки укладывается сама. */
.rsk-hero--vopros [data-vp-stol] > .rsk-poz:not(.rsk-poz--triplet) .rsk-poz__p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
}
/* На телефоне одна карта и колода помещаются рядом, как на большом столе. */
@media (max-width: 559px) {
[data-slug="karta-dnya"]:is([data-scena="idet"], [data-scena="gotovo"]) .rsk-stol--odna,
.rsk-ug .rsk-stol--odna {
--k-w: min(180px, calc((100cqi - 24px) / 2));
padding: 18px 0 16px;
justify-content: flex-start;
gap: 0;
}
[data-slug="karta-dnya"]:is([data-scena="idet"], [data-scena="gotovo"]) .rsk-poz,
.rsk-ug .rsk-stol--odna .rsk-poz {
width: var(--k-w); min-width: 0; padding: 0; margin: 0;
gap: 12px;
}
[data-slug="karta-dnya"]:is([data-scena="idet"], [data-scena="gotovo"]) .rsk-poz__p {
min-height: 0; margin: 0; font-size: 16px;
}
}
/* Юридический текст нельзя сжимать по высоте: flex-shrink накладывал
кнопку на последние строки согласия на 360 px. Короткий экран
прокручивает лицо карты, а все действия остаются в обычном потоке. */
.rsk-vhod__lico > * { flex-shrink: 0; }
@media (max-width: 559px) {
.rsk-porog.rsk-vhod .rsk-porog__okno {
width: 100%;
height: min(660px, calc(100dvh - 48px));
aspect-ratio: auto;
}
.rsk-vhod__lico { justify-content: flex-start; }
.rsk-vhod__lico .rsk-porog__soglasie {
font-size: 16px; line-height: 1.5;
}
}
/* Один прямой вопрос: карта слева, колода справа, без пустого ряда.
Триплеты и несколько вопросов сохраняют свою сетку. */
.rsk-hero--vopros [data-vp-stol]:has(> .rsk-poz):not(:has(.rsk-poz ~ .rsk-poz, .rsk-poz--triplet)) {
--k-w: min(280px, calc((100cqi - 24px) / 2));
/* Половина стола, но не шире 420: на 2880 карта и колода стояли в
1080 px друг от друга и читались как два чужих предмета. */
--odna-kol: min(420px, calc((100cqi - 24px) / 2));
display: grid;
grid-template-columns: repeat(2, var(--odna-kol));
justify-content: center;
gap: 24px;
padding: 18px 0 28px;
}
.rsk-hero--vopros [data-vp-stol]:not(:has(.rsk-poz ~ .rsk-poz, .rsk-poz--triplet)) > .rsk-poz {
grid-column: 1;
}
.rsk-hero--vopros [data-vp-stol]:has(> .rsk-poz):not(:has(.rsk-poz ~ .rsk-poz, .rsk-poz--triplet)) > .rsk-stopka {
left: calc(50% + 12px + var(--odna-kol) / 2);
top: calc(var(--k-w) * .75 + 18px);
}
@media (max-width: 559px) {
.rsk-hero--vopros [data-vp-stol]:has(> .rsk-poz):not(:has(.rsk-poz ~ .rsk-poz, .rsk-poz--triplet)) {
--k-w: min(170px, calc((100cqi - 24px) / 2));
}
}
/* ======================================================================
63. НА ТЕЛЕФОНЕ КОЛОДА ЖДЁТ ВО ГЛАВЕ СТОЛА, А НЕ ПОСЕРЕДИНЕ
======================================================================
Найдено проходом по витрине и карте дня на 390 глазами. Замером не
ловится: по числам #245 выполнен — «стол виден с загрузки, с
колодой», — а глазами видно полколоды и пустое поле над ней.
ОТКУДА ПУСТОТА. При загрузке колода стоит `.rsk-stopka--sredina`,
то есть посреди стола. На широком экране это хорошо: стол там
невысокий, и колода оказывается прямо против текста. На телефоне
стол высокий — он резервирует и полосу под колоду (335 px при карте
190), и место под карту, которой ещё нет. Середина такого стола и
уходит на 234 px ниже кнопки, а нижняя треть колоды — за сгиб.
СТАЛО: пока сцена «ждём», колода на телефоне стоит во главе стола,
там же, где стоит после раздачи. Замер после:
кнопка колода зазор за сгибом
карта дня 316–368 404–689 35 0
витрина 374–426 461–746 35 0
Колода целиком в первом экране и стоит сразу под кнопкой — жест
читается: нажми и вытяни вот эту колоду.
СЕРЕДИНА СТОЛА ОСТАЁТСЯ ТАМ, ГДЕ ОНА ОСМЫСЛЕННА. Правило ловит
только `[data-scena="zhdet"]` — состояние до нажатия. Пока
считается разбор, колода по-прежнему уезжает на середину: это
отдельное состояние, владелец его принял и хвалил, и трогать его
нечем.
Только телефон: на 560 и шире пустоты нет, там стол ниже.
Правило решено ведущей, число и замер мои.
====================================================================== */
@media (max-width: 559px) {
.rsk-hero__stol[data-scena="zhdet"] .rsk-stopka--sredina {
top: calc(var(--k-w) * .84 + 8px);
}
}
/* ======================================================================
64. «ПРОДОЛЖИТЬ» В ОКНЕ ПОРОГА ЧИТАЕТСЯ (21.09.2026)
======================================================================
Найдено проходом b8 как человеком. Это первое, что видит любой, кто
заходит в раздел, и подпись на кнопке было почти не разобрать.
ЗАМЕР. Кнопка выключена, пока не стоит галочка согласия, и
выключенное состояние гасило её целиком: тёмная подпись rgb(20,26,20)
по приглушённому золоту rgb(100,89,57) плюс прозрачность .45.
Контраст подписи к своей подложке **2,55** при кегле 14. Обычная
золотая кнопка сайта даёт 7,76, то есть беда не в общем стиле, а
именно в выключенном состоянии внутри окна-карты.
ПОЧЕМУ НЕ ПРОСТО «УБРАТЬ ПРОЗРАЧНОСТЬ». Тогда выключенная кнопка
становится неотличима от рабочей, человек жмёт и ничего не
происходит — это хуже, чем тусклая подпись. Выключенность должна
читаться, но не за счёт того, что слово нельзя прочесть.
СТАЛО: пока согласие не дано, кнопка — не залитая плашка, а контур.
Прозрачная подложка, золотой волосок по краю и золотая подпись.
Контраст подписи к полю панели **7,76** вместо 2,55. Когда галочка
встаёт, кнопка заливается золотом, как раньше, — разница между
«пока нельзя» и «можно» видна с одного взгляда и не цветом одним:
контур против заливки.
Правило узкое: только `.rsk-porog`. Выключенные кнопки в других
местах раздела (раздел 36) не трогаю — там они стоят на тёмном поле
страницы, а не на подсвеченной карте, и читаются нормально.
====================================================================== */
.rsk-porog .btn--gold[disabled] {
opacity: 1;
background: transparent;
border: 1px solid rgba(201, 168, 106, .55);
color: rgb(201, 168, 106);
box-shadow: none;
}
/* ======================================================================
65. НА ТЕЛЕФОНЕ КОЛОДА НЕ ДОЛЖНА ЧИТАТЬСЯ ВТОРОЙ КАРТОЙ (21.09.2026)
======================================================================
Найдено проходом по телефону как человеком (b8). Правится ОДНО число,
и правится оно поверх осознанного чужого решения — поэтому здесь
написано, чьё оно и почему поправлено.
ЧТО ВЫШЛО НА 390, ЗАМЕР ПОСЛЕ РАЗДАЧИ:
карта 158×236, 18..176
колода 158×236, 200..357
зазор 24 px, отношение размеров 1,00
Две одинаковые карты вплотную, и подпись «На сегодня» только у левой.
Читается как «выпало две карты» — то же семейство, что «куча карт» и
«что за мини карты», на которые владелец ругался дважды за день.
СТАЛО: колода 0,74 от карты — 117×175, отношение 0,74, уходит к
правому краю стола (за край не выходит, запас 5 px). Пара читается
как «карта и колода при ней»: колода явно меньше и явно не участник
расклада.
Высота задана явно: у колоды `height: var(--k-h)`, а `--k-h` считается
от `--k-w`, которую мы здесь не меняем, — без этой строки колода
осталась бы прежней высоты и растянулась.
====================================================================== */
/* ДОДЕЛАНО 21.09.2026. Правило выше уменьшало только КОРОБКУ колоды:
рубашки внутри (`.rsk-stopka__k { width: var(--k-w) }`) оставались
165 px при коробке 122 и вылезали вправо до 420 при экране 390 —
колода была не меньше карты, а срезана краем. Замер по детям, а не
по коробке: 242..420. Теперь колода получает СВОЮ `--k-w` (0,74 от
карты, считает стол — одно место), и от неё идут и коробка, и
рубашки. Место то же, что было задумано: центр на 0,40 ширины карты
от правого края стола, низ колоды вровень с низом карты.
После: колода 122×183, 245..367, стол кончается на 372. */
@media (max-width: 559px) {
[data-slug="karta-dnya"]:is([data-scena="idet"], [data-scena="gotovo"]) .rsk-stol--odna,
.rsk-ug .rsk-stol--odna {
--k-koloda: calc(var(--k-w) * .74);
}
[data-slug="karta-dnya"]:is([data-scena="idet"], [data-scena="gotovo"]) .rsk-stopka,
.rsk-ug .rsk-stol--odna .rsk-stopka {
--k-w: var(--k-koloda);
width: var(--k-w);
height: calc(var(--k-w) * 1.5);
}
[data-slug="karta-dnya"]:is([data-scena="idet"], [data-scena="gotovo"]) .rsk-stopka,
.rsk-ug .rsk-stol--odna .rsk-stopka:not(.rsk-stopka--sredina) {
left: calc(100% - var(--k-w) * .54);
top: calc(var(--k-w) * 1.284 + 18px);
}
}
/* 65а. ПОКА КАРТУ НЕ ТЯНУЛИ, СТОЛ НА ТЕЛЕФОНЕ НЕ ДЕРЖИТ МЕСТО ПОД НЕЁ.
Замер 390, витрина: стол 733 px, колода 461..746, ниже — 420 px
пустоты до черты: скрытая позиция держала место под карту, которая
ляжет СБОКУ от колоды, а не под ней (раздел выше). Позиция возвращается
в поток в тот же миг, когда сцена уходит в `idet`, — скрипт мерит цель
полёта уже после этого, так что раздача не меняется. */
@media (max-width: 559px) {
[data-slug="karta-dnya"][data-scena="zhdet"] .rsk-stol--odna .rsk-poz--zhdet,
[data-slug="da-net"][data-scena="zhdet"] .rsk-stol--odna .rsk-poz--zhdet { display: none; }
}
/* 29.09.2026: то же место держала и «да/нет» (стол на один вопрос, та же
колода сверху): на 412 после колоды оставалось около 400 px пустоты. */
/* 65б. СТОЛ КАРТЫ ДНЯ НЕ МЕНЯЕТ ВЫСОТУ, КОГДА КАРТУ ВЫТЯНУЛИ
(22.09.2026, просьба сессии движения).
ЗАМЕР НА 390, боевые файлы, сцена переключена руками, переходы
заглушены:
ждёт стол 351,2 = полоса под колоду 335,2 + поле 16, места нет
(его прячет 65а)
идёт стол 341 = поле 18 + карта с подписью 307 + поле 16
Десять пикселей — это скачок ровно в тот миг, когда человек нажал
кнопку и смотрит на стол. На 560 и шире расхождения нет (замер: 0).
СТАЛО: обе высоты считаются от ОДНОГО числа — `--k-max`, потолка
карты этого стола. Полоса под колоду у ждущего стола — `--k-max ×
1,68 + 16` (раздел «ГДЕ ЛЕЖИТ КОЛОДА», телефон), плюс нижнее поле
16. Столько же стол держит и после раздачи; выше этого он не
опускается, ниже не становится. Второго источника числа нет: резерв
стоит на самом столе и действует в обеих сценах.
Колода при этом всё равно уезжает вбок и худеет до 0,74 (раздел 65)
— это отдельное решение владельца, и резервом его не отменяют. */
@media (max-width: 559px) {
[data-slug="karta-dnya"] .rsk-stol--odna {
min-height: calc(var(--k-max) * 1.68 + 32px);
}
}
/* ======================================================================
66. РАМКИ НА КАРТЕ ПОРОГА УБРАНЫ (пик #258, доделано 21.09.2026)
======================================================================
Владелец, дословно: «убери ебаные рамки у карты выглядит ужасно».
Цитата приведена как есть, с матом: по ней через месяц будут судить,
что он на самом деле сказал, а смягчённый пересказ этого не даёт.
Та же фраза стоит выше, в комментарии про лицо панели, — теперь оба
места совпадают дословно.
ЧТО МЫ СДЕЛАЛИ В ПРОШЛЫЙ РАЗ И ПОЧЕМУ ЭТОГО БЫЛО МАЛО. Тогда я сняла
двойную рамку вокруг самого окна и вокруг блока согласия, и это было
верно, но не про то: рамки, на которые он показывал, рисует САМА
РУБАШКА. Лицо панели — это картинка задника колоды
(`koloda-1/rubashka-720.webp`, раздел 45), а у неё по краю напечатана
двойная линейка и ромбы-треугольники по углам. При `background-size:
cover` печатная рамка карты попадала ровно на края панели и читалась
как рамка интерфейса, которую кто-то нарисовал поверх.
ЧТО СДЕЛАНО: рубашка увеличена до 178 % и смещена так, что её
печатная рамка уходит за края панели. Остаётся то, ради чего она и
бралась, — материал карты: астрологический узор, фактура, глубина.
Ни одного правила про рамки-границы здесь нет и не нужно: убирать
было нечего, надо было перестать показывать чужой край.
ПОЧЕМУ НЕ ЗАТЕМНИТЬ И НЕ ЗАМЕНИТЬ КАРТИНКУ. Затемнение до
невидимости рамки съело бы и узор — панель перестала бы быть картой,
а он этот вид принимал (#207: «нас встречает такая панель, может её
сделать в виде карты»). Заменить рубашку другой картинкой — значит
развести лицо панели и настоящую колоду, а они нарочно одинаковые:
панель уходит в колоду переворотом, и подмены не должно быть видно. */
.rsk-porog .rsk-vhod__lico {
background-size: auto, 178%;
background-position: 0% 0%, 50% 42%;
}
/* ======================================================================
67. СТРОКА БЕДЫ ВСТАЁТ ПОД КНОПКУ, А НЕ РЯДОМ С НЕЙ (21.09.2026)
======================================================================
Просьба ведущей по находке 73: строка беды под «Разложить карты»
выходит узкой колонкой. В эту же строку приходит «На сегодня расклад
уже был. Приходите завтра» — то есть её видит каждый, кто зашёл за
вторым бесплатным раскладом в сутки, а не только тот, кто лезет
инструментами разработчика.
ПРИЧИНА. С 560 блок действия становится строкой:
`@media (min-width: 560px) { .rsk-hero__deystvie { flex-direction: row } }`.
Кнопка и абзац беды оказываются соседями в одной строке и делят
420 px между собой.
ЗАМЕР НА ЖИВОЙ СТРАНИЦЕ ВОПРОСОВ, 1790, текст «На сегодня расклад
уже был. Приходите завтра»:
блок 420, строка
кнопка «Разложить карты» 64 px ← сжата до нечитаемой
строка беды 342 px, две строки
СТАЛО: блок переносит строки, а строка беды и строка ожидания
занимают в нём отдельный ряд целиком.
окно 1790 кнопка 420, беда 420 × одна строка
окно 1920 кнопка 420, беда 420 × две строки (текст длиннее)
окно 560 кнопка 386, беда 386 × одна строка
окно 390 без изменений: там блок и так столбец, беда 339
Кнопка вернулась к своей ширине, строка читается на всю ширину блока. */
.rsk-hero__deystvie { flex-wrap: wrap; }
.rsk-hero__deystvie > .rsk-beda,
.rsk-hero__deystvie > .rsk-zhdem__stroka {
flex: 1 0 100%;
min-width: 0;
}
/* ======================================================================
68. «НА СЕГОДНЯ РАСКЛАД УЖЕ БЫЛ» — ЗАКОНЧЕННЫЙ ЭКРАН (21.09.2026)
======================================================================
Скрипт при отказе `na-segodnya-vsyo` больше не уводит сцену в `idet`:
заголовок, лид и колода стоят как при загрузке, кнопка остаётся
погашенной (вид — раздел 36), на сцене стоит `data-otkaz`.
Строка причины — не ошибка, а спокойное сообщение: тем же золотым
волоском слева, каким отбита подпись под разбором. Слова — из
rasklady_teksty.НА_СЕГОДНЯ, здесь только вид.
`.rsk-priglasi` — пустое скрытое место под блок «пригласить друга».
Вида у него пока нет: оформит тот, кто его наполнит. */
.rsk-hero:has([data-otkaz]) .rsk-hero__deystvie > .rsk-beda {
padding: 2px 0 2px 14px;
border-left: 1px solid var(--rsk-line-lit);
color: var(--ink);
}
.rsk-hero__deystvie > .rsk-priglasi { flex: 1 0 100%; min-width: 0; }
.rsk-priglasi[hidden] { display: none; }
/* ======================================================================
69. БЛОК «ЗАКАЗАТЬ У ЖИВОГО ТАРОЛОГА» — АСТРОЛЯБИЯ С ЛУНАМИ (пик #261)
======================================================================
Владелец, 21.09.2026, посмотрев макет в движении, дословно:
«вот так с планетами хорошо только текст надо норм поставить туда»
ЧТО ЭТО. Вместо фона «сукно и дым» (разделы 59 и 62; правила фона и
уголков оттуда сняты), которого под завесой .9 не было видно, в панели текста стоит диск: картинка
астролябии с фазами луны (ChatGPT, правило 9; без людей и букв) и
вокруг неё живые кольца на SVG. Мотив взят с рубашки колоды —
гексаграмма и луны.
«ТЕКСТ НОРМ ПОСТАВИТЬ». Колонка текста сидит в спокойной середине
диска, луны идут ВОКРУГ неё, а не сквозь неё. Для этого:
— центр диска привязан к КОЛОНКЕ ТЕКСТА, а не к панели. У якоря
`.rsk-zov__orn` нарочно нет `left`: он встаёт туда, где начинается
содержимое панели, какой бы ни был её отступ (44/62/72 — эти числа
живут в разделе блока и сюда не продублированы). От него диск
отступает на --zov-dx — к центру круга, описанного вокруг текста;
— сторона коробки не меньше 977 px: при ней кольцо лун обходит
колонку 518×363 с запасом. На широких экранах диск растёт до высоты
панели;
— под колонкой мягкое круглое затемнение: тонкие линии гексаграммы
под буквами гаснут, луны снаружи остаются яркими. Общей завесы на
всю панель больше нет.
ВСЕ ЧИСЛА ДИСКА — В ОДНОМ МЕСТЕ, переменными у `.rsk-zov__in`
(правило 8.7). Картинка и SVG стоят в одной квадратной коробке и
совпадают центром на любой ширине.
ДВИЖЕНИЕ — только transform и opacity (и один раз stroke-dashoffset
при появлении). Кольца дорисовываются за 2 с по уже существующему
явлению (.rsk-ya → .rsk-ya--vidno, раздел 8): нового наблюдателя для
этого не нужно. Диск идёт 300 с на оборот, кольцо засечек навстречу —
180 с, внутреннее — 140 с, искра — 28 с, шесть звёзд мерцают раз в
7 с. Пока блок вне экрана, скрипт вешает `.rsk-zov--spit`, и всё
стоит: телефон не греется. prefers-reduced-motion — статичная
картинка. Без скрипта — тоже статичная и сразу дорисованная.
ДВА ОТСТУПЛЕНИЯ, ПРИНЯТЫЕ ВЛАДЕЛЬЦЕМ ВМЕСТЕ С ВАРИАНТОМ:
на телефоне панель выше на 72 px (дуга лун встаёт над заголовком и
под нижней кнопкой, а не под буквами) и у кнопки-контура внутри блока
тёмная подложка — иначе сквозь неё видны линии.
Фотографию, шрифты, кегль и тексты не трогаем (правило 0).
====================================================================== */
.rsk-zov {
background-image: none; /* гасит светлый градиент из базового правила блока */
background-color: #090d08; /* тон поля картинки: шва между ней и панелью нет */
}
.rsk-zov__foto { position: relative; z-index: 1; } /* диск уходит ПОД снимок, а не на него */
.rsk-zov__in {
position: relative; z-index: 0;
/* --- все числа диска --- */
--zov-d: max(977px, 100%); /* сторона коробки диска; картинка — 86 % от неё */
--zov-dx: 239px; /* от левого края текста до центра диска */
--zov-ten: 170px; /* радиус затемнения — под колонку кнопок (пик #285) */
--zov-tekst: 518px; /* ширина колонки текста: абзац в 46ch при кегле 22 */
--zov-vys: 620px; /* высота панели: без текста её держать больше нечему */
/* Сдвиг кнопок к центру диска (Указка, пик #272). Якорь диска стоит
у ЛЕВОГО КРАЯ содержимого панели, а колонка кнопок центрируется
по этому содержимому: центры расходятся ровно на 50 % ширины
колонки минус --zov-dx. Отсюда и формула — своего числа здесь
нет, спрашиваем то же --zov-dx, что и диск (правило 8.7).
50 % считается от ширины самой колонки кнопок, на которой эта
переменная и раскрывается. */
--zov-knopki-dx: calc(var(--zov-dx) - 50%);
/* --- ВЫШЕ, В ГРАНИ ЗВЕЗДЫ (Указка, пик #285) -----------------------
Владелец, 23.09.2026: «надо изменить, чтобы она точно была во
внутренних гранях звезды, а то как будто чуть ниже».
Внутренний шестиугольник звезды на картинке `zov-disk-astrolyabiya-
1800.webp` (1800×1800, вписана в диск с отступом 7 % — правило
`.rsk-zov__kart{inset:7%}`) обмерен по пикселям картинки: верхняя
грань лежит на y=553–554, нижняя — на y=1197–1198 (общий для всех
столбцов x=750…1050, найдено сканом яркости). В долях СТОРОНЫ ДИСКА
(--zov-d) это 33,445 % и 64,214 % от его верхнего края; середина
между ними — 48,83 %, то есть на 1,17 % --zov-d ВЫШЕ центра диска.
Колонку кнопок держал центр панели = центр диска (50 %), отсюда и
«чуть ниже» — ровно на эту разницу.
25.09.2026 (замечание владельца «кнопки… в этом кольце не
симметрично») обе кнопки снова стоят в потоке одной парой, и
середина ПАРЫ ставится на середину шестиугольника — ровно на эти
1,17 %. Прежние 4,43 % добирали подвес второй кнопки вне потока;
подвеса больше нет, и поправка на него ушла вместе с ним. */
--zov-knopki-dy: calc(var(--zov-d) * -0.0117);
}
/* От 600 колонка текста встаёт ПО ЦЕНТРУ панели (сам текст остаётся
выровнен влево). Иначе круг, описанный вокруг текста у левого края
панели, на широком экране на треть уезжал под фотографию, и левых лун
не было видно. Диск идёт за текстом сам — у якоря нет left.
Панель обрезает диск по своим краям; слева срез смягчён растворением,
чтобы луны никогда не ложились на снимок Альбины (правило 0); до 1024
снимок стоит сверху, и растворять слева нечего. */
@media (min-width: 600px) {
.rsk-zov__in {
padding-inline: max(38px, calc((100% - var(--zov-tekst)) / 2));
overflow: hidden;
}
}
@media (min-width: 1024px) {
.rsk-zov__in::after {
content: ''; position: absolute; z-index: -1; pointer-events: none;
top: 0; bottom: 0; left: 0; width: 110px;
background: linear-gradient(90deg, #090d08, rgba(9, 13, 8, 0));
}
}
@media (max-width: 599px) {
.rsk-zov__in {
--zov-d: 185vw;
--zov-dx: 0px;
--zov-ten: 150px; /* та же правка, что и выше: под колонку кнопок */
/* На телефоне якорь диска сам стоит по середине панели
(.rsk-zov__orn { left: 50% } ниже), а колонка кнопок — по
середине того же содержимого. Центры уже совпадают, двигать
нечего. */
--zov-knopki-dx: 0px;
/* 480 — та же высота панели, при которой владелец принял блок с
текстом (замер 489 px на 390). Текст ушёл, а высоту держим: это
она показывает кольца и луны вокруг кнопок. */
--zov-vys: 480px;
padding-block: 66px 68px;
overflow: hidden;
}
}
.rsk-zov__orn {
position: absolute; z-index: -1; pointer-events: none;
top: 0; bottom: 0; width: 0; /* left нарочно не задан: якорь встаёт по левому краю текста */
}
@media (max-width: 599px) { .rsk-zov__orn { left: 50%; } }
/* --- КОЛЕСО ЦЕЛИКОМ В ПАНЕЛИ (25.09.2026) ------------------------------
Владелец: «колесо вылазит за границы, которое крутится». Так и было:
сторона диска 185vw на телефоне (721 px на 390 при панели 352) и
не меньше 977 px на компьютере — панель резала луны и кольца по
краям на всех ширинах, от 390 до 2880.
Теперь сторона диска — меньшая из сторон панели минус --zov-kray,
на любой ширине. Панель объявлена контейнером размеров, и --zov-d
считается в её единицах (cqw/cqh): то же одно число берут коробка
диска, затемнение и сдвиг кнопок — второй формулы нет (правило 8.7).
Внутренних отступов у панели больше нет: единицы контейнера меряют
его содержимое, а мерить надо саму панель; колонку текста они и так
больше не держат — текста нет (пик #270).
Диск стоит по середине панели: якорь растянут на всю панель, диск —
на 50 % от него. Тем же числом --zov-dx формула --zov-knopki-dx
даёт ноль — кнопки на той же оси без своего сдвига.
Затемнение левого края от 1024 снято: оно прятало луны, заходившие
на снимок, а заходить им больше некуда — и половина колеса была бы
темнее другой.
Старые браузеры без контейнеров (Safari до 16) остаются на прежнем
виде: всё новое — внутри @supports. */
@supports (container-type: size) {
.rsk-zov__in {
container-type: size;
--zov-kray: 8px; /* зазор от кромки колеса до края панели: искра r=500 выступает на 1–3 px */
--zov-d: calc(min(100cqw, 100cqh) - 2 * var(--zov-kray));
--zov-dx: 50%;
/* Затемнение под кнопками — доля того же диска, а не пиксели:
170 px при диске ~1000 — это 0,17. Фиксированные 150 на телефоне
при диске 336 закрыли бы колесо целиком. */
--zov-ten: calc(var(--zov-d) * .17);
padding: 0;
}
.rsk-zov__orn { left: 0; right: 0; width: auto; }
.rsk-zov__in::after { content: none; }
}
/* Контейнер размеров не видит высоту, данную min-height: для него
высота «авто» — ноль (замер: 100cqh = 0 на 390 и 768), и диск
схлопывался. До 1024 высоту панели держит только --zov-vys — она
и становится высотой. От 1024 панель тянет по снимку сетка, там
высота настоящая и трогать её нельзя. */
@supports (container-type: size) {
@media (max-width: 1023px) {
.rsk-zov__in { height: var(--zov-vys); }
}
/* На телефоне колесо ограничено ШИРИНОЙ панели, и лишние 480 − 352
по высоте стояли бы пустыми полосами над и под ним. Панель
квадратная: высоту даёт ширина. */
@media (max-width: 599px) {
.rsk-zov__in { --zov-vys: auto; aspect-ratio: 1; }
}
}
.rsk-zov__disk {
position: absolute; top: 50%; left: var(--zov-dx);
height: var(--zov-d); aspect-ratio: 1;
transform: translate(-50%, -50%);
}
.rsk-zov__disk::after { /* затемнение ровно под колонкой кнопок */
/* top сдвинут на --zov-knopki-dy тем же числом, что и сами кнопки
(пик #285): колонка стоит внутри граней звезды, не в центре диска —
затемнение следует за ней, а не остаётся в середине. Координата
своя не считается: то же число, что двигает .rsk-zov__puti. */
content: ''; position: absolute; left: 50%; top: calc(50% + var(--zov-knopki-dy));
width: calc(var(--zov-ten) * 2.5); height: calc(var(--zov-ten) * 2.5);
transform: translate(-50%, -50%); border-radius: 50%;
background: radial-gradient(closest-side,
rgba(7, 10, 7, .9) 0, rgba(7, 10, 7, .84) 62%, rgba(7, 10, 7, .5) 80%, rgba(7, 10, 7, 0) 100%);
}
.rsk-zov__kart, .rsk-zov__kolca { position: absolute; display: block; }
.rsk-zov__kart {
inset: 7%; width: 86%; height: 86%; object-fit: contain;
border-radius: 50%;
}
.rsk-zov__kolca { inset: 0; width: 100%; height: 100%; overflow: visible; }
.rsk-zov__kolca * { fill: none; stroke: var(--gold); }
.rsk-zov__krug { stroke-width: 1.6; opacity: .8; }
.rsk-zov__tonk { stroke-width: 1; opacity: .55; }
.rsk-zov__zasech { stroke-width: 16; opacity: .7; stroke-dasharray: 1.6 40.29; } /* 72 засечки на r=480 */
.rsk-zov__zasech--kr { stroke-width: 30; opacity: .85; stroke-dasharray: 2.4 248.93; } /* 12 крупных */
.rsk-zov__tochki { stroke-width: 3.2; opacity: .75; stroke-linecap: round; stroke-dasharray: .1 17.35; }
.rsk-zov__kolca .rsk-zov__iskra { stroke: var(--gold-lit); stroke-width: 3; stroke-linecap: round;
stroke-dasharray: 90 2910; opacity: .95; }
.rsk-zov__kolca .rsk-zov__zv { fill: var(--gold-lit); stroke: none; opacity: .9; }
.rsk-zov__ris { stroke-dasharray: var(--dl); }
@media (max-width: 599px) {
.rsk-zov__krug { stroke-width: 2.6; }
.rsk-zov__tonk { stroke-width: 1.8; }
.rsk-zov__kolca .rsk-zov__iskra { stroke-width: 5; }
.rsk-zov__vnutr { display: none; } /* на телефоне легче: одно кольцо и искра */
}
/* Кнопка-контур внутри блока: тёмная подложка, чтобы линии не просвечивали */
.rsk-zov .btn--ghost { background-color: rgba(9, 13, 8, .72); }
/* --- В ЦЕНТРЕ ДИСКА ТОЛЬКО ДВА ВЫХОДА (Указка, пик #270) -------------
Владелец, 22.09.2026: «„Хотите заказать расклад у живого таролога" и
„Если вы хотите обучиться самостоятельно…" — я бы убрал и в центре
звезды оставил только „заказать расклад", „пройти обучение" — и всё,
в центре, и как будто всё вокруг них движется».
Что сделано:
— оба текста-пути с экрана убраны. Заголовок остался в разметке
(им подписана секция, и к нему ведёт крестик окна записи) и спрятан
от глаза; второй текст просто не выводится;
— две кнопки встали одна под другой ПО ЦЕНТРУ колонки, а колонка
сидит в спокойной середине диска: движение колец и лун вокруг них
осталось нетронутым, ни одного числа диска я не трогал;
— панели задана высота. Раньше её держал текст; без текста две
кнопки оставили бы от диска узкую полосу, и «всё вокруг» стало бы
не видно. Высота живёт тут же, рядом с остальными числами диска.
Правило .rsk-zov__put--vtoroy (раздел 38) остаётся на месте и ничего
не красит: элемента с этим классом больше не выводится. Вернёт
владелец текст — вернётся и вид, ничего не переписывая. */
.rsk-zov .rsk-zov__put--tiho {
position: absolute;
width: 1px; height: 1px;
margin: 0; padding: 0;
overflow: hidden; clip-path: inset(50%);
white-space: nowrap;
}
/* --- «РОВНО В ЗВЕЗДЕ» (Указка, пик #272) -----------------------------
Владелец, 22.09.2026: «в середине „Заказать расклад", а чуть ниже
„Обучение Таро" — ровно в звезде».
«В СЕРЕДИНЕ» — ЭТО ПРО ПЕРВУЮ КНОПКУ, А НЕ ПРО ПАРУ. По пику #270
центрировалась вся колонка целиком, и середина звезды приходилась
в зазор между кнопками: золотая сидела на 33–37 px ВЫШЕ центра
диска (замер 390/768/1440/2880). Теперь в потоке остаётся одна
золотая кнопка — её и центрирует панель, — а «Обучение Таро»
подвешено под ней. Так высота второй кнопки перестала утягивать
первую вверх, и ни одного числа для этого считать не нужно.
ПО ГОРИЗОНТАЛИ колонка сдвинута на --zov-knopki-dx (объявлена
рядом с числами диска): якорь диска стоит у левого края содержимого
панели, а колонка центрируется по нему же, и центры расходились на
20 px от 600 и выше.
Зазор между кнопками живёт ОДНИМ числом здесь же и им же отмеряется
подвес второй кнопки.
ПО ВЕРТИКАЛИ (Указка, пик #285) колонка поднята на --zov-knopki-dy —
тем же числом, что и затемнение под ней (объявлено рядом с
--zov-knopki-dx). Панель центрировала колонку по своей середине, а
середина внутреннего шестиугольника звезды на картинке выше центра
диска; без этого сдвига низ призрачной кнопки лежал у самой нижней
грани звезды почти без запаса.
ПАРА, А НЕ ПОДВЕС (25.09.2026). Владелец: «Кнопки „сделать расклад"
очень большие и „обучения" в этом кольце не симметрично». Было: на
телефоне обе во всю ширину панели (300 px на 390), на компьютере
золотая по своему тексту, а «Обучение Таро» по min-width 240 —
на 2880 выходило 270 и 242; вторая висела под первой вне потока,
и пара сидела ниже середины звезды на высоту второй кнопки.
Стало: обе в одной колонке сетки шириной по более длинной надписи —
ширина у них одна и та же всегда; пара целиком стоит на середине
шестиугольника (--zov-knopki-dy); зазор — тот же --zov-shag.
Высота и поля кнопки — доля стороны диска (одно число, --zov-d):
колесо меньше — кнопки меньше, но не ниже 44 px под палец и не
выше прежних 60 px. Надпись в одну строку — nowrap. */
.rsk-zov__puti {
--zov-shag: 14px; /* зазор между кнопками */
position: relative;
display: grid; grid-template-columns: max-content;
justify-content: center; row-gap: var(--zov-shag);
width: 100%;
transform: translate(var(--zov-knopki-dx, 0px), var(--zov-knopki-dy, 0px));
}
/* Общее правило блока ставит кнопкам align-self: start и отбивку
сверху, а от 560 — min-width 240; здесь ширину даёт колонка. */
.rsk-zov .rsk-zov__puti .btn {
align-self: center; margin-top: 0;
width: 100%; min-width: 0;
min-height: clamp(44px, calc(var(--zov-d) * .05), 60px);
padding-inline: clamp(14px, calc(var(--zov-d) * .03), 40px);
white-space: nowrap;
}
/* --- КЕГЛЬ ПОДПИСЕЙ, КАК У ДРУГИХ КНОПОК (Указка, снимок 26.09.2026) --
Владелец: «они же огромные, не симметрично в круге» (окно Telegram
~340 px). Тут смешаны две вещи: ширина и центр уже даёт колонка
(Указка, пик #272/25.09) — считает --zov-d, тем же числом, что диск,
и на 320…430 центр кнопки и центр картинки .rsk-zov__kart совпадают
(замер Playwright, разница < 0,1 px — придиры нет).
А ВОТ КЕГЛЬ БЫЛ МЕЛЬЧЕ, ЧЕМ У ДРУГИХ ГЛАВНЫХ КНОПОК СТРАНИЦЫ НА ТОЙ ЖЕ
ШИРИНЕ: здесь стояло 12 px, а у «Продолжить» в окне 18+ и у самой кнопки
(«Заказать расклад», «Обучение Таро») где угодно ещё на сайте — 14, это
кегль правила .btn в site.css, тут его никто не менял. (Кнопки навигации
в шапке — свой, ещё более мелкий шрифт, 10–11 px, но это не кнопки-
действия, а строка меню, сравнивать с ней нечего.) Прежняя запись
ниже объясняла это тем, что 14 px «наезжали на кольцо лун» — тогда
у пары не было общей колонки, и кегль был единственным рычагом. Теперь
ширину держит колонка, а не кегль, и наезд убирает не мелкий шрифт,
а меньшее поле по бокам — оно и убавлено ниже. Кегль вернули к 14,
как у остальных кнопок. Зазор 10 px и высота 44 — под палец — не
трогали. */
@media (max-width: 599px) {
.rsk-zov__puti { --zov-shag: 10px; }
.rsk-zov .rsk-zov__puti .btn {
font-size: 14px;
padding-inline: clamp(10px, calc(var(--zov-d) * .022), 40px);
}
}
/* Высота панели и КОЛОНКА ПО СЕРЕДИНЕ. Раньше выравнивание по центру
стояло только от 1024 (раздел 6) — там панель стоит рядом с
фотографией и тянется по ней. Ниже 1024 панель была обычным блоком,
и две кнопки прижимались к её верху: на 390 они оказывались на 66 px
от края, то есть ВЫШЕ центра диска, и «вокруг них» оставалась только
верхняя дуга. Теперь колонка центрируется на всех ширинах. */
.rsk-zov__in {
display: flex; flex-direction: column; justify-content: center;
min-height: var(--zov-vys);
}
@media (prefers-reduced-motion: no-preference) {
/* Появление: пока скрипт не сказал «видно» — кольца не дорисованы */
.rsk-zov__kart { transition: opacity 2.4s ease; }
.rsk-zov__ris { transition: stroke-dashoffset 2s cubic-bezier(.4, 0, .2, 1) var(--z, 0s); }
.rsk-zov__poyavl { transition: opacity 1.6s ease 1.2s; }
.rsk-zov.rsk-ya:not(.rsk-ya--vidno) .rsk-zov__kart,
.rsk-zov.rsk-ya:not(.rsk-ya--vidno) .rsk-zov__poyavl { opacity: 0; }
.rsk-zov.rsk-ya:not(.rsk-ya--vidno) .rsk-zov__ris { stroke-dashoffset: var(--dl); }
.rsk-zov__kart { animation: rsk-zov-oborot 300s linear infinite; }
.rsk-zov__vnesh { transform-origin: 500px 500px; animation: rsk-zov-oborot 180s linear infinite reverse; }
.rsk-zov__vnutr { transform-origin: 500px 500px; animation: rsk-zov-oborot 140s linear infinite; }
.rsk-zov__orbita { transform-origin: 500px 500px; animation: rsk-zov-oborot 28s linear infinite; }
.rsk-zov__kolca .rsk-zov__zv { animation: rsk-zov-merc 7s ease-in-out infinite; animation-delay: var(--z, 0s); }
/* Блок вне экрана — всё стоит (класс вешает rasklady.js) */
.rsk-zov--spit .rsk-zov__kart,
.rsk-zov--spit .rsk-zov__kolca * { animation-play-state: paused; }
}
@keyframes rsk-zov-oborot { to { transform: rotate(360deg); } }
@keyframes rsk-zov-merc { 0%, 62%, 100% { opacity: .9; } 78% { opacity: .15; } }
@media print { .rsk-zov__orn { display: none; } }
/* ======================================================================
70. ПЛАШКА ПРЕДЛОЖЕНИЯ, ЭКРАН ОПЛАТЫ И «ВАС ЖДЁТ РАСКЛАД» (21.09.2026)
======================================================================
Путь решён владельцем 21.09.2026: «сначала согласуются с человеком
вопросы… если он хочет 3 то ассистент ему предлагает 5 говорит возьми
за 200 рублей… тогда он даёт ему ссылку на оплату ждёт подтверждение».
НОВОГО ЯЗЫКА ЗДЕСЬ НЕТ, и заведён он быть не может. Плашка
предложения — родня выбранной ступени (`.rsk-vybor__variant--active`)
и выбранной строки вопроса (раздел 37а): те же три признака — золотая
кромка #c5a25d, тёплая заливка rgba(197,162,93,.17) и золотая черта
снизу. Этими же тремя признаками отмечены плашка «вас ждёт расклад» и
ничем — экран ожидания оплаты: там своего вида нет вовсе, стоит та же
строка ожидания `.rsk-zhdem`, что у сбора вопросов.
ФЛАЖОК ВМЕСТО КРУЖКА. Когда расклады продаются, вопросов отмечается
любое число, и отметка становится флажком. Вид у неё тот же, что у
кружка из раздела 37а, — размер, волосок, золото, свечение; меняется
ОДНА вещь: форма. Круг говорит «одно из», скруглённый квадрат — «любое
число», и это единственное, что человеку надо здесь различить.
Ничего существующего правила ниже не перекрашивают: они отвечают
только на `[data-vp-vybor-mnogo]`, которого до сегодня не было.
ТЕЛЕФОН: КНОПКИ ДРУГ ПОД ДРУГОМ. На 390 обложка отдаёт под содержимое
354 px; две кнопки в ряд — это 171 px на каждую, а в надписи стоит
название ступени и цена. Поэтому ряд на узком экране разворачивается
в столбец, и каждая кнопка занимает строку целиком. Горизонтальной
прокрутки при этом нет: ширину кнопкам даёт не содержимое, а колонка.
ЗОНА НАЖАТИЯ 44 px — нижний предел цели под палец. У кнопок раздела
он уже соблюдён высотой, здесь он задан явно: плашки и хвост стоят
среди текста, и кнопка в них не растягивается сама. */
/* --- Отметка вопроса флажком: расклады продаются -------------------- */
.rsk-vopros [data-vp-vybor-mnogo] { border-radius: 7px; }
@media (min-width: 2200px) {
.rsk-vopros [data-vp-vybor-mnogo] { border-radius: 9px; }
}
/* --- Плашка предложения ступени ------------------------------------- */
.rsk-predlozhenie {
margin: 18px 0 0;
padding: 16px 18px;
border: 1px solid #c5a25d;
border-radius: 4px;
background: rgba(197, 162, 93, .17);
box-shadow: inset 0 -2px 0 #c5a25d;
}
.rsk-predlozhenie[hidden] { display: none; }
/* мертво 22.09.2026 — строка добора ушла из .rsk-predlozhenie в
.rsk-vopros-dobor (пик #273), этот родитель её больше не накрывает.
Отступ и цвет теперь в разделе про .rsk-vopros-dobor выше по файлу.
.rsk-predlozhenie .rsk-predlozhenie__eshche { margin: 0 0 14px; color: var(--ink); }
*/
/* Строка про оферту и согласие идёт шириной плашки, а не 68ch: в плашке
и так узкая колонка, и второй предел резал бы её ступенькой. */
.rsk-predlozhenie .rsk-ogovorka { max-width: none; }
.rsk-predlozhenie > .rsk-ogovorka[data-vp-oferta] { margin: 14px 0 0; }
.rsk-predlozhenie .rsk-beda { margin: 12px 0 0; }
@media (max-width: 559px) {
.rsk-predlozhenie { padding: 14px; }
}
/* --- Экран «проверяем оплату» --------------------------------------- */
.rsk-zakaz { margin: 22px 0 0; }
.rsk-zakaz[hidden] { display: none; }
.rsk-zakaz__knopki {
display: flex; flex-wrap: wrap; gap: 12px;
margin: 16px 0 0;
}
.rsk-zakaz__knopki .btn {
flex: 1 1 220px;
min-width: 0; min-height: 44px;
}
.rsk-zakaz__knopki .btn[hidden] { display: none; }
@media (max-width: 559px) {
.rsk-zakaz__knopki { flex-direction: column; }
.rsk-zakaz__knopki .btn { flex: 1 1 auto; width: 100%; }
}
/* --- Хвост готового расклада: «хранится до» и «удалить» ------------- */
/* Стоит под разбором и той же мерой, что он: строка о сроке — часть
расклада, а не подпись к странице. */
.rsk-zakaz-hvost {
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: 14px;
margin: 20px 0 0;
max-width: 70ch;
}
.rsk-zakaz-hvost[hidden] { display: none; }
.rsk-zakaz-hvost > .rsk-ogovorka { flex: 1 1 240px; margin: 0; max-width: none; }
.rsk-zakaz-hvost > .rsk-ogovorka[hidden] { display: none; }
.rsk-zakaz-hvost .btn { flex: 0 0 auto; min-height: 44px; }
.rsk-zakaz-hvost .btn[hidden] { display: none; }
@media (max-width: 559px) {
.rsk-zakaz-hvost { gap: 12px; }
.rsk-zakaz-hvost .btn { flex: 1 1 100%; width: 100%; }
}
/* --- Плашка «вас ждёт расклад» -------------------------------------- */
.rsk-zhdet {
display: flex; flex-wrap: wrap; align-items: center;
gap: 14px;
margin: 0 0 24px;
padding: 16px 18px;
border: 1px solid #c5a25d;
border-radius: 4px;
background: rgba(197, 162, 93, .17);
box-shadow: inset 0 -2px 0 #c5a25d;
}
.rsk-zhdet[hidden] { display: none; }
.rsk-zhdet > p { flex: 1 1 240px; margin: 0; color: var(--ink); }
.rsk-zhdet .btn { flex: 0 0 auto; min-height: 44px; }
/* МЕСТО В ОБЛОЖКЕ НА УЗКОМ ЭКРАНЕ. Сетка первого экрана расставляет
детей формы по `order` (разделы про .rsk-hero--vopros): у кого его
нет, у того ноль — то есть выше H1, у которого order: 1. Плашка
так и вставала: на 390 она оказывалась первой на экране, а заголовок
страницы — под ней. Замер 22.09.2026: плашка y=144, H1 y=339.
Тот же order, что у личной полосы и шага рассказа: при равном order
порядок решает разметка, а в ней полоса выше плашки, плашка выше
рассказа. Своего числа здесь не заводим — оно из того же ряда. */
@media (max-width: 1023px) {
.rsk-hero--vopros .rsk-zhdet { order: 7; }
}
@media (max-width: 559px) {
.rsk-zhdet { padding: 14px; }
.rsk-zhdet .btn { flex: 1 1 100%; width: 100%; }
}
/* ======================================================================
70. ПЕРЕВЁРНУТАЯ КАРТА: ПЛАШКА НАЗВАНИЯ ЧИТАЕТСЯ (22.09.2026)
======================================================================
ТЗ владельца от 22.09.2026, дословно: «перевёрнутая карта —
перевёрнутый рисунок, плашка названия читается».
БЫЛО: `.rsk-karta--perevernuta .rsk-karta__art { transform: rotate(180deg) }`
(раздел 14) крутит картинку целиком. Название карты нарисовано НА
картинке — пергаментная табличка у нижнего края, — и после поворота
оно оказывается наверху вверх ногами. Прочесть его нельзя.
СТАЛО: у перевёрнутой карты наверху лежит `.rsk-karta__imya` — окно
в ту же самую картинку, НЕ повёрнутое и обрезанное ровно по
табличке. Рисунок остаётся перевёрнутым, название читается, и стоит
оно там, где у перевёрнутой карты и оказалась нарисованная табличка,
— второго названия на карте не появляется.
ПОЧЕМУ НЕ СВОИМИ БУКВАМИ. Название на картинке и название в базе —
разные строки: в тетради Альбины карта зовётся «ШУТ (ДУРАК)»,
«ЖРИЦА (ВЕРХОВНАЯ ЖРИЦА/ПАППЕССА)», а на табличке нарисовано «ШУТ» и
«ВЕРХОВНАЯ ЖРИЦА». Таких карт пять из 78, ещё у шести имя длиннее 15
знаков и в табличку на 390 не помещается. Нарисуй мы свою плашку — на
прямой и перевёрнутой карте стояли бы РАЗНЫЕ названия. Здесь же
показывается настоящая табличка: её шрифт, её знаки масти, её цвет,
и ни одного нашего слова (CLAUDE.md, правило 1).
ОТКУДА ЧИСЛО 0,155. Замер по всем 78 картинкам колоды
(static/img/rasklady/koloda-1/*-720.webp, разбор яркости по строкам
и столбцам): верх нарисованной таблички 0,858…0,955 высоты картинки,
низ 0,956…0,983, края 0,028…0,972 ширины. Полоса высотой 0,155 от
нижнего края картинки накрывает её у всех 78 — и у однострочных
(«ШУТ»), и у двухстрочных («КОЛЕСО ФОРТУНЫ»), — с запасом 1,3 % над
самой высокой табличкой. По ширине берём карту целиком: самая
широкая табличка занимает 0,944 ширины, уже обрезать нечего.
ЧИСЛО ОДНО (правило 8.7): `--imya-dolya`. Высота окна считается от
него, и высота картинки внутри окна — от него же. Поменяется колода
— правится одна строка.
Картинка карты 2:3, и карта 2:3 (раздел 30.1), поэтому `contain`
совпадает с точной посадкой: доли по картинке и доли по карте — одно
и то же. Второй загрузки картинки нет: `src`, `srcset` и `sizes` у
окна те же, что у лица, браузер берёт тот же файл из кэша. */
.rsk-karta { --imya-dolya: .155; }
/* Разделы 30.3 и 15.6 гасят `.rsk-karta__imya`, когда на лице есть
картинка: название на ней уже нарисовано. Для перевёрнутой это
перестаёт быть правдой — возвращаем блок, но только ей.
Два селектора и ни одного `:has()`: правило должно работать и там,
где `:has()` не понимают, а один непонятный селектор в списке убил
бы всё правило целиком (та же причина, что в разделе 30.3). Вес
(0,3,0) — ровно как у гасящих правил, и берёт своё порядком в
файле. */
.rsk-karta--perevernuta .rsk-karta__lico .rsk-karta__imya,
.rsk-karta--perevernuta.rsk-karta--art .rsk-karta__imya {
visibility: visible;
position: absolute;
top: 0; left: 0; right: 0;
height: calc(var(--imya-dolya) * 100%);
z-index: 2;
overflow: hidden;
padding: 0; margin: 0;
/* Верхние углы скруглены как у лица: иначе окно торчит квадратом
за край карты. */
border-radius: var(--k-r) var(--k-r) 0 0;
}
/* Волосок над названием (раздел 15.5) рисовался поверх пустого блока.
Здесь в блоке настоящая табличка со своей рамкой — вторая черта
поперёк неё читается как царапина. */
.rsk-karta--perevernuta .rsk-karta__lico .rsk-karta__imya::before,
.rsk-karta--perevernuta.rsk-karta--art .rsk-karta__imya::before {
display: none;
}
/* Картинка внутри окна: во всю карту по ширине и по высоте, низом
вровень с низом окна. Видно ровно нижние --imya-dolya картинки —
ту самую табличку. Поворот сюда не доходит: крутится
`.rsk-karta__art`, а это другой блок.
pointer-events: none — чтобы точка в середине плашки отдавала саму
плашку, а не картинку: по ней проверяется, что табличка накрыта. */
.rsk-karta__imya-art {
position: absolute;
left: 0; bottom: 0;
width: 100%;
height: calc(100% / var(--imya-dolya));
display: block;
object-fit: contain;
object-position: center;
pointer-events: none;
border-radius: 0;
}
/* ======================================================================
71. ОБРЕЗАННАЯ ПОДПИСЬ РАСКРЫВАЕТСЯ ПО НАЖАТИЮ (22.09.2026)
======================================================================
Раздел 50б режет подпись одиночного вопроса тремя строками на 390:
длинные вопросы иначе разваливают ряд по высоте. Полный текст при
этом виден только на планшете и шире.
БЫЛО: на телефоне длинный вопрос обрывался многоточием, и достать
его было нечем.
СТАЛО: нажатие по подписи снимает обрезку и возвращает её обратно.
Признак `.rsk-poz--obrezano` ставит скрипт — только он знает, что
подпись не поместилась (`scrollHeight > clientHeight`). Где
подпись целиком — признака нет, курсор обычный и нажатие ничего не
делает. Полный текст лежит и в `title`: на большом экране он
показывается подсказкой.
Своих слов не добавлено ни одного: раскрывается тот же вопрос
человека. Вес селектора (0,5,0) — как у правила обрезки в 50б, и
берёт своё порядком в файле. */
@media (max-width: 559px) {
.rsk-hero--vopros [data-vp-stol] > .rsk-poz--obrezano:not(.rsk-poz--triplet) .rsk-poz__p {
cursor: pointer;
}
.rsk-hero--vopros [data-vp-stol] > .rsk-poz--razvernuta:not(.rsk-poz--triplet) .rsk-poz__p {
display: block;
-webkit-line-clamp: none;
line-clamp: none;
overflow: visible;
}
}
/* ======================================================================
72. КАРТА ДНЯ: СТРОКА СОГЛАСИЯ УХОДИТ, А НЕ ИСЧЕЗАЕТ (22.09.2026)
======================================================================
ТЗ: «Переходы между шагами без скачков высоты: ни один элемент не
прыгает больше чем на 2 px при смене `data-scena`».
БЫЛО: на карте дня в миг `zhdet → idet` строка «согласие действует»
гасла через `display: none` (раздел 66). Замер щупом на 390
(`plashka\shchup.py --chto pryzhok`, кадр 4, t 947 → 973): строка
пропадает, и `.rsk-hero__stol` вместе с колодой уезжает вверх на
97,6 px в ОДИН кадр. Прокруткой это не лечится, и вот почему:
страница в этот миг стоит в самом верху (scrollY = 0), двигать
полосу прокрутки вверх некуда — `безСкачка` в rasklady.js честно
считает поправку и не может её применить. Значит, лечить надо там,
где высота пропадает, а не там, где её пытаются догнать.
СТАЛО: строка уходит тем же ходом, что и надписи обложки рядом с
ней, — гаснет и схлопывается за 0,75 с. В миг смены сцены высота не
меняется вовсе, и колода остаётся на месте; дальше всё едет плавно и
вместе с заголовком, а не рывком.
Правило 7.1 не тронуто: строка видна ровно столько же, сколько была,
— всё время, пока видна кнопка расклада. Уходит она после того, как
человек карту уже вытянул.
Своя раскадровка, а не общая `rsk-nadpis-uhodit`: в этой строке
стоит ССЫЛКА на текст согласия. Схлопнутая до нуля, но оставшаяся
«видимой» ссылка остаётся в порядке обхода с клавиатуры — человек
уходит табом в невидимое. Поэтому последний кадр гасит и
`visibility`. Длительность и кривая — те же, что у надписей обложки
(раздел 55): они уходят одним движением, и разошлись бы на глаз.
Без движения (prefers-reduced-motion) — как было: строка просто
исчезает. Там же, где исчезают и надписи обложки. */
@keyframes rsk-stroka-uhodit {
0% { opacity: 1; transform: none; max-height: 240px;
visibility: visible; }
40% { opacity: 0; transform: translateY(-10px); max-height: 240px;
visibility: visible; }
100% { opacity: 0; transform: translateY(-10px); max-height: 0;
margin-block: 0; visibility: hidden; }
}
.rsk-hero:has([data-scena="idet"]) [data-soglasie-deystvuet],
.rsk-hero:has([data-scena="gotovo"]) [data-soglasie-deystvuet] {
display: block;
overflow: hidden;
animation: rsk-stroka-uhodit .75s cubic-bezier(.4, 0, .2, 1) both;
}
@media (prefers-reduced-motion: reduce) {
.rsk-hero:has([data-scena="idet"]) [data-soglasie-deystvuet],
.rsk-hero:has([data-scena="gotovo"]) [data-soglasie-deystvuet] {
animation: none;
display: none;
}
}
/* ======================================================================
73. ЛИЧНАЯ ПОЛОСА: СЧЁТ И ВХОД ЧЕРЕЗ БОТА (22.09.2026)
======================================================================
ЧТО ЭТО. Одна строка над полем рассказа: сколько раскладов сегодня
осталось и кнопка входа через бота. Числа и ссылки приходят с
сервера (`/rasklady/ya`), слова — из словаря; здесь только вид.
ПОЧЕМУ ПЕРЕДЕЛАНА В ТОТ ЖЕ ДЕНЬ. Первым заходом полоса была плашкой:
рамка, заливка, три отдельные строки счёта, пояснение про вход и
блок «пригласить друга». На 390 это 594 px — целый экран телефона
ВЫШЕ поля рассказа, то есть выше главного действия страницы, и ещё
634 px прыжка вниз, когда приходил ответ сервера. Мерило владельца:
«чтобы люди не страдали, всё понятно и комфортно».
ЧТО ИЗМЕНИЛОСЬ:
* приглашение друга уехало вниз страницы, под разбор (разметка);
* строка «зачем входить» — внутрь шага входа, где её и читают, за
секунду до ухода в бота;
* три числа идут одной бегущей строкой через « · »;
* рамка и заливка сняты. Справка о счёте никуда не зовёт, и кричать
ей нечем: зов к действию в разделе — золотая кромка плашки
предложения (раздел 70), и она остаётся только там.
ВТОРАЯ ПРАВКА ТОГО ЖЕ ДНЯ (Указка, пик #268). Владелец про «Войти»
и строку счёта рядом: «может сделать как люди привыкли». Кнопки
входа и выхода ушли В ШАПКУ РАЗДЕЛА, справа, — там их и ищут. От
полосы осталась ОДНА строка счёта мелкой подписью, и слова счёта в
словаре укорочены под неё (`schet_*` в app/rasklady_teksty.py):
«Сегодня: 1 расклад · карта дня 1 · за друзей 2». Обтекание,
которым кнопку уводило вправо, вместе с кнопкой и ушло.
НИЧЕГО НЕ ПРЫГАЕТ. Место под полосу занято ДО ответа сервера: пока
чисел нет, полоса стоит невидимой (`visibility`), а не выброшена из
потока. Резерв считан по строкам: `--polosa-strok` — сколько строк
занимает самый длинный счёт (три числа у вошедшего) на этой ширине,
`--polosa-stroka` — высота строки `.rsk-ogovorka` (16 px × 1.7).
Число строк живёт ЗДЕСЬ и только здесь: скрипт о нём не знает и
ничего не меряет (правило 8.7). Замеры — в папке
Claude outputs/polosa-2026-09-22.
КЕГЛЬ 16 px, не ниже (правило 0): счёт — обычная оговорка раздела
(`.rsk-ogovorka`). Прописными Manrope подписаны только названия
мессенджеров у приглашения, как подписи во всём разделе.
ЗОНА НАЖАТИЯ 44 px — как у кнопок раздела 70. На 390 кнопки шага
входа встают на всю ширину колонки и друг под друга: в ряду
«Telegram», «MAX» и отмена не помещаются. */
/* МЕСТО В ОБЛОЖКЕ. Сетка первого экрана расставляет детей формы по
`order` (разделы про .rsk-hero--vopros): у кого его нет, тот встаёт
в самое начало — над заголовком H1. Полосе место после прайса и
перед рассказом, поэтому order тот же, что у шага рассказа: при
равном order порядок решает разметка, а полоса в ней выше.
Имя класса НЕ .rsk-ya: этот класс занят явлением по прокрутке
(раздел 8), и блок с ним остался бы прозрачным навсегда — скрытый
элемент наблюдатель не увидит и класс видимости ему не поставит. */
@media (max-width: 1023px) {
.rsk-hero--vopros .rsk-lichnoe-mesto { order: 7; }
}
/* МЕСТО ПОД ПОЛОСУ держит обёртка, а не сама полоса. Полоса скрыта до
ответа сервера атрибутом `hidden`, а он в разделе выключает показ
через `display: none !important` (правило рядом с `.rsk-zamerlo`):
на скрытом узле резерв не удержится никакой. Обёртка стоит всегда,
и приход чисел не двигает ни строки ниже. */
.rsk-lichnoe-mesto {
--polosa-strok: 2;
--polosa-stroka: 27.2px; /* 16 px × 1.7 — строка .rsk-ogovorka */
min-height: calc(var(--polosa-strok) * var(--polosa-stroka));
/* Отбивка небольшая: резерв и так добавляет воздуха, когда счёт
короче самого длинного (у безымянного числа два, а не три). */
margin: 0 0 12px;
}
.rsk-lichnoe { margin: 0; }
/* Ряд кнопок остался один — внутри шага входа. Обтекания больше нет:
кнопки счёта уехали в шапку, и уводить вправо нечего. */
.rsk-lichnoe__knopki {
display: flex; flex-wrap: wrap; gap: 10px;
margin: 0;
}
.rsk-lichnoe__knopki .btn { min-width: 0; min-height: 44px; padding-inline: 20px; }
.rsk-lichnoe__knopki .btn[hidden] { display: none; }
.rsk-lichnoe__schet { margin: 0; max-width: none; }
.rsk-lichnoe__stroka[hidden] { display: none; }
/* Разделитель между числами РИСУЕТСЯ, а не пишется словом: он стоит
только между видимыми числами, и пропавшее число уносит его с
собой. Своих слов в полосе по-прежнему ни одного. */
.rsk-lichnoe__stroka:not([hidden]) ~ .rsk-lichnoe__stroka:not([hidden])::before {
content: " · "; color: var(--gold-dim);
}
/* Шаг входа и строка беды идут своей строкой под счётом. */
.rsk-lichnoe__kanaly,
.rsk-lichnoe > .rsk-beda { margin: 0; max-width: none; }
.rsk-lichnoe__kanaly[hidden],
.rsk-lichnoe > .rsk-beda[hidden] { display: none; }
.rsk-lichnoe__kanaly { padding-top: 14px; }
.rsk-lichnoe__kanaly > .rsk-ogovorka { margin: 0 0 12px; max-width: none; }
.rsk-lichnoe__kanaly > .rsk-ogovorka[hidden] { display: none; }
@media (max-width: 559px) {
.rsk-lichnoe__knopki--kanaly { width: 100%; }
/* Два мессенджера встают рядом: это выбор из двух, и ряд читается
быстрее столбика. Отмена уходит своей строкой — она не выбор. */
.rsk-lichnoe__knopki--kanaly .btn { flex: 1 1 calc(50% - 5px); width: auto; }
.rsk-lichnoe__knopki--kanaly button.btn { flex: 1 1 100%; width: 100%; }
}
/* СКОЛЬКО СТРОК РЕЗЕРВИРУЕМ. Слова счёта укорочены (пик #268), и
самый длинный счёт вошедшего — «Сегодня: 1 расклад · карта дня 1 ·
за друзей 2» — с 390 укладывается в ОДНУ строку. Лесенки больше нет:
резерв одинаков на всех ширинах, кроме самых узких, где строка
всё-таки переносится.
Резерв всегда БОЛЬШЕ ИЛИ РАВЕН тому, что влезает: лишняя строка —
это воздух, нехватка — прыжок под пальцем.
ПОМЕНЯЛИСЬ СЛОВА СЧЁТА (Указка правит rasklady_teksty.py) — замерить
заново и поправить число. Иначе прыжок вернётся. */
@media (min-width: 390px) { .rsk-lichnoe-mesto { --polosa-strok: 1; } }
/* --- Блок «пригласить друга» ---------------------------------------
Стоит в двух местах — внизу страницы под разбором и в плашке
предложения (раздел 68), — но на экране бывает только в одном:
какое показать, решает скрипт.
ССЫЛКИ ЦЕЛИКОМ НЕ ВИДНО. В строке мессенджера остаются подпись и
кнопка: адрес длинный, на 390 он занимал по три ряда на каждого
бота, а нужен человеку в буфере, а не на экране. Поле со ссылкой
ждёт скрытым и раскрывается, только если браузер не дал буфер, —
тогда адрес виден и выделен (rasklady_vopros.js,
`запасноеКопирование`), и тупика не остаётся. */
.rsk-priglasi--vnizu { margin: 22px 0 0; max-width: 70ch; }
.rsk-priglasi__stroka {
margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--ink-70);
}
.rsk-priglasi__ssylka {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
margin: 0 0 10px;
}
.rsk-priglasi__ssylka[hidden] { display: none; }
/* Подписи мессенджеров одной ширины — кнопки под ними встают в
столбик, а не лесенкой. Ширина по самой длинной подписи
(«Telegram»); что длиннее — раздвинет ряд само. */
.rsk-priglasi__ssylka > .rsk-nad { flex: 0 0 auto; min-width: 84px; margin: 0; }
/* Поле ввода в разделе рассчитано на рассказ: min-height 150 px и
отбивка снизу под счётчик знаков (раздел про форму). Ссылке нужна
одна строка — высоту и отбивку задаём заново, остальное (волосок,
лист, курсор) остаётся общим. Своей строкой: когда поле всё же
раскрылось, длинному адресу нужна вся ширина. */
.rsk-priglasi__pole {
flex: 1 0 100%; min-width: 0;
min-height: 44px; padding: 10px 12px; font-size: 16px;
}
.rsk-priglasi__pole[hidden] { display: none; }
/* Кнопка ужимается и переносит надпись, а не вылезает за колонку:
ширину ей даёт ряд, а не длина слов. Проверено на заглушках — они
длиннее любых настоящих слов, и на 1440 кнопка с `flex: 0 0 auto`
торчала за край на 105 px. */
.rsk-priglasi__ssylka .btn {
flex: 0 1 auto; min-width: 0; min-height: 44px;
padding-inline: 20px; text-align: center;
}
.rsk-priglasi > .rsk-ogovorka { margin: 10px 0 0; max-width: none; }
.rsk-priglasi > .rsk-ogovorka[hidden] { display: none; }
/* ======================================================================
74. ШАГ ВОПРОСОВ: КНОПКА ВПЕРЁД, БЕЗОПАСНОСТЬ МЕЛКИМ (22.09.2026)
======================================================================
Владелец, 22.09.2026, дословно: «важен не как сам [сбор] идёт, а
важно, как карты достаются, и очень нужно подумать об удобстве, а у
тебя там всё утыкано безопасностью — можно её мелким шрифтом, главное
эргономика». И раньше, про этот же экран: «он не пускает, посмотри,
как мы мучаемся; может, я хочу сделать на 8 вопросов остановиться, а
не на 10».
ЧТО БЫЛО ЗАМЕРЕНО (стенд 8021, 390×844, десять собранных вопросов,
`Claude outputs/ergonomika-2026-09-22/bylo/`):
— над кнопкой стояли три отдельных куска текста в 16 px: галка с
полным текстом согласия в рамке, строка «согласие действует» и
абзац про оферту в пять строк. Кнопки при этом лежали в плашке
ВЫШЕ абзаца оферты;
— сколько вопросов отмечено, на экране не было написано нигде:
строка счёта пряталась целиком, когда расклады продаются;
— над списком стояло «Вопросов выходит 12, а тариф отвечает на 1»
— при том что отметить можно было любое число;
— баннер cookie (общесайтовый, `site.css`) высотой 147,5 px лежал
поверх списка: отметки № 3 и 4 накрыты им целиком
(`elementFromPoint` отдавал `#cookie`);
— сама отметка нажатия не принимала: её накрывал невидимый слой
подписи (`.rsk-vopros__t::after`, раздел 37а).
НОВОГО ЯЗЫКА ЗДЕСЬ НЕТ. Мелкая подпись — это кегль сносок, который в
разделе уже живёт: 13 px у подвала (`.foot__note`, site.css) и
прописные Manrope у надстрочников (`.rsk-nad`). Основной текст нигде
не мельчает: 16 px у `.rsk-ogovorka` остаётся, мельче становятся
ТОЛЬКО строки про согласие, оферту и запертую кнопку, помеченные
классом `--melko`. Правило 0 проекта про основной текст — цело. */
/* --- 74.1. Мелкая подпись ---------------------------------------------
Одна мера на все строки безопасности. Ссылки внутри остаются
ссылками — их цвет и подчёркивание задаёт раздел выше, здесь только
кегль и цвет самой строки. */
.rsk-ogovorka--melko {
margin: 10px 0 0;
max-width: 64ch;
font-size: 14px;
line-height: 1.5;
color: var(--ink-55);
}
.rsk-ogovorka--melko[hidden] { display: none; }
@media (min-width: 2200px) {
.rsk-ogovorka--melko { font-size: 17px; }
}
/* Галка согласия у кнопки: та же площадка под палец, но без рамки и
плиты. Рамка и тёмная заливка нужны окну порога, где этот блок —
единственная дверная ручка на экране; здесь он подпись под кнопкой, и
плита из него делала вторую кнопку. Площадка нажатия не тронута:
её держит `.rsk-porog__galka` (44×44, раздел 2), и вся строка
по-прежнему нажимается через . */
.rsk-porog__soglasie--melko {
align-items: flex-start;
gap: 12px;
margin: 10px 0 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
font-size: 14px;
line-height: 1.5;
color: var(--ink-55);
}
.rsk-porog__soglasie--melko:has(input:checked) {
border: 0;
background: none;
color: var(--ink-70);
}
@media (min-width: 2200px) {
.rsk-porog__soglasie--melko { font-size: 17px; }
}
/* --- 74.2. Блок действия: подписи над кнопкой, кнопка одна -----------
`.rsk-hero__deystvie` с 560 становится строкой (раздел 67), и подписи
в ней встали бы соседями кнопки. Каждая занимает ряд целиком — тем
же приёмом, каким это уже сделано для строки беды. */
.rsk-hero__deystvie > .rsk-ogovorka,
.rsk-hero__deystvie > .rsk-porog__soglasie,
.rsk-hero__deystvie > .rsk-deystvie__knopki {
flex: 1 0 100%;
min-width: 0;
}
.rsk-hero__deystvie > .rsk-ogovorka[hidden],
.rsk-hero__deystvie > .rsk-porog__soglasie[hidden] { display: none; }
/* Кнопки шага. На экране их ОДНА — какая именно, решает скрипт: на
бесплатной ступени «Сделать расклад — бесплатно», на платной «Сделать
расклад — 500 ₽», при выключенной продаже прежняя «Разложить карты».
Ряд остаётся рядом на случай, когда бесплатная и платная предложены
вместе (один отмеченный вопрос): на телефоне они встают столбиком,
с 560 — рядом, как и остальные пары кнопок раздела. */
.rsk-deystvie__knopki {
display: flex; flex-direction: column; gap: 12px;
margin: 14px 0 0;
}
.rsk-deystvie__knopki .btn { min-height: 48px; width: 100%; }
.rsk-deystvie__knopki .btn[hidden] { display: none; }
@media (min-width: 560px) {
.rsk-deystvie__knopki { flex-direction: row; }
.rsk-deystvie__knopki .btn { flex: 1 1 0; min-width: 0; }
}
/* Почему кнопка не жмётся. Чуть светлее прочих подписей: это не
оговорка, а указание, что сделать. Волосок слева — тот же приём, что
у строки беды, только без её цвета: беды тут нет. */
.rsk-pochemu-zaperta {
margin: 10px 0 0;
padding-left: 12px;
border-left: 1px solid var(--rsk-line);
color: var(--ink-70);
}
/* --- 74.3. Плашка предложения: остались одни слова -------------------
Кнопки из неё ушли в блок действия, поэтому плашка перестала быть
«панелью с кнопками» и стала строкой-объяснением. Три признака
выбранного (кромка, заливка, черта снизу) оставлены: по ним человек
узнаёт эту плашку с прошлых экранов. */
.rsk-predlozhenie__stupen {
margin: 0;
font-size: 17px;
line-height: 1.5;
color: var(--ink);
}
.rsk-predlozhenie__stupen[hidden] { display: none; }
/* мертво 22.09.2026 — тот же родитель, что у правила выше в файле
(раздел «Плашка предложения»): .rsk-predlozhenie__eshche больше не
лежит внутри .rsk-predlozhenie.
.rsk-predlozhenie .rsk-predlozhenie__eshche { margin: 8px 0 0; }
.rsk-predlozhenie__stupen[hidden] + .rsk-predlozhenie__eshche { margin-top: 0; }
*/
@media (min-width: 2200px) {
.rsk-predlozhenie__stupen { font-size: 21px; }
}
/* Счёт отмеченных стоит над списком и должен читаться: это единственное
место, где видно, сколько уже отмечено. Прежние 11 px с прижимом
вправо — мера счётчика знаков в углу поля, не эта. Прописные Manrope
— язык надстрочников раздела (`.rsk-nad`), своего вида не завожу. */
/* 23.09.2026, пик #279: тем же правилом набирается счёт в сводке
(`[data-vp-itog-schet]`, раздел 76.1). Слова там те же самые, и
выглядеть они должны так же — второго набора чисел не завожу
(правило 8.7). Отбивка сверху у сводки своя: она первая в плашке. */
.rsk-schetchik[data-vp-schet],
.rsk-schetchik[data-vp-itog-schet] {
margin: 16px 0 0;
text-align: left;
font-size: 13px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--gold-dim);
}
.rsk-schetchik[data-vp-schet][hidden],
.rsk-schetchik[data-vp-itog-schet][hidden] { display: none; }
@media (min-width: 2200px) {
.rsk-schetchik[data-vp-schet],
.rsk-schetchik[data-vp-itog-schet] { font-size: 16px; }
}
/* --- 74.4. Отметка вопроса принимает нажатие сама --------------------
Раздел 37а растягивает подпись на всю строку невидимым слоем
(`.rsk-vopros__t::after { inset: 0 }`) — чтобы нажималась вся строка.
Слой накрыл и саму отметку: палец по кружку попадал в подпись, и
отметка срабатывала «через label». Для человека разницы нет, а вот
проверке и экранному диктору цель нажатия должна быть настоящей —
Playwright на 390 не смог отметить ни одного вопроса из десяти.
Поднимаем отметку над слоем. Вся строка нажимается как и раньше. */
.rsk-vopros [data-vp-vybor] { position: relative; z-index: 1; }
/* --- 74.5. Баннер cookie не накрывает то, что нажимают ---------------
Баннер общесайтовый: `#cookie` в base.html, стили в site.css, и я их
не трогаю. Но лежит он `position: fixed` у нижнего края и на 390
занимает 147,5 px — то есть шестую часть экрана телефона, поверх
всего, что там оказалось.
Что делаем со своей стороны: пока баннер висит, раздел резервирует
под него место в самом низу страницы и держит на столько же
`scroll-padding-bottom`. Первое значит, что в конце прокрутки под
баннером не остаётся ничего нажимаемого; второе — что любая
подводка к элементу (`scrollIntoView` в скрипте, прокрутка к полю в
браузере) останавливается выше баннера, а не под ним.
Признак читается с `body`: баннер — сосед `.shell`, а не раздела, и
селектором от `.rsk-pole` до него не дотянуться. `:has()` в этом
файле уже используется (разделы 11, 14, 37а); не поддержан — всё
останется как было.
Число одно на оба правила и взято с запасом над замером: 168 px на
телефоне (баннер 147,5 + отбивка), 104 на широких, где баннер
становится одной строкой.
23.09.2026 число уехало в переменную `--rsk-kuki`: с пиком #279 на
странице появилась липкая полоса сводки, и ей нужно то же самое
число — встать НАД баннером. Двух источников правды у одного числа
быть не должно (правило 8.7), поэтому объявлено оно здесь, а сводка
спрашивает. Переменной нет, когда баннера нет, — и тогда у сводки
работает её собственная отбивка от края окна. */
/* 26.09.2026: число больше не угадываем. Высоту полосы меряет site.js
и кладёт в --cookie-h на ; нижний отступ страницы и
scroll-padding под полосу даёт site.css (раздел «Cookie») — для всего
сайта сразу, поэтому свой отступ у .rsk-pole снят (иначе место
резервировалось бы дважды). Здесь --rsk-kuki остаётся только именем,
по которому липкие панели раздела встают НАД полосой.
26.09.2026, тем же днём: владелец включил Метрику и в приложении
(Telegram, MAX) — своё окно согласия там (`app_pd_consent`, правило
7.2) про cookie и аналитику не говорит ни слова, оно только про
персональные данные расклада, и достраивать в нём смысл своими
словами нельзя (правило 1). Поэтому баннер cookie здесь тот же самый
(текст, кнопки — из base.html/site.css, ничего своего), только
компактнее и с полем снизу под панель мессенджера, а не только под
условный вырез сайта. */
html.rsk-app #cookie {
padding: 12px var(--pad) calc(12px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
gap: 8px;
}
html.rsk-app .cookie__row { gap: 8px; }
body:has(#cookie:not([hidden])) {
--rsk-kuki: var(--cookie-h, 0px);
}
/* ======================================================================
75. МАГИЯ ЧТЕНИЯ НА ВЕСЬ ЭКРАН (Указка, пик #277, 23.09.2026)
======================================================================
Владелец, дословно:
«потом, когда карты выдались, пишется, что мы читаем карты — это
красивой анимацией, какой-то магической, на весь экран; то есть
карты выдались, потом они все перевернулись, и если за всё время
анимации расклад не готов, то идёт красивая магическая анимация
„читаю карты", и потом идёт расклад»
ПОРЯДОК СОБРАН РОВНО ТАКОЙ: раздача → все карты переворачиваются →
стол накрыт, а слов всё нет → встаёт этот слой → пришёл первый кусок
текста → слой уходит, разбор печатается потоком. Признак «пора»
считает скрипт (rasklady.js, `window.rskМагия`), разметку слоя он же
и рождает — в шаблонах её нет, и три копии в трёх шаблонах не нужны.
ПОЧЕМУ ЭТО НЕ ВТОРОЙ РАЗДЕЛ ПОВЕРХ 40-го. Раздел 40 («магия чтения:
чем занята середина») оформляет СТОЛ, пока считается разбор: свет по
сукну и взгляд по картам. Он остаётся как есть и здесь не правится
ни одной строкой — под пеленой он продолжает идти, и когда слой
уходит, человек видит тот же живой стол, а не погасший. Здесь же —
то, что лежит ПОВЕРХ страницы, во весь экран: пелена, свет, искры,
кометы и дым. Ничего из раздела 40 не переопределяется.
СВОИХ СЛОВ ЗДЕСЬ НЕТ ВОВСЕ: строку ставит скрипт из
`app/rasklady_teksty.py` (ОЖИДАНИЕ — «Читаю карты», «Думаю», «Смотрю,
что сложилось»), той же тройкой, что уже идёт строкой внутри разбора.
ШРИФТ И КЕГЛЬ (правило 0). Строка — Source Serif 4, тот же, что у
всего основного текста: своего шрифта слой не заводит. Кегль крупный
(30 px на телефоне, 44 на 1440, 56 на 2200), и это не «мелкий текст»,
которого правило 0 не разрешает, а наоборот. Картинок и файлов слой
не грузит: весь рисунок — градиенты.
ЧИСЛА ВРЕМЕНИ ЖИВУТ ЗДЕСЬ, А СКРИПТ ИХ СПРАШИВАЕТ (правило 8.7):
`--t-magiya-vhod`, `--t-magiya-uhod`, `--t-magiya-smena`,
`--t-magiya-gasnet`. Второго набора миллисекунд в скрипте нет.
ДВИЖУТ ТОЛЬКО transform И opacity. Ни одного слоя, который КРАСИТ
каждый кадр: на этой ошибке раздел уже обжигался (раздел 29, «дым
двигается попиксельно, глаз режет когда печатается»). По той же
причине здесь нет `backdrop-filter`: размытие во весь экран
пересчитывается каждый кадр поверх идущих анимаций, а слой стоит
минутами.
ВНЕ ЭКРАНА — ПАУЗА, А НЕ СНЯТИЕ. Увели вкладку — скрипт вешает
`rsk-magiya--spit`, и всё замирает там, где застали (тот же приём и
тот же довод, что в разделе 40: снятая анимация даёт рывок).
Z-INDEX 110 ВЫБРАН, А НЕ ВЗЯТ С ПОТОЛКА. Порог 18+ — 120
(`.rsk-porog`), занавес перехода — 200 (site.css). Слой обязан быть
НИЖЕ обоих: окно согласия и переход между страницами важнее зрелища.
Баннер cookie — 60, и его слой закрывает: он уже прочитан к этому
мигу, а нажать под пеленой всё равно нечего.
--- ДОВЕДЕНО 23.09.2026, ТЕМ ЖЕ ДНЁМ ----------------------------------
Владелец просил «красивую магическую анимацию на весь экран», а
независимая проверка первой сборки намерила вот что: между кадрами с
шагом 0,5 с меняется 0,3–2,1 % пикселей, искры по 2 px и только внизу,
комета раз в 19–31 с, У САМОЙ НАДПИСИ НЕ ДВИЖЕТСЯ НИЧЕГО. То есть
получилось красивое затемнение с искорками, а не магия.
Что добавлено и откуда взято (нового языка не заведено ни одного):
— КОЛЬЦО ВОКРУГ НАДПИСИ — та же астролябия, что в разделе 69: кольца,
засечки, точки и искра по орбите, тем же SVG и тем же поворотом
`rsk-zov-oborot`. Второго keyframes на «оборот» в файле нет;
— СВЕТ ЗА НАДПИСЬЮ ДЫШИТ. Это и есть ответ на «у надписи не движется
ничего»: пятно за буквами ходит по масштабу и яркости за 3,6 с;
— ИСКРЫ ПО ВСЕМУ ЭКРАНУ, 36 штук (на телефоне 24 — батарея), 2–5 px,
у девяти мягкий ореол. Было 18 по нижней кромке;
— КОМЕТЫ ЛЕТЯТ ЧАЩЕ: раз в 5–6 с вместо раза в 19–31 с, и летят они
ТЕМИ ЖЕ keyframes `rsk-kometa-1/2/3`, что и кометы неба (раздел 29,
вместе с уводом хвоста из раздела 52). Три своих keyframes
`rsk-magiya-kometa-a/b/c` за ненадобностью убраны;
— НАДПИСЬ МЕРЦАЕТ .85 → 1. Мерцание сидит на вложенном `span`, а не
на самой строке, и это не украшение разметки: у строки прозрачность
уже занята сменой слов (переход), а одно свойство не может быть
сразу переходом и анимацией — анимация всегда старше, и смена слов
как раз поэтому не гасла, а только смазывалась.
Рамки прежние: двигаются только transform и opacity, ни одного слоя,
который красит каждый кадр; вне экрана пауза; при выключенном
движении — неподвижная картинка. Шрифт, кегль и слова не тронуты.
====================================================================== */
.rsk-magiya {
/* Эти четыре спрашивает скрипт (правило 8.7) */
--t-magiya-vhod: 640ms;
--t-magiya-uhod: 520ms;
--t-magiya-smena: 7000ms;
--t-magiya-gasnet: 550ms;
/* И это тоже: сколько искр рождать. Число живёт здесь, потому что
здесь же ему раздаются места и сроки, а на телефоне оно меньше — в
разметке такого условия не написать. */
--mag-iskr: 36;
/* Сроки движения. Все здесь, ни одного второй раз. */
--t-mag-dyhanie: 3600ms; /* вдох-выдох света за надписью */
--t-mag-obod: 72s; /* кольцо засечек, по часовой */
--t-mag-tochki: 54s; /* кольцо точек, навстречу */
--t-mag-krup: 108s; /* крупные деления */
--t-mag-orbita: 11s; /* искра по орбите */
--t-mag-mercanie: 3200ms; /* мерцание надписи */
/* За сколько дуга ожидания дочерчивается до полной, когда результат
уже пришёл (кусок 5в). Скрипт это число НЕ спрашивает: дочерчивает
переход, а не он. */
--t-mag-dolya: 300ms;
/* Поперечник кольца. Считается один раз и отсюда же берётся светом за
надписью: два круга обязаны быть соосны и соразмерны. */
--mag-krug: min(92vw, 84vh, 680px);
position: fixed; inset: 0; z-index: 110;
display: flex; align-items: center; justify-content: center;
padding: 0 var(--pad);
overflow: hidden;
opacity: 0;
transition: opacity var(--t-magiya-uhod) ease;
}
.rsk-magiya.vidna {
opacity: 1;
transition-duration: var(--t-magiya-vhod);
}
/* Телефон: искр меньше трети. Не из-за тесноты — из-за батареи: слой
стоит минутами, и каждая искра это отдельный слой композитора.
Первые 24 места в списке ниже нарочно разбросаны по всему экрану,
поэтому обрезанный набор не сбивается в угол. */
@media (max-width: 559px) {
.rsk-magiya { --mag-iskr: 24; }
}
/* Все слои рисунка — абсолютные и сквозные для нажатий: закрывает слой
само полотно, а не его украшения. */
.rsk-magiya > i {
position: absolute; inset: 0; display: block;
pointer-events: none;
}
/* --- 1. Пелена ---------------------------------------------------------
Цвета сайта и ничего больше: --ground в середине, --deep по краям.
Середина светлее краёв нарочно — под ней лежит стол, и совсем
гасить его не за чем: сквозь пелену видно, что карты на месте. */
.rsk-magiya__pelena {
background:
radial-gradient(118% 92% at 50% 48%,
rgba(20, 27, 21, .92), rgba(14, 19, 15, .985) 70%);
}
/* --- 2. Свет ------------------------------------------------------------
Три тёплых пятна дышат на своих сроках — 7, 9 и 11 секунд. Сроки не
кратны друг другу, поэтому рисунок не повторяется и смотреть на него
можно все три минуты, что считается разбор. Тот же довод, что у
четырёх пятен в разделе 40, и те же цвета.
БЫЛО 11, 14 и 18 с. За полсекунды такое пятно сдвигалось меньше чем
на свою мягкую кромку — глаз читал его как неподвижное. Втрое короче
срок, вдвое шире размах — и пятна поплыли. */
.rsk-magiya__svet i {
position: absolute; display: block;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%,
rgba(224, 196, 140, .15),
rgba(201, 168, 106, .05) 46%,
transparent 72%);
animation: rsk-magiya-dyh var(--t, 14s) ease-in-out infinite alternate;
will-change: transform, opacity;
}
.rsk-magiya__svet i:nth-child(1) {
left: 12%; top: 18%; width: 58vmax; height: 58vmax;
--t: 7s; animation-delay: -3s;
}
.rsk-magiya__svet i:nth-child(2) {
left: 44%; top: 34%; width: 44vmax; height: 44vmax;
--t: 9s; animation-delay: -8s;
}
.rsk-magiya__svet i:nth-child(3) {
left: 24%; top: 46%; width: 66vmax; height: 66vmax;
--t: 11s; animation-delay: -13s;
}
@keyframes rsk-magiya-dyh {
from { opacity: .34; transform: translate3d(-4%, -2.8%, 0) scale(.88); }
to { opacity: 1; transform: translate3d(4%, 2.8%, 0) scale(1.16); }
}
/* --- 3. Дым -------------------------------------------------------------
Два мягких пятна, расходящихся друг от друга. Сдвиг — transform, а не
background-position: ровно та ошибка, которую раздел 29 уже чинил. */
.rsk-magiya__dym {
background:
radial-gradient(46% 38% at 22% 30%, rgba(201, 168, 106, .07), transparent 70%),
radial-gradient(54% 44% at 78% 70%, rgba(224, 196, 140, .05), transparent 72%);
animation: rsk-magiya-dym 74s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes rsk-magiya-dym {
from { transform: translate3d(-3%, 2%, 0) scale(1.04); }
to { transform: translate3d(3%, -2%, 0) scale(1.12); }
}
/* --- 4. Искры -----------------------------------------------------------
Тридцать шесть золотых точек поднимаются и гаснут. БЫЛО восемнадцать,
все по 3 px и все по нижней кромке экрана (top 80–99 %) — проверка
написала про них «искры по 2 px и только внизу», и это правда: верх
экрана стоял пустой.
СТАЛО: места разбросаны по всему полю, от 4 % до 99 % высоты; размер
у каждой свой, 2–5 px, и у девяти крупных мягкий ореол пошире — они
читаются как ближние, остальные как дальние. Срок 5–11 с вместо
9–18: за полсекунды искра проходит заметный кусок пути, а не свою же
толщину.
Сколько их — сказано ОДИН раз, переменной `--mag-iskr` в начале
раздела; скрипт спрашивает её и столько и рождает. На телефоне она
же становится 24. Места ниже расписаны на все 36: лишние строки
просто никому не достаются.
Каждая искра — точка с тенью: анимации на таких стоят дёшево даже
когда их три десятка. Срок и задержка у каждой свои и не кратные —
очереди слева направо, читающейся как полоса загрузки, не выходит. */
.rsk-magiya__iskry i {
position: absolute; display: block;
width: var(--w, 3px); height: var(--w, 3px); border-radius: 50%;
background: var(--gold-lit);
box-shadow: 0 0 var(--g, 10px) rgba(224, 196, 140, .6);
opacity: 0;
animation: rsk-magiya-iskra var(--t, 8s) ease-in-out infinite;
animation-delay: var(--z, 0s);
will-change: transform, opacity;
}
@keyframes rsk-magiya-iskra {
0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.5); }
12% { opacity: .95; }
56% { opacity: .62; }
100% { opacity: 0; transform: translate3d(var(--dx, 2vw), var(--dy, -46vh), 0) scale(1.3); }
}
.rsk-magiya__iskry i:nth-child(1 ) { left: 19.0%; top: 43.1%; --t: 5.9s; --z: -5.7s; --dx: 1.5vw; --dy: -36vh; --w: 2px; --g: 7px; }
.rsk-magiya__iskry i:nth-child(2 ) { left: 36.5%; top: 77.3%; --t: 9.5s; --z: -7.1s; --dx: 3.0vw; --dy: -53vh; --w: 3px; --g: 7px; }
.rsk-magiya__iskry i:nth-child(3 ) { left: 61.6%; top: 12.8%; --t: 5.2s; --z: -2.4s; --dx: 3.8vw; --dy: -32vh; --w: 3px; --g: 10px; }
.rsk-magiya__iskry i:nth-child(4 ) { left: 68.2%; top: 73.5%; --t: 10.3s; --z: -9.3s; --dx: 5.6vw; --dy: -53vh; --w: 3px; --g: 7px; }
.rsk-magiya__iskry i:nth-child(5 ) { left: 65.3%; top: 30.9%; --t: 9.6s; --z: -8.8s; --dx: -5.6vw; --dy: -47vh; --w: 3px; --g: 10px; }
.rsk-magiya__iskry i:nth-child(6 ) { left: 30.9%; top: 87.0%; --t: 10.1s; --z: -8.9s; --dx: -1.9vw; --dy: -38vh; --w: 3px; --g: 10px; }
.rsk-magiya__iskry i:nth-child(7 ) { left: 83.0%; top: 23.6%; --t: 9.0s; --z: -7.9s; --dx: 1.1vw; --dy: -37vh; --w: 5px; --g: 14px; }
.rsk-magiya__iskry i:nth-child(8 ) { left: 33.5%; top: 25.1%; --t: 11.2s; --z: -11.1s; --dx: 3.8vw; --dy: -48vh; --w: 5px; --g: 14px; }
.rsk-magiya__iskry i:nth-child(9 ) { left: 12.7%; top: 71.5%; --t: 7.6s; --z: -1.0s; --dx: 4.5vw; --dy: -47vh; --w: 5px; --g: 18px; }
.rsk-magiya__iskry i:nth-child(10) { left: 13.4%; top: 60.9%; --t: 10.6s; --z: -8.7s; --dx: -2.6vw; --dy: -34vh; --w: 2px; --g: 7px; }
.rsk-magiya__iskry i:nth-child(11) { left: 87.9%; top: 9.9%; --t: 5.8s; --z: -1.2s; --dx: 5.5vw; --dy: -38vh; --w: 3px; --g: 7px; }
.rsk-magiya__iskry i:nth-child(12) { left: 34.7%; top: 62.0%; --t: 6.9s; --z: -6.2s; --dx: -0.3vw; --dy: -46vh; --w: 3px; --g: 10px; }
.rsk-magiya__iskry i:nth-child(13) { left: 20.2%; top: 16.2%; --t: 9.4s; --z: -0.8s; --dx: -0.3vw; --dy: -61vh; --w: 3px; --g: 7px; }
.rsk-magiya__iskry i:nth-child(14) { left: 56.7%; top: 43.5%; --t: 7.0s; --z: -5.0s; --dx: 2.7vw; --dy: -50vh; --w: 3px; --g: 7px; }
.rsk-magiya__iskry i:nth-child(15) { left: 81.4%; top: 45.4%; --t: 8.8s; --z: -2.3s; --dx: -4.2vw; --dy: -32vh; --w: 3px; --g: 7px; }
.rsk-magiya__iskry i:nth-child(16) { left: 92.1%; top: 55.0%; --t: 9.3s; --z: -1.0s; --dx: -5.1vw; --dy: -55vh; --w: 3px; --g: 10px; }
.rsk-magiya__iskry i:nth-child(17) { left: 54.4%; top: 89.7%; --t: 9.3s; --z: -5.4s; --dx: -1.9vw; --dy: -39vh; --w: 4px; --g: 14px; }
.rsk-magiya__iskry i:nth-child(18) { left: 81.2%; top: 71.7%; --t: 6.1s; --z: -3.0s; --dx: 0.9vw; --dy: -36vh; --w: 4px; --g: 18px; }
.rsk-magiya__iskry i:nth-child(19) { left: 33.7%; top: 7.3%; --t: 8.2s; --z: -1.2s; --dx: -4.2vw; --dy: -49vh; --w: 2px; --g: 7px; }
.rsk-magiya__iskry i:nth-child(20) { left: 32.1%; top: 43.2%; --t: 9.4s; --z: -2.4s; --dx: -4.6vw; --dy: -29vh; --w: 3px; --g: 10px; }
.rsk-magiya__iskry i:nth-child(21) { left: 91.4%; top: 90.8%; --t: 7.9s; --z: -2.9s; --dx: -3.6vw; --dy: -57vh; --w: 3px; --g: 7px; }
.rsk-magiya__iskry i:nth-child(22) { left: 7.1%; top: 94.1%; --t: 6.4s; --z: -1.6s; --dx: 4.1vw; --dy: -57vh; --w: 4px; --g: 18px; }
.rsk-magiya__iskry i:nth-child(23) { left: 15.3%; top: 28.5%; --t: 6.0s; --z: -4.8s; --dx: 5.4vw; --dy: -29vh; --w: 3px; --g: 7px; }
.rsk-magiya__iskry i:nth-child(24) { left: 62.6%; top: 64.4%; --t: 5.9s; --z: -3.7s; --dx: 0.3vw; --dy: -47vh; --w: 5px; --g: 14px; }
.rsk-magiya__iskry i:nth-child(25) { left: 60.6%; top: 17.8%; --t: 7.7s; --z: -3.4s; --dx: -1.2vw; --dy: -57vh; --w: 3px; --g: 10px; }
.rsk-magiya__iskry i:nth-child(26) { left: 47.0%; top: 82.3%; --t: 9.9s; --z: -0.4s; --dx: -0.0vw; --dy: -34vh; --w: 2px; --g: 7px; }
.rsk-magiya__iskry i:nth-child(27) { left: 13.8%; top: 56.8%; --t: 6.9s; --z: -4.4s; --dx: -1.9vw; --dy: -60vh; --w: 2px; --g: 10px; }
.rsk-magiya__iskry i:nth-child(28) { left: 43.6%; top: 23.6%; --t: 9.5s; --z: -4.4s; --dx: 4.8vw; --dy: -34vh; --w: 3px; --g: 10px; }
.rsk-magiya__iskry i:nth-child(29) { left: 77.8%; top: 81.9%; --t: 6.8s; --z: -6.2s; --dx: -0.3vw; --dy: -52vh; --w: 3px; --g: 7px; }
.rsk-magiya__iskry i:nth-child(30) { left: 62.4%; top: 89.6%; --t: 7.8s; --z: -3.7s; --dx: 3.8vw; --dy: -54vh; --w: 3px; --g: 10px; }
.rsk-magiya__iskry i:nth-child(31) { left: 83.0%; top: 53.2%; --t: 10.6s; --z: -8.9s; --dx: 3.6vw; --dy: -40vh; --w: 3px; --g: 10px; }
.rsk-magiya__iskry i:nth-child(32) { left: 22.3%; top: 21.8%; --t: 10.6s; --z: -8.9s; --dx: 5.2vw; --dy: -36vh; --w: 3px; --g: 10px; }
.rsk-magiya__iskry i:nth-child(33) { left: 33.8%; top: 61.3%; --t: 11.0s; --z: -6.2s; --dx: 4.6vw; --dy: -44vh; --w: 2px; --g: 10px; }
.rsk-magiya__iskry i:nth-child(34) { left: 13.9%; top: 87.3%; --t: 8.5s; --z: -6.6s; --dx: -1.9vw; --dy: -32vh; --w: 3px; --g: 10px; }
.rsk-magiya__iskry i:nth-child(35) { left: 84.0%; top: 23.5%; --t: 7.1s; --z: -2.0s; --dx: -3.0vw; --dy: -55vh; --w: 4px; --g: 14px; }
.rsk-magiya__iskry i:nth-child(36) { left: 60.5%; top: 51.4%; --t: 7.7s; --z: -4.0s; --dx: 0.2vw; --dy: -52vh; --w: 5px; --g: 14px; }
/* --- 5. Кометы ----------------------------------------------------------
Три штриха по дуге. Хвост — тот же, что у комет неба: шесть
переходов, размытие и широкий мягкий ореол тенью (раздел 29).
ЛЕТЯТ ОНИ ТЕПЕРЬ ЧУЖИМИ keyframes, И ЭТО НАРОЧНО. Было три своих —
`rsk-magiya-kometa-a/b/c`, — и они повторяли то, что в файле уже
написано дважды: путь по дуге с доворотом штриха (раздел 29) и увод
хвоста прочь от солнца (раздел 52). Третья копия тех же дуг значит,
что следующая правка кометы дойдёт до двух мест из трёх. Поэтому
свои убраны, а здесь стоят `rsk-kometa-1/2/3` — те самые. Кадры в
них заданы долями, поэтому срок можно взять любой: путь и повороты
от этого не меняются, меняется только скорость.
ЧАСТОТА. Было 19, 26 и 31 секунда — проверка намерила «комета раз в
19–31 с» и была права: на три минуты ожидания это десяток комет на
весь экран. Стало 14, 17 и 21: полёт занимает три десятых круга, и
комета вылетает в среднем раз в 5–6 секунд. Небо над столом ожило,
метеорным потоком при этом не став.
`transform-origin: 100% 50%` — голова штриха, а не его середина. Без
этого поворот хвоста уводит голову с линии, и комета начинает
вилять; полный довод — в разделе 52. */
.rsk-magiya__komety i {
position: absolute; left: 0; top: 0; display: block;
width: min(44vw, 300px); height: 4px;
border-radius: 4px;
transform-origin: 100% 50%;
background: linear-gradient(90deg,
rgba(255, 241, 208, 0) 0%,
rgba(255, 241, 208, .05) 22%,
rgba(255, 241, 208, .13) 44%,
rgba(255, 241, 208, .30) 68%,
rgba(255, 247, 224, .58) 86%,
rgba(255, 252, 242, .92) 100%);
box-shadow:
0 0 26px 8px rgba(255, 241, 208, .10),
0 0 10px 2px rgba(255, 245, 220, .22);
filter: blur(2.6px);
opacity: 0;
will-change: transform, opacity;
}
.rsk-magiya__komety i:nth-child(1) {
animation: rsk-kometa-1 14s linear infinite;
animation-delay: -3s;
}
.rsk-magiya__komety i:nth-child(2) {
animation: rsk-kometa-2 17s linear infinite;
animation-delay: -9s;
}
.rsk-magiya__komety i:nth-child(3) {
animation: rsk-kometa-3 21s linear infinite;
animation-delay: -16s;
}
/* --- 5б. Кольцо вокруг надписи и свет за ней -----------------------------
Ответ на «у надписи не движется ничего».
КОЛЬЦО — это астролябия из раздела 69, прямо она: кольцо засечек,
кольцо точек, крупные деления и искра по орбите, нарисованные тем же
SVG в коробке 1000×1000 и повёрнутые тем же `rsk-zov-oborot`. Своего
keyframes на оборот в файле по-прежнему один.
ПОЧЕМУ КОЛЬЦА ИДУТ ВРАЗНОБОЙ И НАВСТРЕЧУ: одинаковые сроки слепились
бы в одно вращающееся пятно, встречные читаются как механизм. Сроки
72 / 54 / 108 секунд — это медленно, 5, 6,7 и 3,3 градуса в секунду;
зрелище тут не в скорости, а в том, что оно НЕ СТОИТ.
ИСКРА ПО ОРБИТЕ идёт за 11 с — единственное быстрое звено, и именно
она ловит глаз. Так же и в разделе 69: там кольца по 140–300 с, а
искра 28 с.
СВЕТ ЗА НАДПИСЬЮ дышит за 3,6 с: масштаб .9 → 1.12 и яркость .5 → 1.
Срок короткий нарочно — это дыхание, а не прилив; на нём и держится
«живое» ощущение середины экрана. Он же вытягивает яркость середины
до 40–60 из 255: читаться должно как тёплое золото на тёмном.
ТОЛЩИНА ЛИНИЙ ЗАДАНА ДЛЯ БОЛЬШОГО ЭКРАНА, а на телефоне коробка
ужата втрое, и волосок в 1,6 единицы превратился бы в полпикселя.
Поэтому на узком экране толщины подняты — тот же приём и та же
причина, что у колец раздела 69.
ШАГ ЗАСЕЧЕК — ОДНО ЧИСЛО: 41.02 единицы (72 засечки на r=470,
2π·470 = 2953,1). Обе записи `stroke-dasharray` ниже дают в сумме
ровно его, иначе кольцо не сомкнётся и на стыке будет виден шов. */
.rsk-magiya__krug { display: block; }
.rsk-magiya__oreol,
.rsk-magiya__kolca {
position: absolute; left: 50%; top: 50%;
width: var(--mag-krug); height: var(--mag-krug);
transform: translate(-50%, -50%);
pointer-events: none;
}
.rsk-magiya__oreol {
width: calc(var(--mag-krug) * 1.75); height: calc(var(--mag-krug) * 1.75);
border-radius: 50%;
background: radial-gradient(closest-side,
rgba(238, 214, 162, .25),
rgba(224, 196, 140, .16) 34%,
rgba(201, 168, 106, .07) 64%,
rgba(201, 168, 106, 0) 100%);
animation: rsk-magiya-dyhanie var(--t-mag-dyhanie) ease-in-out infinite;
will-change: transform, opacity;
}
@keyframes rsk-magiya-dyhanie {
0%, 100% { opacity: .54; transform: translate(-50%, -50%) scale(.9); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}
.rsk-magiya__kolca * { fill: none; stroke: var(--gold); transform-origin: 500px 500px; }
.rsk-magiya__obod { stroke-width: 1.6; opacity: .3; }
.rsk-magiya__tonk { stroke-width: 1; opacity: .22; }
.rsk-magiya__zasech { stroke-width: 14; opacity: .5; stroke-dasharray: 2 39.02; }
.rsk-magiya__krupn { stroke-width: 28; opacity: .34; stroke-dasharray: 3 225.83; }
.rsk-magiya__tochki { stroke-width: 3.6; opacity: .5; stroke-linecap: round;
stroke-dasharray: .1 52.79; }
.rsk-magiya__kolca .rsk-magiya__iskra {
stroke: var(--gold-lit); stroke-width: 5; stroke-linecap: round;
stroke-dasharray: 60 2685.9; opacity: .9;
}
.rsk-magiya__zasech { animation: rsk-zov-oborot var(--t-mag-obod) linear infinite; }
.rsk-magiya__tochki { animation: rsk-zov-oborot var(--t-mag-tochki) linear infinite reverse; }
.rsk-magiya__krupn { animation: rsk-zov-oborot var(--t-mag-krup) linear infinite reverse; }
.rsk-magiya__kolca .rsk-magiya__iskra {
animation: rsk-zov-oborot var(--t-mag-orbita) linear infinite;
}
@media (max-width: 559px) {
.rsk-magiya__obod { stroke-width: 3.4; }
.rsk-magiya__tonk { stroke-width: 2.6; }
.rsk-magiya__zasech { stroke-width: 26; stroke-dasharray: 4.6 36.42; }
.rsk-magiya__krupn { stroke-width: 44; stroke-dasharray: 6 222.83; }
.rsk-magiya__tochki { stroke-width: 8; }
.rsk-magiya__kolca .rsk-magiya__iskra { stroke-width: 11; }
}
/* --- 5в. Доля ожидания: вторая дуга по тому же кольцу --------------------
Указка, контейнер 4, пик #286, 23.09.2026. Владелец, дословно:
«вот тут окно загрузки, там был круг — если известно, [сколько идёт]
процесс, можно показывать, как круг заполняется; красиво было бы,
понятно, что скоро всё, в момент, когда он готовит вопросы, и не
только»
ЧИСЕЛ НА ЭКРАНЕ НЕТ И НЕ БУДЕТ. Просили круг, а не проценты: доля
видна только длиной золотой дуги. Ни в разметке, ни здесь процента
не написано.
У ДУГИ СВОЙ ОБОД, СНАРУЖИ ВСЕЙ АСТРОЛЯБИИ, и это не вкусовщина:
r = 470 занят ободом и засечками (толщина 14, то есть 463–477, а на
телефоне 26 — 457–483), r = 437 крупными делениями и искрой, r = 404
тонким кольцом и точками. Свободна только кромка. Радиус дуги задан
ОДИН раз — в rasklady.js, вместе с остальным чертежом, и там же из
него считается длина окружности, которой дуга отмеряется
(`stroke-dasharray`). Второй копии этих чисел нет — правило 8.7.
ПОЧЕМУ `stroke-dashoffset`, А НЕ `conic-gradient` ПОД МАСКОЙ. Layout
не трогает ни тот, ни другой, но маска заставляет перекрашивать весь
круг целиком, а штрих — только свою линию в девять единиц толщиной.
Дешевле ровно во столько раз, во сколько линия уже круга.
ПЕРЕХОДА В ОБЫЧНОЕ ВРЕМЯ ЗДЕСЬ НЕТ НАРОЧНО. Дугу ведёт скрипт, по
времени; переход поверх него был бы второй, отстающей правдой о том
же числе. Включается он ровно на один случай — `rsk-magiya--gotovo`:
результат пришёл, и дуга за `--t-mag-dolya` дочерчивается до полной,
пока слой гаснет.
ВНЕ ЭКРАНА ДУГА НЕ ЗАМИРАЕТ, и это не забытый случай. Пауза куска 7
останавливает анимации, а дуга не анимация: её положение — это
время, которое на сервере идёт и при уведённой вкладке. Вернувшийся
человек должен увидеть, сколько прошло на самом деле, а не сколько
он смотрел.
ДВИЖЕНИЕ ВЫКЛЮЧЕНО — дуга остаётся. Она не украшение: без неё
пропадает единственный ответ на «скоро ли». Идти она в этом случае
будет ступенями, по ответам сервера, и переход ей снимает кусок 8. */
.rsk-magiya__kolca .rsk-magiya__dolya {
stroke: var(--gold-lit);
stroke-width: 9;
opacity: .85;
/* Начало — наверху круга, а не справа: круг читают с двенадцати
часов. Поворот берёт `transform-origin` у общего правила колец. */
transform: rotate(-90deg);
}
@media (max-width: 559px) {
/* Та же причина, что у прочих толщин выше: коробка ужата втрое, и
девять единиц стали бы волоском. */
.rsk-magiya__kolca .rsk-magiya__dolya { stroke-width: 14; }
}
.rsk-magiya--gotovo .rsk-magiya__dolya {
transition: stroke-dashoffset var(--t-mag-dolya) ease-out;
}
/* --- 6. Строка ----------------------------------------------------------
«Читаю карты» — слова владельца из app/rasklady_teksty.py. Шрифт свой
не заводим: это Source Serif 4, тот же, что у всего раздела.
СМЕНА СТРОКИ — ТЕМ ЖЕ ХОДОМ, что у строки ожидания внутри разбора
(раздел 30.10): скрипт вешает класс, ждёт, пока строка уйдёт,
подставляет новую и класс снимает. Уход и приход — один переход:
прозрачность, сдвиг вниз и расфокус. Текст не мигает и не прыгает.
МЕРЦАНИЕ СИДИТ НА ВЛОЖЕННОМ `span`, И ЭТО НЕ ПРИХОТЬ. Прозрачность у
самой строки занята сменой слов, а это ПЕРЕХОД. Анимация в каскаде
старше перехода: пока на строке висело `rsk-magiya-stroka`, правило
смены `opacity: 0` не срабатывало вовсе — слова не гасли, а только
смазывались и съезжали. Теперь гаснет строка, а мерцает буквами
вложенный span, и две прозрачности просто перемножаются.
Мерцание .85 → 1 за 3,2 с: ровно столько, чтобы надпись читалась
живой и при этом её можно было спокойно читать. Со сменой слов (7 с)
срок не кратен — два такта не сходятся в один пульс. */
.rsk-magiya__stroka {
position: relative; z-index: 2;
margin: 0; max-width: 16ch;
text-align: center;
font-size: 30px; line-height: 1.28;
color: var(--ink);
text-shadow: 0 0 30px rgba(224, 196, 140, .38);
pointer-events: none;
transition: opacity var(--t-magiya-gasnet) ease,
transform var(--t-magiya-gasnet) ease,
filter var(--t-magiya-gasnet) ease;
will-change: opacity, transform;
}
.rsk-magiya__stroka > span {
display: inline-block;
animation: rsk-magiya-stroka var(--t-mag-mercanie) ease-in-out infinite;
will-change: opacity;
}
.rsk-magiya__stroka--menyaetsya {
opacity: 0; transform: translateY(6px); filter: blur(4px);
}
@keyframes rsk-magiya-stroka {
0%, 100% { opacity: .85; }
50% { opacity: 1; }
}
@media (min-width: 1024px) {
.rsk-magiya__stroka { font-size: 44px; }
}
@media (min-width: 2200px) {
.rsk-magiya__stroka { font-size: 56px; }
}
/* --- 7. Вне экрана — пауза ---------------------------------------------
Слой стоит минутами. Увели вкладку — двигать нечего, а телефон греется.
Анимация НЕ снимается, а ставится на паузу: снятая даёт рывок, и на
этом раздел уже обжигался (раздел 40, «анимация никогда не снимается»). */
.rsk-magiya--spit,
.rsk-magiya--spit *,
.rsk-magiya--spit *::before,
.rsk-magiya--spit *::after { animation-play-state: paused !important; }
/* --- 8. Движение выключено ---------------------------------------------
Человек попросил систему не двигать картинку. Остаётся ровно то, что
он и просил увидеть: надпись «Читаю карты» на тёмном поле и тёплый
свет за ней. Ничего не летит и не мигает; строка при этом всё так же
сменяется скриптом — просто без проявления. */
@media (prefers-reduced-motion: reduce) {
.rsk-magiya,
.rsk-magiya *,
.rsk-magiya *::before,
.rsk-magiya *::after { animation: none !important; transition: none !important; }
.rsk-magiya { opacity: 1; }
.rsk-magiya__iskry,
.rsk-magiya__komety { display: none; }
.rsk-magiya__svet i { opacity: .68; transform: none; }
.rsk-magiya__dym { transform: none; }
.rsk-magiya__stroka,
.rsk-magiya__stroka > span { opacity: 1; }
/* Кольцо остаётся и остаётся дорисованным: неподвижная астролябия —
это всё ещё астролябия, ровно как неподвижное небо в разделе 29
остаётся небом. `transform` тут не снимаем — им круг посажен по
середине экрана, а не сдвинут ради движения. */
.rsk-magiya__oreol { opacity: .82; }
}
/* --- 9. Печать ---------------------------------------------------------
Расклад сохраняют в PDF. Ожидание на бумаге — чёрный лист поверх
расклада. */
@media print {
.rsk-magiya { display: none !important; }
}
/* Кнопка «Сохранить расклад» под текстом разбора (пик #277, 23.09.2026):
воздух над ней — здесь, а не в разметке. «Поделиться» рядом (fix64) —
с тем же воздухом, иначе в ряду она вытянулась бы на его высоту. */
.rsk-trakt [data-rsk-pechat],
.rsk-trakt [data-rsk-podelitsya] { margin-top: 22px; }
/* ======================================================================
76. СВОДКА СПРАВА, ШАПКА УХОДИТ СО СТОЛА, РАЗБОР ВО ВСЮ ШИРИНУ ОКНА
(Указка, контейнер 4, пики #279, #280, #281 — 23.09.2026)
======================================================================
Три замечания одного захода по /rasklady/vopros. Слова владельца
дословно:
#279 «в свободном месте под картой вылазит уже справа „сделать
расклад на такую-то сумму", чтобы не надо было листать вниз —
сразу видно, сколько вопросов, какая цена»;
#280 «когда идёт расклад карт, это лишнее, так карты будут в самом
верху» (тыкал в `.rsk-hero__in` — надстрочник, заголовок,
лид и плитки цен);
#281 «этот текст пишется во всю ширину окна, а сейчас нет; не важно,
телефон, ноутбук или широкоформатный монитор».
Своих слов в разметке нет ни одного: всё, что человек прочитает в
сводке, ставит скрипт из того же источника, что и настоящие строки
под списком (правило 1). */
/* ----------------------------------------------------------------------
76.1. СВОДКА — ЗЕРКАЛО СЧЁТА, СТУПЕНИ И КНОПКИ
----------------------------------------------------------------------
НОВОГО ЯЗЫКА НЕТ. Плашка — та же родня, что `.rsk-predlozhenie` и
`.rsk-zhdet` (раздел 70): золотая кромка #c5a25d, тёплая заливка
rgba(197,162,93,.17) и золотая черта снизу. Строка счёта набирается
правилом `.rsk-schetchik[data-vp-itog-schet]` из раздела 74.3 — тем
же, что настоящий счёт над списком; строка ступени — классом
`.rsk-predlozhenie__stupen` оттуда же. Ни одного нового числа.
ЗАЛИВКА НЕПРОЗРАЧНАЯ, и это не украшение. На узком и низком окне
плашка может лечь поверх колоды (см. ниже), и просвечивающая карта
съела бы цену. Тёплый слой остался ровно тот же — под ним добавлена
глухая подложка цвета поля. */
.rsk-itog { margin: 0; }
.rsk-itog[hidden] { display: none; }
.rsk-itog__in {
border: 1px solid #c5a25d;
box-shadow: inset 0 -2px 0 #c5a25d;
background:
linear-gradient(rgba(197, 162, 93, .17), rgba(197, 162, 93, .17)),
#141b15;
}
/* --- ТЕЛЕФОН И ПЛАНШЕТ: ЛИПКАЯ ПОЛОСА У НИЖНЕГО КРАЯ ----------------
На 390 правой колонки нет вовсе — обложка идёт одним столбцом. Место,
которое всегда на глазах и не отнимает высоту у списка, там одно:
нижний край экрана.
НАД БАННЕРОМ COOKIE, А НЕ ПОД НИМ. Баннер (`#cookie`, site.css) лежит
`position: fixed` у того же края с `z-index: 60`. Поэтому у полосы
z-index меньше, а отступ снизу берётся из `--rsk-kuki` — того самого
числа, которым раздел уже резервирует место под баннер (раздел 74.5).
Баннера нет — переменной нет, и полоса ложится на край.
Настоящие кнопки под списком остаются на месте: полоса их зеркалит,
а не заменяет. Дойдя до низа списка, человек нажимает ту, что под
рукой, — тупика нет ни в одном случае. */
.rsk-itog {
position: fixed;
left: 0; right: 0;
bottom: var(--rsk-kuki, 0px);
z-index: 50;
padding: 0;
}
/* Плашка cookie есть — между ней и полосой зазор 8 px, а не впритык
(fix81). Число 8 учтено в --rsk-itog-h ниже: докрутка не теряет его. */
body:has(#cookie:not([hidden])) .rsk-itog { bottom: calc(var(--rsk-kuki, 0px) + 8px); }
.rsk-itog__in {
border-left: 0; border-right: 0; border-radius: 0;
padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
display: flex; flex-wrap: wrap; align-items: center;
gap: 4px 14px;
}
.rsk-itog .rsk-schetchik { flex: 0 0 auto; margin-top: 0; }
.rsk-itog .rsk-predlozhenie__stupen { flex: 1 1 100%; margin: 0; }
.rsk-itog .btn { flex: 1 1 100%; width: 100%; min-height: 48px; margin: 6px 0 0; }
.rsk-itog .btn[hidden] { display: none; }
@media (min-width: 560px) {
.rsk-itog .rsk-predlozhenie__stupen { flex: 1 1 200px; }
.rsk-itog .btn { flex: 0 0 auto; width: auto; min-width: 240px; margin: 0; }
}
/* --- НИЖЕ 1024: ПОД ПОЛОСОЙ ВСЕГДА ЕСТЬ КУДА ДОКРУТИТЬ ---------------
Полоса `position: fixed` и места в потоке не занимает. Если страница
короче окна (вопросов мало, баннера cookie нет), докрутки может не
быть вовсе — и то, что легло под полосой, уже не открыть ничем: ни
декоративную колоду в начале обложки, ни последний вопрос в конце
списка. Замер на стенде 8021, 390: полоса сама 127,7 px, и ровно
настолько (97 px в кадре) она закрывает низ колоды при scrollY=0
(TEST.md, Указка #279).
Резервируем внизу шага вопросов то же место — числом с запасом над
замером, тем же приёмом, что и `--rsk-kuki` двумя разделами выше
("число одно на оба правила"). Так докрутка всегда есть, и колода с
последним вопросом уходят из-под полосы, а не остаются приклеены.
Саму полосу не двигаем — только даём странице докрутиться из-под
неё.
`scroll-padding-bottom` — на `body`: полоса лежит в потоке шага
вопросов, а прокручивается `body`, и это свойство слушает только
настоящий контейнер прокрутки. */
:root { --rsk-itog-h: 156px; }
@media (max-width: 559px) {
/* Полоса в одну строку (ниже) — 68 px по замеру, с запасом. */
:root { --rsk-itog-h: 92px; }
}
@media (max-width: 1023px) {
/* scroll-padding — на html: прокручивается окно, а не body. Полоса
стоит над баннером cookie, поэтому подводка к вопросу
(scrollIntoView в rasklady_vopros.js) останавливается выше обоих. */
html:has([data-vp-itog]:not([hidden])) {
scroll-padding-bottom: calc(var(--rsk-itog-h) + var(--cookie-h, 0px));
}
.rsk-hero--vopros [data-vp-shag="voprosy"] { padding-bottom: var(--rsk-itog-h); }
}
/* ТЕЛЕФОН: ПОЛОСА В ОДНУ СТРОКУ (26.09.2026). В три строки (счёт,
ступень, кнопка — 130–150 px) она вместе с баннером cookie занимала
почти пол-экрана на 390, и вопросы у нижнего края оказывались под ней.
Строка ступени из полосы уходит: цена стоит на самой кнопке, а та же
строка ступени по-прежнему под списком. Счёт — слева, кнопка — справа. */
@media (max-width: 559px) {
.rsk-itog__in { flex-wrap: nowrap; gap: 12px; padding-top: 8px; }
.rsk-itog .rsk-predlozhenie__stupen { display: none; }
.rsk-itog .rsk-schetchik { flex: 0 1 auto; min-width: 0; }
.rsk-itog .btn { flex: 1 1 auto; width: auto; margin: 0; padding-inline: 12px; }
}
/* --- ОТ 1024: ПАНЕЛЬ В ПРАВОЙ КОЛОНКЕ, ПОД КОЛОДОЙ ------------------
ПОЧЕМУ ШАГ СТАНОВИТСЯ `display: contents`. Правая колонка обложки —
это колонка 2 сетки `.rsk-hero--vopros`, и попасть в неё может только
прямой ребёнок сетки. Шаг вопросов сам лежит в колонке 1, поэтому он
перестаёт быть коробкой, а его дети встают в сетку сами: список — в
колонку 1, где он и был, сводка — в колонку 2.
Скрипт от этого не ломается: он ищет узлы по `querySelector` внутри
`data-vp`, а дерево не изменилось. Одна мелочь для соседней сессии:
у элемента с `display: contents` `getBoundingClientRect` отдаёт нули,
и `[data-vp-shag="voprosy"]` перестаёт годиться в якоря `безСкачка`
(rasklady_vopros.js). Соседи по списку — `[data-vp-stol]` и
`[data-vp-spisok-blok]` — на месте, и якорь берётся из них.
ПОЧЕМУ ПАНЕЛЬ ПРИЖАТА К НИЗУ СВОЕЙ ОБЛАСТИ, А НЕ К ВЕРХУ. Замер на
стенде 8021, окно 1760×990, десять собранных вопросов: колода
занимает колонку 2 с y 217 по 792, а список начинается с y 573. То
есть верх правой колонки против списка ЗАНЯТ картой — панель,
поставленная к верху области, ложилась ровно на неё (замер наложения
360×157 px, снимок proba/B-row3-stretch-scroll0.png в папке правки).
Свободное место, про которое говорит владелец, — НИЖЕ карты. Поэтому
панель стоит в конце своей колонки (`justify-content: flex-end`), а
липкость у неё нижняя: пока область списка на экране, панель держится
у нижнего края окна, над баннером cookie. Замер того же окна: y 731,8
при прокрутке 0 (карта кончается на 730 — не пересекаются) и y 1619,9
в покое, вровень с настоящей кнопкой.
Область растянута на все строки сетки (`grid-row: 1 / -1`), а не на
номер строки: строк в обложке то три, то больше — смотря что сейчас
видно, и номер протух бы за минуту. Высоты сетке панель не добавляет:
её содержимое ниже любой из строк. */
@media (min-width: 1024px) {
.rsk-hero--vopros [data-vp-shag="voprosy"] { display: contents; }
.rsk-hero--vopros [data-vp-shag="voprosy"] > * { grid-column: 1; min-width: 0; }
.rsk-hero--vopros [data-vp-shag="voprosy"] > .rsk-itog {
position: static;
grid-column: 2;
grid-row: 1 / -1;
align-self: stretch;
justify-self: start;
z-index: 3;
width: min(360px, 100%);
display: flex; flex-direction: column; justify-content: flex-end;
/* Коробка растянута на весь ряд сетки (align-self: stretch) —
выше и ниже настоящей плашки (.rsk-itog__in, она sticky и стоит
только у низа) остаётся пустое место шириной в колонку. Раньше
это место оставалось нажимаемым и глушило колоду под собой
(Указка #279, TEST.md, замечание 1: коробка 360×2020 на 1760).
Снимаем нажатие с коробки целиком, возвращаем его настоящей
плашке — тексту и кнопкам внутри есть чем нажиматься. */
pointer-events: none;
}
.rsk-hero--vopros [data-vp-shag="voprosy"] > .rsk-itog > .rsk-itog__in {
position: sticky;
bottom: var(--rsk-kuki, 24px);
display: block;
padding: 18px 20px;
border: 1px solid #c5a25d;
border-radius: 4px;
pointer-events: auto;
}
.rsk-hero--vopros [data-vp-shag="voprosy"] > .rsk-itog .rsk-predlozhenie__stupen {
margin: 8px 0 0;
}
.rsk-hero--vopros [data-vp-shag="voprosy"] > .rsk-itog .btn {
width: 100%; min-width: 0; margin: 14px 0 0;
}
}
@media (min-width: 2200px) {
.rsk-hero--vopros [data-vp-shag="voprosy"] > .rsk-itog { width: min(440px, 100%); }
}
/* Печатать сводку незачем: на листе она была бы кнопкой без нажатия. */
@media print {
.rsk-itog { display: none !important; }
}
/* ----------------------------------------------------------------------
76.2. НА СТОЛЕ ШАПКИ НЕТ (пик #280)
----------------------------------------------------------------------
Класс `.rsk-hero--stol` вешает на обложку rasklady_vopros.js, когда
карты пошли на стол, и снимает при возврате. Стили только прячут:
надстрочник, заголовок, лид и плитки цен (`.rsk-hero__in`) и строку
счёта с входом (`.rsk-lichnoe-mesto`). Стол при этом оказывается
первым в обложке — «так карты будут в самом верху».
ПРЯЧЕМ РАЗОМ, БЕЗ ПРОЯВЛЕНИЯ. Плавно гасить тут нечего: оба блока
уходят из потока, и всё, что ниже, всё равно поднимается скачком на
их высоту. Полсекунды растворяющегося заголовка добавили бы к этому
скачку только ожидание. Скачок гасит скрипт — у него для этого есть
`безСкачка`, и стол он подводит к окну сам.
`display: none`, а не `visibility`: на узком экране у `.rsk-hero__in`
стоит `display: contents`, места он не занимает вовсе, и прятать надо
именно показ. Вес селектора взят с запасом — два класса обложки
против одного у правила с contents. */
.rsk-hero--vopros.rsk-hero--stol > .rsk-hero__in,
.rsk-hero--vopros.rsk-hero--stol .rsk-lichnoe-mesto { display: none; }
/* ----------------------------------------------------------------------
76.3. РАЗБОР ВО ВСЮ ШИРИНУ ОКНА (пик #281)
----------------------------------------------------------------------
Мерку строки сняли в разделе 31.1 — это половина дела: текст получил
ширину блока, а блок стоял внутри колонки `.rsk` и кончался там же,
где кончается всё остальное. Владелец просил ширину ОКНА.
ЧТО СДЕЛАНО. Блок выходит из боковых полей `.rsk` отрицательными
полями, а свои боковые поля ставит сам. Фон, золотая черта слева и
заголовок «Что говорит расклад» идут по той же ширине — они внутри.
ПОЧЕМУ НЕ `width: 100vw`. Во-первых, `100vw` считает вместе с полосой
прокрутки и даёт лишние 15–17 px. Во-вторых, и это важнее: `.rsk-pole`
с его `overflow-x: clip` — вся видимая площадь раздела, и на ширинах
640–1600 она у́же окна, потому что сайт там идёт колонкой `--col`
(site.css: 760 на 768, 1320 на 1440). Блок в `100vw` на этих ширинах
не «вылез бы за край», а был бы ОБРЕЗАН: золотая черта слева ушла бы
в отсечку целиком, а первые точки текста — под неё.
Поэтому предел выбирает `max()`: блок берёт всю ширину окна там, где
поле раздела до окна достаёт (замер: 390, 1760 и 2880 — ровно
`innerWidth`), и всю ширину поля там, где сайт идёт колонкой
(768 → 760, 1440 → 1320). Шире видимой площади не бывает — значит,
ни обрезки, ни горизонтальной прокрутки.
Второй источник правды не заводится: и поле, и отрицательный отступ
считаются от `--pad` из site.css — того самого числа, которым живёт
вся страница.
ТОЛЬКО ТАМ, ГДЕ РАЗБОР — РЕБЁНОК `main.rsk`. На «карте дня» и на
готовых раскладах тот же блок лежит ВНУТРИ обложки и стоит в её
сетке рядом с картой (раздел 51). Вытащить его оттуда на всю ширину
значило бы сломать ту раскладку, о которой владелец не просил.
ПЕЧАТЬ НЕ ТРОНУТА: в rasklady-print.css у `.rsk-trakt` стоит
`margin: 0 !important; padding: 0 !important` — лист считает поля сам
(`@page`), и правила отсюда до него не доходят.
ОГОВОРКА ПОД РАЗБОРОМ (`.rsk-ogovorka--pod`, макрос `ogovorka_pod`) —
следующий такой же прямой ребёнок `main.rsk`, но своей меры у неё
нет: она осталась в обычном поле страницы, и левый край текста
разъехался с левым краем `.rsk-trakt__tekst` на 1–27 px (TEST.md,
#281-2/3). Даём ей тот же отступ слева, теми же числами — одна
пара правил на оба блока, второго источника нет. `max-width: none`
не трогаем: оговорка остаётся короткой строкой, а не во всю ширину
окна — её только подвинули к общему левому краю. */
main.rsk > .rsk-trakt--pod,
main.rsk > .rsk-ogovorka--pod {
margin-inline: max(calc(50% - 50vw), calc(-1 * var(--pad)));
padding-inline: 16px;
}
main.rsk > .rsk-trakt--pod { max-width: none; }
@media (min-width: 640px) {
main.rsk > .rsk-trakt--pod,
main.rsk > .rsk-ogovorka--pod { padding-inline: 24px; }
}
@media (min-width: 1024px) {
main.rsk > .rsk-trakt--pod,
main.rsk > .rsk-ogovorka--pod { padding-inline: 48px; }
}
@media (min-width: 1600px) {
main.rsk > .rsk-trakt--pod,
main.rsk > .rsk-ogovorka--pod { padding-inline: 64px; }
}
/* ======================================================================
РЕЖИМ «В ПРИЛОЖЕНИИ» — раздел внутри Telegram и MAX (25.09.2026)
======================================================================
Решение владельца: мини-приложение раскладов — это тот же раздел
/rasklady, открытый внутри мессенджера. Класс `rsk-app` на
ставит static/js/rasklady_prilozhenie.js из , до первой
отрисовки: по `#tgWebAppData=` / `#WebAppData=` в адресе или по записи
этой же вкладки. Библиотека мессенджера не подтвердила — класс снят.
В обычном браузере класса нет, и ни одно правило ниже не действует.
ЧТО ДЕЛАЕТ РАЗДЕЛ, И ВСЁ:
1) прячет шапку, крошки и подвал сайта — в мессенджере своя полоса
сверху и своя кнопка «Назад»;
2) отодвигает содержимое от выреза и системных полос: env(safe-area-
inset-*), а в Telegram ещё его --tg-safe-area-inset-* и
--tg-content-safe-area-inset-* (переменные ставит сама библиотека
Telegram; вне полноэкранного режима они нулевые);
3) растягивает поле раздела на высоту окна лесенкой 100% → vh → dvh:
dvh только с iOS 15.4, без запаса строка выпала бы целиком.
Оформление раздела (шрифты, кегль, цвета, картинки) здесь не меняется
ни одним правилом (правило 0). color-mix не используется. Новых
слоёв нет: у Chrome на Android предел памяти отрисовки (см. правило
у `.rsk-zamerlo .rsk-noch`). */
html.rsk-app .rsk-top,
html.rsk-app .rsk-crumbs,
html.rsk-app .rsk-foot { display: none !important; }
html.rsk-app .rsk-pole {
min-height: 100%;
min-height: 100vh;
min-height: 100dvh;
padding-top: env(safe-area-inset-top, 0px);
padding-top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
padding-bottom: env(safe-area-inset-bottom, 0px);
padding-bottom: calc(max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
padding-left: env(safe-area-inset-left, 0px);
padding-left: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px));
padding-right: env(safe-area-inset-right, 0px);
padding-right: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px));
}
/* Окно 18+ — слой во весь экран поверх страницы, отступы поля выше до
него не доходят. Свои поля у него прежние (24 px, на низком экране
10 px, на 2200+ — 48 px); здесь они только не дают окну заехать под
вырез: берётся большее из прежнего поля и выреза + 10 px. */
html.rsk-app .rsk-porog {
padding-top: max(24px, calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px) + 10px));
padding-bottom: max(24px, calc(max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px) + 10px));
}
@media (max-height: 700px) {
html.rsk-app .rsk-porog {
padding-top: max(10px, calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px) + 10px));
padding-bottom: max(10px, calc(max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px) + 10px));
}
}
@media (min-width: 2200px) {
html.rsk-app .rsk-porog { padding-top: 48px; padding-bottom: 48px; }
}
/* ======================================================================
ЛИЧНЫЙ КАБИНЕТ, ПАМЯТЬ СОГЛАСИЯ, СТРОКА РЕКВИЗИТОВ В ПРИЛОЖЕНИИ
(25.09.2026)
======================================================================
Три мелочи вокруг мини-приложения. Новых слоёв, теней, анимаций и
шрифтов нет (правило 0; предел памяти отрисовки Chrome на Android — см.
`.rsk-zamerlo .rsk-noch`). Цвета и кегли — те же переменные раздела.
1) Окно 18+ в приложении невидимо, пока сервер не ответил, помнит ли
он согласие человека (правило 7.2). Класс ставит
rasklady_prilozhenie.js до первой отрисовки, снимает rasklady.js. На
сайте класса не бывает. */
html.rsk-app-porog-zhdu .rsk-porog { visibility: hidden; }
/* 2) Строка документов и реквизитов и вход в кабинет — только в режиме
«в приложении». На сайте их нет вовсе: подвал и шапка там прежние. */
.rsk-app-rekvizity,
.rsk-app-kabinet { display: none; }
html.rsk-app .rsk-app-rekvizity {
display: block;
position: relative; z-index: 1;
margin: 0;
padding: 18px 16px 20px;
font-size: 13px; line-height: 1.6;
color: var(--ink-55);
text-align: center;
}
html.rsk-app .rsk-app-rekvizity a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
html.rsk-app .rsk-app-kabinet:not([hidden]) {
display: flex; justify-content: flex-end;
margin: 0;
}
/* 3) Личный кабинет (/rasklady/kabinet) и вид входа в него — отдельным
разделом в конце файла: «ЛИЧНЫЙ КАБИНЕТ — КАРТОЧКИ И ВХОД». */
.rsk-kabinet [hidden] { display: none !important; }
/* ======================================================================
ЛИЧНЫЙ КАБИНЕТ — КАРТОЧКИ И ВХОД В КАБИНЕТ (25.09.2026)
======================================================================
Владелец: «кнопка личный кабинет выглядит ужасно, нужно тотально
доработать, и что внутри там красиво оформить».
ВХОД. Не полоса-плашка во всю ширину, а знак: человек (`lichno` из
templates/_ikonki.html) в золотом медальоне с двойным кольцом — тот же
приём, что у знака окна 18+ (`.rsk-porog__znak`). В шапке сайта на
телефоне — один медальон (слово остаётся для диктора), от 560 px —
медальон со словом. В приложении — компактная «таблетка» у правого
края: медальон + слово, двойная линейка внутрь, как у окна порога.
КАБИНЕТ. До 26.09.2026 — карточки в двойной золотой линейке с ромбом
на кромке. Владелец: «в мини-апе прям ужасно оформлен… прям фу» —
переверстан, вид страницы теперь в разделе «КАБИНЕТ В ПРИЛОЖЕНИИ —
ПЕРЕВЁРСТКА» ниже; здесь остался только вход.
Правило 0: шрифты раздела (Source Serif 4; Manrope — только подписи
прописными), цвета — переменные раздела и site.css, основной текст не
мельче 16 px, фотографий здесь нет. Предел памяти отрисовки Chrome на
Android (`.rsk-zamerlo .rsk-noch`): ни анимаций, ни blur, ни
will-change, ни слоёв больше экрана — тени у нескольких небольших
карточек, неподвижные. color-mix не используется (iOS 16.2+). */
/* ---------- 1. Вход: медальон ---------- */
.rsk-kab-vhod__znak {
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto;
width: 30px; height: 30px;
border-radius: 50%;
border: 1px solid rgba(201, 168, 106, .6);
background: radial-gradient(circle at 50% 38%, rgba(224, 196, 140, .18), rgba(10, 15, 11, 0) 70%);
box-shadow:
inset 0 0 0 3px rgba(10, 15, 11, .9),
inset 0 0 0 4px rgba(201, 168, 106, .24);
color: var(--gold-lit);
}
.rsk-kab-vhod__znak svg {
width: 16px; height: 16px;
fill: none; stroke: currentColor; stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round;
}
/* В шапке сайта: та же ghost-кнопка, что «Выйти», только с медальоном
слева и золотым словом. */
.rsk-top__nav .rsk-kab-vhod {
gap: 10px;
padding: 0 16px 0 5px;
border-color: rgba(201, 168, 106, .5);
color: var(--gold-lit);
white-space: nowrap;
}
.rsk-top__nav .rsk-kab-vhod:hover { border-color: var(--gold-lit); }
@media (max-width: 559px) {
/* Телефон: в шапке уже «Работа с Альбиной» и «Войти»/«Выйти» —
кабинет виден на всех страницах раздела (27.09.2026, Указка #305)
и встаёт следующим одним медальоном 38 px, без рамки кнопки. */
.rsk-top__nav .rsk-kab-vhod {
width: 38px; min-width: 38px; height: 38px; min-height: 38px;
padding: 0; border: 0; background: none;
}
.rsk-top__nav .rsk-kab-vhod .rsk-kab-vhod__znak { width: 38px; height: 38px; }
.rsk-top__nav .rsk-kab-vhod .rsk-kab-vhod__znak svg { width: 19px; height: 19px; }
.rsk-top__nav .rsk-kab-vhod__slovo {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
}
/* В приложении: таблетка у правого края, строка не шире себя. */
html.rsk-app .rsk-app-kabinet:not([hidden]) { padding: 10px 0 0; }
.rsk-kab-vhod--app {
display: inline-flex; align-items: center; gap: 10px;
min-height: 44px;
padding: 5px 18px 5px 5px;
border: 1px solid rgba(201, 168, 106, .5);
border-radius: 999px;
background: linear-gradient(180deg, #1a211a 0%, #121810 100%);
box-shadow:
inset 0 0 0 3px rgba(10, 15, 11, .92),
inset 0 0 0 4px rgba(201, 168, 106, .16),
0 8px 22px rgba(0, 0, 0, .42);
font: 10.5px/1 'Manrope', Arial, sans-serif;
letter-spacing: .2em; text-transform: uppercase;
color: var(--gold-lit);
white-space: nowrap;
text-decoration: none;
}
.rsk-kab-vhod--app .rsk-kab-vhod__znak { width: 34px; height: 34px; }
.rsk-kab-vhod--app .rsk-kab-vhod__znak svg { width: 17px; height: 17px; }
.rsk-kab-vhod--app:active { filter: brightness(.9); }
/* Страница кабинета — разделом ниже: «КАБИНЕТ В ПРИЛОЖЕНИИ —
ПЕРЕВЁРСТКА» (26.09.2026). */
/* ======================================================================
КАБИНЕТ В ПРИЛОЖЕНИИ — ПЕРЕВЁРСТКА (26.09.2026)
======================================================================
Владелец, дословно: «личный кабинет в мини-апе прям ужасно оформлен,
дай дизайнеру нормально всё там сделать» и «в МАКСе зашёл в личный
кабинет, обратно не смог вернуться».
Что было не так (снимки «до» — Claude outputs/fix15-2026-09-26/):
рамка в две золотые линейки с ромбом на КАЖДОМ блоке и рамка в рамке
внутри; три числа «сегодня» в три колонки на 360 px — подписи в две
строки, «не сгорают / всего получено» столбиком в треть экрана; мои
расклады в самом низу, под приглашением в две тысячи пикселей; итог
по друзьям — пять строк «подпись над числом»; подписи 10 px; из
кабинета в приложении не было пути назад.
Что теперь. Одна колонка до 640 px. Блоки без рамок, разделены
воздухом и заголовком; подложка — тихая плита (`.rsk-kab-plita` и
карточки списков) в тонкой линии и со скруглением. Золото — числа,
знаки заголовков, главная кнопка; остальное — цвета текста раздела.
Числа «сегодня» — строками: подпись слева, число справа. Нажимаемое —
не ниже 44 px (кнопки 48). Порядок блоков — в шаблоне кабинета.
Полоса приложения (`.rsk-app-polosa`, templates/rasklady/_osnova.html):
слева «‹ Расклады» на витрину раздела, справа прежний вход в кабинет.
Липнет к верху под вырезом (те же переменные безопасной зоны, что у
`.rsk-pole`), фон — фон страницы, растянутый в стороны тенью с
обрезкой: полоса во всю ширину без отрицательных полей и без
прокрутки вбок. На витрине (ссылки «назад» нет) — прежний вид, не
липнет. На сайте полосы нет вовсе.
Правило 0: шрифты раздела (Manrope — только подписи прописными,
остальное засечный), основной текст не мельче 16 px, цвета — прежние
переменные. Ни анимаций, ни blur, ни новых слоёв во весь экран
(предел памяти отрисовки Chrome на Android, `.rsk-zamerlo .rsk-noch`).
color-mix не используется. */
/* ---------- 1. Полоса приложения: назад и вход в кабинет ---------- */
/* Высота полосы — одно число на раздел (правило 8.7, 27.09.2026): от
него и сама полоса, и отступ прокрутки сверху у html (последний раздел
файла, «ПРОКРУТКА В ПРИЛОЖЕНИИ НЕ ЗАВОДИТ ПОД ПОЛОСУ»). Скрипт своего
числа не держит: камера меряет полосу, какой она вышла (rasklady.js,
`кадрВерх`). */
html.rsk-app { --rsk-app-polosa-h: 56px; }
.rsk-app-polosa { display: none; }
html.rsk-app .rsk-app-polosa {
display: flex; align-items: center; gap: 12px;
}
html.rsk-app .rsk-app-polosa:has(.rsk-app-nazad) {
position: sticky; z-index: 5;
top: env(safe-area-inset-top, 0px);
top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
min-height: var(--rsk-app-polosa-h);
padding: 6px 0;
background: var(--deep);
box-shadow: 0 0 0 100vmax var(--deep), 0 1px 0 100vmax var(--rsk-line);
clip-path: inset(0 -100vmax -1px);
}
html.rsk-app .rsk-app-polosa .rsk-app-kabinet:not([hidden]) {
margin: 0 0 0 auto; padding: 0;
}
html.rsk-app .rsk-app-polosa:not(:has(.rsk-app-nazad)) .rsk-app-kabinet:not([hidden]) {
padding-top: 10px;
}
.rsk-app-nazad {
display: inline-flex; align-items: center; gap: 4px;
min-height: 44px; margin-left: -8px; padding: 0 16px 0 4px;
font: 12px/1 'Manrope', Arial, sans-serif;
letter-spacing: .2em; text-transform: uppercase;
color: var(--gold-lit);
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.rsk-app-nazad svg {
flex: 0 0 auto; width: 24px; height: 24px;
fill: none; stroke: currentColor; stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round;
}
.rsk-app-nazad:active { opacity: .7; }
/* ---------- 1а. «‹ Расклады» на сайте с телефона (fix70, 29.09.2026) ----------
Владелец с айфона: «нельзя выйти в основное меню расклада чтобы все
посмотреть там тольк к альбине». В шапке сайта до 560 px ссылки
«Расклады» нет (раздел «ПРАВКИ ПОСЛЕ ПЕРВОГО ПРОСМОТРА НА 390»: не
помещается), крошки мелкие и серые, а «taro_Inspo» и «Работа с
Альбиной» ведут к Альбине. Поэтому на телефоне и на сайте видна та же
полоса, что в мессенджере, — не липкая, на месте крошек (они её
повторяли бы), и та же ссылка стоит внизу, над документами. Вид ссылки
— `.rsk-app-nazad` выше, своего нет. На витрине ссылки нет (шаблон), и
крошки там прежние. От 560 px всё как было: там «Расклады» есть в шапке.
Липкости и отступа сверху у этой полосы нет — камера раздела её не
учитывает (rasklady.js, `кадрВерх`: только sticky/fixed). */
.rsk-foot__nazad { display: none; }
@media (max-width: 559px) {
html:not(.rsk-app) .rsk-app-polosa { display: flex; align-items: center; }
.rsk-foot__nazad { display: block; margin: -8px 0 10px; }
}
@media (max-width: 559px) {
html:not(.rsk-app) .rsk-app-polosa:has(.rsk-app-nazad) + .rsk-crumbs { display: none; }
}
/* ---------- 2. Страница кабинета ---------- */
.rsk-kabinet {
max-width: 640px;
margin: 0 auto;
padding: 8px 0 40px;
}
.rsk-kab-shapka { padding: 18px 0 0; text-align: center; }
.rsk-kab-shapka__znak {
display: block;
width: 56px; height: 56px; padding: 11px;
margin: 0 auto 10px;
color: var(--gold);
background:
radial-gradient(circle,
transparent 44%, rgba(201, 168, 106, .34) 44.8%, transparent 45.8%,
transparent 49.4%, rgba(201, 168, 106, .16) 50%, transparent 51%) center / 100% 100% no-repeat;
filter: drop-shadow(0 0 12px rgba(224, 196, 140, .3));
}
.rsk-kab-shapka .rsk-h1 { font-size: clamp(30px, 7.4vw, 44px); }
.rsk-kab-shapka::after {
content: ''; display: block;
width: 120px; height: 1px; margin: 14px auto 0;
background: linear-gradient(90deg, transparent, rgba(224, 196, 140, .55), transparent);
}
/* В приложении над заголовком уже полоса «назад» — шапка короче. */
html.rsk-app .rsk-kab-shapka { padding-top: 10px; }
html.rsk-app .rsk-kab-shapka__znak { width: 44px; height: 44px; padding: 9px; margin-bottom: 6px; }
html.rsk-app .rsk-kab-shapka .rsk-h1 { font-size: 32px; }
.rsk-kab-setka { display: grid; gap: 40px; margin-top: 28px; }
.rsk-kab-setka > * { min-width: 0; }
/* Плита: тихая подложка вместо двойной золотой рамки. */
.rsk-kab-karta,
.rsk-kab-plita,
.rsk-kab-segodnya,
.rsk-kab-zakaz,
.rsk-kab-kanal,
.rsk-kab-shkala,
.rsk-kab-udalit__tochno {
border: 1px solid rgba(201, 168, 106, .16);
border-radius: 14px;
background: rgba(255, 255, 255, .035);
}
.rsk-kab-karta { margin: 0; padding: 24px 20px; }
.rsk-kab-karta--tsentr { margin-top: 28px; text-align: center; }
.rsk-kab-karta--tsentr .btn { margin-top: 4px; }
/* Не вошёл, широкий экран (27.09.2026, мерка А4 «воздух» — MERKA.md):
карточка входа уже шириной кабинета (640 px, как вошедший — ширина
идёт от .rsk-kabinet, отдельно не переопределяем, правило 8.7), но
висела у самого верха, а до подвала — пустой экран. Центруем шапку и
карточку по высоте первого экрана за вычетом верхней панели и крошек
(мерено на 1920 и 2133 — 77 + ~34 px). Только `[data-kab-net-vhoda]`:
вошедший кабинет и «данные удалены» не трогаем. На телефоне (< 1024)
— как было, без центрирования. */
@media (min-width: 1024px) {
.rsk-kabinet:has(> [data-kab-net-vhoda]:not([hidden])) {
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100vh - 112px);
}
}
.rsk-kab-h2 {
display: flex; align-items: center; gap: 10px;
margin: 0 0 16px;
font-weight: 300; font-size: 26px; line-height: 1.2;
color: var(--ink);
}
.rsk-kab-h2__znak { flex: 0 0 auto; width: 14px; height: 14px; color: var(--gold); }
.rsk-kab-tekst {
margin: 0 0 16px; max-width: none;
font-size: 17px; line-height: 1.55; color: var(--ink-70);
}
.rsk-kab-knopka {
min-height: 48px; padding: 0 18px;
font-size: 14px; letter-spacing: .12em;
white-space: nowrap;
}
/* Сегодня: строки «подпись — число». */
.rsk-kab-segodnya { padding: 4px 18px; overflow: hidden; }
.rsk-kab-chisla { margin: 0; }
.rsk-kab-chislo {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
align-items: center; column-gap: 16px;
min-height: 44px; margin: 0; padding: 14px 0;
}
.rsk-kab-chislo::before { content: none !important; }
.rsk-kab-chisla > .rsk-kab-chislo:not([hidden]) ~ .rsk-kab-chislo:not([hidden]),
.rsk-kab-schet-druzey > .rsk-kab-chislo:not([hidden]) ~ .rsk-kab-chislo:not([hidden]) {
border-top: 1px solid var(--rsk-line);
}
.rsk-kab-chislo__nad {
grid-column: 1; grid-row: 1; align-self: center;
font: 12px/1.45 'Manrope', Arial, sans-serif;
letter-spacing: .16em; text-transform: uppercase;
color: var(--ink-70);
}
.rsk-kab-chislo__n {
grid-column: 2; grid-row: 1; align-self: center;
font-weight: 300; font-size: 40px; line-height: 1;
font-variant-numeric: lining-nums;
color: var(--gold-lit);
text-align: right;
}
.rsk-kab-chislo__pod {
grid-column: 1;
margin-top: 2px;
font-size: 16px; line-height: 1.45; color: var(--ink-55);
}
/* «Вас ждёт готовый расклад» — низом той же плиты, без второй рамки. */
.rsk-kab-zhdet {
display: grid; gap: 12px;
margin: 4px -18px -4px; padding: 16px 18px 18px;
border: 0; border-top: 1px solid var(--rsk-line-lit); border-radius: 0;
background: rgba(197, 162, 93, .1);
box-shadow: none;
}
.rsk-kab-zhdet > p { font-size: 17px; }
.rsk-kab-zhdet .btn { width: 100%; min-height: 48px; }
/* Мои расклады и друзья — карточки списком. */
.rsk-kab-zakazy { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rsk-kab-zakaz {
display: grid; grid-template-columns: minmax(0, 1fr);
gap: 4px; padding: 16px;
}
.rsk-kab-zakaz__nomer {
font: 12px/1.4 'Manrope', Arial, sans-serif;
letter-spacing: .16em; text-transform: uppercase;
font-variant-numeric: lining-nums;
color: var(--gold);
white-space: nowrap;
}
.rsk-kab-zakaz__chto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rsk-kab-zakaz__stupen { font-size: 19px; line-height: 1.35; color: var(--ink); }
.rsk-kab-zakaz__srok { font-size: 16px; line-height: 1.45; color: var(--ink-55); }
.rsk-kab-zakaz .rsk-kab-knopka { width: 100%; margin-top: 12px; }
@media (min-width: 560px) {
.rsk-kab-zakaz { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
.rsk-kab-zakaz__nomer,
.rsk-kab-zakaz__chto { grid-column: 1; }
.rsk-kab-zakaz .rsk-kab-knopka { grid-column: 2; grid-row: 1 / span 2; width: auto; margin-top: 0; }
}
/* Пригласить друга: ссылки по мессенджерам, под ними — счёт. */
.rsk-kab-kanaly { display: grid; gap: 12px; }
.rsk-kab-kanal { padding: 14px 16px 16px; }
.rsk-kab-kanal__imya { margin: 0 0 10px; font-size: 12px; letter-spacing: .2em; color: var(--gold-dim); }
.rsk-kab-kanal__knopki { display: flex; flex-wrap: wrap; gap: 8px; }
.rsk-kab-kanal__knopki .rsk-kab-knopka { flex: 1 1 180px; min-width: 0; }
.rsk-kab-kanal .rsk-priglasi__pole { width: 100%; margin-top: 8px; }
.rsk-kab-itog {
margin: 12px 0 0; max-width: none;
font-size: 16px; text-align: center; color: var(--gold-lit);
}
.rsk-kab-schet-druzey { margin-top: 16px; padding: 0 16px; }
.rsk-kab-chislo--ryad .rsk-kab-chislo__n { font-size: 32px; }
.rsk-kab-pochemu {
margin: 0; padding: 12px 0 14px;
border-top: 1px solid var(--rsk-line);
font-size: 16px; color: var(--ink-55);
}
/* Ваши друзья и лояльность — свои блоки с заголовком, без линеек. */
.rsk-kab-loyalnost { margin-top: 40px; }
.rsk-kab-loyalnost__h {
margin: 0 0 14px;
font-family: inherit; font-weight: 300; font-size: 22px; line-height: 1.25;
letter-spacing: 0; text-transform: none;
color: var(--ink);
}
.rsk-kab-podarki { margin-top: 20px; }
.rsk-kab-podarki .rsk-kab-loyalnost__h { font-size: 19px; }
.rsk-kab-druzya .rsk-kab-druzya__itog {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
margin: 0 0 12px;
}
.rsk-kab-druzya .rsk-kab-druzya__itog .rsk-kabinet__ryad {
display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px;
margin: 0; padding: 12px 14px;
border: 1px solid rgba(201, 168, 106, .16); border-radius: 12px;
background: rgba(255, 255, 255, .035);
}
.rsk-kab-druzya .rsk-kab-druzya__itog .rsk-kabinet__ryad > dt {
margin: 0;
font-size: 11px; letter-spacing: .14em; color: var(--ink-55);
}
.rsk-kab-druzya .rsk-kab-druzya__itog .rsk-kabinet__ryad > dd {
margin: 0; text-align: left;
font-weight: 300; font-size: 28px; line-height: 1; color: var(--gold-lit);
}
.rsk-kab-druzya__spisok .rsk-kab-drug {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center; column-gap: 12px; row-gap: 6px;
padding: 14px 16px;
}
.rsk-kab-drug .rsk-kab-zakaz__nomer { grid-row: 1; grid-column: 1; }
.rsk-kab-drug .rsk-kab-drug__status { grid-row: 1; grid-column: 2; }
.rsk-kab-drug .rsk-kab-zakaz__chto { grid-row: 2; grid-column: 1 / -1; }
.rsk-kab-drug .rsk-kab-zakaz__stupen { font-size: 17px; }
.rsk-kab-drug__status {
margin: 0; padding: 6px 12px;
border: 1px solid var(--rsk-line); border-radius: 999px;
font-size: 11px; letter-spacing: .18em;
color: var(--ink-55);
white-space: nowrap;
}
.rsk-kab-drug--zaschitan .rsk-kab-drug__status {
border-color: var(--rsk-line-lit);
color: var(--gold-lit);
}
.rsk-kab-shkaly { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rsk-kab-shkala {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline; row-gap: 10px; column-gap: 12px;
padding: 16px;
}
.rsk-kab-shkala__imya { grid-row: 1; grid-column: 1; margin: 0; font-size: 12px; color: var(--ink-70); }
.rsk-kab-shkala__n {
grid-row: 1; grid-column: 2;
font-size: 20px; line-height: 1; color: var(--gold-lit);
font-variant-numeric: lining-nums; white-space: nowrap;
}
.rsk-kab-shkala__nagrada { grid-column: 1 / -1; font-size: 16px; line-height: 1.45; color: var(--ink-70); }
.rsk-kab-shkala__do { color: var(--ink); }
.rsk-kab-tochki {
grid-column: 1 / -1;
display: flex; align-items: center; justify-content: space-between;
height: 22px; padding: 0 3px;
background: linear-gradient(90deg, rgba(201, 168, 106, .1), rgba(201, 168, 106, .4)) center / 100% 1px no-repeat;
}
.rsk-kab-tochki i {
flex: 0 0 auto;
width: 11px; height: 11px;
transform: rotate(45deg);
border: 1px solid var(--gold-dim);
background: #141a13;
}
.rsk-kab-tochki i.est {
border-color: var(--gold-lit);
background: var(--gold);
}
.rsk-kab-tochki::after {
content: '';
flex: 0 0 auto;
width: 15px; height: 15px; margin-right: 2px;
transform: rotate(45deg);
border: 1px solid var(--gold-lit);
background: #141a13;
box-shadow: inset 0 0 0 2px #141a13, inset 0 0 0 7px rgba(201, 168, 106, .55);
}
.rsk-kab-podarki__spisok { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rsk-kab-podarok {
padding: 8px 14px;
border: 1px solid var(--rsk-line-lit); border-radius: 999px;
background: rgba(201, 168, 106, .06);
font-size: 16px; color: var(--ink);
}
.rsk-kab-podarok__n { color: var(--gold-lit); }
/* «5+1» (fix69): подарки за свои оплаты стоят под шкалами — отступ тот же,
что между шкалами, иначе плашка прилипает к последней карточке. */
.rsk-kab-svoi .rsk-kab-podarki__spisok { margin-top: 12px; }
/* Что хранится — свёрнуто, одной плитой. */
.rsk-kab-hranim { padding: 4px 16px; }
.rsk-kab-hranim__summary {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
min-height: 56px;
list-style: none; cursor: pointer;
font-weight: 300; font-size: 20px; color: var(--ink);
}
.rsk-kab-hranim__summary::-webkit-details-marker { display: none; }
.rsk-kab-hranim__summary::after {
content: '';
flex: 0 0 auto;
width: 9px; height: 9px; margin: -4px 6px 0 0;
border-right: 1.5px solid var(--gold);
border-bottom: 1.5px solid var(--gold);
transform: rotate(45deg);
}
.rsk-kab-hranim[open] .rsk-kab-hranim__summary::after { margin-top: 4px; transform: rotate(-135deg); }
.rsk-kab-hranim__spisok { margin: 0 0 8px; }
/* Телефон: подпись над значением — длинный номер в мессенджере не
рвётся посреди. С 560 px — в строку. */
.rsk-kab-hranim__spisok .rsk-kabinet__ryad {
display: grid; gap: 4px;
margin: 0; padding: 11px 0;
border-top: 1px solid var(--rsk-line);
}
.rsk-kab-hranim__spisok .rsk-kabinet__ryad > dt { margin: 0; }
.rsk-kab-hranim__spisok .rsk-kabinet__ryad > dd {
margin: 0;
font-size: 16px; color: var(--ink);
font-variant-numeric: lining-nums; overflow-wrap: anywhere;
}
@media (min-width: 560px) {
.rsk-kab-hranim__spisok .rsk-kabinet__ryad {
grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px;
}
.rsk-kab-hranim__spisok .rsk-kabinet__ryad > dd { text-align: right; }
}
/* Удалить — тихо, внизу; под ним запас на полосу жестов телефона. */
.rsk-kab-udalit { margin-top: -12px; text-align: center; }
.rsk-kab-udalit__knopka {
min-height: 48px; padding: 0 16px;
border: 0; background: none; cursor: pointer;
font: 14px/1.4 'Manrope', Arial, sans-serif;
letter-spacing: .2em; text-transform: uppercase;
color: var(--ink-55);
text-decoration: underline; text-decoration-color: rgba(244, 239, 231, .25);
text-underline-offset: 5px;
}
.rsk-kab-udalit__knopka:hover { color: var(--gold-lit); }
.rsk-kab-udalit__tochno { max-width: 480px; margin: 0 auto; padding: 18px; }
.rsk-kab-udalit__tochno .rsk-kab-tekst { color: var(--ink); }
.rsk-kab-udalit__knopki { display: flex; flex-wrap: wrap; gap: 8px; }
.rsk-kab-udalit__knopki .rsk-kab-knopka { flex: 1 1 150px; min-width: 0; }
html.rsk-app .rsk-kabinet { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.rsk-kab-beda {
margin: 18px 0 0; max-width: none;
text-align: center; font-size: 16px; color: var(--gold-lit);
}
@media (max-width: 374px) {
.rsk-kab-segodnya { padding-inline: 14px; }
.rsk-kab-zhdet { margin-inline: -14px; padding-inline: 14px; }
.rsk-kab-zakaz, .rsk-kab-kanal, .rsk-kab-shkala { padding-inline: 14px; }
.rsk-kab-chislo__n { font-size: 36px; }
}
@media (min-width: 700px) {
.rsk-kab-kanaly { grid-template-columns: 1fr 1fr; }
.rsk-kab-segodnya { padding-inline: 24px; }
.rsk-kab-zhdet { margin-inline: -24px; padding-inline: 24px; }
}
/* ======================================================================
77. «ДА ИЛИ НЕТ» ИЗ ГОТОВЫХ ТЕКСТОВ (25.09.2026, CLAUDE.md 10.2)
======================================================================
Страница /rasklady/da-net (templates/rasklady/da_net.html): вопрос,
тема, одна карта, крупно ответ, по «Подробнее» — пояснение. Стол,
колода, раздача и трактовка — прежние, как у карты дня; здесь только
то, чего у карты дня нет: поле вопроса, кнопки тем и слово ответа.
Правило 0: шрифты раздела (подписи прописными — Manrope через
`.rsk-nad`, остальное — засечный), кегль не ниже 16, цвета — прежние
переменные. Тяжёлых слоёв нет (Android, предел памяти отрисовки —
см. `.rsk-zamerlo .rsk-noch`): ни фильтров, ни размытия, ни новых
слоёв во весь экран; проявление ответа — прозрачность и сдвиг.
Поле вопроса НЕ `.rsk-pole-vvoda` нарочно: по этому классу страница
вопросов перестраивает сетку всего `.rsk` (`.rsk:has(.rsk-pole-vvoda)`),
а у этой страницы строй карты дня. Вид поля повторён ниже теми же
переменными. */
.rsk-dn { margin: 26px 0 0; max-width: 560px; }
.rsk-dn[hidden] { display: none; }
.rsk-dn > .rsk-nad { margin: 0 0 10px; }
.rsk-dn__vopros {
display: block; width: 100%; min-height: 64px;
padding: 12px 16px;
border: 1px solid var(--rsk-line); border-radius: 10px;
background: rgba(0, 0, 0, .34); color: var(--ink);
font-family: inherit; font-size: 17px; line-height: 1.5;
caret-color: var(--gold-lit);
resize: vertical;
transition: border-color .3s ease, box-shadow .3s ease;
}
.rsk-dn__vopros:focus {
outline: none;
border-color: var(--gold-lit);
box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 5px rgba(201, 168, 106, .13);
}
.rsk-dn__temy {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 18px 0 0; padding: 0; border: 0;
}
.rsk-dn__tema { position: relative; display: inline-flex; cursor: pointer; }
/* Сам переключатель прозрачен и лежит поверх подписи: нажимается вся
плашка, клавиатура и экранный диктор работают с настоящим radio. */
.rsk-dn__tema > input {
position: absolute; inset: 0; width: 100%; height: 100%;
margin: 0; opacity: 0; cursor: pointer;
}
.rsk-dn__tema > span {
display: inline-block;
padding: 9px 14px;
border: 1px solid var(--rsk-line); border-radius: 6px;
background: rgba(0, 0, 0, .22);
font-size: 16px; line-height: 1.3; color: var(--ink-70);
transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.rsk-dn__tema:hover > span { border-color: var(--rsk-line-lit); color: var(--ink); }
.rsk-dn__tema > input:checked + span {
border-color: var(--gold);
background: rgba(201, 168, 106, .14);
color: var(--gold-lit);
}
.rsk-dn__tema > input:focus-visible + span {
outline: 2px solid var(--gold-lit); outline-offset: 3px;
}
/* Нажали «Вытянуть» без темы — рамки тем загораются, пока тему не
выберут. */
.rsk-dn__temy--nado:not(:has(input:checked)) .rsk-dn__tema > span {
border-color: var(--gold-dim);
}
.rsk-dn__preduprezhdenie {
margin: 12px 0 0; max-width: 60ch;
font-size: 16px; line-height: 1.55; color: var(--ink-70);
}
/* Приглашение друга под отказом «на сегодня всё»: своей строкой во всю
ширину зоны действия, как строка беды. */
.rsk-hero__deystvie > .rsk-dn__priglasi { flex: 1 0 100%; margin: 4px 0 0; }
.rsk-dn__priglasi .btn { width: 100%; }
/* Сколько бесплатных «да/нет» есть (25.09.2026, «да/нет просто сколько
есть»): тихая строка под кнопкой, своей строкой во всю ширину зоны. */
.rsk-hero__deystvie > .rsk-dn__schet {
flex: 1 0 100%; min-width: 0;
margin: 0; max-width: none;
font-size: 16px; line-height: 1.5; color: var(--ink-70);
font-variant-numeric: lining-nums;
}
.rsk-hero__deystvie > .rsk-dn__schet[hidden] { display: none; }
/* Ответ карты. */
.rsk-dn-otvet {
margin: 26px 0 0; max-width: 560px;
animation: rsk-dn-otvet .9s cubic-bezier(.2, .7, .2, 1) both;
}
.rsk-dn-otvet[hidden] { display: none; }
/* Под картой (телефон и столбик до 1280) ответ стоит по оси карты; в
левой колонке широкого экрана — по левому краю, как весь текст там. */
@media (max-width: 1279px) {
.rsk-dn-otvet { margin-inline: auto; text-align: center; }
}
/* Подпись темы — как `.rsk-nad`, но своим классом: `.rsk-nad` обложки
уходят вместе с заголовком, когда пошла раздача. */
.rsk-dn-otvet__tema {
display: block; margin: 0 0 8px;
font: 12px/1.4 'Manrope', Arial, sans-serif;
letter-spacing: .3em; text-transform: uppercase; color: var(--gold-dim);
}
.rsk-dn-otvet__tema[hidden] { display: none; }
.rsk-dn-otvet__vopros {
margin: 0 0 10px;
font-size: 17px; line-height: 1.5; font-style: italic; color: var(--ink-70);
overflow-wrap: anywhere;
}
.rsk-dn-otvet__vopros[hidden] { display: none; }
.rsk-dn-otvet__slovo {
margin: 0;
font-weight: 300; font-size: clamp(46px, 12vw, 88px); line-height: 1.04;
letter-spacing: -.02em; color: var(--gold-lit);
}
.rsk-dn-otvet > .btn { margin-top: 20px; }
.rsk-dn-otvet > .btn[hidden] { display: none; }
@keyframes rsk-dn-otvet {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.rsk-dn-otvet { animation: none; }
}
/* Широкий экран: строй карты дня (колода справа, раздел 51) и одна
строка сверх него — ответ встаёт в левую колонку под формой, разбор и
оговорка — ниже. Строки объявлены явно по той же причине, что там:
стол растянут на 1 / -1. */
@media (min-width: 1280px) {
.rsk-hero.rsk-hero--da-net:has(> .rsk-hero__stol) {
grid-template-rows: auto auto auto auto;
}
.rsk-hero.rsk-hero--da-net:has(> .rsk-hero__stol) > .rsk-dn-otvet {
grid-column: 1; grid-row: 2;
}
.rsk-hero.rsk-hero--da-net:has(> .rsk-hero__stol) > .rsk-trakt--pod {
grid-column: 1; grid-row: 3;
}
.rsk-hero.rsk-hero--da-net:has(> .rsk-hero__stol) > .rsk-ogovorka--pod {
grid-column: 1; grid-row: 4;
}
/* ПОКА ВИСИТ ПОЛОСА COOKIE (28.09.2026, правило 7.1; руководитель
раздела) — тот же приём, что у страницы вопросов: место под кнопку
со строкой согласия освобождается выше, пока полоса видна. На
1366×768 верх полосы 691, а кнопка «Вытянуть карту» стояла на
692..744, строка согласия — на 802..830 (на 1280×800 — 691..743 и
801..828 при полосе с 723): форма в левой колонке длинная —
заголовок в две строки, поле, три ряда тем, предупреждение.
— строка согласия встаёт прямо НАД кнопкой, как на низком экране
страницы вопросов (вариант 3), счёт бесплатных — под кнопкой;
— предупреждение про тему уходит под блок кнопки: блок вопроса
раскрыт в колонку (`display: contents`), его части держат прежние
ширину и отбивку через `inherit` — своих чисел нет;
— поле вопроса на это время по своему тексту: пустое — в одну
строку, растёт, пока пишут (`field-sizing: content`; где его
нет — прежние две строки).
Ответили на полосу — `:has()` гаснет, всё как было. `:where()`
держит специфичность прежней. */
:where(body:has(#cookie:not([hidden]))) .rsk-hero--da-net .rsk-dn:not([hidden]) { display: contents; }
:where(body:has(#cookie:not([hidden]))) .rsk-hero--da-net .rsk-dn > :not(.rsk-dn__preduprezhdenie) { max-width: inherit; }
:where(body:has(#cookie:not([hidden]))) .rsk-hero--da-net .rsk-dn > .rsk-nad { margin-top: inherit; }
:where(body:has(#cookie:not([hidden]))) .rsk-hero--da-net .rsk-dn__vopros { min-height: 0; field-sizing: content; }
:where(body:has(#cookie:not([hidden]))) .rsk-hero--da-net .rsk-hero__in > [data-soglasie-deystvuet] { order: 1; margin-top: 12px; }
:where(body:has(#cookie:not([hidden]))) .rsk-hero--da-net .rsk-hero__in > .rsk-hero__deystvie { order: 2; margin-top: 8px; }
:where(body:has(#cookie:not([hidden]))) .rsk-hero--da-net .rsk-dn__preduprezhdenie { order: 3; }
}
/* ТЕЛЕФОН, ПОКА ВИСИТ ПОЛОСА COOKIE (28.09.2026, правило 7.1;
руководитель раздела). Строй «да/нет» на телефоне задаёт site.css
(раздел «Cookie», п. 3, до 599): форма раскрыта в колонку, подсказка
про тему — под блоком кнопки. Колода на телефоне стоит ПОД формой,
ужимать над формой можно только отбивки. Полоса (126 px на 360–430)
закрывала строку согласия: на 360×740 строка 686..741 при полосе с
614, на 390×844 — впритык (+1). Пока полоса видна:
— строка согласия встаёт сразу под кнопкой, счёт бесплатных — за
ней (блок кнопки раскрыт в колонку);
— поле вопроса по своему тексту (`field-sizing: content`);
— отбивки обложки и формы плотнее, у кнопок тем меньше поле по
высоте; кегль и слова прежние.
Ответили на полосу — `:has()` гаснет, строй как в site.css. Выборка
с `body:has(#cookie…)` сильнее `html body …` из site.css — так и
задумано. Порог 599 — тот же, что у строя в site.css. */
@media (max-width: 599px) {
body:has(#cookie:not([hidden])) .rsk-hero.rsk-hero--da-net { padding-top: 4px; }
body:has(#cookie:not([hidden])) .rsk-hero--da-net .rsk-lead { margin-top: 8px; }
body:has(#cookie:not([hidden])) .rsk-hero--da-net .rsk-dn > .rsk-nad { margin-top: 8px; }
body:has(#cookie:not([hidden])) .rsk-hero--da-net .rsk-dn__vopros { min-height: 0; field-sizing: content; }
body:has(#cookie:not([hidden])) .rsk-hero--da-net .rsk-dn__temy { margin-top: 6px; }
body:has(#cookie:not([hidden])) .rsk-hero--da-net .rsk-dn__tema > span { padding-top: 7px; padding-bottom: 7px; }
body:has(#cookie:not([hidden])) .rsk-hero--da-net .rsk-hero__in > .rsk-hero__deystvie { display: contents; }
body:has(#cookie:not([hidden])) .rsk-hero--da-net .rsk-hero__in > .rsk-hero__deystvie > [data-tyanut] { margin-top: 10px; }
body:has(#cookie:not([hidden])) .rsk-hero--da-net .rsk-hero__in > [data-soglasie-deystvuet] { order: 1; margin-top: 8px; }
body:has(#cookie:not([hidden])) .rsk-hero--da-net .rsk-hero__deystvie > :not([data-tyanut]) { order: 2; margin-top: 8px; }
body:has(#cookie:not([hidden])) .rsk-hero--da-net .rsk-dn__preduprezhdenie { order: 3; }
}
/* ======================================================================
80. «АРКАН ПО ДАТЕ РОЖДЕНИЯ» И «УГАДАЙ АРКАН» (26.09.2026)
======================================================================
Две бесплатные страницы без модели: /rasklady/arkan-po-date-rozhdeniya
(templates/rasklady/arkan.html, static/js/arkan.js) и /rasklady/ugadaj
(templates/rasklady/ugadaj.html, static/js/ugadaj.js). Всё ниже — под
`.rsk-ar`/`.rsk-ug` и `data-rsk="arkan"`/`"ugadaj"`: на другие страницы
раздела не действует.
СВОЕГО ВИДА ЗДЕСЬ НЕТ (владелец: «у нас есть общий стиль страниц уже не
надо выдумывать»). Стол, колода, карта, рубашка, переворот, ореол,
искры, пыльца, поле и трактовка — классы раздела выше. Здесь только
обложки этих страниц, их раскладка и то, чего у карты дня нет: поле
даты, кадр вопроса на лице карты и варианты ответа. Правила с пометкой
«В РАЗДЕЛ» — кандидаты на обобщение селектора; до того они повторяют
число из раздела, и откуда оно взято, названо рядом.
Рамки правила 0: Source Serif 4, Manrope только в подписях прописными,
основной текст не мельче 16 px, тёмный тёплый фон, золото. */
/* --- 80а. АРКАН ПО ДАТЕ РОЖДЕНИЯ ------------------------------------------ */
/* 1. ОБЛОЖКА ПЕРВОГО ЭКРАНА — В РАЗДЕЛ (18 и 18б rasklady.css).
`data-rsk="arkan"` ставит шаблон основы по слагу. Файлы рисуются
отдельно: static/img/rasklady/oblozhki/arkan.webp (1920×640) и
arkan-telefon.webp (1024×1536). */
@media (min-width: 1024px) {
.rsk-pole[data-rsk="arkan"] { --rsk-oblozhka: var(--rsk-shtora), url('../img/rasklady/oblozhki/arkan.webp'); }
}
@media (max-width: 1023px) {
.rsk-pole[data-rsk="arkan"] { --rsk-oblozhka: var(--rsk-shtora-tel), url('../img/rasklady/oblozhki/arkan-telefon.webp'); }
}
/* 2. ПОЛЕ ДАТЫ. Вид — `.rsk-dn__vopros` («да/нет»); у поля даты не
бывает ни растягивания, ни второй строки. Цифры — прописные, как у
счёта «да/нет». */
.rsk-ar__data {
resize: none;
font-variant-numeric: lining-nums;
/* Без системного вида (fix70, 29.09.2026). Владелец с айфона: «дата
вставить в аркан по дате рождения улетела кудато в сторано». На
видео правый край поля за краем экрана — и пустого, и с датой.
Причина — Сафари на айфоне: у поля даты с системным видом ширина в
процентах не считается заданной, и он сам ставит ему
box-sizing: content-box и min-width по самой длинной дате
(WebKit, RenderThemeIOS: adjustInputElementButtonStyle). Тогда
width: 100% — это ширина текста, а поля 16 + 16 px и рамка ложатся
сверху: поле шире колонки на 34 px и уходит вправо. Без системного
вида Сафари его не перестраивает: остаются наши border-box и 100 %.
Рамку, фон, поля и шрифт полю и так давал раздел — вид тот же;
календарь по касанию открывается, как открывался. */
-webkit-appearance: none;
appearance: none;
}
/* Сафари на айфоне ставит дату в поле по центру — у раздела текст в
полях от левого края. */
.rsk-ar__data::-webkit-date-and-time-value { text-align: left; }
.rsk-ar__data[aria-invalid="true"] { border-color: var(--gold-dim); }
/* 3. ХОД: НАДПИСИ ОБЛОЖКИ УХОДЯТ — В РАЗДЕЛ (54 rasklady.css).
Там правило ловит `[data-scena]`, а его здесь нет нарочно (метку
забирает rasklady.js). Кадры и время — оттуда же: 0,75 с, та же
кривая. Скрипт ждёт ровно столько, сколько тут написано: он читает
длительность у заголовка. */
.rsk-hero--arkan.rsk-ar--idet > .rsk-hero__in > .rsk-h1,
.rsk-hero--arkan.rsk-ar--idet > .rsk-hero__in > .rsk-lead {
overflow: hidden;
animation: rsk-nadpis-uhodit .75s cubic-bezier(.4, 0, .2, 1) both;
}
.rsk-hero--arkan > .rsk-hero__in > [hidden] { display: none; }
/* «Другая дата»: первый экран возвращается тем же проявлением, каким
приходит ответ «да/нет» (`rsk-dn-otvet`, 0,9 с, раздел 77). */
.rsk-hero--arkan.rsk-ar--vozvrat > .rsk-hero__in > * {
animation: rsk-dn-otvet .9s cubic-bezier(.2, .7, .2, 1) both;
}
/* 4. КАРТА УХОДИТ В КОЛОДУ. Тот же полёт `rsk-vyhod-polet`, пущенный
назад, — вместе с тенью (`rsk-ten-polet`) и светом по рубашке
(`rsk-svet-ryb`), иначе тень и свет шли бы вперёд под летящей назад
картой. */
.rsk-karta.vyshla.rsk-ar-nazad,
.rsk-karta.vyshla.rsk-ar-nazad::before,
.rsk-karta.vyshla.rsk-ar-nazad .rsk-karta__ryb::before {
animation-direction: reverse;
}
/* 5. РАЗДЕЛЫ: «Общее значение», «Личность», «Совет». Вид трактовки
(`.rsk-trakt`), по разделу на подпись и абзац. Абзацы проявляются
сами (`rsk-abzac`, раздел трактовки); подпись — теми же кадрами, шаг
между разделами — .16 с, как `--i` у строк трактовки. Переносы строк
в тетради сохраняются. Эти три раздела страница показывает, только
пока у карты нет описания человека (5б) — есть оно, идёт оно. */
.rsk-ar__razdely[hidden],
.rsk-ar__razdel[hidden],
.rsk-ar__para[hidden] { display: none; }
/* Отбивка между разделами — зазором столбца, а не `+`-соседом: скрытые
разделы тетради стоят в разметке перед описанием, и сосед по `+`
давал бы первому видимому разделу лишние 30 px сверху. */
.rsk-ar__razdely { display: flex; flex-direction: column; gap: 30px; }
.rsk-ar__razdely .rsk-trakt__l {
animation: rsk-abzac .85s cubic-bezier(.2, .8, .2, 1) both;
animation-delay: calc(var(--i, 0) * .16s);
}
/* `--j` — место абзаца или пункта внутри раздела (ставит arkan.js):
внутри раздела строки тоже приходят по одной. У разделов тетради
абзац один, `--j` нет — задержка прежняя. */
.rsk-ar__razdely .rsk-trakt__tekst p,
.rsk-ar__razdely .rsk-ar__spisok > li {
white-space: pre-line;
animation-delay: calc(var(--i, 0) * .16s + .08s + var(--j, 0) * .08s);
}
/* 5б. ОПИСАНИЕ ЧЕЛОВЕКА АРКАНА (Указка #294). Порядок — «Какой это
человек», «Суперсила», «Сильные стороны» и «Слабые стороны» рядом,
«Задача», «Как соединиться с энергией аркана». Вид — та же трактовка:
подпись `.rsk-trakt__l`, абзацы `.rsk-trakt p` (17/18/20 px). Своего
здесь три вещи, и все из раздела:
— суперсила крупнее и золотом, как слово ответа, но кеглем абзаца;
— пункты списков — кегль и цвет абзаца трактовки, знак — золотой
ромб раздела (`.rsk-ug__pravila`, `.rsk-poz::before`); у слабых
сторон ромб контуром — та же сторона, в тени;
— шаги — по номерам, цифры прописные, золотом, тем же шрифтом.
Сильные и слабые встают в две колонки сами, когда каждой хватает
300 px (1920 — левая колонка 825 px, 768 — вся ширина); на телефоне
и в узкой колонке 1280–1440 — друг под другом. */
.rsk-ar__para {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 30px 44px;
align-items: start;
}
.rsk-ar__razdely .rsk-ar__sila .rsk-trakt__tekst p {
font-size: 21px; line-height: 1.5; color: var(--gold-lit);
}
.rsk-ar__spisok {
display: grid; gap: 12px;
margin: 0; padding: 0; list-style: none;
}
.rsk-ar__razdely .rsk-ar__spisok > li {
position: relative; padding-left: 24px;
font-size: 17px; line-height: 1.7; color: var(--ink);
text-wrap: pretty;
animation: rsk-abzac .85s cubic-bezier(.2, .8, .2, 1) both;
}
.rsk-ar__spisok > li::before {
content: ''; position: absolute; left: 3px; top: .72em;
width: 6px; height: 6px; background: var(--gold);
transform: rotate(45deg);
box-shadow: 0 0 10px rgba(224, 196, 140, .45);
}
.rsk-ar__spisok--ten > li::before {
background: none; border: 1px solid var(--gold-dim); box-shadow: none;
}
.rsk-ar__shagi { counter-reset: rsk-ar-shag; }
.rsk-ar__razdely .rsk-ar__shagi > li { padding-left: 34px; counter-increment: rsk-ar-shag; }
.rsk-ar__shagi > li::before {
content: counter(rsk-ar-shag);
top: 0; left: 0; width: auto; height: auto;
background: none; box-shadow: none; transform: none;
font-variant-numeric: lining-nums; color: var(--gold);
}
@media (min-width: 1024px) {
.rsk-ar__razdely .rsk-ar__sila .rsk-trakt__tekst p { font-size: 23px; }
.rsk-ar__razdely .rsk-ar__spisok > li { font-size: 18px; }
}
@media (min-width: 2200px) {
.rsk-ar__razdely { gap: 40px; }
.rsk-ar__razdely .rsk-ar__sila .rsk-trakt__tekst p { font-size: 27px; }
.rsk-ar__razdely .rsk-ar__spisok > li { font-size: 20px; padding-left: 28px; }
.rsk-ar__razdely .rsk-ar__shagi > li { padding-left: 40px; }
}
/* 5в. ТЕЗИСЫ АРКАНА (Указка #302, владелец: «на верху норм но повторять
все это потом не надо»). Есть тезисы у карты — скрипт ставит разделам
`.rsk-ar__razdely--tz` и показывает только их: «Ключевое», «Ваш путь»
и «Ваша сила», «Какой вы», «В работе» и «В любви», «Тени», «Урок»,
«Что помогает». Вид — та же трактовка и списки 5б (пары — `.rsk-ar__para`,
путь и сила — кегль и золото суперсилы `.rsk-ar__sila`). Своего три вещи:
— «Ключевое» — плашками, как метка раздела (`.rsk-metka--free`):
Manrope прописными, золото, рамка-пилюля;
— путь и сила стоят полосой между двумя волосками: после плашек глаз
сразу находит главное;
— отбивки плотнее: блоков девять, читаться они должны за полминуты. */
.rsk-ar__razdely--tz { gap: 26px; }
.rsk-ar__klyuchi {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 0; padding: 0; list-style: none;
}
.rsk-ar__razdely .rsk-ar__klyuchi > li {
display: inline-flex; align-items: center;
min-height: 34px; padding: 6px 14px;
border: 1px solid var(--gold-dim); border-radius: 999px;
background: rgba(201, 168, 106, .07);
font: 12px/1.35 'Manrope', Arial, sans-serif;
letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lit);
animation: rsk-abzac .85s cubic-bezier(.2, .8, .2, 1) both;
animation-delay: calc(var(--i, 0) * .16s + .08s + var(--j, 0) * .05s);
}
.rsk-ar__para--stroki {
padding: 22px 0;
border-block: 1px solid var(--rsk-line);
}
@media (min-width: 1024px) {
.rsk-ar__razdely .rsk-ar__klyuchi > li { font-size: 13px; padding: 7px 16px; }
}
@media (min-width: 2200px) {
.rsk-ar__razdely--tz { gap: 34px; }
.rsk-ar__klyuchi { gap: 10px; }
.rsk-ar__razdely .rsk-ar__klyuchi > li { min-height: 42px; padding: 8px 20px; font-size: 15px; }
.rsk-ar__para--stroki { padding: 30px 0; }
}
/* 5а. ТЕЛЕФОН: ПОКА КАРТУ НЕ ТЯНУЛИ, СТОЛ НЕ ДЕРЖИТ МЕСТО ПОД НЕЁ — та же
мысль, что 65а rasklady.css у карты дня, без её меток и чисел. Пока
колода стоит посередине, пустое место под карту из потока убрано, и
середина стола приходится на полосу колоды — колода сразу под
кнопкой, а не через пустое сукно. Уехала колода на свой край — место
возвращается в тот же миг, и колода при этом не сдвигается: край на
телефоне и есть эта полоса. */
@media (max-width: 559px) {
.rsk-hero--arkan .rsk-stol--odna:has(> .rsk-stopka--sredina) > .rsk-poz--zhdet { display: none; }
}
/* 5г. НИЗКИЙ ТЕЛЕФОН: КОЛОДА И КНОПКА — НА ПЕРВОМ ЭКРАНЕ ЦЕЛИКОМ
(27.09.2026, мерка владельца А5 и А6). На 360×740 колода стояла на
503–807 при окне 740: нижняя пятая часть — за сгибом. На 390×844 и
430×932 помещается, поэтому всё ниже — только окна до 820 в высоту
(выше 820 колода и без этого помещается и на 360).
Четыре места, и шрифты с кеглем не тронуты (правило 0):
— поле обложки сверху 24 → 12, отбивка перед полем 26 → 18;
— поле даты 64 → 52, как кнопка под ним: оно в одну строку, 64 —
высота поля «да/нет», где вопрос пишут в несколько строк;
— колода стоит во главе стола, как у карты дня (раздел 63), а не
посередине. Верх — тот же, что у края на телефоне (раздел «ГДЕ
ЛЕЖИТ КОЛОДА»), поэтому по нажатию колода больше не сдвигается;
— карта не больше, чем влезает в окно: всё над колодой (шапка,
крошки в две строки, заголовок, лид, поле, кнопка) и 10 px воздуха
под ней — 474 px, колода с веером — 1,6 ширины карты. На 360×740
карта 166 вместо 190 (к ней и колода, и вытянутая карта — они одна
мера, иначе карта на вылете прыгнет в размере); на 360×780 и выше —
прежние 190. Ниже 150 не опускается. В мини-приложении нет крошек
и шапка ниже — над колодой на 50 px меньше, и на 740 карта там
остаётся 190. `vh` — запас для браузеров без `svh`. */
@media (max-width: 559px) and (max-height: 820px) {
.rsk-hero.rsk-hero--arkan { padding-top: 12px; }
.rsk-hero--arkan .rsk-dn { margin-top: 18px; }
.rsk-hero--arkan .rsk-ar__data { min-height: 52px; }
.rsk-hero--arkan .rsk-stol--odna > .rsk-stopka--sredina { top: calc(var(--k-w) * .84 + 8px); }
.rsk-hero--arkan .rsk-stol--odna {
--ar-nad-kolodoy: 474px;
--k-max: clamp(150px, calc((100vh - var(--ar-nad-kolodoy)) / 1.6), 190px);
--k-max: clamp(150px, calc((100svh - var(--ar-nad-kolodoy)) / 1.6), 190px);
}
.rsk-app .rsk-hero--arkan .rsk-stol--odna { --ar-nad-kolodoy: 424px; }
}
/* 6. ШИРОКИЙ ЭКРАН — В РАЗДЕЛ (77 rasklady.css, `.rsk-hero--da-net`).
Строй карты дня и одна строка сверх него: «как посчитано» — в левой
колонке под формой, разделы — ниже. */
@media (min-width: 1280px) {
.rsk-hero.rsk-hero--arkan:has(> .rsk-hero__stol) {
grid-template-rows: auto auto auto auto;
}
.rsk-hero.rsk-hero--arkan:has(> .rsk-hero__stol) > .rsk-dn-otvet {
grid-column: 1; grid-row: 2;
}
.rsk-hero.rsk-hero--arkan:has(> .rsk-hero__stol) > .rsk-trakt--pod {
grid-column: 1; grid-row: 3;
}
}
/* 6а. КАРТА ИДЁТ ЗА ЧИТАТЕЛЕМ (27.09.2026, мерка владельца А4: «между
этим и этим целая пропасть так быть не должно»). Стол занимает все
строки обложки (раздел 57, `1 / -1`), а тезисы втрое длиннее стола:
на 1920 стол кончался на 781, разделы — на 2690, и справа от текста
стояло 1900 px пустого сукна. Теперь стол липнет к окну, едет рядом
с текстом до конца обложки и уходит вместе с ней.
ВЕРХ ЛИПКОСТИ НЕ НИЖЕ ВЕРХА СТОЛА НА ПЕРВОМ ЭКРАНЕ, иначе липкий стол
при нулевой прокрутке сам съедет вниз и первый экран поменяется. Верх
стола на первом экране — 116 на окнах до 900 в высоту (раздел 50.1
срезает там поля шапки и обложки) и от 168 на высоких. Отсюда 108 и
160: на 1920×919 под картой в окне не больше 162 px, на 2133×1021 —
220. На 2880×1378 — 577, почти как на первом экране (548): там это
мера карты (`--k-max`), а не раскладка.
Только аркан: у карты дня, «да/нет» и «Угадай» стол тот же, но их не
трогаем.
Порог высоты ниже — тот же, что у раздела 50.1 (fix30: там низкий
экран на компьютере теперь до 1000, чтобы 1920×919 получал срезанные
поля). Без этого на 1920×919 стол на первом экране встал бы на 116, а
липкость держала бы его на 160 — стол съехал бы вниз при нулевой
прокрутке.
СНЯТО fix41 (27.09.2026, п. 8 ниже): текст теперь идёт под столом во
всю ширину, и липкий стол наезжал бы на колонки. */
@media (min-width: 1280px) {
.rsk-hero.rsk-hero--arkan:has(> .rsk-hero__stol) > .rsk-hero__stol {
position: sticky;
top: 160px;
}
}
@media (min-width: 1280px) and (max-height: 1000px) {
.rsk-hero.rsk-hero--arkan:has(> .rsk-hero__stol) > .rsk-hero__stol { top: 108px; }
}
/* 7. БЕЗ ДВИЖЕНИЯ — сразу результат: надписи просто исчезают, разделы
стоят на месте. Переворот и полёт стили раздела гасят сами. */
@media (prefers-reduced-motion: reduce) {
.rsk-hero--arkan.rsk-ar--idet > .rsk-hero__in > .rsk-h1,
.rsk-hero--arkan.rsk-ar--idet > .rsk-hero__in > .rsk-lead,
.rsk-hero--arkan.rsk-ar--vozvrat > .rsk-hero__in > *,
.rsk-ar__razdely .rsk-trakt__l,
.rsk-ar__razdely .rsk-ar__spisok > li,
.rsk-ar__razdely .rsk-ar__klyuchi > li {
animation: none;
}
}
/* 8. РЕЗУЛЬТАТ НА ПК: СТОЛ ВО ГЛАВЕ, ТЕКСТ ПОД НИМ КОЛОНКАМИ (fix41,
27.09.2026, мерка владельца А4, А5, А6).
БЫЛО. Тезисы шли одной колонкой в левой половине (41–44 % ширины),
справа под картой — пустое сукно, 1300–2300 px в высоту на 1920…2880.
Пары «Путь / Сила» и «В работе / В любви» стояли в две колонки, и под
короткой было до 507 px пустоты у 11 арканов из 22. Строка «Какой
вы», «Тени», «Урок» — 86 знаков на 1920 и до 121 на 2880. Липкий стол
(6а) вёл карту за читателем, но под ней в окне всё равно было пусто.
СТАЛО — только пока показан результат (метка — видимые тезисы). До
хода и после «Другой даты» строй раздела 6 прежний, первый экран тот
же (кроме размера карты на 2200+, см. конец блока).
— Рядом со столом — группа: «как посчитано» и «Другая дата» одной
строкой, «Ключевое», а от 1600 ещё «Ваш путь» и «Ваша сила» одна под
другой (так группа по высоте ближе к столу). На 1280–1599 путь и
сила — полосой под столом, в две колонки, как были: на 1440–1599
карта 188 px, и группа с ними стояла выше стола — под столом было
пусто на 248–284 px (проверка fix41, 28.09.2026). Что по высоте
не сошлось, делится поровну на зазоры группы — сверху, между блоками
и снизу: каждый зазор — своя строка `1fr`, числа нет. Одной большой
щели не остаётся.
— Всё остальное — под столом во всю ширину, колонками: «Какой вы»,
«В работе», «В любви», «Тени», «Урок», «Что помогает» и в конце
последней колонки «Сохранить PDF» / «Поделиться». Колонки
выравниваются по высоте сами (CSS columns); подпись не рвётся и не
остаётся внизу одна, пункт и абзац переходят в следующую колонку
строками.
— 1024–1279: обложка там столбиком (стол во всю ширину, текст под
ним — сетку раздел 51 включает с 1280); меняются колонки и строка
«как посчитано» с «Другой датой» (одной строкой по оси карты).
Порядок чтения прежний: сверху вниз, колонки слева направо, у каждого
блока своя подпись. Шрифты, кегли, цвета и слова не тронуты (правило 0).
Обёртка в arkan.html: `.rsk-ar__niz` — всё после пути и силы вместе с
«Сохранить».
Строки сетки названы, и каждая ступень ширины перечисляет только свои:
стол стоит от `verh` до `niz-stola`, разделы (subgrid) — от `klyuchi`
до `konec`, блоки внутри — по своим именам. Зазоры-`1fr` между ними.
ОДНО ЧИСЛО — ОДНО МЕСТО (8.7). Колонка — `--ar-kolonka` у обложки:
колонок столько, сколько влезает не уже неё, но не больше четырёх.
Значений два, оба здесь: 404 на 1024–1279 (две колонки: на 1024 текст
861 px, две держатся, пока колонка не шире 408) и 456 от 1280: две
колонки до ~1640, три на 1920 и на 2133 (на 2133 три держатся, пока
колонка не уже 454), четыре на 2200+. Самая широкая колонка — у
перехода с двух на три, около 705 px: строка до 80 знаков. Потолок
карты аркана на 2200+ — `--k-max` в конце блока; скрипт (arkan.js)
берёт у страницы уже готовую ширину карты, своего числа у него нет.
Стол лежит поверх разделов (`z-index`): разделы занимают обе колонки
с линии `klyuchi`, и наклон карты за курсором не должен упираться в
их прозрачную рамку. Липкость 6а на ПК снята — почему, сказано у
правила ниже.
Телефон (до 1024): обёртка — `display: contents`, строй ни на пиксель
не меняется. */
.rsk-ar__niz { display: contents; }
@media (min-width: 1024px) {
.rsk-hero--arkan { --ar-kolonka: 404px; }
.rsk-hero--arkan > .rsk-ar__razdely--tz > .rsk-ar__niz {
display: block;
columns: var(--ar-kolonka) 4;
column-gap: 44px;
}
/* Внутри колонок пары разобраны: «В работе» и «В любви» идут друг за
другом, как все блоки. Список — поток, а не сетка. Подпись не рвётся
(её волосок — часть подписи) и не отрывается от текста под ней.
«Сохранить» — в конце, целиком: колонки заполняются по порядку, и
последняя обычно короче — кнопки встают как раз туда.
ПУНКТ И АБЗАЦ ПЕРЕХОДЯТ СТРОКАМИ, по одной (`orphans`/`widows` 1).
Колонки Chromium выравнивает только по самой высокой: высоту ей
задаёт самый большой неразрывный кусок в конце колонки, а последней
достаётся остаток. Пока пункт шёл целиком, куском была подпись с
первым пунктом (150–190 px), и под короткой колонкой оставалось до
148 px на 2880 и до 172 на 2560 (проверка fix41, 28.09.2026). Пункт,
которому можно рваться только по две строки, давал то же: `widows`
Chromium в колонках не держит. Строками — не больше 104 px у всех.
Перенесённая строка не размыта: проявление `rsk-abzac` с `both`
держало бы на узле `filter: blur(0px)`, и второй кусок узла
рисовался бы с размытием. Поэтому в колонках проявление держит кадры
только до своего начала (`backwards`). Последний кадр равен обычному
виду (видно, без сдвига, без размытия), так что по окончании ничего
не меняется. */
.rsk-hero--arkan .rsk-ar__niz .rsk-ar__para { display: contents; }
.rsk-hero--arkan .rsk-ar__niz .rsk-ar__razdel { margin: 0 0 26px; }
.rsk-hero--arkan .rsk-ar__niz .rsk-trakt__l { break-inside: avoid; break-after: avoid; }
.rsk-hero--arkan .rsk-ar__niz .rsk-ar__spisok { display: block; }
.rsk-hero--arkan .rsk-ar__niz .rsk-ar__spisok > li,
.rsk-hero--arkan .rsk-ar__niz .rsk-trakt__tekst p { orphans: 1; widows: 1; }
.rsk-hero--arkan .rsk-ar__niz .rsk-ar__spisok > li + li { margin-top: 12px; }
.rsk-hero--arkan .rsk-ar__niz .rsk-ar__sohranit { break-inside: avoid; }
.rsk-hero--arkan .rsk-ar__niz .rsk-trakt__l,
.rsk-hero--arkan .rsk-ar__niz .rsk-trakt__tekst p,
.rsk-hero--arkan .rsk-ar__niz .rsk-ar__spisok > li { animation-fill-mode: backwards; }
/* «Как посчитано» и «Другая дата» — одной строкой, пока влезают; не
влезли — кнопка под строкой, как раньше (тот же зазор 10 + 20). На
1024–1279 строка стоит под столом по оси карты, как стоял ответ, и
вплотную к столу: у стола своё поле под картой (100 px), а узкий
ответ в 560 px оставлял под колодой пустоту 220 px. */
.rsk-hero--arkan > .rsk-dn-otvet:has(~ .rsk-ar__razdely--tz:not([hidden])) {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 30px 32px;
max-width: none; margin-top: 0;
}
.rsk-hero--arkan > .rsk-dn-otvet > .rsk-dn-otvet__vopros { margin: 0; }
.rsk-hero--arkan > .rsk-dn-otvet > .btn { margin-top: 0; }
}
@media (min-width: 1280px) {
.rsk-hero--arkan { --ar-kolonka: 456px; }
/* 1280–1599: у стола «как посчитано» и «Ключевое». */
.rsk-hero.rsk-hero--arkan:has(> .rsk-ar__razdely--tz:not([hidden])) {
grid-template-rows:
[verh] auto minmax(0, 1fr)
[otvet] auto minmax(0, 1fr)
[klyuchi] auto minmax(0, 1fr)
[niz-stola stroki] auto
[kolonki] auto [konec];
row-gap: 0;
}
.rsk-hero.rsk-hero--arkan:has(> .rsk-ar__razdely--tz:not([hidden])) > .rsk-hero__in {
grid-column: 1; grid-row: verh;
}
.rsk-hero.rsk-hero--arkan:has(> .rsk-ar__razdely--tz:not([hidden])) > .rsk-hero__stol {
grid-column: 2; grid-row: verh / niz-stola;
align-self: start;
z-index: 1;
}
/* Стол больше не липнет (снимает `position: sticky` раздела 6а). Липкий
стол вёл карту рядом с колонкой текста, а теперь текст идёт под
столом, во всю ширину. Chromium держит липкий элемент сетки в
пределах всей сетки, а не своих строк: на стенде на 2880 при
прокрутке карта с колодой наезжали на третью и четвёртую колонки.
Снято всегда, а не только при результате: иначе стол мог бы
прыгнуть в миг смены (после «Другой даты» при сдвинутой странице).
При нулевой прокрутке липкий и обычный стол стоят одинаково —
первый экран прежний. */
.rsk-hero.rsk-hero--arkan:has(> .rsk-hero__stol) > .rsk-hero__stol {
position: static;
top: auto;
}
/* В левой колонке ответ — по левому краю, как весь текст там. Отступ
сверху прежний: 30 (строка сетки) + 26 (свой). */
.rsk-hero.rsk-hero--arkan:has(> .rsk-ar__razdely--tz:not([hidden])) > .rsk-dn-otvet {
grid-column: 1; grid-row: otvet;
justify-content: flex-start; margin-top: 56px;
}
/* Разделы — во всю ширину, строки и колонки — обложки (subgrid): так
группа встаёт в левую колонку рядом со столом, а колонки — под ним.
Черта трактовки слева идёт через всё. Отступ сверху прежний: 30 + 8. */
.rsk-hero.rsk-hero--arkan:has(> .rsk-ar__razdely--tz:not([hidden])) > .rsk-trakt--pod {
grid-column: 1 / -1; grid-row: klyuchi / konec;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
row-gap: 0;
margin-top: 38px;
}
/* Отбивки — снизу у того, что стоит выше (26, на 2200+ 34 — зазор
тезисов 5в). Колонкам сверху своей не нужно: когда выше стол, воздух
под картой уже есть в самом столе (его поле до низа, 92 px), и ещё 26
сверху давали под картой пустоту больше 120. */
.rsk-hero--arkan > .rsk-ar__razdely--tz > [data-ar-tz="klyuchi"] {
grid-column: 1; grid-row: klyuchi;
margin-bottom: 26px;
}
.rsk-hero--arkan > .rsk-ar__razdely--tz > .rsk-ar__para--stroki {
grid-column: 1 / -1; grid-row: stroki;
margin-bottom: 26px;
}
.rsk-hero--arkan > .rsk-ar__razdely--tz > .rsk-ar__niz {
grid-column: 1 / -1; grid-row: kolonki;
}
}
/* 1600+: путь и сила — у стола, одна под другой. Карта растёт с шириной
окна, и с 1600 стол уже выше группы с ними (замер на 1600 и 1650 —
пустоты 56–88 px). */
@media (min-width: 1600px) {
.rsk-hero.rsk-hero--arkan:has(> .rsk-ar__razdely--tz:not([hidden])) {
grid-template-rows:
[verh] auto minmax(0, 1fr)
[otvet] auto minmax(0, 1fr)
[klyuchi] auto minmax(0, 1fr)
[stroki] auto minmax(0, 1fr)
[niz-stola kolonki] auto [konec];
}
.rsk-hero--arkan > .rsk-ar__razdely--tz > .rsk-ar__para--stroki {
grid-column: 1;
grid-template-columns: minmax(0, 1fr);
}
}
@media (min-width: 2200px) {
.rsk-hero--arkan > .rsk-ar__razdely--tz > [data-ar-tz="klyuchi"],
.rsk-hero--arkan > .rsk-ar__razdely--tz > .rsk-ar__para--stroki,
.rsk-hero--arkan .rsk-ar__niz .rsk-ar__razdel { margin-bottom: 34px; }
/* Карта аркана на 2200+. Упиралась в общий потолок 325 и на 2880
занимала 1001 px из колонки стола 1342 — между текстом и картой
стояла пустая полоса 300 px («от текста до карты полно места»,
#262). У владельца при 67 % 325 точек — 217 физических пикселей, а
на 2133 при 90 % — 293. 440 даёт на 2880 те же 293: карта одного
размера на обоих его экранах. Ниже 2880 её держит ширина колонки
(на 2200 — около 350). Первый экран 2880×1378: стол кончается около
1000, колода и кнопка видны. */
.rsk-hero--arkan .rsk-stol--odna { --k-max: 440px; }
}
/* 9. СТРАНИЦЫ АРКАНОВ (28.09.2026, для поиска): сетка всех 22 под
калькулятором (arkan.html, `.rsk-ar-vse`) и соседи на странице аркана
(arkan_karta.html, `.rsk-ar-sosedi`). Сама страница аркана своих
правил не имеет: у неё разметка результата калькулятора, и всё выше
(5в, 6, 8) действует на неё как на результат.
Своего вида нет и здесь. Карта — картинка колоды со скруглением и
тенью карты стола (`--k-r`, 30.3); номер — цифры золотом, как номер
шага (5б); имя — подпись прописными Manrope, как метка раздела.
Ряд — по центру: на 1920 одиннадцать карт, два ряда; на телефоне три
в ряд. Шаг сверху — как у блока зова. */
.rsk-ar-vse { margin: clamp(46px, 5vw, 84px) 0 0; }
.rsk-ar-vse__spisok {
--ar-vse-g: 14px;
display: flex; flex-wrap: wrap; justify-content: center;
gap: 28px var(--ar-vse-g);
margin: 0; padding: 0; list-style: none;
}
/* 120 — самое длинное имя одним словом, «Справедливость», в подписи
11 px (замер 117 px): уже клетка — слово вылезает. */
.rsk-ar-vse__spisok > li {
flex: 0 0 max(120px, calc((100% - 10 * var(--ar-vse-g)) / 11));
min-width: 0;
}
@media (max-width: 559px) {
.rsk-ar-vse__spisok { --ar-vse-g: 10px; gap: 22px var(--ar-vse-g); }
.rsk-ar-vse__spisok > li { flex-basis: calc((100% - 2 * var(--ar-vse-g)) / 3); }
}
.rsk-ar-vse__karta {
display: flex; flex-direction: column; align-items: center; gap: 2px;
text-align: center; text-decoration: none; color: var(--ink-70);
}
.rsk-ar-vse__art {
display: block; width: 100%; height: auto; aspect-ratio: 2 / 3;
margin-bottom: 10px;
border-radius: var(--k-r);
background: var(--rsk-panel);
box-shadow:
inset 0 0 0 1px rgba(201, 168, 106, .38),
0 12px 26px rgba(0, 0, 0, .5);
transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.rsk-ar-vse__nomer {
font-size: 18px; line-height: 1.3; color: var(--gold);
font-variant-numeric: lining-nums;
}
/* Подписи разрешено занять половину зазора с каждой стороны: у соседей
то же, и они не сходятся. Иначе на 320 «Справедливость» (96–100 px)
не входит в клетку 88 px. */
.rsk-ar-vse__imya {
margin-inline: calc(var(--ar-vse-g) / -2);
font: 11px/1.45 'Manrope', Arial, sans-serif;
letter-spacing: .1em; text-transform: uppercase;
}
@media (max-width: 559px) {
.rsk-ar-vse__imya { font-size: 10px; letter-spacing: .06em; }
}
@media (max-width: 374px) {
.rsk-ar-vse__imya { letter-spacing: .03em; }
}
@media (min-width: 2200px) {
.rsk-ar-vse__nomer { font-size: 22px; }
.rsk-ar-vse__imya { font-size: 13px; }
}
@media (hover: hover) {
.rsk-ar-vse__karta:hover { color: var(--gold-lit); }
.rsk-ar-vse__karta:hover .rsk-ar-vse__art { transform: translateY(-6px); }
}
.rsk-ar-vse__karta:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
.rsk-ar-vse__art { transition: none; }
}
/* Соседи на странице аркана: две ссылки по краям, на узком экране —
друг под другом. Вид — кнопка раздела; стрелка от имени — зазором
(у `.btn` inline-flex, пробел между ними он съедает). */
.rsk-ar-sosedi {
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
margin: clamp(40px, 4vw, 64px) 0 0;
}
.rsk-ar-sosedi > .btn { gap: 12px; }
@media (max-width: 559px) {
.rsk-ar-sosedi > .btn { flex: 1 1 100%; }
}
/* Страница аркана на телефоне: колода стоит над картой и съедает первый
экран — текст начинался со второго. Карта здесь уже открыта, тянуть
нечего: колоду убираем, место под неё (padding-top стола) тоже. На
широком экране колода сбоку и текст не двигает — остаётся. */
@media (max-width: 559px) {
.rsk-hero--ar-karta .rsk-stopka { display: none; }
.rsk-hero--ar-karta .rsk-stol { padding-top: 0; }
}
/* --- 80б. УГАДАЙ АРКАН ---------------------------------------------------- */
/* --- 1. ОБЛОЖКА ПЕРВОГО ЭКРАНА -----------------------------------------
Механика раздела 18/18б rasklady.css: `.rsk-hero::before` рисует
`--rsk-oblozhka`, страница выбирается по `data-rsk` (слаг ставит
main.py). Можно перенести в разделы 18 и 18б, к остальным обложкам.
Правило каталога
`.rsk-pole:not(:has(.rsk-stol))…` здесь больше не совпадает: на
странице есть стол. */
@media (min-width: 1024px) {
.rsk-pole[data-rsk="ugadaj"] {
--rsk-oblozhka: var(--rsk-shtora), url('../img/rasklady/oblozhki/ugadaj.webp');
}
}
@media (max-width: 1023px) {
.rsk-pole[data-rsk="ugadaj"] {
--rsk-oblozhka: var(--rsk-shtora-tel), url('../img/rasklady/oblozhki/ugadaj-telefon.webp');
}
}
/* --- 2. РАСКЛАДКА ------------------------------------------------------
Этапы ставит ugadaj.js в `data-ug-etap` на обложке: `start` — правила
и «Начать игру», `igra` — строка игры, карта, варианты; `konec` —
итог. Порядок в разметке: слова обложки → стол → игра → итог →
таблица лидеров. От 1280 стол сам встаёт в правую колонку (раздел 51,
`:has(.rsk-stol--odna)`); левой колонке — строки под заголовком: игра
или итог (как ответ «да/нет», `.rsk-hero--da-net > .rsk-dn-otvet`),
ниже таблица. */
@media (min-width: 1280px) {
.rsk-hero.rsk-ug > .rsk-ug__igra,
.rsk-hero.rsk-ug > .rsk-ug__konec { grid-column: 1; grid-row: 2; }
.rsk-hero.rsk-ug > .rsk-ug__lidery { grid-column: 1; grid-row: 3; }
/* Таблица в левой колонке — по её левому краю, как весь текст там. */
.rsk-hero.rsk-ug > .rsk-ug__lidery > .rsk-ug-lidery { margin-left: 0; }
}
.rsk-ug__start[hidden],
.rsk-ug__igra[hidden],
.rsk-ug__konec[hidden],
.rsk-ug__lidery[hidden] { display: none; }
/* Правила — список со знаком раздела: золотой ромб, как под картой
(`.rsk-poz::before`). Кегль — как у лида на телефоне. */
.rsk-ug__pravila {
display: grid; gap: 8px;
margin: 20px 0 0; padding: 0; max-width: 560px; list-style: none;
}
.rsk-ug__pravila > li {
position: relative; padding-left: 22px;
font-size: 17px; line-height: 1.55; color: var(--ink-70);
}
.rsk-ug__pravila > li::before {
content: ''; position: absolute; left: 3px; top: .68em;
width: 6px; height: 6px; background: var(--gold);
transform: rotate(45deg);
box-shadow: 0 0 10px rgba(224, 196, 140, .45);
}
/* Телефон: «Начать игру» — сразу под лидом, правила — под ней. Баннер
cookie (`#cookie`, base.html) при первом заходе стоит у нижнего края
окна и забирает ~150 px: на 375×667 его верх — 520, а кнопка после
правил была на 566–618, под баннером. Под лидом она на 292–344 и
видна над баннером от 360×640. В разметке порядок прежний (правила,
потом кнопка — читалка экрана читает правила первыми), меняется только
показ. */
@media (max-width: 559px) {
.rsk-ug__start { display: flex; flex-direction: column; }
.rsk-ug__start > .rsk-hero__deystvie { order: -1; margin-top: 20px; }
.rsk-ug__pravila { gap: 6px; margin-top: 24px; }
.rsk-ug__pravila > li { font-size: 16px; line-height: 1.5; }
}
/* Игра и итог: под картой (телефон и столбик до 1280) — по оси карты; в
левой колонке широкого экрана — по левому краю, как весь текст там.
Ровно так же стоит ответ «да/нет» (раздел 77). */
.rsk-ug__igra,
.rsk-ug__konec { margin: 22px 0 0; max-width: 560px; }
@media (max-width: 1279px) {
.rsk-ug__igra,
.rsk-ug__konec { margin-inline: auto; text-align: center; }
}
.rsk-ug__lidery > .rsk-ug-lidery { margin-top: 36px; }
@media (min-width: 1280px) {
.rsk-ug__lidery > .rsk-ug-lidery { margin-top: 8px; }
}
/* --- 2а. СТРОКА ИГРЫ: УРОВЕНЬ, ВРЕМЯ, ОЧКИ, ОШИБКИ ----------------------
Над столом, во всю его ширину: табло из четырёх ячеек, разделённых
золотыми волосками, — подпись прописными (Manrope, как `.rsk-nad`) и
под ней число (засечный, светлый, цифры одной ширины — время не
дрожит). Фон — та же полупрозрачная тень, что у полей «да/нет»,
гаснущая к краям. Слова — `hud_*` из СЛОВА_УГАДАЙ.
От 1280 место под строкой держится и до игры (`visibility`): стол в
правой колонке не прыгает вниз в миг старта. В столбик она до игры
не занимает места — там первый экран и так тесный. */
.rsk-ug__hud {
position: relative;
display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
margin: 0 0 12px; padding: 10px 0 11px;
border-block: 1px solid var(--rsk-line);
background: linear-gradient(90deg,
transparent, rgba(0, 0, 0, .32) 16%, rgba(0, 0, 0, .32) 84%, transparent);
}
.rsk-ug__hud::before {
content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
background: linear-gradient(90deg, transparent, var(--rsk-line-lit), transparent);
}
.rsk-ug__hud[hidden] { display: none; }
@media (min-width: 1280px) {
.rsk-ug__hud[hidden] { display: grid; visibility: hidden; }
}
.rsk-ug:not([data-ug-etap="start"]) .rsk-ug__hud {
animation: rsk-dn-otvet .9s cubic-bezier(.2, .7, .2, 1) both;
}
.rsk-ug__hud-p {
position: relative; min-width: 0;
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 0 6px; text-align: center;
}
.rsk-ug__hud-p + .rsk-ug__hud-p::before {
content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px;
background: linear-gradient(180deg, transparent, var(--rsk-line-lit), transparent);
}
.rsk-ug__hud-l {
font: 10px/1.4 'Manrope', Arial, sans-serif;
letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dim);
white-space: nowrap;
}
.rsk-ug__hud-z {
font-size: 26px; line-height: 1.15; font-weight: 300; color: var(--ink);
font-variant-numeric: lining-nums tabular-nums;
}
/* Имя уровня — засечным, как слова, а не как число. */
.rsk-ug__hud-imya { font-size: 16px; line-height: 1.25; color: var(--ink); }
.rsk-ug__hud-p--uroven.is-novyy .rsk-ug__hud-l,
.rsk-ug__hud-p--uroven.is-novyy .rsk-ug__hud-imya {
color: var(--gold-lit);
animation: rsk-dn-otvet .9s cubic-bezier(.2, .7, .2, 1) both;
}
/* Последние десять секунд — время золотом и дышит. */
.rsk-ug__hud-p--vremya.is-malo .rsk-ug__hud-z {
color: var(--gold-lit);
animation: rsk-ug-malo 1s ease-in-out infinite;
}
@keyframes rsk-ug-malo { 50% { opacity: .5; } }
/* Ошибки — знаки раздела (`ч.znak`), по одному на жизнь; ошибка гасит
знак: вспыхнул и потух. */
.rsk-ug__zhizni {
display: flex; align-items: center; justify-content: center; gap: 7px;
min-height: 30px;
}
.rsk-ug__zhizn {
width: 17px; height: 17px; color: var(--gold-lit);
transition: color .6s ease, opacity .6s ease;
}
.rsk-ug__zhizn.is-pogasla {
color: var(--ink-55); opacity: .3;
animation: rsk-ug-gasnet .8s cubic-bezier(.2, .7, .2, 1);
}
@keyframes rsk-ug-gasnet {
0% { transform: scale(1); opacity: 1; color: var(--gold-lit); }
30% { transform: scale(1.45); opacity: 1; color: var(--gold-lit); }
100% { transform: scale(1); opacity: .3; }
}
/* «+340» всплывает у очков — на месте подписи «Очки», над числом: подпись
на это время гаснет, число под ним бежит к новому значению. Над
строкой игры не вылезает и число не перекрывает. Штраф — тише, без
света. */
.rsk-ug__raz {
position: absolute; left: 0; right: 0; top: -3px;
font-size: 17px; line-height: 20px; text-align: center; color: var(--gold-lit);
font-variant-numeric: lining-nums; white-space: nowrap;
text-shadow: 0 0 14px rgba(224, 196, 140, .7);
opacity: 0; pointer-events: none;
}
.rsk-ug__raz.is-minus { color: var(--ink-70); text-shadow: none; }
.rsk-ug__raz.is-vidno { animation: rsk-ug-raz 1.4s cubic-bezier(.2, .7, .2, 1) both; }
.rsk-ug__hud-p--ochki:has(> .rsk-ug__raz.is-vidno) > .rsk-ug__hud-l {
animation: rsk-ug-podpis-gasnet 1.4s ease both;
}
@keyframes rsk-ug-raz {
0% { opacity: 0; transform: translateY(8px) scale(.8); }
16% { opacity: 1; transform: translateY(-1px) scale(1.18); }
32% { opacity: 1; transform: translateY(0) scale(1); }
78% { opacity: 1; transform: translateY(-2px); }
100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes rsk-ug-podpis-gasnet {
0%, 100% { opacity: 1; }
10%, 80% { opacity: 0; }
}
/* Телефон: ячейка уровня шире (самое длинное имя — «Малая часть
картины» — ложится в две строки и на 375), и место под две строки
имени держится всегда: строка игры не меняет высоту от уровня к
уровню, карта и варианты под ней не прыгают. */
@media (max-width: 559px) {
.rsk-ug__hud {
grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
padding: 8px 0 9px; margin-bottom: 4px;
}
.rsk-ug__hud-p { padding: 0 3px; }
.rsk-ug__hud-imya { min-height: 2.5em; }
.rsk-ug__hud-l { letter-spacing: .14em; }
.rsk-ug__hud-z { font-size: 24px; }
.rsk-ug__zhizni { gap: 5px; min-height: 28px; }
.rsk-ug__zhizn { width: 15px; height: 15px; }
}
/* Широкий экран: табло над большой картой — крупнее, чтобы время
читалось краем глаза от вариантов в левой колонке. */
@media (min-width: 1280px) {
.rsk-ug__hud { padding: 12px 0 13px; margin-bottom: 16px; }
.rsk-ug__hud-l { font-size: 11px; }
.rsk-ug__hud-z { font-size: 32px; }
.rsk-ug__hud-imya { font-size: 18px; line-height: 1.5; }
.rsk-ug__zhizni { min-height: 37px; gap: 9px; }
.rsk-ug__zhizn { width: 19px; height: 19px; }
.rsk-ug__raz { font-size: 19px; }
}
@media (min-width: 2200px) {
.rsk-ug__hud-l { font-size: 13px; }
.rsk-ug__hud-z { font-size: 40px; }
.rsk-ug__hud-imya { font-size: 22px; }
.rsk-ug__zhizni { min-height: 46px; }
.rsk-ug__zhizn { width: 23px; height: 23px; }
.rsk-ug__raz { font-size: 23px; line-height: 24px; }
}
/* --- 2б. ОТСЧЁТ 3-2-1 И «ВРЕМЯ ПОШЛО» ------------------------------------
Поверх стола, по его середине: крупная золотая цифра приходит из
глубины и тает, каждая — один шаг `--t-ug-otschet` (его же ждёт
скрипт). «Время пошло» — засечным, меж двух золотых волосков, как
черта раздела (`.rsk-cherta`); уходит, когда карта начинает
переворот. Слой только над столом — не во весь экран. */
.rsk-ug .rsk-stol--odna { --t-ug-otschet: 800ms; }
.rsk-ug__vest {
position: absolute; inset: 0; z-index: 6;
display: grid; place-items: center;
pointer-events: none;
}
.rsk-ug__vest[hidden] { display: none; }
.rsk-ug__cifra {
font-weight: 300; font-size: clamp(120px, 34vw, 200px); line-height: 1;
color: var(--gold-lit); font-variant-numeric: lining-nums;
text-shadow: 0 0 60px rgba(224, 196, 140, .5), 0 4px 30px rgba(0, 0, 0, .75);
animation: rsk-ug-cifra var(--t-ug-otschet) cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes rsk-ug-cifra {
0% { opacity: 0; transform: scale(1.5); }
22% { opacity: 1; transform: scale(1); }
72% { opacity: 1; transform: scale(.96); }
100% { opacity: 0; transform: scale(.8); }
}
/* Полоса во всю ширину стола — тем же приёмом, что строка игры: тень,
гаснущая к краям, и золотые волоски сверху и снизу. На пёстрой
рубашке без неё слова не читаются. */
.rsk-ug__poshlo {
display: flex; align-items: center; justify-content: center; gap: 16px;
width: 100%; padding: 16px 12px;
border-block: 1px solid transparent;
border-image: linear-gradient(90deg, transparent, var(--rsk-line-lit), transparent) 1;
background: linear-gradient(90deg,
transparent, rgba(8, 11, 8, .86) 16%, rgba(8, 11, 8, .86) 84%, transparent);
font-weight: 300; font-size: clamp(30px, 8vw, 46px); line-height: 1.1;
color: var(--gold-lit); white-space: nowrap;
text-shadow: 0 0 40px rgba(224, 196, 140, .45);
animation: rsk-dn-otvet .7s cubic-bezier(.2, .7, .2, 1) both;
}
.rsk-ug__poshlo::before,
.rsk-ug__poshlo::after {
content: ''; width: 44px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-lit));
}
.rsk-ug__poshlo::after { background: linear-gradient(90deg, var(--gold-lit), transparent); }
.rsk-ug__vest.is-uhodit { animation: rsk-ug-uhod .45s ease both; }
@keyframes rsk-ug-uhod { to { opacity: 0; transform: scale(1.06); } }
/* --- 3. КАРТА: ВОПРОС, ОКОШКО И РАСКРЫТИЕ ------------------------------
Карта всегда во весь размер и на своём месте (Указка, пик #290,
владелец: «карта не должна сужаться а должна давать подсказку… не
серединку карты»). В лице `.rsk-karta__lico` (overflow: hidden, та же
рамка 2:3, что у картинки): картинка вопроса — номер и плашка на ней
красиво затёрты; поверх — полная карта, её адрес приходит только в
ответе на ответ; поверх всего на уровнях 3–4 — покров с окошком.
Пока лицо закрыто, переходы выключены прямо на узлах (скрипт), и новое
окошко встаёт сразу. */
/* ПОКРОВ С ОКОШКОМ (уровни 3–4, `ug-okno` на карте). Покров — то же
пустое лицо карты, что у раздела без картинки: его фон наследуется от
`.rsk-karta__lico` (плита, виньетка, свет, раздел 15), своего вида
нет; сверху — редкая золотая пыль. Окошко — прямоугольник над
«главным» карты (пик #292): `okno` × ширина карты по горизонтали и
`okno_h` × высота по вертикали, центр (cx, cy) — всё от сервера.
Вырезано маской — картинкой SVG размером с лицо: залито всё, кроме
окошка. Собирает её скрипт по кадру (`маскаОкна`, ugadaj.js) и кладёт
в `--ug-okno-maska`. Край окошка мягкий (fix2, 26.09.2026, проверяющие:
«край выреза жёсткий прямоугольный»): углы скруглены на
`--ug-okno-ugol` меньшей стороны окошка, край растушёван на
`--ug-okno-kray` её же — 12 %, верх просьбы «8–12 % стороны окна». Эти два числа
живут здесь, скрипт читает их отсюда.
Раскрытие: маска растёт в `--ug-okno-rost` (семь) раз вокруг центра
окошка — окошко мягким краем расходится за край карты, — и покров
тает; 0,6 с, вместе с затиркой. Маленькому окошку у края карты семи
раз мало — скрипт кладёт в `--ug-okno-rost-nado`, сколько ему нужно,
и берётся большее. Центр держится на месте сам: `mask-position` — центр окошка
в процентах лица (`--ug-ocx/--ug-ocy`), а процент ставит ту же точку
картинки на ту же точку лица при любом её размере. */
.rsk-ug .rsk-ug__pokrov {
--ug-okno-ugol: .16;
--ug-okno-kray: .12;
--ug-okno-rost: 7;
display: none;
position: absolute; inset: 0; z-index: 0;
border-radius: inherit;
background: inherit;
-webkit-mask-image: var(--ug-okno-maska, none);
mask-image: var(--ug-okno-maska, none);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: var(--ug-ocx, 50%) var(--ug-ocy, 50%);
mask-position: var(--ug-ocx, 50%) var(--ug-ocy, 50%);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
transition:
-webkit-mask-size .6s cubic-bezier(.35, .1, .25, 1),
mask-size .6s cubic-bezier(.35, .1, .25, 1),
opacity .6s ease;
}
/* Золотая пыль по покрову — отдельным слоем: к унаследованному фону
слой не допишешь. Четыре редких слоя с разным шагом (простые числа)
и разной крупностью — сетки глаз не находит. По краю — тот же золотой
волосок и внутренняя тень, что у края карты (раздел 30.3): покров
читается лицом карты, а не заплаткой. Маска покрова режет и его. */
.rsk-ug .rsk-ug__pokrov::before {
content: ''; position: absolute; inset: 0;
border-radius: inherit;
background:
radial-gradient(circle at 30% 40%, rgba(255, 241, 208, .6) 0 .8px, transparent 1.6px) 0 0 / 71px 53px,
radial-gradient(circle at 70% 20%, rgba(224, 196, 140, .5) 0 .6px, transparent 1.3px) 7px 13px / 31px 43px,
radial-gradient(circle at 45% 75%, rgba(224, 196, 140, .2) 0 .5px, transparent 1.1px) 19px 5px / 29px 41px,
radial-gradient(circle at 15% 55%, rgba(224, 196, 140, .36) 0 .6px, transparent 1.2px) 3px 29px / 47px 59px;
box-shadow:
inset 0 0 0 1px rgba(201, 168, 106, .38),
inset 0 0 26px rgba(0, 0, 0, .42);
}
.rsk-ug .rsk-karta.ug-okno .rsk-ug__pokrov { display: block; }
.rsk-ug .rsk-karta.ug-bez-pokrova .rsk-ug__pokrov {
-webkit-mask-size: calc(max(var(--ug-okno-rost), var(--ug-okno-rost-nado, 0)) * 100%)
calc(max(var(--ug-okno-rost), var(--ug-okno-rost-nado, 0)) * 100%);
mask-size: calc(max(var(--ug-okno-rost), var(--ug-okno-rost-nado, 0)) * 100%)
calc(max(var(--ug-okno-rost), var(--ug-okno-rost-nado, 0)) * 100%);
opacity: 0;
}
/* ЗАТИРКА «СТИРАЕТСЯ». Полная карта проявляется маской: полоса из
прозрачного в сплошное растёт от середины карты к краям, по пути
открывая сначала картину, потом номер сверху и плашку снизу — ровно
там, где на вопросе затёрто. Края полосы растушёваны (по 20 % её
высоты), поэтому граница не режет, а «смывает». 0,6 с — из
спецификации. Лицо до ответа полную не показывает вовсе (0 % высоты
маски и прозрачность). */
.rsk-ug .rsk-ug__polnaya {
opacity: 0;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-size: 100% 0%;
mask-size: 100% 0%;
transition:
-webkit-mask-size .6s cubic-bezier(.35, .1, .25, 1),
mask-size .6s cubic-bezier(.35, .1, .25, 1);
}
.rsk-ug .rsk-karta.ug-raskryta .rsk-ug__polnaya {
opacity: 1;
-webkit-mask-size: 100% 260%;
mask-size: 100% 260%;
}
/* Повтор ореола и блика по лицу. Имя анимации у них не меняется, и
браузер сам её не перезапустит: скрипт на один пересчёт стилей
ставит этот класс — анимации нет, — и снимает. Вида не добавляет. */
.rsk-ug .rsk-karta.ug-sbros-oreol::after,
.rsk-ug .rsk-karta.ug-sbros-blik .rsk-karta__lico::after { animation: none; }
/* СМЕНА КАРТЫ ВО ВРЕМЯ ИГРЫ — ТОТ ЖЕ ПЕРЕВОРОТ, ТОЛЬКО БЫСТРЫЙ.
Сервер считает следующую карту показанной через `pauza_ms` (1,2 с)
после ответа: за это время ответ надо показать и карту сменить.
Переворот раздела (1,05 с в каждую сторону) туда не входит, поэтому на
время игры стол получает `ug-bystro` — и переворот, тень подъёма,
ребро, блик лица и пыльца идут по `--t-ug-smena`. Кривые и подъём —
те же. Скрипт открывает новое лицо ровно к «показано» сервера: смена
начинается за 1,5 × `--t-ug-smena` до него. Первая карта партии
открывается обычным, медленным переворотом.
`--t-ug-zhdem-polnuyu` — сколько снятие кадра ждёт полную карту: не
пришла — кадр снимается без неё, маска пойдёт, когда придёт. */
.rsk-ug .rsk-stol--odna { --t-ug-smena: 380ms; --t-ug-zhdem-polnuyu: 260ms; }
.rsk-ug .rsk-stol--odna.ug-bystro { --t-perevorot: var(--t-ug-smena); }
.rsk-ug .rsk-stol--odna.ug-bystro .rsk-karta.otkryta .rsk-karta__in,
.rsk-ug .rsk-stol--odna.ug-bystro .rsk-karta.otkryta::before {
animation-duration: var(--t-perevorot);
}
.rsk-ug .rsk-stol--odna.ug-bystro .rsk-karta--art.otkryta .rsk-karta__lico::after {
animation-delay: calc(var(--t-perevorot) * .5);
}
/* Телефон: строка игры, карта и варианты — в одном экране. На телефоне
(до 559 px) колода меньше и сбоку, как у карты дня: это разделы 64–65
rasklady.css, их селекторы обобщены на `.rsk-ug .rsk-stol--odna`.
Ширину карты там задаёт `--k-w`; здесь к ней только потолок по высоте
окна — на низком экране (375×667 и ниже) карта уступает место
вариантам. Столбец без карты: строка игры 64 + поля стола 34 + строка
над вариантами 54 + варианты 126 + воздух — 300 px; `vh` — запас для
браузеров без `svh`. На 390×844 и 375×667 потолок не срабатывает —
карту ограничивает ширина. */
@media (max-width: 559px) {
.rsk-ug .rsk-stol--odna {
--k-w: min(180px, calc((100cqi - 24px) / 2), calc((100vh - 300px) / 1.5));
--k-w: min(180px, calc((100cqi - 24px) / 2), calc((100svh - 300px) / 1.5));
}
}
/* Экран владельца — 2880 в масштабе 67 %. Потолок карты одной карты
(325) там даёт 218 точек на его мониторе — меньше, чем видит человек
на 1920 (296). Для тренажёра это главное: узнать картину по её
трети. Поднимаю потолок так, чтобы на 2880 карта смотрелась как на
1920: 296 × 1,5 ≈ 440. По высоте — не выше окна за вычетом шапки,
строки уровня и полей (420 px). Остальное считает формула стола. */
@media (min-width: 2200px) {
.rsk-ug .rsk-stol--odna {
--k-max: min(440px, calc((100vh - 420px) / 1.5));
--k-max: min(440px, calc((100svh - 420px) / 1.5));
}
}
/* Подсмотреть ответ долгим нажатием нельзя: на телефоне долгое нажатие на
картинку открывает меню «открыть изображение» — а там карта целиком, с
плашкой названия. Меню у картинок карты убрано: нажатия их не ловят,
выделить и утащить их нельзя (contextmenu и dragstart глушит ugadaj.js). */
.rsk-ug [data-ug-karta] {
-webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.rsk-ug [data-ug-img],
.rsk-ug [data-ug-polnaya] { pointer-events: none; -webkit-user-drag: none; }
/* --- 4. СТРОКА НАД ВАРИАНТАМИ И ВАРИАНТЫ ---------------------------------
Одна строка на всё: пока человек думает — вопрос; после ответа —
«верно» золотом или «это другая карта:» и название; на новом уровне —
его имя (держится до следующего ответа), на последнем — фраза
владельца, крупнее и с бегущим по ней светом. Место под две строки
держится всегда: варианты под ней не прыгают. */
.rsk-ug__vopros {
display: flex; align-items: center;
min-height: 3em;
margin: 0 0 10px; font-size: 18px; line-height: 1.5; color: var(--ink);
}
@media (max-width: 1279px) {
.rsk-ug__vopros { justify-content: center; }
}
.rsk-ug__vopros .rsk-ug__imya { color: var(--ink); white-space: nowrap; }
.rsk-ug__vopros.is-novoe { animation: rsk-dn-otvet .5s cubic-bezier(.2, .7, .2, 1) both; }
.rsk-ug__vopros.is-verno { color: var(--gold-lit); }
.rsk-ug__vopros.is-neverno { color: var(--ink-70); }
.rsk-ug__vopros.is-uroven { color: var(--gold-lit); font-style: italic; }
/* Беда во время игры — спокойно, золотым волоском слева, как строка
отказа (раздел 68). */
.rsk-ug__vopros.is-beda { font-size: 16px; color: var(--ink); }
.rsk-ug__vopros.is-beda > span {
padding: 2px 0 2px 14px; border-left: 1px solid var(--rsk-line-lit); text-align: left;
}
.rsk-ug__vopros.is-posledniy {
font-style: italic; font-size: 20px; line-height: 1.35;
background: linear-gradient(100deg,
var(--gold) 0%, var(--gold-lit) 40%, #fff6df 50%, var(--gold-lit) 60%, var(--gold) 100%);
background-size: 250% 100%;
-webkit-background-clip: text; background-clip: text;
color: transparent;
animation:
rsk-dn-otvet .7s cubic-bezier(.2, .7, .2, 1) both,
rsk-ug-svet 2.4s ease-in-out .3s 2 both;
}
@keyframes rsk-ug-svet {
from { background-position: 100% 0; }
to { background-position: 0 0; }
}
/* Последний уровень — ореол вокруг карты проходит дважды (скрипт ставит
`ug-posledniy` на обложку вместе с искрами над столом). */
.rsk-ug.ug-posledniy .rsk-stol--odna .rsk-karta.otkryta::after {
animation: rsk-oreol 1.5s ease-out 2;
}
/* Колонки строго поровну (`minmax(0, 1fr)`): при `1fr` длинное слово
раздвигало свою колонку, и на 360–390 ряд вылезал за край игры. */
.rsk-ug__varianty {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
min-height: calc(58px * 2 + 10px);
}
/* Пока лицо карты закрыто, варианты держат место, но не видны. Лицо
открылось — проявляются по очереди движением ответа «да/нет», но
быстро: время уже идёт, и все четыре должны читаться сразу (за
0,6 с, а не за 1,4, как строки трактовки). `backwards`, а не `both`:
после проявления кнопка снова слушается своих правил (погасшая после
ответа). */
.rsk-ug__varianty:not(.is-vidny) { visibility: hidden; }
.rsk-ug__varianty.is-vidny > .rsk-ug__variant {
animation: rsk-dn-otvet .45s cubic-bezier(.2, .7, .2, 1) backwards;
animation-delay: calc(var(--i, 0) * .05s);
}
/* На телефоне наведение «залипает» после нажатия: следующий вариант на
том же месте стоял бы с золотой рамкой, будто уже выбран. */
@media (hover: none) {
.rsk-ug .rsk-ug__variant:hover:not(.is-vybran):not(.is-verno):not(.is-neverno) {
border-color: rgba(244, 239, 231, .35); color: var(--ink);
}
}
/* Варианты — обычные кнопки сайта (`.btn--ghost`): кегль тот же, что у
`.btn`, 14 px (fix2, 26.09.2026; было 13), только уже по бокам и с
разрядкой меньше, чем у `.btn` (.18em): «ЧЕТВЁРКА ПЕНТАКЛЕЙ» ложится в
две строки, а самое длинное слово колоды — «СПРАВЕДЛИВОСТЬ» — в строку
кнопки, не вылезая за рамку. */
.rsk-ug .rsk-ug__variant {
min-height: 58px; padding: 8px 12px;
font-size: 14px; letter-spacing: .12em; line-height: 1.35;
}
/* Телефон: кнопка в пол-экрана. Замер fix2 (Playwright, все 78 названий в
кнопке игры): при 14 px и .12em «СПРАВЕДЛИВОСТЬ» — 154 px, а места в
кнопке на 375 — 140, на 390 — 147. С разрядкой .06em и полями по 6 px
слово — 143 при месте 151 (375) и 158 (390); на 360 — 143 в 143. Две
строки — предел у всех названий на 360, 375, 390 и 414. */
@media (max-width: 419px) {
.rsk-ug .rsk-ug__variant { padding: 8px 6px; letter-spacing: .06em; }
}
.rsk-ug .rsk-ug__variant:disabled { cursor: default; opacity: .55; }
/* Нажатый, пока сервер отвечает, — золотая рамка, как на наведении. */
.rsk-ug .rsk-ug__variant.is-vybran { opacity: 1; border-color: var(--gold); color: var(--gold-lit); }
/* Верный — золотая кнопка сайта со вспышкой света. Выбранный неверный —
сдержанно: своя рамка, не гаснет вместе с остальными, и только. */
.rsk-ug .rsk-ug__variant.is-verno {
opacity: 1; color: #141b15; background: var(--gold); border-color: var(--gold);
box-shadow: 0 0 0 1px var(--gold-lit), 0 0 26px rgba(224, 196, 140, .45);
animation: rsk-ug-verno .7s cubic-bezier(.2, .7, .2, 1);
}
@keyframes rsk-ug-verno {
0% { transform: scale(1); }
35% { transform: scale(1.04); }
100% { transform: scale(1); }
}
.rsk-ug .rsk-ug__variant.is-neverno {
opacity: 1; color: var(--ink-70); border-color: rgba(244, 239, 231, .5);
}
/* --- 5. БЕДА, ИТОГ ПАРТИИ И КНОПКИ ---------------------------------------
Строка беды — там, куда человек смотрит: под кнопкой старта, под
вариантами, в итоге; тем же золотым волоском слева, что строка отказа
(раздел 68). Итог — как ответ «да/нет»: крупно почему кончилась
(`.rsk-dn-otvet__slovo`, чуть меньше: «Три ошибки — игра окончена»
длиннее «Да»), очки ещё крупнее — они бегут от нуля; дальше строка
итога, место за неделю, «Играть ещё» и приглашение на обучение —
спокойной рамкой, как темы «да/нет». Всё проявляется по очереди,
шагом строк трактовки (.16 с). */
.rsk-ug .rsk-beda {
margin: 14px 0 0; padding: 2px 0 2px 14px;
border-left: 1px solid var(--rsk-line-lit);
font-size: 16px; line-height: 1.5; color: var(--ink); text-align: left;
}
.rsk-ug .rsk-beda[hidden] { display: none; }
.rsk-ug .rsk-hero__deystvie > .rsk-beda { margin: 0; }
.rsk-ug__konec > * { animation: rsk-dn-otvet .9s cubic-bezier(.2, .7, .2, 1) both; }
.rsk-ug__konec > :nth-child(2) { animation-delay: .16s; }
.rsk-ug__konec > :nth-child(3) { animation-delay: .32s; }
.rsk-ug__konec > :nth-child(4) { animation-delay: .48s; }
.rsk-ug__konec > :nth-child(5) { animation-delay: .56s; }
.rsk-ug__konec > :nth-child(6) { animation-delay: .72s; }
.rsk-ug__konec > :nth-child(7) { animation-delay: .88s; }
.rsk-ug__konec-slovo {
margin: 0;
font-weight: 300; font-size: clamp(34px, 8.6vw, 60px); line-height: 1.08;
letter-spacing: -.015em; color: var(--gold-lit);
}
.rsk-ug__konec-itog {
margin: 18px 0 0;
font-size: 19px; line-height: 1.45; color: var(--ink-70);
font-variant-numeric: lining-nums;
}
.rsk-ug__konec-chislo {
display: block; margin: 0 0 4px;
font-weight: 300; font-size: clamp(64px, 18vw, 104px); line-height: 1;
letter-spacing: -.02em; color: var(--ink);
font-variant-numeric: lining-nums tabular-nums;
text-shadow: 0 0 44px rgba(224, 196, 140, .28);
}
.rsk-ug__konec-mesto {
margin: 12px 0 0; font-size: 18px; line-height: 1.5; color: var(--ink-70);
}
.rsk-ug__konec-mesto[hidden] { display: none; }
.rsk-ug__konec-mesto > .rsk-ug__nik { color: var(--gold-lit); }
.rsk-ug__obuchenie { margin: 22px 0 0; }
.rsk-ug__obuchenie > a {
display: block; padding: 14px 18px;
border: 1px solid var(--rsk-line); border-radius: 10px;
background: rgba(0, 0, 0, .22);
font-size: 17px; line-height: 1.5; color: var(--ink-70);
text-decoration: none;
transition: border-color .25s ease, color .25s ease;
}
.rsk-ug__obuchenie > a:hover,
.rsk-ug__obuchenie > a:focus-visible { border-color: var(--gold); color: var(--gold-lit); }
/* Имя в таблице — после строки места (владелец, 26.09.2026: «чтобы люди
писали сами имя»). Своего вида нет: блок — `.rsk-dn` (подпись над
полем, ширина 560), поле — `.rsk-dn__vopros`, как поле даты у аркана
(80а, п. 2), подсказка — `.rsk-dn__preduprezhdenie`, отказ — строка
беды игры, кнопка — `.btn--ghost`, как варианты: золотая в итоге одна,
«Играть ещё». В столбик (до 1280) итог стоит по оси карты, но поле с
подписью — от левого края, как поля раздела. */
.rsk-ug__imya { margin: 24px auto 0; text-align: left; }
.rsk-ug__imya-deystvie { margin-top: 14px; }
.rsk-ug__imya-gotovo {
margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-70);
}
.rsk-ug__imya-gotovo[hidden] { display: none; }
.rsk-ug__imya-gotovo > .rsk-ug__nik { color: var(--gold-lit); overflow-wrap: anywhere; }
@media (min-width: 1280px) {
.rsk-ug__imya { margin-left: 0; }
}
/* Ряд кнопок — во всю ширину игры, вровень с вариантами. */
.rsk-ug__deystviya { margin-top: 22px; max-width: none; }
.rsk-ug__deystviya[hidden] { display: none; }
@media (max-width: 1279px) {
.rsk-ug__deystviya { margin-inline: auto; justify-content: center; }
}
/* От 2200 раздел растит кегли ступенью (начало rasklady.css: лид 21,
`.btn` 15 и 60 в высоту; подписи над полем — 13). Игра растёт с
ним, иначе в левой колонке рядом с заголовком 72 px она мелкая. */
@media (min-width: 2200px) {
.rsk-ug__igra,
.rsk-ug__konec,
.rsk-ug__pravila { max-width: 640px; }
.rsk-ug__pravila > li { font-size: 20px; }
.rsk-ug__vopros { font-size: 21px; }
.rsk-ug__vopros.is-posledniy { font-size: 24px; }
.rsk-ug .rsk-ug__variant { min-height: 64px; font-size: 15px; }
.rsk-ug__varianty { min-height: calc(64px * 2 + 10px); }
.rsk-ug__konec-itog,
.rsk-ug__konec-mesto,
.rsk-ug__imya-gotovo,
.rsk-ug__obuchenie > a,
.rsk-ug .rsk-beda { font-size: 21px; }
}
/* --- 5а. ТЕЛЕФОН БОКОМ --------------------------------------------------
fix2, 26.09.2026, проверяющие: «поворот телефона посреди партии
(390×844 → 844×390) — HUD и варианты уходят за край». В столбик на
экране высотой 390 строка игры, карта и варианты не помещаются никак
(замер 844×390 до правки: от верха строки игры до низа вариантов
557 px). Поэтому, пока идёт партия, на низком широком экране игра встаёт
в две колонки: слева строка игры и стол, справа строка вопроса и
варианты — карта и варианты рядом. Подстройку экрана после поворота
делает ugadaj.js (`вписатьПослеПоворота`).
Вид — телефонный, своего нет: строка игры и стол — те же правила, что
раздел 2а и разделы 64–65 rasklady.css дают телефону до 559 px (карта
по ширине половина колонки, колода 0,74 от карты у правого края, низ
колоды вровень с низом карты). Числа 64–65 повторены здесь, потому что
их правила стоят под `max-width: 559px`, а телефон боком шире.
Карта ограничена ещё и высотой окна: столбец слева — строка игры ~76 +
поля стола 34 + карта + поля экрана по 12 — 150 px без карты (`vh` —
запас для браузеров без `svh`). Варианты — столбиком во всю правую
колонку: в пол-колонки «СПРАВЕДЛИВОСТЬ» на 667 не помещается, а
столбиком все названия — в одну строку; высота кнопки — как у `.btn`,
52 px, чтобы четыре встали и на экран высотой 320.
Итог (`konec`) и первый экран — прежним столбиком: итог длинный, ему
нужна вся ширина, и `итогВЭкран` ставит его верх к верху экрана. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1279px) {
.rsk-hero.rsk-ug[data-ug-etap="igra"] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 24px;
align-items: center;
}
.rsk-hero.rsk-ug[data-ug-etap="igra"] > .rsk-hero__in { grid-column: 1 / -1; grid-row: 1; }
.rsk-hero.rsk-ug[data-ug-etap="igra"] > .rsk-hero__stol { grid-column: 1; grid-row: 2; }
.rsk-hero.rsk-ug[data-ug-etap="igra"] > .rsk-ug__igra {
grid-column: 2; grid-row: 2;
margin: 26px 0 0; max-width: none;
}
/* Строка игры — телефонная (раздел 2а, до 559 px). */
.rsk-ug[data-ug-etap="igra"] .rsk-ug__hud {
grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
padding: 8px 0 9px; margin-bottom: 4px;
}
.rsk-ug[data-ug-etap="igra"] .rsk-ug__hud-p { padding: 0 3px; }
.rsk-ug[data-ug-etap="igra"] .rsk-ug__hud-imya { min-height: 2.5em; }
.rsk-ug[data-ug-etap="igra"] .rsk-ug__hud-l { letter-spacing: .14em; }
.rsk-ug[data-ug-etap="igra"] .rsk-ug__hud-z { font-size: 24px; }
.rsk-ug[data-ug-etap="igra"] .rsk-ug__zhizni { gap: 5px; min-height: 28px; }
.rsk-ug[data-ug-etap="igra"] .rsk-ug__zhizn { width: 15px; height: 15px; }
/* Стол — телефонный (разделы 64–65): карта слева, колода 0,74 справа. */
.rsk-ug[data-ug-etap="igra"] .rsk-stol--odna {
--k-w: min(180px, calc((100cqi - 24px) / 2), calc((100vh - 150px) / 1.5));
--k-w: min(180px, calc((100cqi - 24px) / 2), calc((100svh - 150px) / 1.5));
--k-koloda: calc(var(--k-w) * .74);
min-height: 0;
padding: 18px 0 16px;
justify-content: flex-start;
gap: 0;
}
.rsk-ug[data-ug-etap="igra"] .rsk-stol--odna .rsk-poz {
width: var(--k-w); min-width: 0; padding: 0; margin: 0;
gap: 12px;
}
.rsk-ug[data-ug-etap="igra"] .rsk-stol--odna .rsk-stopka {
--k-w: var(--k-koloda);
width: var(--k-w);
height: calc(var(--k-w) * 1.5);
}
.rsk-ug[data-ug-etap="igra"] .rsk-stol--odna .rsk-stopka:not(.rsk-stopka--sredina) {
left: calc(100% - var(--k-w) * .54);
top: calc(var(--k-w) * 1.284 + 18px);
}
/* Строка вопроса и варианты — столбиком во всю колонку. */
.rsk-ug[data-ug-etap="igra"] .rsk-ug__vopros { margin-bottom: 8px; }
.rsk-ug[data-ug-etap="igra"] .rsk-ug__varianty {
grid-template-columns: minmax(0, 1fr); gap: 8px;
min-height: calc(52px * 4 + 8px * 3);
}
.rsk-ug[data-ug-etap="igra"] .rsk-ug__variant { min-height: 52px; }
}
/* --- 6. ДВИЖЕНИЕ ВЫКЛЮЧЕНО ----------------------------------------------
Без полётов и переворотов, только смена: скрипт ставит классы сразу,
переворот и пыльцу гасит rasklady.css. Здесь — своё: раскрытие
(маска полной карты и покров уходят сразу), отсчёт без приближения,
проявления. */
@media (prefers-reduced-motion: reduce) {
.rsk-ug .rsk-ug__polnaya,
.rsk-ug .rsk-ug__pokrov { transition: none; }
.rsk-ug__varianty.is-vidny > .rsk-ug__variant,
.rsk-ug__vopros.is-novoe,
.rsk-ug__vopros.is-posledniy,
.rsk-ug:not([data-ug-etap="start"]) .rsk-ug__hud,
.rsk-ug__hud-p--uroven.is-novyy .rsk-ug__hud-l,
.rsk-ug__hud-p--uroven.is-novyy .rsk-ug__hud-imya,
.rsk-ug__hud-p--vremya.is-malo .rsk-ug__hud-z,
.rsk-ug__zhizn.is-pogasla,
.rsk-ug__raz.is-vidno,
.rsk-ug__cifra,
.rsk-ug__poshlo,
.rsk-ug__vest.is-uhodit,
.rsk-ug .rsk-ug__variant.is-verno,
.rsk-ug__konec > *,
.rsk-ug.ug-posledniy .rsk-stol--odna .rsk-karta.otkryta::after { animation: none; }
.rsk-ug__raz.is-vidno { opacity: 1; transform: none; }
.rsk-ug__hud-p--ochki:has(> .rsk-ug__raz.is-vidno) > .rsk-ug__hud-l { animation: none; opacity: 0; }
.rsk-ug__vopros.is-posledniy { color: var(--gold-lit); background: none; }
}
/* --- 80в. ТАБЛИЦА ЛИДЕРОВ ---------------------------------------------
/rasklady/ugadaj, игра на время (26.09.2026). Разметка —
templates/rasklady/_ugadaj_lidery.html (её включает в ugadaj.html
другой агент, здесь только свой раздел стилей), список наполняет
static/js/ugadaj_lidery.js одним `GET /rasklady/ugadaj/lidery`.
Панель — тот же токен, что у карточек каталога (`.rsk-kart`, раздел
выше): `--rsk-line` / `--rsk-panel`, радиус 14px. Ширина ограничена,
как у игры (`.rsk-ug__igra`, `.rsk-ug__deystviya`): список из ника и
чисел не должен растягиваться на всю широкую колонку.
Столбца «верных» нет: подписи для него в СЛОВА_УГАДАЙ не заведено, а
свою не придумываем (CLAUDE.md, правило 1). `hud_ochki` / `hud_vremya`
— те же слова, что в шапке игры, здесь подписывают столбцы шапки
таблицы; сама шапка декоративна (`aria-hidden`), место и ник подписи
не просят. */
.rsk-ug-lidery {
max-width: 640px; margin: 32px auto 0;
padding: 22px 20px 20px;
border: 1px solid var(--rsk-line); border-radius: 14px;
background: var(--rsk-panel);
}
@media (max-width: 1279px) {
.rsk-ug-lidery { margin-inline: auto; }
}
.rsk-ug-lidery__zag { margin: 0 0 16px; }
/* Вкладки «за неделю» / «за всё время» — те же цвета, что у выбранного
варианта игры: нажатая вкладка золотая, как верный ответ. */
.rsk-ug-lidery__vkladki { display: flex; gap: 8px; margin: 0 0 16px; }
.rsk-ug-lidery__vkladka {
flex: 1 1 auto; min-width: 0;
padding: 9px 10px;
border: 1px solid var(--rsk-line); border-radius: 999px;
background: none; color: var(--ink-70);
font: 12px/1.3 'Manrope', Arial, sans-serif;
letter-spacing: .08em; text-transform: uppercase;
cursor: pointer;
transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.rsk-ug-lidery__vkladka:hover { border-color: var(--gold); color: var(--gold-lit); }
.rsk-ug-lidery__vkladka[aria-pressed="true"] {
border-color: var(--gold); background: var(--gold); color: #141b15;
}
/* Место · ник (+ метка «это вы») · очки · время — одна сетка на шапку и
на каждую строку, числа выровнены по правому краю. */
.rsk-ug-lidery__shapka,
.rsk-ug-lidery__ryad {
display: grid; grid-template-columns: 28px minmax(0, 1fr) 52px 56px;
align-items: center; gap: 8px 10px;
}
.rsk-ug-lidery__shapka { padding: 0 4px; margin: 0 0 4px; }
.rsk-ug-lidery__shapka span {
font: 10px/1.4 'Manrope', Arial, sans-serif;
letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55);
text-align: right;
}
.rsk-ug-lidery__shapka-ochki { grid-column: 3; }
.rsk-ug-lidery__shapka-vremya { grid-column: 4; }
.rsk-ug-lidery__spisok { margin: 0; padding: 0; list-style: none; }
.rsk-ug-lidery__ryad { padding: 10px 4px; border-top: 1px solid var(--rsk-line); }
.rsk-ug-lidery__ryad:first-child { border-top: 0; }
.rsk-ug-lidery__ryad.is-vy { background: var(--rsk-panel-lit); border-radius: 8px; }
.rsk-ug-lidery__mesto {
font-size: 16px; color: var(--ink-70); font-variant-numeric: lining-nums;
}
.rsk-ug-lidery__mesto.is-zoloto { color: var(--gold-lit); }
.rsk-ug-lidery__nik {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
min-width: 0; font-size: 16px; color: var(--ink); overflow-wrap: anywhere;
}
.rsk-ug-lidery__vy {
font: 10px/1.3 'Manrope', Arial, sans-serif;
letter-spacing: .1em; text-transform: uppercase; color: var(--gold-lit);
}
.rsk-ug-lidery__ochki,
.rsk-ug-lidery__vremya {
font-size: 16px; text-align: right; font-variant-numeric: lining-nums tabular-nums;
}
.rsk-ug-lidery__ochki { color: var(--ink); }
.rsk-ug-lidery__vremya { color: var(--ink-70); }
.rsk-ug-lidery__pusto { margin: 8px 4px 0; font-size: 16px; color: var(--ink-55); }
.rsk-ug-lidery__pusto[hidden] { display: none; }
@media (max-width: 419px) {
.rsk-ug-lidery { padding: 18px 14px 16px; }
.rsk-ug-lidery__shapka,
.rsk-ug-lidery__ryad { grid-template-columns: 22px minmax(0, 1fr) 44px 48px; gap: 6px 8px; }
}
/* От 2200 — та же ступень кеглей, что у игры (раздел 80б, п. 5). */
@media (min-width: 2200px) {
.rsk-ug-lidery { max-width: 720px; }
.rsk-ug-lidery__mesto,
.rsk-ug-lidery__nik,
.rsk-ug-lidery__ochki,
.rsk-ug-lidery__vremya { font-size: 18px; }
}
/* ======================================================================
81. ОБЛОЖКИ ВИТРИНЫ: ПРЕДМЕТ НЕ ПРИЖАТ К КРАЮ (26.09.2026, мерка Ж)
======================================================================
ПРАВИЛА СНЯТЫ 27.09.2026 ВМЕСТЕ С ЗАМЕНОЙ ОБЛОЖЕК.
Здесь стояли свои background-position по X для пяти карточек
витрины (karta-dnya 84 %; na-otnosheniya, vopros, na-budushchee,
na-cheloveka — 100 %). Старые обложки 1920×640 (3:1) нарисованы с
предметом у правого края, и cover с 50% 50% из site.css оставлял
левую треть карточки чёрной (мерка владельца, правило Ж). У трёх
карточек даже 100 % давало центр 57–60 % — точнее средствами CSS
было не сделать, нужна была новая картинка.
Теперь у всех семи карточек витрины (da-net, karta-dnya,
na-otnosheniya, vopros-koloda, na-budushchee, na-cheloveka-chasy,
na-situaciyu) свои обложки <имя>-2.webp 1040×585: они 16:9, как сама
.tariff__pic (aspect-ratio: 16/9 на любой ширине), и предмет в них
нарисован по центру кадра. cover их не режет, общего 50% 50% из
site.css хватает, а своя позиция по X только увела бы предмет от
центра. Замер на отрисованной карточке —
Claude outputs\arkan-ugadaj-2026-09-26\oblozhki-2\.
Старые <имя>.webp не удалены (правило 9.5). */
/* ======================================================================
ВХОД ЧЕРЕЗ ЯНДЕКС, VK, GOOGLE (Указка #305, 27.09.2026)
======================================================================
Ряд кнопок провайдеров: под кнопками Telegram/MAX в шаге входа на
странице вопросов (`.rsk-lichnoe__knopki--kanaly`) и под «Войти» в
кабинете невошедшего. Кнопки — обычные `.btn btn--gold`, как соседние;
рисует их скрипт из `oauth` ответа /rasklady/ya. На телефоне —
столбиком во всю ширину блока, с 1024 — в ряд. В мини-приложении
ряда нет вовсе: там вход по подписи мессенджера. */
.rsk-oauth {
display: flex; flex-direction: column; gap: 10px;
flex: 1 1 100%; width: 100%;
}
.rsk-oauth[hidden],
html.rsk-app .rsk-oauth { display: none; }
/* Правило ряда ботов на телефоне (`--kanaly .btn`: по половине) сюда не
доходит: в столбике каждая кнопка — во всю ширину. */
.rsk-lichnoe__knopki--kanaly .rsk-oauth .btn,
.rsk-oauth .btn { flex: 0 0 auto; width: 100%; }
/* Подпись «Войти через» над кнопками (27.09.2026, владелец: «войти через
и выбирать»). Класс и кегль — соседних подписей блока (`.rsk-ogovorka`
на странице вопросов, `.rsk-kab-tekst` в кабинете); здесь только
отбивка и целая строка над кнопками в ряду с 1024. Ширина — `width`,
а не `flex-basis: 100%`: в столбике (до 1024) основа считается от
высоты, и подпись на 390 растягивалась на 189 px. */
.rsk-oauth > .rsk-oauth__nad { flex: 0 0 auto; width: 100%; margin: 0; max-width: none; }
.rsk-kab-oauth { margin-top: 12px; }
.rsk-kab-oauth-beda { margin: 12px 0 0; max-width: none; }
.rsk-kab-oauth-beda[hidden] { display: none; }
@media (min-width: 1024px) {
.rsk-oauth { flex-direction: row; flex-wrap: wrap; }
.rsk-lichnoe__knopki--kanaly .rsk-oauth .btn,
.rsk-oauth .btn { width: auto; }
.rsk-kab-oauth { justify-content: center; }
}
/* ======================================================================
КАБИНЕТ — СПОСОБЫ ВХОДА (27.09.2026, app/rasklady_vhody.py)
======================================================================
Блок `[data-vhody]` в templates/rasklady/kabinet.html: через что человек
входит (плашки) и кнопки недостающих способов на плите. Вид — как у
соседних блоков кабинета (раздел «КАБИНЕТ В ПРИЛОЖЕНИИ — ПЕРЕВЁРСТКА»):
заголовок .rsk-kab-h2, плита .rsk-kab-plita, кнопки .rsk-kab-knopka в
ряд .rsk-kab-kanal__knopki, итог .rsk-kab-itog. Плашка способа входа —
того же вида, что плашка подарка (.rsk-kab-podarok), со своим классом:
правка подарков её не задевает. Правило 0: шрифты раздела, текст не
мельче 16 px, кнопки 14 — как у соседей; цвета — прежние переменные. */
.rsk-kab-vhody[hidden],
.rsk-kab-vhody__itog[hidden],
.rsk-kab-vhody__dobavit[hidden],
.rsk-kab-vhody__bot[hidden] { display: none; }
.rsk-kab-vhody__spisok {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 0; padding: 0; list-style: none;
}
.rsk-kab-vhody__sposob {
display: inline-flex; align-items: center; gap: 10px;
min-height: 44px; padding: 8px 16px;
border: 1px solid var(--rsk-line-lit); border-radius: 999px;
background: rgba(201, 168, 106, .06);
font-size: 17px; line-height: 1.3; color: var(--ink);
}
/* Ромбик слева — тот же знак, что точки шкалы лояльности. */
.rsk-kab-vhody__sposob::before {
content: ''; flex: 0 0 auto;
width: 7px; height: 7px;
transform: rotate(45deg);
background: var(--gold);
}
.rsk-kab-vhody__itog { margin: 16px 0 0; }
.rsk-kab-vhody__dobavit { margin-top: 16px; padding: 16px; }
.rsk-kab-vhody__h { margin: 0 0 12px; }
.rsk-kab-vhody__bot {
margin-top: 16px; padding-top: 14px;
border-top: 1px solid var(--rsk-line);
}
.rsk-kab-vhody__bot .rsk-kab-tekst { margin-bottom: 12px; }
.rsk-kab-vhody__bot .btn { width: 100%; }
/* ======================================================================
82. «ДА/НЕТ»: ПРИГЛАШЕНИЕ ПОСЛЕ ВЕРНУВШЕГОСЯ ОТВЕТА (27.09.2026)
======================================================================
Волна тестов b45efa1, п. 3 и мелочь 7 (побочный эффект пика #304).
Строка «на сегодня расклад уже был…» с «Подробнее» стояла НАД ответом,
и две «Подробнее» с разным смыслом оказывались одна над другой.
Теперь у кнопки строка отказа бывает только до расклада (пришёл, а
бесплатных ноль). Пока тянет карту и читает свежий ответ — её нет
вовсе. Вернулся к сегодняшнему ответу (F5, новый заход) — та же строка
и ссылка в кабинет встают ПОСЛЕ ответа своим блоком `[data-dn-dalshe]`
(da_net.html; показывает rasklady.js, `показатьСчётДН`). Слова — из
rasklady_teksty (`СЛОВА_ДА_НЕТ["otkaz"]`, `СЛОВА_КАБИНЕТА["priglasit"]`),
своих здесь нет.
Вид — только прежний язык раздела (правило 0): засечный, кегль как у
строк под ответом, волосок раздела сверху отделяет блок от ответа и
его разбора, кнопка — обычная `.btn--ghost`. Встаёт тем же
проявлением, что и сам ответ (`rsk-dn-otvet`, раздел 77). Под картой
(до 1280) — по оси карты, как ответ; в левой колонке широкого экрана —
по левому краю. */
.rsk-dn-dalshe {
margin: 26px 0 0; padding: 22px 0 0; max-width: 560px;
border-top: 1px solid var(--rsk-line);
animation: rsk-dn-otvet .9s cubic-bezier(.2, .7, .2, 1) both;
}
.rsk-dn-dalshe[hidden] { display: none; }
.rsk-dn-dalshe__stroka {
margin: 0;
font-size: 17px; line-height: 1.5; color: var(--ink);
}
.rsk-dn-dalshe > .btn { margin-top: 16px; }
@media (max-width: 1279px) {
.rsk-dn-dalshe { margin-inline: auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
.rsk-dn-dalshe { animation: none; }
}
/* Широкий экран: строки обложки объявлены явно (раздел 77 — ответ во
2-й, разбор в 3-й, оговорка в 4-й). Блок встаёт между разбором и
оговоркой, пятая строка появляется только вместе с ним: пустая строка
добавила бы лишний row-gap под ответом у всех остальных.
Последняя строка — 1fr: стол справа растянут на все строки и выше
левой колонки, и его лишняя высота при одних auto делилась поровну —
пустая строка разбора (пока он не раскрыт) вырастала на 1920 до 102 px,
и блок отъезжал от ответа на 126. Строка с 1fr забирает эту высоту
себе, под оговорку. */
@media (min-width: 1280px) {
.rsk-hero.rsk-hero--da-net:has(> .rsk-hero__stol):has(> .rsk-dn-dalshe:not([hidden])) {
grid-template-rows: auto auto auto auto 1fr;
}
/* Отбивку от ответа здесь уже даёт row-gap сетки (раздел 57). */
.rsk-hero.rsk-hero--da-net:has(> .rsk-hero__stol) > .rsk-dn-dalshe {
grid-column: 1; grid-row: 4;
margin-top: 0;
}
.rsk-hero.rsk-hero--da-net:has(> .rsk-hero__stol):has(> .rsk-dn-dalshe:not([hidden])) > .rsk-ogovorka--pod {
grid-row: 5;
}
}
/* ======================================================================
КАБИНЕТ: ВХОД НА МЕСТЕ; ШАПКА РАЗДЕЛА НА ТЕЛЕФОНЕ (27.09.2026, fix32)
======================================================================
Волна тестов b45efa1 (Claude outputs/volna-b45efa1-2026-09-27/OTCHET.md).
1. Вход в кабинете безымянного (п. 6 отчёта, мерка Г1 — тупик):
«Войти» больше не уводит на /rasklady/vopros — код и кнопки
Telegram / MAX открываются в той же карточке, под «Войти»
(templates/rasklady/kabinet.html, static/js/rasklady_kabinet.js).
Вид — как у соседних кнопок кабинета: .rsk-kab-knopka в ряд
.rsk-kab-kanal__knopki, строка — .rsk-kab-tekst.
2. «Выйти» в кабинете вошедшего — внизу, над «Удалить мои данные»:
на телефоне «Выйти» в шапке спрятан (п. 3 ниже), выход живёт здесь.
3. Шапка на телефоне (п. 9 отчёта, мерка А8). На /rasklady/vopros и
тематических страницах рядом с «Работой с Альбиной» и знаком
кабинета вставал «Войти» (гость) или «Выйти» (вошёл), и «Работа с
Альбиной» ломалась в две строки: 107 px на 360 и 137 px на 390
против 158 px на остальных страницах. Четыре пункта в строку
помещаются только с 413 px; на 360 не хватает 51 px, на 390 — 21, и
поджатием отступов это не лечится без мелкого кегля.
Решено по образцу остальных страниц раздела на телефоне: в шапке
бренд, «Работа с Альбиной» и знак кабинета — и больше ничего, как на
«да/нет», карте дня, витрине. Вход и выход на телефоне — в кабинете,
куда ведёт знак: вход там открывается на месте (п. 1), выход —
кнопкой (п. 2). Шапка не меняется после ответа сервера — ничего не
прыгает. С 560 px — как было: «Войти» / «Выйти» в шапке. */
/* ---------- 1. Вход в кабинете ---------- */
.rsk-kab-bot { margin-top: 4px; }
.rsk-kab-bot .rsk-kab-tekst { margin-bottom: 12px; }
.rsk-kab-bot__knopki { justify-content: center; }
/* Как между кнопками ботов: зазор ряда 8 + отступ кнопки карточки 4. */
.rsk-kab-bot .rsk-kab-bot__otmena { margin-top: 12px; }
@media (max-width: 1023px) {
/* На телефоне кнопки ботов — во всю ширину карточки, как кнопки
провайдеров под ними (.rsk-oauth .btn). */
.rsk-kab-bot .rsk-kab-knopka { width: 100%; }
}
/* ---------- 2. Выйти ---------- */
.rsk-kab-vyyti { margin-top: -12px; text-align: center; }
/* ---------- 3. Шапка на телефоне ---------- */
@media (max-width: 559px) {
.rsk-top__nav [data-vp-voyti],
.rsk-top__nav [data-vp-vyyti] { display: none !important; }
}
/* ======================================================================
83. КАМЕРА ЗА ПЕЧАТЬЮ: ЯКОРЬ ПРОКРУТКИ НЕ ПОД РАЗБОРОМ
(fix30, Указка, контейнер 4, пик #306, 27.09.2026)
======================================================================
Пока печатается разбор на странице вопросов, rasklady_vopros.js
держит на html класс `rsk-pechat-idet` (камера печати, `вестиПечать`).
ЗАЧЕМ. Браузер сам держит «якорь прокрутки» (scroll anchoring):
берёт первый целиком видный блок и, когда выше него что-то растёт,
сдвигает страницу так, чтобы блок остался на месте. Кадр вставал к
началу разбора, пока в нём не было ни строки, — и якорем становился
блок «Заказать расклад / Обучение таро» ПОД разбором. Каждая новая
строка толкала его вниз, браузер крутил страницу следом, и текст
уползал за верхний край окна: 1920–2880, −85…−131 px, при том что ни
один скрипт страницу не крутил (замер fix30, подмена scrollTo).
Что под разбором, якорем на время печати не бывает. Над разбором —
стол, карты, уже напечатанные абзацы — якорь остаётся: добор,
добавленный на стол, пока человек читает, не сдвигает ему текст.
Печать кончилась — класс снят, всё как было. */
html.rsk-pechat-idet main.rsk > .rsk-trakt[data-trakt] ~ *,
html.rsk-pechat-idet main.rsk ~ * { overflow-anchor: none; }
/* ======================================================================
84. ПРОКРУТКА В ПРИЛОЖЕНИИ НЕ ЗАВОДИТ ПОД ПОЛОСУ (27.09.2026)
======================================================================
В Telegram и MAX у страниц раздела сверху липкая полоса «‹ Расклады»
(раздел «КАБИНЕТ В ПРИЛОЖЕНИИ — ПЕРЕВЁРСТКА», `.rsk-app-polosa`).
Камера раздела её теперь учитывает сама (rasklady.js, `кадрВерх`), но
часть ходов идёт не через камеру, а через `scrollIntoView` — строка
«не видно — подвести» (`если_не_видно`) и подвод к столу
(`подвестиКСтолу`). Они ставят верх блока на `scroll-padding-top` от
края окна, а у html в приложении он оставался сайтовым, 16 px
(site.css): замер на 360–430, блок «Что говорит расклад» после
«Подробнее» в «да/нет» вставал верхом на 40 при полосе 0..56.
Отступ — там, где полоса прилипает (безопасная зона: то же выражение,
что у её `top`), плюс её высота (`--rsk-app-polosa-h`, объявлена у
полосы), плюс тот же зазор, что у сайта от края окна, 16 px, — теперь
от низа полосы. Только когда полоса липнет, то есть у неё есть
«назад»: на витрине раздела она не липнет, и отступ прежний. На
сайте класса `rsk-app` нет — там не меняется ничего. */
html.rsk-app:has(.rsk-app-polosa .rsk-app-nazad) {
scroll-padding-top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px) + var(--rsk-app-polosa-h) + 16px);
}
/* ОБРЕЗОК ПОД ПОЛОСОЙ (28.09.2026, волна перед выкаткой). В «да/нет»
после «Подробнее» разбор подводится `если_не_видно` — `scrollIntoView`
к верху `.rsk-trakt`. К отступу выше (низ полосы + 16) браузер
прибавлял собственный `scroll-margin-top` разбора, 24 px (раздел
«трактовка», запас от края окна на сайте), — и между низом полосы (56)
и верхом разбора (96) оставалось 40 px страницы. Разбор отбит от
ответа своим `margin-top` в 30 px, а 40 больше 30: в щель выглядывал
низ крупного слова ответа, «Нет» на 18..66 — золотой обрезок в 10 px
под полосой. Сама полоса непрозрачна (0..56), обрезок — под её краем.
Главное после «Подробнее» — заголовок разбора, поэтому слово уходит
под полосу целиком: в приложении запас разбора — сам отступ под
полосой, своих 24 px сверху нет. Щель над разбором — 16 px, меньше его
`margin-top`: в неё попадает только пустое поле над разбором, что бы
ни стояло выше. Камера ставит разбор так же — на КАДР_ОТСТУП (12) под
полосой (rasklady.js, `кадрКВерху`). На сайте не меняется ничего. */
html.rsk-app:has(.rsk-app-polosa .rsk-app-nazad) .rsk-trakt {
scroll-margin-top: 0;
}
/* ======================================================================
ВХОД ПО ПОЧТЕ И ПАРОЛЮ (fix47, 28.09.2026, app/rasklady_vhod_pochta.py)
======================================================================
Форма «Войти по почте» (с «Зарегистрироваться» и «Забыли пароль?»):
в шаге входа на странице вопросов — рядом с кнопками ботов и
провайдеров (`.rsk-lichnoe__knopki--kanaly`), в карточке входа
кабинета — под ними, и в «Способах входа» — «Почта». Плюс панель
кабинета, открытого по ссылке из письма. Рисует всё
static/js/rasklady_vhod_pochta.js; место — `.rsk-pvh-mesto`.
Вид — только прежний язык раздела (правило 0): засечный шрифт сайта,
текст и подписи не мельче 16 px (поле — 17, как у поля почты под
разбором), кнопка — обычная `.btn btn--gold` (как соседние «Telegram»,
«Яндекс»), строка ответа — `.rsk-beda`. Переходы «Забыли пароль?» и
«Зарегистрироваться» — ссылками золотом, как ссылки раздела. Цвета —
прежние переменные. В мини-приложении формы нет (вход там по подписи
мессенджера) — как и ряда провайдеров. */
.rsk-pvh-mesto { flex: 1 1 100%; width: 100%; }
.rsk-pvh-mesto[hidden],
html.rsk-app .rsk-pvh-mesto { display: none; }
.rsk-pvh [hidden] { display: none !important; }
.rsk-pvh {
display: flex; flex-direction: column; gap: 12px;
width: 100%; max-width: 460px; margin: 0;
text-align: left;
}
/* Шаг входа на странице вопросов: форма — своей строкой под рядом
провайдеров, отбита волоском, как отбиты друг от друга блоки шага. */
.rsk-lichnoe__knopki--kanaly > .rsk-pvh-mesto {
margin-top: 6px; padding-top: 16px;
border-top: 1px solid var(--rsk-line);
}
/* Карточка входа в кабинете центрирует текст; форма — блоком по центру,
а внутри по левому краю: подписи полей читаются слева. */
.rsk-kab-karta--tsentr .rsk-pvh-mesto {
margin-top: 20px; padding-top: 18px;
border-top: 1px solid var(--rsk-line);
}
.rsk-kab-karta--tsentr .rsk-pvh { margin-inline: auto; }
.rsk-kab-vhody__dobavit .rsk-pvh-mesto { margin-top: 16px; }
.rsk-pvh__nad {
margin: 0;
font-size: 17px; line-height: 1.5; color: var(--ink);
}
.rsk-pvh__ryad { display: flex; flex-direction: column; gap: 6px; }
.rsk-pvh__metka {
font-size: 16px; line-height: 1.4; color: var(--ink-70);
}
.rsk-pvh__pole {
width: 100%; min-width: 0; min-height: 48px;
padding: 12px 16px;
border: 1px solid var(--rsk-line); border-radius: 10px;
background: rgba(0, 0, 0, .25);
color: var(--ink);
font-family: inherit; font-size: 17px; line-height: 1.4;
}
.rsk-pvh__pole:focus { outline: none; border-color: var(--rsk-line-lit); }
.rsk-pvh__pole:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rsk-pvh__podskazka {
margin: 0;
font-size: 16px; line-height: 1.45; color: var(--ink-55);
}
.rsk-pvh__soglasie { display: flex; flex-direction: column; gap: 4px; }
.rsk-pvh__galka {
display: flex; gap: 10px; align-items: flex-start;
font-size: 16px; line-height: 1.5; color: var(--ink-70);
cursor: pointer;
}
.rsk-pvh__galka input {
flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0;
accent-color: var(--gold);
}
.rsk-pvh__soglasie-ssylka {
align-self: flex-start; margin-left: 30px;
font-size: 16px; line-height: 1.5; color: var(--gold);
}
/* Кнопка во всю ширину формы на телефоне; правило ряда ботов
(`--kanaly button.btn`: flex 100 %) сюда не доходит — форма столбиком. */
.rsk-lichnoe__knopki--kanaly .rsk-pvh .btn,
.rsk-pvh .btn { flex: 0 0 auto; width: 100%; }
.rsk-pvh__stroka { margin: 0; max-width: none; }
.rsk-pvh__stroka--ok { color: var(--ink); }
.rsk-pvh__ssylki { display: flex; flex-wrap: wrap; gap: 0 22px; }
.rsk-pvh__ssylka {
min-height: 44px; padding: 0;
border: 0; background: none;
font-family: inherit; font-size: 16px; line-height: 1.4;
color: var(--gold);
text-decoration: underline; text-underline-offset: 3px;
cursor: pointer;
}
.rsk-pvh__ssylka:hover { color: var(--gold-lit); }
.rsk-pvh__tekst { margin: 0 0 14px; }
/* Панель ссылки из письма — над кабинетом, как карточка входа. */
[data-pochta-ssylka][hidden] { display: none; }
.rsk-pvh--ssylka { margin-inline: auto; }
@media (min-width: 1024px) {
.rsk-lichnoe__knopki--kanaly .rsk-pvh .btn,
.rsk-pvh .btn { width: auto; align-self: flex-start; }
.rsk-kab-karta--tsentr .rsk-pvh .btn { align-self: center; }
}
/* ======================================================================
85. ПЕРЕХОД К ПЛАТНОМУ «СВОЕМУ ВОПРОСУ» ПОД БЕСПЛАТНЫМ РЕЗУЛЬТАТОМ
(fix60, 29.09.2026)
======================================================================
Макрос `k_platnomu` (templates/rasklady/_chasti.html): у карты дня —
в конце трактовки, у «да/нет» — после оговорки, у аркана — последним
в разделах результата. Имя и строка карточки «Свой вопрос» с витрины,
плитки ступеней с ценами (`.rsk-vybor`, те же, что на витрине) и
золотая кнопка. Слов своих нет — они в rasklady_teksty.К_ПЛАТНОМУ.
Вид — только прежний язык раздела (правило 0): засечный шрифт сайта,
текст не мельче 16 px, волосок раздела сверху, золото кнопки. Имя —
размером имени карточки витрины (`.tariff__name`, 21 px), но прямым:
курсив на страницах раздела грузится только ради витрины (site.css,
«КУРСИВ НА СТРАНИЦАХ РАСКЛАДОВ»), и ради одной строки его не качаем.
Строка — цветом и межстрочным `.tariff__short`, 17 px. Встаёт тем же
проявлением, что ответ «да/нет» и приглашение под ним (раздел 82):
один раз, без мигания; без движения — сразу.
На широком экране у «да/нет» блок своего места в сетке не просит
(сетка — раздел 77): пока разбор скрыт, встаёт в его пустую строку под
ответом, открыли «Подробнее» — следующей строкой под оговоркой; всё в
левой колонке. Замер 1920 и 2880 — Claude outputs/fix60-2026-09-29. */
.rsk-k-platnomu {
margin: 30px 0 0; padding: 24px 0 0; max-width: 620px;
border-top: 1px solid var(--rsk-line);
animation: rsk-dn-otvet .9s cubic-bezier(.2, .7, .2, 1) both;
}
.rsk-k-platnomu[hidden] { display: none; }
/* `> p.…` — не украшение: у карты дня блок лежит в трактовке, и её
`.rsk-trakt p` / `.rsk-trakt p:first-of-type` (кегль, межстрочный,
цвет разбора) иначе перебивали бы имя и строку карточки. */
.rsk-k-platnomu > p.rsk-k-platnomu__imya {
margin: 0;
font-size: 21px; line-height: 1.3; color: var(--ink);
}
.rsk-k-platnomu > p.rsk-k-platnomu__kratko {
margin: 8px 0 0;
font-size: 17px; line-height: 1.55; color: rgba(244, 239, 231, .7);
}
.rsk-k-platnomu .rsk-vybor { margin-top: 18px; }
.rsk-k-platnomu__knopka { margin-top: 20px; text-align: center; }
/* Телефон: кнопка во всю ширину блока, как кнопки форм раздела. Надпись
с разрядкой — 274 px; при прежних полях 32 + 32 она не влезала в 335
(390) и рвалась на две строки по левому краю. Поля 20 — одна строка от
375; уже — две строки по центру. */
@media (max-width: 559px) {
.rsk-k-platnomu__knopka { width: 100%; padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.rsk-k-platnomu { animation: none; }
}
/* Аркан на ПК: разделы под столом идут колонками (`.rsk-ar__niz`, блок
80, п. 8) — переход встаёт под всеми колонками целиком, а не куском в
последней. */
@media (min-width: 1024px) {
.rsk-hero--arkan .rsk-ar__niz > .rsk-k-platnomu {
column-span: all;
break-inside: avoid;
}
}
/* ======================================================================
86. ПЕРЕХОД КО ВТОРОМУ БЕСПЛАТНОМУ ПОД БЕСПЛАТНЫМ РЕЗУЛЬТАТОМ
(fix76, 29.09.2026)
======================================================================
Макрос `k_besplatnomu` (templates/rasklady/_chasti.html): плитка «да/нет»
или карты дня — та же, что на витрине (`.tariff`, классы site.css), с
именем, строкой и меткой «бесплатно» оттуда же. Нового оформления нет:
раздел лишь ставит плитки в один столбец шириной блока «Свой вопрос»
(раздел 85) и стоит над ним. Показ — как у него (`data-posle`).
Название прямое: курсив на страницах раздела грузится ради витрины, а
не ради одной строки (site.css, «КУРСИВ НА СТРАНИЦАХ РАСКЛАДОВ»). */
.rsk-dalshe.rsk-tarify {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
margin: 30px 0 0; max-width: 620px; margin-inline: 0;
animation: rsk-dn-otvet .9s cubic-bezier(.2, .7, .2, 1) both;
}
.rsk-dalshe[hidden] { display: none; }
.rsk-dalshe .tariff__name { font-style: normal; }
.rsk-dalshe + .rsk-k-platnomu { margin-top: 24px; }
@media (prefers-reduced-motion: reduce) {
.rsk-dalshe.rsk-tarify { animation: none; }
}
@media (min-width: 1024px) {
.rsk-hero--arkan .rsk-ar__niz > .rsk-dalshe {
column-span: all;
break-inside: avoid;
}
}
/* ======================================================================
87. ЗНАЧЕНИЕ КАРТ ТАРО (fix85, 30.09.2026)
======================================================================
Справочник /rasklady/znachenie-kart и страница карты
/rasklady/znachenie-kart/ (templates/rasklady/znachenie_kart.html,
znachenie_karta.html). Оформление — прежнее: Source Serif 4 для текста,
Manrope только для подписей прописными (`.rsk-trakt__l`), кегль текста
не ниже 16 px, карта не обрезается. Стол с открытой картой — разметка и
стили страницы аркана (раздел 80 и соседние); здесь только статья под
столом, плитки справочника и отступы. Цвета и размеры — из переменных
раздела. */
/* Страница карты: статья в одну колонку, строка как у трактовки (раздел
31 держит её через `.rsk-trakt__tekst`). */
.rsk-zk {
display: flex; flex-direction: column; gap: clamp(26px, 3vw, 40px);
max-width: 720px; margin-inline: auto; margin-top: clamp(28px, 3vw, 48px);
text-align: left;
}
.rsk-zk__klyuchi {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 8px;
}
.rsk-zk__klyuchi > li {
padding: 7px 16px; border: 1px solid var(--gold-dim); border-radius: 999px;
font-family: "Manrope", sans-serif; font-size: 13px; letter-spacing: .04em;
color: var(--gold);
}
.rsk-zk__razdel .rsk-trakt__l { margin-bottom: 14px; }
.rsk-zk .rsk-trakt__tekst p {
margin: 0 0 14px; font-size: 18px; line-height: 1.6;
}
.rsk-zk .rsk-trakt__tekst p:last-child { margin-bottom: 0; }
.rsk-zk .rsk-zk__podpis { font-style: italic; opacity: .85; }
.rsk-zk__qa { margin: 0 0 18px; }
.rsk-zk__qa:last-child { margin-bottom: 0; }
.rsk-zk .rsk-zk__q { margin: 0 0 4px; font-weight: 600; color: var(--gold); }
.rsk-zk .rsk-zk__a { margin: 0; }
.rsk-zk__arkan { margin: 0; }
.rsk-zk .rsk-dalshe.rsk-tarify,
.rsk-zk .rsk-k-platnomu { max-width: none; }
@media (min-width: 1024px) {
.rsk-zk .rsk-trakt__tekst p { font-size: 20px; }
}
/* Справочник: плитки карт, по масти своя полоса. */
.rsk-zk-spisok {
display: flex; flex-direction: column; gap: clamp(36px, 4vw, 60px);
max-width: 1200px; margin: clamp(24px, 3vw, 40px) auto 0;
}
.rsk-zk-spisok__gruppa .rsk-trakt__l { margin-bottom: 18px; }
.rsk-zk-spisok__karty {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 18px 14px;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.rsk-zk-plitka {
display: flex; flex-direction: column; gap: 10px;
color: inherit; text-decoration: none;
}
.rsk-zk-plitka img {
display: block; width: 100%; height: auto; aspect-ratio: 2 / 3;
border-radius: 6px; transition: transform .35s ease, box-shadow .35s ease;
}
.rsk-zk-plitka__imya { font-size: 16px; line-height: 1.3; }
.rsk-zk-plitka:hover img, .rsk-zk-plitka:focus-visible img {
transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
@media (prefers-reduced-motion: reduce) {
.rsk-zk-plitka img { transition: none; }
.rsk-zk-plitka:hover img, .rsk-zk-plitka:focus-visible img { transform: none; }
}
@media (min-width: 1024px) {
.rsk-zk-spisok__karty { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 26px 20px; }
}
/* Страница карты на широком экране: стол с картой стоит в правой половине
обложки (раздел 57), а текст длиннее экрана — карта остаётся на виду,
пока читают. Липкость только здесь: у других страниц стол короткий. */
@media (min-width: 1600px) {
.rsk-hero--zk:has(> .rsk-hero__stol) > .rsk-hero__stol {
position: sticky; top: 84px;
}
}
/* Оформление словаря (fix85): эмблемы групп и мастей, виньетка между
блоками, ссылки назад. Картинки — static/img/rasklady/znachenie/.
Без прокрутных эффектов: только hover у плиток (выше). */
.rsk-zk__emblema { display: block; width: 56px; height: 56px; opacity: .9; }
.rsk-zk__vinetka {
display: block; width: 100%; max-width: 420px; height: auto;
margin: 0 auto; opacity: .7;
}
.rsk-zk-spisok__zag { display: flex; align-items: center; gap: 14px; }
.rsk-zk-spisok__zag img { width: 44px; height: 44px; flex: none; }
.rsk-zk-nazad {
display: flex; flex-wrap: wrap; gap: 10px 26px;
margin: clamp(28px, 3vw, 44px) 0 0; font-size: 16px;
}
.rsk-zk-nazad a { color: var(--gold); }
.rsk-zk__razdel .rsk-trakt__l, .rsk-zk .rsk-trakt__tekst { overflow-wrap: anywhere; }
.rsk-hero--zk .rsk-h1 { overflow-wrap: anywhere; hyphens: auto; }
/* Справочник: обложка `.rsk-hero` на широком экране — сетка в две колонки
(раздел 57), а здесь под заголовком идёт один широкий список плиток. */
.rsk-hero--zk-spisok { display: block; }
.rsk-hero--zk-spisok .rsk-zk-spisok { width: 100%; }
.rsk-hero--zk-spisok .rsk-zk-spisok { max-width: none; margin-inline: 0; }
/* Обложка справочника — во всю ширину колонки, без обрезки (правило 0). */
.rsk-zk-oblozhka { display: block; width: 100%; height: auto; margin: 0 auto clamp(18px, 2vw, 32px); max-width: 1000px; }
/* Маркер у ключевых слов карты. */
.rsk-zk__klyuchi > li { display: inline-flex; align-items: center; gap: 8px; }
.rsk-zk__klyuchi > li::before {
content: ""; width: 14px; height: 14px; flex: none;
background: url('../img/rasklady/znachenie/zvezda-malaya-a.webp') center / contain no-repeat;
}
/* Тихая фактура под вопросами-ответами. */
.rsk-zk__qa {
background: url('../img/rasklady/znachenie/fon-faktura.webp') center / 512px repeat;
padding: 12px 14px; border-radius: 6px;
}
/* fix88 (30.09.2026): украшения — прозрачные `-a.webp` (золото без
подложки, из оригиналов luma-key). Маска и подложки вокруг виньетки и
эмблем сняты: линия ложится прямо на фон страницы. */
/* ======================================================================
88. УГАДАЙ ЗНАЧЕНИЕ (fix86, 30.09.2026)
======================================================================
Тренажёр /rasklady/ugadaj-znachenie (templates/rasklady/
ugadaj_znachenie.html, static/js/ugadaj_znachenie.js). Оформление
прежнее: Source Serif 4 для текста, Manrope только для подписей
прописными, кегль текста не ниже 16 px, обложка во всю ширину без
обрезки. Таблица лидеров и правила берут готовые классы игры про аркан
(`rsk-ug-lidery__*`, `rsk-ug__pravila`, `rsk-ug__imya-gotovo`) — второй
вид не заводим. Никаких эффектов появления на прокрутке: всё на месте
сразу; движение только у нажатия. */
.rsk-hero--tz { display: block; }
.rsk-hero--tz [hidden] { display: none !important; }
.rsk-hero--tz .rsk-hero__in,
.rsk-tz__start, .rsk-tz__igra, .rsk-tz__konec, .rsk-tz__lidery {
max-width: 760px; margin-inline: auto;
}
.rsk-tz__start, .rsk-tz__igra, .rsk-tz__konec { margin-top: clamp(20px, 2.4vw, 34px); }
.rsk-tz__lidery { margin-top: clamp(28px, 3vw, 44px); }
.rsk-tz__beda {
margin: 14px 0 0; padding: 2px 0 2px 14px;
border-left: 1px solid var(--rsk-line-lit);
font-size: 16px; line-height: 1.5; color: var(--ink); text-align: left;
}
/* Строка игры: номер вопроса слева, очки справа. */
.rsk-tz__hud {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
padding: 0 0 12px; border-bottom: 1px solid var(--rsk-line);
font-size: 17px; color: var(--ink-70); font-variant-numeric: lining-nums;
}
.rsk-tz__hud-l {
font-family: "Manrope", sans-serif; font-size: 12px; letter-spacing: .12em;
text-transform: uppercase; color: var(--gold);
}
.rsk-tz__hud-o { color: var(--ink); }
/* Карта (картинка 720, не обрезается) с названием и рядом вопрос. */
.rsk-tz__karta {
display: grid; grid-template-columns: 136px minmax(0, 1fr);
gap: 16px; align-items: start; margin-top: 18px;
}
.rsk-tz__figura { margin: 0; }
.rsk-tz__img {
display: block; width: 100%; height: auto; aspect-ratio: 2 / 3;
border-radius: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.rsk-tz__imya {
margin-top: 8px; font-size: 16px; line-height: 1.3; text-align: center;
color: var(--ink); overflow-wrap: anywhere;
}
.rsk-tz__kontekst {
margin: 0 0 8px; font-family: "Manrope", sans-serif; font-size: 12px;
letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}
.rsk-tz__vopros {
margin: 0; font-size: 21px; line-height: 1.35; color: var(--ink);
overflow-wrap: anywhere;
}
/* Четыре ответа — крупные кнопки во всю ширину; текст как есть, вразрядку
и прописными не набирается (это предложения из словаря). */
.rsk-tz__varianty { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 20px; }
.rsk-hero--tz .rsk-tz__variant {
display: block; width: 100%; height: auto; min-height: 56px;
padding: 14px 16px; text-align: left; white-space: normal;
font-size: 17px; font-weight: 400; line-height: 1.45;
letter-spacing: 0; text-transform: none; overflow-wrap: anywhere;
}
.rsk-hero--tz .rsk-tz__variant:disabled { cursor: default; opacity: .55; }
.rsk-hero--tz .rsk-tz__variant.is-vybran { opacity: 1; border-color: var(--gold); color: var(--gold-lit); }
.rsk-hero--tz .rsk-tz__variant.is-verno {
opacity: 1; color: #141b15; background: var(--gold); border-color: var(--gold);
box-shadow: 0 0 0 1px var(--gold-lit), 0 0 26px rgba(224, 196, 140, .35);
}
.rsk-hero--tz .rsk-tz__variant.is-neverno {
opacity: 1; color: var(--ink-70); border-color: rgba(244, 239, 231, .5);
}
@media (hover: none) {
.rsk-hero--tz .rsk-tz__variant:hover:not(.is-vybran):not(.is-verno):not(.is-neverno) {
border-color: rgba(244, 239, 231, .35); color: var(--ink);
}
}
.rsk-tz__rezultat {
margin: 18px 0 0; font-size: 21px; line-height: 1.3; color: var(--gold-lit);
}
.rsk-tz__posle { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.rsk-tz__posle .btn { width: 100%; }
/* Итог партии. */
.rsk-tz__konec-slovo {
margin: 0; font-weight: 300; font-size: clamp(30px, 7.6vw, 52px);
line-height: 1.1; letter-spacing: -.015em; color: var(--gold-lit);
}
.rsk-tz__konec-itog {
margin: 14px 0 0; font-size: 19px; line-height: 1.45; color: var(--ink-70);
font-variant-numeric: lining-nums;
}
.rsk-tz__konec-mesto { margin: 10px 0 0; font-size: 18px; line-height: 1.45; color: var(--ink); }
.rsk-tz__konec .rsk-ug__imya-gotovo { margin: 18px 0 0; }
.rsk-tz__imya-blok { margin-top: 22px; }
.rsk-tz__konec > .rsk-hero__deystvie, .rsk-tz__imya-blok .rsk-hero__deystvie { max-width: 420px; }
@media (min-width: 720px) {
.rsk-tz__karta { grid-template-columns: 200px minmax(0, 1fr); gap: 26px; }
.rsk-tz__vopros { font-size: 26px; }
.rsk-tz__posle { flex-direction: row; max-width: 520px; }
.rsk-tz__posle .btn { width: auto; flex: 1 1 0; }
}