/* v104-boss.css · 03.08 · разбор шефа по всем разделам, десктоп и мобилка Подключается последним, селекторы с той же силой, что у слоёв v100-v101, иначе не побеждают. Сцены, фотографии и утверждённые смыслы не трогаются: только геометрия, кегли и обрезка. */ /* ── 1. ХИРО НА ДЕСКТОПЕ ───────────────────────────────────────────── Шеф: «плашка с цифрами наезжает на кнопки CTA и облака». Первая попытка вынесла блок в поток - и стало хуже: низ планеты обрезался, у облаков появилась прямоугольная рамка с острыми углами, голубая окантовка ушла под срез. Возвращаем блок на место и снимаем ровно то, что мешало: подложку с размытием. Цифры лежат поверх облаков прозрачно, ничего не перекрывая. */ @media (min-width: 1025px) { .hero--v53 .hero-proof { background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-top-color: rgba(231, 199, 125, .18) !important; } } /* ── 2. ПОДПИСИ, КОТОРЫЕ НАЕЗЖАЮТ ──────────────────────────────────── «MODEL + BOARD наезжает на Official builds», «подпись route back наезжает». Обе живут в карточках стека и упираются в правый край: ширина под подпись 12px при нужных 90. Отпускаем перенос. КРУГ 3 · 03.08 · DA3. Правило стояло на «#control-stack .stack-card > *», а overflow-wrap НАСЛЕДУЕТСЯ - значит anywhere уходил внутрь .stack-visual и накрывал всю графику карточек. У anywhere есть побочка, которой нет у break-word: он обнуляет min-content, то есть минимальная ширина текста становится ОДИН ГЛИФ. Из-за этого колонки «1fr auto 1fr» у .sg-switch схлопывались до 37.5px и «200», «240», «Stock behaviour. Untouched identity» вставали столбиком по букве - шеф: «развалилась нахуй, цифры и буквы написаны вертикально». Оставляем правило ровно там, где оно и было нужно: на боковой метке карточки (MODEL + BOARD, это закрытый пункт) и на подписи route back, у которой в v69-stack.css:924 стоит white-space: nowrap. Внутрь сцен ничего больше не течёт. */ #control-stack .stack-card > span { min-width: 0; overflow-wrap: anywhere; white-space: normal !important; } #control-stack .stack-card .sg-switch-return span { white-space: normal !important; } /* 03.08: обрезку карточки я ставил, чтобы удержать метку на краю. Метку решил иначе, а обрезка сломала другое - шеф: «Push performance without не выезжает майнер». Вентиляторная стена нарисована на 53px шире карточки и должна выходить за неё. Обрезку снимаем. */ #control-stack .stack-card { overflow: visible !important; } /* «One VNISH cockpit…» уезжала вправо в обрезку */ .vgo-intro .vgo-title, #cockpit .vgo-title { max-width: 100% !important; } @media (max-width: 720px) { .vgo-intro .vgo-title, #cockpit .vgo-title { overflow-wrap: break-word; } /* 03.08, круг 2 (M15b): max-width лечения не давал, потому что строку держал white-space: nowrap из v101-final-pass.css:189. Замер чернил: на 360 хвост уходил на 17.55px за экран, на 375 - на 13.41px, на 390 оставался запас 1.27px. Снимаем nowrap - на узких телефонах строка ложится в две. Тот же селектор, что у v101, но грузимся позже. */ .vgo-intro .vgo-title, #cockpit .vgo-title { white-space: normal !important; } } /* Тот же участок: на экранах до 380px .shell/.vgo-shell добирают ещё 14px паддинга поверх margin'а от --shell (calc(100vw - 32px)), и поле выходит 30px против 16px на 390. Возвращаем единый отступ телефона: строке заголовка это отдаёт 28px ширины. */ @media (max-width: 380px) { .shell, .vgo-shell { padding-inline: 0; } } /* шеф: «бесят переносы» - на широких экранах строка рвётся только по словам */ @media (min-width: 721px) { #about h2, #about .vgo-title, .about-claim, .vgo-intro .vgo-title, #cockpit .vgo-title { hyphens: manual !important; overflow-wrap: normal !important; word-break: normal !important; } } /* ── 3. АНИМАЦИЯ У РАЗДЕЛА ДОВЕРИЯ ─────────────────────────────────── Шеф: «Вернуть размер анимации тут» и на мобилке «неправильного маленького размера, ни черта не видно, дыры сверху и снизу». */ #authority iframe, .authority iframe { width: 100% !important; height: clamp(360px, 32vw, 560px) !important; display: block; } @media (max-width: 720px) { #authority iframe, .authority iframe { height: 330px !important; } } /* ── 4. ШЕСТЬ МЕНЮШЕК НА ТЕЛЕФОНЕ ──────────────────────────────────── «внизу у каждой лишнее пустое место» - карточки держали фиксированную высоту под самую длинную. Высота по содержимому. */ @media (max-width: 720px) { #control-stack .stack-card { height: auto !important; min-height: 0 !important; padding-bottom: 16px !important; } #control-stack .stack-track { height: auto !important; /* MM1 r24: карточки лежат в ряд каруселью и раньше висели по своей высоте - «Scale the result» была на 204px ниже первой. Тянем все шесть по самой высокой; пустоты внизу нет, разницу забирает картинка (секция 29). */ align-items: stretch !important; } /* «у 05 перестали показываться цифры» - их резала обрезка карточки */ #control-stack .stack-card--05, #control-stack .stack-card--05 * { overflow: visible !important; } /* «у 06 переключатель какой-то неуверенный и не по центру» */ #control-stack .stack-card--06 .stack-toggle, #control-stack .stack-card--06 button, #control-stack .stack-card--06 [role="button"] { margin-inline: auto !important; font-weight: 800 !important; letter-spacing: .04em; } } /* ── 5. ДЕК ────────────────────────────────────────────────────────── «надпись на обложке еле-еле влезает», «select… напиши шрифтом сайта». Надпись PRESENTATION DESK убрана из разметки. */ /* r22: width:100% на абсолютном блоке с inset:8% отменял правый край - обложка уезжала вправо на 27px и вылезала за рамку. width:auto даёт работать обоим inset'ам, блок снова стоит по центру обложки. */ .deck-cover-inner { width: auto !important; padding-inline: 12px; } .deck-cover-inner b, .deck-cover-inner span, .deck-cover-inner em { white-space: normal !important; overflow-wrap: anywhere; line-height: 1.2; } .deck-side-head, .deck-side-head * { font-family: inherit !important; letter-spacing: .04em; } @media (max-width: 720px) { .deck-cover-inner b { font-size: 15px !important; } .deck-cover-inner span, .deck-cover-inner em { font-size: 11px !important; } } /* ── 6. МУЗЕЙ ──────────────────────────────────────────────────────── «отвратительно смотрится анимация с верхним пустым местом - надо сделать как на десктопе», «надписи с моделями наполовину не видно». Верхняя треть кадра пустая: подрезаем её обёрткой, кадр не искажаем. */ @media (max-width: 720px) { #about .vgo-scenecrop, #about .about-scene, #about figure { overflow: hidden; } /* 03.08: обёртка держала 330px при сцене 640 - видно было половину, подписи моделей срезаны. Шеф: «надо как на десктопе». Срезаем только пустую верхнюю треть (110px) и показываем остальное. */ /* r22: 530px стояло у рамки, а сама обёртка .about-museum осталась на 330px из v101-final-pass.css:578 - она и резала кадр до 48%. Теперь обе на 530px, а сдвиг кадра уменьшен со 205 до 110px: видно 110…640 = 530 из 640 = 82.8% сцены, подписи моделей целиком. */ #about .about-museum, #about .about-museum-frame, #about .vgo-scenecrop, #about .about-scene, #about figure { height: 530px !important; max-height: none !important; overflow: hidden; } #about .about-museum-frame iframe { height: 640px !important; margin-top: 0 !important; transform: translateY(-110px) !important; } } /* ── 7. РАЗДЕЛ ПЕРВОГО МАЙНЕРА ─────────────────────────────────────── «сократить низ у анимации» - под сценой висел пустой хвост. */ #safe-install iframe { height: clamp(300px, 26vw, 420px) !important; } @media (max-width: 720px) { #safe-install iframe { height: 300px !important; } #safe-install .safe-scene, #safe-install figure { overflow: hidden; } } /* ── 8. ШРИФТЫ, КОТОРЫЕ ВЫБИВАЮТСЯ ─────────────────────────────────── «We have been inside every Antminer generation» и «Your AI already» набраны жирным гротеском вразрез с заголовками сайта. */ .about-claim, .ai-strip-title { font-weight: 500 !important; letter-spacing: -0.01em; } .about-claim { font-size: clamp(22px, 2.2vw, 30px) !important; line-height: 1.18; } /* ── 9. ФУТЕР НА ПЛАНШЕТЕ ──────────────────────────────────────────── «футер с кучей всего через пробелы, громоздкий до пиздеца». */ @media (min-width: 721px) and (max-width: 1024px) { .site-footer .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px 18px !important; } .site-footer { padding-block: 26px 20px !important; } .site-footer .footer-grid a { min-height: 38px !important; font-size: 12px !important; } .site-footer .footer-grid small { font-size: 10px !important; margin-bottom: 2px !important; } .site-footer .ai-strip { padding-block: 14px !important; } .footer-legal { gap: 8px !important; row-gap: 4px; } } /* ── 10. ФАК ───────────────────────────────────────────────────────── Шеф: «01 перенести сверху слева от слова question», «убрать с анимации тг и вотсап» (убраны из разметки), «фак не надо под кат на мобилке» (снято в v100-final-mobile.js). */ /* r22: display:block убивал flex из v76-boss.css:105 и псевдоэлемент «QUESTION» вставал ИНЛАЙН ПЕРЕД цифрами - одна строка «QUESTION 01». column-reverse: ::before (первый ребёнок) уходит вниз, цифры встают сверху, align-items:flex-start прижимает обе части к левому краю. */ .faq-portal-num { display: flex !important; flex-direction: column-reverse !important; align-items: flex-start !important; gap: 2px; margin-bottom: 2px; text-align: left; text-indent: 0; } .faq-portal-cap { display: block; text-align: left; } /* ── 11. ПЛАШКИ 25 И 30 В РАЗДЕЛЕ HARDWARE ─────────────────────────── Шеф: «сделать так, чтобы плашки 25 и 30 ни при каких обстоятельствах не заезжали за майнер и не уезжали за периметр в обрезку - рассчитай нужные размеры и поставь блоки». Замер на 390: сцена занимает 80…310px, а плашки стояли на процентах и выходили за неё - PERFORMANCE начиналась на 60 (левее сцены на 20), EFFICIENCY кончалась на 322 (правее сцены на 12). Считано: корень сцены 35…355 (320px), видимый кадр 80…310 (230px). Значит отступ до видимого края = 45/320 = 14%, берём 15% с запасом, ширина плашки = 105/320 = 33%. Итог: 83…188 и 201…307 - обе внутри кадра, между ними 13px зазора, за периметр выйти нечем. */ /* Считано по кадру, а не на глаз. Корень сцены 679px, майнер занимает 226…452 и лежит слоем выше (z-index 20), поэтому любая плашка под ним просто исчезает. Разводим по сторонам от майнера с зазором 8px и держим внутри кадра: слева 17…214 (край майнера 226) - left 2.5%, ширина 29% справа 462…645 (край кадра 679) - right 5%, ширина 27% На телефоне кадр другой: корень 320, видимая часть 80…310, поэтому там свои числа - 15% отступ, 33% ширина, проверено отдельно. */ @media (min-width: 721px) { .miner-identity--a08 .a08-root .slab-hosting, .miner-identity--a08 .a08-root .slab-fleet { top: auto !important; bottom: 6% !important; box-sizing: border-box; z-index: 6; } .miner-identity--a08 .a08-root .slab-hosting { left: 1% !important; right: auto !important; width: 28% !important; } .miner-identity--a08 .a08-root .slab-fleet { right: 2% !important; left: auto !important; width: 27% !important; } } /* Телефон: корень 320px, майнер занимает 107…213, видимый кадр 45…275. Между краем кадра и майнером всего 62px, поэтому плашка тут обязана быть узкой: 18% (57px) с отступом 4% (13px). Итог 13…70 и 250…307 - майнера не касаются, за кадр не выходят. */ @media (max-width: 720px) { .miner-identity--a08 .a08-root .slab-hosting, .miner-identity--a08 .a08-root .slab-fleet { top: auto !important; bottom: 6% !important; width: 18% !important; max-width: 18% !important; box-sizing: border-box; padding: 5px 4px !important; z-index: 6; } .miner-identity--a08 .a08-root .slab-hosting { left: 4% !important; right: auto !important; } .miner-identity--a08 .a08-root .slab-fleet { right: 4% !important; left: auto !important; } /* r22: селекторы .slab-hosting span / strong дают (0,3,1) и проигрывают v79-boss.css:242,246 .slab b strong / .slab b > span - (0,3,2). Поэтому цифры оставались 34px в плашке шириной 57px и лезли на майнера. Повторяем ту же силу: …slab-hosting b strong / …slab-hosting b > span. */ .miner-identity--a08 .a08-root .slab-hosting b > span, .miner-identity--a08 .a08-root .slab-fleet b > span, .miner-identity--a08 .a08-root .slab-hosting > span, .miner-identity--a08 .a08-root .slab-fleet > span { font-size: 6.5px !important; letter-spacing: .04em !important; } .miner-identity--a08 .a08-root .slab-hosting b strong, .miner-identity--a08 .a08-root .slab-fleet b strong, .miner-identity--a08 .a08-root .slab-hosting > b, .miner-identity--a08 .a08-root .slab-fleet > b { font-size: 15px !important; } } /* ── 12. СЦЕНА ФЛОТА: МАЙНЕРЫ СРАЗУ, А НЕ ИЗ ТЕМНОТЫ ───────────────── Шеф: «проследи, чтобы множество майнеров появлялось сразу, а не из темноты; с плашками то же самое». Причина: у ячеек базовый фон rgba(231,199,125,.16) - почти чёрный, и только бегущая волна подсвечивает их по очереди. Поднимаем базовую яркость втрое: поле видно целиком с первого кадра, волна остаётся волной, а не проявителем. Переобъявление keyframes - последнее объявление в каскаде побеждает. */ @keyframes fleetWave { 0%, 70%, 100% { background: rgba(231, 199, 125, .46); box-shadow: 0 0 4px rgba(231, 199, 125, .22); } 16% { background: #f4dda4; box-shadow: 0 0 14px rgba(244, 221, 164, .85); } 40% { background: rgba(231, 199, 125, .64); box-shadow: 0 0 8px rgba(231, 199, 125, .4); } } #fleet .fleet-unit, #fleet .fleet-cell, .vgo-array .fleet-unit, .vgo-array .fleet-cell { background: rgba(231, 199, 125, .46); } /* ── 13. ОРБИТА ХИРО: МАЙНЕРЫ И ЛОГОТИПЫ ───────────────────────────── Шеф: «майнеры и логотипы идут не один за другим, а тоже накрываются друг другом». Замер: шесть майнеров и шесть логотипов, три пары сходятся ближе, чем на свою полуширину. Углы задаются движком сцены через --logo-x/--logo-y, менять их извне нельзя - поэтому уменьшаем логотип и ставим майнер выше по слою: там, где они сходятся, майнер читается целиком, а не мешается с лого. */ @media (max-width: 720px) { .hero--v53 .global-orbit-logo { width: clamp(20px, 5.6vw, 24px) !important; opacity: calc(var(--logo-opacity, 0) * .82); z-index: 2; } .hero--v53 .global-orbit-miner { z-index: 5; } } /* ── 14. КЕГЛИ, НАЗВАННЫЕ ШЕФОМ 03.08 ──────────────────────────────── «Start with the hardware you already own - уменьшить шрифт», «Find the right firmware for your Antminer - уменьшить шрифт». */ @media (min-width: 1025px) { #routes h2, #route-title, #finder h2, #finder-title { font-size: clamp(32px, 3.2vw, 46px) !important; line-height: 1.08 !important; } } @media (max-width: 1024px) { #routes h2, #route-title, #finder h2, #finder-title { font-size: clamp(26px, 6.4vw, 34px) !important; line-height: 1.12 !important; } } /* ── 15. КРАЯ ОБЛАКОВ ──────────────────────────────────────────────── Шеф: «у облаков по краям стали отвратительные квадратные углы острые». Подложка облаков обрезана прямоугольником (overflow: hidden на .global-cloud-foundation). Гасим края мягкой маской: по горизонтали растворяем на 14% с каждой стороны, по низу - на последней четверти. Сама сцена не меняется, меняется только форма выреза. */ .hero--v53 .global-cloud-foundation { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } /* ── 16. ВЕРТИКАЛЬНЫЕ МЕТКИ НА КРАЮ КАРТОЧЕК СТЕКА ─────────────────── Шеф: «MODEL + BOARD наезжает на official builds». Замер внутри карточки: метка стоит в 55px от правого края, плашка «OFFICIAL BUILDS · FREE» - в 37px, по вертикали они пересекаются. Уводим метку к самому краю: 15px от края, плашка кончается на 37 - между ними 10px чистого зазора, и так на всех шести карточках. */ #control-stack .stack-card > span { margin-right: -40px; position: relative; z-index: 1; } @media (max-width: 720px) { /* на телефоне карточка узкая, метка только мешает */ #control-stack .stack-card > span { display: none !important; } } /* ── 17. ЦИФРЫ В КАРТОЧКЕ 05 ───────────────────────────────────────── Шеф: «у 05 перестали показываться цифры». В v101 полоса .sg-scale-bar скрыта display:none - похоже, заодно с удалением блока 1 / 24 / 1000 в разделе флота. Но в карточке стека она несёт единственные цифры, и без неё карточка пустая. Возвращаем её здесь, в разделе флота остаётся скрытой. */ #control-stack .stack-card--05 .sg-scale-bar { display: block !important; overflow: visible !important; margin-top: 10px; } #control-stack .stack-card--05 .sg-mark { position: absolute; } /* ── 18. ПОКАЗАТЕЛИ ПОВЕРХ ГРАФИКА В КАРТОЧКЕ 03 ───────────────────── Шеф: «Choose what earns more - цифра наезжает на график». Замер: круговой график занимает 340…648 по ширине, а показатели 215, 15.5 J/TH и +20% over stock лежат внутри него и сливаются с дугой. Сам график не трогаем - даём цифрам подложку и воздух, чтобы они читались поверх дуги, а не спорили с ней. КРУГ 3 · 03.08 · DA2. Подложка оказалась ровно тем, чего шеф не хотел: «отражается наездом плашки цифр, а не наверху графика». Считано на 1440 по коробке .sg-gauge (308.2 x 307.8, отсчёт от её верха): дуга 165.5 … 284.0 (apex 165.5, концы 284) .sg-gauge-read 139.2 … 261.8 - лежит НА дуге, отсюда и наезд .sg-gauge-legend 261.8 … 277.8 .sg-gauge-note 283.8 … 307.8 Подложку снимаем целиком, цифры выносим НАД дугой: .sg-gauge-read уходит из потока грида наверх коробки (0 … 111.3 - до apex остаётся 54.2px чистого воздуха). Легенда и примечание остаются на своих местах: без .sg-gauge-read строк в гриде две, align-content:end держит их на прежних 261.8 и 283.8. Кегль числа не трогаем (80.6px на 1440), сам график не трогаем. Подпись «VNISH FIRMWARE / 200 → 240», которая стояла на top:8% и теперь попала бы под цифры, переезжает внутрь купола дуги: 63% = 194 … 257. Полухорда дуги на этой высоте 77px, то есть 154px просвета против 150px ширины подписи - в дугу не упирается, до легенды 4.8px. */ #control-stack .stack-card--03 .sg-gauge-read, #control-stack .stack-card--03 .sg-gauge-note { background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding-inline: 0; border-radius: 0; } @media (min-width: 761px) { #control-stack .stack-card--03 .sg-gauge-read { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; padding-bottom: 0 !important; z-index: 3; } } /* Подпись «VNISH FIRMWARE / 200 → 240» стояла на top:8% и после переезда цифр наверх попала бы прямо под них. Куда её убрать - зависит от формы коробки, а она у карточки разная на двух раскладках: 1025+ (две колонки) сцена почти квадратная, свободного места между цифрами и дугой нет - подпись уходит ВНУТРЬ купола дуги, ширина в процентах от сцены, чтобы вместе с куполом и сжималась; 761…1024 (карусель) сцена высокая, 492.5px: между цифрами (кончаются на 94) и дугой (начинается на 330) лежит 236px пустоты - подпись встаёт туда, в купол лезть незачем. */ @media (min-width: 1025px) { /* Купол у двухколоночной раскладки маленький: на 1025 полоса между вершиной дуги и легендой всего 76.6px, а подпись в исходном наборе занимает 63 и по ширине 115 против 52.6 просвета купола на своей высоте. Поджимаем набор до 48px (межстрочный и кегль второй строки) и ставим низ подписи на 18% высоты сцены: 1025 → 185.6…233.6 при купольной полосе 182.4…240.9, 1280 → 185.6…233.6 при 178.5…240.9, 1440 → 204.4…252.4 при 186.8…263.8. Ни дуги, ни легенды. */ #control-stack .stack-card--03 .sg-lift { top: auto !important; bottom: 18% !important; width: 44%; max-width: 150px; gap: 2px; } #control-stack .stack-card--03 .sg-lift span { font-size: 9px; line-height: 1.2; } } @media (min-width: 761px) and (max-width: 1024px) { #control-stack .stack-card--03 .sg-lift { top: 30% !important; width: 60%; max-width: 220px; } } /* ── 19. ДАШБОРД НА ТЕЛЕФОНЕ ───────────────────────────────────────── Шеф: «дашборд не по центру и узкий». Замер на 390: сцена шириной 310 при экране 390 и прижата к левому краю, панель 16…294. Отдаём сцене всю ширину и центрируем панель. */ @media (max-width: 720px) { #dashboard .telemetry-stage { width: 100% !important; margin-inline: auto !important; } #dashboard .dashHalo { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: min(94vw, 380px) !important; } } /* ── 20. ОБЛАКА НА ТЕЛЕФОНЕ ────────────────────────────────────────── Шеф: «неправильно стоят облака - ниже нужно». */ @media (max-width: 720px) { .hero--v53 .global-cloud-foundation { transform: translateY(38px); } } /* ── 21. СЦЕНА ДОВЕРИЯ ─────────────────────────────────────────────── Шеф: «анимация Proven at mining мелкая», «маленькая анимация по суппорту». Это canvas, а не iframe - прошлый мой приём про iframe тут не работал. Замер: 354x310 на телефоне. Даём сцене полную ширину и высоту по пропорции. КРУГ 3 · 03.08 · DA4. «Опять маленькая-кастрированная, верни размер как был». Правило выше и было причиной, разобрано по коду: 1) v79-anim09.js:596 меряет НЕ канвас, а .anim09-stage, и зовёт renderer.setSize(w, h, false) - третий аргумент false значит «CSS-размер канваса не трогать». Размер канваса держит .anim09-stage canvas {inset:0; width:100%; height:100%} из v79-anim09.css:39. Мой height:auto + aspect-ratio разорвал эту связку: буфер рисовался 520x460, а показывался 520x357.5 - кадр сплющен по вертикали на 22%. 2) v79-anim09.js:600: const mobile = stageWidth < 620. Сцена стояла в 520px (v101-final-pass.css:380) и уходила в мобильный режим: scale .62 вместо .82, камера z 12.6 вместо 10.4, fov 32 вместо 30. Камень выходил ровно вдвое мельче - это и есть «кастрированная». Лечим обе причины. Канвас снова заполняет сцену один в один (искажения нет), а коробка сцены на десктопе поднята с 520x460 до 632x520: 632 ≥ 620 - движок переключается в десктопный режим; колонка сетки #authority на 1440 = 640.7px, 632/640.7 = 98.6%; камень по расчёту 520·.82/(2·10.4·tan15°) против 460·.62/(2·12.6·tan16°) - крупнее в 1.94 раза, то есть тот самый прежний размер. Сетку #authority не трогаю: колонка текста остаётся 781.3px, как принято. */ #authority canvas, .authority canvas { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; max-height: none !important; } @media (min-width: 1025px) { #authority .anim09--component { width: min(100%, 632px) !important; height: 520px !important; } } /* ── 22. ПЯТЬ ШАГОВ ────────────────────────────────────────────────── Шеф: «криво, одиноко и мелко». Кегль поднят, номера и подписи выровнены по одной линии, строка перестала быть узкой колонкой. */ .safe-path { gap: 10px; } .safe-path li { align-items: start; } .safe-step-link { font-size: 14px !important; line-height: 1.35; } .safe-step-link strong { display: block; font-size: 15px; margin-bottom: 2px; } @media (min-width: 1025px) { .safe-path { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .safe-step-link { font-size: 15px !important; } .safe-step-link strong { font-size: 17px; } } /* ── 23. ДЕК ───────────────────────────────────────────────────────── Шеф: «дек написан хуёвым шрифтом через пробел и не по центру». */ .deck-side-head { justify-content: center !important; text-align: center !important; letter-spacing: .06em !important; } .deck-side-head b { font-weight: 700; } .deck-hall .deck-langs { justify-items: stretch; } @media (max-width: 720px) { .deck-hall { text-align: center; } .deck-langs a, .deck-langs button { justify-content: space-between; } } /* Пять шагов на телефоне стояли пятью колонками по 63px - отсюда «криво, одиноко и мелко». Ставим в столбик на всю ширину. */ @media (max-width: 720px) { #safe-install .safe-path, .safe-install .safe-path { grid-template-columns: 1fr !important; gap: 8px !important; } #safe-install .safe-path li, .safe-install .safe-path li { display: grid !important; grid-template-columns: 34px 1fr !important; align-items: center !important; text-align: left !important; } #safe-install .safe-path li > b { font-size: 13px !important; text-align: left !important; } #safe-install .safe-step-link, .safe-install .safe-step-link { width: 100% !important; justify-content: space-between !important; text-align: left !important; } .safe-step-link span { text-align: left !important; } } /* Сцена доверия зажата контейнером в 354px - отпускаем контейнер */ @media (max-width: 720px) { #authority .authority-visual, #authority figure, #authority .shell > div:has(canvas) { width: 100% !important; max-width: 100% !important; } #authority canvas { max-height: 380px; } } /* ── 24. ПЯТЬ ШАГОВ НА ДЕСКТОПЕ ────────────────────────────────────── Шеф: «A clear way forward. A clear way back - тут всё развалилось». Причина видна на кадре: номер 01 прижат влево и вниз, а слово Match стоит по центру сверху - они читаются как два разных элемента. Сшиваем в одну строку: номер, за ним подпись, всё по левому краю. */ @media (min-width: 721px) { #safe-install .safe-path li, .safe-install .safe-path li { display: grid !important; grid-template-columns: auto 1fr !important; align-items: center !important; justify-items: start !important; gap: 12px !important; text-align: left !important; padding: 14px 16px !important; } #safe-install .safe-path li > b { align-self: center !important; font-size: 15px !important; letter-spacing: .06em; opacity: .75; } #safe-install .safe-step-link { width: 100% !important; justify-content: flex-start !important; text-align: left !important; } #safe-install .safe-step-link span { text-align: left !important; } #safe-install .safe-step-link strong { display: block; margin-bottom: 2px; } } /* ── 25. ПЕЧАТЬ В СЦЕНЕ ────────────────────────────────────────────── Шеф: «печать не по центру и не во весь масштаб, надписи скукоженые». Замер на телефоне: лок-ап 123x58 и смещён влево. Центрируем и даём масштаб, подписям - воздух. */ @media (max-width: 720px) { .seal-logo-lockup { margin-inline: auto !important; width: min(62vw, 210px) !important; height: auto !important; } .seal-ring-label { letter-spacing: .12em !important; } } /* Снятая обрезка карточки дала странице боковой скролл 13px: вентстена выходит за карточку и упирается в край экрана. Режем по X на уровне секции - майнер по-прежнему выезжает за карточку, страница не едет. */ #control-stack { overflow-x: clip; } /* ══════════════════════════════════════════════════════════════════════ КРУГ 2 · 03.08 · разбор пяти тестировщиков по завалённым пунктам. Ниже только геометрия и кегли: ни одна сцена, фотография и анимация не удалена и не подменена. ══════════════════════════════════════════════════════════════════════ */ /* ── 26. D4 · ОСТРЫЕ СРЕЗЫ ПО КРАЯМ ОБЛАКОВ ────────────────────────── Замер на 1440: у .global-cloud-layer маска radial-gradient без размера (farthest-corner), поэтому на собственных краях бокса альфа ещё .7-1.0 и слой рубится прямоугольником. Маска подложки тут не спасает: срезы идут по боксам дочерних слоёв, а не по боксу подложки. Радиалку оставляем как есть (это и есть форма облака), а поверх неё пересечением кладём мягкие края бокса: по горизонтали растворяем первые и последние 13%, по низу - последнюю четверть. Прямых углов не остаётся ни одного. */ .hero--v53 .global-cloud-foundation .global-cloud-layer { -webkit-mask-image: radial-gradient(ellipse at 50% 74%, #000 0 58%, rgba(0, 0, 0, .80) 69%, transparent 89%), linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%), linear-gradient(180deg, #000 0%, #000 76%, transparent 100%); mask-image: radial-gradient(ellipse at 50% 74%, #000 0 58%, rgba(0, 0, 0, .80) 69%, transparent 89%), linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%), linear-gradient(180deg, #000 0%, #000 76%, transparent 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: source-in, source-in; mask-composite: intersect, intersect; } /* ── 27. M4 · ПОЛУПРОЗРАЧНАЯ ПЛАШКА ПОВЕРХ ПЛАНЕТЫ НА ТЕЛЕФОНЕ ─────── Замер на 390: подложка облаков 184px высотой, а сами слои лежат в её нижних 19%. Верхние 81% - только свечение от drop-shadow, и обрезка (overflow:hidden + contain:paint) превращала его в брус с прямым верхним краем на y=496 поверх диска планеты. Вертикальной маске подложки даём растворение и сверху: свечение остаётся, прямая линия исчезает. Нижняя часть маски не тронута. */ @media (max-width: 720px) { .hero--v53 .global-cloud-foundation { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 46%, #000 72%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 46%, #000 72%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } } /* ── 28. D20 · «1000» СТОЛБИКОМ ПО ОДНОЙ ЦИФРЕ ─────────────────────── .sg-mark--3 стоит на left:100% внутри .sg-scale-bar, доступная ширина shrink-to-fit там равна нулю, поэтому блок схлопывался до min-content - до одного глифа, и «1000» читалось как 1/0/0/0 в четыре строки. Одна строка: nowrap. У карточки overflow visible, метка помещается. */ #control-stack .stack-card--05 .sg-mark, .sg-scale-bar .sg-mark { white-space: nowrap !important; } /* ── 29. M11 + MM1 · ОДНА ВЫСОТА У ШЕСТИ КАРТОЧЕК ─────────────────── Высота карточки считается как 22 + копия + вторая строка грида + 16, где строка жёстко 300px (v100-final-mobile.css:427), а .stack-visual 330px (v101-final-pass.css:514) и прижат к низу строки (карточка на align-items:end), вылезая на 30px вверх. Копия у шести карточек разная (188…230px), поэтому и карточки выходили разные: 570/528/528/437/366/546. r24: высоту задаёт растяжка в карусели (секция 4), вторая строка берёт весь остаток (1fr), визуал по-прежнему на 30px выше строки - графика тянется вместе с коробкой (она вся на процентах), пустого хвоста нет. Проценты в height у визуала считаются от строки, поэтому calc(100% + 30px) повторяет прежний вынос. Минимум строки 300px - ровно прежний, иначе fr не участвует в собственной высоте карточки и ряд садится до 431px. */ @media (max-width: 720px) { #control-stack .stack-card, #control-stack .stack-card--04, #control-stack .stack-card--05 { grid-template-rows: auto minmax(300px, 1fr) !important; } #control-stack .stack-card > .stack-visual, #control-stack .stack-card--04 > .stack-visual, #control-stack .stack-card--05 > .stack-visual { height: calc(100% + 30px) !important; min-height: 0 !important; } } /* ── 30. D6 · НОМЕР И ПОДПИСЬ ШАГА НА РАЗНОЙ ВЫСОТЕ ────────────────── .safe-step-link приходит колонкой из v74-scenes.css:316, поэтому justify-content управлял вертикалью и прижимал подпись к верху: центр подписи оказывался на 14.9px выше центра номера при допуске 4. Разворачиваем ссылку в строку - подпись центрируется по своей коробке, а коробка уже стоит по центру строки грида вместе с номером. */ #safe-install .safe-step-link, .safe-install .safe-step-link, .safe-path .safe-step-link { flex-direction: row !important; align-items: center !important; } /* ── 31. M9 · ЗОЛОТОЕ ПОЛЕ ФЛОТА НА ТЕЛЕФОНЕ ───────────────────────── Шеф: «множество майнеров появляется из темноты». На телефоне поля не было вообще - v74-scenes.css:400 гасил .fleet-wavefield на ≤900px, а на десктопе поле шло с базой .16 под контейнером opacity .38, то есть эффективно .06. Возвращаем поле на телефон, поднимаем базу до .46 (кадры keyframes уже подняты в блоке 12) и снимаем душилку контейнера. Полоса-подпись .fleet-waveband на телефоне остаётся скрытой - она рубила кадр светлым брусом. */ #fleet .fleet-wavefield i, .vgo-array .fleet-wavefield i { background: rgba(231, 199, 125, .46); } /* На десктопе поле уже принято шефом с душилкой .38 - там не трогаем, иначе получится тот самый светлый брус поперёк кадра. Правка только на телефоне, где поля не было вовсе. */ @media (max-width: 900px) { #fleet .fleet-wavefield, .vgo-array .fleet-wavefield { display: grid !important; width: 88% !important; grid-template-columns: repeat(12, 1fr) !important; gap: 4px 5px !important; opacity: 1 !important; } #fleet .fleet-wavefield i, .vgo-array .fleet-wavefield i { height: 9px; } } /* ── 32. M14 · НАДПИСЬ НА ОБЛОЖКЕ ДЕКА НА ТЕЛЕФОНЕ ────────────────── Кегль 22px приходит из v101-final-pass.css:139 селектором #presentations .deck-cover-inner b - (1,1,1), поэтому мой мобильный .deck-cover-inner b (0,1,1) его не перебивал. Повторяем силу. Счёт на 390: коробка блока после width:auto 42.9…315.1, за вычетом padding 12px остаётся 248px против 229px надписи при 20px. */ @media (max-width: 720px) { #presentations .deck-cover-inner b { font-size: 20px !important; } #presentations .deck-cover-inner span, #presentations .deck-cover-inner em { font-size: 9px !important; } } /* ── 33. D17 · ПЛАШКИ 25 И 30 НА ПЛАНШЕТЕ ─────────────────────────── Диапазон 721-1120 шёл по десктопной ветке, где cqw-кегли упираются в свой минимум (strong 34px, span 9px) при плашке шириной 88px - текст уезжал на майнера слева и за периметр справа. Отдельная ветка с кеглями по ширине окна и с той же силой селектора, что у v79. */ @media (min-width: 721px) and (max-width: 1120px) { .miner-identity--a08 .a08-root .slab-hosting, .miner-identity--a08 .a08-root .slab-fleet { width: 28% !important; max-width: 28% !important; } .miner-identity--a08 .a08-root .slab-hosting { left: 0 !important; right: auto !important; } .miner-identity--a08 .a08-root .slab-fleet { right: 0 !important; left: auto !important; } .miner-identity--a08 .a08-root .slab-hosting > span, .miner-identity--a08 .a08-root .slab-fleet > span, .miner-identity--a08 .a08-root .slab-hosting b > span, .miner-identity--a08 .a08-root .slab-fleet b > span { font-size: clamp(6.5px, .9vw, 9px) !important; letter-spacing: .12em !important; } .miner-identity--a08 .a08-root .slab-hosting > b, .miner-identity--a08 .a08-root .slab-fleet > b, .miner-identity--a08 .a08-root .slab-hosting b strong, .miner-identity--a08 .a08-root .slab-fleet b strong { font-size: clamp(20px, 2.8vw, 30px) !important; } } /* ── 34. M19 · ФАК НА ТЕЛЕФОНЕ ────────────────────────────────────── (а) Портал наезжал на заголовок раздела: .faq-portal получает position:relative из v101-final-pass.css:333, но top:116px из v73-polish.css:645 остаётся в силе и сдвигает картинку на 116px вниз, прямо на «ACTIVATION / BEFORE THE FIRST INSTALL» и h2. Сдвиг снимаем. (б) Кат: шеф «фак стал 10 вопросов нахуя». На телефоне кат вернулся - видно пять вопросов и кнопка «Show the other 5 questions», остальные пять открываются по ней (разметка и обработчик в v73-faq.js целы). Раскрытие всех десяти остаётся только на планшете 721…1024. */ @media (max-width: 1040px) { #activation .faq-portal { top: auto !important; } /* (в) весь блок читается одной колонкой слева внизу: 01, под ним QUESTION, под ним подпись. Раньше подпись стояла справа на той же строке, что и номер. Зазор между номером и подписью 6px. */ #activation .faq-portal-num { bottom: calc(7% + 22px) !important; } #activation .faq-portal-cap { left: 8% !important; right: auto !important; bottom: 7% !important; max-width: 70% !important; text-align: left !important; } } @media (min-width: 721px) and (max-width: 1024px) { #activation .faq-more[hidden], #activation [data-faq-more][hidden] { display: contents !important; } #activation .faq-toggle, #activation [data-faq-toggle] { display: none !important; } } /* ── 35. M5 · МАЙНЕР СТОИТ НА ЛОГОТИПЕ В ОРБИТЕ ХИРО ───────────────── Замер по листовым элементам на 390 с замороженной орбитой (?orbit-time=): пара M4/L3b держит пересечение 27…45% площади надписи на всём цикле, а на второй половине круга сходятся уже сами знаки - M4/L3i до 68%. Причина найдена: лок-ап .v69-typelogo стоит в гриде, чью единственную колонку раздувает до 100px надпись VNISH GLOBAL (nowrap). Элемент при этом шириной 22px, поэтому и знак, и надпись рисуются на 39px ПРАВЕЕ своей точки орбиты. Движок сцены разводит билборды по этим точкам (stage.dataset.collisionModel), и весь его расчёт мимо. Правка геометрии, без удаления чего-либо: 1) колонка грида равна самому элементу, знаку задан размер в процентах от него - знак прежнего размера, но снова стоит на своей точке; 2) надпись ужата по межбуквенному просвету и масштабу и подтянута к знаку, чтобы лок-ап помещался в габарит знака; 3) майнеры на телефоне чуть меньше - на 390px орбита им тесна. Проверено на 390 и 430 по десяти фазам круга (0,4,8,12,16,20,24,28,32,35) с замороженной орбитой и двумя живыми прогонами по 10 сэмплов: пар с устойчивым пересечением ≥10% площади не осталось. Единичные всплески дают импульсы v69RelayPop (1.05s) - короче порога в 2 секунды. */ @media (max-width: 720px) { .hero--v53 .global-orbit-logo .v69-typelogo { grid-template-columns: minmax(0, 1fr) !important; } .hero--v53 .global-orbit-logo .v69-typelogo img { width: 275% !important; max-width: none !important; } .hero--v53 .global-orbit-logo .v69-typelogo b { letter-spacing: 0 !important; transform: scale(.5) !important; translate: 0 -7px !important; } .hero--v53 .global-orbit-miner { width: clamp(19px, 5.2vw, 23px) !important; } } /* ══════════════════════════════════════════════════════════════════════ X1 · ПЕЧАТЬ КАТАЛОГА НА ТЕЛЕФОНЕ: ПОДПИСЬ ЛЕЗЛА В «VERSIONS» Замер 390x844: SPAN «VERSIONS» y 5575.0..5589.6, а .seal-bottom-label («OFFICIAL RELEASE ORIGIN», кегль 6.26px) y 5580.1..5589.8 - наложение 93.9x9.5px, на 360 - 86x8.5px. Держится вне зависимости от фазы вращения, то есть это не кадр анимации. Причина: середина печати (бейдж + лок-ап + три слова) центрируется в круге, а нижняя подпись прибита к bottom: 14.3%. На десктопе круг 470px и между ними воздух; на телефоне круг 274px, лок-ап при этом занимает 76% его ширины - середина вырастает и садится на подпись. Та же подпись к тому же уже режется краем круга: полухорда на её высоте 84.6px против половины строки 92.7px. Лечим геометрией, ничего не удаляя из разметки: на телефоне снимаем нижнюю подпись - ровно так же, как v100-final-mobile.css уже поступает с .seal-ring-label и .source-verified b, и по той же причине (кегль 6px на телефоне не читается). Сама печать, лок-ап, фаски и вращение целы. Заодно даём трём словам нормальный интерлиньяж: при line-height .92 строчные боксы находили друг на друга на 1.1-1.5px. */ @media (max-width: 720px) { #downloads .seal-bottom-label { display: none !important; } #downloads .seal-inner strong span { line-height: 1.12 !important; } } /* ── 46. MM3 · ПРАВОВАЯ СТРОКА ЛЕВЕЕ ВСЕГО ФУТЕРА ─────────────────── Шеф: «отодвинь от левого края 3 документа чуть-чуть». .footer-legal - такой же .shell, как .footer-grid, но v99-touch.css:264 гасит ему margin-inline (правка «документы влево» шла вместе с логотипом и промахнулась мимо цели): колонки и логотип стоят на x=16, а Terms / Privacy / Cookie - на x=0, то есть на 16px левее всей колонки футера и вплотную к краю экрана. Возвращаем общий отступ .shell; содержимое строки при этом остаётся прижатым влево (justify-content там свой). */ @media (max-width: 720px) { .site-footer .footer-legal { margin-inline: auto !important; } } /* ── 47. DW1 · СЛОВО GLOBAL НА ОБЛОЖКЕ ДЕКА СТОИТ ЛЕВЕЕ ЦЕНТРА ────── Шеф: «в обложке дека слово GLOBAL чуть левее центра, лок-ап ровно по центру». Замер 1440: центр обложки x=746.0, чернила GLOBAL 617..862 - центр 739.5, то есть 6.5px левее. Причина не в разметке: letter-spacing .32em ставится и ПОСЛЕ последней буквы, поэтому центрированная строка всегда съезжает влево на половину трека. v70-social.css:182 гасил это через text-indent: .32em, но text-indent действует только на ПЕРВУЮ строку - «VNISH» ловил компенсацию, а перенесённый «GLOBAL» нет. Меняем компенсацию на построчную: индент убираем (он же перекашивал первую строку вправо) и сдвигаем весь блок на половину трека .16em - это ровно тот же 6.9px при 43.2px и 3.2px при 20px, и он одинаково ложится на обе строки. Геометрия потока не меняется: transform не участвует в раскладке, перенос строк остаётся прежним. Тот же дефект у строки года (letter-spacing .3em, компенсации не было вовсе). */ #presentations .deck-cover-inner b { text-indent: 0 !important; transform: translateX(.16em); } #presentations .deck-cover-inner em { transform: translateX(.15em); } /* ── 48. DW2 · НА ТЕЛЕФОНЕ ЛОГО И ГОД НЕ ВЛЕЗАЛИ В ОБЛОЖКУ ────────── Шеф: «в дек лого не влезло и год не влез». Замер 390: столбик обложки (лого + VNISH GLOBAL + OFFICIAL PRESENTATION + линейка + 2026 EDITION) занимает 132px по высоте, а внутренняя золотая линия рамки при высоте обложки 170px даёт всего 126px - лого выходило за неё сверху на 2.9px, год снизу на 2.9px, оба сидели прямо на линии. Ничего не режем и кегли не трогаем: поднимаем высоту самой обложки со 170px (v101-final-pass.css:520) до 200px. Тогда внутри линии 156px против 132px столбика - запас 12px сверху и снизу, против бокса обложки 34px. Сила селектора и диапазон те же, что у v101. */ @media (max-width: 760px) { #presentations .deck-cover { min-height: 200px !important; } } /* ── 49. DW3 · ПАНЕЛЬ ДЕКА СТОЯЛА НА 16px ЛЕВЕЕ ЦЕНТРА ────────────── Шеф: «панель дека смещена влево примерно на 16px». Замер 390: .shell стоит 16..374, а .deck-hall - 0..358, то есть слева впритык к экрану, справа дыра 32px, центр смещён на -16px. Столкнулись две правки. v68-content.css:173 растягивает консоль на всю ширину экрана отрицательными margin-inline (-16px), а v95-flagship.css:75 позже прибил ей max-width: 100% («обложка вылезала за колонку»). Ширина упёрлась в 358px, а лишние 32px по правилу переопределённого уравнения ушли целиком в правое поле - отсюда сдвиг ровно на 16px. Снимаем отрицательные поля у панели дека: она встаёт по .shell, 16..374, симметрично. Ширина содержимого не меняется (те же 326px внутри padding: 16px), сдвигается только сама панель. */ @media (max-width: 760px) { #presentations .briefing-console.deck-hall { margin-inline: 0 !important; } } /* ── 47. MM1b · ГРАФИКА 04 И 05 ЗАПОЛНЯЕТ РОВНУЮ КАРТОЧКУ ─────────── После выравнивания высот (секции 4 и 29) коробка картинки у 04 и 05 выросла с 215 и 168 до 348 и 372px, а сама графика осталась прежней: у вентиляторной стены появился зазор 61px снизу, у счётчика волн - по 119px сверху и снизу, то есть та самая пустота, из-за которой когда-то и ужимали карточки. Тянем графику, ничего не удаляя: стена берёт ширину под высоту коробки (пропорция 1026/1017 своя), счётчик раскладывает свои пять строк по всей высоте вместо центрированного столбика с фиксированным gap. */ @media (max-width: 720px) { #control-stack .stack-card--04 .sg-fanwall { width: min(92%, 310px) !important; } #control-stack .stack-card--05 .sg-scale { align-content: space-evenly !important; padding-block: 6px; } } /* ══════════════════════════════════════════════════════════════════════ КРУГ 3 · 03.08 · ТРИ СЦЕНЫ В ШЕСТИ КОНТРОЛЯХ НА ДЕСКТОПЕ 1440 Ничего не удалено: только позиция, размер и свечение. ══════════════════════════════════════════════════════════════════════ */ /* ── 50. DA1 · ВЕНТИЛЯТОРНАЯ СТЕНА В КАРТОЧКЕ 04 ───────────────────── Шеф: «Push performance without losing the machine - не выезжает в центр и не горит». Замер на 1440 (карточка 728…1400, коробка сцены .sg-airflow 1068…1376.2, её центр 1222.1): стена стояла 1231…1452.9, то есть ЛЕВЫМ краем на центре сцены и на 52.9px за правым краем карточки, при opacity .4. Причина в v69-stack.css:551: покой у .sg-fanwall - это translate(4%,-50%) и opacity .4, а центр и полная яркость живут ТОЛЬКО в кадре «to» анимации sgArriveRight, которую включает класс .is-current. Класс же висит на одной карточке за раз (v53-journey.js:50), поэтому стоит шефу пролистнуть дальше - стена уезжает обратно к краю и гаснет. Меняем не анимацию, а состояние покоя: центр и яркость становятся базой. Объявления без !important, поэтому анимация прилёта по-прежнему отыгрывает поверх (в каскаде анимация выше обычного объявления автора) и заканчивается там же, где стоит база. Новая посадка: ширина 84% = 258.9px, центр 1222.1 → стена 1092.6…1351.5, целиком внутри карточки (запас 48.5px до правого края), боковой прокрутки не даёт. Свечение: базовый opacity .4 → 1 плюс тёплый ореол 34px поверх прежней тени, дышащий .sg-fanhalo не тронут. */ @media (min-width: 761px) { #control-stack .stack-card--04 .sg-fanwall { width: min(84%, 360px); transform: translate(-50%, -50%); opacity: 1; filter: drop-shadow(0 26px 60px rgba(0, 0, 0, .6)) drop-shadow(0 0 34px rgba(242, 195, 106, .3)); } } /* ── 51. DA3 · ПЕРЕКЛЮЧАТЕЛЬ В КАРТОЧКЕ 06 ─────────────────────────── Шеф: «A clear way forward - развалилась нахуй, цифры и буквы написаны вертикально». Первую половину причины сняли в секции 2 (overflow-wrap: anywhere больше не течёт в сцены и не обнуляет min-content). Осталась вторая, чисто арифметическая. .sg-switch - грид «1fr auto 1fr» шириной 308.2px. Средняя колонка это тумблер clamp(150px, 13vw, 210px) = 187.2px, зазоры clamp(14px, 1.6vw, 30px) = 23px x2. На две текстовые колонки оставалось 308.2 - 187.2 - 46 = 75px, по 37.5px на каждую - в такую ширину не влезает даже «240». Ужимаем тумблер и зазоры, текст получает нормальную колонку: зазоры 10px x2, тумблер clamp(104px, 8.4vw, 128px) = 121px → на колонку (308.2 - 121 - 20) / 2 = 83.6px Проверка по чернилам на 1440: «240» при кегле 43.2px и трекинге -.04em занимает 66px из 83.6 - в одну строку; самое длинное слово подписи «behaviour.» при 10px - 50px из 83.6. Тумблеру 121x60.5 хватает на обе метки: .sg-switch-label шириной 46% = 55.7px против 33px чернил «STOCK» / «VNISH». Сам переключатель, ползунок, состояния и подпись route back целы. */ @media (min-width: 761px) { #control-stack .stack-card--06 .sg-switch { gap: 10px !important; } #control-stack .stack-card--06 .sg-switch-pill { width: clamp(104px, 8.4vw, 128px) !important; height: clamp(52px, 4.2vw, 64px) !important; } #control-stack .stack-card--06 .sg-switch-state span { font-size: 10px !important; line-height: 1.4; } #control-stack .stack-card--06 .sg-switch-state small { letter-spacing: .18em !important; } } /* ── 52. DA3b · ЗАГОЛОВОК КАРТОЧКИ 06 УПИРАЛСЯ В ЦИФРЫ ─────────────── Вторая половина «развалилась»: у 06 самый длинный заголовок из шести, и он единственный дотягивался до сцены. Замер на 1440: коробка .stack-copy 783…1103.3, а сцена начинается на 1074.2 - заголовок лез в неё на 29.1px, поэтому строка «A clear way forward. A» упиралась в «Stock behaviour…» без единого пикселя зазора, а перенос вставал после одинокой «A». Даём копии правую границу: 38% карточки = 255.4px, строка кончается на 1038.4 - до сцены 35.8px чистого поля. Заголовок теперь ломается по смыслу («A clear way forward.» / «A clear way back»), и то же самое получают все десять локалей, где строка длиннее английской. Кегли и текст не тронуты, правило только для этой карточки. */ @media (min-width: 1025px) { #control-stack .stack-card--06 > .stack-copy { max-width: 38% !important; } } /* ══ 52. МОБИЛЬНЫЕ СЦЕНЫ 390x844 · РАЗБОР ШЕФА MS1-MS5 ══════════════ Пять сцен, которые шеф разнёс отдельно по телефону. Хиро не тронут: ни одно правило ниже не касается .hero--v53 и первого экрана. Всё живёт в (max-width: 760px) - той же обёртке, что у v100/v101, и с селекторами не слабее, иначе не побеждает. */ /* ── 52.1 ДАШБОРД: «правильно стоит но обрезан сверху» ─────────────── Замер до правки, 390x844: сцена .telemetry-stage 390x830 с overflow: hidden, а панель .dashHalo прибита к НИЗУ сцены (v71-roidash.css: bottom: 3svh) и растёт вверх. Высота панели 807px, на низ уходит 25.3px - верх панели встаёт на -2.3px и режется краем сцены. Хуже другое: 830px сцены не влезают в экран под фиксированной шапкой 70px (свободно 774px), поэтому целиком её не видно НИКОГДА - докручиваешь низ, верх уезжает под шапку. Лечим обе причины разом: 1. якорь панели переносим на ВЕРХ сцены (top: 0, bottom: auto) - сверху резать больше нечем; 2. сцену ужимаем до 690px и вписываем в неё панель целиком. Панель не «сужаем»: ширину держим прежней. Раскладку считаем на 441px, затем масштабируем 0.83 - на экране остаётся те же 366px ширины, но высота падает с 807 до 670. Отсюда calc(...) - при любой ширине телефона отрисованная ширина равна min(94vw, 380px). */ @media (max-width: 760px) { #dashboard .telemetry-stage { height: 690px !important; min-height: 0 !important; margin-top: 18px !important; } #dashboard .dashHalo { top: 0 !important; bottom: auto !important; left: 50% !important; right: auto !important; width: calc(min(94vw, 380px) / .83) !important; transform: translateX(-50%) scale(.83) !important; transform-origin: 50% 0 !important; } } /* ── 52.2 ПЕЧАТЬ: «не по центру и не в полном масштабе» ────────────── Замер: .vault-seal 358px и по центру, а сцена внутри .seal-stagelet 283x300 и прижата влево - центр печати уходит на 37.5px левее центра экрана. Причина арифметическая: v101 держит stagelet height: 300px, а у него aspect-ratio 1/1.06, значит ширина = 300/1.06 = 283px. Отдаём сцене всю ширину колонки, высоту считаем по пропорции. Лок-ап и кольцо внутри свёрстаны в процентах, поэтому растут сами: печать 241.8 → 305.9px, лок-ап 177.7 → 225.2px, смещение центра 0. */ @media (max-width: 760px) { #downloads .vault-seal { height: auto !important; min-height: 0 !important; } #downloads .seal-stagelet { width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1.06 !important; margin-inline: auto !important; } } /* ── 52.3 «PROVE THE GAIN ON ONE MINER FIRST»: пустота и лого ──────── На телефоне v101-final-pass.js переносит сцену #act-paths внутрь #safe-install - шеф и ругает её здесь. Замер: кадр 358x300, а всё содержимое (майнер, ядро, флот) занимает полосу 98.4…201.6 - пусто 98.4px сверху и 98.4px снизу, две трети кадра. Ширину трогать нельзя: содержимое уже занимает 340px из 358, шире не растянуть. Значит режем сам кадр: 300 → 160px. Элементы стоят на top: 50% с translateY(-50%), поэтому остаются по центру, пустота падает до 28px сверху и снизу (17.7% против 32.8%). Второе: «налепленное лого». Подписи в ядре свёрстаны в процентах от макета на 300px (img 41%, b 55.5%, small 64%); на 112px это 47.9/62.2/71.7px при строке в 16px - буквы лежат на знаке и друг на друге. Разводим по вертикали и уменьшаем кегль. */ @media (max-width: 760px) { #safe-install #act-paths, #safe-install #act-paths .cinema-pin--paths, #safe-install #act-paths .cinema-viewport, #safe-install #act-paths .cinema-stage--paths { height: 160px !important; min-height: 0 !important; } #safe-install #act-paths .paths-node { transform: translate(-50%, -50%) scale(.72) !important; } #safe-install #act-paths .paths-node img { top: 33% !important; } #safe-install #act-paths .paths-node b { top: 57% !important; font-size: 11px !important; } #safe-install #act-paths .paths-node small { top: 75% !important; font-size: 9px !important; } } /* ── 52.4 ПРЕМИЯ РАЗРАБОТЧИКАМ: «уёбанская из-за размера» ──────────── Замер: .anim09--component 354px при экране 390 (90.8%), внутри canvas 354x310 в буфере, но CSS из секции 21 давит его до 354x265.5 через aspect-ratio 4/3 - картинка ещё и сплющена по вертикали на 14%. Снимаем сплющивание (канвас на всю сцену) и отдаём сцене почти всю ширину экрана: calc(100vw - 16px) = 374px = 95.9%. Высота 330px. Сам трофей крупнеет в v79-anim09.js (мобильный scale рига). */ @media (max-width: 760px) { #authority .anim09--component { width: calc(100vw - 16px) !important; max-width: none !important; height: 330px !important; min-height: 330px !important; margin: 6px auto 0 !important; } #authority canvas, .authority canvas { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; max-height: none !important; } } /* ── 52.5 МУЗЕЙ: «нихуя ни как на десктопе» ────────────────────────── Сравнение кадров. 1440: рамка 1360x570, iframe 1358x870 (ландшафт 1.56), видно строки 285…855 - зал широкий, пять машин в ряд, год на подножке, под ним табличка модели. 390: тот же документ грузился в iframe 356x640 - ПОРТРЕТ 0.56. Музей свёрстан на vw/vh, поэтому в портрете ниши вытягиваются вверх, машины проваливаются вниз, а верхняя треть кадра уходит под пустые лучи. Композиция другая - шеф прав дословно. Лечим причину: даём iframe ландшафтный логический кадр 760x680 и ужимаем его в ширину телефона (358/760 = 0.4711). Внутри документа ширина 760 > 700, значит работает та же «широкая» ветка стилей, что и на десктопе, а не телефонная. Высоту берём 680 - ровно min-height музея, иначе он не влезает в себя и режет табличку моделей. Кроп повторяет десктопный: сверху снимаем 223px из 680 (32.8%, на десктопе 285 из 870 - 32.8%), высота рамки 210px. Контроль: полоса зала 75.6% высоты документа против 77% на десктопе; подпись модели 16px логических → 7.5px на экране, то есть 1.9% ширины кадра против 1.35% на десктопе - относительно даже крупнее. 03.08, круг 3 (M19). Кадр 760x680 дал верную композицию, но не верные таблички: 760 - это не десктопные 1358, поэтому внутри зала включались его собственные ветки (max-width:1100 и max-height:720), а кегли и отступы таблички упирались в пиксельные полы clamp() - имя модели ломалось на две строки, строка характеристики уходила за табличку и срезалась («200 TH/s · T» вместо «UP TO 200 TH/s · 17.5 J/TH»). Пропорциональный кегль это чинит лишь наполовину: на 8px шрифт рисуется на 19% шире своей доли (округление адвансов), у S19 строка всё равно вылезала на 12.9px за рамку таблички. Убираем причину целиком: логический кадр берём РОВНО десктопный - 1358x870, кроп тот же (-285px из 870), а ужимаем его до ширины рамки уже готовым, поэтому телефон показывает буквально десктопный кадр, уменьшенный в 3.8 раза: те же ветки стилей, тот же кегль, имя в одну строку, характеристика целиком внутри таблички. Высота рамки следует за пропорцией десктопного окна: 570/1358 от ширины = 149.4px при телефоне 390 (было 210px при другой пропорции). Множитель считается от var(--shell), поэтому кадр точно ложится в рамку на любом телефоне; для движка без деления длин в calc() оставлен фиксированный запасной вариант под 390px. */ @media (max-width: 760px) { #about .about-museum, #about .about-museum-frame, #about .vgo-scenecrop, #about .about-scene, #about figure { height: 151px !important; max-height: none !important; overflow: hidden; } #about .about-museum-frame iframe { width: 1358px !important; max-width: none !important; height: 870px !important; margin-top: 0 !important; transform: scale(.2621) translateY(-285px) !important; transform-origin: 0 0 !important; } @supports (line-height: calc(10px / 2px)) { #about .about-museum, #about .about-museum-frame, #about .vgo-scenecrop, #about .about-scene, #about figure { height: calc((var(--shell) - 2px) * 570 / 1358 + 2px) !important; } #about .about-museum-frame iframe { transform: scale(calc((var(--shell) - 2px) / 1358px)) translateY(-285px) !important; } } } /* ── 52.6 КАРТОЧКА 02: «OFFICIAL BUILDS · FREE» НАЕЗЖАЛА НА «MODEL + BOARD» Пункт 16 увёл вертикальную метку к самому краю карточки (15…27px от правого борта) - на 1440 это дало 22px чистого зазора, и там всё принято. Но зазор держится только на широком экране: сцена приколота к правому борту (.stack-visual right:3.4%, ядро .sg-core7 right:-3%), а плашка FREE - фиксированной ширины 152px, поэтому чем уже окно, тем глубже она заходит в колонку метки. Замер чернил «FREE» → «MODEL»: 1025 → -4.2px, 1060 → -1.3, 1120 → -0.2, 1180 → +0.4, 1240 → +5.4, 1280 → +8.7, 1360 → +15.4, 1440 → +22.0. Зависимость линейная, 0.063px зазора на каждый пиксель ширины окна. Лечим ровно этой линейкой: плашку сдвигаем влево на (1440 - ширина окна) * 0.055, не больше 26px. На 1440 множитель равен нулю - принятый кадр не меняется ни на пиксель, а к 1025 плашка отходит на 22.8px и зазор становится ровным по всему диапазону. Сцену, кольцо и плашки сборок не трогаем: двигается только подпись под кольцом. Ниже 1025 работает карусельная раскладка (там зазор +15.9 на 1024 и +1.2 на 768) - её правило не касается. */ @media (min-width: 1025px) { #control-stack .stack-card--02 .sg-core7-free { transform: translateX(calc(-50% - clamp(0px, (1440px - 100vw) * 0.055, 26px))) !important; } } /* ── АВАРИЙНОЕ · 04.08 · БЕЛЫЙ ЭКРАН И ПЕРЕЗАГРУЗКА У МУЗЕЯ ────────── Шеф: на двух мобильных браузерах при прокрутке к музею страница выбрасывает в перезагрузку. Это вылет вкладки по памяти. Замер: 67 МБ распакованных картинок на странице плюс сцена музея, которая в этот момент декодирует пять снимков по 1254x1254. Что сделано: снимки музея переведены с PNG на WebP (2.0 МБ -> 0.7 МБ), 25 картинок ниже первого экрана получили ленивую загрузку и асинхронный декод. Здесь - третья мера: браузер получает право не держать в памяти то, что далеко за экраном. Размер задан в пикселях, а не в vw: с vw контейнер схлопывался (грабля 12.07). Сцены с canvas НЕ трогаем - у них ломается инициализация. */ @media (max-width: 720px) { #about, #presentations, #models { content-visibility: auto; } #about { contain-intrinsic-size: auto 1180px; } #presentations { contain-intrinsic-size: auto 900px; } #models { contain-intrinsic-size: auto 620px; } } /* ── БЕЛАЯ ВСПЫШКА ПРИ ЗАГРУЗКЕ СЦЕН ──────────────────────────────── Шеф 04.08: «при включении анимации музея сначала загорается белый экран, это для всех версий баг». Причина: iframe до применения своих стилей рисуется белым - это умолчание браузера. Красим сам элемент iframe в фирменный чёрный, тогда до первого кадра сцены виден фон страницы, а не белая вспышка. Инлайновый стиль нельзя - строгий CSP корня, поэтому только отсюда. */ iframe { background-color: #030405; color-scheme: dark; } /* ══ 54. ПЛАНШЕТ 721-1180 · РАЗБОР ШЕФА 04.08 (P1-P3) ═══════════════ Приказ дословно: «не меняй мобилку и десктоп - меняй только под планшет версию». Поэтому ВСЁ ниже живёт в одном диапазоне (min-width: 721px) and (max-width: 1180px): телефон (≤720) и десктоп (≥1181) не задеты ни одним правилом. Целевые кадры - айпад 10": 810x1080 портрет и 1080x810 альбом. Хиро не тронут: ни один селектор ниже не касается .hero--v53. */ /* ── 54.1 P1 · ПОЛЕ ФЛОТА «ВЫЕЗЖАЕТ ИЗ ТЕМНОТЫ» ───────────────────── Замер. Ячейки .fleet-wavefield i уже имеют базу rgba(231,199,125,.46) и поднятые кадры fleetWave (блоки 12 и 31) - это глобально. Гасит их контейнер: v79-boss.css:946 .vgo-array .fleet-wavefield { opacity:.38 }. Блок 31 снимает душилку только на ≤900px, поэтому портрет 810 уже светлый, а АЛЬБОМ 1080 - нет: замер на 1080 давал opacity 0.38, то есть эффективная альфа ячейки .46 x .38 = .17, поле проступает только там, где по нему прошла волна. Отсюда «выезжает из темноты». Переносим в планшетный диапазон ровно ту же логику, что на телефоне: душилка снята, поле 88% ширины, 12 колонок. Заодно портрет и альбом перестают отличаться друг от друга сеткой (было 12 колонок против 16). Кадры анимации не трогаем - волна остаётся волной. */ @media (min-width: 721px) and (max-width: 1180px) { #fleet .fleet-wavefield, .vgo-array .fleet-wavefield { display: grid !important; width: 88% !important; grid-template-columns: repeat(12, 1fr) !important; gap: 4px 5px !important; opacity: 1 !important; } #fleet .fleet-wavefield i, .vgo-array .fleet-wavefield i { height: 10px !important; background: rgba(231, 199, 125, .46) !important; } } /* ── 54.2 P2 · ДАШБОРД: КОПИ СЛЕВА, СЦЕНА СПРАВА ──────────────────── Шеф: «текст дашборда стоит отдельно вверху и очень далеко». Замер до правки, 1080x810: .telemetry-copy - колонка 248px, стоящая ПО ЦЕНТРУ строки (x 416…664), низ текста на 3195, а панель .dashHalo начинается только на 3501 - 306px чёрного разрыва. Сама панель при этом x 395…1237 при экране 1080, то есть 157px уезжают за правый край и режутся overflow:hidden секции. На 810x1080 копи растянута на всю ширину сверху, сцена под ней - тоже «отдельно вверху». Причина в том, что на планшете копи теряет абсолютную посадку (v71-roidash.css:163 position:static, v101-final-pass.css:79 position:relative), а панель остаётся абсолютной с левым отступом max(28vw,395px) от десктопной раскладки. Две системы координат. Делаем как на десктопе от 1280: секция - грид из двух колонок, копи в первой, сцена во второй, панель внутри сцены встаёт в поток. Тогда высота сцены равна высоте панели, разрыв исчезает арифметически, а не подбором отступов, и панель целиком в кадре. */ @media (min-width: 721px) and (max-width: 1180px) { #dashboard.telemetry[data-telemetry-v53] { display: grid !important; grid-template-columns: clamp(180px, 24%, 285px) minmax(0, 1fr); align-items: start; column-gap: clamp(14px, 1.8vw, 26px); min-height: 0 !important; /* !important обязателен: секции держат padding-inline: 0 шорткатом padding из v52 - без него копи вставала вплотную к краю экрана */ padding-inline: clamp(14px, 2vw, 28px) !important; } #dashboard.telemetry[data-telemetry-v53] .telemetry-copy { position: relative !important; z-index: 6; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; grid-column: 1; grid-row: 1; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; transform: none !important; } #dashboard.telemetry[data-telemetry-v53] .telemetry-copy h2 { max-width: none !important; font-size: clamp(26px, 3vw, 40px) !important; line-height: 1.04 !important; } #dashboard.telemetry[data-telemetry-v53] .telemetry-copy > p:last-child { max-width: none !important; margin-top: 16px !important; } #dashboard.telemetry[data-telemetry-v53] .telemetry-stage { position: relative !important; top: auto !important; grid-column: 2; grid-row: 1; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; } /* панель в поток: её высота и задаёт высоту сцены */ #dashboard .vg-roidash.dashHalo { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; max-width: none !important; transform: none !important; } /* zoom .82/.9 из v71-boss9 ужимал панель под старую широкую посадку - в своей колонке она считается по месту */ #dashboard .vg-roidash .dash { zoom: 1 !important; } } /* ── 54.3 P3 · ШЕСТЬ КОНТРОЛЕЙ: КОПИ И СЦЕНА НАЕЗЖАЛИ ДРУГ НА ДРУГА ─ Шеф: «6 менюшек анимации какие-то припизднутые, особенно последняя - наезды и неправильное отображение». Замер, 810x1080 (карточки лежат каруселью, карточка 560x650, паддинг 54): коробка .stack-copy 55…334, абсолютная .stack-visual 263…542. Пересечение 71px - и так у ВСЕХ ШЕСТИ карточек, не только у последней. Отсюда «наезды»: у 01 золотой шильд ложится на «work harder for every watt», у 03 дуга режет «maximum output», у 06 заголовок «A clear way forward» упирается в «200 TH/s». На 1080x810 (двухколоночный грид, карточка 532) то же самое: копи 55…296, сцена 250…515, пересечение 46px. Арифметика: 560 - 2x54 = 452 на содержимое, а копи и сцена просят 279 + 279 = 558. Раздаём дорожки честно - паддинг 32, копи 44% содержимого, сцена 46% ширины карточки с отступом 6%. Отступ 6%, а не 2%: у правого края карточки стоит вертикальная метка («A ROUTE BACK», «CORE / VNISH» и т.д.) шириной 16px, и при 2% правая колонка сцены 06 ложилась прямо на неё. 810: копи 32…250, сцена 268.8…526.4, метка от 529 1080: копи 32…238, сцена 255.4…500.1, метка от 527 Между копи и сценой 18.8 и 17.4px чистого поля, до метки 2.6 и 27. Сцена ужимается на 7.7% - это цена того, чтобы текст и инфографика перестали лежать друг на друге; кегли и тексты не тронуты. */ @media (min-width: 721px) and (max-width: 1180px) { #control-stack .stack-card { padding-inline: 32px !important; } #control-stack .stack-card > .stack-copy, #control-stack .stack-card--06 > .stack-copy { width: 44% !important; max-width: 44% !important; min-width: 0; } #control-stack .stack-card > .stack-visual { width: 46% !important; right: 6% !important; } /* карточка 02: подписи PERFORMANCE и EFFICIENCY стоят по углам сцены и набраны кеглем на нижней границе clamp(8px, 1cqw, 12px) - при сузившейся сцене они перестали масштабироваться и сошлись вплотную (замер: 95…173 против 165…228). Отдаём им трекинг и кегль по месту. */ #control-stack .stack-card--02 .a11-marks--stack .a11-mark > span { font-size: 7px !important; letter-spacing: .1em !important; } #control-stack .stack-card--02 .a11-marks--stack .hashrate-mark, #control-stack .stack-card--02 .a11-marks--stack .electricity-mark { font-size: 15px !important; } /* карточка 06, тумблер отката: колонки заданы «1fr auto 1fr», а у дорожки 1fr минимум по умолчанию равен min-content. В немецкой локали подпись WERKSZUSTAND - одно слово шириной 122px, поэтому на 810 грид раздувался до 324px внутри контейнера 246px и правое состояние (VNISH-ZUSTAND / 240) уезжало на 25px ЗА карточку (замер: дорожки 127.2 / 104 / 72.7, коробка 515…585 при карточке 560). В английской версии этого не видно - там два коротких слова. Ставим дорожкам явный нулевой минимум, тумблер и зазоры ужимаем, подписи получают право переноса. Теперь грид никогда не шире своего контейнера, в какой бы локали ни оказалась строка. */ #control-stack .stack-card--06 .sg-switch { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; gap: 8px !important; } #control-stack .stack-card--06 .sg-switch-pill { width: clamp(88px, 8.4vw, 118px) !important; } /* второй этаж той же беды: сам .sg-switch-state - тоже грид, и его неявная колонка тянется по max-content. Коробка состояния стала 73px, а строки внутри остались 111px и лезли под тумблер («200 TH/s» наполовину скрывалось за переключателем). Колонку ограничиваем. */ #control-stack .stack-card--06 .sg-switch-state { grid-template-columns: minmax(0, 1fr) !important; } #control-stack .stack-card--06 .sg-switch-state small { letter-spacing: .1em !important; overflow-wrap: break-word; } #control-stack .stack-card--06 .sg-switch-state span { overflow-wrap: break-word; } } /* ── P4 · ПЛАНШЕТ · ЛОГО НА ОБЛОЖКЕ ДЕКА ──────────────────────────── Шеф: «в деке лого не влезает и L перенесена». Приказ этого круга: трогать ТОЛЬКО планшет, поэтому весь блок живёт внутри планшетной полосы и ни одним правилом за неё не выходит (нижняя граница 721, верхняя - см. абзац про 1279 ниже). Замер 1080x810 (альбом айпада): v99-world-mobile.css:96 держит у .deck-hall две колонки minmax(220px, .72fr) + minmax(0, 1.28fr) - обложке достаётся ровно 220px, внутри неё после inset 8% и padding-inline 12px остаётся 159px под строку. «VNISH GLOBAL» при font-size: clamp(22px, 3vw, 46px) = 32.4px и трекинге .32em просит 356px. Вдобавок overflow-wrap: anywhere (строка 141 этого файла) разрешает рвать слово по буквам, и лок-ап ложился тремя строками «VNISH / GLOBA / L» - это и есть «L перенесена». Чиним геометрию, а не кегль: на планшете зал дека встаёт в одну колонку - ровно так он и стоит на 810 в портрете, где лок-ап помещается в строку с запасом. Обложка получает всю ширину панели. Перенос по буквам запрещаем явно: word-break: keep-all и overflow-wrap: normal. Если ширины когда-нибудь не хватит, строка разойдётся по пробелу, а не по буквам. Селектор с #presentations - не слабее, чем у v101-final-pass.css:139. Верхняя граница у этого блока 1279, а не 1180: замер показал, что на 1181 и на 1280 обложка ещё уже (279.5 и 305px) и лок-ап ложится теми же тремя строками с одинокой «L». 1181-1279 - это ландшафт айпада Pro 11 (1194), то есть тот же планшет. Выше 1279 не лезем: там уже десктоп, его в этом круге не трогаем. */ @media (min-width: 721px) and (max-width: 1279px) { #presentations .briefing-console.deck-hall { grid-template-columns: minmax(0, 1fr) !important; } #presentations .deck-cover { min-height: 210px !important; } /* панель дека теперь в одну колонку, значит и меню изданий идёт тем же строем, что в портрете 810 (v100-final-mobile.css:85): десять плиток видны сразу, а не уезжают в горизонтальный прокрут на 601px, где половина «Español» упиралась в край панели */ #presentations .deck-langs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; overflow: visible !important; padding: 0 !important; scroll-snap-type: none !important; } #presentations .deck-lang { width: auto !important; min-width: 0 !important; flex: none !important; } #presentations .deck-lang:first-child { grid-column: 1 / -1; } #presentations .deck-cover-inner b, #presentations .deck-cover-inner span, #presentations .deck-cover-inner em { word-break: keep-all !important; overflow-wrap: normal !important; } } /* ── P5 · ПЛАНШЕТ · ПЛОТНЫЙ ФУТЕР ─────────────────────────────────── Шеф: «футер никакущий, с огромными пробелами». Ориентир по плотности задан десктопом 1440: там ссылка занимает 15.4px, шаг между ссылками 27.4px, все колонки стоят одним рядом, вся сетка футера 302.7px. Замер планшета до правки: - 1080x810: шаг ссылки 56px (min-height 44 из v101-final-pass.css:421 плюс gap 12), сетка 626.9px, то есть вдвое рыхлее десктопа; - 810x1080: три колонки вместо четырёх (строка 212 этого файла), «Machine-readable» падает во второй ряд, у колонки «Product» четыре ссылки из семи спрятаны правилом для телефона (v100-final-mobile.css:331) - отсюда ощущение пустоты; - обе последние колонки сдвинуты вниз на 20px (v52.css:1031), верх ряда рваный; - лок-ап бренда на 810 разъезжается: v99-touch.css:3 включает ему display: flex, а align-items: center центрует знак и название, тогда как подпись остаётся во всю ширину - знак, имя и строка стоят по трём разным левым краям. Что делаем: четыре колонки ссылок одним рядом, шаг ссылки 28px (палец ещё попадает, воздух уже не зияет), ровный верх у всех колонок, бренд и LinkedIn в одну строку, лок-ап возвращён в свою сетку с левым краем, ссылки «Product» показаны все. Правовая строка и нижняя строка держат тот же левый край, что и колонки: у них общий .shell, поэтому меняем только вертикальные отступы. */ @media (min-width: 721px) and (max-width: 1180px) { .site-footer .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; align-items: start !important; gap: 16px 18px !important; padding: 22px 0 16px !important; } .site-footer .footer-brand-col { grid-column: 1 / -1 !important; flex-direction: row !important; align-items: center !important; gap: 22px !important; } /* лок-ап бренда: своя сетка и левый край, как на десктопе */ .site-footer .footer-brand { display: grid !important; justify-items: start !important; align-content: start !important; min-height: 0 !important; } /* v52.css:1031 сдвигал две последние колонки вниз на 20px */ .site-footer .footer-grid > div:nth-last-child(-n+2) { margin-top: 0 !important; } .site-footer .footer-grid > div:not(.footer-brand-col) { gap: 3px !important; } .site-footer .footer-grid > div:not(.footer-brand-col) > small { margin-bottom: 5px !important; font-size: 9px !important; } .site-footer .footer-grid > div:not(.footer-brand-col) a { display: flex !important; align-items: center !important; min-height: 28px !important; font-size: 11px !important; line-height: 1.4 !important; } /* ссылки «Product» целиком: v100-final-mobile.css:331 прячет их для телефона, повторяем его селектор один в один, чтобы перебить */ .site-footer .footer-grid > div:nth-child(2) a:nth-of-type(n+3):not(:last-child) { display: flex !important; } .site-footer .footer-legal { min-height: 0 !important; gap: 6px 10px !important; padding-bottom: 14px !important; } .site-footer .footer-bottom { padding-top: 16px !important; padding-bottom: 20px !important; } } /* ── P6-P9 · ПЛАНШЕТ · НАЛОЖЕНИЯ ПО АУДИТУ 810 И 1080 ──────────────── Круг 04.08. Аудит qa/section-shots.py на планшете. Всё, что ниже, живёт только в планшетной полосе: ни одного правила ниже 721 и выше 1180, десктоп и телефон не задеты. P8. ХИРО, ПОДПИСЬ «CANONICAL ROUTES» ВЫЛЕЗАЛА ЗА СВОЮ ЯЧЕЙКУ НА 12px. Причина: v82-mobile.css поднимает кегль подписей до 12px для всего, что уже 1024px (правило писалось под телефон), а ячейка при этом держит боковые поля 5vw = 40.5px и зазор 18px от цифры. На 810px в ячейке 184px под подпись остаётся 39px при нужных 103. Подпись лезла через разделитель в соседнюю ячейку с «10». Сцену и цифры не трогаем: только поджимаем поля ячейки и зазор, текст встаёт в свои две строки. Выше 1024 кегль снова 7px и запас есть, поэтому верх правила ровно 1024: на 1080 хиро остаётся как принято. */ @media (min-width: 721px) and (max-width: 1024px) { .hero--v53 .hero-proof > span { padding-inline: 14px !important; gap: 10px !important; } .hero--v53 .hero-proof small { min-width: 0 !important; } } /* P9-a. ЭКОСИСТЕМА: ЗОЛОТОЙ ЗНАК ВНУТРИ КАРТОЧКИ «VNISH.GLOBAL» ЛЁГ ПОВЕРХ ТЕКСТА. На узком (v79-boss.css, max-width: 900px) эмблема встаёт в поток: position: static. Знак внутри неё позиционирован абсолютно (left/top 50%, width 44%), и с потерей позиционированного родителя его точкой отсчёта становится сама карточка: 44% ширины карточки = 334px по центру, ровно поверх строки «Strategic context, exact hardware routes and governed fleet rollout». Возвращаем эмблеме роль точки отсчёта. position: relative без сдвигов не меняет поток: коробка 58x58 стоит там же, знак садится внутрь неё, как задумано на десктопе. Выше 900px эмблема снова абсолютная в углу карточки, туда не лезем. */ @media (min-width: 721px) and (max-width: 900px) { .ecosystem .eco-emblem { position: relative !important; } } /* P9-b. РАЗДЕЛ ДОВЕРИЯ НА ПЛАНШЕТЕ В АЛЬБОМЕ (1080). Готовые планшетные заплатки в v99-touch.css обрываются на 1024px, поэтому на 1025-1180 возвращались обрезка подписей «1M+ MACHINES», «300+ PARTNERS», «10+ YEARS OF EXPERIENCE» (видно 99px из 127) и вылет блока .authority-bridge за свою колонку на 396px. Продлеваем ровно те же заплатки до конца планшетной полосы. Ниже 1025 правила уже действуют и ничего не меняют. */ @media (min-width: 721px) and (max-width: 1180px) { .authority-stats, .authority-stats > * { overflow: visible !important; white-space: normal !important; min-width: 0; } .authority-copy .authority-bridge { max-width: 100% !important; box-sizing: border-box !important; } } /* P10 · ЭКОСИСТЕМА, ЗОЛОТОЙ ЗНАК НА ТЕКСТЕ: тот же дефект я нашёл независимо в обходе всех девятнадцати разделов на 810. Правило уже стоит выше (P9-a, position: relative для .ecosystem .eco-emblem в 721-900), проверено кадром - знак сел внутрь эмблемы, строка «Strategic context…» читается. Второе такое же правило не пишу. */ /* ── P10 · ПЛАНШЕТ · МУЗЕЙ: ПОДПИСИ МОДЕЛЕЙ СРЕЗАНЫ ──────────────── Шеф на телефоне это уже ловил («надо как на десктопе»), на планшете осталось. Замер 810x1080: кадр .about-museum-frame держит 390px, внутри iframe 760x650 со сдвигом translateY(-205px). Видно окно 205…595 из 650, а табличка модели в сцене идёт с 555: имя «ANTMINER S7» ещё попадает, строка характеристики «5 TH/s · 250 J/TH» разрезана нижним краем рамки пополам. На 1440 то же место видно целиком: iframe 870, сдвиг 285, рамка 570, то есть рамка показывает ВЕСЬ остаток кадра (285…855 из 870). Делаем на планшете ту же арифметику и фиксируем её целиком, чтобы она не зависела от того, какое правило какой ширине даст высоту: кадр 650, сдвиг 205, рамка 650 - 205 = 445. Видно 205…650, то есть весь остаток сцены, ничего не срезано ни сверху (пустая треть уходит тем же сдвигом), ни снизу. Внутренний документ сцены равен высоте iframe (scrollHeight 650 при 650), поэтому пустого хвоста под подписями не появляется. Сцену, кегли и содержимое анимации не трогаем: меняется только высота окна, через которое на неё смотрят. Список селекторов повторяет блок 6 этого же файла, чтобы обёртка .about-museum не резала кадр по своей старой высоте. */ @media (min-width: 721px) and (max-width: 1180px) { #about .about-museum, #about .about-museum-frame, #about .vgo-scenecrop, #about .about-scene, #about figure { height: 445px !important; max-height: none !important; overflow: hidden; } /* ширину не трогаем: iframe тянется на всю рамку своим width: 100% из v84-about.css. Попытка обнулить её через auto роняла кадр до дефолтных 300px и справа появлялась чёрная полоса в пол-экрана. */ #about .about-museum-frame iframe { width: 100% !important; height: 650px !important; margin-top: 0 !important; transform: translateY(-205px) !important; } } /* ── P11 · ПЛАНШЕТ · ТУМБЛЕР 06, МЕТКИ НА БОРТУ, ПУСТОЙ ВЕРХ РЯДА ──── Круг 04.08, разбор тестировщиков поверх P1-P10. Все правила ниже живут внутри планшетной полосы: телефон (≤720) и десктоп (≥1181) не задеты ни одним селектором. Хиро не тронут. P11-a. ТУМБЛЕР ЧИТАЛСЯ КАК ОДНО СЛОВО «STOCKVNISH». Блок 54.3 ужал корпус до clamp(88px, 8.4vw, 118px): на 810 это 88px, метка .sg-switch-label шириной 46% корпуса = 39.5px, а чернила «STOCK» при кегле 9px и трекинге 1.8px занимают 39.9px - текст шире своей коробки, между словами оставалось 0.5px на 810 и 1.9px на 1080. Считаем по принятому десктопу: на 1440 корпус 121px, метка 55.7px, чернила 33px, зазор 15.9px - чернила занимают 59% метки. Возвращаем ту же пропорцию: корпус 96px, кегль метки 8px, трекинг .12em - чернила 31px в коробке 42px. Замер после правки: зазор 12.0px на 810 и 12.3px на 1080, чернила лежат внутри корпуса с полями 10 и 11px. Ширина плоская, а не в vw, и это проверено краем полосы: при clamp(96px, 9vw, 112px) на 1180 корпус разъезжался до 106.2px, и колонка состояния (60.6px) становилась уже чернил «200» (64.4px) - число вылезало из своей дорожки на 3.8px. При 96px на 1180 колонка 65.9px против тех же 64.4px чернил, запас положительный по всей полосе. Шире корпус нельзя по той же арифметике: на 1080 колонка 65.3px при чернилах 61.4px, при корпусе 104px число снова поехало бы. P11-b. ВЕРТИКАЛЬНЫЕ МЕТКИ УХОДИЛИ ЗА ПРАВЫЙ БОРТ ВСЕХ ШЕСТИ. Блок 16 увёл метку к краю через margin-right: -40px, посчитанный от десктопного паддинга 54px: 54 - 40 = 14px внутри карточки. Планшетный padding-inline: 32px из блока 54.3 превращает те же -40px в 8px ЗА бортом, и на 1080x810 карточки 02, 04 и 06 стоят правым краем ровно на 1080 - их метки «MODEL + BOARD», «°C · FAN · V», «A ROUTE BACK» срезаны краем экрана. Бокового скролла это не давало, метки просто резались. Отступ пересчитан от планшетного паддинга: 32 - 17 = 15px внутри, ровно как на 1440. Замер после правки: метка внутри на 16px на обоих размерах, до сцены 7.6px на 810 и 4.8px на 1080, до плашки «OFFICIAL BUILDS · FREE» в карточке 02 - 12.9 и 26.5px (блок 16 просил 10). В арабской RTL-раскладке метка стоит у левого борта и этим правилом не двигается: замер до и после одинаковый, 28px внутри. P11-c. ПУСТОЙ ВЕРХ РЯДА КАРТОЧЕК В АЛЬБОМЕ 1080x810. Там карточки лежат гридом 2xN (v101-final-pass.css:368) с высотой clamp(520px, 39vw, 570px) = 520px, а содержимое короче: копи прижата к низу (align-items: flex-end), сцена 285px висит по центру. У ряда 05-06 первые чернила шли на 117px ниже верха карточки, и qa/void-scan видел сплошную чёрную полосу 170px (y 5010-5180) при пороге 150. Лечим тем же приёмом, что принят на телефоне в блоке 4: высоту отдаём содержимому. Пол 400px - это арифметика, а не подбор: копи 279.5 + паддинги 108 = 387.5, сцена 285 + 108 = 393, оба помещаются. Сцене оставляем ровно те 285px, что у неё были, чтобы кадр анимации не поехал. Замер после правки: карточка 400px вместо 520, пустой верх у копи 65.5px вместо 185-230, полос ≥150px на 1080x810 НОЛЬ. Верхняя граница 1180, нижняя 1025: ниже 1025 работает карусельная раскладка портрета 810, там пустых полос не было и мы её не трогаем. */ @media (min-width: 721px) and (max-width: 1180px) { #control-stack .stack-card > span { margin-right: -17px !important; } #control-stack .stack-card--06 .sg-switch-pill { width: 96px !important; } #control-stack .stack-card--06 .sg-switch-label { font-size: 8px !important; letter-spacing: .12em !important; } } @media (min-width: 1025px) and (max-width: 1180px) { #control-stack .stack-card { height: auto !important; min-height: 400px !important; } #control-stack .stack-card > .stack-visual { height: 285px !important; } } /* ── АРАБСКАЯ ВЕРСИЯ · КАРТОЧКИ СТЕКА ─────────────────────────────── Шеф 04.08: «на арабской версии в шести карточках текст и сцена лежат друг на друге». Проверено: дефект на всех ширинах, включая десктоп. Причина: .stack-visual позиционируется физическим свойством right, поэтому в RTL уезжает на ту же сторону, где стоит текстовый блок, и они складываются. Лечим логическими свойствами: в RTL сцена уходит к левому краю, копи остаётся у правого. Латинские локали не задеты - правило целится только в [dir=rtl]. */ [dir="rtl"] #control-stack .stack-card { direction: rtl; } [dir="rtl"] #control-stack .stack-visual { right: auto !important; left: 0 !important; } [dir="rtl"] #control-stack .stack-copy { right: 0 !important; left: auto !important; text-align: right; } /* ── ПЕРЕКЛЮЧАТЕЛЬ ВЕРСИИ ПРОШИВКИ ────────────────────────────────── Приказ шефа: давать на выбор 1.3.5 и 1.3.4, как у конкурентов. Отличие от них: у нас версия помечена словом. У vnish.ru пометки нет вовсе, а в их же чейнджлоге «stable» стоит у старой версии - майнер видит стабильной именно её. */ .vault-versions { display: flex; gap: 8px; margin-bottom: 10px; } .vault-versions button { display: grid; gap: 1px; padding: 7px 14px; border: 1px solid rgba(231, 199, 125, .28); border-radius: 10px; background: rgba(231, 199, 125, .05); color: #cfc9bd; cursor: pointer; text-align: left; } .vault-versions button b { color: #f1eee7; font-size: 13px; letter-spacing: .02em; } .vault-versions button small { color: #8d887e; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; } .vault-versions button.is-active { border-color: rgba(231, 199, 125, .7); background: linear-gradient(140deg, rgba(231, 199, 125, .22), rgba(143, 105, 47, .16)); } .vault-versions button.is-active b { color: #f4dda4; } .vault-versions button.is-active small { color: #d8c79b; } @media (max-width: 720px) { .vault-versions button { min-height: 44px; padding: 6px 12px; } }