высотой
letterbox-обёртки, а .лид-подпись — обычный поточный ПОСЛЕ .media
внутри него: на contentwidth `` без overflow:hidden эта подпись
просто вылезала за нижний край ролика прямо на текстовый блок под ним.
display:none — тот же приём, что уже прячет .лид-подпись в
.видео-ряд (там подпись тоже дублирует заголовок карточки на узком
экране). Зазор — не меньше var(--поле-m) (было .7em, Виктор явно
попросил не меньше этого токена). */
/* находка kort (прогон по всем 45 листам): .lead на 1440×900 стоял на
−94px от центра тела — единственное отклонение по выравниванию во всей
книге. Причина — без align-items контейнер по умолчанию stretch: h1
(без своего max-width) стретчится во всю ширину тела и потому выглядит
центрированным случайно, а .lead (max-width:46rem у общего .lead,
страница.css) стретчится, упирается в свой max-width и, как обычный
блочный бокс без margin-inline:auto, прижимается к левому краю
контейнера, а не центрируется. align-items:center — тот же приём, что
уже стоит у соседнего .лист__тело.плеер: оба ребёнка центрируются по
ширине сами по себе, а не растягиваются до стены с последующим
left-прижатием у того, что упёрся в потолок. */
.лист__тело.видео-центр{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--поле-m); }
/* §2/§23 решения-дизайн.md: класс переиспользован для 20 листов
видео-выпусков (книга_видео() в собрать.py) — там, кроме внутренней
подписи видео_медиа() (дубль заголовка, гасим её), есть ЕЩЁ один
.лид-подпись — «состав» под заголовком (сиблинг h1, а не потомок
ролика), его прятать нельзя, это и есть нужный текст. Поэтому
селектор специфичнее — только внутри .видео-центр__ролик, не по
всему .лист__тело. */
.лист__тело.видео-центр .видео-центр__ролик .лид-подпись{ display:none; }
.видео-центр__ролик{
flex:1 1 auto; min-height:0; width:100%;
display:flex; align-items:center; justify-content:center;
}
/* Размер .media--отдельно здесь считает JS (вписатьВидеоЦентр() в
странице.js), не чистый CSS: пробовала честную CSS-раскладку из
макета (width:auto;height:auto;max-width:100%;max-height:100%;
aspect-ratio:16/9 — и на flex, и на grid-контейнере) — у пустого
div-обёртки без собственного контента (внутри — ![]()
, в сайзинге бокса не участвует) оба «auto»
одновременно схлопывались в 0×0/крошечный размер, браузеру не от
чего оттолкнуться. Тот же класс задачи, что уже решала JS-разметка
афиши (расположитьАфишу) — тут то же самое для ролика, только с
пересчётом на resize и при заходе на лист (обновитьХад).
Специфичность выше, чем у общего .media--отдельно/.media--отдельно
.media (video-выпуски, свой — vh-based — потолок, не трогаю): без
лишних классов та пара ниже по файлу молча выигрывала каскад. */
.лист__тело.видео-центр .видео-центр__ролик .media--отдельно{
display:block; margin-inline:auto; max-width:100%; max-height:100%;
}
.лист__тело.видео-центр .видео-центр__ролик .media--отдельно > .видео{
display:block; width:100%; height:100%; position:relative;
}
/* находка VRX (замер 1440×900 после video-tekst-pod): .ещё — обычная
ссылка в потоке ПОСЛЕ .media внутри (видео_медиа()
в собрать.py, тот же узел держит и .лид-подпись выше) — у выпусков с
двумя источниками (вк+ютуб) она добавляла высоту сверх letterbox-
рамки той же природы, что уже чинили для подписи: зажат в 100%
высоты ролика, а .ещё в обычном потоке эту высоту не уважает и
вылезает на h1 под роликом (15 из 20 выпусков — у остальных пяти
источник один, кнопки нет вовсе). Не прятать (как подпись) — это
рабочая кнопка «смотреть на ютубе», не дубль текста. Вместо этого —
оверлей поверх кадра, тем же приёмом, что уже даёт .время (правый
нижний угол .media): левый нижний, чтобы не спорить с ней. */
.лист__тело.видео-центр .видео-центр__ролик .ещё{
position:absolute; left:.5em; bottom:.5em; z-index:2; margin-top:0;
padding:.15em .45em; border-radius:2px;
background:rgba(23,21,18,.82); color:var(--карточка);
text-decoration:none;
}
.лист__тело.видео-центр .видео-центр__ролик .ещё:hover{ text-decoration:underline; }
.лист__тело.видео-центр .видео-центр__ролик .media{
width:100%; height:100%; max-width:none; aspect-ratio:auto; margin-inline:0;
}
.лист__тело.видео-центр h1,
.лист__тело.видео-центр .lead,
.лист__тело.видео-центр > .лид-подпись{ flex:0 0 auto; }
/* лист с плеером альбома: сам лист (тело) никогда не прокручивается —
иначе перетаскивание для перелистывания на этом листе перехватывается
как прокрутка тела (см. страница.js, изТела в pointerdown). Вместо
этого прокручивается только список треков внутри — заголовок, пульт и
площадки всегда на виду, лист помещается целиком. */
.лист__тело.плеер{
display:flex; flex-direction:column; align-items:center; text-align:center;
overflow:hidden; gap:.5em;
}
.лист__тело.плеер h1{ flex:0 0 auto; }
/* .lead и .плеер (обложка+пульт, список треков, площадки) — одна ширина,
одно число (44rem, как у .плеер): без этого оба — блоки без width,
каждый сам по себе ужимается до предпочтительной ширины своего
содержимого (алгоритм shrink-to-fit при align-items:center), и на
части экранов текст .lead и плеер расходятся по краю на глаз (Виктор,
04/07: «что с выравниванием? заполнить весь лист шириной»). */
/* пресс-релиз (альбом-описание.json) пришёл от Виктора длинным абзацем —
куда длиннее прежнего плейсхолдера, для которого писался .лист__тело.
плеер{overflow:hidden} (тело листа никогда не прокручивается — иначе
перетаскивание для перелистывания перехватывается как скролл тела, см.
страница.js/изТела). Без ограничения абзац съедал всю высоту, и
.трек-лист (flex:1 1 auto;min-height:0) схлопывался до 0 — список
треков пропадал целиком на 375×812. line-clamp — тот же приём, что уже
держит подписи видео-превью (.видео-превью__название) — текст, не
решение слоя прокрутки: обрезаю ВИЗУАЛЬНО, слова Виктора не меняю,
только не даю абзацу вытеснить список треков. 4 строки — с запасом
хватает и на 375×812, и на 1440×900 (проверено с этим самым
пресс-релизом: список из десяти треков и площадки видны целиком на
обоих экранах). */
.лист__тело.плеер .lead{
flex:0 0 auto; width:100%; max-width:44rem;
overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4;
}
.лист__тело.плеер .плеер{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
h1{
margin:0 0 .5em;
font-size:min(1.5em, 5.2vw); line-height:1.08;
letter-spacing:.03em; text-transform:uppercase;
-webkit-text-stroke:var(--обводка-h) currentColor; paint-order:stroke fill;
overflow-wrap:anywhere;
}
.col{ min-width:0; }
.lead{
font-size:.95em; line-height:1.6; letter-spacing:.04em; text-transform:uppercase;
-webkit-text-stroke:var(--обводка) currentColor; paint-order:stroke fill;
max-width:46rem;
}
.lead p{ margin:0 0 1em; }
.lead p:last-child{ margin-bottom:0; }
.lead h2{ margin:1.1em 0 .35em; font-size:1em; letter-spacing:.1em; text-transform:uppercase; color:var(--тихий); -webkit-text-stroke:0; }
.lead h2:first-child{ margin-top:0; }
.lead ul{ margin:0 0 1em; padding-left:1.2em; }
.lead li{ margin-bottom:.3em; }
.лид-подпись{ margin:.5em 0 0; font-size:.8em; color:var(--тихий); }
/* два отзыва в карточках на открывашке «Устроить сэйшен» — третий заход
(docs/дизайн.md §19, отменяет сетку-ссылок второго захода). Два в ряд
на десктопе, одна колонка на мобильном (карточка с воздухом внутри и
так не сожмётся вдвое без потери приёма). */
.отзывы-сетка{
display:grid; grid-template-columns:repeat(2, 1fr);
gap:var(--поле-s); margin:1em 0 0;
}
/* тот же бордюр/тень/hover, что .люди-инфо__блок — решение 19 прямо
называет этот приём, — но внутреннее устройство другое: текст прижат
к низу карточки, в центре воздух, не обтягивает текст плотно. Карточка
не ссылка (в отличие от прошлой сетки), поэтому нет a.-hover. */
.отзыв-карточка{
display:flex; flex-direction:column; justify-content:flex-end;
min-height:11em; padding:.9em 1em; text-align:left;
background:var(--карточка); border:var(--рамка-s) solid var(--чернила); box-shadow:var(--тень2);
}
.отзыв-карточка blockquote{ margin:0 0 .4em; font-size:.95em; line-height:1.55; letter-spacing:.02em; }
.отзыв-карточка .лид-подпись{ margin:0; }
@media (max-width:560px){
.отзывы-сетка{ grid-template-columns:1fr; }
}
/* Виктор, с айфона (docs/дизайн.md §21): на настоящей высоте мобильного
Safari (~660px видимых, не 812 — панели адресной строки/таб-бара)
.лист__тело этого листа переполнялось на 117px. max-height в паре с
max-width, не одна ширина — иначе то же самое сжатие карточек
применилось бы и на честных высоких экранах (812px и выше), где место
и так есть и теснота не нужна. */
@media (max-width:560px) and (max-height:700px){
.отзыв-карточка{ min-height:4.5em; padding:.55em .75em; }
.отзыв-карточка blockquote{ font-size:.82em; line-height:1.35; }
.отзыв-карточка .лид-подпись{ font-size:.72em; }
.отзывы-сетка{ margin-top:.5em; gap:.35em; }
}
/* ── МЕДИА (обложка/видео) ── */
/* max-height рядом с aspect-ratio и width:100% — в WebKit конфликт: при
упоре в потолок по высоте бокс не пересчитывает ширину под пропорцию
обратно, а остаётся широким — 16:9 расходится (у Виктора в Safari
вышло ~2.7:1, кадр обрезан сверху и снизу). Тот же предельный размер
без конфликта — через max-width, посчитанный из желаемой предельной
высоты и той же пропорции 16:9: тогда высота всегда следует из
aspect-ratio у уже готовой ширины, а не спорит со вторым потолком. */
.media{
position:relative; width:100%; aspect-ratio:16/9;
/* dvh, не vh — см. .сцена выше: тот же откат-потом-перебивание */
max-width:calc(min(46vh, 22rem) * 16 / 9);
max-width:calc(min(46dvh, 22rem) * 16 / 9);
margin-inline:auto;
border:var(--рамка-s) solid var(--чернила);
box-shadow:var(--тень2);
margin-bottom:var(--поле-m);
background:var(--бумага2);
overflow:hidden;
}
.media img, .media iframe{
position:absolute; inset:0; width:100%; height:100%; border:0;
object-fit:cover; display:block;
}
/* заглушка обложки — у видео без ютуба (главное видео-объяснение и т.п.),
не пустой прямоугольник: знак, лёгкий фон и подпись */
.media .кадр-пустой{
position:absolute; inset:0;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5em;
background:
radial-gradient(120% 100% at 50% 0%, rgba(23,21,18,.05), transparent 60%),
var(--бумага2);
}
/* лого теперь широкий логотип (не квадратный знак), масштабируем по
ширине контейнера, а не по высоте строки — иначе размер зависит от
пропорции файла и обрезается краями .media */
/* .media img уже задаёт всем картинкам внутри media position:absolute и
100%×100% — специфичность выше одного класса, без переопределения по
селектору с .media эта картинка тоже растягивалась на весь бокс */
.media .кадр-пустой__знак{ position:static; width:40%; max-width:12rem; height:auto; opacity:.55; }
.кадр-пустой__текст{
font-size:.68em; letter-spacing:.1em; text-transform:uppercase; color:var(--тихий);
}
.media .плей{
position:absolute; inset:0; margin:auto; width:0; height:0; z-index:1;
border-style:solid; border-width:.9em 0 .9em 1.5em;
border-color:transparent transparent transparent var(--карточка);
filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.media .время{
position:absolute; right:.5em; bottom:.5em; z-index:1;
padding:.15em .45em; border-radius:2px;
background:rgba(23,21,18,.82); color:var(--карточка);
font-size:.68em; letter-spacing:.05em;
}
.видео{ display:block; }
.ещё{
position:relative; z-index:1; display:inline-block;
margin-top:.4em; padding:0;
font-size:.78em; letter-spacing:.08em; text-transform:uppercase;
color:var(--тихий); text-decoration:underline; text-underline-offset:3px;
}
.ещё:hover{ color:var(--чернила); }
/* без явной ширины .media--отдельно (обёртка вокруг ссылки-карточки
.видео) в центрированной колонке (align-items:center у .лист__тело.соло
не растягивает детей) сама сжималась под свой контент по ширине —
а контент это подпись-название, у каждого выпуска своей длины. .media
внутри честно берёт width:100% от НЕЁ, так что 100% от разного давало
разный размер ролика на каждом из 20 листов. Ширина листа одна и та
же везде — просто задаём её явно, вместо того чтобы обёртка гадала. */
.media--отдельно{ width:100%; }
.media--отдельно .media{
max-width:calc(min(50vh, 26rem) * 16 / 9);
max-width:calc(min(50dvh, 26rem) * 16 / 9);
}
/* три маленьких видео в ряд */
.видео-ряд{ display:flex; gap:var(--поле-s); width:100%; }
.видео-ряд .media{ flex:1; min-width:0; margin-bottom:0; margin-inline:0; aspect-ratio:16/9; max-width:none; }
.видео-ряд .лид-подпись{ display:none; }
.видео-ряд--фото .media{ aspect-ratio:4/3; }
@media (min-width:900px){
.видео-ряд{ gap:var(--поле-m); }
/* 1 1 (не 0 0) — ширина сжимается, если в листе тесно, и не даёт
горизонтальную прокрутку на узких десктопных окнах */
.видео-ряд .media{ flex:1 1 13rem; min-width:0; }
.видео-ряд .лид-подпись{ display:block; }
}
/* ── превью на открывашке книги «Видео» ──
Раньше открывашка показывала только заголовок и счётчик «20 шт.» —
сетка маленьких карточек даёт заглянуть внутрь книги, не открывая её.
Восемь по выбору (поле в_превью в видео.json, ПРЕВЬЮ_ЛИМИТ в
собрать.py — предохранитель; сама книга остаётся полной, 20 листов),
в порядке json — колонки фиксированные, не auto-fill: делитель
восьми, последний ряд не бывает рваным. */
.видео-превью{
display:grid; grid-template-columns:repeat(4, 1fr);
gap:var(--поле-s);
}
/* Виктор, после выкладки: текст сверху, сетка — у нижней границы тела,
не сразу под текстом. .лист__тело.текст — flex-колонка, margin-top:auto
у последнего элемента забирает всё свободное место сверху себя. */
.лист__тело.текст > .видео-превью{ margin-top:auto; }
.видео-превью__карточка{ display:block; }
.видео-превью__кадр{
aspect-ratio:16/9; margin-bottom:0; transition:box-shadow .15s var(--переход), transform .15s var(--переход);
}
.видео-превью__карточка:hover .видео-превью__кадр{ box-shadow:var(--тень); transform:translate(-1px,-1px); }
.видео-превью__название{
margin-top:.35em; font-size:.72em; line-height:1.3; color:var(--тихий);
overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.видео-превью__карточка:hover .видео-превью__название{ color:var(--чернила); }
@media (max-width:560px){
/* Виктор, §22 решения-дизайн.md, уточнено §23 («третий заход» —
шесть, не четыре): на мобильном не восемь мелких, а шесть крупных —
первые шесть из в_превью (тот же порядок json), 2×3, лист
по-прежнему в экран (§21 — состав листа на мобильном может
отличаться от десктопного, это тот случай). Карточки 7–8 скрыты, не
удалены — на десктоп это не влияет, а не восстанавливать их для
мобильного не пришлось: разметка одна на оба экрана. */
.видео-превью{ grid-template-columns:repeat(2, 1fr); gap:var(--поле-m); }
.видео-превью__карточка:nth-child(n+7){ display:none; }
.видео-превью__название{ font-size:.82em; margin-top:.5em; }
/* §25 решения-дизайн.md: «ленту превью прижать к нижнему краю листа,
и на мобильном тоже» — отменяет мобильный override отсюда (был
margin-top:1em, обычный поток сразу под текстом): тогда лист был
заметно ниже (82vh на глаз), и margin-top:auto с шестью крупными
карточками оставлял бы большой разрыв. После list-vyshe/§23-25 лист
занимает максимум высоты экрана — то же margin-top:auto, что на
десктопе (.лист__тело.текст > .видео-превью выше), работает и тут:
сетка внизу листа на обоих экранах, одно правило без исключения. */
}
/* ── КНОПКИ (как odrodok: .enter) ── */
.enter{
display:inline-flex; align-items:center; gap:.5em;
padding:.45em .9em;
background:var(--карточка); color:var(--чернила);
border:var(--рамка-s) solid var(--чернила);
box-shadow:var(--тень2);
font-size:1em; letter-spacing:.14em; text-transform:uppercase;
-webkit-text-stroke:var(--обводка) currentColor; paint-order:stroke fill;
transition:background .15s var(--переход), box-shadow .15s var(--переход), transform .15s var(--переход);
}
.enter:hover{ background:var(--охра); box-shadow:var(--тень); transform:translate(-1px,-1px); }
.enter:active{ box-shadow:none; transform:translate(2px,2px); }
/* кнопка занята (сейчас так грузится касса qtickets, ~170 КБ чужого
скрипта): видно, что нажатие приняли, и второе нажатие не уходит */
.enter[aria-busy="true"]{ opacity:.55; pointer-events:none; cursor:progress; }
/* главное действие сайта — купить билет; единственное применение
--кирпич как «горячего» акцента, не раскраски книг */
.enter.главная{ background:var(--кирпич); color:var(--карточка); border-color:var(--кирпич); }
.enter.главная:hover{ background:var(--чернила); }
/* фокус с клавиатуры — везде одинаково: кнопки, ссылки, поля формы,
точки пагинации. :focus-visible, не :focus — рамка не мешает клику
мышью, только табу и стрелкам */
:focus-visible{ outline:2px solid var(--чернила); outline-offset:2px; }
/* ── ПОДВАЛ ЛИСТА (тема слева, действия справа) ── */
.лист__подвал{
flex:0 0 auto;
display:flex; align-items:center; justify-content:space-between; gap:var(--поле-m);
/* нижнее поле было нулевым, пока под подвалом шла мелкая строка
соцсетей: без неё подвал упирался бы в край листа */
padding:var(--поле-s) var(--поле-l);
border-top:var(--рамка-s) solid var(--линия);
font-size:.72em; letter-spacing:.14em; text-transform:uppercase; color:var(--тихий);
}
.лист__подвал .acts{ display:flex; align-items:center; gap:var(--поле-s); flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; }
/* ── лист «здарова, музыканты»: плеер альбома ──
Всё выравнивание внутри плеера левое: тело листа у этого листа «соло»
(центрирует блок и текст), но список из десяти строк по центру не
читается. Ширина ограничена — на десктопе лист шире 60rem, а строка
трека длиной во весь лист распадается на «номер … далеко … время». */
.плеер{ width:100%; max-width:44rem; margin-inline:auto; text-align:left; }
/* пульт: обложка слева, управление справа. На телефоне колонка — но
обложка там ужимается до 7rem, чтобы список влез без прокрутки.
§18 дизайн.md «компактнее»: шаг отступов вниз (поле-m → поле-s) и
обложка на четверть меньше по обеим границам clamp — пульт занимает
меньше высоты, под текст об альбоме и список остаётся больше места.
Блок центрируется по горизонтали в рамках .плеер (как заголовок и лид
над ним), текст внутри — «сейчас играет»/время — остаётся у своего
края, не по центру (см. margin-inline:auto ниже, не text-align). */
.плеер__пульт{
display:flex; gap:var(--поле-s); align-items:stretch; margin-bottom:.25em;
width:fit-content; max-width:100%; margin-inline:auto;
}
/* §24 решения-дизайн.md: обложка — строго квадрат на всех размерах.
align-items:stretch у .плеер__пульт (нужен «правой» колонке — она
должна тянуться на всю высоту пульта) заодно растягивал и обложку по
высоте вслед за более высоким соседом; width — фиксированный clamp, а
aspect-ratio:1 при таком конфликте (ширина задана, высота растянута)
не может удержать квадрат — object-fit:cover просто обрезает уже
не-квадратную рамку. align-self:flex-start возвращает обложке
собственную высоту, aspect-ratio держит квадрат чисто по ширине. */
.плеер__обложка{
flex:0 0 auto; align-self:flex-start;
width:clamp(5rem, 18vw, 8rem); height:auto; aspect-ratio:1;
object-fit:cover;
border:var(--рамка-s) solid var(--чернила); box-shadow:var(--тень2);
background:var(--бумага2);
}
.плеер__правая{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:.5em; }
.плеер__сейчас{
margin:0; font-size:.8em; letter-spacing:.1em; text-transform:uppercase;
color:var(--тихий); overflow-wrap:anywhere;
}
.плеер__сейчас b{ font-weight:500; color:var(--чернила); }
/* полоса — кнопка во всю ширину: и нажатие, и протяжка считаются от её
границ, а листалка кнопки не перетаскивает */
.плеер__полоса{
display:block; width:100%; height:.9em; padding:0;
border:var(--рамка-s) solid var(--чернила); background:var(--бумага2);
box-shadow:var(--тень2); cursor:pointer; touch-action:none;
}
.плеер__прошло{ display:block; height:100%; width:0; background:var(--чернила); }
.плеер__время{
display:flex; justify-content:space-between; margin:0;
font-size:.72em; letter-spacing:.1em; color:var(--тихий);
font-variant-numeric:tabular-nums;
}
.плеер__кнопки{ display:flex; gap:var(--поле-s); }
.плеер__кн{
display:grid; place-items:center; width:2.4em; height:2.4em; padding:0;
border:var(--рамка-s) solid var(--чернила); background:var(--карточка);
box-shadow:var(--тень2);
transition:background .15s var(--переход), box-shadow .15s var(--переход), transform .15s var(--переход);
}
.плеер__кн:hover{ background:var(--охра); box-shadow:var(--тень); transform:translate(-1px,-1px); }
.плеер__кн:active{ box-shadow:none; transform:translate(2px,2px); }
.плеер__кн--главная{ width:3em; height:3em; }
.значок{ width:1em; height:1em; fill:currentColor; display:block; }
/* пауза показывается вместо треугольника, только пока звук идёт */
.значок--пауза{ display:none; }
/* иконки площадок (инлайн-SVG из public/иконки/*.svg, значок_площадки() в
собрать.py) — та же система currentColor, что и .значок выше, крупнее:
это самостоятельная кнопка (.плеер__кн — общий класс с иконками на
«на связи», §20/§24, не копия стилей), а не строка мелких кнопок пульта.
Единственное объявление размера на весь сайт — раньше было два
(здесь и у .площадки ниже), второе тем же селектором молча выигрывало
каскад по порядку файла, первое было мёртвым кодом. */
.значок-площадки{ width:1.3em; height:1.3em; display:block; }
.плеер[data-играет] .плеер__кн--главная .значок--играть{ display:none; }
.плеер[data-играет] .плеер__кн--главная .значок--пауза{ display:block; }
/* §25 решения-дизайн.md: список и площадки разделяла пустая треть листа
— flex:1 1 auto растягивал список на весь остаток .плеер (flex-
колонка), а десять строк не заполняли эту высоту (лист теперь заметно
выше — list-vyshe/§23), пустое место оставалось МЕЖДУ последней
строкой и площадками. flex-grow:0 — список берёт свою настоящую
высоту содержимого, площадки идут сразу следом; flex-shrink:1 и
min-height:0 остаются — на низком экране, где десять строк не влезают
целиком, список всё ещё сжимается и честно скроллится сам (штатное
исключение §21), просто больше не тянется ВВЕРХ сверх своего
содержимого, когда места и так достаточно. */
.трек-лист{ list-style:none; margin:0; padding:0; flex:0 1 auto; min-height:0; overflow-y:auto; scrollbar-width:thin; }
.трек{ border-bottom:1px solid var(--линия); }
.трек:first-child{ border-top:1px solid var(--линия); }
/* вся строка — кнопка: попасть в неё пальцем проще, чем в название, и
листалка не принимает нажатие по списку за перетаскивание листа */
.трек__кнопка{
/* §18 дизайн.md: строка трека «не влезает» на мобильном — разбор
показал, что перенос имени работает (нет nowrap/ellipsis), но
align-items:baseline выравнивал только первую строку многострочного
имени по номеру/времени, и на глаз это читалось как обрезку.
flex-start — номер и время у верхнего края строки, а не случайной
базовой линии. */
display:flex; align-items:flex-start; gap:.6em; width:100%;
/* левое поле шире правого — в нём стоит метка играющего трека, и от неё
строки не прыгают: место занято всегда */
padding:.28em .3em .28em 1.2em; text-align:left; font-size:.85em; color:var(--тихий);
}
.трек__кнопка:hover{ background:var(--бумага2); color:var(--чернила); }
.трек__номер{ flex:0 0 auto; font-variant-numeric:tabular-nums; }
.трек__имя{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.трек__кто{ text-transform:uppercase; letter-spacing:.06em; }
.трек__кто::after{ content:" — "; }
.трек__время{ flex:0 0 auto; font-variant-numeric:tabular-nums; }
/* играющий трек виден без цвета — жирным и меткой слева, чтобы читалось
и в чёрно-белой печати, и при дальтонизме */
.трек--играет .трек__кнопка{ color:var(--чернила); font-weight:500; background:var(--бумага2); }
.трек--играет .трек__номер{ position:relative; }
.трек--играет .трек__номер::before{
content:"▶"; position:absolute; left:-1em; top:0; font-size:.7em;
}
/* площадки — под списком, а не в подвале: четыре кнопки в подвал не лезут,
а здесь это строчка иконок вроде контактов (§18: «вместо надписей
площадок — иконки», подпись остаётся в aria-label, не исчезает совсем).
Строка центрируется блоком, как пульт выше — justify-content вместо
margin-inline:auto: она и так flex, а gap уже держит промежутки.
§24: сами кнопки — класс .плеер__кн (см. собрать.py), тот же квадрат
с рамкой/тенью/hover, что на «на связи» — своих стилей у .площадки a
больше нет, всё несёт общий класс.
Находка VRX: кнопки того же роста, что .плеер__кн (2.4em), заметно
выше прежних мелких иконок — на 1440×900 .трек-лист (flex:1,
min-height:0) недосчитался высоты и десятая строка обрезалась
(241/233, 8px). Не трогаю сами кнопки (Виктор просил «того же
размера», что на «на связи» — общий класс) — отступ сверху сузила
вместе с margin-bottom пульта ниже, вдвоём хватает вернуть трек-лист
к точному фиту. */
.площадки{
list-style:none; margin:.25em 0 0; padding:0;
display:flex; flex-wrap:wrap; justify-content:center; gap:.7em; color:var(--тихий);
}
@media (max-width:560px){
/* §23 решения-дизайн.md: обложка и пульт — в две колонки даже на
мобильном (не в колонку друг под другом, как раньше), чтобы
выиграть высоту для списка треков. Обложка мельче, чем на
десктопе/раньше на мобильном (была min(9rem,45vw) в колонку) —
здесь она в строке рядом с управлением, а не над ним.
§24: width:100% убран — Виктор прямо попросил пульт не растягивать
на всю ширину листа шире обложки; fit-content (общее правило выше)
держит его собственной ширины и на мобильном тоже. */
.плеер__обложка{ width:min(5.5rem, 26vw); }
/* §18: «компактнее», раз всё равно уменьшаем — на ступень мельче кегль
строки трека, чтобы двухстрочных имён на мобильном стало меньше (не
чтобы перенос совсем исчез — это было бы обратным решению) */
.трек__кнопка{ font-size:.78em; }
}
/* ── форма заявки (§6 дизайн.md) ──
Поля в теле листа (не в подвале — подвал везде на сайте держит только
тему слева и действие справа, для textarea там места нет). Не