/* Сгенерировано scripts/home-css.mjs — не править: правьте site/css/<блок>.css и запускайте npm run css:home */ /* ---- scenarios-section.css ---- */ /* Блок «Сказали в чате. Обновилось в кафе.»: четыре сценария; запрос набирается в поле, после «Да» меняются экраны на фото кофейни */ #scenarios.b2 { padding-block: clamp(56px, 6vw, 88px) clamp(40px, 5vw, 72px); } .b2-head { display: grid; gap: 16px; max-width: 980px; } .b2-h span { display: inline; } .b2-h span:last-child { color: var(--signal-text); } .b2-lead { margin: 0; max-width: none; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--ink); text-wrap: pretty; } /* на компьютере подзаголовок — одной строкой: ему нужно ~955–1070px, шире колонки заголовка (980px); на планшете и телефоне столько места нет — перенос обычный */ @media (min-width: 1100px) { .b2-head { max-width: none; } .b2-lead { white-space: nowrap; } } /* вкладки — как в блоке «Всё заведение в одной системе» */ .b2-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: clamp(18px, 2vw, 26px); border-bottom: 1px solid var(--line); } .b2-tab { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 12px 6px 14px; border: 0; background: none; color: #63635F; font: 500 16px/1.25 var(--font-body); cursor: pointer; } .b2-tab:hover { color: var(--ink); } .b2-tab[aria-selected="true"] { color: var(--signal-text); } .b2-tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--signal); } .b2-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 8px; } .b2-tab svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* зелёная точка — сценарий уже применён */ .b2-tab__ok { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ok-fg); opacity: 0; transition: opacity .3s ease; } .b2-tab.is-done .b2-tab__ok { opacity: 1; } /* три шага «как это работает»: текущий подсвечивается по ходу демо */ .b2-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: clamp(12px, 1.2vw, 16px) 0 0; padding: 0; list-style: none; } .b2-step { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 15px; line-height: 1.3; transition: color .3s ease; } .b2-step b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-tile); font-size: 13px; font-weight: 700; color: var(--muted); transition: background-color .3s ease, border-color .3s ease, color .3s ease; } .b2-step + .b2-step::before { content: "→"; margin-right: 1px; color: var(--line-tile); } .b2-step.is-past b { border-color: var(--ok-fg); color: var(--ok-fg); } .b2-step.is-on { color: var(--ink); font-weight: 600; } .b2-step.is-on b { border-color: var(--signal-btn); background: var(--signal-btn); color: #fff; } .b2-step__s { display: none; } .b2-grid { margin-top: clamp(12px, 1.2vw, 16px); display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start; } /* высоту строки задаёт сцена: переписка лежит поверх своей ячейки и листается внутри, под ней — кнопки */ .b2-chatbox { position: relative; align-self: stretch; min-height: 0; } /* переписка */ .b2-chat { position: absolute; inset: 0 0 60px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 44px rgba(12, 12, 12, .08); overflow: hidden; } .b2-chat__bar { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 14px 18px; border-bottom: 1px solid #EEEEEB; font-size: 14px; } .b2-chat__bar b { font-size: 16px; font-weight: 600; } .b2-log { display: flex; flex-direction: column; gap: 8px; padding: 16px; overflow-y: auto; min-height: 0; font-size: 15px; line-height: 1.4; scrollbar-width: thin; } .b2-log > :first-child { margin-top: auto; } .b2-msg { max-width: 90%; padding: 9px 12px; border-radius: 12px; animation: b2-in .28s ease-out both; } .b2-msg--me { align-self: flex-end; background: #E4EBE3; border-bottom-right-radius: 3px; } .b2-msg--bot { align-self: flex-start; background: var(--tile); border-bottom-left-radius: 3px; } .b2-msg--card { width: 100%; max-width: 100%; padding: 12px 14px 14px; } /* задача вкладки — служебная строка в начале переписки */ .b2-msg__img { display: block; width: 96px; height: 72px; margin-bottom: 6px; border-radius: 8px; object-fit: cover; } /* файл во вложении — как в мессенджере: красный значок PDF с загнутым углом, имя и размер */ .b2-file { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 9px; padding: 5px 12px 5px 5px; border-radius: 10px; background: #fff; white-space: nowrap; text-align: left; } .b2-file__ic { grid-row: span 2; display: grid; place-items: end center; width: 26px; height: 32px; padding-bottom: 5px; border-radius: 4px; background: var(--signal-btn); color: #fff; font: 700 8px/1 var(--font-body); font-style: normal; letter-spacing: .03em; clip-path: polygon(0 0, 66% 0, 100% 26%, 100% 100%, 0 100%); } .b2-file__n { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--ink); } .b2-file__s { font-size: 12px; line-height: 1.25; color: var(--muted); } .b2-msg--me .b2-file { display: grid; width: max-content; margin-bottom: 6px; } .b2-typing { display: inline-flex; gap: 5px; padding: 13px 14px; } .b2-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9a9a95; animation: b2-dot 1s infinite ease-in-out; } .b2-typing i:nth-child(2) { animation-delay: .15s; } .b2-typing i:nth-child(3) { animation-delay: .3s; } @keyframes b2-dot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } } @keyframes b2-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* карточка «Проверьте … Применить?» */ .b2-card { display: grid; gap: 6px; } .b2-card p { margin: 0; } .b2-card__h { font-size: 13px; color: var(--muted); } .b2-card__row { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1.3; } .b2-card__img { flex: none; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; } .b2-card__name { flex: 1 1 auto; min-width: 0; font-weight: 600; } .b2-card__val { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; } .b2-card__val s { color: var(--muted); } .b2-card__val b { color: var(--ok-fg); font-weight: 700; } .b2-card__note { font-size: 14px; line-height: 1.35; color: #4A4A46; } .b2-card__q { margin-top: 2px !important; font-weight: 600; } .b2-card__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; } /* ваше сообщение вверху карточки на кадре (телефон): пузырь справа, как в переписке; в окне переписки его нет */ .b2-card__ask { display: flex; align-items: center; gap: 8px; justify-self: end; max-width: 92%; margin-bottom: 4px !important; padding: 6px 10px; border-radius: 12px 12px 4px 12px; background: #E4EBE3; font-size: 14px; line-height: 1.35; } .b2-card__ask-att { flex: none; width: 28px; height: 28px; border-radius: 6px; object-fit: cover; } .b2-card__ask .b2-file__ic { display: grid; place-items: center; font-size: 9px; } .b2-card.is-answered .b2-card__ask { display: none; } .b2-yes, .b2-no { min-height: 44px; border-radius: 12px; font: 600 15px/1.2 var(--font-body); cursor: pointer; transition: background-color .2s var(--ease), transform .15s var(--ease); } .b2-yes { border: 0; background: var(--signal-btn); color: #fff; } .b2-no { border: 1px solid var(--line-tile); background: #fff; color: var(--ink); } .b2-yes:active, .b2-no:active { transform: scale(.97); } .b2-yes:focus-visible, .b2-no:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } @media (hover: hover) { .b2-yes:hover { background: var(--signal-hover); } .b2-no:hover { background: var(--tile); } } .b2-yes.is-hint { animation: b2-pulse 1.6s ease-out infinite; } @keyframes b2-pulse { 0% { box-shadow: 0 0 0 0 rgba(215, 42, 29, .45); } 70% { box-shadow: 0 0 0 12px rgba(215, 42, 29, 0); } 100% { box-shadow: 0 0 0 0 rgba(215, 42, 29, 0); } } .b2-card.is-answered .b2-card__q, .b2-card.is-answered .b2-card__btns { display: none; } /* поле ввода: запрос набирается по буквам */ .b2-compose { display: flex; align-items: flex-end; gap: 8px; margin: 0 12px 12px; padding: 6px 6px 6px 12px; min-height: 48px; border: 1px solid var(--line-tile); border-radius: 22px; background: #fff; } .b2-att { display: none; flex: none; align-self: center; } .b2-att.is-on { display: inline-flex; } .b2-att img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; } .b2-att .b2-file { background: var(--tile); } .b2-field { flex: 1 1 auto; min-width: 0; align-self: center; padding: 5px 0; font-size: 15px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; } .b2-ph { color: #9A9A95; } .b2-compose.has-text .b2-ph { display: none; } .b2-caret { display: none; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -.18em; background: var(--signal); animation: b2-blink 1s steps(2, start) infinite; } .b2-compose.is-typing .b2-caret { display: inline-block; } @keyframes b2-blink { to { visibility: hidden; } } .b2-send { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #E6E5E1; color: #fff; transition: background-color .2s ease, transform .15s ease; } .b2-compose.has-text .b2-send { background: var(--signal-btn); } .b2-compose.is-press .b2-send { transform: scale(.84); } .b2-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* отправлено: на компьютере поле снова пустое — сообщение ушло в переписку */ .b2-compose.is-sent .b2-draft, .b2-compose.is-sent .b2-att { display: none; } .b2-compose.is-sent .b2-ph { display: inline; } .b2-compose.is-sent .b2-send { background: #E6E5E1; } /* под перепиской: следующий сценарий и повтор */ .b2-ctrl { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; display: flex; align-items: center; gap: 6px 16px; visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s .3s; } .b2-ctrl.is-on { visibility: visible; opacity: 1; transition: opacity .3s ease; } .b2-next { min-height: 46px; padding: 11px 18px; border: 0; border-radius: 14px; background: var(--ink); color: var(--paper); font: 500 15px/1.2 var(--font-body); cursor: pointer; } .b2-next::after { content: " →"; } /* после последнего сценария — заявка, как кнопка в шапке, но красная */ .b2-cta { border-color: var(--signal-btn); background: var(--signal-btn); color: #fff; } .b2-cta[hidden] { display: none; } @media (hover: hover) { .b2-cta:hover { border-color: var(--signal-hover); background: var(--signal-hover); color: #fff; } } .b2-next[hidden] { display: none; } .b2-again { display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 8px 2px; border: 0; background: none; color: var(--muted); font: 500 15px/1.2 var(--font-body); cursor: pointer; } .b2-again svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) { .b2-next:hover { background: #2B2B29; } .b2-again:hover { color: var(--ink); } } .b2-next:focus-visible, .b2-again:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } /* сцена: фото и экраны в его пикселях, камера — масштаб и сдвиг */ .b2-scene { position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: #d7cbbb; isolation: isolate; } .b2-cam { position: absolute; left: 0; top: 0; width: 2752px; height: 1536px; /* размеры фото; сценарий ставит их из SCENE */ transform-origin: 0 0; transition: transform 1.6s cubic-bezier(.65, 0, .35, 1), opacity .28s ease; } /* плавный разгон и торможение: без рывков; без will-change — иначе текст на экранах растягивается из мелкого растра и мылится */ .b2-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transition: opacity .6s ease; } .b2-photo--alt { opacity: 0; } .b2-photo--alt.is-on { opacity: 1; } .b2-scr { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; } .b2-scr img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; opacity: 0; transition: opacity .45s ease; } .b2-scr img.is-on { opacity: 1; } .b2-glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(112deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 42%), linear-gradient(300deg, rgba(255, 238, 214, .07) 0%, rgba(255, 238, 214, 0) 55%); } .b2-edge { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 16px rgba(0, 0, 0, .26); } .b2-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: rgba(150, 226, 186, .22); } .b2-scr.is-flash .b2-flash { animation: b2-flash 1.1s ease-out; } @keyframes b2-flash { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } } /* рамка вокруг изменившегося места: внутри экрана, поэтому в его перспективе */ .b2-marks { position: absolute; inset: 0; pointer-events: none; } .b2-mark { position: absolute; border-radius: 10px; box-shadow: inset 0 0 0 6px #34C77B, 0 0 34px rgba(52, 199, 123, .55); } .b2-mark.is-pulse { animation: b2-mark-in .6s ease-out both, b2-mark-glow 1.1s ease-in-out .5s 2; } @keyframes b2-mark-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } } @keyframes b2-mark-glow { 50% { box-shadow: inset 0 0 0 6px #34C77B, 0 0 64px rgba(52, 199, 123, .9); } } .b2-rc { position: absolute; transform-origin: 50% 100%; clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.2, .7, .2, 1); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .28)); } .b2-rc.is-on { clip-path: inset(0 0 0 0); } .b2-rc img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: top; filter: sepia(.08) brightness(.98); } .b2-chips { position: absolute; inset: 0; pointer-events: none; transition: opacity .28s ease; } /* смена плана: кадр и подписи гаснут, камера переставляется, кадр проявляется */ .b2-scene.is-cut .b2-cam, .b2-scene.is-cut .b2-chips { opacity: 0; } /* камера едет: подписи, лупа и «Ваше кафе» гаснут — места им выбраны под кадр, где камера встанет */ .b2-scene.is-moving .b2-chips, .b2-scene.is-moving .b2-where { opacity: 0; transition: none; } /* гаснут сразу, проявляются плавно */ .b2-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; background: #fff; color: var(--ink); font: 600 14px/1.2 var(--font-body); box-shadow: 0 8px 22px rgba(12, 12, 12, .2); white-space: nowrap; opacity: 0; transition: opacity .3s ease; } .b2-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34C77B; } /* цвет рамки изменения */ .b2-chip.is-on { opacity: 1; } /* до изменения — нейтральная подпись «что это»: серая точка вместо зелёной */ .b2-chip--tag { font-weight: 500; } .b2-chip--tag::before { background: #A3A39E; } .b2-chip[hidden] { display: none; } /* лупа: мелкое изменение крупно рядом с ним, в той же зелёной рамке */ .b2-lens { position: absolute; display: grid; gap: 8px; padding: 10px 10px 12px; border: 2px solid #34C77B; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px rgba(12, 12, 12, .22); opacity: 0; transition: opacity .3s ease; } /* без сдвига: место выбрано вплотную к соседям */ .b2-lens.is-on { opacity: 1; } .b2-lens[hidden] { display: none; } .b2-lens__cap { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.2 var(--font-body); color: var(--ink); } .b2-lens__cap::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34C77B; } .b2-lens__img { display: block; border-radius: 8px; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); } .b2-cap { display: none; } /* подпись кадра — как заголовок у переписки: слева мессенджер, справа ваше кафе */ .b2-where { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); font: 600 13px/1.2 var(--font-body); box-shadow: 0 4px 14px rgba(12, 12, 12, .12); pointer-events: none; transition: opacity .3s ease; } .b2-where.is-off { visibility: hidden; } /* под ней изменение: гаснет сразу, без затухания поверх него */ .b2-note { margin-top: 12px; font-size: 13px; color: var(--muted); } /* В узкой двухколоночной сцене подписи ниже: нижняя плашка не касается рамки кассы. */ @media (min-width: 1024px) and (max-width: 1199px) { .b2-chip { padding-block: 6px; } } /* планшет: сцена сверху во всю ширину, переписка под ней */ @media (max-width: 1023px) { .b2-grid { grid-template-columns: minmax(0, 1fr); } .b2-scene { order: 1; } .b2-chatbox { order: 2; position: static; display: grid; gap: 10px; } .b2-chat { position: static; } .b2-log { height: 300px; } .b2-ctrl { position: static; height: auto; flex-wrap: wrap; } /* узкий телефон: «Повторить» уходит на вторую строку, а не за край экрана */ } /* телефон: крупный план, ответ помощника поверх кадра, поле и кнопки под ним */ @media (max-width: 760px) { .b2-tabs { gap: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .b2-tab { flex-direction: column; gap: 5px; min-height: 66px; padding: 10px 2px; font-size: 13px; border-right: 1px solid var(--line); } .b2-tab:last-child { border-right: 0; } .b2-tab[aria-selected="true"] { background: var(--signal-btn); color: #fff; } .b2-tab[aria-selected="true"]::after { display: none; } .b2-tab__ok { position: absolute; top: 9px; right: 9px; box-shadow: 0 0 0 2px #fff; } .b2-steps { flex-wrap: nowrap; justify-content: space-between; gap: 4px; } .b2-step { gap: 6px; font-size: 13px; white-space: nowrap; } .b2-step b { width: 22px; height: 22px; font-size: 12px; } .b2-step + .b2-step::before { margin-right: 0; } .b2-step__t { display: none; } .b2-step__s { display: inline; } .b2-scene { aspect-ratio: 4 / 5; border-radius: 16px; } .b2-chip { font-size: 13px; padding: 7px 11px; } .b2-lens__cap { font-size: 13px; } } /* телефон и телефон боком: переписка сворачивается — ответ и карточка поверх кадра, поле и кнопки под ним */ @media (max-width: 760px), (orientation: landscape) and (max-height: 520px) and (max-width: 1023px) { .b2-chatbox, .b2-chat { display: contents; } .b2-chat__bar, .b2-log, .b2-where { display: none; } .b2-compose { order: 2; margin: 0; } .b2-ctrl { order: 3; } /* отправлено: поле очищается, как в мессенджере; само сообщение — вверху карточки на кадре (.b2-card__ask) */ .b2-cap { display: block; position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; padding: 11px 13px; border-radius: 14px; background: rgba(255, 255, 255, .96); box-shadow: 0 8px 22px rgba(12, 12, 12, .18); font-size: 15px; line-height: 1.38; color: var(--ink); } .b2-cap:empty { display: none; } .b2-cap.is-top { top: 10px; bottom: auto; } /* в конце сценария ответ сворачивается в «Готово» в свободном углу: изменения объясняют подписи */ .b2-cap.is-mini { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 7px 12px; border-radius: 999px; font: 600 14px/1.2 var(--font-body); white-space: nowrap; } .b2-cap.is-mini::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34C77B; } .b2-cap.is-wait { visibility: hidden; } .b2-cap .b2-card__row { font-size: 15px; } .b2-cap .b2-card__img { width: 34px; height: 34px; } } /* телефон боком: сцена по высоте экрана, карточка — справа поверх кадра */ @media (orientation: landscape) and (max-height: 520px) and (max-width: 1023px) { .b2-scene { aspect-ratio: auto; height: 300px; height: min(300px, calc(100svh - 70px)); } /* любой ширины: иначе на 667–760 сцена 4:5 выше экрана */ .b2-cap { left: auto; width: min(320px, 40%); } /* уже полкадра: экран в середине кадра остаётся открытым */ .b2-cap.is-left { left: 10px; right: auto; } /* кадр низкий, карточка узкая: сообщение одной строкой, иначе длинная просьба выталкивает карточку за кадр */ .b2-card__ask { min-width: 0; max-width: 100%; } /* в сетке карточки строка не растягивает её шире кадра */ .b2-card__ask span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } /* узкий телефон: шаги без стрелок и мельче, чтобы остались в одну строку */ @media (max-width: 380px) { .b2-steps { gap: 2px; } .b2-step { gap: 5px; font-size: 12px; } .b2-step b { width: 20px; height: 20px; font-size: 11px; } .b2-step + .b2-step::before { display: none; } } @media (prefers-reduced-motion: reduce) { .b2-cam, .b2-scr img, .b2-photo, .b2-rc, .b2-chip, .b2-chips, .b2-ctrl, .b2-lens { transition: none !important; } .b2-msg, .b2-scr.is-flash .b2-flash, .b2-typing i, .b2-caret, .b2-yes.is-hint, .b2-mark.is-pulse { animation: none !important; } } /* Терминал на исходной фотографии: привязан к координатам камеры, экраны не сдвигаются. */ .b2-terminal { position: absolute; left: 37.2456%; top: 61.3281%; width: 10.9012%; height: 29.2969%; max-width: none; pointer-events: none; } /* ---- bridge-section.css ---- */ /* Переход между «Сказали в чате» и «Всё заведение в одной системе»: одна правка двумя способами. Раскладка (отзыв команды 16.10): чат слева, кабинет справа, в центре крупно «Итог» — меню в зале и касса. Взгляд ведёт красный: им отмечено только то, что поменялось (260 → 270 в чате, поле цены, новая цена в итоге), а при прокрутке связи от обоих окон тянутся к итогу, и в нём цена меняется последней. 19.10 (отзыв): чат и кабинет одной высоты; итог — белый и серый, как соседние окна, без чёрного табло и красных плашек: изменённая позиция — серая, остальные белые, красным только новая цена. */ #bridge.bridge { --g: clamp(36px, 4.4vw, 72px); /* промежуток между колонками — он же длина бегущих полосок к итогу */ background: var(--paper); /* белый, как соседние блоки */ padding-block: clamp(48px, 5vw, 72px); } #bridge .br-head { display: grid; justify-items: center; gap: 16px; text-align: center; } #bridge .br-head .h2 span { color: var(--signal); } #bridge .br-lead { max-width: none; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--ink); text-wrap: balance; } /* три колонки: подписи в одной строке (общие ряды через subgrid), окна и итог по центру своего ряда */ #bridge .br-ways { margin-top: clamp(28px, 3vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 14px var(--g); } #bridge .br-way { margin: 0; display: grid; grid-row: 1 / span 2; grid-template-rows: subgrid; min-width: 0; } #bridge .br-way--ask { grid-column: 1; } #bridge .br-way--res { grid-column: 2; grid-row: 1 / span 3; } #bridge .br-way--tap { grid-column: 3; } /* итог занимает два ряда, первый ряд делят чат и кабинет — они растягиваются до одной высоты (низ на одном уровне) */ #bridge .br-way--res > .br-res { grid-row: 2 / span 2; align-self: start; } #bridge .br-way > .br-win { align-self: stretch; } #bridge .br-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; } #bridge .br-label b { font-family: var(--font-heading); text-transform: uppercase; font-weight: 700; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.1; letter-spacing: var(--tr-m); } #bridge .br-label span { color: var(--muted); font-size: 15px; } #bridge .br-way--res .br-label { justify-content: center; } /* «Итог одинаковый» — по центру над окном */ #bridge .br-way--res .br-label b { color: var(--signal); } #bridge .br-or { display: none; place-items: center; width: 48px; height: 48px; margin: 0 auto; border-radius: 50%; background: var(--paper); border: 1px solid var(--line-tile); font: 700 14px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; } /* окна: переписка и кабинет — спокойные, главное на слайде итог */ #bridge .br-win { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 32px rgba(12, 12, 12, .06); overflow: hidden; font-size: 15px; line-height: 1.4; color: var(--ink); } #bridge .br-win__bar { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 13px 18px; border-bottom: 1px solid #EEEEEB; font-size: 14px; } #bridge .br-win__bar b { font-size: 16px; font-weight: 600; } /* окно кабинета — с той же шапкой, что окна блока «Всё заведение в одной системе» */ #bridge .br-ui .br-win__bar { align-items: center; } #bridge .br-win__bar .br-logo { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--signal); color: #fff; font: 700 14px/1 var(--font-body); } #bridge .br-chat__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px; } #bridge .br-msg { max-width: 88%; padding: 9px 12px; } #bridge .br-msg--out { align-self: flex-end; background: #E4EBE3; border-radius: 12px 12px 3px 12px; } #bridge .br-msg--in { align-self: flex-start; background: var(--tile); border-radius: 12px 12px 12px 3px; } #bridge .br-msg--yes { min-width: 56px; text-align: center; font-weight: 600; } /* ответ помощника: что сделано — строкой сверху, ниже подробности и вопрос */ #bridge .br-msg__h { display: block; margin-bottom: 2px; font-weight: 600; } /* что меняется — красным, как в итоге */ #bridge .br-mark { background: none; color: var(--signal); font-weight: 600; white-space: nowrap; } #bridge .br-ui__body { flex: 1; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-content: start; gap: 12px 16px; padding: 18px; } #bridge .br-ui__img { grid-row: 1 / span 2; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; } #bridge .br-field { display: grid; gap: 4px; min-width: 0; } #bridge .br-field__k { font-size: 12px; color: var(--muted); } #bridge .br-input { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 8px 12px; border: 1px solid var(--line-tile); border-radius: 10px; font-variant-numeric: tabular-nums; } #bridge .br-input--focus { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(215, 42, 29, .12); font-weight: 600; } #bridge .br-input--focus .br-new { color: var(--signal); } #bridge .br-price, #bridge .br-swap { display: inline-grid; } #bridge .br-price i, #bridge .br-swap i { grid-area: 1 / 1; font-style: normal; } #bridge .br-old { opacity: 0; } #bridge .br-was { color: var(--muted); font-size: 13px; font-weight: 400; white-space: nowrap; } #bridge .br-save { grid-column: 1 / -1; justify-self: end; align-self: end; /* окно выше содержимого — кнопка внизу */ display: inline-flex; align-items: center; min-height: 36px; padding: 6px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 14.5px; font-weight: 500; } /* итог: такое же светлое окно, как чат и кабинет; внутри меню в зале и экран кассы */ #bridge .br-res { position: relative; display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 12px 32px rgba(12, 12, 12, .06); } #bridge .br-dev__t { margin: 0 0 6px 2px; font-size: 12px; color: var(--muted); } #bridge .br-tv, #bridge .br-pos { margin: 0; padding: 8px; list-style: none; font-variant-numeric: tabular-nums; } #bridge .br-tv { display: grid; gap: 3px; border: 7px solid #E8E8E4; border-radius: 12px; background: #fff; color: var(--ink); } #bridge .br-tv li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 8px; border-radius: 5px; font-size: 14px; } #bridge .br-pos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; border: 7px solid #E8E8E4; border-radius: 14px; background: #fff; } #bridge .br-pos li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; } #bridge .br-pos b { font-size: 15px; } /* изменённая позиция — серая и в меню, и на кассе; новая цена — красная */ #bridge .br-tv .br-hit, #bridge .br-pos .br-hit { background: var(--tile); box-shadow: none; color: var(--ink); font-weight: 600; } #bridge .br-res .br-hit .br-new { color: var(--signal); } #bridge .br-result { display: flex; align-items: center; justify-content: center; gap: 8px; justify-self: center; max-width: 100%; margin: 0; padding: 9px 16px; border-radius: 999px; background: var(--tile); color: var(--ink); font-size: 15px; font-weight: 600; text-align: center; text-wrap: balance; } #bridge .br-result svg { flex: none; width: 20px; height: 20px; fill: none; stroke: #1F9D5C; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } /* связи от чата и кабинета к итогу — как полоса прокрутки на первом экране (.hero__more): тонкая бледная дорожка, по ней к итогу сбегает и гаснет красный отрезок (на высоте середины окон) */ #bridge .br-link { position: absolute; top: 140px; width: var(--g); height: 2px; overflow: hidden; border-radius: 1px; background: rgba(12, 12, 12, .1); } #bridge .br-link::after { content: ""; position: absolute; inset: 0; animation: br-flow-r 2.2s var(--ease) infinite; } #bridge .br-link--ask { right: 100%; margin-right: 2px; transform-origin: left; } #bridge .br-link--ask::after { background: linear-gradient(90deg, rgba(215, 42, 29, 0), var(--signal)); } #bridge .br-link--tap { left: 100%; margin-left: 2px; transform-origin: right; } #bridge .br-link--tap::after { background: linear-gradient(270deg, rgba(215, 42, 29, 0), var(--signal)); animation-name: br-flow-l; } #bridge .br-link--down { display: none; } @keyframes br-flow-r { 0% { transform: translateX(-100%); opacity: 1; } 70% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); opacity: 0; } } @keyframes br-flow-l { 0% { transform: translateX(100%); opacity: 1; } 70% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); opacity: 0; } } @keyframes br-flow-d { 0% { transform: translateY(-100%); opacity: 1; } 70% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } } /* показ при прокрутке: слева диалог, справа «Сохранить», затем связи и итог. Без JS и при «меньше движения» — сразу итог */ @keyframes br-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes br-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes br-out { from { opacity: 1; } to { opacity: 0; } } @keyframes br-press { 0% { transform: none; } 35% { transform: scale(.93); background: var(--ok-fg); } 100% { transform: none; } } @keyframes br-draw { from { opacity: 0; } to { opacity: 1; } } @keyframes br-hit { from { background-color: transparent; color: inherit; } } #bridge.br-js:not(.is-on) .br-msg--yes, #bridge.br-js:not(.is-on) .br-msg--done, #bridge.br-js:not(.is-on) .br-new, #bridge.br-js:not(.is-on) .br-was, #bridge.br-js:not(.is-on) .br-link, #bridge.br-js:not(.is-on) .br-result { opacity: 0; } #bridge.br-js:not(.is-on) .br-old { opacity: 1; } #bridge.br-js:not(.is-on) .br-tv .br-hit { background: transparent; color: inherit; } #bridge.br-js:not(.is-on) .br-pos .br-hit { background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: inherit; } #bridge.is-on .br-ui .br-old { animation: br-out .2s .7s both; } #bridge.is-on .br-ui .br-new { animation: br-fade .25s .75s both; } #bridge.is-on .br-was { animation: br-fade .3s .9s both; } #bridge.is-on .br-msg--yes { animation: br-in .3s 1.15s both; } #bridge.is-on .br-save { animation: br-press .45s 1.15s both; } #bridge.is-on .br-msg--done { animation: br-in .3s 1.45s both; } #bridge.is-on .br-link { animation: br-draw .4s 1.65s both; } #bridge.is-on .br-res .br-old { animation: br-out .2s 2s both; } #bridge.is-on .br-res .br-new { animation: br-fade .25s 2.05s both; } #bridge.is-on .br-hit { animation: br-hit .35s 2s both; } #bridge.is-on .br-result { animation: br-in .4s 2.35s both; } /* блок «Всё заведение…» сразу после полосы — отступ сверху чуть меньше */ #bridge + #core.sys { padding-top: clamp(48px, 5vw, 72px); } /* планшет и узкий ноутбук: окна рядом через «или», итог под ними; к нему ведёт стрелка вниз */ @media (max-width: 1099px) { #bridge .br-ways { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); grid-template-rows: none; gap: 14px 16px; } #bridge .br-way { grid-row: auto; grid-template-rows: auto 1fr; gap: 14px; align-content: start; } /* чат и кабинет рядом — одной высоты */ #bridge .br-way--res > .br-res { grid-row: auto; } #bridge .br-way--ask { grid-column: 1; grid-row: 1; } #bridge .br-or { display: grid; grid-column: 2; grid-row: 1; align-self: center; margin-top: 44px; } #bridge .br-way--tap { grid-column: 3; grid-row: 1; } #bridge .br-way--res { grid-column: 1 / -1; grid-row: 2; grid-template-rows: auto auto; justify-self: center; width: min(100%, 460px); margin-top: 44px; position: relative; } #bridge .br-way--res .br-label { justify-content: center; } #bridge .br-link--ask, #bridge .br-link--tap { display: none; } /* к итогу — та же полоса, сверху вниз */ #bridge .br-link--down { display: block; top: auto; left: 50%; bottom: calc(100% + 6px); width: 2px; height: 40px; margin-left: -1px; transform-origin: top; } #bridge .br-link--down::after { background: linear-gradient(rgba(215, 42, 29, 0), var(--signal)); animation-name: br-flow-d; } } @media (max-width: 760px) { #bridge .br-head { justify-items: start; text-align: left; } #bridge .br-ways { grid-template-columns: minmax(0, 1fr); } #bridge .br-way--ask, #bridge .br-or, #bridge .br-way--tap, #bridge .br-way--res { grid-column: 1; grid-row: auto; } #bridge .br-or { margin-top: 0; } #bridge .br-way--res { width: 100%; } } @media (prefers-reduced-motion: reduce) { #bridge *, #bridge *::after { animation: none !important; } } /* ---- admin-section.css ---- */ /* «Всё заведение — в одной системе»: вкладки разделов, в каждой — крупный упрощённый экран НИРБИ вместо скриншота. Продажа на кассе связывает вкладки: после «Оплатить» на склад, отчёты, гостей и смену ложатся новые цифры. */ #core.sys { padding-block: clamp(56px, 6vw, 88px) clamp(48px, 5vw, 72px); } #core .sys__head { display: grid; gap: 16px; max-width: 980px; } #core .sys__head .h2 span { color: var(--signal); } #core .sys__lead { max-width: none; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--ink); text-wrap: pretty; } /* вкладки */ #core .sx-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: clamp(26px, 3vw, 38px); border-bottom: 1px solid var(--line); } #core .sx-tabs button { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; padding: 12px 6px 16px; border: 0; background: none; color: #63635F; font: 500 15px/1.25 var(--font-body); cursor: pointer; text-align: center; } #core .sx-tabs button:hover { color: var(--ink); } #core .sx-tabs button[aria-selected="true"] { color: var(--signal-text); } #core .sx-tabs button[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--signal); } #core .sx-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 8px; } #core .sx-tabs svg { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #core .sx-dot { position: absolute; top: 12px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px var(--paper); opacity: 0; transform: scale(.4); transition: opacity .25s var(--ease), transform .25s var(--ease); } #core .sx-tabs button.has-upd .sx-dot { opacity: 1; transform: none; } /* панель: текст слева, экран справа; варианты лежат в одной ячейке — высота не прыгает */ #core .sx-panel { display: grid; grid-template-columns: minmax(250px, .74fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 56px); padding-top: clamp(24px, 3vw, 36px); align-items: start; } #core .sx-panel:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 12px; } #core .sx-copy, #core .sx-screens { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; } #core .sx-c, #core .sx-s { grid-area: 1 / 1; min-width: 0; } #core .sx-c[aria-hidden="true"], #core .sx-s[aria-hidden="true"] { visibility: hidden; pointer-events: none; } #core [hidden] { display: none !important; } #core .sx-c { align-self: start; padding-top: 6px; } #core .sx-c h3 { font: 600 clamp(22px, 1.9vw, 28px)/1.22 var(--font-body); letter-spacing: -.008em; text-wrap: balance; max-width: 18ch; } #core .sx-c p { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 36ch; text-wrap: pretty; } #core .sx-c .sx-try { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; } #core .sx-c .sx-try::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px #FBD9D5; } /* что обновилось после продажи: нижняя строка окна кассы. До оплаты — подпись, какие разделы обновятся: слова без рамок, не кнопки. После оплаты — кнопки с изменениями: склад, выручка и бонусы ведут на вкладки, ОФД — к строке «54-ФЗ и ОФД» под окном */ #core .sx-upd { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 11px 16px; border-top: 1px solid #EEEEEB; background: #FAFAF8; } #core .sx-upd__t { font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; } #core .sx-upd ul { display: flex; flex-wrap: wrap; gap: 6px; } #core .sx-upd li > button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 11px; border: 1px solid transparent; border-radius: 999px; background: transparent; font: 500 13px/1.3 var(--font-body); color: var(--muted); white-space: nowrap; cursor: default; } #core .sx-upd .v { display: none; } #core .sx-upd.is-on li > button { border-color: var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: border-color .2s var(--ease); animation: sx-in .35s var(--ease) both; } #core .sx-upd.is-on li > button::after { content: "→"; content: "→" / ""; display: inline-block; color: var(--muted); transition: transform .2s var(--ease); } #core .sx-upd.is-on li > button:hover { border-color: var(--ink); } #core .sx-upd.is-on li > button:hover::after { transform: translateX(2px); } #core .sx-upd.is-on .v { display: inline; } #core .sx-upd.is-on li:nth-child(1) > * { animation-delay: .45s; } #core .sx-upd.is-on li:nth-child(2) > * { animation-delay: .9s; } #core .sx-upd.is-on li:nth-child(3) > * { animation-delay: 1.15s; } #core .sx-upd.is-on li:nth-child(4) > * { animation-delay: 1.3s; } #core .sx-upd.is-on li:nth-child(5) > * { animation-delay: 1.45s; } #core .dn-t { color: var(--signal-text); font-weight: 600; } #core .up-t { color: var(--ok-fg); font-weight: 600; } @keyframes sx-in { from { opacity: .35; transform: translateY(-3px); } to { opacity: 1; transform: none; } } /* экран */ #core .sx-screens { position: relative; } #core .sw { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 44px rgba(12, 12, 12, .08); overflow: hidden; font-size: 15px; line-height: 1.35; color: var(--ink); } #core .sx-s.sw { align-self: stretch; display: flex; flex-direction: column; } #core .sw--pos .pos__body { flex: 1; } #core .sw--rep .rp { flex: 1; align-content: start; } #core .sx-src { position: absolute; z-index: 2; top: -13px; right: 18px; padding: 5px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.4; opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; } #core .sx-src.is-on { opacity: 1; transform: none; } /* касса */ /* шапка окна у всех вкладок одна: логотип, раздел, где мы */ #core .pos__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 12px 16px; border-bottom: 1px solid #EEEEEB; font-size: 14px; } #core .pos__logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--signal); color: #fff; font: 700 14px/1 var(--font-body); } #core .pos__where { color: var(--muted); } #core .pos__shift { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ok-fg); white-space: nowrap; } #core .pos__shift i { width: 7px; height: 7px; border-radius: 50%; background: #1E9E6A; } #core .pos__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 270px); } #core .pos__menu { padding: 14px 16px 18px; background: #F7F7F5; min-width: 0; } #core .pos__cats { display: flex; gap: 6px; flex-wrap: wrap; } /* все кнопки кассы работают: разделы меню, позиции (нажал — в заказе, ещё раз — убрал), «С собой / В зале», способ оплаты */ #core .pos__cats button, #core .pos__tabs button, #core .pos__pay button { font: 400 13px/1.3 var(--font-body); color: var(--ink); cursor: pointer; } #core .pos__cats button:focus-visible, #core .pos__tabs button:focus-visible, #core .pos__pay button:focus-visible, #core .pos__items button:focus-visible, #core .wk button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } #core .pos__cats button { padding: 5px 12px; border: 1px solid #E4E4E0; border-radius: 999px; background: #fff; transition: border-color .2s var(--ease); } #core .pos__cats button:hover { border-color: #CFCFCB; } #core .pos__cats .is-on, #core .pos__cats .is-on:hover { border-color: var(--signal); color: var(--signal-text); background: #FDEDEB; font-weight: 500; } #core .pos__items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } #core .pos__items li { min-width: 0; } #core .pos__items li[hidden] { display: none; } #core .pos__items button { display: grid; align-content: start; gap: 2px; width: 100%; height: 100%; padding: 8px 8px 10px; border: 1px solid #ECECE8; border-radius: 12px; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } #core .pos__items button:hover { border-color: #CFCFCB; } #core .pos__items img { width: 100%; height: auto; aspect-ratio: 4 / 3; margin-bottom: 6px; border-radius: 8px; object-fit: cover; } #core .pos__items span { font-size: 14px; font-weight: 500; line-height: 1.25; } #core .pos__items b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; } #core .pos__items .is-in, #core .pos__items .is-in:hover { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal) inset; } #core .pos__order { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 18px; border-left: 1px solid #EEEEEB; min-width: 0; } #core .pos__tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: #F2F2F0; font-size: 13px; text-align: center; } #core .pos__tabs button { padding: 5px 0; border: 0; border-radius: 8px; background: none; color: var(--muted); } #core .pos__tabs .is-on { background: #fff; color: var(--signal-text); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } #core .pos__lines { display: grid; gap: 4px; } #core .pos__lines li, #core .pos__total { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; } #core .pos__lines b { font-weight: 600; white-space: nowrap; } #core .pos__lines .is-more { font-size: 13px; color: var(--muted); } #core .pos__lines .is-deal { color: var(--ok-fg); } #core .pos__guest { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } #core .pos__total { align-items: baseline; padding-top: 10px; border-top: 1px solid #EEEEEB; font-weight: 600; } #core .pos__total b { font-size: 22px; line-height: 1.1; color: var(--signal-text); font-variant-numeric: tabular-nums; } #core .pos__pay { display: flex; gap: 6px; } #core .pos__pay button { flex: 1; padding: 6px 0; border: 1px solid #E4E4E0; border-radius: 9px; background: #fff; text-align: center; transition: border-color .2s var(--ease); } #core .pos__pay button:hover { border-color: #CFCFCB; } #core .pos__pay .is-on, #core .pos__pay .is-on:hover { border-color: var(--ink); font-weight: 500; } #core .pos__btn { position: relative; min-height: 50px; border: 0; border-radius: 12px; background: var(--signal-btn); color: #fff; font: 600 16px/1.2 var(--font-body); cursor: pointer; transition: background-color .3s var(--ease), transform .15s var(--ease); } #core .pos__btn:hover { background: var(--signal-hover); } #core .pos__btn:active { transform: scale(.98); } #core .pos__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } #core .pos__btn.is-paid, #core .pos__btn.is-paid:hover { background: var(--ok-fg); cursor: default; } #core .pos__btn:disabled, #core .pos__btn:disabled:hover { background: #D9D6D2; cursor: default; } #core.sys.is-seen .pos__btn.is-call::after { content: ""; position: absolute; inset: -4px; border-radius: 16px; border: 2px solid var(--signal); opacity: 0; animation: sys-call 1.8s var(--ease) .4s 3; pointer-events: none; } @keyframes sys-call { 0% { opacity: .9; transform: scale(.97); } 100% { opacity: 0; transform: scale(1.06); } } #core .pos__rcpt { margin-top: -2px; font-size: 13px; color: var(--muted); text-align: center; } #core .pos__rcpt.is-ok { color: var(--ok-fg); } /* меню и цены */ #core .seg { margin-left: auto; display: inline-flex; padding: 3px; border-radius: 10px; background: #F2F2F0; } #core .seg button { min-height: 32px; padding: 4px 12px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 500 13px/1.2 var(--font-body); cursor: pointer; } #core .seg button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } #core .seg button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; } @keyframes sx-flip { from { opacity: .2; } to { opacity: 1; } } /* как касса: слева прейскурант точки с фото, справа цены по времени; точку и время можно переключить */ #core .sw--menu .mn, #core .sw--guest .gu { flex: 1; } #core .mn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 270px); } #core .mn__list { display: grid; align-content: start; gap: 8px; padding: 14px 16px 16px; background: #F7F7F5; min-width: 0; } #core .mn__list li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border: 1px solid #ECECE8; border-radius: 12px; background: #fff; transition: border-color .2s var(--ease); } #core .mn__list img { width: 52px; height: 52px; border-radius: 9px; object-fit: cover; } #core .mn__n { display: grid; gap: 1px; min-width: 0; } #core .mn__n b { font-size: 15px; font-weight: 600; } #core .mn__n small { font-size: 13px; color: var(--muted); } #core .mn__tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #FDEDEB; color: var(--signal-text); font: normal 600 12px/1.5 var(--font-body); white-space: nowrap; } #core .mn__tag.is-combo { background: var(--cond-bg); color: var(--cond-fg); } #core .mn__tag.is-pt { background: #F2F2F0; color: var(--ink); } #core .mn__p { display: grid; justify-items: end; font-variant-numeric: tabular-nums; } #core .mn__p s { font-size: 13px; color: var(--muted); } #core .mn__p s:empty { display: none; } #core .mn__p b { font-size: 17px; font-weight: 700; white-space: nowrap; } #core .mn__list .is-deal { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal) inset; } #core .mn__list .is-deal .mn__p b { color: var(--signal-text); } #core .mn__list .is-flip .mn__p b { animation: sx-flip .4s var(--ease); } #core .mn__side { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; border-left: 1px solid #EEEEEB; min-width: 0; } #core .mn__k { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } #core .mn__time { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; border-radius: 10px; background: #F2F2F0; } #core .mn__time button { min-height: 34px; padding: 4px 0; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 500 14px/1.2 var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer; } #core .mn__time .is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } #core .mn__time button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; } #core .mn__r { display: grid; gap: 1px; padding: 8px 12px; border: 1px solid #ECECE8; border-radius: 12px; font-size: 13px; color: var(--ink); transition: border-color .2s var(--ease), background-color .2s var(--ease); } #core .mn__r p { display: flex; justify-content: space-between; gap: 8px; } #core .mn__r b { font-size: 15px; font-weight: 600; } #core .mn__r i { font-style: normal; font-size: 15px; font-weight: 700; white-space: nowrap; } #core .mn__r em { font-style: normal; font-size: 12px; color: var(--muted); } #core .mn__r.is-on { border-color: var(--ok-fg); background: #F3FAF7; } #core .mn__r s { margin-right: 4px; font-size: 13px; font-weight: 400; color: var(--muted); } #core .mn__r.is-on em::before { content: "Сейчас · "; font-weight: 600; color: var(--ok-fg); } #core .mn__now { margin-top: auto; padding: 10px 12px; border-radius: 12px; background: var(--ok-bg); color: var(--ok-fg); font-size: 14px; font-weight: 600; line-height: 1.35; text-align: center; } /* склад: устроен как касса — слева остатки плитками, справа техкарта проданной позиции; позиции из техкарты обведены, у них видно, сколько списал последний чек */ #core .sw--stock .stk { flex: 1; } #core .stk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 270px); } #core .stk__left { padding: 14px 16px 18px; background: #F7F7F5; min-width: 0; } #core .stk__k { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } #core .st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } #core .st li { display: grid; align-content: start; justify-items: start; gap: 6px; min-height: 110px; padding: 12px 14px 13px; border: 1px solid #ECECE8; border-radius: 12px; background: #fff; } #core .st li > span { font-size: 14px; font-weight: 500; line-height: 1.25; } #core .st li > b { font: 700 24px/1.1 var(--font-body); white-space: nowrap; font-variant-numeric: tabular-nums; } @media (min-width: 761px) and (max-width: 860px) { #core .st li > b { font-size: 22px; } } #core .st .is-tk { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal) inset; } #core .st .is-low > b { color: var(--signal-text); } #core .st .dn { margin: 0; padding: 3px 8px; border-radius: 999px; background: #FDEDEB; font-size: 12px; opacity: 1; transform: none; } #core .st .dn.is-on { animation: sx-in .35s var(--ease) both; } #core .st .dn:empty { display: none; } #core .lo { font-style: normal; font-size: 12px; line-height: 1.4; color: var(--signal-text); } #core .tk { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; border-left: 1px solid #EEEEEB; min-width: 0; } #core .tk__p { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; } #core .tk__p img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; } #core .tk__p > span:nth-child(2) { display: grid; } #core .tk__p b { font-size: 15px; font-weight: 600; line-height: 1.25; } #core .tk__p > span:nth-child(2) { min-width: 0; } #core .tk li.is-more { font-size: 13px; } #core .tk__p small { font-size: 13px; color: var(--muted); } #core .tk__pr { font-size: 15px; font-weight: 600; white-space: nowrap; } #core .tk ul { display: grid; gap: 7px; padding-top: 9px; border-top: 1px solid #EEEEEB; } #core .tk li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--muted); } #core .tk li b { color: var(--ink); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } #core .tk__f { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 10px; border-top: 1px solid #EEEEEB; font-size: 15px; font-weight: 600; } #core .tk__f b { font-size: 22px; line-height: 1.1; color: var(--ok-fg); font-variant-numeric: tabular-nums; } #core .tk__m { margin-top: -6px; font-size: 13px; color: var(--muted); text-align: right; } #core .tk__ok { margin-top: auto; padding: 12px; border-radius: 12px; background: var(--ok-bg); color: var(--ok-fg); font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center; } /* что списать первым: нижняя строка окна, как «Обновилось» у кассы */ #core .stk__w { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 11px 16px; border-top: 1px solid #EEEEEB; background: #FAFAF8; } #core .stk__w ul { display: flex; flex-wrap: wrap; gap: 6px; } #core .stk__w li { display: inline-block; padding: 6px 11px; border-radius: 999px; background: var(--cond-bg); color: var(--cond-fg); font-size: 13px; line-height: 1.3; } #core .stk__w b { font-weight: 600; } /* дельты */ #core .dn, #core .up { display: inline-block; margin-left: 8px; font-style: normal; font-size: 13px; line-height: 1; vertical-align: baseline; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .3s var(--ease); } #core .dn { color: var(--signal-text); } #core .up { color: var(--ok-fg); } #core .dn.is-on, #core .up.is-on { opacity: 1; transform: none; } /* сотрудники: доступ к разделам */ #core .acc { width: 100%; border-collapse: collapse; font-size: 14px; } #core .acc th, #core .acc td { padding: 20px 10px; text-align: center; font-weight: 400; } #core .acc thead th { padding-block: 10px 6px; font-size: 12px; color: var(--muted); } #core .acc thead th:first-child, #core .acc th[scope="row"] { text-align: left; padding-left: 18px; } #core .acc tbody tr { border-top: 1px solid #F0F0EE; } #core .acc th[scope="row"] { display: flex; align-items: center; gap: 10px; } #core .acc th[scope="row"] > span:last-child { display: grid; } #core .acc b { font-size: 15px; font-weight: 600; } #core .acc small { font-size: 13px; color: var(--muted); } #core .acc__m { display: none; } #core .acc td.y::before, #core .acc td.n::before { content: ""; display: inline-block; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; } #core .acc td.y::before { background: var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230E5A4C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 10.5 3 3 6-6.5'/%3E%3C/svg%3E") center / 14px no-repeat; } #core .acc td.n::before { width: 12px; height: 2px; border-radius: 1px; background: #CFCFCB; } #core .acc .av { width: 38px; height: 38px; } #core .av { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #FDEDEB; color: var(--signal-text); font: 600 13px/1 var(--font-body); } #core .pos__guest .av { width: 24px; height: 24px; font-size: 12px; } #core .av--l { width: 64px; height: 64px; font-size: 22px; } #core .av--ink { background: var(--ink); color: #fff; } /* аватар с лицом: фото вместо буквы */ #core .av--ph { overflow: hidden; background: #E9E6E1; } #core .av--ph img { display: block; width: 100%; height: 100%; object-fit: cover; } /* отчёты */ #core .rp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; padding: 16px; } #core .rp__rev { padding: 18px 20px; border-radius: 14px; background: #1C1919; color: #fff; } #core .rep__k { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #B9B6B2; } #core .rep__v { margin-top: 4px; font: 700 clamp(30px, 2.6vw, 38px)/1.1 var(--font-body); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; } #core .rep__v .up { color: #6FD3A8; font-size: 14px; } #core .rep__m { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 14px; color: #D8D5D1; font-variant-numeric: tabular-nums; } #core .rep__m b { color: #fff; font-weight: 600; } #core .rep__pts { display: grid; gap: 9px; margin-top: 18px; font-size: 13px; color: #D8D5D1; } #core .rep__pts li { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; } #core .rep__pts i, #core .rp__top i { height: 6px; border-radius: 3px; background: #3A3535; overflow: hidden; } #core .rep__pts s, #core .rp__top s { display: block; width: var(--w); height: 100%; border-radius: 3px; background: #8C8783; text-decoration: none; transition: width .6s var(--ease); } #core .rep__pts li:first-child s { background: var(--signal); } #core .rep__pts b { color: #fff; font-weight: 600; } #core .rp__top { padding: 6px 4px; } #core .rp__k { margin-bottom: 10px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } #core .rp__top ol { display: grid; gap: 12px; } #core .rp__top li { display: grid; grid-template-columns: 76px minmax(0, 1fr) 28px; align-items: center; gap: 10px; font-size: 14px; font-variant-numeric: tabular-nums; } #core .rp__top i { background: #EEEEEB; } #core .rp__top s { background: #CFCFCB; } #core .rp__top li:first-child s { background: var(--signal); } #core .rp__top b { text-align: right; font-weight: 600; } #core .rp__week { grid-column: 1 / -1; padding: 2px 4px 2px; } #core .wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: end; height: 92px; } #core .wk li { height: 100%; } #core .wk button { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 6px; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: var(--muted); font: 400 12px/1.2 var(--font-body); text-align: center; cursor: pointer; } #core .wk span { justify-self: center; white-space: nowrap; } #core .wk i { align-self: end; height: var(--h); border-radius: 6px 6px 3px 3px; background: #DEDED9; transition: height .6s var(--ease), background-color .2s var(--ease); } #core .wk button:hover i { background: #CFCFCB; } #core .wk .is-on i, #core .wk .is-on:hover i { background: var(--signal); } #core .wk .is-on span { color: var(--ink); font-weight: 600; } /* гости: как касса — слева гостья, её бонусы и обе точки, справа история с фото позиций */ #core .gu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); } #core .gu__left { display: grid; align-content: start; gap: 10px; padding: 14px 16px 16px; background: #F7F7F5; min-width: 0; } #core .gu__card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px; border: 1px solid #ECECE8; border-radius: 14px; background: #fff; } #core .gu__who { display: grid; gap: 2px; min-width: 0; } #core .gu__who b { font-size: 18px; font-weight: 600; } #core .gu__who > span { font-size: 13px; color: var(--muted); } #core .gu__b { display: grid; justify-items: end; } #core .gu__b span { font-size: 12px; color: var(--muted); } #core .gu__b b { font: 700 30px/1.05 var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; } #core .gu__b .up { margin: 4px 0 0; } #core .gu__left .stk__k { margin-top: 4px; } #core .gu__pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #core .gu__pts li { display: grid; gap: 3px; padding: 14px 16px; border: 1px solid #ECECE8; border-radius: 12px; background: #fff; } #core .gu__pts b { font-size: 15px; font-weight: 600; } #core .gu__pts li > span { font-size: 13px; color: var(--muted); } #core .gu__pts em { margin-top: 4px; font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); } #core .gu__pts em.up-t { color: var(--ok-fg); } #core .gu__hist { display: grid; align-content: start; gap: 6px; padding: 14px 16px 16px; border-left: 1px solid #EEEEEB; min-width: 0; } #core .gu__log li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #F0F0EE; } #core .gu__log li:first-child { border-top: 0; } #core .gu__log img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; } #core .gu__log span { display: grid; min-width: 0; } #core .gu__log b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #core .gu__log small { font-size: 12px; color: var(--muted); } #core .gu__log em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--ok-fg); font-variant-numeric: tabular-nums; white-space: nowrap; } #core .gu__log em.is-minus { color: var(--muted); } #core .gu__log li.is-new { animation: sx-in .4s var(--ease) both; } /* обязательный учёт */ #core .law-strip { margin-top: clamp(28px, 3vw, 40px); padding: 20px; border-radius: 20px; background: var(--tile); } #core .law-strip[open] > .law-strip__summary { display: none; } #core .law-strip__h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 15px; font-weight: 600; } #core .law-strip__h svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #core .law { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } #core .law li { position: relative; display: grid; align-content: start; gap: 4px; padding: 14px 16px 16px 46px; border-radius: 14px; background: #fff; border: 1px solid var(--line); transition: border-color .4s var(--ease), background-color .4s var(--ease); } #core .law li::before { content: ""; position: absolute; left: 14px; top: 15px; width: 20px; height: 20px; border-radius: 50%; background: var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230E5A4C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 10.5 3 3 6-6.5'/%3E%3C/svg%3E") center / 14px no-repeat; } #core .law b { font-size: 15px; font-weight: 600; } #core .law__d { font-size: 13px; line-height: 1.4; color: var(--muted); } #core .law .is-ok { color: var(--ok-fg); font-weight: 600; } #core .law li.is-hit, #core .law li.is-go { border-color: var(--ok-fg); background: #F3FAF7; } #core .law li { scroll-margin-bottom: 24px; } #core .law li:focus { outline: none; } #core .law li:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } #core .sys__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ноутбук: вкладки в две строки иконкой над подписью */ /* полоса «Посмотрите кабинет изнутри» → демо-кабинет: как «Соберём рабочее место» в блоке оборудования (#start .selection-cta) */ #core .sys-try { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: clamp(28px, 3vw, 40px); padding-top: 22px; border-top: 1px solid var(--line); } #core .sys-try h3 { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; } #core .sys-try p { margin-top: 6px; color: var(--muted); font-size: 14px; } /* .button описан только в #start (hardware-section.css) — здесь та же красная таблетка */ #core .sys-try .button { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-width: 280px; min-height: 56px; max-width: 100%; padding: 12px 23px; border: 1px solid transparent; border-radius: 999px; background: var(--signal-btn); color: #fff; font-size: 16px; font-weight: 500; line-height: 1.4; text-decoration: none; transition: background-color .18s var(--ease); } @media (hover: hover) { #core .sys-try .button:hover { background: var(--signal-hover); } } #core .sys-try .button span { font-size: 23px; font-weight: 400; line-height: 1; } @media (max-width: 1180px) { #core .sx-tabs button { flex-direction: column; gap: 6px; font-size: 14px; padding-bottom: 14px; } #core .sx-dot { top: 8px; right: 14%; } #core .sx-panel { grid-template-columns: minmax(0, 1fr); gap: 22px; } #core .sx-c h3 { max-width: 30ch; } #core .sx-c p { max-width: 60ch; } #core .law { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* телефон */ @media (max-width: 760px) { #core .sys-try { flex-direction: column; align-items: stretch; gap: 20px; } #core .sys-try h3 { font-size: 21px; } #core .sys-try p { margin-top: 8px; font-size: 15px; line-height: 1.5; } #core .sys-try .button { width: 100%; min-width: 0; } #core .sx-c[aria-hidden="true"], #core .sx-s[aria-hidden="true"] { display: none; } #core .acc thead, #core .acc td { display: none; } #core .acc tr { display: block; } #core .acc th[scope="row"] { padding: 10px 12px; } #core .acc__m { display: block; font-style: normal; font-size: 13px; color: var(--ok-fg); } #core .wk { height: 72px; gap: 6px; } #core .sx-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } #core .sx-tabs button { min-height: 64px; padding: 12px 6px; font-size: 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } #core .sx-tabs button:nth-child(3n) { border-right: 0; } #core .sx-tabs button:nth-child(n+4) { border-bottom: 0; } #core .sx-tabs button[aria-selected="true"] { background: var(--signal-btn); color: #fff; } #core .sx-tabs button[aria-selected="true"]::after { display: none; } #core .sx-dot { box-shadow: 0 0 0 2px #fff; } #core .sx-c h3 { font-size: 22px; } #core .sx-c p { font-size: 15px; } #core .sw { border-radius: 14px; box-shadow: 0 10px 28px rgba(12, 12, 12, .08); } #core .sx-src { right: 12px; } #core .pos__shift { display: none; } #core .pos__body { grid-template-columns: minmax(0, 1fr); } #core .pos__menu { padding: 12px 14px 14px; } #core .pos__items { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; } #core .pos__items::-webkit-scrollbar { display: none; } #core .pos__items li { flex: 0 0 124px; scroll-snap-align: start; } #core .pos__order { border-left: 0; padding: 12px 14px 16px; } #core .seg { margin-left: 0; } #core .mn, #core .gu { grid-template-columns: minmax(0, 1fr); } #core .mn__list, #core .gu__left { padding: 12px 14px 14px; } #core .mn__list li { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; } #core .mn__list img { width: 44px; height: 44px; } #core .mn__side, #core .gu__hist { padding: 12px 14px 16px; border-left: 0; border-top: 1px solid #EEEEEB; } #core .stk { grid-template-columns: minmax(0, 1fr); } #core .stk__left { padding: 12px 14px 14px; } #core .st { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #core .st li:not(.is-tk) { display: none; } #core .st.is-none li:nth-child(-n+4) { display: grid; } #core .st li { min-height: 0; padding: 11px 12px 12px; } #core .st li > b { font-size: 20px; } #core .tk { padding: 12px 14px 16px; border-left: 0; border-top: 1px solid #EEEEEB; } #core .tk .tk__l { display: none; } /* на телефоне списание уже видно на плитках сверху */ #core .stk__w { padding: 10px 14px; } #core .stk__w li { border-radius: 10px; } #core .rp { grid-template-columns: minmax(0, 1fr); padding: 12px; } #core .rp__top { display: none; } #core .gu__card { gap: 12px; padding: 14px; } #core .gu__b b { font-size: 24px; } #core .gu__log li:nth-child(n+4) { display: none; } #core .law-strip { padding: 12px 16px; border-radius: 14px; } #core .law-strip__summary, #core .law-strip[open] > .law-strip__summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; list-style: none; font-size: 14px; font-weight: 500; line-height: 1.5; cursor: pointer; } #core .law-strip__summary::-webkit-details-marker { display: none; } #core .law-strip__summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; } #core .law-strip__summary svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #core .law-strip[open] > .law-strip__summary svg { transform: rotate(180deg); } #core .law-strip__h { margin-top: 14px; } #core .pos__cats button, #core .pos__tabs button, #core .pos__pay button, #core .seg button, #core .mn__time button, #core .sx-upd li > button { min-width: 44px; min-height: 44px; } #core .wk button { min-height: 44px; } #core .law { grid-template-columns: minmax(0, 1fr); gap: 8px; } #core .law li { padding: 11px 14px 12px 44px; } /* что обновилось: два столбца, чтобы до и после оплаты строка была одной высоты */ #core .sx-upd ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } #core .sx-upd li > button { width: 100%; } #core .sx-upd.is-on li > button::after { margin-left: auto; } } @media (pointer: coarse) { #core .pos__cats button, #core .pos__tabs button, #core .pos__pay button, #core .seg button, #core .mn__time button, #core .sx-upd li > button { min-width: 44px; min-height: 44px; } } @media (max-width: 374px) { /* «Выручка +960 ₽ →» в половине строки на 320 px */ #core .sx-upd { padding: 11px 12px; } #core .sx-upd li > button { gap: 4px; padding: 5px 8px; font-size: 12px; } } @media (prefers-reduced-motion: reduce) { #core .dn, #core .up, #core .sx-src, #core .pos__btn, #core .rep__pts s, #core .rp__top s, #core .law li, #core .sx-dot, #core .sx-upd li > button, #core .sx-upd li > button::after { transition: none; } #core .gu__log li.is-new, #core .sx-upd li, #core .mn__list .is-flip .mn__p b, #core .st .dn.is-on { animation: none; } #core .pos__cats button, #core .pos__pay button, #core .pos__items button, #core .wk i, #core .mn__list li, #core .mn__r { transition: none; } #core.sys.is-seen .pos__btn.is-call::after { animation: none; } } /* ---- onboarding-section.css ---- */ /* «Уже есть касса? Переедем за вас.» (#how, отзыв команды 19.10; было «Перенесём данные. Внедрим под ключ.»): посыл — переезд с iiko и других систем, по центру подзаголовок и три шага, вокруг — предметы того, что переносим. Уже 1100 — три предмета над заголовком. */ /* от соседних блоков отделён тонкими линиями во всю ширину и воздухом (сверху больше: у блока выше нижний отступ меньше) */ #how.hx { position: relative; overflow: hidden; margin-top: clamp(48px, 5vw, 72px); margin-bottom: 32px; padding-block: calc(clamp(96px, 10.5vw, 156px) + 32px); border-block: 1px solid var(--divider); background: var(--paper); /* белый, как соседние блоки (отзыв команды 16.10) */ isolation: isolate; } /* центр */ #how .hx__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 1000px; margin-inline: auto; padding-inline: var(--gutter); container-type: inline-size; } #how .hx__title { width: 100%; font-size: calc(100cqi / 12.5); line-height: 1.08; letter-spacing: var(--tr-xl); } #how .hx__title b, #how .hx__title span { display: block; white-space: nowrap; font-weight: inherit; } #how .hx__title span { color: var(--signal-text); } #how .hx__text { margin-top: clamp(22px, 2.3vw, 32px); max-width: 40em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--ink); text-wrap: balance; } /* три шага переезда (отзыв команды 19.10): заявка → перенос → запуск; номера — счётчиком в красных кружках. Ряд уже текста над ним: по бокам стоят предметы, карточки до них не достают (tests/onboarding.spec.ts) */ #how .hx__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; max-width: 820px; margin: clamp(26px, 3vw, 40px) 0 0; padding: 0; list-style: none; counter-reset: hx-step; text-align: left; } #how .hx__steps li { counter-increment: hx-step; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 10px 30px -18px rgb(0 0 0 / 25%); } #how .hx__steps li::before { content: counter(hx-step); display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 50%; background: var(--signal-btn); color: #fff; font-size: 15px; font-weight: 700; } #how .hx__steps b { display: block; margin-bottom: 4px; font-size: 18px; } #how .hx__steps span { display: block; font-size: 15px; line-height: 1.45; color: var(--muted); text-wrap: pretty; } #how .hx__cta { margin-top: clamp(28px, 3vw, 40px); gap: 12px; min-height: 56px; padding: 14px 30px; font-size: 17px; font-weight: 600; border-color: var(--signal-btn); background: var(--signal-btn); color: #fff; } #how .hx__cta svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); } @media (hover: hover) { #how .hx__cta:hover { background: var(--signal-text); border-color: var(--signal-text); color: #fff; } #how .hx__cta:hover svg { transform: translateX(3px); } } /* предметы: по три с каждой стороны от заголовка; тень одна на все — у вырезанных картинок своей тени нет. Слой предметов отступает от линий на 32px — ровно на столько, на сколько вырос отступ текста: раскладка та же */ #how .hx__tiles { position: absolute; inset: 32px 0; z-index: 1; pointer-events: none; } #how .obj { position: absolute; display: block; height: auto; filter: drop-shadow(8px 16px 14px rgb(58 31 22 / 14%)); } /* предметы разных форматов (отзыв команды 16.10): на компьютере кофе, бар, пекарня, ресторан, шаурма; на телефоне и планшете три: меню с кофе, карта гостя по центру, выпечка. obj--d — только компьютер, obj--m — только телефон */ #how .obj--m { display: none; } /* шаурма выше прежней карты гостя: чуть меньше и выше, чтобы не прижиматься к линии под блоком (≥ 24px, tests/onboarding.spec.ts) */ #how .o4.obj--d { width: clamp(150px, calc(50vw - 470px), 185px); top: 64%; } #how .o1 { width: 280px; left: max(10px, calc(50% - 712px)); top: 5%; } #how .o3 { width: 190px; left: max(14px, calc(50% - 690px)); top: 40%; } #how .o5 { width: 170px; left: max(44px, calc(50% - 640px)); top: 70%; } #how .o6 { width: 170px; right: max(22px, calc(50% - 670px)); top: 3%; } #how .o2 { width: 228px; right: max(12px, calc(50% - 710px)); top: 40%; } #how .o4 { width: 210px; right: max(14px, calc(50% - 710px)); top: 70%; } /* 1280–1439: заголовок той же ширины, по бокам теснее — предметы у краёв и мельче */ @media (max-width: 1439px) { #how .o1 { width: clamp(220px, calc(50vw - 440px), 280px); } #how .o3 { width: min(190px, calc(50vw - 484px)); } #how .o5 { width: clamp(140px, calc(50vw - 470px), 170px); } #how .o6 { width: clamp(130px, calc(50vw - 490px), 170px); top: 2%; } #how .o2 { width: min(228px, calc(50vw - 484px)); } #how .o4 { width: clamp(170px, calc(50vw - 450px), 210px); } } /* 1100–1279: заголовок уже */ @media (max-width: 1279px) { #how .hx__body { max-width: 860px; } #how .hx__steps { max-width: 740px; } #how .o1 { width: clamp(180px, calc(50vw - 392px), 245px); } #how .o3 { width: min(190px, calc(50vw - 420px)); } #how .o5 { width: clamp(130px, calc(50vw - 430px), 160px); } #how .o6 { width: clamp(120px, calc(50vw - 430px), 160px); } #how .o2 { width: min(228px, calc(50vw - 420px)); } #how .o4 { width: clamp(150px, calc(50vw - 400px), 210px); } } /* уже 1100: три предмета над заголовком — меню с кофе слева, карта гостя по центру, выпечка справа */ @media (max-width: 1099px) { #how.hx { padding-block: clamp(64px, 12vw, 104px); } #how .hx__tiles { position: relative; inset: auto; display: flex; justify-content: center; align-items: flex-end; margin: 0 auto 28px; padding-inline: var(--gutter); } #how .obj { position: relative; left: auto; right: auto; top: auto; } #how .o2, #how .o3, #how .o6, #how .obj--d { display: none; } #how .obj--m { display: block; } #how .o1 { order: 1; width: min(170px, 28%); margin-right: -2%; transform: rotate(-8deg) translateY(-4px); } #how .o4 { order: 2; width: min(300px, 50%); z-index: 1; } #how .o5 { order: 3; width: min(150px, 25%); margin-left: -2%; transform: rotate(6deg) translateY(-6px); } } /* уже 1100 предметы над заголовком: шаги столбиком — номер слева, название и пояснение справа */ @media (max-width: 1099px) { #how .hx__steps { grid-template-columns: 1fr; gap: 10px; max-width: 560px; } #how .hx__steps li { display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; padding: 16px; } #how .hx__steps li::before { grid-row: span 2; margin: 0; } } /* телефон: заголовок крупнее — строки короткие */ @media (max-width: 760px) { #how .hx__title { font-size: calc(100cqi / 10); } } @media (max-width: 560px) { #how .hx__cta { width: 100%; } } /* ---- demo-access.css ---- */ /* A narrow extension of the existing NIRBI form, using its shared type and color tokens. */ #access.access-demo .access__text { gap: 20px; } #access.access-demo .access__text .lead { max-width: 45ch; } #access.access-demo .form__send { flex-direction: column; align-items: flex-start; gap: 12px; } #access.access-demo .access__followup { max-width: 43ch; color: var(--muted); font-size: 14px; line-height: 1.5; } #access.access-demo [hidden] { display: none !important; } #access.access-demo .done:focus-visible { outline: 2px solid var(--signal-text); outline-offset: 5px; } #access.access-demo .access__equipment { color: var(--ink); font-size: 15px; line-height: 1.5; } @media (max-width: 760px) { #access.access-demo .form__send { align-items: stretch; } #access.access-demo .form__send .pill { white-space: normal; } } /* ---- hardware-section.css ---- */ /* Блок «Оборудование»: пять карточек форматов (js/hardware-section.js). В карточке — цена только за программу, полная цена оборудования — в калькуляторе на странице формата. По нажатию карточка раскрывается: от 1101px — карточки колонкой слева, раскрытая в центре и справа; уже — под своим рядом. */ #start { --paper:#fdfdfc; --ink:#0c0c0c; --muted:#63635f; --line:#e1e1dd; --red:#D72A1D; --button:#D72A1D; --red-text:#D72A1D; --font:"Golos Text","Segoe UI",sans-serif; --display:"Oswald","Arial Narrow",sans-serif; --ease:cubic-bezier(.2,.7,.2,1); background:var(--paper); color:var(--ink); font:400 16px/1.5 var(--font); color-scheme:light; } #start * { box-sizing:border-box; } #start h2,#start h3,#start h4,#start p,#start ul { margin:0; } #start h2,#start h3,#start h4,#start a,#start button { overflow-wrap:anywhere; } #start button { font:inherit; cursor:pointer; } #start [hidden] { display:none!important; } #start :focus-visible { outline:2px solid var(--red-text); outline-offset:4px; } #start ::selection { background:#f9d9d4; color:var(--ink); } #start.hardware { max-width: 1320px; margin-inline: auto; padding: 48px 40px 42px; } #start .hardware__intro h2 { font: 600 clamp(34px,3.4vw,49px)/1.14 var(--display); letter-spacing: -.016em; text-transform: uppercase; color: var(--red); } #start .hardware__intro h2 span { color: var(--ink); } #start .hardware__intro > p { margin-top: 14px; color: var(--ink); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; } /* как подзаголовки соседних блоков */ #start .button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; border: 1px solid transparent; border-radius: 999px; padding: 12px 23px; min-height: 48px; max-width: 100%; font-size: 15px; font-weight: 500; line-height: 1.4; text-decoration: none; white-space: nowrap; transition: background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease); } #start .button--primary { background: var(--button); color: #fff; } #start .button--outline { background: transparent; border-color: var(--ink); color: var(--ink); } #start .button:active { transform: translateY(1px); } #start .hw-for { display: block; margin: 0; font-size: 13px; line-height: 1.35; color: var(--muted); } /* Сетка 3 + 2: шесть долей, карточки по две, во втором ряду — по три. Порядок (order) ставит скрипт. */ #start .hw__cards { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 16px; margin-top: 28px; } #start .hwc { position: relative; grid-column: span 2; display: grid; grid-template-rows: auto 1fr; min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); text-align: left; overflow-wrap: normal; transition: border-color .18s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease); } #start .hwc:nth-of-type(n+4) { grid-column: span 3; } #start .hwc:focus-visible { outline-offset: 2px; } #start .hwc > span { display: block; } /* выбранная карточка: красный контур остаётся (та же линия, что при наведении, замкнута) */ #start .hwc[aria-expanded="true"] { border-color: var(--red); } #start .hwc[aria-expanded="true"]::after { --hw-ring: 100%; } /* красная линия по контуру при наведении: кольцо 2px из conic-gradient, --hw-ring растёт 0 → 100% по часовой от середины верха за 0,45 с */ @property --hw-ring { syntax: ""; inherits: false; initial-value: 0%; } #start .hwc::after { content: ""; position: absolute; inset: -1px; z-index: 2; padding: 2px; border-radius: inherit; background: conic-gradient(var(--red) var(--hw-ring), transparent 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transition: --hw-ring .45s var(--ease); } /* фото с названием и обещанием поверх (затемнение снизу); карточка не обрезает содержимое — скруглено фото */ #start .hwc__ph { position: relative; aspect-ratio: 16/10; overflow: hidden; border-radius: 11px 11px 0 0; background: #1c1c1b; } #start .hwc:nth-of-type(n+4) .hwc__ph { aspect-ratio: 16/8; } #start .hwc__ph img, #start .hwp__ph img, #start .hwk__ph img { display: block; width: 100%; height: 100%; object-fit: cover; } #start .hwc__ph img { transition: transform .45s var(--ease); } #start .hwc__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,12,12,0) 25%, rgba(12,12,12,.82)); pointer-events: none; } #start .hwc__cap { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 1; display: grid; gap: 6px; color: #fff; } #start .hwc__t { font: 600 30px/1.05 var(--display); letter-spacing: -.01em; text-transform: uppercase; } #start .hwc__promise { font-size: 14.5px; line-height: 1.35; color: #e6e6e3; } #start .hwc__body { display: grid; gap: 14px; align-content: space-between; padding: 18px 20px 20px; } #start .hwc__pts { display: grid; gap: 7px; font-size: 14.5px; line-height: 1.35; } #start .hwc__pts > span, #start .hwp__pts li { display: flex; gap: 10px; align-items: baseline; } #start .hwc__pts > span::before, #start .hwp__pts li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--red); transform: translateY(-2px); } #start .hwc__foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 12px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); } #start .hwc__price b, #start .hwp__price b { display: block; font: 700 20px/1.15 var(--font-brand); letter-spacing: -.02em; white-space: nowrap; } #start .hwc__price > span, #start .hwp__price > span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--muted); } #start .hwc__go { font-size: 14px; font-weight: 500; color: var(--red-text); white-space: nowrap; } /* Раскрытая карточка формата */ #start .hwp { position: relative; grid-column: 1/-1; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper); view-transition-name: hw-panel; } #start .hwp__ph { position: relative; aspect-ratio: 16/7; background: #1c1c1b; } #start .hwp__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,12,12,0) 30%, rgba(12,12,12,.85)); pointer-events: none; } #start .hwp__cap { position: absolute; left: 28px; right: 72px; bottom: 22px; z-index: 1; color: #fff; } #start .hwp__cap h3 { font: 600 46px/1 var(--display); letter-spacing: -.01em; text-transform: uppercase; } #start .hwp__cap p { margin-top: 8px; font-size: 17px; line-height: 1.4; color: #e6e6e3; } /* крестик — тёмный кружок в углу фото */ #start .hwp__x { position: absolute; z-index: 2; top: 14px; right: 14px; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(12,12,12,.72); color: #fff; font-size: 20px; line-height: 1; transition: background-color .18s var(--ease); } #start .hwp__x:focus-visible { outline-color: #fff; outline-offset: -4px; box-shadow: 0 0 0 2px var(--ink); } #start .hwp__body { display: grid; gap: 22px; align-content: start; padding: 26px 28px 28px; } #start .hwp__pts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.35; } #start .hwp__pts li::before { width: 7px; height: 7px; } #start .hwp__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 20px; padding-top: 20px; border-top: 1px solid var(--line); } #start .hwp__price { max-width: 34ch; } #start .hwp__price b { font-size: 26px; } #start .hwp__price > span { margin-top: 4px; font-size: 13.5px; } #start .hwp__btns { display: flex; flex-wrap: wrap; gap: 10px; } #start .hwp__btns .button { min-height: 46px; padding-block: 10px; font-size: 14.5px; } /* Раскрыто на компьютере: карточки колонкой слева (мини-фото, название, обещание), раскрытая — в центре и справа */ @media (min-width: 1101px) { #start .hw.is-open .hw__cards { grid-template-columns: minmax(0,1fr) minmax(0,2.1fr); grid-template-rows: repeat(4,auto) 1fr; gap: 12px 24px; align-items: start; } #start .hw.is-open .hwc { grid-column: 1; grid-template-columns: 96px minmax(0,1fr); grid-template-rows: auto; } #start .hw.is-open .hwc__ph { display: contents; } #start .hw.is-open .hwc__ph::after, #start .hw.is-open .hwc__body { display: none; } #start .hw.is-open .hwc__ph img { height: 100%; min-height: 88px; border-radius: 11px 0 0 11px; } #start .hw.is-open .hwc__cap { position: static; align-content: center; gap: 3px; padding: 12px 14px; color: var(--ink); } #start .hw.is-open .hwc__t { font-size: 21px; font-weight: 500; text-transform: none; } #start .hw.is-open .hwc__promise { font-size: 13px; color: var(--muted); } #start .hw.is-open .hwp { grid-column: 2; grid-row: 1 / span 5; } } /* смена раскладки — короткий переход (View Transitions; без поддержки — сразу) */ ::view-transition-group(*) { animation-duration: .32s; animation-timing-function: cubic-bezier(.2,.7,.2,1); } /* Киоск — отдельная услуга: серая плашка во всю ширину, текст слева, фото справа */ #start .hwk { grid-column: 1/-1; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); margin-top: 10px; border: 0; border-radius: 12px; overflow: hidden; background: #f2f2f0; } #start .hwk__ph { order: 2; min-height: 300px; } #start .hwk__body { display: grid; gap: 10px; align-content: center; padding: 32px 36px; } #start .hwk__body h3 { font: 500 36px/1.1 var(--display); } #start .hwk__body > p { font-size: 15px; line-height: 1.5; } #start .hwk__price b { font: 700 30px/1.2 var(--font-brand); letter-spacing: -.02em; } #start .hwk__price span { display: block; font-size: 12.5px; color: var(--muted); } #start .hwk__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } #start .hwk .button, #start .hw__strip .button { min-height: 44px; padding-block: 10px; font-size: 14px; } /* Своя техника и другой формат */ #start .hw__strips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; } #start .hw__strip { display: grid; gap: 8px; align-content: start; padding: 20px 22px; border-radius: 12px; background: #f2f2f0; } #start .hw__strip h3 { font: 500 21px/1.2 var(--display); } #start .hw__strip p { font-size: 15px; line-height: 1.5; color: var(--muted); } #start .hw__strip .button { justify-self: start; margin-top: 6px; } @media (hover:hover) { #start .button--primary:hover { background: var(--signal-hover); } #start .button--outline:hover { background: var(--ink); color: var(--paper); } /* наведение: карточка поднимается и чуть подрастает, фото приближается, по контуру пробегает красная линия */ #start .hwc:hover { border-color: #b9b8b2; transform: translateY(-7px) scale(1.015); box-shadow: 0 14px 30px -12px rgba(12,12,12,.28); } #start .hw.is-open .hwc:hover { transform: translateX(4px); } #start .hwc:hover .hwc__ph img { transform: scale(1.05); } #start .hw.is-open .hwc:hover .hwc__ph img { transform: none; } #start .hwc:hover::after { --hw-ring: 100%; } #start .hwc[aria-expanded="true"]:hover { border-color: var(--red); } #start .hwp__x:hover { background: var(--ink); } } /* Планшет и узкий ноутбук: карточки 3 + 2, компактнее */ @media (max-width: 1100px) { #start .hwc__cap { left: 14px; right: 14px; bottom: 12px; gap: 4px; } #start .hwc__t { font-size: 24px; } #start .hwc__promise { font-size: 13px; } #start .hwc__body { padding: 14px 14px 16px; gap: 12px; } #start .hwc__pts { font-size: 13.5px; } #start .hwc__price b { font-size: 17px; } #start .hwp__cap h3 { font-size: 36px; } #start .hwk__body { padding: 26px 28px; } #start .hwk__body h3 { font-size: 32px; } #start .hwk__price b { font-size: 26px; } } @media (max-width: 760px) { #start.hardware { padding: 32px 20px; } #start .hardware__intro h2 { font-size: clamp(31px,8.7vw,43px); line-height: 1.14; } #start .hardware__intro h2 span { display: block; } #start .hardware__intro > p { margin-top: 15px; } #start .hw__cards { grid-template-columns: repeat(2,minmax(0,1fr)); } #start .hwc, #start .hwc:nth-of-type(n+4) { grid-column: span 1; } #start .hwc:nth-of-type(5) { grid-column: span 2; } #start .hwc:nth-of-type(n+4) .hwc__ph { aspect-ratio: 16/10; } #start .hwc:nth-of-type(5) .hwc__ph { aspect-ratio: 16/7; } #start .hwp__pts { grid-template-columns: 1fr; } #start .hw__strips { grid-template-columns: 1fr; } } /* Телефон: карточки по одной, раскрытая — под своей карточкой */ @media (max-width: 600px) { #start .hw__cards { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; } #start .hwc, #start .hwc:nth-of-type(n+4), #start .hwc:nth-of-type(5) { grid-column: auto; } #start .hwc .hwc__ph, #start .hwc:nth-of-type(n+4) .hwc__ph, #start .hwc:nth-of-type(5) .hwc__ph { aspect-ratio: 16/9; } #start .hwc__t { font-size: 26px; } #start .hwp__ph { aspect-ratio: 4/3; } #start .hwp__cap { left: 16px; right: 16px; bottom: 14px; } #start .hwp__cap h3 { font-size: 30px; } #start .hwp__cap p { font-size: 15px; } #start .hwp__x { top: 10px; right: 10px; } #start .hwp__body { padding: 16px 16px 18px; gap: 16px; } #start .hwp__pts { font-size: 15px; gap: 9px; } #start .hwp__price b { font-size: 22px; } #start .hwp__btns, #start .hwp__btns .button { width: 100%; } #start .hwk { grid-template-columns: 1fr; } #start .hwk__ph { order: -1; min-height: 0; aspect-ratio: 16/9; } #start .hwk__body { gap: 8px; padding: 16px 16px 18px; } #start .hwk__body h3 { font-size: 28px; } #start .hwk__price b { font-size: 24px; } #start .hwk__btns .button, #start .hw__strip .button { width: 100%; } #start .hw__strip { padding: 18px 16px; } } @media (prefers-reduced-motion: reduce) { #start *, #start *::before, #start *::after { transition: none !important; } #start .hwc:hover, #start .hwc:hover .hwc__ph img { transform: none; } ::view-transition-group(*) { animation: none; } } /* ---- lead-pop.css ---- */ /* Окно заявки (#lead-pop): та же форма, что внизу в #access, поверх страницы. Открывают кнопки «Связаться», «Посмотреть, как это работает» и кнопки оборудования (js/lead-form.js). */ .pop { width: min(600px, calc(100% - 32px)); max-width: none; max-height: calc(100svh - 32px); padding: 0; border: 0; border-radius: 20px; background: var(--paper); color: var(--ink); overflow: auto; overscroll-behavior: contain; } .pop:not([open]) { display: none; } /* без поддержки (старый Safari) окно не рисуется на странице */ .pop::backdrop { background: rgba(12, 12, 12, .64); } .pop[open] { animation: pop-in .24s var(--ease); } @keyframes pop-in { from { opacity: 0; transform: translateY(16px); } } @keyframes pop-up { from { opacity: 0; transform: translateY(48px); } } .pop__card { --pad: clamp(24px, 3.2vw, 40px); padding: var(--pad); } /* крестик в 14 px от углов окна и не уезжает, когда окно прокручивают (телефон); текст под ним начинается как без него */ .pop__close { position: sticky; top: 14px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: calc(14px - var(--pad)) calc(14px - var(--pad)) calc(var(--pad) - 58px) auto; padding: 0; border: 0; border-radius: 999px; background: var(--tile); color: var(--ink); cursor: pointer; } .pop__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } @media (hover: hover) { .pop__close:hover { background: var(--line); } } .pop .access__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .pop .access__text { gap: 12px; padding-right: 48px; } .pop .h2 { font-size: clamp(28px, 2.6vw, 36px); } .pop .lead { font-size: 17px; } .pop .access__equipment { color: var(--ink); font-size: 15px; line-height: 1.5; } .pop .form__send { flex-direction: column; align-items: flex-start; gap: 12px; } .pop .access__followup { color: var(--muted); font-size: 14px; line-height: 1.5; } .pop .done:focus-visible { outline: 2px solid var(--signal-text); outline-offset: 5px; } /* страница под окном не прокручивается и не сдвигается вбок, когда пропадает полоса прокрутки */ html:has(.pop[open]) { overflow: hidden; scrollbar-gutter: stable; } /* телефон: окно выезжает снизу во всю ширину */ @media (max-width: 560px) { .pop { width: 100%; margin: auto 0 0; border-radius: 20px 20px 0 0; max-height: calc(100svh - 16px); } .pop[open] { animation-name: pop-up; } .pop .form__send { align-items: stretch; } .pop .form__send .pill { white-space: normal; } } @media (prefers-reduced-motion: reduce) { .pop[open] { animation: none; } } /* ---- pricing-section.css ---- */ /* Блок «Стоимость»: три тарифа, общий запуск и акцент на тарифе с помощником. */ .tiers .h2 span { color: var(--signal-text); } .tiers__gift { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; gap: 12px 32px; margin-top: clamp(24px, 3vw, 36px); padding: 20px 24px; border-radius: 12px; background: color-mix(in srgb, var(--signal) 5%, var(--paper)); } .tiers__gift-title { max-width: 32ch; font-size: 18px; line-height: 1.45; font-weight: 600; } .tiers__gift-title span { color: var(--signal-text); } .tiers__gift-copy { max-width: 65ch; font-size: 16px; line-height: 1.5; color: color-mix(in srgb, var(--muted) 88%, var(--signal-text)); } .tiers__billing { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 24px; } .tiers__period { position: relative; display: flex; align-items: stretch; gap: 4px; min-width: 0; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--tile); } .tiers__period label { display: flex; align-items: baseline; justify-content: center; gap: 9px; min-height: 44px; padding: 9px 18px; border-radius: 999px; font-size: 16px; font-weight: 500; line-height: 1.4; cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); } .tiers__period label span { font-size: 13px; font-weight: 500; } .tiers__period input:checked + label { color: var(--paper); background: var(--ink); } .tiers__period input:focus-visible + label { outline: 2px solid var(--signal-text); outline-offset: 3px; } @media (hover: hover) { .tiers__period input:not(:checked) + label:hover { background: var(--line); } } .tiers__payment-note { font-size: 16px; line-height: 1.5; color: var(--muted); } .tiers__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .tiers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; } .tier__price.tier__price--ask { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.43; } .tier { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 32px); border-radius: 16px; background: var(--tile); } .tier h3 { font: 700 clamp(24px, 2.2vw, 30px)/1.15 var(--font-display); letter-spacing: var(--tr-m); } .tier__for { margin-top: 8px; min-height: 4.5em; font-size: 16px; line-height: 1.5; color: var(--muted); } .tier__cost { margin-top: 20px; } .tier__compare { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-height: 24px; margin-bottom: 8px; color: var(--muted); font-size: 16px; line-height: 1.5; } .tier__compare s { text-decoration-thickness: 1px; } .tier__compare span { font-size: 12px; } .tier__compare.is-hidden, .tier__compare--empty { visibility: hidden; } .tier__price { font: 700 clamp(36px, 3.6vw, 48px)/1.05 var(--font-brand); letter-spacing: -.02em; white-space: nowrap; } .tier__unit { min-height: 3em; margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--muted); } .tier__bill { min-height: 3em; margin-top: 10px; font-size: 15px; font-weight: 500; line-height: 1.5; } .tier .pill { width: 100%; margin-top: 20px; } .tier__details[open] > summary { display: none; } .tier__list { display: grid; align-content: start; gap: 12px; margin-top: 22px; } .tier__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.45; } .tier__list svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; fill: none; stroke: var(--signal-text); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .tier__foot { margin-top: auto; padding-top: 22px; } .tier__foot p { padding-top: 14px; border-top: 1px solid var(--line-tile); font-size: 14px; line-height: 1.5; color: var(--muted); } /* тёмная карточка */ .tier--ai { background: var(--ink); color: var(--paper); } .tier--ai .tier__for, .tier--ai .tier__unit, .tier--ai .tier__compare, .tier--ai .tier__foot p { color: var(--muted-on-ink); } .tier--ai .tier__for { color: var(--paper); } .tier--ai .tier__list svg { stroke: var(--signal); } .tier--ai .tier__foot p { border-top-color: var(--line-on-ink); } .tier__badge { position: absolute; top: -13px; right: clamp(22px, 2.4vw, 32px); padding: 4px 10px; border-radius: 999px; background: var(--signal-btn); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.4; } #pricing .pill.is-press { background: var(--signal-btn) !important; border-color: var(--signal-btn) !important; } .tiers__note { margin-top: 18px; font-size: 15px; color: var(--muted); } .tiers__note a { color: inherit; text-underline-offset: 3px; } @supports (grid-template-rows: subgrid) { /* общие строки у трёх карточек: цены, кнопки и подвалы на одной линии при любых переносах */ .tiers__grid { grid-template-rows: repeat(6, auto); } .tier { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; } .tier__for { min-height: 0; } .tier__foot { margin-top: 0; } } @media (max-width: 1099px) { .tiers__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px; } .tier { display: flex; grid-row: auto; grid-template-rows: none; } .tier__for { min-height: 0; } } @media (min-width: 640px) and (max-width: 1099px) { /* карточки друг под другом: слева цена и кнопка, справа что входит */ .tier { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(24px, 4vw, 48px); align-items: start; } .tier > * { grid-column: 1; } .tier > .tier__details { grid-column: 2; grid-row: 1 / span 4; } .tier__details .tier__list { margin-top: 4px; } .tier > .tier__foot { grid-column: 1 / -1; } } @media (max-width: 639px) { .tier__cost { margin-top: 16px; } .tier__unit, .tier__bill { min-height: 0; } .tier__compare--empty, .tier__compare.is-hidden { display: none; } .tier__details { margin-top: 12px; } .tier__details > summary, .tier__details[open] > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; color: inherit; font-size: 15px; font-weight: 500; list-style: none; cursor: pointer; } .tier__details > summary::-webkit-details-marker { display: none; } .tier__details > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; } .tier__details > summary svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .tier__details[open] > summary svg { transform: rotate(180deg); } .tier__details .tier__list { margin-top: 8px; } .tier__foot { padding-top: 10px; } .tiers__gift { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 20px; } .tiers__gift-title { max-width: none; } .tiers__gift-copy { font-size: 16px; } .tiers__period { width: 100%; } .tiers__period label { flex: 1; gap: 6px; padding-inline: 12px; font-size: 15px; } .tiers__period label span { font-size: 13px; } .tiers__payment-note { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .tiers__period label { transition: none; } } /* ---- site-chrome.css ---- */ /* Общая навигация главной: одна шапка на всех экранах. */ :root { --site-header-height: 64px; /* компьютер: ниже, чем было (76), — меньше пустоты вокруг пунктов (19.10) */ --dd-ease: cubic-bezier(.4, 0, .2, 1); /* мягкая кривая листа меню: --ease слишком резкий в начале */ } .site-header { position: fixed; inset: 0 0 auto; z-index: 30; padding-top: env(safe-area-inset-top, 0px); color: var(--paper); background: var(--ink); border-bottom: 1px solid var(--brand); /* линия шапки — красная всегда, на любом фоне */ transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .site-header.is-at-top:not(.is-open) { background: transparent; } .site-header:not(.is-at-top), .site-header.is-open { color: var(--ink); background: var(--paper); } .site-header__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: var(--site-header-height); column-gap: 28px; } .site-header .brand { justify-self: start; } .site-header__actions { grid-column: 3; grid-row: 1; display: flex; justify-content: flex-end; align-items: center; gap: 12px; } .site-header__demo { min-height: 44px; padding: 9px 20px; font-size: 15px; border-color: var(--signal-btn); background: var(--signal-btn); color: #fff; } /* «Демо» — вход в демо-кабинет (demo.nirbi.ru): красная таблетка, как кнопка первого экрана, на любом фоне шапки и любой ширине. Селектор с .site-header — чтобы .pill/.hero .pill из base.css её не перекрашивали. */ .site-header .site-header__try { min-height: 44px; padding: 9px 20px; font-size: 15px; border-color: var(--signal-btn); background: var(--signal-btn); color: #fff; } .site-header .site-header__try:hover { border-color: var(--signal-hover); background: var(--signal-hover); color: #fff; } /* один красный на весь сайт (16.10) */ .site-nav { grid-column: 2; grid-row: 1; } .site-nav ul { display: flex; align-items: center; gap: 24px; } .site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; text-decoration: none; text-underline-offset: 7px; white-space: nowrap; } .site-nav a[aria-current="location"] { text-decoration: underline; text-decoration-thickness: 2px; } .site-header:not(.is-at-top) .site-nav a[aria-current="location"] { color: var(--signal-text); } .site-menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 10px; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; } .site-menu-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } .site-menu-toggle path { transform-box: fill-box; transform-origin: center; transition: transform .18s var(--ease); } .site-menu-toggle[aria-expanded="true"] path:first-child { transform: translateY(4px) rotate(45deg); } .site-menu-toggle[aria-expanded="true"] path:last-child { transform: translateY(-4px) rotate(-45deg); } .site-skip { position: fixed; z-index: 50; top: 8px; left: var(--gutter); padding: 12px 20px; color: var(--paper); background: var(--ink); border-radius: 8px; transform: translateY(-160%); } .site-skip:focus { transform: none; } .site-header ~ .hero { padding-top: calc(var(--site-header-height) + env(safe-area-inset-top, 0px)); } section[id], header[id], footer[id], main[id], #law { scroll-margin-top: calc(var(--site-header-height) + env(safe-area-inset-top, 0px) + 16px); } /* Подвал: продукт, начало работы и способы связи. */ .site-footer { padding-block: clamp(40px, 5vw, 72px) 28px; border-top: 1px solid var(--line-on-ink); } .site-footer__grid { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)) 1.1fr; gap: 32px; } .site-footer__brand .brand { font-size: clamp(28px, 3vw, 40px); min-height: 48px; } .site-footer__brand p { max-width: 27ch; margin-top: 16px; color: var(--muted-on-ink); font-size: 16px; line-height: 1.6; } .site-footer h2 { margin-bottom: 14px; color: var(--muted-on-ink); font-size: 14px; font-weight: 500; line-height: 1.5; } /* группы ссылок —
: на компьютере и планшете заголовок как обычный, на телефоне сворачиваются (site-chrome.js, pages.js) */ .site-footer__group > summary { display: block; list-style: none; cursor: default; } .site-footer__group > summary::-webkit-details-marker { display: none; } .site-footer__group > summary svg { display: none; } .site-footer a { text-decoration: none; text-underline-offset: 5px; } .site-footer li a { display: inline-flex; align-items: center; min-height: 40px; font-size: 16px; line-height: 1.45; } .site-footer__contacts a { gap: 8px; } .site-footer__contacts svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .site-footer__contacts .site-footer__demo { margin-top: 8px; text-decoration: underline; } .site-footer__base { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 20px 32px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-on-ink); color: var(--muted-on-ink); font-size: 13px; line-height: 1.6; } .site-footer__company p:first-child { color: var(--paper); font-size: 14px; } .site-footer__company p + p { margin-top: 6px; } .site-footer .docs { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 24px; max-width: 600px; } .site-footer .docs a, .site-footer .docs button { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .site-footer__credits { grid-column: 1 / -1; font-size: 12px; } @media (hover: hover) { .site-nav a:hover, .site-footer a:hover, .site-footer .docs button:hover { text-decoration: underline; } .site-header__demo:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } .site-header:not(.is-at-top) .site-header__demo:hover, .site-header.is-open .site-header__demo:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } .site-menu-toggle:hover { background: var(--tile); color: var(--ink); } } /* Компьютер (19.10, вариант «А+Б»): шапка во всю ширину экрана, как видео первого экрана; «Связаться» — контурная кнопка рядом с красной «Демо»: на тёмном первом экране светлый контур, после прокрутки — тёмный */ @media (min-width: 1100px) { .site-header__row.wrap { max-width: none; padding-inline: clamp(32px, 3.4vw, 64px); } .site-header__actions { gap: 10px; } .site-header .site-header__demo { min-height: 42px; padding: 9px 20px; font-size: 15.5px; border: 1px solid rgba(255, 255, 255, .55); background: transparent; color: inherit; } .site-header:not(.is-at-top) .site-header__demo, .site-header.has-dd .site-header__demo { border-color: var(--ink); } .site-header .site-header__demo:hover { border-color: var(--paper); background: var(--paper); color: var(--ink); text-decoration: none; } .site-header:not(.is-at-top) .site-header__demo:hover, .site-header.has-dd .site-header__demo:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); } } @media (max-width: 1099px) { :root { --site-header-height: 68px; } /* «Связаться» и меню — одна капсула: на тёмном первом экране матовое стекло, после прокрутки — серая плашка; между ними тонкий разделитель, полоски меню — красные, как логотип */ .site-header__actions { --hdr-gap: 10px; gap: var(--hdr-gap); padding: 2px 2px 2px 4px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .site-header:not(.is-at-top) .site-header__actions, .site-header.is-open .site-header__actions { border-color: transparent; background: var(--tile); } .site-header .site-header__demo, .site-header .site-header__demo:hover, .site-header:not(.is-at-top) .site-header__demo:hover, .site-header.is-open .site-header__demo:hover { min-height: 40px; border-color: transparent; background: transparent; color: inherit; } .site-header .site-header__demo:hover { text-decoration: underline; text-underline-offset: 4px; } .site-header .site-header__try { min-height: 40px; } /* «Демо» внутри капсулы — той же высоты, что «Связаться» и меню */ .site-menu-toggle, .site-menu-toggle:hover { position: relative; width: 40px; height: 40px; flex-basis: 40px; padding: 9px; border: 0; background: transparent; color: var(--brand); } .site-menu-toggle::before { content: ""; position: absolute; left: calc(var(--hdr-gap) / -2); top: 10px; bottom: 10px; width: 1px; background: rgba(255, 255, 255, .28); } .site-header:not(.is-at-top) .site-menu-toggle::before, .site-header.is-open .site-menu-toggle::before { background: var(--line); } .site-menu-toggle svg { stroke-width: 2; } .site-menu-toggle path:last-child { transform: scaleX(.62); transform-origin: right center; } .site-menu-toggle[aria-expanded="true"] path:last-child { transform-origin: center; transform: translateY(-4px) rotate(-45deg); } .site-header__row { grid-template-columns: 1fr auto; gap: 0 16px; } .site-header__actions { grid-column: 2; } .site-header.is-enhanced .site-menu-toggle { display: inline-flex; } .site-nav { grid-column: 1 / -1; grid-row: 2; padding-block: 8px 20px; } .site-nav ul { display: grid; gap: 0; } .site-nav a { display: flex; min-height: 56px; padding-block: 12px; border-bottom: 1px solid var(--line); font-size: 22px; } .site-header.is-enhanced .site-nav { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - var(--site-header-height) - env(safe-area-inset-top, 0px)); padding: 8px var(--gutter) 24px; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); border-bottom: 1px solid var(--line); } .site-header:not(.is-enhanced) { position: relative; color: var(--ink); background: var(--paper); } .site-header:not(.is-enhanced) ~ .hero { padding-top: 0; } .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; } .site-footer__brand { grid-column: 1 / -1; display: flex; align-items: center; gap: 32px; } .site-footer__brand p { max-width: 35ch; margin-top: 0; } .site-footer__base { grid-template-columns: minmax(0, 1fr); } .site-footer .docs { justify-content: flex-start; } } @media (max-width: 599px) { :root { --site-header-height: 64px; } .site-header__row { column-gap: 8px; } .site-header .brand { font-size: 21px; } .site-header__actions { --hdr-gap: 8px; } .site-header__demo, .site-header .site-header__try { padding-inline: 13px; font-size: 13px; } .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } .site-footer__brand { display: block; } .site-footer__brand p { margin-top: 12px; } .site-footer__contacts { grid-column: 1 / -1; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line-on-ink); } .site-footer__grid { row-gap: 0; } .site-footer__brand { grid-column: 1 / -1; margin-bottom: 24px; } .site-footer__grid > nav { grid-column: 1 / -1; border-top: 1px solid var(--line-on-ink); } .site-footer__group > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; cursor: pointer; } .site-footer__group > summary h2 { margin: 0; color: var(--paper); font-size: 15px; } .site-footer__group > summary svg { display: block; flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; } .site-footer__group[open] > summary svg { transform: rotate(180deg); } .site-footer__group > summary:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 4px; } .site-footer__group ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; padding-bottom: 12px; } .site-footer li a { min-height: 44px; font-size: 15px; } .site-footer .docs { display: grid; gap: 2px; } .site-footer .docs a, .site-footer .docs button { min-height: 44px; } .site-footer__base { gap: 18px; margin-top: 28px; } } /* без мыши подчёркивания при наведении нет: тонкая линия показывает, что пункты подвала — ссылки */ @media (hover: none) { .site-footer li a, .site-footer .docs a, .site-footer .docs button { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 5px; } .site-footer__contacts .site-footer__demo { text-decoration-color: currentColor; } } @media (prefers-reduced-motion: reduce) { .site-header, .site-menu-toggle path, .site-footer__group > summary svg { transition: none; } } /* Главная: у пунктов меню выпадающие панели (тексты пробные). Компьютер — «лист во всю ширину» под шапкой: на первом экране тёмное стекло, после прокрутки светлый; страница под листом притемняется, снизу красная полоса. Открывается при наведении, по стрелке и с клавиатуры, закрывается сразу. Телефон и планшет — аккордеон в меню. */ .site-nav .nav-dd { position: relative; display: inline-flex; align-items: center; } /* пункт верхнего уровня — кнопка группы («Главное», «Для кого»…): выглядит как пункт меню, галочка рядом с названием */ .nav-dd__btn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; } .nav-dd__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s var(--ease); } .nav-dd.is-open .nav-dd__btn svg { transform: rotate(180deg); } .nav-dd__panel { position: fixed; z-index: 40; top: calc(env(safe-area-inset-top, 0px) + var(--site-header-height)); left: 0; right: 0; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 0 56px; padding: 22px max(var(--gutter), calc((100vw - 1264px) / 2)) 24px; border-bottom: 2px solid var(--brand); background: var(--paper); color: var(--ink); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .3s var(--dd-ease), transform .3s var(--dd-ease), visibility 0s .3s; } /* появляется и гаснет плавно (отзыв 16.10) */ .nav-dd.is-open .nav-dd__panel { visibility: visible; opacity: 1; transform: none; transition: opacity .35s var(--dd-ease), transform .35s var(--dd-ease), visibility 0s; } /* первый экран: лист белый, как на остальной странице (отзыв 16.10), и заходит под прозрачную шапку — шапка и лист одна белая поверхность; пока лист открыт, текст шапки тёмный */ .site-header.is-at-top:not(.is-open) .nav-dd__panel { top: 0; z-index: -1; padding-top: calc(env(safe-area-inset-top, 0px) + var(--site-header-height) + 22px); } .site-header.is-at-top.has-dd:not(.is-open) { color: var(--ink); } .site-header.is-at-top.has-dd .site-nav a[aria-current="location"] { color: var(--signal-text); } /* страница под открытым листом притемняется (слой под шапкой, клики не перехватывает) */ .site-header::after { content: ""; position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + var(--site-header-height)); bottom: 0; z-index: -2; background: rgba(12, 12, 12, .42); pointer-events: none; opacity: 0; transition: opacity .35s var(--dd-ease); } .site-header.has-dd::after { opacity: 1; } .site-header.has-dd.dd-closing::after { opacity: 0; transition: opacity .3s var(--dd-ease) .15s; } /* гаснет вместе с листом: лист держится ещё 0,15 с, прощая промах мышью */ .site-header.is-at-top::after { top: 0; background: rgba(12, 12, 12, .25); } /* первый экран: шапка и белый лист — одна поверхность, линии между ними нет (красная полоса — снизу листа) */ .site-header.is-at-top:not(.is-open).has-dd { border-bottom-color: transparent; } @media (hover: hover) and (min-width: 1100px) { .nav-dd:hover .nav-dd__panel { visibility: visible; opacity: 1; transform: none; transition: opacity .35s var(--dd-ease) .12s, transform .35s var(--dd-ease) .12s, visibility 0s .12s; } /* лист уже открыт, мышь перешла на соседний пункт — новый лист без задержки и без съезда: листы плавно сменяют друг друга, без мигания */ .site-header.has-dd .nav-dd:hover .nav-dd__panel { transform: none; transition: opacity .3s var(--dd-ease), visibility 0s; } /* старый лист при переходе гаснет с задержкой 0,15 с — успевает проявиться новый; если мышь ушла совсем (dd-closing), гаснет сразу */ .site-header.has-dd:not(.dd-closing) .nav-dd:not(:hover):not(.is-open) .nav-dd__panel { transition: opacity .3s var(--dd-ease) .15s, transform .3s var(--dd-ease) .15s, visibility 0s .45s; } .nav-dd:hover::after { content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 28px; } /* мостик: мышь идёт к листу и не закрывает его */ .nav-dd:hover .nav-dd__btn svg { transform: rotate(180deg); } .nav-dd.is-hushed:not(.is-open):hover .nav-dd__panel { visibility: hidden; opacity: 0; transition: none; } } /* 1100–1179: меню, «Демо» и «Связаться» плотнее — иначе кнопкам справа не хватает места и капсула уезжает от центра на 14–33px (19.10) */ @media (min-width: 1100px) and (max-width: 1179px) { .site-header__row { column-gap: 16px; } .nav-dd__btn { padding-inline: 13px; font-size: 15.5px; } .site-header .site-header__demo, .site-header .site-header__try { padding-inline: 16px; font-size: 15px; } } @media (min-width: 1100px) and (max-width: 1279px) { .nav-dd__panel { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 0 36px; } } /* Компьютер (19.10, «А+Б»): пункты крупнее и в капсуле, как «Связаться + меню» на телефоне; открытый пункт — светлая плашка. Фон капсулы — слоем ::before: backdrop-filter на самом списке сделал бы его рамкой для position: fixed, и выпадающий лист сжался бы до ширины капсулы. Своего слоя наложения у списка нет — иначе белый лист первого экрана (z-index: -1) лёг бы поверх логотипа и кнопок. */ @media (min-width: 1100px) { .site-nav > ul { position: relative; gap: clamp(2px, calc(.6vw - 6px), 8px); padding: 3px; } .site-nav > ul::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); pointer-events: none; } .site-header:not(.is-at-top) .site-nav > ul::before { border-color: transparent; background: var(--tile); } .nav-dd__btn { min-height: 40px; padding: 0 clamp(18px, calc(4vw - 32px), 56px); /* до 1280 — 18px, к 1920 — 45px: капсула заполняет широкую шапку (19.10) */ gap: 5px; border-radius: 999px; font-size: 16.5px; transition: background-color .2s var(--ease); } .nav-dd.is-open > .nav-dd__btn, .nav-dd:hover > .nav-dd__btn { background: rgba(255, 255, 255, .14); } .site-header:not(.is-at-top) .nav-dd.is-open > .nav-dd__btn, .site-header:not(.is-at-top) .nav-dd:hover > .nav-dd__btn { background: var(--paper); } .site-header.is-at-top.has-dd .nav-dd.is-open > .nav-dd__btn, .site-header.is-at-top.has-dd .nav-dd:hover > .nav-dd__btn { background: var(--tile); } /* белый лист на первом экране */ .site-header .site-header__try { min-height: 42px; font-size: 15.5px; } } .nav-dd__intro { display: grid; align-content: start; gap: 10px; } .nav-dd__intro p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); } .nav-dd__intro .nav-dd__title { font: 700 clamp(22px, 1.75vw, 26px)/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: -.01em; color: inherit; } .site-nav .nav-dd__go { display: inline-flex; align-items: center; align-self: start; width: fit-content; min-height: 40px; margin-top: 4px; padding: 0 20px; border-radius: 999px; background: var(--signal-btn); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; } .nav-dd__foot { grid-column: 1; grid-row: 2; margin: 10px 0 0; } .site-nav .nav-dd__foot a { display: inline; min-height: 0; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; white-space: normal; } .site-nav .nav-dd__list { grid-row: 1 / span 2; grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; align-content: start; align-items: start; counter-reset: dd; } .site-nav .nav-dd__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-nav .nav-dd__it { display: flex; gap: 14px; align-items: flex-start; min-height: 0; padding: 10px 0 11px; border: 0; border-top: 1px solid var(--line); border-radius: 0; font-size: inherit; color: inherit; text-decoration: none; white-space: normal; } .site-nav .nav-dd__it::before { counter-increment: dd; content: counter(dd, decimal-leading-zero); flex: 0 0 auto; margin-top: 3px; font: 600 12px/1.3 var(--font-body); color: var(--signal-text); } .nav-dd__it b { display: block; font: 600 16px/1.3 var(--font-body); } /* в листе «Главное» — блок, до которого докрутили: красным, без подчёркивания всего пункта */ .site-nav .nav-dd__it[aria-current="location"] { text-decoration: none; color: inherit; } .site-nav .nav-dd__it[aria-current="location"] b { color: var(--signal-text); } /* страница раздела, на которой мы: её пункт в листе красный, а кнопка группы подчёркнута */ .site-nav .nav-dd__it[aria-current="page"] { text-decoration: none; color: inherit; } .site-nav .nav-dd__it[aria-current="page"] b { color: var(--signal-text); } .nav-dd.is-current > .nav-dd__btn > span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; } .nav-dd__it small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--muted); } .nav-dd__ic { display: none; } @media (hover: hover) { .site-nav .nav-dd__it:hover { text-decoration: none; } .site-nav .nav-dd__it:hover b { color: var(--signal-text); } .site-nav .nav-dd__go:hover { background: var(--signal-hover); text-decoration: none; } .site-nav .nav-dd__foot a:hover { color: var(--signal-text); } } @media (max-width: 1099px) { .site-nav .nav-dd { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--line); } .nav-dd__btn { width: 100%; min-height: 56px; padding-block: 12px; justify-content: space-between; font-size: 22px; text-align: left; } .nav-dd__btn svg { width: 22px; height: 22px; } .nav-dd__panel, .site-header.is-at-top:not(.is-open) .nav-dd__panel { position: static; z-index: auto; grid-column: 1 / -1; display: none; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 16px; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; visibility: visible; opacity: 1; } .nav-dd.is-open .nav-dd__panel { display: grid; } .site-header::after { content: none; } .nav-dd__intro { display: none; } /* в меню-аккордеоне название группы уже на кнопке */ .site-nav .nav-dd__go { min-height: 44px; margin: 4px 0 8px; padding: 0 20px; border: 0; font-size: 15px; } .site-nav .nav-dd__list, .site-nav .nav-dd__list--3 { grid-row: auto; grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; } .site-nav .nav-dd__it { padding: 12px 0 14px; } .nav-dd__it b { font-size: 16px; } .nav-dd__foot { grid-column: 1; grid-row: auto; margin: 12px 0 0; } .site-nav .nav-dd__foot a { border: 0; font-size: 16px; } } @media (max-width: 599px) { .site-nav .nav-dd__list, .site-nav .nav-dd__list--3 { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .nav-dd__panel, .nav-dd__btn svg, .site-header::after { transition: none; } } /* Узкие телефоны (до 359 px): «Демо», «Связаться» и меню помещаются в строку рядом с логотипом (TG-1368) */ @media (max-width: 359px) { .site-header .brand { font-size: 18px; } .site-header__actions { --hdr-gap: 4px; } .site-header__demo, .site-header .site-header__try { padding-inline: 9px; font-size: 12px; } } /* ---- trust-section.css ---- */ /* Local trust-section concept. Uses the landing's existing fonts and palette. */ .trust { display: flex; min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); padding-block: clamp(28px, 6svh, 72px); border-top: 1px solid var(--divider); background: var(--paper); /* белый, как соседние блоки (отзыв команды 16.10) */ } .trust__layout { display: flex; flex-direction: column; width: 100%; min-width: 0; gap: clamp(28px, 6svh, 72px); } .trust__heading { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; align-content: center; gap: 32px; width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .trust__intro .h2 { font-size: clamp(42px, 4.9vw, 68px); line-height: 1.04; } .trust__intro p { margin-top: 22px; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; color: var(--muted); } .trust__proof { display: flex; align-items: center; justify-content: flex-end; gap: clamp(20px, 2.3vw, 36px); } .trust__proof strong { font: 600 clamp(160px, 20vw, 280px)/.9 var(--font-heading); letter-spacing: -.04em; color: var(--signal); font-variant-numeric: lining-nums; } .trust__proof > span { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.35; } .trust__marquee { position: relative; flex: 0 0 auto; overflow: hidden; padding: clamp(24px, 4svh, 40px) var(--gutter); border-block: 1px solid var(--divider); } .trust__names { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; margin: 0; padding: 0; list-style: none; } .trust__names[aria-hidden="true"] { display: none; } .trust__name { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; min-height: 108px; color: var(--ink); text-align: center; } .trust__name > span { display: block; } .trust__wordline { display: block; } .trust__name small { font: 400 13px/1.4 var(--font-body); letter-spacing: .035em; color: var(--muted); } .trust__name--corner > span { font: 600 29px/1.04 var(--font-heading); letter-spacing: .1em; } .trust__name--crumb > span { font: 700 28px/1.05 var(--font-body); letter-spacing: -.04em; } .trust__name--crumb .trust__wordline { font-size: 19px; letter-spacing: -.02em; } .trust__name--early > span { font: 700 29px/.97 var(--font-brand); letter-spacing: -.04em; text-align: left; } .trust__name--foam > span { font: 700 31px/.95 var(--font-heading); letter-spacing: .045em; } .trust__name--foam .trust__wordline { font-size: 20px; line-height: 1.15; } .trust__name--sip > span { font: 600 28px/1.05 var(--font-body); letter-spacing: -.035em; } .trust__name--layer > span { font: 600 27px/1.05 var(--font-brand); letter-spacing: -.04em; } .trust__name--layer .trust__wordline { font: 500 17px/1.25 var(--font-body); letter-spacing: .025em; } .trust__name--infusion > span { font: 600 25px/1.05 var(--font-brand); letter-spacing: -.04em; } .trust__name--infusion .trust__wordline { font-size: 18px; line-height: 1.3; } .trust__name--pub > span { font: 600 18px/1.1 var(--font-heading); letter-spacing: .16em; } .trust__name--pub .trust__wordline { font-size: 37px; letter-spacing: .1em; } .trust__name--shawarma > span { font: italic 800 29px/1.12 var(--font-body); letter-spacing: -.04em; } .trust__motion { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; touch-action: manipulation; } .trust__motion > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .trust__motion:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; } .trust__motion:focus-visible > span { right: var(--gutter); bottom: 8px; width: auto; height: auto; padding: 6px 10px; clip-path: none; border: 1px solid var(--line); background: var(--paper); font-size: 13px; } .trust.is-animated .trust__track { display: flex; width: max-content; animation: trust-drift 136s linear infinite; /* 4 копии списка, сдвиг на 2: та же скорость, что раньше у 68s с 2 копиями */ animation-play-state: paused; } .trust.is-animated .trust__names { display: flex; flex: 0 0 auto; gap: 48px; padding-right: 48px; } .trust.is-animated .trust__name { width: 184px; flex: 0 0 184px; } .trust.is-running .trust__track { animation-play-state: running; } @keyframes trust-drift { to { transform: translateX(-50%); } } /* верхняя лента (отзыв команды 16.10): та же скорость, обратное направление — слева направо. Видна только вместе с движением; её верхняя линия заменяет линию над блоком, как нижняя лента — под ним */ .trust__marquee--top { display: none; } .trust.is-animated .trust__marquee--top { display: block; } .trust.is-animated .trust__marquee--top .trust__track { animation-direction: reverse; } .trust.is-animated { border-top: 0; } /* движущиеся ленты идут от края до края: без отступа слева лента не «начинается» позже соседней */ .trust.is-animated .trust__marquee { padding-inline: 0; } @media (min-width: 641px) and (max-width: 900px) { .trust__proof { gap: 18px; } .trust__proof strong { font-size: clamp(128px, 18vw, 162px); } .trust__proof > span { font-size: 16px; } } @media (max-width: 640px) { .trust { padding-block: clamp(24px, 5svh, 48px); } .trust__layout { gap: clamp(24px, 5svh, 48px); } .trust__heading { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4svh, 40px); } .trust__intro .h2 { font-size: clamp(34px, 10.8vw, 52px); } .trust__intro p { margin-top: 14px; } .trust__proof { justify-content: flex-start; gap: clamp(18px, 5vw, 28px); } .trust__proof strong { font-size: clamp(128px, 40vw, 208px); } .trust__proof > span { font-size: clamp(15px, 4.4vw, 19px); } .trust__marquee { padding-block: clamp(18px, 3svh, 28px); } .trust__names { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; } .trust.is-animated .trust__names { gap: 30px; padding-right: 30px; } .trust.is-animated .trust__name { width: 154px; flex-basis: 154px; } } @media (min-width: 641px) and (max-height: 500px) { .trust { padding-block: 20px; } .trust__layout { gap: 20px; } .trust__intro .h2 { font-size: clamp(30px, 4vw, 36px); } .trust__intro p { margin-top: 12px; font-size: 14px; line-height: 1.45; } .trust__proof strong { font-size: 128px; } .trust__proof > span { font-size: 16px; } .trust__marquee { padding-block: 12px; } .trust__name { min-height: 88px; } }