/* ============================================================ Slivoteka · премиум — публичная часть (записи и листинги) Здесь ТОЛЬКО то, что рисуется за пределами кабинета: плашка замка .slvt-wall на странице записи и точка подписки на кнопке кабинета в шапке (data-slvt-account, ставит её premium-header.js). Всё остальное — кабинет, тарифы, касса, страница результата — живёт в premium.css и грузится ТОЛЬКО на девяти страницах кабинета. ⚠️ Делить пришлось из-за объёма: этот файл едет в на всех 5160 записях и листингах и блокирует отрисовку, а правил кабинета там не применяется ни одного. Новые публичные правила класть СЮДА, а не в premium.css. Правила те же, что у premium.css: только новые классы .slvt-*, ни одного своего цвета (var(--c-*)), точки останова темы, deps ['cy404-style'] — то есть ПОСЛЕ style.css темы. ============================================================ */ /* ============================================================ 1. Замок на карточке (.entry__gated — класс из разметки schema.php, оформление висит на своём .slvt-wall) ============================================================ */ .slvt-wall { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin: var(--s-6) 0; padding: var(--s-7) var(--s-5); text-align: center; background-color: var(--c-surface-2); background-image: linear-gradient(160deg, var(--c-primary-soft), transparent 70%); border: 1px solid var(--c-border); border-radius: var(--r-lg); } .slvt-wall__lock { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: var(--c-primary); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-pill); box-shadow: var(--sh-sm); } /* * ⚠️ Та же мина, что у ссылок ниже: заголовок плашки —

ВНУТРИ * .entry-content, а у темы там `.entry-content h2 { margin-block: * var(--s-6) var(--s-3) }` (0,1,1). Она перебивала `.slvt-wall__title` * (0,1,0), и поверх flex-gap приезжали лишние 24 px сверху и 12 px * снизу — ритм плашки разъезжался. Кроем своим же селектором (0,2,0). */ .slvt-wall .slvt-wall__title { margin: 0; font-family: var(--ff-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: var(--c-text); text-wrap: balance; } .slvt-wall__text { max-width: 52ch; margin: 0; font-size: var(--fs-base); line-height: 1.6; color: var(--c-text-muted); text-wrap: pretty; } /* * ⚠️ И здесь то же: `.entry-content ul { padding-left: var(--s-5) }` * (0,1,1) добавляла ряду чипов 20 px слева, и центрированный ряд вставал * на 10 px правее оси плашки (замер: центр чипов 460 при центре плашки * 450). Кроем селектором (0,2,1) — тег в селекторе обязателен, иначе * специфичность сравняется и победит порядок, а не намерение. */ .slvt-wall ul.slvt-wall__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin: 0; padding: 0; list-style: none; } /* * ⚠️ `.entry-content li + li { margin-top: var(--s-2) }` (0,1,1) опускала * каждый следующий чип на 8 px — ряд «ещё N снимков / видео / аудио» * переставал стоять в один уровень. Расстояние здесь задаёт gap. */ .slvt-wall__facts li + li { margin-top: 0; } .slvt-wall__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-2); } /* * ⚠️ Плашка печатается ВНУТРИ .entry-content (гейт подставляет её в * the_content вместо маркера), а у темы там есть * `.entry-content a { color: var(--c-primary); text-decoration: underline }` * — специфичность (0,1,1). Она перебивает `.btn` (0,1,0) и `.btn--primary` * (0,1,0): основная кнопка печатала текст цветом var(--c-primary) ПОВЕРХ * фона var(--c-primary) (контраст 1:1, букв не видно), а «Войти» красилась * в primary и получала подчёркивание. * * Возвращаем цвета темы своими селекторами (0,2,0) и (0,3,0) — hover у * темы это `.entry-content a:hover` (0,2,1), поэтому его крыть нужно * отдельной парой, иначе кнопка снова пропадает под курсором. * Кнопки правим ТОЛЬКО внутри своей плашки: .btn темы не трогаем. */ .slvt-wall__actions .btn, .slvt-wall__actions .btn:hover { text-decoration: none; } .slvt-wall__actions .btn--primary, .slvt-wall__actions .btn--primary:hover { color: var(--c-on-primary); } .slvt-wall__actions .btn--ghost, .slvt-wall__actions .btn--ghost:hover { color: var(--c-text); } .slvt-wall__note { margin: 0; font-size: var(--fs-sm); color: var(--c-text-soft); } /* ============================================================ 2. Ряд превью гостя: открытые снимки + закрытые плитки Разметку печатает slvt_preview_html() (includes/access/content.php): внутри .entry-gallery темы идут K настоящих превью, а за ними ВСЕГДА две плитки-«загадки» .slvt-tease — приём витрины, а не отражение содержимого (решение владельца). ⚠️ Селектор .entry-gallery принадлежит entry.css темы и здесь не переопределяется (BAZA §7): все правила висят на собственных классах .slvt-preview-row и .slvt-tease. Специфичность тоже наша: .entry-gallery a (0,1,1) темы перебивается только связкой с нашим классом — .entry-gallery a.slvt-tease (0,2,1). ============================================================ */ /* * Пустота справа, с которой всё началось: у темы колонки считаются * `auto-fill`, поэтому в широком листе резервируется 6 колей под 3 * снимка — четыре из них пустые. Ряд гостя всегда короткий (снимки * + две плитки), и ему нужен `auto-fit`: пустая колея схлопывается, * а ширина раздаётся заполненным. Наш класс — на нашей разметке. */ .entry-preview .slvt-preview-row { grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); } /* * ⚠️ Перебив grid-template-columns темы, мы забрали у ряда и ЕЁ точку * останова: у `.entry-gallery` на ≤768 px минимум колонки 96 px, а наш * селектор (0,2,0) сильнее и висел без медиа-запроса — то есть на телефоне * ряд оставался на 116 px. Замер на 390 px: тема дала бы три колеи по * 100 px (три снимка — одна строка), а выходило ДВЕ по 154 px, пять * элементов ложились в ТРИ строки и последняя плитка висела одна. * Повторяем минимум темы: снимки и плитки снова того же размера, что * галерея на остальном сайте, а ряд читается как «строка открытого, * строка закрытого». */ @media (max-width: 768px) { .entry-preview .slvt-preview-row { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); } } /* * ⚠️ Сама по себе `auto-fit` НЕ спасает от рваного хвоста: она подбирает * колеи под ширину, не зная, сколько у ряда элементов. Когда их число не * делится на число колей, последняя строка остаётся почти пустой, и * ОДИНОКОЙ там висит именно плитка — последний элемент ряда. * Замеры на живых записях (ширина листа → раскладка → пустота справа): * 2 превью + 2 плитки (80 записей): 375–490 px → три колеи, * строки «2 снимка + плитка» и «плитка + 213…240 px пустоты»; * 3 превью + 2 плитки (5068 записей): ≤370 px → две колеи и ТРИ строки, * последняя — одна плитка и 135…145 px пустоты; 490–590 px → четыре * колеи, в хвосте одна плитка и 323 px пустоты; * 1 превью + 2 плитки (6 записей): ≤370 px → одинокая плитка. * Число превью сервер уже печатает в data-slvt-preview, поэтому на узком * листе колеи задаются точно под него: снимки в одной строке, пара плиток * в другой. Пустой остаётся максимум ОДНА ячейка (3 снимка + 2 плитки — * пятёрка не делится ни на что), и плитки больше не разлучаются. * Другое значение K из настроек под правила не попадёт — там останется * auto-fit, то есть поведение ровно как сейчас. */ @media (max-width: 600px) { .entry-preview .slvt-preview-row[data-slvt-preview="2"] { grid-template-columns: repeat(2, 1fr); } } /* * ⚠️ Нижняя граница у трёх колей своя: 3 × 96 px + два зазора по 6 = 300 px * ширины ряда, то есть 376 px листа. Замер на 340 px показал, ЧЕМ это * кончается: колея 84 px, а подпись «Под замком» в одну строку занимает * 85 px — пилюля вылезала за плитку и срезалась `overflow: hidden`. * Ниже 376 px оставляем auto-fit с минимумом темы: плитка 129…139 px, * подпись дышит, а рваный хвост из одной плитки там же, где он был бы * и у обычной галереи из пяти снимков. */ @media (min-width: 376px) and (max-width: 600px) { .entry-preview .slvt-preview-row[data-slvt-preview="1"], .entry-preview .slvt-preview-row[data-slvt-preview="3"] { grid-template-columns: repeat(3, 1fr); } } /* * Плитка-«загадка». Размер и пропорции НЕ задаются заново: aspect-ratio * 3/4, рамка, скругление и hover приходят от `.entry-gallery a` темы — * так плитка гарантированно совпадает с соседними превью. */ .entry-gallery a.slvt-tease { position: relative; color: var(--c-text); text-decoration: none; /* .entry-content a подчёркивает и красит ссылки тела — гасим только на своей плитке, остальные ссылки записи не трогаем. */ background-color: var(--c-sunken); /* Слои плитки не должны мешаться со слоями тела записи. */ isolation: isolate; } /* ── Слой 1: матовое стекло ────────────────────────────────── Пятна подобраны так, чтобы под стеклом читался СНИМОК, а не ровная заливка: тёмная масса по центру снизу (силуэт), светлый блик сверху слева (свет из-за плеча) и два цветных пятна темы. Ровный градиент такого впечатления не даёт — проверено глазами на 1440 и 390 в обеих темах. `inset: -18%` — запас, чтобы blur не подтянул прозрачность к краям плитки и не получилась светлая кайма. */ /* Сила «массы» под стеклом и плотность крупы регулируются ручками. ⚠️ Светлая и тёмная темы требуют РАЗНЫХ значений: на светлой бумаге те же проценты дают бледное пятно, и плитка читается как обои в точку, а не как спрятанный снимок (проверено на живых снимках — светлый вариант первой сборки владелец бы забраковал). Значения по умолчанию здесь — СВЕТЛЫЕ; тёмная тема ослабляет их ниже двумя селекторами, как требует §7 спеки BAZA (bare :root → media → [data-theme]). */ .slvt-tease { --slvt-tease-mass: 72%; /* тёмный силуэт по центру */ --slvt-tease-tint: 78%; /* насыщенность цветных пятен */ --slvt-tease-base: var(--c-sunken); --slvt-tease-grain-o: .13; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .slvt-tease { --slvt-tease-mass: 34%; --slvt-tease-tint: 58%; --slvt-tease-base: var(--c-surface-2); --slvt-tease-grain-o: .22; } } :root[data-theme="dark"] .slvt-tease { --slvt-tease-mass: 34%; --slvt-tease-tint: 58%; --slvt-tease-base: var(--c-surface-2); --slvt-tease-grain-o: .22; } .slvt-tease__blur { position: absolute; inset: -18%; background-color: var(--slvt-tease-base); background-image: radial-gradient(30% 24% at 32% 18%, color-mix(in srgb, var(--c-surface) 92%, transparent), transparent 72%), radial-gradient(34% 40% at 52% 66%, color-mix(in srgb, var(--c-text) var(--slvt-tease-mass), transparent), transparent 72%), radial-gradient(36% 32% at 24% 30%, color-mix(in srgb, var(--c-primary) var(--slvt-tease-tint), transparent), transparent 70%), radial-gradient(40% 36% at 78% 34%, color-mix(in srgb, var(--c-accent) var(--slvt-tease-tint), transparent), transparent 72%), radial-gradient(48% 44% at 44% 92%, color-mix(in srgb, var(--c-primary) var(--slvt-tease-mass), transparent), transparent 74%), linear-gradient(165deg, var(--slvt-tease-base), var(--c-sunken)); filter: blur(14px); transition: transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease); } /* ── Слой 2: «крупа» ───────────────────────────────────────── Две сетки точек разного шага; цвет берётся у текста темы, поэтому в светлой теме крупа тёмная, в тёмной — светлая. Движение — четыре скачка позиции (steps(1)), как рябь на платном медиа в TG: дёшево по отрисовке и не тянет композитор каждым кадром. */ .slvt-tease__grain { position: absolute; inset: -8px; color: var(--c-text); background-image: radial-gradient(currentColor 0.6px, transparent 0.7px), radial-gradient(currentColor 0.5px, transparent 0.6px), radial-gradient(currentColor 0.8px, transparent 0.9px); /* Три несовпадающих шага (5 / 8 / 11) вместо одного: одиночная сетка точек читается как москитная, а наложение трёх даёт неровную крупу, как на платном медиа в TG. */ /* ⚠️ Шаг мельче исходного (было 5/8/11): на светлой теме крупная сетка читалась как горошек поверх пустой плашки и перебивала то, что под ней. */ background-size: 6px 6px, 9px 9px, 13px 13px; background-position: 0 0, 2px 3px, 5px 1px; opacity: var(--slvt-tease-grain-o); animation: slvt-tease-grain 2.4s steps(1) infinite; } @keyframes slvt-tease-grain { 0% { background-position: 0 0, 2px 3px, 4px 1px; } 25% { background-position: -3px 2px, 4px -2px, 1px 5px; } 50% { background-position: 2px -3px, -3px 3px, 6px -2px; } 75% { background-position: 3px 3px, -1px -4px, -2px 3px; } 100% { background-position: 0 0, 2px 3px, 4px 1px; } } /* ── Вторая плитка — не копия первой ────────────────────────── Обе плитки рисует один и тот же CSS, поэтому в паре они выходили ПОПИКСЕЛЬНО одинаковыми (сверка скриншота: различались 3 % точек, и те — сглаживание шрифта). Рядом стоящие близнецы читаются как повтор одной заглушки, а не как два разных закрытых снимка. Разворачиваем пятно второй плитки на пол-оборота и сдвигаем фазу крупы: рисунок тот же, «кадр» другой. `rotate` — отдельное свойство, а не transform: иначе наведение (`transform: scale(1.06)`) сбрасывало бы разворот и плитка прыгала. Позицию крупы задаём и статикой — при prefers-reduced-motion анимации нет, и без этого плитки снова стали бы одинаковыми. */ .entry-gallery a.slvt-tease:last-child .slvt-tease__blur { rotate: 180deg; } .entry-gallery a.slvt-tease:last-child .slvt-tease__grain { background-position: 2px -3px, -3px 3px, 6px -2px; animation-delay: -1.2s; } /* ── Слой 3: замок и подпись ─────────────────────────────────── */ .slvt-tease__body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-2); text-align: center; } .slvt-tease__lock { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--c-text); /* Полупрозрачная шайба: под ней видно, что пятно продолжается, поэтому читается «стекло поверх чего-то», а не наклейка. */ background: color-mix(in srgb, var(--c-surface) 74%, transparent); border: 1px solid color-mix(in srgb, var(--c-border-strong) 70%, transparent); border-radius: var(--r-pill); box-shadow: var(--sh-sm); transition: transform var(--t) var(--ease); } .slvt-tease__label { padding: 2px var(--s-2); font-family: var(--ff-sans); font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; color: var(--c-text); background: color-mix(in srgb, var(--c-surface) 74%, transparent); border-radius: var(--r-pill); } /* ── Состояния ─────────────────────────────────────────────── Рамка и тень на hover приходят от темы; здесь только «стекло подаётся ближе». Клавиатурный фокус-ринг тоже теминый (.entry-gallery a:focus-visible), поэтому не дублируется — но на :focus-visible плитка ведёт себя как на hover. */ .entry-gallery a.slvt-tease:hover .slvt-tease__blur, .entry-gallery a.slvt-tease:focus-visible .slvt-tease__blur { transform: scale(1.06); filter: blur(11px); } .entry-gallery a.slvt-tease:hover .slvt-tease__lock, .entry-gallery a.slvt-tease:focus-visible .slvt-tease__lock { transform: scale(1.08); } /* ============================================================ 8. Кнопка кабинета в шапке (разметка темы, `data-slvt-account`) Сервер печатает её одинаково всем — иначе состояние одного человека уехало бы в микрокэш и досталось остальным. Значок активной подписки ставит premium.js по метке из localStorage, классом .slvt-has-premium. Чужие селекторы не переопределяются: оба правила привязаны к НАШЕМУ атрибуту, .icon-btn и .btn остаются темиными. ============================================================ */ .icon-btn[data-slvt-account] { /* Якорь для точки подписки; больше ничего у .icon-btn не меняем. */ position: relative; } [data-slvt-account].slvt-has-premium::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); /* Обводка цветом фона кнопки: точка читается и на hover-подложке. */ box-shadow: 0 0 0 2px var(--c-surface); } /* В мобильной панели кнопка широкая и текстовая — точка уезжает к правому краю, поверх пустого места, а не поверх подписи. */ .btn[data-slvt-account].slvt-has-premium::after { top: 50%; right: var(--s-4); margin-top: -3.5px; box-shadow: 0 0 0 2px var(--c-bg); } .btn[data-slvt-account] { /* gap у .btn уже есть — здесь только якорь для точки. */ position: relative; } /* ============================================================ Адаптив (600 / 400). Точки останова — только теминые. ⚠️ «Горизонтального скролла нет» — НЕ доказательство, что всё влезло: у html/body стоит overflow-x: hidden/clip, вылезшее срезается молча. Проверять шириной ряда. ============================================================ */ @media (max-width: 600px) { .slvt-wall { padding: var(--s-6) var(--s-4); } .slvt-wall__actions .btn { flex: 1 1 100%; } } /* ── ≤400px: иконка кабинета уходит из шапки в меню ─────────── Замер: ниже 768 px все кнопки шапки становятся 44×44 (тач-цель), и строка «бренд + действия» требует 32 (поля) + 128 (бренд) + 12 (зазор) + 200 (четыре кнопки по 44 и три зазора по 8) = 372 px. При 360 px ряд вылезал на 16 px за экран, при 320 px — на 36 px, и ЭТО НЕ БЫЛО ВИДНО: у html/body стоит overflow-x: hidden/clip, поэтому лишнее не давало горизонтальной прокрутки, а молча срезало ПОСЛЕДНЮЮ кнопку ряда — бургер (на 320 px от него оставалось 8 px, меню становилось недоступно). Убираем свою, четвёртую кнопку: в бургер-меню кабинет и так есть отдельной широкой кнопкой .btn[data-slvt-account], причём с подписью — на телефоне это лучшая точка входа, чем иконка. Селектор наш собственный, ряд возвращается к исходным трём кнопкам темы. */ @media (max-width: 400px) { .header-actions .icon-btn[data-slvt-account] { display: none; } /* На 340–400 px плитка ниже — шайба замка уступает место подписи. */ .slvt-tease__lock { width: 30px; height: 30px; } /* На 390 px (самая частая ширина телефона) в ряду три колеи по 101 px, и «Под замком» ломалось на две строки: под текст оставалось 67 px при нужных ~70 px. Ужимаем поля — подпись снова в одну строку, замер: 85 px при 91 px доступных. Кегль не трогаем: --fs-xs и так самый мелкий токен. */ .slvt-tease__body { padding: var(--s-1); } .slvt-tease__label { padding-inline: 6px; white-space: nowrap; } } /* ============================================================ Меньше движения: «крупа» замирает, стекло не едет. Плитка при этом не теряет смысла — размытие и замок статичны. ============================================================ */ @media (prefers-reduced-motion: reduce) { .slvt-tease__grain { animation: none; } .slvt-tease__blur, .slvt-tease__lock { transition: none; } }