/* =====================================================================
БУРГЕР — РАЗДЕЛЫ НА ТЕЛЕФОНЕ
На развороте кнопки нет вовсе: там шапка со всеми разделами стоит
строкой. Поэтому по умолчанию, вне медиазапроса, и кнопка, и панель
спрятаны — правило ниже включает их только на узком экране.
Кнопка — красный квадрат в углу, продолжение угловой плашки первого
экрана; три белых штриха на ней той же толщины, что линейки листа.
РАЗМЕРЫ В ОБЫЧНЫХ ПИКСЕЛЯХ, НЕ В --u. Мерка --u переводит координаты
макета 390 в координаты листа 1440 и годится только внутри сцены, у
которой стоит масштаб. Бургер лежит на уровне страницы и живёт в
экранных пикселях: с --u он вышел бы втрое больше.
Панель — та же бумага, набор моношириной прописными, как везде.
===================================================================== */
.burger { display: none; }
.burger-menu { display: none; }
@media (max-width: 760px) {
.burger {
display: grid;
position: fixed;
right: 14px;
top: 14px;
z-index: 80; /* выше линии (6) и панели (70) */
width: 46px;
height: 46px;
padding: 13px;
align-content: space-between;
border: 0;
background: var(--red);
cursor: pointer;
}
/* Кнопка уезжает вверх, пока читают вниз, и возвращается, стоит
повести страницу назад. Без этого она висит в правом верхнем углу
постоянно, и всё, что выключено по правому краю, ныряет под неё:
заметнее всего на красных вердиктах блока 06 — строка проходит мимо
верха экрана и на секунду прячется за квадратом. */
/* Правило пряток при прокрутке снято вместе со скриптом: кнопка видна
всегда (просьба Оксаны 06.09). */
.burger span {
display: block;
height: 2px;
background: var(--on-red, #fff);
}
/* Открытая кнопка — крест: те же три штриха, два скрещены, средний
убран. Отдельного крестика нет намеренно: закрывает то же место,
куда человек уже нажал. */
html[data-menu] .burger span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
html[data-menu] .burger span:nth-child(2) { opacity: 0; }
html[data-menu] .burger span:nth-child(3) {
/* −9 ПИКСЕЛЕЙ, А НЕ −9 ЕДИНИЦ ЛИСТА. Здесь стояло calc(-9 * var(--u)),
то есть 33 пикселя: кнопка живёт на уровне страницы, а не внутри
масштабированного листа, и единицы листа тут ни при чём. Нижний
штрих улетал втрое дальше верхнего, и вместо креста выходила
сломанная закорючка. Полоски стоят через 9 — на столько и сводим. */
transform: translateY(-9px) rotate(-45deg);
}
.burger-menu[hidden] { display: none; }
.burger-menu {
display: flex;
position: fixed;
inset: 0;
z-index: 70;
flex-direction: column;
justify-content: center;
gap: 18px;
padding: 90px 26px 40px;
background: var(--bg);
}
.burger-menu__item {
font-family: var(--font-mono);
font-size: 30px;
line-height: 38px;
letter-spacing: var(--mono-ls);
text-transform: uppercase;
color: var(--ink);
text-decoration: none;
}
/* Телефон под кнопкой: позвонить — второе действие после «связаться»,
и искать его в подвале, пролистав весь лист, незачем. */
.burger-menu__tel {
margin-top: 18px;
color: var(--ink);
font-size: 17px;
letter-spacing: 0.06em;
text-decoration: none;
border-bottom: 1px solid var(--red);
padding-bottom: 2px;
align-self: flex-start;
}
.burger-menu__cta {
margin-top: 16px;
padding: 14px 20px;
align-self: flex-start;
background: var(--red);
color: var(--on-red, #fff);
font-family: var(--font-mono);
font-size: 18px;
line-height: 24px;
letter-spacing: var(--mono-ls);
text-transform: uppercase;
text-decoration: none;
}
/* Пока меню открыто, лист под ним не едет. */
html[data-menu], html[data-menu] body { overflow: hidden; }
}
/* =====================================================================
МОБИЛЬНАЯ РАСКЛАДКА · «УЗКАЯ БУМАГА»
┌─ ЧТО ЗДЕСЬ ПРОИЗОШЛО 06.09 ────────────────────────────────────────┐
│ Прежняя мобильная раскладка распускала холст в поток: position: │
│ static, порядок задавал flex-order, размеры — содержимое. Приём │
│ честный и дешёвый, но лист переставал быть плакатом: качества │
│ выстраивались ровным столбиком, коллаж — стопкой, а кнопка │
│ «связаться» оказывалась восьмой в очереди, ПОД портретом. │
│ │
│ Оксана утвердила другой приём (макеты в preview-mobile/): у │
│ телефона СВОЙ макет шириной 390 со своими координатами. То же │
│ устройство, что на большом экране, только числа другие. │
└─────────────────────────────────────────────────────────────────────┘
КАК 390 ЖИВЁТ ВНУТРИ САЙТА, НАРИСОВАННОГО В 1440.
Превью считали свой масштаб сами: --k = ширина окна / 390. На сайте
--k ставит js/main.js и делит на 1440; трогать его нельзя — на это
число завязаны линия, заставка и интерактив, и вычислить «ширина/390»
средствами CSS нельзя (scale() требует ЧИСЛО, а calc даёт длину).
Поэтому телефонные координаты переводятся в координаты 1440 умножением
на одно и то же число:
--u = 1440 / 390 = 3.6923… ОДИН ТЕЛЕФОННЫЙ ПИКСЕЛЬ
и каждая координата пишется как calc(20 * var(--u)) — то есть «20 в
макете 390». Числа в этом файле читаются один в один с preview-mobile,
а сцена по-прежнему масштабируется общим --k. Проверка: при окне 430
координата 20 даёт 20 * 3.6923 * (430/1440) = 22.05 = 20 * 430/390.
ПРО !important. Их здесь много, и это осознанно. Координаты блоков
заданы правилами вида `.stage--hero .tag { left: 613px }`, а
js/fit-scene.js вдобавок ставит высоты ИНЛАЙНОМ — перебить их можно
только важностью. Правило простое: !important живёт ТОЛЬКО в этом
файле и только внутри медиазапроса.
ПРО ГОЛЫЕ СЕЛЕКТОРЫ. Их здесь нет. За сутки 05–06.09 на голых классах
поймали пять поломок подряд (.shot, .nav, .note, .route, .disclaimer):
класс занят на двух листах, и правило одного блока било по другому.
Каждое правило ниже начинается со своей сцены. Исключение — только
структурные .scene, .stage, .thread-layer и .thread-under: это не
классы блоков, а устройство листа, общее и на большом экране.
Проверено скриптом: из 247 правил файла ни одно не начинается с
класса, принадлежащего блоку.
ПОРОГ 760px — тот же, что был, и тот же, что в preview-mobile.
===================================================================== */
@media (max-width: 760px) {
/* --- 0. ЕДИНИЦА ТЕЛЕФОННОГО МАКЕТА --------------------------------- */
:root { --u: calc(1440px / 390); }
/* --- 1. ЛИСТ ОСТАЁТСЯ ХОЛСТОМ, ТОЛЬКО УЗКИМ ------------------------
Сцена и сцена внутри не трогаются вовсе: ширина по-прежнему 1440,
масштаб по-прежнему --k. Меняются только ВЫСОТЫ секций — они у
телефона свои, и заданы там же, где блок. ------------------------- */
/* Подложка листа: в макете 390 она отступает от кромки на 18
ТЕЛЕФОННЫХ пикселей, а не на 18 макетных — иначе поле листа
сжимается вчетверо и кромка пропадает. */
.stage {
background: linear-gradient(var(--bg), var(--bg))
calc(18 * var(--u)) calc(18 * var(--u))
/ calc(100% - 36 * var(--u)) calc(100% - 36 * var(--u))
no-repeat !important;
}
/* --- 2. ЧЕГО НА ТЕЛЕФОНЕ НЕТ ---------------------------------------
Копии линии внутри блоков нарисованы под координаты 1440 и на узком
листе перечёркивают кадры наискось. Мобильная линия одна — верхним
слоем, см. хвост файла. --------------------------------------------- */
.thread-under { display: none !important; }
/* --- 3. СКВОЗНАЯ ЛИНИЯ ---------------------------------------------
Сам маршрут подменяет js/thread.js (см. MOBILE_D): он взят из
макетов preview-mobile и переведён в координаты 1440 той же меркой
--u. Здесь остаётся только толщина: в макете 390 штрих 2, значит в
координатах 1440 он 2 * --u — иначе на телефоне линия становится
волоском в полпикселя.
Кончик маркера снят: в мобильных макетах его нет, а на узкой
полосе он читается кляксой, а не пером. */
.thread-layer .thread__path { stroke-width: calc(2 * var(--u)) !important; }
.thread-layer .thread__nib { display: none !important; }
}
/* =====================================================================
01 · ПЕРВЫЙ ЭКРАН (превью: scene--strip 844 + scene--next 700)
В превью первый экран разложен на ДВЕ секции: полоса-афиша 844 и
«что под ней» 700. На сайте секция одна, и делить её нельзя — правка
разметки запрещена. Поэтому обе половины лежат в одной сцене высотой
844 + 700 = 1544, а координаты второй половины сдвинуты на 844.
В комментариях у таких строк стоит исходное число превью.
ЧТО ЭТО ЗА ЛИСТ. Портрет во весь рост уходит за правую кромку, имя от
руки поперёк, качества лесенкой по левому полю — и красная линия
проходит ровно по их точкам. Кнопка «связаться» стоит на первом
экране, а не восьмой в очереди, как было в потоке.
===================================================================== */
@media (max-width: 760px) {
/* ВЫСОТА ЭКРАНА ПО СОДЕРЖИМОМУ. Было 1544, а сноска кончается на 1167:
внизу оставалось 377 пустой бумаги. Укорочено до 1210 — сорок на
нижнее поле. Всё, что ниже, поднялось на 334, и мобильный маршрут
линии сдвинут на ту же величину: он задан числами и сам за блоками
не следует. Пустая часть маршрута внутри экрана сжата
пропорционально, содержимое не тронуто. */
.scene--hero {
aspect-ratio: 390 / 1210 !important;
min-height: calc(100vw * 1210 / 390) !important;
}
.stage--hero { height: calc(1210 * var(--u)) !important; }
/* Фактуры. Бумага во весь лист (в превью она стоит от 0, без отступа
18 — иначе на 390 кромка съедает половину поля), зерно с отступом 6:
18 на 1440 это 1,25 % ширины, та же доля от 390 даёт 5, округлено
до 6. Оставить 18 значило бы обвести телефон белой рамкой. */
.stage--hero .paper {
left: 0 !important; top: 0 !important;
width: calc(390 * var(--u)) !important;
height: 100% !important;
}
.stage--hero .grain {
left: calc(6 * var(--u)) !important; top: calc(6 * var(--u)) !important;
width: calc(378 * var(--u)) !important;
height: calc(100% - 12 * var(--u)) !important;
z-index: 7;
}
/* Меню на телефоне снято, как и в превью: пять ссылок в строку на 390
становятся по 9px. Вернуть, когда решим, чем их заменить. */
.stage--hero .nav-row { display: none !important; }
/* Цветной дубль коллажа проявляется под курсором — на телефоне
курсора нет вовсе. */
.stage--hero .pic--color { display: none !important; }
/* --- ПОЛОСА-АФИША (0…844) ----------------------------------------- */
/* Красный угол: в макете 390 он 40×88, а не 60×113. */
.stage--hero .bar--corner {
left: 0 !important; top: 0 !important;
width: calc(40 * var(--u)) !important;
height: calc(88 * var(--u)) !important;
z-index: 4;
}
/* Портрет-вырезка. Кадр 589 шире листа 390 намеренно: локоть уходит
за правую кромку, ноги режет нижняя. 145 + 699 = 844 — фигура
доходит до кромки полосы и стоит на ней. Пропорция исходника
685×813 не тронута (589/699 = 0.8426), поэтому object-fit можно
вернуть к честному fill. */
.stage--hero .pic--portrait {
left: calc(-28 * var(--u)) !important;
top: calc(95 * var(--u)) !important;
width: calc(589 * var(--u)) !important;
height: calc(699 * var(--u)) !important;
object-fit: fill !important;
z-index: 1;
}
/* Логотип выключен ВЛЕВО, а не по центру коробки 201: у левого поля
две центрованные строки разной длины читаются как случайный сдвиг. */
.stage--hero .logo {
left: calc(56 * var(--u)) !important;
top: calc(22 * var(--u)) !important;
width: auto !important;
font-size: calc(20 * var(--u)) !important;
line-height: calc(26 * var(--u)) !important;
text-align: left !important;
z-index: 4;
}
/* Рукопись. Повороты взяты с разворота без изменений: наклон руки не
зависит от ширины листа. Пазухи (padding) с разворота сняты — там
они отмерены под кегль 222, здесь бы сдвинули строку на треть. */
.stage--hero .hand--name,
.stage--hero .hand--surname {
padding: 0 !important;
line-height: normal !important;
z-index: 5;
}
/* «Валентин» стоит НАД «Веркиным» справа, как на развороте, а не
отдельной строкой сверху. Отступ взят с разворота: там имя правее
фамилии на 314 из 1440, здесь на 85 из 390 — та же доля. */
.stage--hero .hand--name {
left: calc(160 * var(--u)) !important;
top: calc(486 * var(--u)) !important;
/* Белым: на телефоне имя легло на тёмный пиджак, чернильное там
пропадало. На развороте оно на светлой бумаге и остаётся чёрным. */
color: var(--bg) !important;
font-size: calc(39 * var(--u)) !important; /* +20%, потом −5% */
transform: rotate(-7.92deg) !important;
}
/* ПОДПИСЬ И СПИСОК ПОМЕНЯНЫ МЕСТАМИ 06.09 по решению Оксаны: на
телефоне сначала идут качества, под ними имя. Список поднят на 156,
подпись опущена на 245 — промежуток между ними и расстояние до
кнопки остались прежними. Точки списка сидят на сквозной линии,
поэтому её мобильный маршрут пересчитан следом (js/thread.js). */
.stage--hero .hand--surname {
left: calc(20 * var(--u)) !important;
top: calc(493 * var(--u)) !important;
font-size: calc(96 * var(--u)) !important; /* +20%, потом −5% */
transform: rotate(-7.41deg) !important;
}
/* Качества лесенкой. Разброс по горизонтали сохранён (на развороте он
254 из 1440, здесь 64 из 390 — та же доля), промежутки по вертикали
НЕРОВНЫЕ намеренно: ровный шаг превращает шесть слов в прейскурант.
Вынос точки 20 вместо 12: точка садится на сквозную линию, а линия
идёт по левому полю. */
.stage--hero .tag {
--dot-gap: calc(20 * var(--u)) !important;
--dot-rise: calc(7 * var(--u)) !important;
--dot-size: calc(5 * var(--u)) !important;
font-size: calc(16 * var(--u)) !important;
line-height: calc(21 * var(--u)) !important;
z-index: 3 !important;
}
.stage--hero .tag--vedushiy { left: calc(48 * var(--u)) !important; top: calc(220 * var(--u)) !important; }
.stage--hero .tag--sobytiy { left: calc(34 * var(--u)) !important; top: calc(254 * var(--u)) !important; }
.stage--hero .tag--tantsuyu { left: calc(62 * var(--u)) !important; top: calc(296 * var(--u)) !important; }
.stage--hero .tag--poyu { left: calc(98 * var(--u)) !important; top: calc(334 * var(--u)) !important; }
.stage--hero .tag--raduyus { left: calc(54 * var(--u)) !important; top: calc(370 * var(--u)) !important; }
.stage--hero .tag--zhivu { left: calc(84 * var(--u)) !important; top: calc(412 * var(--u)) !important; }
/* Кнопка. Габарит 168×54, а не пересчитанные 194×64: пропорция дала бы
52×17, в такое пальцем не попасть. Прижата к левой кромке — она
продолжает красный угол и полосу, а не висит в середине. */
/* Кнопка во всю ширину листа — решение Оксаны 06.09. На телефоне это
единственное действие экрана, и попасть в него пальцем должно быть
невозможно мимо. */
.stage--hero .cta {
left: calc(30 * var(--u)) !important;
top: calc(660 * var(--u)) !important; /* опущена на 120 */
min-width: 0 !important;
width: calc(330 * var(--u)) !important; /* поля по 30: 30 + 330 + 30 = 390 */
height: calc(54 * var(--u)) !important;
padding: 0 calc(16 * var(--u)) !important;
justify-content: center !important; /* надпись по середине кнопки */
text-align: center !important;
font-size: calc(16 * var(--u)) !important;
line-height: calc(21 * var(--u)) !important;
z-index: 5;
}
/* Гео. В превью это ТРИ отдельных строки со своими втяжками
(40 / 56 / 34) — на сайте это один
с одним текстом, а править
разметку нельзя. Поэтому строка отпущена в поток и ломается по
ширине на те же три строки с тем же шагом 36; лесенка втяжек
потеряна. Вопрос к Оксане: делить ли
на три. */
.stage--hero .geo {
left: calc(34 * var(--u)) !important;
top: calc(845 * var(--u)) !important; /* опущено на 185 по разметке Оксаны */
width: calc(118 * var(--u)) !important;
font-size: calc(16 * var(--u)) !important;
line-height: calc(26 * var(--u)) !important; /* было 36: три строки стояли врозь */
white-space: normal !important;
z-index: 3;
}
/* НИЖНИХ КРАСНЫХ ПОЛОС НА ТЕЛЕФОНЕ НЕТ — решение Оксаны 06.09.
В макетах они были, но на узком листе читаются плинтусом и режут
столбец на куски. На развороте полосы остаются: там они закрывают
блок по ширине разворота и работают. Правила сняты целиком, а не
спрятаны: прятать пришлось бы в двух местах — и псевдоэлементы, и
переопределения полос первого экрана. */
.stage--hero .bar--bottom,
.stage--hero .bar--gradient,
.stage--hero .bar--bottom2 { display: none !important; }
/* --- ЧТО ПОД АФИШЕЙ (844…1544) -------------------------------------
Дальше все числа = число превью + 844. -------------------------- */
/* Коллаж внахлёст, а не стопкой: на развороте между кадрами просвет
110, на 390 это треть экрана пустой бумаги, и пара распадается. */
/* Обе пары сдвинуты вправо на 47 и вверх на 79 по разметке Оксаны
06.09: коллаж стоял слишком низко и жался к левой кромке. */
.stage--hero .pic--collage-top {
left: calc(158 * var(--u)) !important; /* 158 + 232 = 390: впритык к правой кромке */
top: calc(790 * var(--u)) !important;
width: calc(232 * var(--u)) !important;
height: calc(178 * var(--u)) !important;
z-index: 2;
}
.stage--hero .pic--collage-bottom {
left: calc(106 * var(--u)) !important; /* сдвинут на те же 15, нахлёст сохранён */
top: calc(944 * var(--u)) !important;
width: calc(232 * var(--u)) !important;
height: calc(160 * var(--u)) !important;
z-index: 3;
}
/* Соцсети столбиком со сдвигом — тем же приёмом, что качества. Кегль
подписной, но площадка каждой ссылки 44 в высоту: попасть пальцем
в две буквы высотой 16 нельзя. */
.stage--hero .soc--tg,
.stage--hero .soc--vk,
.stage--hero .soc--inst {
display: inline-flex !important;
align-items: center !important;
height: calc(44 * var(--u)) !important;
font-size: calc(16 * var(--u)) !important;
line-height: calc(21 * var(--u)) !important;
z-index: 3;
}
/* ОДНОЙ СТРОКОЙ И ПОД КОЛЛАЖЕМ — решение Оксаны 06.09. Стояли
лесенкой в три строки ниже сноски; теперь идут в ряд сразу под
нижним кадром, а сноска встаёт под ними. Площадка под палец (44)
сохранена: она выше набора и в ряду не мешает. */
.stage--hero .soc--tg { left: calc(40 * var(--u)) !important; top: calc(1110 * var(--u)) !important; }
.stage--hero .soc--vk { left: calc(100 * var(--u)) !important; top: calc(1110 * var(--u)) !important; }
.stage--hero .soc--inst { left: calc(160 * var(--u)) !important; top: calc(1110 * var(--u)) !important; }
/* Сноска про Meta — единственный кегль, отступающий от 16, и вот
почему: в макете она 10, на 390 это уже не мелкий шрифт, а серая
полоска, а требование закона — чтобы её МОЖНО было прочесть.
Строка отпущена в поток: в одну она на 390 не влезает.
ПРОЗРАЧНОСТЬ 0.62 СНЯТА 06.09. Она стояла только здесь, только на
телефоне: на развороте сноска чёрная в полную силу. Вместе с кеглем
11 она давала серый #616161 по светлой бумаге — около 4,3:1, то
есть ровно то, от чего абзац выше и защищается. Кегль подняли ради
читаемости и тут же погасили цветом; убрано одно из двух. */
.stage--hero .disclaimer {
left: calc(40 * var(--u)) !important;
right: auto !important;
top: calc(1147 * var(--u)) !important; /* поднята на 50 по просьбе Оксаны */
width: calc(320 * var(--u)) !important;
font-size: calc(11 * var(--u)) !important;
line-height: calc(15 * var(--u)) !important;
white-space: normal !important;
text-align: left !important;
z-index: 3;
}
}
/* =====================================================================
02 · СОБЫТИЯ (превью: scene--ev 800)
Разворот сложен вдвое: наверху число, под ним полоса из трёх кадров,
внизу список категорий. Порядок чтения тот же, что на большом экране,
но в один столбец.
ЧЕГО НА ТЕЛЕФОНЕ НЕТ — и это решение макета, а не пропуск: большой
кадр зала (.pic--d), слот ролика, «я в работе», штамп «2023» и
подпись под ним, обе каракули-выноски и нижние красные полосы. В
утверждённых макетах их нет ни на одном экране; на 390 они
превращали блок в ленту из восьми предметов подряд.
ВОПРОС К ОКСАНЕ: «веду с 2023 года» — единственная дата на сайте, и
на телефоне её теперь не видно нигде.
ЧИНИТЬ НЕ ЗДЕСЬ: ЛИНИЯ ПРОМАХИВАЕТСЯ МИМО ТОЧЕК КАТЕГОРИЙ.
Ради этого блок 02 и ложится на полосу: четыре красные точки должны
сидеть НА сквозной линии, как шесть качеств первого экрана. На первом
экране это выполняется точно — узлы MOBILE_D совпадают с точками
до пикселя. Здесь линия опаздывает: её размах приходит на ~20
телефонных пикселей НИЖЕ каждой точки, и на y точек она стоит на
−10 / −20 / +27 / −18 от них. Причина в js/thread.js: у четырёх узлов
этого блока (и у крюка под «веду») координата y на 20 больше нужной —
8113.85 / 8246.77 / 8372.31 / 8512.62 вместо ≈8040 / 8172 / 8298 /
8438 и 7993.85 вместо ≈7920. Из mobile.css это не лечится: подвинуть
вниз пришлось бы сами категории, а их шаг до «веду» и «кадров»
отмерен и держит смысл. Правится одной строкой в MOBILE_D.
===================================================================== */
@media (max-width: 760px) {
.scene--events {
aspect-ratio: 390 / 635 !important;
min-height: calc(100vw * 635 / 390) !important;
}
/* Блок опущен на 22 (translateY), поэтому он на 22 короче сцены —
иначе низ бумаги уходил под следующую секцию и по нижнему краю
пропадала серая кромка, которая есть у всех остальных блоков. */
.stage--events { height: calc(613 * var(--u)) !important; }
/* БУМАГА И ЗЕРНО — ВО ВЕСЬ БЛОК, А НЕ ПО ЧИСЛУ. Высоты блоков на
телефоне мы правим часто, а фактура стояла жёсткими числами и
оставалась то длиннее блока, то короче: у события бумага торчала на
187 ниже кромки. Проценты держат её ровно по блоку при любой правке. */
.stage--events .paper {
left: 0 !important; top: 0 !important;
width: calc(390 * var(--u)) !important;
height: 100% !important;
}
.stage--events .grain {
left: calc(6 * var(--u)) !important; top: calc(6 * var(--u)) !important;
width: calc(378 * var(--u)) !important;
height: calc(100% - 12 * var(--u)) !important;
}
.stage--events .pic--d,
.stage--events .reel--hero,
.stage--events .note--work,
.stage--events .stamp--since,
.stage--events .cap--since,
.stage--events .lead--strip,
.stage--events .lead--list,
.stage--events .cat__line,
.stage--events .bar--events,
.stage--events .bar--events2,
.stage--events .stamp__nib { display: none !important; }
/* ВЕРХНЕЕ ПОЛЕ У КОЛОНТИТУЛОВ 52, А НЕ 30 — решение Оксаны 06.09,
общее для всех блоков ниже первого экрана: на телефоне блок
начинался почти от самой кромки, и колонтитул читался прижатым.
Число одно на все семь: колонтитул — общий элемент листа, и разное
поле у разных блоков читалось бы сбоем, а не приёмом. */
/* Левое поле блоков приведено к одному числу: колонтитул 26,
заголовок 40. Было вразнобой — 26 и 34 у колонтитулов, 34, 40, 48
и 49 у заголовков, и лист на прокрутке ехал влево-вправо.
Правка Оксаны 06.09. */
.stage--events .folio {
left: calc(26 * var(--u)) !important;
top: calc(30 * var(--u)) !important;
font-size: calc(16 * var(--u)) !important;
line-height: calc(22 * var(--u)) !important;
}
/* Число. 268 → 132: на 390 оно по-прежнему единственный предмет
верхней половины, но помещается в ширину листа.
ПРО КРОМКУ МАРКЕРА (.stamp__nib). Комментарий тут раньше обещал, что
она «остаётся на месте», — а строкой выше она снята вместе с прочим.
Обещание было неверным, но снятие — верное: на узком листе thread.js
выставляет заливку числа целиком сразу (`if (narrow && big)`) и
атрибут data-nib не ставит вовсе, а без него кромка и так стоит в
opacity 0. Правило ничего не гасит, оно только называет вслух то,
что и без него не рисуется, — и держится заодно с общим решением
мобильных макетов: кончика маркера на телефоне нет нигде.
Обводка-призрак остаётся: она под сплошной заливкой и не видна. */
.stage--events { --num-big: calc(132 * var(--u)) !important; }
.stage--events .stamp--big {
left: calc(34 * var(--u)) !important;
top: calc(66 * var(--u)) !important;
}
.stage--events .cap--big {
left: calc(49 * var(--u)) !important;
top: calc(178 * var(--u)) !important;
font-size: calc(16 * var(--u)) !important;
line-height: calc(21 * var(--u)) !important;
}
/* Рукопись: 52 → 34 и наклон мягче (−13° → −9°). На узкой колонке
сильный наклон уводит хвост строки за кромку. */
.stage--events .note--year {
left: calc(82 * var(--u)) !important;
top: calc(192 * var(--u)) !important;
font-size: calc(39 * var(--u)) !important; /* +20%, потом −5% */
line-height: 1.5 !important;
padding: 0 calc(20 * var(--u)) calc(6 * var(--u)) 0 !important;
transform: rotate(-9deg) !important;
}
/* Полоса кадров: три штуки лесенкой, третий уходит за правую кромку —
тот же приём, что на развороте, только теснее. */
/* Полоса кадров поднята на 60; первый повёрнут влево на 15 градусов,
средний сдвинут влево на 15, правый на 30 — разметка Оксаны 06.09. */
.stage--events .pic--a {
left: calc(193 * var(--u)) !important; top: calc(240 * var(--u)) !important;
width: calc(154 * var(--u)) !important; height: calc(206 * var(--u)) !important;
transform: rotate(-15deg) !important;
transform-origin: 50% 50% !important;
}
.stage--events .pic--b {
left: calc(87 * var(--u)) !important; top: calc(282 * var(--u)) !important;
width: calc(116 * var(--u)) !important; height: calc(132 * var(--u)) !important;
transform: rotate(10deg) !important;
transform-origin: 50% 50% !important;
}
.stage--events .pic--c {
left: calc(20 * var(--u)) !important; top: calc(260 * var(--u)) !important;
width: calc(76 * var(--u)) !important; height: calc(122 * var(--u)) !important;
}
.stage--events .cap--strip {
left: calc(40 * var(--u)) !important;
top: calc(542 * var(--u)) !important;
font-size: calc(16 * var(--u)) !important;
line-height: calc(21 * var(--u)) !important;
}
.stage--events .cap--list {
left: calc(26 * var(--u)) !important;
top: calc(428 * var(--u)) !important;
font-size: calc(20 * var(--u)) !important;
line-height: calc(21 * var(--u)) !important;
}
/* Категории. На развороте это два столбца по два с каракулей под
каждым словом; здесь — та же лесенка, что у качеств первого экрана,
и точка вместо подчёркивания: линия идёт мимо и цепляет их. */
.stage--events .cat { padding-bottom: 0 !important; z-index: 3 !important; }
.stage--events .cat .tag {
--dot-gap: calc(20 * var(--u)) !important;
--dot-rise: calc(7 * var(--u)) !important;
--dot-size: calc(5 * var(--u)) !important;
font-size: calc(16 * var(--u)) !important;
line-height: calc(21 * var(--u)) !important;
}
.stage--events .cat--1 { left: calc(46 * var(--u)) !important; top: calc(474 * var(--u)) !important; }
.stage--events .cat--2 { left: calc(78 * var(--u)) !important; top: calc(500 * var(--u)) !important; }
.stage--events .cat--3 { left: calc(38 * var(--u)) !important; top: calc(526 * var(--u)) !important; }
.stage--events .cat--4 { left: calc(70 * var(--u)) !important; top: calc(552 * var(--u)) !important; }
}
/* =====================================================================
03 · ПОВОД (превью: scene--pv 960)
Разворот читался слева направо: ряд поводов над кадром, все пометки
собраны в правый угол снимка. На 390 ряд из четырёх слов даёт по 9px
на слово, а колонка поверх фотографии не читается вовсе. Поэтому
макет разложен по вертикали:
поводы столбиком (выбранный крупнее и обведён) → «жми» со стрелкой
→ кадр полосой → реплика рукой → цена → что входит → выход.
Кадр 396 шире листа 390 намеренно: он уходит за правую кромку, как и
портрет на первом экране.
СЕГОДНЯШНЕЕ СОДЕРЖИМОЕ, А НЕ ПРЕВЬЮ. В превью цена — пустая линейка
и есть строка «идёт ___ часов»; на сайте цена уже вписана, а строки
часов нет. Берётся то, что на сайте.
===================================================================== */
@media (max-width: 760px) {
.scene--povod {
aspect-ratio: 390 / 747 !important;
min-height: calc(100vw * 747 / 390) !important;
}
.stage--povod {
height: calc(725 * var(--u)) !important;
--fmt-fs: calc(16 * var(--u)) !important;
--fmt-fs-on: calc(26 * var(--u)) !important;
--price-fs: calc(44 * var(--u)) !important;
/* Свет под колонкой на телефоне не нужен: колонка стоит не на
фотографии, а на бумаге под ней. */
--veil: 0 !important;
}
.stage--povod .paper {
left: 0 !important; top: 0 !important;
width: calc(390 * var(--u)) !important;
height: 100% !important;
}
.stage--povod .grain {
left: calc(6 * var(--u)) !important; top: calc(6 * var(--u)) !important;
width: calc(378 * var(--u)) !important;
height: calc(100% - 12 * var(--u)) !important;
}
/* Холст-стирание и каракуля-подчёркивание на наведении: пальцем
ни то, ни другое не вызвать. */
.stage--povod .scratch,
.stage--povod .mk__line { display: none !important; }
.stage--povod .folio {
left: calc(26 * var(--u)) !important;
top: calc(30 * var(--u)) !important;
font-size: calc(16 * var(--u)) !important;
line-height: calc(22 * var(--u)) !important;
}
/* Ряд поводов становится столбиком. Сама коробка ряда обнуляется по
высоте и служит только точкой отсчёта — слова стоят координатами,
лесенкой, как качества на первом экране. */
.stage--povod .fmts {
left: 0 !important; top: 0 !important;
width: calc(390 * var(--u)) !important;
height: 0 !important;
display: block !important;
}
.stage--povod .mk--fmt {
position: absolute !important;
display: flex !important;
align-items: flex-end !important;
height: calc(46 * var(--u)) !important; /* площадка под палец */
padding: 0 calc(14 * var(--u)) 0 0 !important;
line-height: 1.32 !important;
z-index: 4;
}
/* В СТРОКЕ ОДНО СЛОВО — ТЕКУЩЕЕ. Столбец из четырёх поводов был
переключателем: ткни в слово. Листание сделало его лишним и даже
обманным — палец ведут, а столбец обещает тычок. Поэтому все четыре
слова стоят в ОДНОЙ точке, а видно то, что выбрано: пролистнул — на
месте «свадьбы» встал «корпоратив». Просьба Оксаны 06.09. */
.stage--povod .mk--f1,
.stage--povod .mk--f2,
.stage--povod .mk--f3,
.stage--povod .mk--f4 {
left: calc(40 * var(--u)) !important;
/* 88 → 66: зазор от колонтитула до заголовка приведён к общим 14.
Стрелка, кадр, колонка и высота блока опущены на те же 22 —
иначе под словом открывается пустое поле. */
top: calc(66 * var(--u)) !important;
}
.stage--povod .mk--fmt[aria-checked="false"] { display: none !important; }
/* Стрелка листания — справа от слова, на его базовой линии. */
.stage--povod .fmts__swipe {
display: block !important;
/* .lead по умолчанию не ловит палец — стрелки на листе рисованные, а
не кнопки. Этой ловить надо: по ней тоже листают. */
pointer-events: auto !important;
cursor: pointer !important;
position: absolute !important;
left: calc(224 * var(--u)) !important;
top: calc(82 * var(--u)) !important;
width: calc(104 * var(--u)) !important;
height: calc(30 * var(--u)) !important;
z-index: 4;
}
/* Обводка выбранного: пазуха вчетверо меньше макетной (10/8 вместо
24/16) — на 390 овал иначе накрывает соседние строки. Толщина
штриха задана в макетных 1440, а non-scaling-stroke не даёт
растяжению овала расплющить её. */
/* ОБВОДКА СНЯТА. Она отмечала выбранный повод среди четырёх; в строке
теперь одно слово — текущее, и отмечать нечего. Просьба Оксаны 06.09. */
.stage--povod .ring { display: none !important; }
.stage--povod .ring {
left: calc(-10 * var(--u)) !important;
top: calc(-8 * var(--u)) !important;
width: calc(100% + 20 * var(--u)) !important;
height: calc(100% + 16 * var(--u)) !important;
}
/* ОБВОДКА РИСУЕТСЯ ЦЕЛИКОМ, БЕЗ ПРОВОДКИ ШТРИХА.
non-scaling-stroke нужен ради толщины, но он же ломает проводку:
js/povod.js берёт длину пути через getTotalLength() — 540 в
единицах viewBox, — а с non-scaling-stroke браузер отмеряет штрихи
и промежутки уже в координатах листа, где тот же путь длиной 1107.
Штрих 540 при пути 1107 = нарисована ровно половина овала: верх и
правый бок есть, низа и левого бока нет. Так и было видно на всех
четырёх поводах.
Из mobile.css правится одним способом: снять пунктир вовсе. Проводку
обводки на телефоне теряем, целый овал получаем. Тот же приём, что в
блоке 05 у .stage--otz .mark path. */
.stage--povod .ring path {
stroke-width: calc(2.6 * var(--u)) !important;
vector-effect: non-scaling-stroke;
stroke-dasharray: none !important;
stroke-dashoffset: 0 !important;
}
/* Подсказка «жми» и стрелка к ряду сняты. Форматы теперь листаются
свайпом, и приглашение нажать вело не туда: палец ведут, а не
тычут. Правка Оксаны 06.09, только телефон. */
.stage--povod .fmts__hint,
.stage--povod .fmts__arrow { display: none !important; }
.stage--povod .fmts__hint {
left: calc(292 * var(--u)) !important;
top: calc(54 * var(--u)) !important;
font-size: calc(40 * var(--u)) !important;
line-height: 1.3 !important;
transform: rotate(-8deg) !important;
transform-origin: 0 100% !important;
z-index: 4;
}
.stage--povod .fmts__arrow {
left: calc(186 * var(--u)) !important;
top: calc(84 * var(--u)) !important;
width: calc(100 * var(--u)) !important;
height: calc(56 * var(--u)) !important;
z-index: 4;
}
/* Кадр. На сайте пометки лежат ВНУТРИ .frame, а .frame обрезает по
себе — на телефоне колонка стоит ниже снимка и была бы срезана.
Поэтому коробка кадра обнуляется по высоте и перестаёт резать, а
сам снимок получает свой габарит. Вылет за правую кромку режет
секция, у неё overflow: clip. */
.stage--povod .frame {
left: 0 !important; top: 0 !important;
width: calc(390 * var(--u)) !important;
height: 0 !important;
overflow: visible !important;
}
/* КАДР В ПОЛЯХ, А НЕ ЗА ОБРЕЗОМ. Был 396 при левом поле 40 и уходил
за правую кромку на 46. Оксана 06.09: поля справа и слева должны
быть равны. 390 − 40 − 40 = 310. Высоту НЕ трогаем — снимок стоит
object-fit: cover, лишнее он срезает сам, и все отступы вокруг
(реплика, цена, колонка) остаются на своих местах. */
.stage--povod .shot {
left: calc(40 * var(--u)) !important;
/* 292 → 154: три спрятанных слова ряда освободили 138, и между
обведённым поводом и кадром висела дыра. Колонка пометок поднята
на столько же, блок на столько же укорочен — поле под кнопкой
осталось прежним. */
top: calc(132 * var(--u)) !important;
width: calc(310 * var(--u)) !important;
height: calc(220 * var(--u)) !important;
}
/* Колонка пометок: под кадром, от того же левого поля. */
.stage--povod .pack {
left: calc(40 * var(--u)) !important;
top: calc(426 * var(--u)) !important;
width: calc(310 * var(--u)) !important;
}
/* КОРПОРАТИВ: НАБОР ОБРАТНО ЧЕРНЫЙ.
На развороте колонка корпоратива лежит НА тёмном кадре, и потому
набрана белым (решение Оксаны 06.09, section-povod.css в хвосте).
На телефоне колонка стоит не на кадре, а на бумаге под ним — и белое
по светлой бумаге пропадало целиком: цена читалась призраком, «что
входит» и весь состав не читались вовсе. Видны оставались только
красные птички и строка выхода, у которой свой цвет.
Причина белого — тёмный кадр, а под колонкой его здесь нет. */
.stage--povod[data-fmt="korporativ"] .pack__price,
.stage--povod[data-fmt="korporativ"] .pack__cap,
.stage--povod[data-fmt="korporativ"] .pack__list,
.stage--povod[data-fmt="korporativ"] .pack__list .mono {
color: var(--ink) !important;
}
/* Реплика рукой стоит НАД колонкой, в просвете между кадром и ценой.
На сайте она первый ребёнок колонки и в потоке встала бы над
ценой вплотную — здесь её вынимают из потока координатой. */
.stage--povod .pack__hand {
position: absolute !important;
left: calc(12 * var(--u)) !important;
top: calc(-86 * var(--u)) !important;
margin: 0 !important;
font-size: calc(38 * var(--u)) !important;
line-height: 1.28 !important;
transform: rotate(-3deg) !important;
}
/* Цена и черта под ней. Каракуля на сайте отдельным