/* ═══════════════════ РАБОЧИЙ СТОЛ ═══════════════════ Рабочий стол устроен как граф: папки/приложения — узлы, которые можно свободно таскать (как на маке), связаны линиями друг с другом и с лого-хабом в центре. Толщина линии зависит от её длины (короче — толще), а линии, идущие к лого, ещё и гаснут на подходе к нему — иначе в одной точке скапливается пучок одинаковых линий. Иконки — полноценные картинки (assets/icons/*.svg) как в настоящей ОС: у папки — свой рисунок, у Profile — свой, без схематичных плашек-заглушек. Подпись всегда под иконкой. Открытие папки/приложения — клик по иконке плавно перелетает и вырастает в центре (на месте лого), становясь хабом (см. "ЦЕНТР ЭКРАНА" в main.js). Левитация (--levitate-y) считается в JS покадрово (main.js, tickLevitation) и применяется через CSS-переменную, а не через @keyframes — потому что линии-связи в том же кадре перерисовываются от актуального getBoundingClientRect() узлов, и должны идеально следовать за покачивающимися иконками, а не отставать от них. Всё в относительных долях экрана и fluid-единицах (clamp), а не в фиксированных брейкпоинтах. ═══════════════════════════════════════════════════════ */ :root { /* Размер объектов на большом экране (решение владельца 10.10.2026) — иконки узлов (спутник, Profile на столе, знак сайта — от спутника), лого (boot.css), хаб папки и категории, работы категории. Те же рампы короткой стороны, что у --px-up (style.css), свои ступени — на 8 % крупнее, чем было до 10.10: на 1920 (940–1080) — чем на окне 1920×960, где их смотрел владелец (не вровень с текстом: 1.38); на 2560 (1340–1440) и 3840 (2060–2160) — чем во весь экран 2560×1440 и 3840×2160. Хаб и работы — своими числами: раньше их на больших экранах ограничивала доля короткой стороны (18vmin, 8.8vmin), а не --px-up. Размер = значение при 900 × множитель; при короткой стороне ≤ 900 — 1px, ничего не меняется. */ --icon-up: calc(1px + var(--up-ramp-1920) * (1.2168 - 1) + var(--up-ramp-2560) * (1.9872 - 1.2168) + var(--up-ramp-3840) * (3.18 - 1.9872) + var(--up-ramp-over) * 1.325); --hub-up: calc(1px + var(--up-ramp-1920) * (1.2168 - 1) + var(--up-ramp-2560) * (1.9713 - 1.2168) + var(--up-ramp-3840) * (2.957 - 1.9713) + var(--up-ramp-over) * 1.232); --work-up: calc(1px + var(--up-ramp-1920) * (1.152 - 1) + var(--up-ramp-2560) * (1.728 - 1.152) + var(--up-ramp-3840) * (2.592 - 1.728) + var(--up-ramp-over) * 1.08); /* Реакция хаба на наведение (.os-icon-wrap--hub) — заметно тише, чем у спутников (--hub-hover-scale 1.06 < 1.08 у спутников), потому что хаб и так самый крупный объект на экране. Реакции на клик нет — сжатие пробовали и убрали: перелёт хаба уже достаточная обратная связь, а сжатие рисковало сорвать замер FLIP (см. docs/CHANGELOG.md). */ --hub-hover-scale: 1.06; /* Отступ подписи от иконки — папки-спутники и работы-спутники (.os-app, .os-subchild и хаб .os-subhub — везде, КРОМЕ Profile, см. --profile-label-gap ниже). Было 12px, по прямому запросу («подписи слишком далеко, уменьшить примерно вдвое») уменьшено до 6px. */ --node-label-gap: calc(6 * var(--px-up)); /* Подпись работы в категории (07.10.2026). Видна только у работы под курсором — то есть всегда при увеличенной картинке (--work-hover-scale, от центра), поэтому видимый отступ меряется от увеличенного края: тот же, что у подписей узлов. Раскладка колец меряет бокс работы (картинка + --work-layout-gap + подпись, buildCategoryWorks в main.js) — этот зазор не менять: раскладка «Плакатов» хаотически чувствительна к любому пикселю. Подпись доводится до видимого отступа сдвигом (translate) — вне раскладки. */ --work-label-gap: var(--node-label-gap); --work-layout-gap: calc(2 * var(--px-up)); --work-hover-scale: 1.08; /* Сторона бокса, в который вписана картинка работы в категории (07.10.2026, решение владельца): от короткой стороны экрана, минимум 64 px — по плакату на телефоне удобно попадать пальцем (было clamp(56px, 5.5vw, 84px): на любом экране уже ~1020 px — 56, плакат ~40 px шириной). На 1440×900 8.8vmin = 5.5vw = 79,2 px — то же. Выше 900 — 79,2 px (8.8vmin при 900) × --work-up (10.10.2026; было clamp(64px, 8.8vmin, calc(84 * --px-up)) — на больших экранах работало только 8.8vmin). Раскладка колец берёт число отсюда (workIconFitBox в main.js — замером), своего в JS нет. */ --work-icon-size: calc(max(64px, min(8.8vmin, 79.2px)) + 79.2 * (var(--work-up) - 1px)); /* Приближение картинки открытой работы (07.10.2026): работает, только если картинка вырастет хотя бы во столько раз (меньше — курсор обычный, клик ничего не делает; toggleWorkZoom в main.js). */ --work-zoom-min: 1.15; /* Открытая работа не растягивается сверх полного файла больше чем во столько раз — в CSS px, без DPR (08.10.2026, решение владельца): потолок бокса картинки в updateOpenWorkLayout и приближения «на весь экран» в refreshWorkZoom (main.js). */ --work-upscale-max: 1.15; /* Листание открытой работы (10.10.2026, решение владельца): соседи — предыдущая у левого края, следующая у правого, частично за краем. Сосед вписан в квадрат --work-peek-size доли высоты экрана (вытянутая работа — не шире --work-peek-wide его стороны); на экране видно не больше --work-peek-show его ширины; если места у края меньше --work-peek-min и меньше --work-peek-show-min ширины — соседа нет (телефон), только шевроны. Свайп — сдвиг пальцем хотя бы на --work-swipe-min по горизонтали (layoutWorkStrip, pageWork в main.js). */ --work-peek-size: 0.46; --work-peek-wide: 1.6; --work-peek-show: 0.62; --work-peek-show-min: 0.2; --work-peek-min: var(--space-6); --work-swipe-min: calc(40 * var(--px-up)); /* Шевроны листания «‹ ›»: линия как у спиц (толщина — из диапазона linkWidth, цвет --text-muted, наведение --text-primary), без кругов и подложек. Видимая высота --pager-h, ширина — доля высоты; зона нажатия — невидимый квадрат --pager-hit (на таче --hint-ok-hit-touch). */ --pager-h: calc(28 * var(--px-up)); --pager-w: calc(var(--pager-h) * 0.43); --pager-line-w: calc(1.5 * var(--px-up)); --pager-hit: calc(32 * var(--px-up)); /* Отступ подписи от иконки Profile отдельно — на рабочем столе (.os-app) и в открытом виде (.os-subhub, хаб-фото) — не общий токен с папками. Оставлен прежним (12px, подобран под увеличенное hover-состояние — Profile крупнейший безрамочный hover-хаб на сайте, самый жёсткий случай, см. прежнее обоснование в docs/CHANGELOG.md): тот же множитель ×2 для папок ужал бы подпись Profile под hover почти вплотную — реальный баг, найденный по фидбэку, когда --node-label-gap правился одним общим числом на всех. Применяется через `:has(.os-icon--photo)` (тот же приём, что уже используют --profile-icon-size/--drawer-hub-size ниже и .os-icon-wrap--hub:has(.os-icon--photo) в desktop.css) — Profile единственный узел с photoIcon в apps-data.js, отдельный класс не нужен. */ --profile-label-gap: calc(12 * var(--px-up)); /* Размер иконки спутника (папка/категория/приложение) — один токен на всех, раньше вдобавок множился на --depth-scale (псевдослучайная "глубина" узла на столе или реальный вес папки по числу/объёму файлов внутри — оба убраны, см. docs/CHANGELOG.md: "все папки на уровне одного размера"). Наведение — тоже один токен, вместо прежнего "текущий --depth-scale × 1.16". 1.16 → 1.08 (24.09): по скиллу наведение не больше 1.08 (futuristic-os-design/SKILL.md, «Движение»). */ /* От короткой стороны экрана (02.10.2026, было 15vw): от одной ширины на телефоне лёжа (844×390) спутник был 110 px, как на десктопе, и восемь категорий вокруг хаба не разводились. На 1440, 768, 390, 375 — прежние 110 / 110 / 77 / 77 px. */ --sat-icon-size: calc(clamp(77px, 15vmin, 110px) + 110 * (var(--icon-up) - 1px)); --sat-hover-scale: 1.08; /* Стопка работ — иконка категории на уровне папки (10.10.2026, buildCategoryStack в main.js): площадь верхней карточки — как у иконки спутника (--sat-icon-size²), вытянутая — не длиннее --stack-wide его стороны; каждая следующая — на --stack-step стороны вверх-вправо и в --stack-shrink раз меньше. JS читает числа один раз. */ /* Сторона-единица стопки — сторона иконки спутника, но не больше 12,5vmin (+ рост больших экранов, как у иконок): на тесном экране (телефон, 844×390) стопка с подписью в две строки иначе не помещается, и разведение перекидывало категории на другую сторону хаба — композиция по умолчанию важнее (на 1440 и больших — ровно иконка). */ /* Телефон (13.10.2026, владелец: на 390×844 стопки ~31×44 рядом с хабом 101 — мелко): потолок 12,5vmin × --stack-narrow при короткой стороне ≤ 430 px, плавно до ×1 к 600 (как --line-w-narrow) — без правил под ширину; с 600 и на десктопе — ровно как было. В тот же день ещё +10 % по стороне (владелец): 1,25 → 1,375. Хаб-призрак — --hub-icon-size, от этого множителя не зависит. */ --stack-narrow: 1.375; --stack-cap: clamp(12.5vmin, calc(12.5vmin * var(--stack-narrow) - (100vmin - 430px) * (var(--stack-narrow) - 1) * 75 / 170), calc(12.5vmin * var(--stack-narrow))); --stack-unit: calc(min(var(--sat-icon-size), calc(var(--stack-cap) + 110 * (var(--icon-up) - 1px))) * var(--stack-scale)); /* Стопки меньше иконки (10.10.2026, владелец: стопки перетягивали внимание с хаба): площадь верхней карточки −35 % (сторона × √0,65), в тот же день — ещё −20 % от этого (× √0,8): −48 % от иконки; 11.10.2026 — ещё −15 % (× √0,85): −56 % от иконки. Хаб «Работы» — самый крупный на уровне. */ --stack-scale: 0.665; --stack-step: 0.07; --stack-shrink: 0.86; --stack-wide: 1.4; /* Веер при наведении мышью (10.10.2026): верхняя на месте, вторая — влево, третья — вправо, вокруг своего нижнего края, как карты в руке; сдвиг — доля --stack-unit. Прогресс --fan (0…1) пишет цикл (updateNodeScale, --t-stack-fan, --ease-navigate). */ --stack-fan-rot-2: -13deg; --stack-fan-rot-3: 12deg; --stack-fan-dx: 0.08; /* Листы стопки-спутника покачиваются каждый сам (13.10.2026, владелец: стопка левитировала одним целым, будто склеенная): поверх левитации узла и веера у каждой карточки свой сдвиг по x и y (до --stack-sway-shift) и поворот вокруг нижнего края (до --stack-sway-rot) — синусоиды со своей фазой и периодом (--t-stack-sway-*). Ведёт цикл (updateNodeScale); у хаба-призрака, в перелёте, раздаче, сборе и драге — нет. */ --stack-sway-shift: calc(1.2 * var(--px-up)); --stack-sway-rot: 0.9deg; /* Хабом категория — та же стопка, призраком (11.10.2026, решение владельца): вписана в квадрат хаба (--hub-icon-size, как папка раньше — зона хаба и кольца те же), непрозрачность — эта; громкий элемент на уровне — подпись под ней. С 13.10.2026 — у каждой карточки своя: карточка становится призраком в кадр, когда с неё снимается её лист (работа), и полной — в кадр, когда он лёг обратно (data-ghost пишет рендер-цикл, updateStackDeal в main.js). Только прозрачность — без контуров, подложек и фильтров. */ --stack-ghost-opacity: 0.18; /* Лист, снимаемый со стопки, приподнимается: путь — дуга (квадратичная кривая, контрольная точка выше старта на эту долю высоты карточки), без перелёта за место. */ --stack-sheet-lift: 0.35; /* Закрытый узел стола ("locked" в apps-data.js) — состояние «неактивен», а не глубина (яркостью глубину не показываем). Иконка — чёрно-белая, не полупрозрачная (решение владельца 06.10.2026; было приглушение 0.5 с 04.10): --locked-icon-filter на самой картинке, --locked-icon-op — прозрачность иконки (1 — без приглушения, вариант «а»; вариант «б» — 0.75, один шаг текстовой шкалы --text-soft → --text-secondary на фоне; снимки в .claude/tmp/locked-gray/). Подпись — --locked-label-op, как с 04.10 (--text-soft при ней ≈ --text-muted, снимки в .claude/tmp/locked-dim/). Одна степень для всех закрытых узлов. */ --locked-icon-filter: grayscale(1); --locked-icon-op: 1; --locked-label-op: 0.5; /* Знак сайта (.os-site): видимая рамка иконки (или высота заглавной у временной буквы) вписывается в квадрат этой стороны — fitSiteGlyph в main.js. Сторона — видимая высота папки на уровне папки: корпус folder.svg по Y 58…206 из 256. Подпись — на том же расстоянии от видимого края знака, что у папки: зазор узла + пустое поле под корпусом папки (206…256 из 256). */ --site-glyph-size: calc(var(--sat-icon-size) * 148 / 256); --site-label-gap: calc(var(--node-label-gap) + var(--sat-icon-size) * 50 / 256); /* Допуск зоны наведения, клика и драга узла сайта вокруг контура знака (siteHitPolygon в main.js → clip-path обёртки иконки). Пустые углы квадрата знака — мимо. */ --site-hit-pad: var(--space-1); /* Превью сайта при наведении на узел «Сайтов» (updateSitePreview в main.js) — ширина, отступ от курсора, от края экрана, масштаб в начале роста и в конце сворачивания, доля появления, за которую прозрачность доходит до 1. JS читает один раз. */ --site-preview-w: calc(350 * var(--px-up)); --site-preview-gap: var(--space-3); --site-preview-edge: var(--space-2); --site-preview-scale-from: 0.3; --site-preview-fade-in: 0.6; /* Иконка Profile на рабочем столе — НЕ --sat-icon-size, а собственный токен: assets/wdoyose.webp — прозрачный PNG с силуэтом, который реально закрашивает лишь часть своего квадратного холста (тонкие лучи/лепестки, много прозрачных полей по краям — тот же силуэт, что и у хаба Profile, см. --hub-shape), тогда как folder.svg заливает почти весь свой квадрат почти сплошной формой. При ОДИНАКОВОМ боксе Profile из-за этого читается заметно мельче папки — число подобрано глазом, не расчётом (см. docs/CHANGELOG.md), так, чтобы визуальная "масса" (не размер бокса) была сопоставима. */ /* От короткой стороны экрана (02.10.2026, было 17.28vw), как --sat-icon-size: на 1440×900, 768×1024, 390×844, 375×667 — прежние 127 / 127 / 89 / 89 px, на телефоне лёжа 844×390 — 89 вместо 127. */ --profile-icon-size: calc(clamp(89px, 17.28vmin, 127px) + 127 * (var(--icon-up) - 1px)); /* Размер хаба (папка/категория открыты в центре) — тоже токеном, тем же множителем ×1.2, что и у спутников, чтобы хаб остался крупнее спутника ровно в той же пропорции, что и раньше (118/92 ≈ 142/110). Фото-хаб Profile лежит в ящике — его размер --drawer-hub-size ниже. */ /* От короткой стороны экрана (02.10.2026, было 18vw): на 1440×900, 768×1024, 390×844, 375×667 — прежние 142 / 138.24 / 101 / 101 px, на 844×390 — 101 вместо 142 (хаб был больше трети высоты экрана). */ --hub-icon-size: calc(clamp(101px, 18vmin, 142px) + 142 * (var(--hub-up) - 1px)); /* Ящик-картотека уровня Profile — геометрия (layoutDrawer в main.js меряет эти токены, своих чисел не держит). Всё — от шкалы --space-*. */ --drawer-max-w: calc(var(--space-8) * 6 + var(--space-6)); /* 624: обод — не шире (передняя карточка — 576) */ --drawer-gutter: var(--space-3); /* поле от ящика (обода и стенки; сверху и снизу — от ящика) до края экрана */ /* фото-хаб на задней карточке: 60 на телефоне … 76 с ширины ~500 (от ширины, не от высоты экрана) */ --drawer-hub-size: clamp(calc(var(--space-7) - var(--space-1)), 15vw, calc(var(--space-7) + var(--space-3) - var(--space-1))); --drawer-pad: var(--space-3); /* поле внутри карточки */ --drawer-who-gap: var(--space-2); /* хаб → имя и роль */ --drawer-fog-scale: 0.97; /* ящик «из тумана»: масштаб в начале входа и в конце ухода (вместе с прозрачностью 0) */ --drawer-open-from: var(--space-6); /* ящик при входе стартует задвинутым: обод выше центра экрана на столько */ --drawer-head-gap: var(--space-3); /* шапка: от последней строки подписи до верха самого высокого корешка */ --drawer-hover-lift: var(--space-1); /* закрытый лист приподнимается под курсором корешка */ --drawer-tab-h: calc(var(--space-4) + var(--space-1)); /* 28: корешок */ --drawer-tab-pad: var(--space-2); /* поле корешка за скосом: ширина корешка = самая длинная подпись + 2 · (скос + поле) */ --drawer-tab-skew: var(--space-2); /* скос бока корешка — около трети его высоты */ --drawer-tab-radius: var(--space-1); /* верхние углы корешка и его стык с краем карточки */ --drawer-radius: calc(var(--drawer-step) / 2); /* 12: верхние углы карточки — половина шага стопки, по краю стопки столбик скруглений */ --drawer-tab-inset: var(--space-3); /* крайний корешок от края карточки — не меньше радиуса угла + скругления стыка корешка (12 + 4) */ --drawer-tab-gap: var(--space-2); /* между колонками корешков */ --drawer-step: var(--space-4); /* 24: шаг стопки — чуть меньше корешка */ --drawer-tilt: calc(var(--drawer-step) / 4); /* 6: наклон боковин листов и скосов стенки — столько px внутрь на каждый --drawer-step вниз (угол 1:4, решение владельца) */ --drawer-overhang: var(--space-4); /* обод выступает за переднюю карточку */ --drawer-rim-h: calc(var(--space-2) + var(--space-1)); /* 12: обод */ --drawer-wall-h: var(--space-7); /* передняя стенка, пустой контур (книзу сужается под углом --drawer-tilt) */ --drawer-key-w: calc(var(--space-8) + var(--space-3)); /* колонка ключей в строках карточки — потолок */ /* На узкой карточке колонка ключей уже (09.10.2026): доля ширины содержимого карточки (cqi — от .os-drawer__body), не меньше --drawer-key-min (самое длинное слово ключа, «Telegram», ~47 px; «Telegram канал» переносится по пробелу). При содержимом от ~312 px (телефон 430 и шире) — ровно --drawer-key-w, как было. */ --drawer-key-min: var(--space-7); /* 64 */ --drawer-key-share: 36cqi; --drawer-row-pad: var(--space-2); --drawer-row-shift: var(--space-1); /* строка входит снизу вверх на столько и уходит вниз */ /* поле строки над и под текстом */ --drawer-compact-h: calc(520 * var(--px-up)); /* ниже этой высоты экрана — компактный ящик */ } .desktop { position: relative; width: 100%; min-height: 100vh; } /* ── Левитация — см. пояснение в шапке файла. .os-app/.os-subchild позиционируются через left/top, поэтому transform тут свободен целиком под покачивание. ── */ .os-node { transform: translateY(var(--levitate-y, 0px)); } .os-node.is-dragging { transform: none !important; } /* Узлы стола и папок (и хаб — тот же элемент) —