/* ------------------------------------------------------------------ Вариант Б, дубль: обновлённые экраны 01–03. Файл добавляет к общей странице ровно три вещи и ничего не отменяет: 01 — сцену звонка: корпус Mac, окно Zoom и панель заметок поверх него. Вместо окна Мюслей с хроникой, которого во время звонка человек не видит; 02 — высоту окна сохранённой встречи под её содержимое; 03 — полосу с чертежом вместо третьего окна подряд. Ни один общий файл страницы не меняется: style.css, recompose-*.css и variant-b-plates.css подключены как есть. ------------------------------------------------------------------ */ :root{ /* тёплый кремовый — тот же, что --g-ink; своё имя нужно потому, что блоки сцены и чертежа пришли из стендов с этим именем */ --cream:#ece7dc; } /* ================================================================== 01 · Во время встречи ================================================================== */ /* сцене нужна колонка шире обычной: строка меню и панель Zoom не переносятся, и в стандартной 1.45fr ноутбук выходит мелким */ .band--mac{grid-template-columns:minmax(280px, .9fr) minmax(0, 1.9fr)} .band--mac .band-copy, .band--mac .band-stage{min-width:0} /* ------------------------------------------------------------------ Ноутбук. Корпус нарисован CSS, внутри живой HTML — текст остаётся текстом, и в любом размере ничего не мылится. ------------------------------------------------------------------ */ .mac{width:min(100%, 960px);margin-inline:auto;container-type:inline-size;container-name:mac} .mac-lid{ padding:11px 11px 15px; border-radius:16px 16px 6px 6px; background:linear-gradient(#3a3a3d, #2a2a2c 42%, #232325); box-shadow: 0 40px 90px rgb(0 0 0 / 42%), 0 8px 22px rgb(0 0 0 / 28%), inset 0 1px 0 rgb(255 255 255 / 16%); } .mac-screen{ position:relative;overflow:hidden; aspect-ratio:16/10;border-radius:6px; background:radial-gradient(120% 110% at 20% -10%, #4a4038 0%, #2c2621 46%, #191713 100%); box-shadow:inset 0 0 0 1px rgb(0 0 0 / 55%); } /* чёлка: перебивает строку меню посередине, как на настоящем экране */ .notch{ position:absolute;z-index:8;top:0;left:50%;transform:translateX(-50%); width:132px;height:24px;background:#0b0b0c;border-radius:0 0 9px 9px; } /* подставка: снизу чуть шире крышки, с выемкой под палец */ .mac-base{ position:relative;height:13px;margin:0 -2.6%; border-radius:0 0 12px 12px; background:linear-gradient(#b9b8b6, #97969a 55%, #6f6e72); box-shadow:0 16px 26px rgb(0 0 0 / 34%); } .mac-base::before{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:88px;height:6px;border-radius:0 0 7px 7px; background:rgb(0 0 0 / 24%); } /* ---------- строка меню macOS ---------- */ .menubar{ position:relative;z-index:6; display:flex;align-items:center;justify-content:space-between;gap:20px; height:24px;padding:0 11px; background:rgb(20 18 15 / 55%); backdrop-filter:blur(14px); color:var(--cream); font:600 11px/1 Inter, system-ui, sans-serif; } .menubar-left,.menubar-right{display:flex;align-items:center;gap:14px} .menubar-left span,.menubar-right span{color:rgb(236 231 220 / 80%);font-weight:400} .menubar .apple{ width:12px;height:12px;flex:none;border-radius:50%; background:rgb(236 231 220 / 86%); } .mb-battery{ position:relative;width:19px;height:10px;flex:none; border:1px solid rgb(236 231 220 / 62%);border-radius:3px; } .mb-battery::before{ content:"";position:absolute;top:1.5px;bottom:1.5px;left:1.5px;width:11px; border-radius:1px;background:rgb(236 231 220 / 82%); } .mb-battery::after{ content:"";position:absolute;top:3px;right:-3px;width:2px;height:4px; border-radius:0 2px 2px 0;background:rgb(236 231 220 / 62%); } .mb-search{ width:12px;height:12px;flex:none;background:rgb(236 231 220 / 82%); mask:url("./assets/icons/magnifyingglass.png") center/contain no-repeat; -webkit-mask:url("./assets/icons/magnifyingglass.png") center/contain no-repeat; } /* значок Мюслей и идущая запись — единственное красное вне окна Zoom */ .menubar-musli{ display:flex;align-items:center;gap:6px; padding:2px 7px;border-radius:5px; background:rgb(236 231 220 / 12%); } .menubar-musli .brand-glyph{width:13px;height:13px;color:var(--cream)} .menubar-musli i{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none} /* подпись «18 мин», а не секундомер: в строке меню приложение считает минутами (MusliMenuBarCaption.elapsed), и врать здесь незачем */ .menubar-musli time{font:400 11px/1 "JetBrains Mono", monospace;color:var(--cream)} /* ---------- сцена рабочего стола ---------- */ .os-stage{position:absolute;inset:24px 0 0} /* ================================================================== Окно Zoom. Собрано кодом, узнаваемость держится на хроме: тёмное окно, плитки с именем в левом нижнем углу, рамка говорящего и нижняя панель с подписанными значками. Кнопки «Запись» тут нет намеренно — запись ведут Мюсли, и путать эти две вещи нельзя. ================================================================== */ .zoom{ position:absolute;left:4%;top:4%;width:74%; border-radius:9px;overflow:hidden; background:#1a1a1b; box-shadow:0 26px 60px rgb(0 0 0 / 52%), 0 0 0 1px rgb(255 255 255 / 7%); font-family:Inter, system-ui, sans-serif; } .zoom-top{ position:relative;display:flex;align-items:center;gap:10px; height:34px;padding:0 11px;background:#212123; } .zoom-lights{display:flex;gap:6px} .zoom-lights i{width:9px;height:9px;border-radius:50%;background:#ff5f57} .zoom-lights i:nth-child(2){background:#febc2e} .zoom-lights i:nth-child(3){background:#28c840} .zoom-info{ display:flex;align-items:center;gap:6px;margin-left:6px; padding:3px 8px;border-radius:5px;background:rgb(255 255 255 / 7%); color:rgb(255 255 255 / 82%);font-size:11px; } .zoom-info .shield{ width:11px;height:12px;flex:none;background:#22c55e; clip-path:polygon(50% 0, 100% 22%, 100% 62%, 50% 100%, 0 62%, 0 22%); } .zoom-view{ display:flex;align-items:center;gap:6px;margin-left:auto; padding:3px 9px;border-radius:5px;background:rgb(255 255 255 / 9%); color:rgb(255 255 255 / 82%);font-size:11px; } .zoom-view .grid-glyph{ width:11px;height:11px; background: linear-gradient(rgb(255 255 255 / 82%) 0 0) 0 0/4.5px 4.5px no-repeat, linear-gradient(rgb(255 255 255 / 82%) 0 0) 100% 0/4.5px 4.5px no-repeat, linear-gradient(rgb(255 255 255 / 82%) 0 0) 0 100%/4.5px 4.5px no-repeat, linear-gradient(rgb(255 255 255 / 82%) 0 0) 100% 100%/4.5px 4.5px no-repeat; } /* ---------- сетка участников ---------- */ .zoom-grid{ display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:8px; background:#0e0e0f; } .zoom-grid figure{ position:relative;margin:0;display:grid;place-items:center; aspect-ratio:16/9;border-radius:7px;overflow:hidden; background:#2b2b2d; } .zoom-grid figure.is-speaking{box-shadow:inset 0 0 0 2px #2d8cff} .ava{ display:grid;place-items:center; width:clamp(38px,4.6vw,58px);aspect-ratio:1;border-radius:50%; background:var(--ava); font-size:clamp(19px,2.3vw,29px);line-height:1; } .zoom-grid figcaption{ position:absolute;left:7px;bottom:6px; display:flex;align-items:center;gap:5px; padding:2px 7px 2px 6px;border-radius:4px;background:rgb(0 0 0 / 52%); font:400 10px/1.4 Inter, system-ui, sans-serif;color:rgb(255 255 255 / 92%); } /* значок микрофона в подписи: включён — белый, выключен — перечёркнут */ .mic{position:relative;width:8px;height:11px;flex:none} .mic::before{ content:"";position:absolute;left:1px;top:0;width:6px;height:7px;border-radius:3px; background:rgb(255 255 255 / 92%); } .mic::after{ content:"";position:absolute;left:0;bottom:0;width:8px;height:4px; border:1px solid rgb(255 255 255 / 92%);border-top:0;border-radius:0 0 5px 5px; } .mic.off{opacity:.75} .mic.off::before{background:#e5484d} .react,.hand{ position:absolute;right:8px;top:7px; font-size:clamp(15px,1.7vw,21px);line-height:1; filter:drop-shadow(0 2px 5px rgb(0 0 0 / 45%)); } .hand{left:8px;right:auto} /* ---------- нижняя панель Zoom ---------- */ .zoom-bar{ display:flex;align-items:center;justify-content:space-between; gap:clamp(2px,.5vw,8px); padding:7px clamp(7px,.9vw,12px) 8px;background:#1f1f21; } .zb{ position:relative;display:grid;justify-items:center;gap:3px; padding:3px 4px;border:0;background:none;cursor:default; color:rgb(255 255 255 / 88%); font:400 8.5px/1.2 Inter, system-ui, sans-serif;white-space:nowrap; } .zb em{ position:absolute;top:-1px;left:calc(50% + 5px); padding:0 4px;border-radius:7px;background:#2d8cff; font:400 8px/1.5 Inter, sans-serif;font-style:normal;color:#fff; } .zb--share{color:#fff} .zb--share .zi{background:#22c55e} .zb--leave{ align-self:center;flex:none; padding:6px 11px;border-radius:6px;background:#e5484d; font:600 10px/1 Inter, system-ui, sans-serif;color:#fff; } /* значки панели: контурные SVG-маски, как в самом Zoom */ .zi{ width:17px;height:17px;background:rgb(255 255 255 / 88%); mask-position:center;mask-repeat:no-repeat;mask-size:contain; -webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain; } .zi-mic{ --i:url("data:image/svg+xml;utf8,"); mask-image:var(--i);-webkit-mask-image:var(--i); } .zi-cam{ --i:url("data:image/svg+xml;utf8,"); mask-image:var(--i);-webkit-mask-image:var(--i); } .zi-people{ --i:url("data:image/svg+xml;utf8,"); mask-image:var(--i);-webkit-mask-image:var(--i); } .zi-chat{ --i:url("data:image/svg+xml;utf8,"); mask-image:var(--i);-webkit-mask-image:var(--i); } .zi-share{ --i:url("data:image/svg+xml;utf8,"); mask-image:var(--i);-webkit-mask-image:var(--i); } .zi-react{ --i:url("data:image/svg+xml;utf8,"); mask-image:var(--i);-webkit-mask-image:var(--i); } .zi-more{ --i:url("data:image/svg+xml;utf8,"); mask-image:var(--i);-webkit-mask-image:var(--i); } /* ---------- панель заметок Мюслей поверх звонка ---------- Панель рисуется в свою натуральную ширину и уменьшается целиком: у кита размеры внутри заданы в пикселях, и если просто сузить окно, поплывут строки. Нижним краем панель встаёт над панелью Zoom, чтобы не закрывать «Завершить» — по нему звонок и узнают. */ .os-notes{ --panel-h:560px; position:absolute;z-index:5; right:4%;bottom:20%;width:430px; transform:scale(.60);transform-origin:100% 100%; filter:drop-shadow(0 24px 44px rgb(0 0 0 / 62%)); } .os-notes musli-notes-web{display:block;height:var(--panel-h,auto)} .os-notes .notes-window{height:100%} /* ранняя заметка: та же строка, но без жёлтого следа и без второй линейки */ .os-notes .notes-window__draft.is-old{border-bottom:0;background:none} .os-notes .notes-window__draft.is-old p{color:rgb(236 231 220 / 62%)} /* курсор в черновике заметки: короткий, один раз, без вечного мигания. Кит вешает на него бесконечную анимацию — снимаем её здесь явно. */ .os-notes .notes-window__draft i{ display:inline-block;width:1px;height:1em;margin-left:2px; vertical-align:-2px;background:currentColor;opacity:.6; animation:none; } .is-typed .os-notes .notes-window__draft i{display:none} /* ================================================================== Узкий экран: раскладку внутри корпуса не трогаем — ниже 760 px вся сцена уменьшается целиком (recompose-mobile.css), как будто смотришь на тот же Mac с расстояния. Здесь остаётся только полоса в одну колонку. ================================================================== */ @media (max-width:1180px){ .os-notes{transform:scale(.52);--panel-h:520px} } @media (max-width:1000px){ .os-notes{transform:scale(.45);--panel-h:520px} } @media (max-width:900px){ .band--mac{grid-template-columns:1fr;gap:34px} .band--mac .band-copy h3{max-width:none} } @media (prefers-reduced-motion:reduce){ .os-notes .notes-window__draft i{display:none} } /* ================================================================== 02 · После встречи ================================================================== */ /* --- правка 1: окну хватает высоты --- Было clamp(400px, 44vw, 640px) на все полосы; сохранённой встрече этого мало. Точную высоту ставит screen-02-saved.js: содержимое выше на средних ширинах, где карточки переносят строки, и одним числом это не покрывается. Здесь — только страховка, если скрипт не дошёл. */ .band--fit .band-screen musli-app-web{height:clamp(470px, 56vw, 780px)} /* Узкий экран: окно не сжимается, а уменьшается целиком, и внутренний холст задан жёстко (1000×625). Для этой полосы холст выше, иначе та же строка срезается и здесь. */ /* Порог тот же, что у кита (760), а не 1000: масштаб `scale(--s)` и `overflow:hidden` кит включает только здесь. Если задать окну жёсткие 1000 px раньше, между 761 и 1000 оно вылезет из колонки и уедет вбок вместе со всей страницей — так и было, пока порог стоял на 1000. Выше 760 высоту меряет и ставит скрипт. */ @media (max-width:760px){ .band--fit .band-screen{height:calc(700px * var(--s))} .band--fit .band-screen musli-app-web{width:1000px;height:700px} } /* ================================================================== 03 · В своей нейросети ================================================================== */ /* ---------- полоса 03 ---------- Раскладка та же, что у широких полос страницы: слева заголовок, справа объяснение. Чертёж встаёт под объяснением, в той же правой колонке, и держит ширину около восьмисот точек — ровно ту, при которой подписи внутри ещё читаются. Во всю полосу он и был той самой гигантской картинкой; в половинной колонке ужался бы до пятисот, и слова внутри пропали бы. Пустое поле слева под заголовком — не промах раскладки: ровно так же устроены первые две полосы, где текст короче окна рядом. */ .band--handoff .band-copy{ display:grid; grid-template-columns:minmax(0,.74fr) minmax(0,1.16fr); gap:clamp(36px,4.6vw,84px); align-items:start; max-width:none; } .band--handoff .copy-side{display:flex;flex-direction:column;gap:16px;min-width:0} .band--handoff .copy-main{display:flex;flex-direction:column;gap:clamp(24px,2.8vw,42px);min-width:0} /* у широких полос абзацы прижаты вправо — здесь колонка уже своя, и прижимать нечего */ .band--handoff .band-copy p{align-self:flex-start;max-width:46ch} .band--handoff .band-copy h3{margin:0;max-width:14ch} .band--handoff .band-draw{width:100%} .band--handoff .band-draw .draw{display:block;width:100%;height:auto} /* Порог раньше обычного: две колонки держатся, пока правая даёт чертежу хотя бы семьсот точек. У́же — подписи внутри мельчают быстрее, чем экономится место, и колонки складываются. */ @media (max-width:1400px){ .band--handoff .band-copy{grid-template-columns:1fr;gap:clamp(24px,3vw,40px)} .band--handoff .band-draw{max-width:900px} } /* Чертёж не умеет ужиматься: подписи перестают читаться раньше, чем он влезает в узкий экран. Ниже девятисот он листается вбок и сохраняет рабочий размер. */ /* Прокрутки внутри чертежа больше нет: на узком экране он уменьшается целиком, как и остальные мокапы (см. recompose-mobile.css). */ /* ================================================================== Тесное окно созвона. Раньше это решалось медиа-запросами по вьюпорту (≤900 и ≤640), но корпус давно живёт своей шириной: на ноутбучном окне он всего 496 px, а на телефоне вообще прибит к холсту 646 px и масштабируется целиком. Вьюпорт про это ничего не знает, поэтому порог считаем от самого корпуса — @container по .mac. ================================================================== */ @container mac (max-width: 860px) { /* строка меню сокращается, как настоящая на узком экране */ .menubar{overflow:hidden;gap:12px} .menubar-left span:nth-child(n+4){display:none} } @container mac (max-width: 760px) { .menubar-left span{display:none} .mb-battery,.mb-search{display:none} .zoom-top{height:30px} .zoom-info span:last-child{max-width:15ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* панель Zoom на узком окне сворачивается до значков и теряет часть кнопок — ровно так же ведёт себя настоящее окно. «Завершить» остаётся: по нему звонок и узнают */ .zoom-bar{gap:0;justify-content:space-between;padding:8px 10px;overflow:hidden} .zoom-bar .zb:nth-child(n+5):not(.zb--leave){display:none} .zb{font-size:0;gap:0;padding:4px} .zb em{display:none} .zb--leave{font-size:10px;padding:5px 10px} } /* ---------- язык чертежа ---------- Контур тоньше и скругление меньше, чем на бумажном листе: на графите прежние 3.6 px и радиус 22 читались бы как толстый маркер. */ .d-plate{fill:rgb(236 231 220 / 4%);stroke:rgb(236 231 220 / 40%);stroke-width:1.6} .d-plate--solid{fill:rgb(236 231 220 / 8%);stroke:rgb(236 231 220 / 72%);stroke-width:2} .d-plate--ghost{fill:none;stroke:rgb(236 231 220 / 30%);stroke-width:1.4;stroke-dasharray:6 6} .d-bar{fill:rgb(236 231 220 / 30%)} .d-bar--strong{fill:rgb(236 231 220 / 62%)} .d-bar--soft{fill:rgb(236 231 220 / 15%)} .d-line{fill:none;stroke:rgb(236 231 220 / 26%);stroke-width:1.4} .d-line--strong{stroke:rgb(236 231 220 / 46%);stroke-width:1.6} .d-edge{fill:none;stroke:rgb(236 231 220 / 36%);stroke-width:1.4;stroke-dasharray:6 6} /* жёлтое — только человек */ .d-mark{fill:color-mix(in srgb, var(--yellow) 34%, transparent)} .d-dia{fill:none;stroke:var(--yellow);stroke-width:1.5} .d-arrow{fill:none;stroke:var(--yellow);stroke-width:1.8} .d-tip{fill:var(--yellow)} /* ---------- подписи ---------- Теперь они на самих предметах и включены всегда: без них четыре части неразличимы, а это первое, что должно быть понятно. Тумблер наверху их прячет — проверить, обходится ли чертёж без слов. */ .lbl{ font-family:"JetBrains Mono", monospace;font-size:10.5px;letter-spacing:.14em; fill:rgb(236 231 220 / 58%); } .lbl--strong{fill:rgb(236 231 220 / 82%);font-size:11.5px} .lbl--in{fill:rgb(236 231 220 / 46%);font-size:9.5px} .lbl--sub{font-size:9.5px;letter-spacing:.1em;fill:rgb(236 231 220 / 36%)} .lbl--y{fill:var(--yellow);font-size:10px} .hide-labels .lbl{opacity:0} /* волосяная линейка между частями внутри фрагмента */ .d-hair{fill:none;stroke:rgb(236 231 220 / 16%);stroke-width:1} /* нейросеть: решётка связей самым слабым тоном — знак, а не украшение. Никакого свечения: контур штриховой, тот же, что у границы, потому что это чужая территория. */ .d-web{fill:none;stroke:rgb(236 231 220 / 12%);stroke-width:1} .d-node{fill:rgb(236 231 220 / 34%)} /* подписи на пластинах чертежа: мельче общей, но того же тона */ .lbl--sm{font-size:9.5px} .lbl--faint{fill:rgb(236 231 220 / 40%)}