/* roles.css — страницы ролей: buyer.html и supplier.html (КД «РАЗВОДКА ПОТОКОВ», 24.09.2026). Отдельным файлом, а не правкой styles.css: пока это каркас на утверждение, и ревьюеру видно, что главная в стилях не тронута. Токены и кирпичи — общие (styles.css): .wrap, .section, .section-label/.section-title/.section-sub, .btn, .final, .door. Здесь только то, чего нет. */ /* ---------- герой роли ---------- */ .role-hero { padding: 96px 0 72px; border-bottom: 1px solid var(--site-table-border); } .role-label { margin: 0; font-size: 15px; font-weight: 600; color: var(--site-text-2); } .role-title { margin: 16px 0 0; max-width: 20ch; font-size: clamp(38px, 5.2vw, 64px); font-weight: 500; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; } .role-lead { margin: 22px 0 0; max-width: 640px; font-size: 18px; line-height: 1.5; color: var(--site-text-2); text-wrap: pretty; } .role-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 34px; } /* ---------- supplier: «как это выглядит» — макет гостевой из двери ---------- */ .role-mock { margin-top: 40px; } .door-static { display: block; max-width: 720px; margin: 0 auto; padding: 0; border: 1px solid var(--site-border); border-radius: 16px; background: var(--site-surface); overflow: hidden; } .door-static .door-win { display: block; } /* ---------- заглушки текстов видны как заглушки ---------- */ [data-c][data-stub] { outline: 1px dashed rgba(180, 83, 9, .4); outline-offset: 4px; } @media (max-width: 860px) { .role-hero { padding: 64px 0 48px; } .role-fact { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 18px 0; } .role-fact-t { font-size: 18px; } } /* ============================================================================= СТРАНИЦА ПОСТАВЩИКА — вёрстка по арке брифа основателя (24.09): порог нулевой → за вас уже работают → правила честные → и есть дом → языки и вход. Визуальный вес распределён по арке: кабинет — полноценная секция с воздухом, «куда смотрим» — тихим тоном. Язык — интерфейс как он есть: макеты продукта, моноширинные акценты, лайм точками. Ни одной стоковой иллюстрации. ============================================================================= */ /* 1 · герой: одна мысль и тихий увод вниз, кнопки нет (так в набросках) */ .sup-hero { padding-bottom: 56px; border-bottom: 0; } .sup-title { max-width: 22ch; } .sup-sub { margin: 26px 0 0; max-width: 46ch; font-size: 21px; line-height: 1.4; color: var(--site-text-2); } /* тезис страницы: третья фраза получает собственную паузу — так она не «дописка с выводом», а то же место, что «Решение — всегда ваше» на главной */ .sup-thesis { margin: 14px 0 0; font-size: 21px; line-height: 1.4; color: var(--site-primary); font-weight: 500; } /* «Здесь вы гость. Но званый.» — вторым голосом под лозунгом: та же высота, что подзаголовок, но графитом: это не пояснение механики, а обращение к читателю */ .sup-guest { margin: 26px 0 0; font-size: 22px; line-height: 1.35; color: var(--site-primary); font-weight: 500; } .sup-scroll { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; font-size: 15px; color: var(--site-text-2); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--site-border); } .sup-scroll svg { width: 15px; height: 15px; } .sup-scroll:hover { color: var(--site-primary); text-decoration-color: var(--site-accent); } /* общий кирпич секций: строки-утверждения */ .sup-lines { margin: 26px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; } .sup-line { font-size: 19px; line-height: 1.4; color: var(--site-primary); text-wrap: pretty; max-width: 42ch; } .sup-lines-lg .sup-line { font-size: 24px; line-height: 1.3; } .sup-lines-dot { gap: 16px; } .sup-lines-dot .sup-line { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 14px; align-items: baseline; max-width: 46ch; } .sup-lines-dot .lime-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--site-accent); } /* 2 · «как это выглядит»: слова слева, настоящая форма справа */ .sup-look { padding-top: 40px; } .sup-look-grid, .sup-office-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; } /* ПАРА «утверждение — кадр» (приём образца, 25.09): одна мысль на пару, следующая пара на странице — зеркальная (.pair-rev). Порядок меняется только на десктопе: на узком экране кадр всегда идёт ПОД текстом, иначе читатель встречает скриншот раньше, чем повод на него смотреть. */ .pair { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; } .pair-rev .pair-copy { order: 2; } .pair-rev .sup-shot { order: 1; } .pair-copy { min-width: 0; } .sup-shot { min-width: 0; } .sup-shot .door-static { display: block; padding: 0; border: 1px solid var(--site-border); border-radius: 16px; background: var(--site-surface); overflow: hidden; box-shadow: 0 10px 20px -8px rgba(88,80,150,.16), 0 4px 10px rgba(88,80,150,.06); } .sup-shot .mock-holder { display: block; border: 1px solid var(--site-border); border-radius: 16px; background: var(--site-surface); overflow: hidden; box-shadow: 0 10px 20px -8px rgba(88,80,150,.16), 0 4px 10px rgba(88,80,150,.06); } /* 3 · «куда смотрим» — взгляд, не роадмап: тише основного списка, без плашек */ .sup-ahead { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--site-border); max-width: 640px; } .sup-ahead-label { margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--site-text-3); } .sup-ahead-list { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .sup-ahead-list li { font-size: 15px; line-height: 1.45; color: var(--site-text-2); } /* 4 · правила — СТЕНА-МАНИФЕСТ. Пятнадцать строк подряд, одинаковым весом: длина списка и есть сообщение. Счётчик слева моноширинный и тихий — он меряет, а не рекламирует. Ниже стены — одна строка-вывод про бесплатно, крупнее остальных. */ .sup-wall { margin: 30px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--site-border); } .sup-wall-l { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--site-table-border); font-size: 18px; line-height: 1.35; color: var(--site-primary); text-wrap: pretty; } .sup-wall-n { font-family: var(--mono); font-size: 12px; color: var(--site-text-3); font-variant-numeric: tabular-nums; } .sup-free { margin: 34px 0 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 500; } /* 5 · кабинет: секция с воздухом, а не подвал мелким шрифтом */ .sup-office { padding-top: 104px; padding-bottom: 104px; } /* 6 · языки: те же пилюли, что видит гость в форме */ .sup-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; } .sup-pill { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--site-border); background: var(--site-surface); font-size: 13px; color: var(--site-text-2); } .sup-pill:first-child { background: rgba(223, 255, 0, .35); border-color: transparent; color: var(--site-primary); } /* 7 · вход: одна строка, ничего больше */ .sup-enter { padding-top: 88px; padding-bottom: 104px; } .sup-enter-t { margin: 18px 0 0; font-size: clamp(26px, 3vw, 36px); font-weight: 500; line-height: 1.18; max-width: 22ch; } .sup-enter-n { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: var(--site-text-2); max-width: 30ch; } @media (max-width: 960px) { .sup-look-grid, .sup-office-grid { grid-template-columns: 1fr; gap: 36px; } .pair { grid-template-columns: 1fr; gap: 32px; margin-top: 34px; } .pair-rev .pair-copy { order: 1; } .pair-rev .sup-shot { order: 2; } .sup-sub { font-size: 17px; } .sup-wall-l { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 13px 0; font-size: 16px; } .sup-office { padding-top: 64px; padding-bottom: 64px; } .sup-lines-lg .sup-line { font-size: 20px; } .sup-line { font-size: 17px; } } /* Макеты на странице роли статичны — hover'а двери здесь нет. Значения проявляются, когда секция доехала до экрана: .reveal → .is-in. Иначе форма и кабинет стоят с пустыми ячейками и читаются как «ничего не заполнено». */ .sup-shot.is-in .mw-val { color: var(--site-primary); transition-delay: calc(var(--i, 0) * .18s + .2s); } .sup-shot.is-in .mw-wait { opacity: 0; transition-delay: calc(var(--i, 0) * .18s + .15s); } .sup-shot.is-in .mw-total-v { color: var(--site-primary); transition-delay: .9s; } .sup-shot.is-in .mw-ai { opacity: 1; } /* РОТАТОР ЗАГОЛОВКА (приём образца, 25.09). Варианты лежат в ОДНОЙ ячейке grid — контейнер берёт высоту самого длинного, и строка «Уже сделано. Не вами.» не прыгает при смене. Уход вверх/приход снизу — 14px, как у .reveal героя. */ .rot { display: block; } .rot-slot { display: grid; } .rot-line { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .rot-line.is-on { opacity: 1; transform: none; } .rot-fixed { display: block; color: var(--site-text-2); } @media (prefers-reduced-motion: reduce) { .rot-line { transition: none; } } /* ТРОЙКА РАЗДЕЛА (приём 1). Одна форма на все разделы: ярлык · заголовок · одна строка. Центрирование делается здесь, а не в каждом блоке — чтобы разделы нельзя было развести по виду, даже случайно. */ .sec-head { text-align: center; max-width: 780px; margin: 0 auto; } .sec-head .section-title { margin: 0 auto; max-width: 20ch; } .sec-head .section-sub { margin: 14px auto 0; max-width: 56ch; } .sec-head + .sup-lines, .sec-head + .sup-wall, .sec-head + .sup-pills { margin-top: 40px; } /* ЧЁРНЫЙ РАЗДЕЛ (приём 3). Единственный тёмный экран страницы — стена правил. Лайм на графите остаётся канонным (Р-19: заливка, не тонкая линия). */ .section-dark { background: var(--site-primary); color: var(--site-on-primary); } .section-dark .section-label, .section-dark .section-sub { color: rgba(255, 255, 255, .62); } .section-dark .sup-wall { border-top-color: rgba(255, 255, 255, .16); } .section-dark .sup-wall-l { color: var(--site-on-primary); } /* у строки свой color: var(--site-primary) — на чёрном он слился бы с фоном */ .section-dark .sup-wall-l { border-bottom-color: rgba(255, 255, 255, .12); } .section-dark .sup-wall-n { color: rgba(255, 255, 255, .42); } .section-dark .sup-free { color: var(--site-accent); } /* ---------- СЦЕНА ГЕРОЯ · 1 В 1 С ГЕРОЕМ ОБРАЗЦА (28.09) ---------- Его моторика, снятая покадрово с шагом 260 мс и перенесённая целиком: · сцена живёт на ШИРОКОМ полотне, камера едет влево вслед за потоком — карточка запроса уходит за левый край, веер встаёт по центру, затем центр у цены; · провод растёт от карточки и расходится ветками, локти скруглены; · у работающей карточки рамка-ГРАДИЕНТ, обрисовывающая её слева направо, по телу идёт белый блик, справа три точки; закончив, точки сменяются галкой; · справа работа веток сходится обратно в одну — у нас в карточку цены. Фон — точечная сетка 12px, тот же графит 6,5%, что канон героя главной (у образца — canvas). Наше отличие одно: у образца все ветки идут сами, у нас цена — не агент, и это мысль страницы. */ .sup-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr); gap: 40px; align-items: center; } /* ГЕРОЙ НА ВЕСЬ ЭКРАН (слово основателя 28.09: «видна часть нижнего блока»). Высота окна минус чердак (--chrome-h ставит script.js по живой высоте шапки); содержимое по центру. Окно сцены растёт вместе с экраном, но не ниже 560 и не выше 760. На узком экране — как было. */ @media (min-width: 981px) { .sup-hero { min-height: calc(100svh - var(--chrome-h, 80px) + 8px); display: flex; align-items: center; padding: 24px 0 32px; box-sizing: border-box; } .sup-hero > .wrap { width: 100%; } .sup-hero .sup-stage { height: clamp(560px, calc(100svh - var(--chrome-h, 80px) - 64px), 760px); margin-top: 0; } } .sup-hero-copy { min-width: 0; } .sup-stage { position: relative; min-width: 0; height: 560px; overflow: hidden; border-radius: 18px; /* сцена посажена так, чтобы окно ввода встало на одну высоту со словом «поставкой.» в заголовке (слово основателя 28.09). Значение подобрано ЗАМЕРОМ в четыре прохода: сдвиг меняет высоту строки сетки, поэтому заголовок едет следом и разница сходится не сразу (443 → 422 → 413 → 409 → 405 при центре слова 405). */ margin-top: -100px; /* ОКНО СЦЕНЫ. Поверхность с фирменной тенью, без рамки (слово основателя 28.09). Вверх и вниз окно растворяется: вертикальная маска гасит и фон, и тень, поэтому видимая граница остаётся только слева и справа, а сверху и снизу цвет затухает — окно читается как вырез в большом полотне, а не как коробка. */ background-color: var(--site-surface); background-image: radial-gradient(circle 1px at 1px 1px, rgba(26, 26, 26, .065) 99%, transparent); background-size: 12px 12px; box-shadow: var(--site-shadow); /* границы — только боковые: вертикальная маска гасит их сверху и снизу сама */ border-left: 1px solid var(--site-border); border-right: 1px solid var(--site-border); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%); --spring: cubic-bezier(.16, 1, .3, 1); --lift: 0 1px 1px rgba(26, 26, 26, .02), 0 2px 2px rgba(26, 26, 26, .022), 0 4px 5px rgba(26, 26, 26, .026), 0 10px 14px rgba(26, 26, 26, .032), 0 20px 30px rgba(26, 26, 26, .045); --edge: inset 0 1px 0 rgba(255, 255, 255, .92); } /* КРАЯ РАСТВОРЯЮТСЯ (аудит 28.09): камера увозит карточки за край, и без растворения у левой кромки торчали обрубки с надписью «АГЕНТ» — читалось как поломка. Шторки поверх полотна, под письмом; рамку окна не трогают — они внутри неё. */ .sup-stage::before, .sup-stage::after { content: ''; position: absolute; top: 0; bottom: 0; width: 84px; z-index: 1; pointer-events: none; } .sup-stage::before { left: 0; background: linear-gradient(90deg, var(--site-surface) 18%, rgba(255, 255, 255, 0)); } .sup-stage::after { right: 0; background: linear-gradient(270deg, var(--site-surface) 18%, rgba(255, 255, 255, 0)); } @media (max-width: 760px) { .sup-stage::before, .sup-stage::after { display: none; } } /* полотно шире сцены: на нём стоят все узлы потока, камера возит его влево */ .fork-cam { position: absolute; left: 0; top: 0; width: 1240px; height: 100%; will-change: transform; } /* ПИСЬМО — первый такт, живёт ДО полотна и не едет (аудит 28.09: вместо строки ввода) */ .fork-ask { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateY(-14px); z-index: 2; display: flex; flex-direction: column; width: min(520px, 94%); box-sizing: border-box; padding: 14px 14px 14px 15px; border-radius: 16px; border: 1px solid rgba(26, 26, 26, .07); background: var(--site-surface); box-shadow: var(--edge), var(--lift); opacity: 0; transition: opacity .5s var(--spring), transform .6s var(--spring); } .sup-stage.is-ask .fork-ask { opacity: 1; transform: translate(-50%, -50%); } /* лист сворачивается в карточку заявки: карточка стоит ровно в центре сцены (камера с неё начинает), поэтому письмо уменьшается «в неё», а не улетает в сторону */ .sup-stage.is-card .fork-ask { opacity: 0; transform: translate(-50%, -50%) scale(.52); transition: opacity .45s var(--spring) .1s, transform .55s var(--spring); } .fork-ask-r { display: flex; align-items: center; gap: 13px; } /* конверт с меткой «не прочитано»: метка гаснет, когда письмо открыли */ .fork-mail { position: relative; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--site-ink-blue-14) center / 20px 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231b4fd8' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='15' height='11' rx='1.5'/%3E%3Cpath d='M3 5.5l7 5.5 7-5.5'/%3E%3C/svg%3E"); } .fork-mail::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--site-ink-clay); box-shadow: 0 0 0 2px var(--site-surface); transition: opacity .25s var(--spring), transform .25s var(--spring); } .sup-stage.is-open .fork-mail::after { opacity: 0; transform: scale(.4); } .fork-ask-x { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .fork-ask-s { font-size: 15px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fork-ask-t { font-size: 13px; line-height: 1.3; color: var(--site-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fork-open { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; background: var(--site-primary); color: var(--site-on-primary); font-size: 12.5px; font-weight: 500; transition: transform .18s var(--spring), background-color .18s var(--spring); } .sup-stage.is-open .fork-open { animation: fork-press .42s var(--spring); } .sup-stage.is-sheet .fork-open { opacity: .0; transition: opacity .3s var(--spring); } /* ЛИСТ ЗАЯВКИ внутри письма: раскрывается по высоте, строки встают лесенкой. Смысл — «нажали и уже внутри»: ни входа, ни формы регистрации между письмом и позициями */ .fork-sheet { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--spring); } .sup-stage.is-sheet .fork-sheet { grid-template-rows: 1fr; } .fork-sheet-in { overflow: hidden; min-height: 0; display: flex; flex-direction: column; } .fork-sheet-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; padding-top: 12px; border-top: 1px solid var(--site-table-border); font-size: 12.5px; color: var(--site-text-2); } .fork-sheet-m { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; background: var(--site-accent); box-shadow: 0 0 0 1px rgba(26, 26, 26, .08); } .fork-sheet-row, .fork-sheet-more { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 8px; font-size: 13px; opacity: 0; translate: 0 6px; } .fork-sheet-row:nth-child(odd) { background: var(--site-bg); } .fork-sheet-v { font-family: var(--mono); font-size: 12px; color: var(--site-text-2); } .fork-sheet-more { color: var(--site-text-3); font-size: 12.5px; } .sup-stage.is-sheet .fork-sheet-row, .sup-stage.is-sheet .fork-sheet-more { opacity: 1; translate: none; transition: opacity .35s var(--spring), translate .45s var(--spring); transition-delay: calc(.25s + var(--r, 0) * .18s); } /* КУРСОР — только у человека. Стрелка графитовая с белой обводкой, как системная */ .fork-cur { position: absolute; left: 0; top: 0; z-index: 5; width: 20px; height: 22px; pointer-events: none; transform-origin: 2px 2px; will-change: transform; /* клик сжимает стрелку к острию — остриё не дёргается */ opacity: 0; transition: opacity .3s ease; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M2 1.5v16.2l4.3-4.1 2.9 6.6 3-1.3-2.9-6.5h6z' fill='%231a1a1a' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E"); filter: drop-shadow(0 2px 3px rgba(26, 26, 26, .25)); } .fork-cur.is-on { opacity: 1; } .fork-cur.is-click { animation: fork-cur-click .3s var(--spring); } @keyframes fork-cur-click { 40% { scale: .82; } } @keyframes fork-press { 35% { transform: scale(.92); } } .fork-caret { width: 1px; height: 15px; background: var(--site-primary); animation: fork-caret 1s steps(2) infinite; } @keyframes fork-caret { 50% { opacity: 0; } } /* провода */ .fork-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .fork-wire { fill: none; stroke: rgba(26, 26, 26, .38); stroke-width: 1.4; stroke-linecap: round; opacity: 0; } .sup-stage.is-fork .fork-wire { opacity: 1; transition: opacity .3s var(--spring); } .fork-merge { opacity: 0 !important; } .sup-stage.is-mine .fork-merge { opacity: 1 !important; } .sup-stage.is-done .fork-wire { opacity: 0 !important; transition: opacity .5s var(--spring); } /* БЕГУЩАЯ ТОЧКА: работа идёт по проводу от заявки к ветке, потом от веток к цене. Графит, не лайм: лайм — заливки от 8px (Р-19), а точка — 7px. */ .fork-dot { position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; z-index: 1; background: var(--site-primary); offset-rotate: 0deg; offset-distance: 0%; opacity: 0; pointer-events: none; } .sup-stage.is-fork .fork-dot:not(.fork-dot-m) { animation: fork-run 1s cubic-bezier(.5, 0, .3, 1) forwards; animation-delay: calc(var(--d, 0) * .3s + .35s); } .sup-stage.is-mine .fork-dot-m { animation: fork-run .8s cubic-bezier(.5, 0, .3, 1) forwards; animation-delay: calc(var(--d, 0) * .12s + .2s); } @keyframes fork-run { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } /* ПОДСВЕТКА ЦЕНЫ: пока поставщик ставит цифру, веер и провода уходят на полтона назад — у главного момента страницы свой свет */ .sup-stage.is-mine:not(.is-done) .fork-b, .sup-stage.is-mine:not(.is-done) .fork-start { opacity: .34; transition: opacity .6s var(--spring); transition-delay: 0s; } .sup-stage.is-mine:not(.is-done) .fork-wire:not(.fork-merge) { opacity: .3; } .sup-stage.is-mine:not(.is-done) .fork-mine { box-shadow: var(--edge), var(--lift), 0 0 0 3px rgba(223, 255, 0, .26), 0 0 0 14px rgba(223, 255, 0, .10), 0 24px 60px -12px rgba(26, 26, 26, .18); } /* карточки: рамка-градиент обрисовывает слева направо, по телу идёт блик */ .fork-c { position: absolute; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: center; overflow: hidden; padding: 14px 16px; border: 1px solid transparent; border-radius: 14px; background: linear-gradient(var(--site-surface), var(--site-surface)) padding-box, linear-gradient(100deg, rgba(26, 26, 26, .34) 0%, rgba(26, 26, 26, .12) 45%, rgba(26, 26, 26, .05) 100%) border-box; box-shadow: var(--edge), var(--lift); opacity: 0; transform: translateY(6px); transition: opacity .45s var(--spring), transform .45s var(--spring), box-shadow .4s var(--spring); } .fork-x { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fork-t { font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fork-n { font-family: var(--mono); font-size: 11.5px; color: var(--site-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fork-by { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--site-text-3); } .fork-shine { position: absolute; inset: 0; pointer-events: none; border-radius: 13px; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%); background-size: 260% 100%; background-position: 140% 0; opacity: 0; } .fork-b.is-on .fork-shine { animation: fork-shine 1.5s var(--spring) forwards; } @keyframes fork-shine { 0% { opacity: 0; background-position: 140% 0; } 18% { opacity: 1; } 100% { opacity: 0; background-position: -40% 0; } } .fork-m { position: relative; width: 18px; height: 18px; } .fork-dots, .fork-ok { position: absolute; inset: 0; } .fork-dots { background: radial-gradient(circle 2px at 2px 8px, var(--site-text-3) 99%, transparent), radial-gradient(circle 2px at 8px 8px, var(--site-text-3) 99%, transparent), radial-gradient(circle 2px at 14px 8px, var(--site-text-3) 99%, transparent); opacity: .4; animation: fork-blink 1s ease-in-out infinite; } @keyframes fork-blink { 0%, 100% { opacity: .3; } 50% { opacity: .85; } } .fork-ok { border-radius: 4px; background: var(--site-accent); opacity: 0; transform: scale(.3); } .fork-ok::after { content: ''; position: absolute; left: 6px; top: 4px; width: 4px; height: 7px; border: solid var(--site-primary); border-width: 0 1.6px 1.6px 0; transform: rotate(42deg); } /* сводка пяти дел — только на телефоне (см. @media 760 ниже) */ .fork-sum { display: none; } .fork-ticks { display: flex; gap: 6px; margin-top: 7px; } .fork-tick { width: 14px; height: 14px; border-radius: 3px; background: var(--site-pill-bg); } .sup-stage.is-fork .fork-tick { animation: fork-tick .3s var(--spring) forwards; animation-delay: calc(var(--d, 0) * .3s + .6s); } @keyframes fork-tick { to { background: var(--site-accent); } } .sup-stage.is-still .fork-tick { background: var(--site-accent); animation: none; } /* узлы потока на полотне */ .fork-start { left: 30px; width: 262px; } /* top/margin-top ставит script.js: ось по замеру */ .fork-start .fork-dots { display: none; } .fork-start .fork-ok { opacity: 1; transform: none; } .sup-stage.is-card .fork-start { opacity: 1; transform: none; } .fork-b { left: 396px; width: 348px; } /* шаг веера в пикселях, а не в процентах: окно стало выше, и проценты растянули бы ветки по всей высоте — плотность пучка важнее, лишняя высота уходит в затухание */ /* карточка ~62px, шаг 80px: пучок плотный, крайние ветки не уходят в затухание окна */ .fork-b-1 { top: calc(50% - 191px); } .fork-b-2 { top: calc(50% - 111px); } .fork-b-3 { top: calc(50% - 31px); } .fork-b-4 { top: calc(50% + 49px); } .fork-b-5 { top: calc(50% + 129px); } .sup-stage.is-fork .fork-b { opacity: 1; transform: none; transition-delay: calc(var(--d, 0) * .3s + .3s); } .sup-stage.is-fork .fork-dots { animation: fork-blink 1s ease-in-out infinite, fork-off .3s var(--spring) forwards; animation-delay: 0s, calc(var(--d, 0) * .3s + 1.7s); } .sup-stage.is-fork .fork-b .fork-ok { animation: fork-ok .45s cubic-bezier(.34, 1.4, .64, 1) forwards; animation-delay: calc(var(--d, 0) * .3s + 1.7s); } @keyframes fork-off { to { opacity: 0; } } @keyframes fork-ok { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } } /* цена — единственный узел, который не делается сам */ .fork-mine { left: 856px; width: 300px; background: linear-gradient(var(--site-surface), var(--site-surface)) padding-box, linear-gradient(100deg, var(--site-accent), rgba(223, 255, 0, .45)) border-box; box-shadow: var(--edge), var(--lift), 0 0 0 3px rgba(223, 255, 0, .26); } .fork-mine .fork-dots { display: none; } .fork-mine .fork-ok { opacity: 0; transform: scale(.3); } .fork-mine.is-typed .fork-ok { opacity: 1; transform: none; transition: opacity .4s var(--spring), transform .4s cubic-bezier(.34, 1.4, .64, 1); } .fork-mine .fork-by { color: var(--site-primary); font-weight: 500; } /* на том же месте, что «АГЕНТ» у веток */ /* размер поля фиксирован ЦЕЛИКОМ: пустой span не держит строку, и поле прыгало по высоте с 12 до 33px в момент набора — замерено 28.09 (ширина была уже зафиксирована) */ .fork-field { display: inline-flex; align-items: center; gap: 1px; width: 140px; height: 38px; box-sizing: border-box; margin-top: 3px; padding: 5px 9px; border: 1px solid var(--site-table-border); border-radius: 8px; background: var(--site-bg); } .fork-price { font-family: var(--mono); font-size: 16px; color: var(--site-primary); } .fork-caret-2 { flex: 0 0 auto; } .sup-stage.is-mine .fork-mine { opacity: 1; transform: none; transition-delay: .5s; } /* ИТОГ — крупная карточка, как у образца итог заказа (слово основателя 28.09: «а то у нас анимация мелкая»). У образца: тихая строка о сверке агентом, крупный номер заказа, строки условий большим кеглем, внизу вложенная плашка со счётом. У нас то же, но КП. */ /* РАМКА КП ХОДИТ ПО КРУГУ (слово основателя 28.09): конический градиент в border-box, угол крутится через @property. Лайм идёт по ободу ДУГОЙ, а не сплошной нитью — так канон Р-19 («лайм — заливка, не тонкая линия») остаётся в силе: на каждом участке это пятно, а не хайрлайн. Где @property не поддержан (Firefox) — рамка просто стоит градиентом, карточка не страдает. */ @property --fork-ang { syntax: ''; initial-value: 0deg; inherits: false; } .fork-done { left: 820px; width: 404px; display: block; padding: 22px 24px 20px; border: 1.5px solid transparent; border-radius: 16px; background: linear-gradient(var(--site-surface), var(--site-surface)) padding-box, conic-gradient(from var(--fork-ang), rgba(26, 26, 26, .10) 0deg, var(--site-accent) 55deg, rgba(26, 26, 26, .10) 130deg, rgba(26, 26, 26, .10) 230deg, var(--site-accent) 300deg, rgba(26, 26, 26, .10) 360deg) border-box; } /* два круга и встала: единственная петля страницы ушла (аудит 28.09) */ .sup-stage.is-done .fork-done { animation: fork-ring 1.6s linear .4s 2; } @keyframes fork-ring { to { --fork-ang: 360deg; } } .fork-done-h { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--site-text-2); } .fork-done-m { position: relative; width: 17px; height: 17px; border-radius: 4px; background: var(--site-accent); flex: 0 0 auto; } .fork-done-m::after { content: ''; position: absolute; left: 5.5px; top: 4.5px; width: 4px; height: 7px; border: solid var(--site-primary); border-width: 0 1.7px 1.7px 0; transform: rotate(42deg); } .fork-done-t { display: block; margin-top: 14px; font-size: 27px; line-height: 1.1; letter-spacing: -.01em; } .fork-done-n { display: block; margin-top: 6px; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--site-text-2); } .fork-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; } .fork-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; } .fork-row-k { font-size: 15px; color: var(--site-text-2); white-space: nowrap; } .fork-row-v { font-family: var(--mono); font-size: 14px; color: var(--site-primary); text-align: right; } .fork-band { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 18px; padding: 13px 15px; border-radius: 11px; background: var(--site-bg); } .fork-band-k { font-size: 14px; color: var(--site-text-2); } .fork-band-v { font-family: var(--mono); font-size: 17px; color: var(--site-primary); } /* шестое дело — строка исхода под суммой */ .fork-done-f { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 13px; color: var(--site-text-2); } .fork-done-fm { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; background: var(--site-accent); box-shadow: 0 0 0 1px rgba(26, 26, 26, .08); } .sup-stage.is-done .fork-mine { opacity: 0; transform: translateY(-6px); transition-delay: 0s; } .sup-stage.is-done .fork-done { opacity: 1; transform: none; transition-delay: .4s; } .sup-stage.is-done .fork-start, .sup-stage.is-done .fork-b { opacity: 0; transform: translateY(-6px); transition-delay: 0s; } /* «уменьшить движение» — веер нарисован и отмечен, камера стоит */ .sup-stage.is-still .fork-cam { transition: none !important; } .sup-stage.is-still .fork-c { opacity: 1; transform: none; } .sup-stage.is-still .fork-ask, .sup-stage.is-still .fork-done { display: none; } .sup-stage.is-still .fork-dots { opacity: 0; animation: none; } .sup-stage.is-still .fork-b .fork-ok { opacity: 1; transform: none; animation: none; } .sup-stage.is-still .fork-caret { animation: none; display: none; } .sup-stage.is-still .fork-cur, .sup-stage.is-still .fork-dot { display: none; } @media (max-width: 980px) { .sup-hero-grid { grid-template-columns: 1fr; gap: 30px; } .sup-stage { height: 520px; margin-top: 0; } } /* НА УЗКОМ ЭКРАНЕ камеры нет: полотно не помещается. Тот же сюжет идёт СВЕРХУ ВНИЗ (аудит 28.09, п. 7): письмо разворачивается в лист, под ним встают заявка, пять дел лесенкой, цена и итог. Курсора и точек нет — на тач-экране курсор был бы враньём. */ @media (max-width: 760px) { .sup-stage { height: auto; overflow: visible; display: flex; flex-direction: column; gap: 9px; background-image: none; background-color: transparent; box-shadow: none; border: 0; mask-image: none; -webkit-mask-image: none; } .fork-ask { position: relative; left: auto; top: auto; width: 100%; order: -1; transform: translateY(8px); } .sup-stage.is-ask .fork-ask { transform: none; } .sup-stage.is-card .fork-ask { opacity: 1; transform: none; } .sup-stage.is-card .fork-sheet { grid-template-rows: 0fr; } .sup-stage.is-card .fork-open { opacity: 0; } .fork-cam { position: static; width: 100%; height: auto; transform: none !important; display: flex; flex-direction: column; gap: 9px; } .fork-wires, .fork-cur, .fork-dot { display: none; } .fork-c { position: relative; left: auto; top: auto; width: 100%; margin: 0; } .fork-t { font-size: 14px; } .fork-b { display: none; } .fork-sum { display: grid; } .fork-sum .fork-n { white-space: normal; } /* перечень дел целиком, без многоточия */ .sup-stage.is-fork .fork-sum { opacity: 1; transform: none; transition-delay: .2s; } .sup-stage.is-fork .fork-sum .fork-dots { animation: fork-blink 1s ease-in-out infinite, fork-off .3s var(--spring) forwards; animation-delay: 0s, 2.1s; } .sup-stage.is-fork .fork-sum .fork-ok { animation: fork-ok .45s cubic-bezier(.34, 1.4, .64, 1) forwards; animation-delay: 2.1s; } .sup-stage.is-still .fork-sum .fork-ok { opacity: 1; transform: none; animation: none; } .sup-stage.is-still .fork-sum .fork-dots { opacity: 0; animation: none; } .fork-done { display: block; } .fork-ask-s, .fork-ask-t { white-space: normal; } /* тема письма не режется многоточием */ .sup-stage.is-mine:not(.is-done) .fork-b, .sup-stage.is-mine:not(.is-done) .fork-start { opacity: 1; } .sup-stage.is-done .fork-start, .sup-stage.is-done .fork-sum, .sup-stage.is-done .fork-mine { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .fork-dots, .fork-caret { animation: none; } .fork-shine { display: none; } .sup-stage.is-done .fork-done { animation: none; } /* рамка стоит градиентом, не бежит */ } /* заголовок труппы — двухфразный, ему нужна ширина: при общих 20ch он рассыпался на четыре строки, у образца такой заголовок держится в две */ .sup-crew .section-title { max-width: 28ch; } /* ---------- ТРИ ЧИСЛА И ТРУППА (28.09) ---------- Числа — кирпич главной (.numbers/.number), здесь только отбивка: блок идёт сразу под героем и не должен спорить с ним ростом. */ .sup-nums { padding-top: 0; padding-bottom: 72px; } .sup-nums .numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 860px) { .sup-nums .numbers { grid-template-columns: 1fr; } } /* ---------- КАРТИНА «ХАОС → ПОРЯДОК» (пересборка 28.09) ---------- Приём образца (знакомство с командой агентов), доведённый до нашего: · ОДИН МЕДИАБОКС на экран, тёплый, со своей рамкой: слева крупная шахматка, к середине она рассыпается редкими плитками и растворяется в точечную сетку, на которой стоит карточка. Хаос и порядок лежат на одном поле — переход виден, а не подразумевается. · ХАОС В ТРИ СЛОЯ: front — три крупные реплики, за которые цепляется глаз; mid — средний план; far — расфокус. Все носители одного вида (белая карточка с тенью), род канала — только значок слева. Чужих логотипов и фирменных цветов нет ни одного. · ЛАЙМ ОДИН, И ТОЛЬКО СПРАВА: квадрат-галка у каждого дела (26px заливкой — Р-19), та же лаймовая точка, что в марке «ЗИП.». Слева лайма нет вовсе. · ДВИЖЕНИЕ СВЕРХ ОБРАЗЦА: дела загораются по одному, и каждое гасит слева реплики, которые оно сняло (поле a в content.js). Конечное состояние — дефолт CSS: при reduced-motion виден тот же итоговый кадр. JS только отматывает картину назад и играет один прогон. */ .scene { --step: 600ms; position: relative; isolation: isolate; overflow: hidden; margin: 48px 0 0; height: clamp(600px, 47vw, 680px); border-radius: 18px; border: 1px solid var(--site-border); background: #f5f3ee; } /* поле: шахматка слева + редкие плитки на стыке (сетка 64px от левого края бокса) */ .scene::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(#ebe8e0, #ebe8e0) 640px 64px / 64px 64px no-repeat, linear-gradient(#ebe8e0, #ebe8e0) 768px 192px / 64px 64px no-repeat, linear-gradient(#ebe8e0, #ebe8e0) 704px 384px / 64px 64px no-repeat, linear-gradient(#ebe8e0, #ebe8e0) 832px 512px / 64px 64px no-repeat, linear-gradient(#ebe8e0, #ebe8e0) 896px 0 / 64px 64px no-repeat, linear-gradient(#ebe8e0, #ebe8e0) 640px 576px / 64px 64px no-repeat, repeating-conic-gradient(#ebe8e0 0 25%, transparent 0 50%) 0 0 / 128px 128px; -webkit-mask-image: linear-gradient(90deg, #000 0 36%, rgba(0, 0, 0, .7) 50%, transparent 72%); mask-image: linear-gradient(90deg, #000 0 36%, rgba(0, 0, 0, .7) 50%, transparent 72%); } /* точечная сетка справа — та же мера, что в герое (12px, графит 6.5%) */ .scene::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle 1px at 1px 1px, rgba(26, 26, 26, .13) 99%, transparent) 0 0 / 14px 14px; -webkit-mask-image: linear-gradient(90deg, transparent 34%, #000 66%); mask-image: linear-gradient(90deg, transparent 34%, #000 66%); } /* ---- левая половина: завал ---- */ .scene-noise { position: absolute; inset: 0 36% 0 0; } .noise-b { position: absolute; z-index: 2; } .noise-b[data-m="front"] { z-index: 3; } .noise-b[data-m="far"] { z-index: 1; } .noise-b i { font-style: normal; } .noise-in { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 18px 11px 11px; border-radius: 14px; background: var(--site-surface); font-size: 15px; line-height: 1.3; color: var(--site-primary); white-space: nowrap; box-shadow: 0 1px 2px rgba(26, 26, 26, .05), 0 12px 26px -12px rgba(26, 26, 26, .24); } .noise-b[data-m="front"] .noise-in { gap: 14px; padding: 15px 24px 15px 14px; border-radius: 16px; font-size: 19px; box-shadow: 0 1px 2px rgba(26, 26, 26, .06), 0 22px 40px -16px rgba(26, 26, 26, .3); } .noise-tx { display: flex; flex-direction: column; } .noise-pre { font-size: 11px; color: var(--site-text-3); margin-bottom: 1px; } .noise-meta { font-size: 12px; color: var(--site-text-3); margin-top: 2px; } .noise-pre:empty, .noise-meta:empty, .noise-n:empty, .noise-you:empty { display: none; } /* «это — вам»: реплика, которую агенты не снимают — срок ставит поставщик. Пометка встаёт последней, когда все шесть дел отработали; у неё одна задача — сказать «остальное ваше» */ .noise-you { position: absolute; left: calc(100% + 10px); top: 50%; translate: 0 -50%; padding: 5px 10px; border-radius: 999px; white-space: nowrap; background: var(--site-primary); color: var(--site-on-primary); font-size: 12px; font-weight: 500; } .scene--anim .noise-you { opacity: 0; translate: -6px -50%; } .scene--anim.is-resolve .noise-you { opacity: 1; translate: 0 -50%; transition: opacity .4s var(--ease) calc(6 * var(--step) + 200ms), translate .5s var(--spring) calc(6 * var(--step) + 200ms); } .noise-b[data-key="file"] .noise-t { font-family: var(--mono); font-size: .88em; letter-spacing: -.01em; } /* значок носителя — единственный признак канала. Свои нейтральные глифы. */ .noise-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--site-pill-bg) center / 17px 17px no-repeat; } .noise-b[data-m="front"] .noise-ic { width: 38px; height: 38px; border-radius: 10px; background-size: 21px 21px; } .noise-b[data-key="msg"] .noise-ic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234a4a44' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h12a1.5 1.5 0 0 1 1.5 1.5v7a1.5 1.5 0 0 1-1.5 1.5H9l-3.5 3v-3H4A1.5 1.5 0 0 1 2.5 13V6A1.5 1.5 0 0 1 4 4.5z'/%3E%3C/svg%3E"); } .noise-b[data-key="mail"] .noise-ic { background-color: var(--site-ink-blue-14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231b4fd8' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='15' height='11' rx='1.5'/%3E%3Cpath d='M3 5.5l7 5.5 7-5.5'/%3E%3C/svg%3E"); } .noise-b[data-key="file"] .noise-ic { background-color: var(--site-ink-clay-14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23bd4418' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M5 2.5h6.5l3.5 3.5v11.5H5z'/%3E%3Cpath d='M11.5 2.5V6H15M7.5 10h5M7.5 13h5'/%3E%3C/svg%3E"); } .noise-b[data-key="form"] .noise-ic { background-color: var(--site-ink-blue-22); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231b4fd8' stroke-width='1.6'%3E%3Crect x='2.5' y='3.5' width='15' height='13' rx='1.5'/%3E%3Cpath d='M2.5 8h15M2.5 12h15M8 8v8.5'/%3E%3C/svg%3E"); } /* счётчик непрочитанных — навесное на углу, главный источник «живого» */ .noise-n { position: absolute; top: -9px; right: -9px; min-width: 22px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--site-ink-clay); color: #fff; font-size: 11.5px; font-weight: 600; box-shadow: 0 0 0 2px #f5f3ee; } /* глубина: расфокус — плотность без нагрузки на чтение */ .noise-b[data-m="far"] .noise-in { opacity: .5; filter: blur(3px); scale: .9; } /* раскладка руками — сетка тут врала бы. Порядок = порядок в content.js; of-type, а не child: первым ребёнком списка стоит