/* Нижнее меню и вкладки ленты — как в мобильных лентах-агрегаторах. Заказ владельца 2026-08-04 (скриншот vc.ru): вкладки сверху, панель снизу, подписка на автора. Почему подписка работает без входа: сайт статический, сервера у него нет, а значит нет ни сессий, ни базы подписок. Подписки живут в браузере читателя (localStorage) — «Мои авторы» собираются на его же устройстве. Это честно работает сразу; вход через Яндекс и общий профиль потребуют отдельного сервера, это следующий разговор. */ :root{ --nav-h:58px; } /* Иконки — один класс на весь сайт (шаг 3 плана). Размер объявлен ЗДЕСЬ и больше нигде: место, где иконка стоит, задаёт только `--ikonka`, а рисунок приходит из спрайта `/assets/ikonki.svg`. Толщина линии не здесь — она общая и живёт в самом спрайте, иначе снова разъедется по местам (было четыре разных значения в шести объявлениях). */ .ikonka{width:var(--ikonka,24px);height:var(--ikonka,24px);flex:none; fill:none;stroke:currentColor} /* ── вкладки ленты ─────────────────────────────────────────────── */ .tabs{display:flex;gap:6px;align-items:center;max-width:680px;margin:0 auto 6px; padding:0 2px;overflow-x:auto;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tab{flex:0 0 auto;border:0;background:transparent;cursor:pointer; font:600 15px/1 var(--sans);color:var(--muted); padding:10px 16px;border-radius:100px;white-space:nowrap; transition:background .25s var(--ease),color .25s var(--ease)} .tab:hover{color:var(--ink)} .tab[aria-selected="true"]{background:var(--surface);color:var(--ink)} .tab-count{margin-left:6px;font-weight:500;color:var(--muted)} /* пусто во вкладке «Мои авторы» */ .tabs-empty{max-width:680px;margin:22px auto;padding:22px 18px;border-radius:16px; background:var(--surface);color:var(--ink-soft);font-size:15px;line-height:1.5} .tabs-empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px} /* ── кнопка подписки в карточке ────────────────────────────────── */ .card-sub{align-self:flex-start;border:1px solid var(--border);background:#fff; color:var(--ink);border-radius:100px;padding:5px 13px;font:600 13px/1 var(--sans); text-decoration:none;cursor:pointer;white-space:nowrap; transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)} .card-sub:hover{border-color:var(--ink)} .card-sub[data-on="1"]{background:var(--ink);border-color:var(--ink);color:#fff} /* ── нижняя панель ───────────────────────────────────────────── Переделана 04.08.2026 по образцу, который прислал владелец: не полоса во всю ширину, приклеенная к краю, а плавающая капсула с отступами, мягкой тенью и подсветкой активного пункта. Подписи убраны — иконки читаются быстрее, а строка подписи на 4 пункта съедала высоту. */ .tabbar{position:fixed;left:10px;right:10px;z-index:20;display:none; bottom:calc(10px + env(safe-area-inset-bottom,0px)); /* Колонки считаются по числу пунктов, а не числом 4. С 07.08.2026 их бывает и пять (кнопка поиска, шаг 4 плана), и на служебных страницах снова четыре: жёсткое repeat(4,1fr) свернуло бы пятый пункт в нулевую колонку молча. */ grid-auto-flow:column;grid-auto-columns:1fr;align-items:center; height:var(--nav-h);padding:0 6px;border-radius:26px; background:rgba(255,255,255,.82); backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px); border:1px solid rgba(20,18,15,.06); box-shadow:0 8px 30px rgba(20,18,15,.13), 0 1px 3px rgba(20,18,15,.06)} .tabbar a,.tabbar button{position:relative;display:flex;align-items:center;justify-content:center; height:42px;margin:0 3px;border-radius:16px;text-decoration:none;color:var(--muted); transition:background .3s var(--ease),color .3s var(--ease)} /* Кнопка поиска — тот же пункт панели, но браузер даёт кнопке свой фон, рамку, отступы и шрифт. Снимаем всё: иначе пятый пункт выглядит инородным. */ .tabbar button{background:none;border:0;padding:0;font:inherit;cursor:pointer; -webkit-appearance:none;appearance:none} .tabbar a[aria-current="page"],.tabbar button[aria-expanded="true"]{ background:rgba(20,18,15,.07);color:var(--ink)} .tabbar a:active,.tabbar button:active{transform:scale(.94)} /* ── ПОДПИСИ В КАПСУЛЕ ВЕРНУЛИСЬ (10.08.2026) ──────────────────────── Здесь стояло `width:1px;height:1px;clip:rect(0 0 0 0)` — «подпись остаётся для читалок с экрана». Замер: иконка 24×24, подпись 1×1. То есть глазами капсула была четырьмя безымянными картинками, и читатель, пришедший из поиска, должен был угадывать, что книжка — «Гид по нотам», а человечек с сердцем — «Мои авторы». Два значка из четырёх при этом — почти одинаковые человечки («Авторы» и «Мои»), различить их без подписи нельзя вовсе. Место есть: капсула 58px, иконка 24 + подпись 10 + зазор 2 = 36 при высоте пункта 46. Первая редакция убрала подписи «чтобы не съедали высоту» — высота капсулы с тех пор не менялась, а четыре пункта в 375px помещаются с запасом. Найдено консилиумом 10.08.2026, двумя линзами независимо. */ .tabbar a{flex-direction:column;gap:2px;height:46px} .tabbar a>span:not(.badge){font:600 10px/1 var(--sans);letter-spacing:-.01em} .tabbar .badge{position:absolute;top:4px;right:calc(50% - 19px);min-width:17px;height:17px; border-radius:100px;background:#e8453c;color:#fff; font:600 10.5px/17px var(--sans);text-align:center;padding:0 4px;border:2px solid #fff} /* ⚠️ 860, а не 760. Порог капсулы обязан совпадать с порогом, на котором прячется строка поиска в шапке (`.poisk{display:none}` при `max-width:860px` ниже). Пока они расходились, полоса 761–860 px оставалась БЕЗ ПОИСКА ВОВСЕ: строка в шапке уже скрыта, капсулы с кнопкой ещё нет. Замер 07.08.2026 по ширинам: 760 — достижим, 761 — нет, 768 (iPad портрет) — нет, 860 — нет, 861 — достижим. Сводить надо было именно капсулу вверх, а не строку вниз: строку прячут потому, что она не помещается рядом с логотипом и входом, — это причина, а не привычка. Два порога на одно решение — сама по себе ошибка: следующий, кто подвинет один, снова разведёт их. Держать одним числом. */ @media (max-width:860px){ .tabbar{display:grid} body{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 24px)} footer.site{margin-bottom:8px} } /* Плашка про cookie стоит внизу и на телефоне перекрывала нижнюю панель: первое, что видел читатель, — две панели друг на друге. Поднимаем её над меню. */ @media (max-width:860px){ #ck{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 22px) !important} /* Про кнопку «Наверх» здесь НИЧЕГО НЕТ, и это осознанно. Консилиум 10.08.2026 нашёл её наложение на пункт капсулы (42×42px, 53% площади, z-index 40 против 20) и я собрался поднять её тем же приёмом — но блоком ниже это уже сделано 07.08.2026, и сделано полнее: там нашли и ВТОРОЕ наложение, с плашкой cookie (1848px², 95% кнопки), и погасили `#up`, пока плашка висит. Моя правка была бы третьей копией одного правила с третьим числом отступа (+22 против +20), то есть ровно тем расхождением копий, которое я весь день и вычищаю. Правило одно и живёт ниже. */ } /* Кнопка «Наверх» — та же беда, что была у плашки, только тише и потому дожила до пиксельного замера. Она приклеена к правому нижнему углу (right:18px; bottom:18px; 44×44) и несёт z-index 40 против 20 у капсулы, то есть ложится ПОВЕРХ её правого пункта, а не под него. До 07.08.2026 под ней оказывались «Мои», с шагом 4 — сама кнопка поиска: тап в лупу уходил в «Наверх», а замер scripts/ikonki_pikseli.py дал 9 точек вместо 120 (иконка стоит в обоих снимках под чужим непрозрачным блоком и сокращается). Поднимаем над капсулой тем же приёмом, что и плашку выше. Инлайновый #up на страницах объявлен ДО nav.css, но в шаблоне статьи часть его свойств идёт с !important — ставим его и здесь, чтобы правило не зависело от порядка подключения на конкретной странице. */ @media (max-width:860px){ #up{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 20px) !important} /* А поднять было мало. Плашка cookie несёт z-index 50 против 40 у «Наверх» и на узком экране разворачивается в два-три ряда: замер 07.08.2026 дал наложение 1848 px² — 95 % кнопки, и `elementFromPoint` в её центре отдавал `ck`. То есть первая правка не убрала беду, а передвинула её этажом выше: тап уходил уже не в «Наверх», а в плашку. Пока плашка висит, «Наверх» убираем совсем — она закрывается одним тапом и висит только у нового читателя, а кнопка возврата не срочная. Отношение «предыдущий сосед» через `:has`: в разметке #up стоит ПЕРЕД #ck, и обычным `~` его не достать. */ body:has(#ck:not([hidden])) #up{display:none !important} } /* Вход и профиль в шапке */ .vhod-mesto{display:flex;align-items:center;margin-left:auto;padding-left:10px} .vhod{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:#fff; text-decoration:none;border-radius:100px;padding:7px 15px;font:600 13px/1 var(--sans); white-space:nowrap;transition:opacity .3s var(--ease)} .vhod:hover{opacity:.85} .vhod-kto{display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--sans);color:var(--ink)} .vhod-kto img{width:26px;height:26px;border-radius:50%;object-fit:cover} .podpischikov{margin:2px 0 0;color:var(--muted);font-size:13.5px} @media (max-width:560px){ .vhod{padding:6px 12px;font-size:12.5px} } .vhod-mesto{gap:8px} .vhod svg{width:17px;height:17px} .vhod-klyuch{border:1px solid var(--border);background:#fff;color:var(--ink);cursor:pointer;font:600 13px/1 var(--sans)} .vhod-klyuch:hover{border-color:var(--ink);opacity:1} .vhod-klyuch:disabled{opacity:.5;cursor:default} /* ── ПОДВАЛ (переделан 04.08.2026 по замечанию владельца: «всё вразброс»). Было: описание прижато влево, ряд ссылок посередине, копирайт снова влево — три разные оси в одном блоке. Стало одна ось и три ступени: что за журнал, куда пойти, юридическое мелким. */ footer.site{text-align:center} footer.site>*{max-width:620px;margin-left:auto;margin-right:auto} footer.site .foot-o{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:0 auto 16px} footer.site .foot-nav{display:flex;flex-wrap:wrap;justify-content:center; gap:6px 18px;margin:0 auto 16px;font-size:14px} footer.site .foot-nav a{text-decoration:none;color:var(--ink-soft)} footer.site .foot-nav a:hover{color:var(--ink)} footer.site .foot-niz{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px; margin:0 auto;padding-top:14px;border-top:1px solid rgba(20,18,15,.06); font-size:12.5px;color:var(--muted)} footer.site .foot-niz a{color:var(--muted);text-decoration:none} footer.site .foot-niz a:hover{color:var(--ink-soft)} @media (max-width:560px){ footer.site .foot-o{font-size:13.5px} footer.site .foot-nav{gap:6px 14px;font-size:13.5px} } .vhod-kab{font:600 13px/1 var(--sans);color:var(--ink-soft);text-decoration:none; padding:7px 10px;border-radius:100px;white-space:nowrap} .vhod-kab:hover{color:var(--ink);background:var(--surface)} a.vhod-kto{text-decoration:none} @media (max-width:560px){ .vhod-kab{display:none} } /* на телефоне туда ведёт нижняя панель */ /* На телефоне длинная кнопка «Войти с Яндекс ID» выдавливала из шапки всё меню. Оставляем значок и короткое слово — смысл понятен, место остаётся разделам. */ @media (max-width:560px){ header.site{gap:8px} .vhod .vhod-dlinno{display:none} .vhod{padding:6px 12px} } @media (min-width:561px){ .vhod .vhod-korotko{display:none} } /* ── ЛЕНТА БЛОКАМИ (04.08.2026, по присланному образцу) ───────────── Было: сплошной список, карточки разделены тонкой чертой — на телефоне это читается как один длинный текст. Стало: страница светло-серая, каждая история — белый блок со скруглением. Так глаз сразу видит, где кончается одна и начинается другая, и лента листается «карточками», а не полотном. 06.08.2026 — БЛОКИ СНЯТЫ С ТЕЛЕФОННОГО ЗАМКА. Правило жило в `@media (max-width:760px)`, поэтому на компьютере эталона не было вовсе: замер 1440px показал фон карточки `rgba(0,0,0,0)` на белой странице, то есть ленту-полотно с волосяной чертой. Эталон — блоки на любой ширине; белыми остаются только страницы, где читают (см. `:has` ниже). */ body{background:#f1f1f3} header.site{background:rgba(241,241,243,.9)} .hero-intro{background:transparent} .card{background:#fff;border-radius:18px;border-top:0;padding:14px 14px 16px; margin:0 0 10px;box-shadow:0 1px 2px rgba(20,18,15,.05)} /* ── ВКЛАДКА «МОИ АВТОРЫ» ОЖИВЛЕНА (10.08.2026) ───────────────────── `lenta.js` фильтрует ленту через `к.hidden = !свой`. Атрибут ставился, а карточка оставалась на экране: `[hidden]{display:none}` — правило браузера по атрибуту, и его перебивает любое авторское объявление display по классу, а у нас их три (`.card{display:flex}`, `{display:grid}`, `{display:grid!important}`). Замер до правки, 375px, подписка на одного автора с тремя статьями: атрибут hidden у 19 карточек из 22 — РЕАЛЬНО ВИДНО 22. То есть одна из пяти вещей, названных владельцем взятыми у эталона, не работала вовсе: читатель жал «Подписаться», переключал вкладку и видел ту же ленту. `!important` здесь обязателен — иначе `display:grid!important` из мобильного блока главной снова победит. Найдено консилиумом 10.08.2026. */ .card[hidden]{display:none!important} /* ── ПРОФЕССИЯ АВТОРА В СТРОКЕ КАРТОЧКИ (10.08.2026) ───────────────── Усечение, а не перенос: строка автора обязана остаться одной, иначе карточка растёт и упирается в потолок плотности (40% экрана телефона, решение владельца). `min-width:0` тут не косметика — без него flex-элемент отказывается сжиматься и выталкивает дату за край карточки. На 375px строка усечётся до «технолог парфюмерн…» — это всё ещё ответ на вопрос «кто это писал», а пустое место рядом с именем ответом не было. */ .card .k-rol{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;color:var(--muted);font-weight:500} .card .k-rol::before{content:"· ";color:var(--border)} .card .k-author{flex:0 0 auto} .card .k time{flex:0 0 auto;margin-left:auto;padding-left:8px} /* ── ФОКУС С КЛАВИАТУРЫ: ОДНО ПРАВИЛО НА ВЕСЬ САЙТ (10.08.2026) ────── Замер до правки: `focus-visible` — ноль вхождений в `index.html`, ноль в этом файле, ноль в `build_index.py`, при 127 интерактивных элементах на главной. Единственный `:focus` на сайте был у поля поиска, и он через `outline:none` плюс смена цвета волосяной границы, которую на 1px не видно; мышиный клик её тоже съедал. Всё остальное отдано браузеру: рамка #005FCC с ПРЯМЫМИ углами там, где всё скруглено на 10–18px, и системный синий ярче фирменного. `border-radius:inherit` заставляет рамку идти по скруглению — иначе на пилюле «Подписаться» (радиус 100px) она срезала бы углы. Акцент даёт 6,11:1 на сером полотне — посчитано, видно. */ :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--accent);outline-offset:3px;border-radius:inherit} .card .card-th-box{background:#f5f5f7} .tab[aria-selected="true"]{background:#fff} footer.site{background:#f1f1f3} /* страницы статьи и кабинета остаются белыми: там читают, а не листают */ body:has(article:not(.card)){background:#fff} body:has(article:not(.card)) header.site{background:rgba(255,255,255,.9)} body:has(article:not(.card)) footer.site{background:#fcfcfb} @media (max-width:760px){ .feed{padding-left:10px;padding-right:10px} .tabs{padding-left:12px;padding-right:12px} } /* На телефоне разделы живут в нижней панели, и дублировать их в шапке незачем: в узкую строку они всё равно не влезали — было видно только «Статьи», остальное уезжало за край. Шапка оставляет логотип и вход. ⚠️ 860, а не 560 — тот же порог, что у капсулы и у строки поиска. Пока здесь стояло 560, разделы дублировались в шапке И в капсуле на 561–760, а после сведения порогов к 860 полоса дубля выросла бы до 561–860: гейт круга 2 верно назвал это унаследованным дефектом, расширенным моей же правкой. Правило CLAUDE.md («разделы в шапке на узком экране не дублируются») нарушалось ровно там, где появлялась капсула, — значит и порог обязан быть её порогом. Три числа на одно решение (560/760/860) — та же ошибка, что и два: держать одним. */ @media (max-width:860px){ header.site>nav{display:none} header.site{justify-content:space-between} } /* ── ТРИ КОЛОНКИ НА КОМПЬЮТЕРЕ (04.08.2026, эталон vc.ru) ─────────── Было: одна узкая колонка посередине и много пустого поля по бокам — на широком экране сайт выглядел мобильной страницей, растянутой на десктоп. Стало как в эталоне: слева разделы и рассказчики, посередине лента, справа карточки о журнале. На телефоне обе боковины скрыты — там лента во всю ширину. */ @media (min-width:1000px){ body{--kolonka:660px} /* Ширины задаём с запасом по весу правила: у страницы есть собственные стили ленты, накопленные слоями, и без этого карточка вылезала за колонку и наезжала на правую боковину (замер: лента 760, карточка 800). */ body .hero-intro, body .feed, body .tabs{max-width:var(--kolonka); margin-left:auto;margin-right:auto;padding-left:0;padding-right:0} body .feed .card{margin-left:0;margin-right:0;max-width:100%} /* Здесь стояло `body .feed{grid-template-columns:minmax(0,1fr)}` — первая, неверная починка наезда 11.08.2026. Она зажимала трек ленты и тем прятала СЛЕДСТВИЕ (карточка вылезала из ленты на 227px), не трогая ПРИЧИНУ — отсутствие настольной раскладки карточки на страницах авторов (см. блок `min-width:641px` ниже). Снята после замера: с исправленной карточкой трек и без неё равен 660px, то есть правило не несло нагрузки. И хуже того — оно бы ослепило нового сторожа геометрии: при возврате дефекта текст сжимался бы в столбик внутри ленты вместо наезда на боковину, а сторож мерит именно наезд и остался бы зелёным. */ .bok{position:fixed;top:96px;width:230px;max-height:calc(100vh - 130px); overflow-y:auto;scrollbar-width:none} .bok::-webkit-scrollbar{display:none} .bok-l{left:max(16px, calc(50% - var(--kolonka)/2 - 262px))} .bok-r{width:250px;right:max(16px, calc(50% - var(--kolonka)/2 - 282px))} .bok-menu{display:flex;flex-direction:column;gap:2px;margin-bottom:22px} .bok-menu a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:12px; text-decoration:none;color:var(--ink-soft);font:500 15px/1.2 var(--sans); transition:background .25s var(--ease),color .25s var(--ease)} .bok-menu a:hover{background:var(--surface);color:var(--ink)} .bok-menu a[aria-current="page"]{background:var(--surface);color:var(--ink);font-weight:600} .bok-menu .ikonka{--ikonka:20px} .bok-zag{margin:0 0 8px 12px;font:600 12px/1 var(--sans);letter-spacing:.06em; text-transform:uppercase;color:var(--muted)} .bok-avtory{display:flex;flex-direction:column;gap:1px} .bok-avtor{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:12px; text-decoration:none;color:var(--ink-soft);font:500 14.5px/1.2 var(--sans)} .bok-avtor:hover{background:var(--surface);color:var(--ink)} .bok-avtor img{width:26px;height:26px;border-radius:50%;object-fit:cover; object-position:center 28%;flex:0 0 26px} .bok-avtor span{flex:1} .bok-avtor i{font-style:normal;font-size:12.5px;color:var(--muted)} .bok-karta{background:var(--surface);border-radius:16px;padding:16px 16px 14px;margin-bottom:12px} .bok-karta b{display:block;font:600 15px/1.25 var(--sans);margin-bottom:6px} .bok-karta p{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--ink-soft)} .bok-knopka{font:600 13.5px/1 var(--sans);color:var(--ink);text-decoration:none} .bok-knopka:hover{color:var(--accent)} footer.site{clear:both} } @media (max-width:999px){ .bok{display:none} } /* ── КАРТОЧКА ЛЕНТЫ НА КОМПЬЮТЕРЕ — ОДНА НА ВЕСЬ САЙТ (11.08.2026) ──── Была только у главной, внутри её собственного `