/* Фоновые подложки страниц: земной шар и карта мира. Перенос готовых образцов Павла от 18.08.2026 (C:\Users\Павел\Claude\Projects\Вебсайт\Фон_подложки\obrazec-shar.html и obrazec-lenta.html). Числа выверены Павлом лично, менять их можно только по его команде - у каждого числа ниже стоит пометка «выверено». Файл подключается только на страницах, у которых в кабинете выбрана подложка (см. parts/fon_podlozhka_stili.html). Откат: удалить файл и оба включения в base.html. */ /* ------------------------------------------------------------------ 1 Общее для всех подложек ------------------------------------------------------------------ */ :root{ /* Цвета из образца: океан - белый фон страницы, суша - очень бледный серый, границы стран - белые линии поверх заливки. Их же читает polushariya.js через getPropertyValue. */ --cvet-sushi:#eef0f2; --cvet-granic:#ffffff; /* ПЛЁНКА НАД ПОДЛОЖКОЙ. Заказ Павла 20.08.2026, дословно: «нужно вернуть те яркие сочные цвета, которые там были изначально, но сделать, как будто они в дымке... давай ты вернёшь цвет, а на весь сайт наложишь как бы плёнку, и мы будем играть не высветлением конкретно цвета этого шара, а именно градациями плёнки». Плотность: 0 - плёнки нет вовсе, 1 - плёнка непрозрачная и подложки не видно. Крутится только здесь, разметку тем трогать не надо. ПОЧЕМУ ЧИСЕЛ НЕСКОЛЬКО, А НЕ ОДНО. Одно общее число мы попробовали и отмерили: подложки рисуются с разной силой, и одна плотность на всех либо убивает слабую, либо не глушит сильную (замеры - в разделе 1.1). Поэтому число общее по смыслу, но своё у каждой группы тем: у Павла остаётся ровно один регулятор на каждую подложку, и правка одной темы физически не может задеть соседнюю. --fon-plyonka значение по умолчанию для ЛЮБОЙ подложки. Ноль: подложка, о которой здесь не сказано отдельно, свой вид не меняет ни на волос. --fon-plyonka-globusy цветной глобус globus_gipso - тот самый, ради которого плёнку и заводили. До чистки 21.08.2026 это же число брали ещё globus_okean и globus_priroda; Павел их не оставил, и переменная осталась одна на одну тему. Название во множественном числе не меняем: появится ещё один цветной глобус - он возьмёт это же число, группа никуда не делась. --fon-plyonka-karta рельефная карта. НОЛЬ, и это решение Павла: он заказывал её «максимально рельефную, прям чтобы там видно было горы высокие» и просил сначала показать в полную силу. Под плёнкой 0,75 рельеф превращается в бледную заливку. Захочет приглушить - меняется это число. Цвет один на все плёнки, тремя числами: rgba() принимает переменную только так. Разбор цвета - в разделе 1.1. Откат: убрать эти строки и раздел 1.1 - подложки вернутся ровно к тому виду, какой им даёт движок. */ --fon-plyonka-cvet:252,253,255; --fon-plyonka:0; --fon-plyonka-globusy:0.75; --fon-plyonka-karta:0; /* Переменной --fon-plyonka-obyom здесь больше нет: четыре объёмных глобуса удалены 21.08.2026 вместе со своей группой плёнки, регулировать стало нечего. Решение Павла - в C:\Users\Павел\Claude\Projects\Вебсайт\РЕШЕНИЕ_ПО_ПОДЛОЖКАМ_21.08.md Откат: вернуть строку --fon-plyonka-obyom:0.75 и правило .fon-globus-obyom в разделе 1.1. */ /* Верхний край подложки = фактическая высота шапки. Три строки шапки (логотип, меню, быстрые ссылки) остаются чистой белой полосой. 150px - это только запасное значение на случай, если сценарий не успел или не запустился; настоящую высоту меряет home/static/js/site/fon_podlozhka.js и кладёт сюда же. */ --fon-verh:150px; /* Скорость вращения шара. Читает js/fon/polushariya.js. Переменных две, потому что телефон и компьютер считают её РАЗНЫМИ способами: --fon-skroll градусов за ВСЮ прокрутку страницы (телефон); --fon-skroll-ekran градусов на ОДИН ЭКРАН прокрутки (компьютер), значение none выключает этот способ. В разметке холста (parts/fon/shar.html) осталось только запасное значение data-skroll на случай, если переменные не прочитались. ЗАКАЗ ПАВЛА 19.08.2026, дословно: «глобус крутится на мобильной версии довольно медленно, но крутится... На десктопной версии он не крутится. Было бы прикольно, если бы на десктопной версии ты включил такую же скорость прокрутки, очень небольшую, как на мобильной». ЧТО ПОКАЗАЛ ЗАМЕР. Скорость на компьютере и на телефоне БЫЛА ОДНА И ТА ЖЕ, число в число. Главная, оба окна, поворот 140 градусов за страницу: компьютер 1440x900: прокрутка 8072 точки = 8,97 экрана -> 15,61 градуса на экран; центр тяжести суши сдвигается на 29,5 точки при радиусе 449, то есть на 0,066 радиуса; телефон 375x812: прокрутка 7253 точки = 8,93 экрана -> 15,67 градуса на экран; сдвиг 10,8 точки при радиусе 164 - те же 0,066 радиуса. То есть «сделать на компьютере как на телефоне» буквально означало бы не менять ничего, а Павел видит неподвижность второй раз подряд. ГДЕ НАСТОЯЩАЯ РАЗНИЦА - в том, сколько точек прокрутки даёт ОДНО движение руки, а не в градусах на экран: колесо мыши: один щелчок = 100 точек прокрутки (значение Chrome для Windows) -> 1,73 градуса, суша уезжает на 3,3 точки при диаметре 900, это 0,36% диаметра, да ещё скачком, а не плавно; палец по экрану: один бросок = 1000-2500 точек с инерцией примерно за секунду -> 19-48 градусов подряд, суша уезжает на 55-137 точек при диаметре 330, это 17-42% диаметра. Одно движение пальца поворачивает шар в 11-28 раз сильнее, чем один щелчок колеса. Отсюда «на телефоне крутится, на компьютере нет». ПОЧЕМУ СЧЁТ НА ЭКРАН, А НЕ НА СТРАНИЦУ. «Градусов за страницу» - это скорость, которая зависит от длины страницы: одно и то же число даёт на короткой странице во много раз более быстрое вращение. Замер: 140 градусов за страницу на компьютере - это 15,6 градуса на экран на главной (8,97 экрана) и сразу 40,3 градуса на экран на «О компании» (3,47 экрана), в 2,6 раза быстрее на соседней странице. Поэтому на компьютере скорость задана на экран прокрутки: она одинаковая на любой странице и не зависит от того, длинная она или короткая. ПОЧЕМУ 40. Догонять телефон «на одно движение руки» пришлось бы числом около 140 градусов на экран - это уже вертушка. Сравнивали по градусам В СЕКУНДУ непрерывной прокрутки: палец даёт около 1500 точек в секунду (29 градусов в секунду), колесо при спокойной работе 600-800 точек в секунду, то есть на старом счёте выходило 10-14 градусов в секунду - в 2,2-2,9 раза медленнее. Отсюда множитель около 2,5, а 40 градусов на экран - ровно та скорость, которая на компьютере УЖЕ БЫЛА на короткой «О компании» (40,3); новое здесь только то, что её получили все страницы, а не одни короткие. Стало на компьютере: 40 градусов на экран, 4,44 градуса на щелчок колеса, на главной это 359 градусов за всю страницу - ровно один оборот мира. Хочет Павел быстрее или медленнее - меняется это одно число (25 - в полтора раза медленнее, 60 - в полтора быстрее). ЧЕМ ПЛАТИМ. Полный оборот проходит через Тихий океан: на середине главной суша занимает 11% круга против 39% наверху (замер по долям 0-1 с шагом 1/8: 39, 42, 31, 18, 11, 19, 27, 36, 39). То есть в середине страницы подложка становится почти пустой, а к низу снова наполняется. Обойти это нельзя ничем, кроме уменьшения скорости: пустое полушарие лежит в 180 градусах от Европы, с которой шар начинает. На телефоне остаются выверенные Павлом 140 градусов за страницу и старый способ счёта - см. раздел 3.1. Откат: убрать обе строки --fon-skroll-ekran (здесь и в разделе 3.1) - оба экрана вернутся к счёту за страницу и к 140 градусам, то есть к состоянию до 19.08.2026. */ --fon-skroll:140; --fon-skroll-ekran:40; } /* Общая рамка подложки: закреплена, под содержимым, кликам не мешает. z-index:-1, а не 0. В образце Павла стоял «z-index:0» плюс правило «body>*{position:relative;z-index:1}», которое поднимает НАД подложкой вообще всё в теле документа. На стенде так делать нельзя: тем же правилом накрывало бы плавающую панель связи и всплывающие окна - у них свои position и z-index, и общее правило по «body>*» их ломает. Отрицательный слой даёт тот же результат без единой правки чужих блоков. Фон страницы (белый) браузер рисует не на элементе body, а на холсте окна, поэтому подложка со слоем -1 лежит ВЫШЕ белого фона и НИЖЕ всего остального содержимого. Белые плашки, карточки и полосы фактов перекрывают её собой, как и задумано. Откат: вернуть z-index:0 и добавить «body>*{position:relative;z-index:1}», но тогда проверять панель связи и окна. */ .fon-podlozhka{ position:fixed; left:0; right:0; top:var(--fon-verh); bottom:0; z-index:-1; pointer-events:none; } /* ------------------------------------------------------------------ 1.1 Плёнка: подложка видна сквозь дымку, но не спорит с содержимым ------------------------------------------------------------------ */ /* ЧТО ЭТО И ЧЕМ ОТЛИЧАЕТСЯ ОТ ОСВЕТЛЕНИЯ. До 20.08.2026 глобусы гасили изнутри: движок осветлял КАЖДУЮ ТОЧКУ СНИМКА (data-svetlota). Павел посмотрел и забраковал: «на этих двух страницах ты всю идею обговнял... нужно вернуть те яркие сочные цвета, которые там были изначально, но сделать, как будто они в дымке». Теперь снимок рисуется в полную силу цвета (data-svetlota="1" у всех тем), а гасит его отдельный слой сверху. ПОЧЕМУ ЭТО НЕ ТО ЖЕ САМОЕ. Три разницы, каждая видна глазом: 1. Линии границ. Движок рисует берега и границы ПОВЕРХ снимка постоянным цветом, и data-svetlota на них не действовала вовсе - при осветлении снимка в шестнадцать раз линии оставались единственным заметным, и подложка читалась проволочным каркасом. Их приходилось глушить отдельно (прозрачность резали с 0.32 до 0.16). Плёнка лежит выше всего, что нарисовал движок, поэтому глушит снимок и линии ОДНОВРЕМЕННО и в одинаковой мере - обеим темам вернули исходные 0.32. 2. Число живёт в стилях, а не в разметке. Осветление стояло атрибутом в файле каждой темы, и чтобы его подвинуть, надо было править вёрстку. Плотность плёнки - переменная в разделе 1; какая тема какую берёт, расписано сразу за этим правилом. 3. Настраивается плотность плёнки, а не цвет шара. Ровно то, о чём просил Павел: «мы будем играть не высветлением конкретно цвета этого шара, а именно градациями плёнки». ГДЕ ЛЕЖИТ СЛОЙ. Это ::after самой подложки, а не отдельный элемент. У подложки z-index:-1 при position:fixed, значит она сама - отдельный стопкой слой (stacking context), и всё, что внутри неё, стопкой варится внутри: ::after со своим z-index:1 встаёт НАД холстом и картинкой ленты, но вся подложка целиком остаётся НИЖЕ содержимого страницы. Отдельного элемента в разметке для этого не нужно, и ни одна тема о плёнке не знает. Целого числа между -1 и 0 не существует, поэтому «слой между подложкой и содержимым» иначе и не сделать - только внутри стопки самой подложки. position:absolute обязателен ещё и потому, что .fon-shar - это flex, а ::after в потоке стал бы вторым flex-элементом рядом с холстом и сдвинул бы шар. Абсолютный слой из потока выпадает и на раскладку не влияет. Плёнка наследует маску .fon-shar (низ мягко гаснет) - так и надо: у низа гаснет и шар, и дымка над ним, полосы на границе маски не возникает. ЛЕСЕНКА ПЛОТНОСТИ. Мерили двумя числами по всему кругу диаметром 900 (631 532 точки, поворот 20 градусов, Европа в центре): сила точки = 255 минус самый тёмный из трёх её каналов, то есть «на сколько точка не белый лист»; насыщенность = самый светлый канал минус самый тёмный, то есть «на сколько цвет остался цветом, а не серым». Именно её Павел и защищал: «чтобы цвета все были, вся сочность была». плотность globus_okean globus_gipso средняя тёмная насыщ средняя тёмная насыщ 0 (нет) 207,7 255 117,2 127,3 193 89,4 0,65 77,4 95 42,8 49,5 73 33,2 0,70 67,4 83 37,1 43,5 64 28,9 0,75 57,4 71 31,4 37,5 55 24,6 ВЫБРАНО 0,80 47,5 58 25,8 31,6 46 20,3 0,85 37,6 46 20,2 25,7 37 16,2 0,94 20,3 24 11,1 15,6 20 9,8 ПОЧЕМУ 0,75. Крайние ступени известны обе. Без плёнки средняя 207,7 - подложка спорит с карточками и кнопкой, ровно то, чего Павел не хочет. Утреннее осветление до 12,8 - это ступень около 0,94, про неё сказано «всю идею обговнял... палитра убита». Середина между ними по счёту - около 51; 0,75 даёт 57,4 у одной темы и 37,5 у другой. На снимках на этой ступени ещё читаются все краски снимка - зелень Африки, песок Сахары, синий океан, белые льды, - но ни одна из них уже не тянет взгляд на себя. Соседние ступени видно глазом: 0,70 - подложка начинает спорить с текстом слева, 0,80 - зелень и песок сливаются в общую бледность. ДВЕ ТЕМЫ ВЕСЯТ РАЗНО, И ЭТО ОСОЗНАННО. Снимки разной густоты: без плёнки 207,7 против 127,3. Одна плотность оставляет эту разницу (57,4 против 37,5) - globus_okean заметнее globus_gipso примерно в полтора раза, как и в жизни. Утром её выравнивали двумя разными числами осветления; захочет Павел выровнять и здесь - globus_gipso надо будет отдать свою переменную. ЧИТАТЬ ЛЕСЕНКУ ПО СТОЛБЦУ globus_gipso. Тема globus_okean удалена 21.08.2026 (решение Павла по галерее), её столбец оставлен как замер: именно на двух темах и подбиралось число 0,75, выбрасывать половину основания решения нельзя - иначе через месяц никто не поймёт, почему 0,75, а не 0,85. Живая тема здесь одна, globus_gipso: 0,75 даёт ей среднюю силу точки 37,5 и насыщенность 24,6. ЦВЕТ: 252,253,255 - белый с холодной ноткой в три единицы синего. Дымка в природе холодная, и на снимке Земли чистый белый даёт выцветшую бумагу, а не воздух. Больше синевы брать нельзя: плёнка лежит на ВСЁМ окне, а не только на шаре, поэтому её цвет подкрашивает и пустые белые поля страницы. Голубая 232,240,250 при плотности 0,75 кладёт под шапку видимую голубую полосу (белое поле становится 237,242,249 против белой шапки 255,255,255) - на снимках это хорошо видно. У 252,253,255 разница с шапкой 2 единицы, глазом не ловится. Замеры обоих вариантов - в отчёте. Откат: удалить этот раздел и обе переменные в разделе 1. */ .fon-podlozhka::after{ content:""; position:absolute; inset:0; z-index:1; background:rgba(var(--fon-plyonka-cvet),var(--fon-plyonka)); pointer-events:none; } /* КОМУ КАКАЯ ПЛЁНКА. Правило выше общее - слой лежит на любой подложке, как и просил Павел («на весь сайт наложишь плёнку»). Плотность по умолчанию ноль, поэтому подложка, не названная здесь, свой вид не меняет вовсе. Названы две группы, у каждой своё число в разделе 1: ЦВЕТНЫЕ ГЛОБУСЫ - ради них всё и затевалось. Снимок рисуется в полную силу цвета (data-svetlota="1"), гасит его плёнка. После чистки 21.08.2026 в группе осталась одна тема, globus_gipso: globus_okean и globus_priroda Павел не оставил. РЕЛЬЕФНАЯ КАРТА - число ноль, то есть плёнки на ней сейчас нет. Павел заказывал её «максимально рельефную» и просил сначала посмотреть в полную силу; под плёнкой 0,75 горы и тени, ради которых карту и собирали, почти перестают читаться. Строка стоит здесь пустой не по недосмотру: она даёт Павлу готовый регулятор ровно на эту карту, отдельный от глобусов. ДВУХ ПРИНЯТЫХ ПОДЛОЖЕК ЗДЕСЬ НЕТ НАМЕРЕННО - контурного шара и плоской карты. Они приглушены изнутри и другой яркости никогда не имели: у контурного шара суша залита #eef0f2, средняя сила точки 6,3, у плоской карты - серый контур мира на белом. Замер показал, что плёнка 0,75 опустила бы контурный шар с 6,3 до 1,6, а плоскую карту - до полной невидимости. Менять принятое Павлом без спроса нельзя, поэтому им достаётся общий ноль. (До чистки 21.08.2026 в этом списке стояли ещё шар с бордовыми границами и глобус NASA - оба удалены.) Своих размеров, положений и скоростей ни одна строка здесь не задаёт - только плотность плёнки. Геометрия у всех тем по-прежнему общая, из разделов 2, 3 и 3.1, и стережётся home/test_fon_podlozhka.py. Откат: удалить этот блок - плёнка исчезнет со всех подложек, останется слой нулевой плотности. */ /* ЧИСТКА 21.08.2026. Строк здесь было три: цветные глобусы, рельефная карта и объёмные глобусы. Из цветных глобусов уцелел один (globus_gipso), поэтому в первом селекторе остался один класс; строка про объёмные глобусы убрана целиком - самих тем больше нет. Откат: вернуть классы .fon-globus-okean, .fon-globus-priroda в первый селектор и строку .fon-globus-obyom{--fon-plyonka:var(--fon-plyonka-obyom);} вместе с переменной в разделе 1. */ .fon-globus-gipso{--fon-plyonka:var(--fon-plyonka-globusy);} .fon-karta-relief{--fon-plyonka:var(--fon-plyonka-karta);} /* ------------------------------------------------------------------ 2 Подложка «карта мира»: лента едет справа налево при прокрутке ------------------------------------------------------------------ */ .fon-karta{ /* Адрес относительный, без отпечатка версии: отпечаток стоит на самом файле стилей, а карта не меняется вовсе - она перенесена байт в байт и стережётся контрольной суммой в home/test_fon_podlozhka.py. Если карту когда-нибудь всё же заменят, файл надо переименовать, иначе у людей останется старая копия из кеша. */ background-image:url("../../img/fon/karta-lenta-fon.99df72aa7c27.svg"); /* В файле ровно одна копия мира без полей, поэтому копии стыкуются бесшовно - проверено Павлом, шва не видно. */ background-repeat:repeat-x; background-size:auto 84%; /* выверено Павлом: высота ленты 84% окна */ background-position:0 44%; /* выверено Павлом: чуть выше центра */ } /* ------------------------------------------------------------------ 2.1 Подложка «рельефная карта мира»: та же лента, но с рельефом ------------------------------------------------------------------ */ /* Заказ Павла 20.08.2026: «бесконечная наша карта, но делаем её максимально рельефную - прям чтобы там прям видно было горы высокие». Отличие от плоской карты - ровно одна строка ниже: другой файл. Всё остальное - ход ленты, высота 84%, положение 44%, «полтора мира за прокрутку» - приезжает из раздела 2 и из js/site/fon_podlozhka.js, потому что слой несёт тот же класс fon-karta. Павел просил ход не трогать. Селектор из двух классов, а не из одного: правило обязано перебивать картинку раздела 2 независимо от того, в каком порядке эти два правила окажутся в файле после будущих правок. Откуда картинка, как собрана и чем доказана бесшовность - в шапке pilotsite/templates/parts/fon/karta_relief.html. Отпечатка версии в адресе нет по той же причине, что у плоской карты: отпечаток стоит на самом файле стилей, а картинка не меняется. Соберут ленту заново - файл надо переименовать, иначе у людей останется старая копия из кеша. Откат: удалить этот раздел и класс fon-karta-relief в файле разметки. */ .fon-karta.fon-karta-relief{ background-image:url("../../img/fon/karta-relief-lenta-fon.ac77e770db3e.webp"); } /* Растворения низа у карты НЕТ - отменённое решение. Юг должен быть чётким, иначе не видно Чили, Аргентину и Новую Зеландию. Маски здесь быть не должно. */ /* ------------------------------------------------------------------ 3 Подложка «земной шар»: поворачивается при прокрутке ------------------------------------------------------------------ */ .fon-shar{ display:flex; align-items:center; justify-content:center; /* Низ мягко гаснет, чтобы шар не обрывался чертой у подвала. У карты такого нет и быть не должно - см. раздел 2. */ -webkit-mask-image:linear-gradient(180deg,#000 0,#000 88%,rgba(0,0,0,.5) 96%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 88%,rgba(0,0,0,.5) 96%,transparent 100%); } /* ПОПРАВКА 19.08.2026: «шар обрезан сверху, как будто вершинку срезали». Павел дословно: «шар, во-первых, он обрезан сверху - то есть рисунок самого шара обрезан, как будто вершинку срезали. Десктопная версия срезана... на странице "О компании", кстати, она не обрезана». ЧТО РЕЗАЛО. Не сам шар и не размер холста, а верхний край КОРОБКИ подложки вместе с её маской. Коробка закреплена от --fon-verh до низа окна, холст стоит в ней по центру и он ВЫШЕ коробки (диаметр 100vh против высоты коробки 100vh минус шапка). Всё, что вылезло выше края, гасит маска: у mask-image свойство mask-repeat по умолчанию repeat, поэтому прямо над коробкой лежит нижний, ПРОЗРАЧНЫЙ край соседней плитки того же градиента. Отсюда и рез ровной горизонталью по краю шапки, а не мягкое затухание. Насколько холст вылезал, считается точно: верх холста относительно верха коробки = (margin-top - --fon-verh) / 2 (высота коробки 100vh - V, гипотетический блок холста 100vh + m, при align-items:center верх маргин-бокса (H - 100vh - m)/2, прибавляем сам отступ m). Замер на стенде site.academperevod.ru, окно 1440x900: главная --fon-verh 202px, отступ 144px (16vh) -> -29px, срезано 29 точек макушки; коробка 202..900, холст 173..1073; О компании --fon-verh 122px, тот же отступ 144px -> +11px, среза нет - ровно то, что видит Павел. Разница между страницами только в высоте шапки: на главной есть третья строка быстрых ссылок, на «О компании» её нет. Почему не тронули маску. Если разрешить рисовать выше коробки, шар полезет в шапку, а три строки шапки по заданию Павла от 18.08.2026 обязаны оставаться чистой белой полосой. Значит холст не должен вылезать вверх вовсе. КАК ПОПРАВЛЕНО. Отступ больше не зашит числом 16vh, а считается от фактической высоты шапки: calc(var(--fon-verh) + 6vh). По формуле выше верх холста оказывается ровно на 3vh НИЖЕ верха коробки при любой высоте шапки и любом окне - срез невозможен в принципе, и шар заодно опущен, как и просил Павел. Выверенные Павлом числа при этом не потеряны, а обобщены. 16vh были подобраны им на образце с шапкой ровно 150px и окном 900px: 16vh = 144 при шапке 150 - это и есть «отступ равен высоте шапки», отсюда var(--fon-verh). На стенде шапка выше (202px), поэтому старое число перестало сходиться. Оставшиеся 6vh - тот самый «опустить»: 3vh запаса сверху, 27 точек на окне 900. Диаметр 100vh не тронут. Замер после правки, стенд, 1440x900: главная отступ 202 + 54 = 256px, верх холста +27 от верха коробки; О компании отступ 122 + 54 = 176px, верх холста +27, было +11. Откат: вернуть margin-top:16vh. */ .fon-shar canvas{ width:100vh; /* выверено Павлом: диаметр ровно 100% высоты окна */ height:100vh; /* выверено Павлом */ /* было 16vh, см. поправку выше */ margin-top:calc(var(--fon-verh) + 6vh); display:block; } /* ------------------------------------------------------------------ 3.1 Телефон: шар целиком в экране ------------------------------------------------------------------ */ /* Диктовка Павла 18.08.2026, пункт 26, дословно: «сейчас он там какой-то вообще обрезанный, какой-то странный. Можем его сделать существенно меньше, чтобы он попадал прямо в экран телефона». Что было не так. Диаметр 100vh считается от ВЫСОТЫ окна, а у телефона высота вдвое больше ширины. Замер на 375x812: холст 812x812, левый край -218 - в окно попадала средняя полоса шириной 375, то есть 46% диаметра. Круга не видно вовсе, видно вертикальную ленту с кусками материков. Отсюда «обрезанный и странный». Стало: диаметр min(88vw, 60vh). На 375x812 это 330 точек - замер после правки: холст 330x330, левый край 31, правый 361 при ширине окна 392, верх 285, низ 615 при высоте 849. Шар целиком внутри экрана, поля слева и справа одинаковые. Второе слагаемое, 60vh, страхует низкое окно: например на 700x400 одни только 88vw дали бы 616 точек при высоте окна 400, а 60vh дают 240 - круг остаётся внутри. Сдвиг вниз на телефоне обнулён. На компьютере он нужен потому, что там шар БОЛЬШЕ окна и у него срезается верх; маленький шар и так стоит по центру полосы подложки, сдвигать его не от чего. Замер 19.08.2026 на 375x812: коробка 118..812, холст 300..630 - он целиком внутри, запас сверху и снизу по 182 точки, срезать нечего. Порог 760px - тот же, по которому сделана телефонная шапка (css/site/bloki/01_shapka.css, раздел Т1). Свой класс body.mob сайт ставит по 640px (js/etalon/auto_mob.js), то есть телефон в альбомной ориентации (812x375) получает КОМПЬЮТЕРНУЮ раскладку целиком - шапку, сетку и вместе с ними компьютерный шар. Это решение сайта, а не подложки, и трогать его здесь нельзя. Компьютерных чисел правка не касается: диаметр 100vh и сдвиг вниз стоят выше, вне медиазапроса, и стерегутся home/test_fon_podlozhka.py. Движение на телефоне не выключается - шар крутится так же, как на компьютере. Откат: удалить раздел 3.1 - на телефоне вернётся диаметр 100vh. */ /* ПОПРАВКА 19.08.2026: «шар ездит вверх-вниз при прокрутке на телефоне». Павел дословно: «я оттягиваю вниз - он поднимается, поднимаю наверх - он опускается. Можно сделать, чтобы он был закреплён и не дёргался?» Это не вращение, а геометрия слоя. Слой закреплён от --fon-verh до НИЗА ОКНА (bottom: 0), а холст стоит в нём по центру. Телефон при прокрутке прячет и снова показывает адресную строку - низ окна ходит вверх-вниз, и центр слоя ходит на ПОЛОВИНУ этого хода вместе с ним. Замер до правки (375x812, страница прокручена на 1200). Ход адресной строки для закреплённого слоя - это в точности сдвиг его нижнего края, поэтому меряли им, не трогая ни одной единицы длины: низ окна на месте - высота слоя 762, центр шара y=431 низ поднят на 60 - высота слоя 702, центр шара y=401 (-30) низ поднят на 100 - высота слоя 662, центр шара y=381 (-50) То же самое через настоящее изменение высоты окна: 812 -> 872 сдвигало центр шара с 431 на 461. Ровно то, что видит Павел. Как поправлено. На телефоне слой больше не тянется до текущего низа окна: ему задана высота от БОЛЬШОГО окна - 100lvh, то есть от окна с убранной адресной строкой. Эта величина по стандарту не меняется, пока человек не повернёт телефон. Когда у элемента заданы top и height, его bottom браузером не учитывается вовсе - низ окна перестаёт на что-либо влиять. Замер после правки: при том же ходе низа на 100 точек высота слоя остаётся 762, центр шара остаётся y=431, сдвиг 0. Первая строка height - запасная, для браузеров без lvh; вторая её перекрывает. Диаметр по той же причине переведён с 60vh на 60lvh: на 375x812 выигрывает 88vw и число не меняется (330 точек), но на широком планшете в портрете считать надо от неизменной высоты. Вращение правка не трогает: она про размер и положение холста, а поворот считает js/fon/polushariya.js по доле прокрутки. Откат: убрать из медиазапроса правило .fon-podlozhka и вернуть в холсте 60vh вместо 60lvh. */ @media (max-width: 760px){ /* Скорость вращения на телефоне НЕ ТРОГАЕМ: «очень мне нравится скорость движения на мобильной подложке этого земного шара». Телефон остаётся на старом счёте - выверенные Павлом 140 градусов за всю страницу из раздела 1, - а компьютерный счёт «на экран» здесь выключается. Почему счёт на экран нельзя отдать телефону. Он делит на высоту окна, а на телефоне высота окна ходит вверх-вниз при каждом показе и скрытии адресной строки: на 375x812 ход в 60 точек менял бы поворот примерно на 4 градуса, то есть суша дёргалась бы на 11 точек. Ровно с этим боролись утром 19.08.2026 («шар ездит вверх-вниз»), возвращать это нельзя. Счёт за страницу от высоты окна почти не зависит: тот же ход в 60 точек даёт 0,5 градуса. Порог тот же 760px, что и у размера шара: делим по ширине окна, а не по виду указателя, потому что весь остальной файл разделён так же. Откат: убрать эту строку - телефон перейдёт на компьютерный счёт. */ :root{--fon-skroll-ekran:none;} .fon-podlozhka{ bottom:auto; height:calc(100vh - var(--fon-verh)); height:calc(100lvh - var(--fon-verh)); } .fon-shar canvas{ width:min(88vw,60lvh); height:min(88vw,60lvh); margin-top:0; } } /* ------------------------------------------------------------------ 4 Спокойный режим ------------------------------------------------------------------ */ /* При prefers-reduced-motion подложка стоит неподвижно. Само движение выключается в сценариях (polushariya.js и fon_podlozhka.js), здесь - только страховка от переходов, если их кто-нибудь добавит. На телефоне движение НЕ выключается - решение Павла 18.08.2026, отдельного правила по ширине экрана здесь нет и не должно быть. */ @media (prefers-reduced-motion: reduce){ .fon-podlozhka{transition:none !important;} }