/* ═══════════════════════════════════════════════════════════════ ЦВЕТА И РАЗМЕРЫ VENDO ─────────────────────────────────────────────────────────────── Всё оформление берётся отсюда. Тем две — светлая и тёмная, и переключаются они подменой одного набора значений, а не правкой каждого экрана. Какая тема включится: 1. если человек выбрал вручную — его выбор (data-theme на ) 2. иначе — та, что стоит у него в Telegram 3. иначе — светлая ═══════════════════════════════════════════════════════════════ */ :root { /* ── Фирменные цвета: одинаковы в обеих темах ── */ --blue: #0C70E4; --blue-lt: #2C90FF; --navy: #0A1730; --yellow: #FFC81E; --violet: #7C3AED; --pink: #EC4899; --green: #10B981; --red: #EF4444; /* ── Скругления: крупнее, чем принято — так выглядит свежее ── */ --r-xl: 28px; --r-lg: 24px; --r-md: 18px; --r-sm: 12px; --r-pill: 999px; /* ── Размеры текста ── */ --t-hero: 31px; /* заголовок экрана */ --t-price-big: 34px; /* цена в карточке товара */ --t-price: 21px; /* цена в ленте */ --t-title: 19px; /* название раздела */ --t-body: 15px; --t-small: 12.5px; --t-tiny: 11px; /* ── Движение ── */ --ease: cubic-bezier(.22, .8, .3, 1); --fast: .16s; --slow: .32s; } /* ═══════════ СВЕТЛАЯ ТЕМА ═══════════ */ :root, html[data-theme="light"] { --bg: #FCFDFF; --bg-deep: #EEF1F7; /* Панели чуть прозрачные: сквозь них проступает свечение фона, и экран перестаёт быть набором белых коробок на белом листе. */ --card: rgba(255, 255, 255, .82); --text: #0A1730; --text-2: #46536B; --muted: #8A94A6; --faint: #B4BDCC; --line: rgba(12, 23, 48, .07); --field: #F1F3F8; /* Поля ввода: своя подложка и заметная рамка, чтобы поле не сливалось с листом формы */ --field-bg: #FFFFFF; --field-line: rgba(12, 23, 48, .16); --yellow-ink: #A9700B; /* Стекло: панель размывает то, что под ней */ --glass: rgba(255, 255, 255, .72); --glass-strong: rgba(255, 255, 255, .86); --glass-line: rgba(255, 255, 255, .9); --glass-blur: 24px; /* Верхняя и нижняя полосы: плотнее панелей, чтобы текст под ними не мешал читать заголовок */ --glass-bar: rgba(252, 253, 255, .74); /* Плашка поверх фотографии — всегда тёмная, чтобы белый текст читался */ --over: rgba(10, 16, 28, .58); --over-line: rgba(255, 255, 255, .18); /* Свечение в фоне — даёт глубину вместо плоского листа. Стеклу нужно что-то преломлять: на чистом белом оно не видно вовсе. */ --glow-1: rgba(96, 152, 255, .58); --glow-2: rgba(255, 176, 96, .38); --glow-3: rgba(110, 200, 245, .44); --sh-sm: 0 2px 10px rgba(17, 24, 39, .06); --sh-md: 0 10px 28px rgba(17, 24, 39, .09); --sh-lg: 0 18px 44px rgba(17, 24, 39, .12); --sh-blue: 0 10px 26px rgba(12, 112, 228, .30); color-scheme: light; } /* ═══════════ ТЁМНАЯ ТЕМА ═══════════ */ html[data-theme="dark"] { --bg: #090B11; --bg-deep: #06080D; --card: rgba(28, 32, 42, .78); --text: #FFFFFF; --text-2: #C6D2E4; --muted: #8A98B4; --faint: #5C6880; --line: rgba(255, 255, 255, .09); --field: rgba(255, 255, 255, .07); --field-bg: rgba(255, 255, 255, .06); --field-line: rgba(255, 255, 255, .20); --yellow-ink: #FFC81E; --glass: rgba(255, 255, 255, .09); --glass-strong: rgba(255, 255, 255, .14); --glass-line: rgba(255, 255, 255, .14); --glass-blur: 26px; --glass-bar: rgba(12, 15, 22, .70); --over: rgba(8, 12, 22, .62); --over-line: rgba(255, 255, 255, .14); --glow-1: rgba(34, 96, 220, .70); --glow-2: rgba(120, 56, 190, .52); --glow-3: rgba(0, 150, 150, .34); --sh-sm: 0 2px 10px rgba(0, 0, 0, .34); --sh-md: 0 10px 28px rgba(0, 0, 0, .44); --sh-lg: 0 18px 44px rgba(0, 0, 0, .54); --sh-blue: 0 10px 26px rgba(12, 112, 228, .40); color-scheme: dark; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* ═════════ Экран не должен ездить вбок ═════════ Приложение листается только вверх-вниз. Вбок — никогда. Три замка, каждый закрывает свою щель: 1. overscroll-behavior: contain — палец на боковой ленте (сорт, превью фото, полоса магазинов) доводит её до края, и дальше телефон начинает тащить вбок уже всю страницу. Этот замок обрывает передачу: лента кончилась — значит кончилась. 2. overflow-x: clip — если какая-то плитка окажется шире экрана, лишнее просто обрежется, а не сдвинет весь экран. Именно clip, а не hidden: hidden превратил бы страницу в прокручиваемый ящик и отклеил бы липкую верхнюю панель. 3. max-width: 100% — страница не может быть шире телефона. */ html, body { overscroll-behavior: contain; max-width: 100%; overflow-x: clip; } @supports not (overflow-x: clip) { html { overflow-x: hidden; } } /* Боковые ленты не передают движение всей странице */ .gal, .gal-track, .gal-thumbs, .sortbar, .strip-row, .shop-cats, .listtools { overscroll-behavior-x: contain; } /* Плитка в сетке по умолчанию отказывается сжиматься уже своего содержимого — одно длинное слово в названии раздвигает всю ленту. Разрешаем сжиматься и переносим слишком длинные слова. */ .card, .mini-card, .intent, .cat, .feed > *, .mini-cards > *, .cat-grid > * { min-width: 0; } .hero-hi, .hero-big, .card-name, .card-price, .card-attrs, .intent-title, .sec-title, .pinbar-title, .pinbar-sub { overflow-wrap: anywhere; } /* ═════════ Полный экран ═════════ Telegram сам сообщает, сколько места сверху занимают вырез телефона и его собственные кнопки — крестик и три точки. Значения приезжают в переменные ниже; на старых версиях их нет, поэтому ноль по умолчанию. --tg-top / --tg-bottom ставит код при запуске и при повороте экрана. Запасной вариант — переменные самого Telegram, если код не успел. */ :root { --tg-top: 0px; --tg-bottom: 0px; --pad-top: max(var(--tg-top), var(--tg-safe-area-inset-top, 0px)); --pad-bottom: max(var(--tg-bottom), var(--tg-safe-area-inset-bottom, 0px)); } body { margin: 0; /* Системный шрифт: кириллицу знает всегда и не грузится по сети. Лигатуры и «умные» подстановки выключены — на цифрах и дефисах они дают сюрпризы вроде «чт8-т8». */ font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-feature-settings: "liga" 0, "clig" 0, "calt" 0; font-variant-ligatures: none; text-rendering: optimizeLegibility; background: var(--bg); color: var(--text); padding-bottom: calc(104px + var(--pad-bottom)); -webkit-font-smoothing: antialiased; min-height: 100dvh; } /* Свечение в фоне: два-три мягких пятна вместо плоской заливки. Именно это отличает «живой» экран от листа бумаги. Пятна не перехватывают касания и не мешают прокрутке. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; /* Пять пятен, а не три: с тремя середина экрана оставалась белым полем, и там стеклу было нечего преломлять. Теперь свет идёт сверху донизу. */ background: radial-gradient(62% 42% at 6% -8%, var(--glow-1), transparent 68%), radial-gradient(56% 36% at 108% 16%, var(--glow-2), transparent 70%), radial-gradient(58% 34% at 96% 54%, var(--glow-1), transparent 72%), radial-gradient(60% 34% at -12% 62%, var(--glow-3), transparent 70%), radial-gradient(64% 36% at 40% 112%, var(--glow-2), transparent 72%); } body > * { position: relative; z-index: 1; } .hidden { display: none !important; } svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ═════════ Стекло ═════════ Панель размывает то, что под ней и слегка подсвечивается по краю. Если браузер не умеет размывать — просто становится плотнее, и всё остаётся читаемым. */ .glass { position: relative; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--sh-md), inset 0 1px 0 rgba(255, 255, 255, .55); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .glass { -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(1.06); backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(1.06); } } /* Блик по верхней кромке — то, чем настоящее стекло отличается от полупрозрачного прямоугольника: свет собирается у края. */ .glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 46%); } html[data-theme="dark"] .glass { box-shadow: var(--sh-md), inset 0 1px 0 rgba(255, 255, 255, .16); } html[data-theme="dark"] .glass::after { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 46%); } /* Содержимое стеклянной панели должно лежать поверх блика, а не под ним */ .glass > * { position: relative; z-index: 1; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--glass-strong); } html[data-theme="dark"] .glass { background: #1A1E27; } html[data-theme="light"] .glass { background: #FFFFFF; } } /* Плашка поверх фотографии: тёмное стекло, белый текст */ .over { background: var(--over); border: 1px solid var(--over-line); color: #fff; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .over { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } } /* Отклик на касание — общий для всего, что нажимается */ .tap { transition: transform var(--fast) var(--ease); } .tap:active { transform: scale(.97); } /* экраны появляются мягко — только прозрачность и сдвиг (не тормозит) */ .screen { display: none; } .screen.active { display: block; animation: appear .26s cubic-bezier(.22,.8,.3,1); } @keyframes appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ═════════ Шапка главной ═════════ */ .tophead { display: flex; align-items: center; justify-content: space-between; /* Сверху добавляем ровно столько, сколько заняли вырез телефона и кнопки Telegram — иначе крестик ляжет на переключатель темы */ padding: calc(14px + var(--pad-top)) 22px 0; } .tophead-brand { display: flex; flex-direction: column; gap: 6px; } .tophead-name { font-size: 21px; font-weight: 900; letter-spacing: .6px; line-height: 1; } .tophead-underline { width: 34px; height: 3px; border-radius: 2px; background: var(--yellow); } .tophead-place { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; border-radius: 50%; background: var(--field); color: var(--muted); cursor: pointer; transition: transform var(--fast) var(--ease); } .tophead-place:active { transform: scale(.92); } .tophead-place svg { width: 19px; height: 19px; } /* ═════════ Приветствие ═════════ */ .hero { padding: 22px 22px 20px; } .hero-hi { font-size: var(--t-hero); font-weight: 300; line-height: 1.12; color: var(--muted); letter-spacing: -.6px; } .hero-big { font-size: var(--t-hero); font-weight: 900; line-height: 1.12; letter-spacing: -.8px; margin-top: 2px; } /* ═════════ Полоса «поставь на экран телефона» ═════════ Стоит вверху, потому что снизу её не видел никто. Не кричит цветом, но и не прячется: тонкая линия, понятный текст, крестик справа. */ .pinbar-wrap { position: relative; display: flex; align-items: center; margin: 0 20px 16px; } .pinbar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 44px 12px 13px; border: 1px solid var(--glass-line); border-radius: var(--r-md); background: var(--glass); box-shadow: var(--sh-sm); cursor: pointer; text-align: left; font-family: inherit; color: var(--text); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .pinbar { -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); } } .pinbar-ic { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: rgba(12, 112, 228, .12); color: var(--blue); } html[data-theme="dark"] .pinbar-ic { background: rgba(44, 144, 255, .18); } .pinbar-ic svg { width: 17px; height: 17px; stroke-width: 1.9; } .pinbar-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pinbar-title { font-size: 13.5px; font-weight: 750; } .pinbar-sub { font-size: 11.5px; color: var(--muted); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pinbar-go { flex: 0 0 auto; font-size: 12.5px; font-weight: 750; color: var(--blue); } .pinbar-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: none; background: none; color: var(--faint); cursor: pointer; display: grid; place-items: center; border-radius: 50%; } .pinbar-x svg { width: 14px; height: 14px; stroke-width: 2.2; } .pinbar-x:active { transform: translateY(-50%) scale(.88); } /* ═════════ Намерения: бенто ═════════ Широкий блок и узкий рядом. Разный размер сам расставляет приоритет: сначала глаз идёт к покупке, потом к продаже. */ /* Три намерения равными долями ширины телефона. Раньше их было два, разного размера: широкое «Шукаю» и узкое «Продаю». Третье — «Віддам задарма» — висело широкой полосой под ними и однажды пропало. Теперь все три равны и стоят в один ряд: это три двери в площадку, и ни одна не главнее других. */ .intents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 0 22px; } .intent { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 104px; border-radius: var(--r-lg); padding: 14px 6px 15px; cursor: pointer; text-align: center; font-family: inherit; color: var(--text); overflow: hidden; } .intent-ic { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .intent-ic svg { width: 20px; height: 20px; stroke-width: 2.4; } .intent-ic.buy { background: var(--blue); color: #fff; box-shadow: var(--sh-blue); } .intent-ic.sell { background: var(--yellow); color: #3D2900; box-shadow: 0 8px 20px rgba(255,200,30,.34); } .intent-ic.free { background: var(--green); color: #fff; box-shadow: 0 8px 20px rgba(29,158,117,.30); } .intent-ic.free svg { fill: none; stroke: currentColor; } .intent-title { font-size: 15px; font-weight: 800; letter-spacing: -.3px; position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* «Віддам задарма» — два слова, им нужен перенос и шрифт помельче, иначе слово обрежется многоточием и станет непонятным. */ .intent-title.two { font-size: 13px; white-space: normal; line-height: 1.2; } /* ═════════ «Віддаю даром»: низкая широкая полоса ═════════ */ /* Полоса «Маєте свою справу?» внизу главной. Раньше здесь стояла вторая полоса «Віддам безкоштовно» — та же, что теперь наверху. Низ главной для двери бизнесу подходит лучше всего: человек долистал до конца, ничего не купил и не продал — значит он здесь не за этим. */ .bizbar { display: flex; align-items: center; gap: 13px; width: 100%; border-radius: var(--r-lg); padding: 13px 16px; cursor: pointer; text-align: left; font-family: inherit; color: var(--text); overflow: hidden; } .bizbar-ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; box-shadow: 0 8px 20px rgba(10,23,48,.22); position: relative; z-index: 1; } .bizbar-ic svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .bizbar-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; } .bizbar-title { font-size: 16px; font-weight: 800; letter-spacing: -.3px; } .bizbar-sub { font-size: var(--t-small); color: var(--muted); } .bizbar-arw { width: 16px; height: 16px; color: var(--faint); flex: 0 0 auto; position: relative; z-index: 1; } /* ═════════ Поиск ═════════ */ .searchrow { padding: 18px 22px 0; } .searchbox { display: flex; align-items: center; gap: 11px; border-radius: var(--r-lg); padding: 0 16px; height: 54px; } .searchbox .ico { width: 19px; height: 19px; color: var(--muted); flex: 0 0 auto; } .searchbox input { flex: 1; border: none; background: none; outline: none; font-family: inherit; font-size: 15.5px; color: var(--text); height: 100%; } .searchbox input::placeholder { color: var(--faint); } /* Микрофон в поиске. Печатать «холодильник Таїрова» долго, сказать — три секунды. Пока идёт запись, кнопка синеет и пульсирует: видно, что нас слышат. */ .mic-btn { flex: 0 0 auto; width: 36px; height: 36px; margin-right: -6px; display: grid; place-items: center; border: none; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease); } .mic-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .mic-btn:active { transform: scale(.9); } .mic-btn.listening { background: var(--blue); color: #fff; animation: mic-pulse 1.4s infinite; } .mic-btn.working { color: var(--blue); animation: mic-spin 1s linear infinite; } @keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(12, 112, 228, .45); } 60% { box-shadow: 0 0 0 11px rgba(12, 112, 228, 0); } } @keyframes mic-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .mic-btn.listening, .mic-btn.working { animation: none; } } /* ═════════ Живая строка ═════════ */ .livebar { display: flex; align-items: center; gap: 9px; width: 100%; padding: 16px 22px 0; font-size: var(--t-small); border: none; background: none; cursor: pointer; font-family: inherit; text-align: left; } .livebar:active { opacity: .6; } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); animation: pulse 2.4s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .45); } 70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } .live-tx { flex: 1; min-width: 0; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ═════════ Віддають задарма ═════════ Не третья кнопка в ряд, а широкая полоса под двумя главными: задаром — это особый случай покупки, а не отдельное намерение. Тёплый цвет отделяет её от синего «купити» и «продати». */ /* Здесь была широкая полоса «Віддають задарма» под двумя намерениями. Теперь это равная третья плитка в ряду, и полоса не нужна. */ /* «Віддаю задарма» у поля цены */ .free-btn { margin-top: 8px; border: 1px solid var(--field-line); background: var(--field-bg); cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 7px 13px; border-radius: var(--r-pill); } .free-btn.on { background: var(--green); border-color: var(--green); color: #fff; } .free-btn:active { transform: scale(.97); } /* ═════════ Секции ═════════ */ .sec { padding: 22px 22px 0; } .sec-head { display: flex; align-items: center; justify-content: space-between; } .sec-title { margin: 0; font-size: var(--t-title); font-weight: 900; letter-spacing: -.4px; } .sec-note { margin: 4px 0 14px; font-size: 13px; color: var(--muted); } /* ═════════ Карточки категорий ═════════ */ .cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Плитки всегда светлые — даже если в Telegram включена тёмная тема. 3D-иллюстрации нарисованы под белый фон: в них много светлых деталей, на тёмной подложке они бы «слипались» с фоном. */ .cat-card { position: relative; background: var(--card); color: var(--text); border: none; border-radius: 18px; padding: 14px 13px 15px; cursor: pointer; text-align: left; box-shadow: 0 2px 10px rgba(17, 24, 39, .06); transition: transform .18s cubic-bezier(.22,.8,.3,1), box-shadow .18s ease; animation: cardIn .34s cubic-bezier(.22,.8,.3,1) backwards; } .cat-card:active { transform: scale(.965); box-shadow: var(--sh-md); } @keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* значок категории: цветная плашка с белой иконкой */ .cat-chip { width: 48px; height: 48px; border-radius: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 11px; } .cat-chip svg { width: 26px; height: 26px; fill: #fff; stroke: none; } /* В тёмной теме под иллюстрацию кладём светлый кружок: в рисунках много белого, на тёмном они бы пропали. */ html[data-theme="dark"] .cat-card img.cat-illu { background: rgba(255, 255, 255, .90); border-radius: 16px; padding: 4px; } /* 3D-иллюстрация заменяет цветную плашку */ .cat-card img.cat-illu { display: block; width: 58px; height: 58px; object-fit: contain; object-position: left bottom; margin-bottom: 8px; } /* Цвета подписей заданы явно, а не через переменные темы: плитка всегда белая, значит и текст на ней всегда тёмный. */ .cat-name { font-size: 14px; font-weight: 750; letter-spacing: -.2px; line-height: 1.25; color: var(--text); overflow-wrap: break-word; hyphens: auto; } .cat-count { font-size: 11.5px; color: var(--muted); margin-top: 4px; } /* ═════════ Промо-блок ═════════ Раньше это была радужная плашка из позапрошлой эпохи — синий в фиолетовый в розовый. Рядом со стеклом она выглядела чужой. Теперь это такое же стекло, как всё остальное: спокойный блок, который не орёт, но и не теряется. */ .promo { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--sh-md), inset 0 1px 0 rgba(255, 255, 255, .55); color: var(--text); padding: 18px; display: flex; align-items: center; gap: 14px; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .promo { -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(1.06); backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(1.06); } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html[data-theme="light"] .promo { background: #FFFFFF; } html[data-theme="dark"] .promo { background: #1A1E27; } } html[data-theme="dark"] .promo { box-shadow: var(--sh-md), inset 0 1px 0 rgba(255, 255, 255, .16); } .promo-txt { flex: 1; min-width: 0; } /* Слово «реклама» человек должен видеть сразу, а не догадываться */ .promo-title { font-size: 16.5px; font-weight: 800; line-height: 1.25; letter-spacing: -.3px; } .promo-sub { font-size: 12.5px; color: var(--muted); margin: 5px 0 13px; line-height: 1.4; } .promo-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--blue); color: #fff; border: none; border-radius: 999px; padding: 10px 17px; font-family: inherit; font-size: 13.5px; font-weight: 750; cursor: pointer; box-shadow: var(--sh-blue); transition: transform var(--fast) var(--ease); } .promo-btn:active { transform: scale(.95); } .promo-btn svg { width: 15px; height: 15px; stroke-width: 2.6; } /* Три фигурки справа: намёк на вещи, которые меняют владельца */ .promo-art { position: relative; width: 66px; height: 66px; flex: 0 0 auto; } .pa { position: absolute; border-radius: 8px; background: rgba(12, 112, 228, .16); } .pa1 { width: 42px; height: 42px; right: 2px; top: 12px; border-radius: 13px; background: rgba(12, 112, 228, .20); animation: float1 3.6s ease-in-out infinite; } .pa2 { width: 17px; height: 17px; left: 0; top: 4px; animation: float2 3.2s ease-in-out infinite; } .pa3 { width: 13px; height: 13px; left: 8px; bottom: 4px; border-radius: 50%; background: var(--yellow); animation: float3 4s ease-in-out infinite; } html[data-theme="dark"] .pa { background: rgba(255, 255, 255, .10); } html[data-theme="dark"] .pa1 { background: rgba(255, 255, 255, .14); } html[data-theme="dark"] .pa3 { background: var(--yellow); } @keyframes float1 { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(6deg); } } @keyframes float2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } } @keyframes float3 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @media (prefers-reduced-motion: reduce) { .pa1, .pa2, .pa3 { animation: none; } } /* ═════════ Геолокация ═════════ */ /* ═════════ Экран подкатегорий ═════════ */ .subs-hero { position: relative; overflow: hidden; padding: 16px 18px 26px; color: #fff; border-radius: 0 0 28px 28px; } .subs-hero::after { content: ""; position: absolute; width: 210px; height: 210px; border-radius: 50%; background: rgba(255,255,255,.11); right: -66px; bottom: -110px; } .subs-hero .icon-btn { position: relative; z-index: 2; margin-bottom: 10px; } /* Иллюстрация в шапке раздела стоит на светлой подложке: сама шапка залита ярким градиентом, а иллюстрации реалистичные и на цвете терялись бы. */ .subs-img { position: relative; z-index: 2; width: 86px; height: 86px; padding: 9px; object-fit: contain; background: rgba(255, 255, 255, .94); border-radius: 24px; box-shadow: 0 8px 20px rgba(10, 23, 48, .18); display: block; margin-bottom: 10px; } .subs-name { position: relative; z-index: 2; margin: 4px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.7px; } .subs-count { position: relative; z-index: 2; font-size: 13px; opacity: .82; margin-top: 4px; } .subs-list { padding: 16px 18px 24px; display: flex; flex-direction: column; gap: 9px; } .sub-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 16px; border: none; border-radius: var(--r-md); background: var(--card); color: var(--text); font-family: inherit; font-size: 15px; font-weight: 650; text-align: left; cursor: pointer; box-shadow: var(--sh-sm); transition: transform .14s ease; animation: cardIn .3s cubic-bezier(.22,.8,.3,1) backwards; } .sub-row:active { transform: scale(.98); } .sub-row .nm { flex: 1; } .sub-row .n { font-size: 12px; font-weight: 700; color: var(--muted); } .sub-row .arw { width: 17px; height: 17px; color: var(--muted); flex: 0 0 auto; } /* ═════════ Панель ═════════ Верхняя полоса тоже стеклянная: содержимое уезжает под неё и просвечивает. Сплошная плашка резала бы экран пополам. */ .bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: calc(13px + var(--pad-top)) 16px 13px; background: var(--glass-bar); border-bottom: 1px solid var(--line); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .bar { -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .bar { background: var(--bg); } } .bar-float { position: absolute; background: none; border: none; padding: calc(14px + var(--pad-top)) 16px 14px; -webkit-backdrop-filter: none; backdrop-filter: none; } .bar-title { font-size: 19px; font-weight: 800; letter-spacing: -.3px; } .icon-btn { border: none; background: none; color: var(--text); width: 36px; height: 36px; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .icon-btn svg { width: 22px; height: 22px; } /* ═════════ Лента объявлений ═════════ */ /* ═════════ Лента ═════════ Фотография ничем не закрыта, текст живёт под ней. Плашка поверх снимка съедала треть товара и заставляла белые буквы драться с картинкой: на светлом фото приходилось затемнять, на тёмном высветлять, и хорошо не выходило никогда. Убрали плашку, рамку и контур внутри контура — остался снимок и три строки. Кадр вертикальный: диван, холодильник, коляска в квадрат не влезали. */ .feed { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 14px; padding: 0 20px 26px; } #list-feed, #mine-list, #mod-list, #home-feed { padding-top: 16px; } .feed .card { align-self: start; } /* На главной лента стоит внутри раздела, у которого уже есть свои поля. Складывать их было бы 42 пикселя с каждого бока — на узком телефоне от карточек остаются полоски. Внутри раздела свои поля лента снимает. */ .sec > .feed { padding-left: 0; padding-right: 0; } .card { position: relative; cursor: pointer; transition: opacity var(--fast) var(--ease); animation: cardIn .32s var(--ease) backwards; } .card:active { opacity: .72; } .card-media { position: relative; height: auto; border-radius: 18px; overflow: hidden; background: var(--bg-deep); } /* Квадрат, а не вертикаль. Вертикальная рамка отрезала у горизонтального снимка 44% ширины: у машины пропадали перед и зад, у дивана подлокотники. Квадрат теряет 25% — и к нему независимо друг от друга пришли Wallapop, Carousell и Karrot. Ровная сетка нужна, чтобы две вещи рядом сравнивались глазом; в самой карточке товара снимок остаётся целым. */ .card-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: var(--bg-deep); } .card-img.ph { display: flex; align-items: center; justify-content: center; color: var(--faint); } .card-img.ph svg { width: 34px; height: 34px; } /* Подпись под снимком. Ни фона, ни рамки — только текст на листе. */ .card-body { padding: 10px 2px 0; } /* Цена и зачёркнутая старая рядом. Переносим строкой, а не обрезаем: на узком телефоне «185 000 грн» и «210 000 грн» в один ряд не помещаются, и старая цена уехала бы за край. */ .card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 6px; min-width: 0; } .cp-now { font-size: 16.5px; font-weight: 850; letter-spacing: -.4px; color: var(--text); } .cp-was { font-size: 12px; font-weight: 600; color: var(--faint); text-decoration: line-through; text-decoration-thickness: 1px; } /* Скидка углом снимка — как у Mercari: видно, не занимая ни строки. */ .badge-off { position: absolute; left: 8px; top: 8px; z-index: 2; font-size: 11.5px; font-weight: 800; letter-spacing: -.2px; color: #fff; background: #C2410C; padding: 3px 7px; border-radius: var(--r-pill); } /* Когда выложили. Свежее суток — цветом: живая площадка узнаётся по свежим датам, а не по обещаниям. */ .card-when { font-size: 11.5px; color: var(--faint); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-when.fresh { color: var(--blue); font-weight: 650; } /* Торг — рядом с ценой, одним словом. */ .cp-bargain { font-size: 11px; font-weight: 700; color: var(--blue); background: rgba(12,112,228,.10); padding: 2px 7px; border-radius: var(--r-pill); } /* Состояние вещи под названием. Тихо, но всегда на месте. */ .card-cond { font-size: 11.5px; color: var(--text-2); margin-top: 3px; font-weight: 600; } /* Продавец: лицо и имя. В торговле между людьми покупают не диван, а «диван у Оксани». */ .card-seller { display: flex; align-items: center; gap: 5px; margin-top: 6px; min-width: 0; } .cs-name { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ava { position: relative; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; } .ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ava i { font-style: normal; font-size: 10px; font-weight: 800; color: #fff; line-height: 1; } /* Заброньовано и продано. Плёнка поверх снимка, а не вместо него: вещь видно, но понятно, что она уже не свободна. Проданное вдобавок приглушаем целиком — так оно остаётся доказательством живой площадки, но не спорит за внимание с тем, что можно купить. */ .deal-veil { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(8, 12, 22, .46); } .deal-word { color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .2px; border: 1.5px solid rgba(255,255,255,.9); padding: 5px 12px; border-radius: var(--r-pill); } .card.sold .card-body { opacity: .55; } /* ═════════ Свой квартал ═════════ */ /* ═════════ Место — одной строкой под поиском ═════════ Раньше про место было три разных места на экране: полоса сверху, предложение под ней и карточка «включити геолокацію» в самом низу, куда человек не долистывал. Всё сведено сюда. */ .place-row { display: flex; align-items: center; gap: 7px; margin: 10px 20px 4px; padding: 8px 12px; border-radius: var(--r-pill); background: var(--card); box-shadow: var(--sh-sm); } .pr-pin { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: var(--muted); stroke-width: 2; } .place-row.chosen .pr-pin { stroke: var(--blue); } /* Приложение только что записало место само. Две секунды строка светится синим — чтобы взгляд сам туда пошёл и человек увидел, ЧТО записано. Молча подставить имя и промолчать нельзя: он не заметит и не исправит. */ .place-row.just-set { background: rgba(12,112,228,.10); } .place-row.just-set .pr-pin { stroke: var(--blue); } .pr-name { flex: 1; min-width: 0; text-align: left; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 0; } .place-row.chosen .pr-name, .place-row.just-set .pr-name { color: var(--text); } .pr-find { flex: 0 0 auto; border: none; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 800; color: #fff; background: var(--blue); padding: 6px 12px; border-radius: var(--r-pill); } .pr-find:active, .pr-name:active { transform: scale(.96); } /* «Схоже, ви тепер у Таїровій». Появляется редко — только когда человек несколько дней подряд оказывался в другом месте. Два ответа рядом: согласиться так же легко, как отказаться. */ .place-move { display: flex; align-items: center; gap: 8px; margin: 8px 20px 4px; padding: 10px 12px; border-radius: var(--r-xl); background: rgba(12,112,228,.10); } .pm-tx { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--text); } .pm-yes, .pm-no { flex: 0 0 auto; border: none; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 800; padding: 6px 13px; border-radius: var(--r-pill); } .pm-yes { background: var(--blue); color: #fff; } .pm-no { background: var(--card); color: var(--muted); } .pm-yes:active, .pm-no:active { transform: scale(.96); } /* Лист выбора места */ .q-detect { width: 100%; border: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 800; color: #fff; background: var(--blue); padding: 13px; border-radius: var(--r-xl); margin-bottom: 12px; } .q-search { width: 100%; border: 1px solid var(--field-line); background: var(--field-bg); color: var(--text); font-family: inherit; font-size: 15px; padding: 11px 14px; border-radius: var(--r-xl); margin-bottom: 14px; } .q-group { margin-bottom: 16px; } .q-group-t { font-size: 12px; font-weight: 800; color: var(--faint); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; } .q-none { font-size: 14px; color: var(--muted); padding: 10px 0 18px; } /* Полоса квартала: пять разделов, которые раньше лежали по углам. Прокручивается вбок — на узком телефоне пять плиток в ряд не встанут. */ .qstrip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 20px 4px; margin: 0 -20px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; } .qstrip::-webkit-scrollbar { display: none; } .qtile { flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 84px; padding: 13px 6px; border: none; border-radius: var(--r-xl); cursor: pointer; background: var(--card); box-shadow: var(--sh-sm); font-family: inherit; } .qtile-ic { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: rgba(12,112,228,.10); color: var(--blue); } .qtile-ic svg { width: 17px; height: 17px; } .qtile-tx { font-size: 11.5px; font-weight: 700; color: var(--text-2); line-height: 1.2; text-align: center; } .qtile:active { transform: scale(.95); } /* Своя карточка в кабинете — та же, что видят соседи. */ .mecard { margin: 14px 20px 4px; background: var(--card); border-radius: var(--r-xl); padding: 14px; box-shadow: var(--sh-sm); } .mc-top { display: flex; align-items: center; gap: 11px; } .mc-top .ava { width: 44px; height: 44px; flex: 0 0 auto; } .mc-top .ava i { font-size: 18px; } .mc-tx { flex: 1; min-width: 0; } .mc-name { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -.3px; } .mc-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-eye { flex: 0 0 auto; border: none; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--blue); background: rgba(12,112,228,.10); padding: 7px 11px; border-radius: var(--r-pill); } .mc-fast { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 12px; font-weight: 700; color: #0B7A5B; background: rgba(11,122,91,.10); padding: 4px 10px; border-radius: var(--r-pill); } .mc-fast svg { width: 11px; height: 11px; } .mc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; } .mc-tile { text-align: center; background: var(--field-bg); border-radius: 12px; padding: 9px 3px; } .mc-tile b { display: block; font-size: 16px; font-weight: 850; color: var(--text); } .mc-tile span { display: block; font-size: 9.5px; color: var(--muted); margin-top: 2px; line-height: 1.2; } .mc-tile.warm { background: rgba(180,71,31,.12); } .mc-tile.warm b { color: #B4471F; } /* Подсказка вместо уговоров: пустое место само просит его заполнить. */ .mc-hint { width: 100%; margin-top: 11px; border: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--blue); background: rgba(12,112,228,.08); padding: 10px; border-radius: 12px; } /* ═════════ Сводка кабинета ═════════ */ /* Кто ждёт ответа. Самая дорогая строка: не ответил — покупатель ушёл к другому, и никто об этом не узнал. Поэтому цветом, а не серым. */ .wait-row { display: flex; align-items: center; gap: 10px; width: calc(100% - 40px); margin: 12px 20px 0; padding: 13px 15px; border: none; border-radius: var(--r-xl); cursor: pointer; font-family: inherit; background: rgba(194,65,12,.10); color: #B4471F; font-size: 14px; font-weight: 800; text-align: left; } .wait-tx { flex: 1; } .wait-go { font-size: 17px; opacity: .7; } .wait-row:active { transform: scale(.99); } /* Что с моими вещами — три числа разом, вместо шести нажатий. */ .things { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 20px 0; } .th-cell { text-align: center; background: var(--card); border-radius: var(--r-xl); padding: 12px 4px; box-shadow: var(--sh-sm); } .th-cell b { display: block; font-size: 18px; font-weight: 850; color: var(--text); } .th-cell span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 3px; } /* Что залежалось. Совет приходит вовремя, а не при публикации. */ .stale { display: flex; align-items: center; gap: 11px; width: calc(100% - 40px); margin: 12px 20px 0; padding: 11px 13px; border: none; border-radius: var(--r-xl); cursor: pointer; font-family: inherit; background: var(--card); box-shadow: var(--sh-sm); text-align: left; } .stale-img { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; object-fit: cover; background: var(--bg-deep); } .stale-img.ph { display: grid; place-items: center; color: var(--faint); } .stale-img.ph svg { width: 18px; height: 18px; } .stale-tx { flex: 1; min-width: 0; } .stale-tx b { display: block; font-size: 13.5px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stale-tx span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; } .stale:active { transform: scale(.99); } /* Магазины поблизости */ .nearshops { display: flex; flex-direction: column; gap: 8px; padding: 0 20px; } .nsh { display: flex; align-items: center; gap: 11px; width: 100%; border: none; border-radius: var(--r-xl); cursor: pointer; font-family: inherit; background: var(--card); box-shadow: var(--sh-sm); padding: 11px 13px; text-align: left; } .nsh-logo { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px; object-fit: cover; background: var(--bg-deep); } .nsh-logo.ph { display: grid; place-items: center; color: var(--blue); background: rgba(12,112,228,.10); } .nsh-logo.ph svg { width: 17px; height: 17px; } .nsh-tx { flex: 1; min-width: 0; } .nsh-tx b { display: block; font-size: 14px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nsh-tx span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; } .nsh:active { transform: scale(.99); } /* ═════════ Страница соседа ═════════ */ .sp-head { text-align: center; padding: 20px 20px 6px; } .sp-head .ava { width: 72px; height: 72px; margin: 0 auto 12px; } .sp-head .ava i { font-size: 30px; } .sp-name { font-size: 21px; font-weight: 850; letter-spacing: -.4px; color: var(--text); } .sp-place { font-size: 13.5px; color: var(--muted); margin-top: 4px; } /* Признак жизни. Самый частый молчаливый вопрос покупателя — «он вообще жив, или это висит с зимы». Точка на лице отвечает раньше, чем человек успевает его задать. */ .sp-ava { position: relative; display: inline-block; } .sp-ava.online::after { content: ""; position: absolute; right: 2px; bottom: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--green); border: 3px solid var(--bg); } .sp-seen { font-size: 12.5px; color: var(--muted); margin-top: 3px; } .sp-seen.now { color: var(--green); font-weight: 700; } /* Один квартал со смотрящим — самая тёплая строка на соседской площадке, и данные для неё уже были. */ .sp-same { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(12,112,228,.10); color: var(--blue); font-size: 12.5px; font-weight: 700; } .sp-same svg { width: 13px; height: 13px; } /* Строка о себе. У чужого — просто текст, у себя нажимается и правится. Пустая пунктирная рамка зовёт заполнить, а не констатирует пустоту. */ .sp-about { display: block; width: calc(100% - 8px); margin: 12px auto 0; font-size: 13.5px; line-height: 1.5; color: var(--text); font-family: inherit; text-align: center; border: none; background: none; padding: 0; } .sp-about.mine { cursor: pointer; } .sp-about.empty { cursor: pointer; color: var(--muted); font-size: 13px; border: 1px dashed var(--field-line); border-radius: var(--r-xl); padding: 11px 14px; background: none; } .sp-about.empty:active, .sp-about.mine:active { opacity: .6; } /* Пустая своя страница зовёт действовать, а не сообщает, что ты никто. */ /* Пусто и в кабинете — вместо ряда нулей одна фраза о том, что делать, и кнопка, которая это делает. Фраза без кнопки — упрёк, а не помощь. */ .mc-first { font-size: 13px; line-height: 1.5; color: var(--muted); padding: 10px 2px 0; } .mc-go { width: 100%; margin-top: 11px; border: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 800; color: #fff; background: var(--blue); padding: 12px; border-radius: var(--r-xl); } .mc-go:active { transform: scale(.99); } .sp-first { text-align: center; padding: 26px 20px 10px; } .sp-first-t { font-size: 16px; font-weight: 800; color: var(--text); } .sp-first-s { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 6px auto 16px; max-width: 300px; } .sp-shop { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--blue); margin-top: 7px; } .sp-shop svg { width: 14px; height: 14px; } .sp-fast { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--green, #0B7A5B); background: rgba(11,122,91,.10); padding: 5px 11px; border-radius: var(--r-pill); margin-top: 10px; } .sp-fast svg { width: 12px; height: 12px; } /* Четыре числа в ряд. Читаются за секунду — это и есть работа страницы: решение принимается быстрее, чем человек дочитает. */ .sp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 8px; padding: 18px 20px 4px; } .sp-tile { background: var(--card); border-radius: var(--r-xl); padding: 12px 6px; text-align: center; box-shadow: var(--sh-sm); } /* «Віддав задарма» подсвечиваем, когда есть чем: на соседской площадке это самый сильный сигнал, сильнее звёздочек. */ .sp-tile.warm { background: rgba(180,71,31,.10); } .sp-tile.warm .sp-n { color: #B4471F; } .sp-n { font-size: 20px; font-weight: 850; letter-spacing: -.5px; color: var(--text); } .sp-l { font-size: 10.5px; color: var(--muted); margin-top: 3px; line-height: 1.25; } .sp-write { margin: 16px 20px 4px; width: calc(100% - 40px); } /* Отзывы. Двадцать восемь штук лежали мёртвым грузом — их негде было прочитать целиком. */ .sp-revs { display: flex; flex-direction: column; gap: 10px; padding: 0 20px; } .sp-rev { background: var(--card); border-radius: var(--r-xl); padding: 12px 14px; } .sp-rev-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sp-rev-stars svg { width: 13px; height: 13px; } .sp-rev-when { font-size: 11.5px; color: var(--faint); white-space: nowrap; } .sp-rev-tx { font-size: 13.5px; line-height: 1.45; color: var(--text-2); margin-top: 6px; } /* Пока грузится — серый прямоугольник вместо прыжка вёрстки. */ .sk-seller { height: 220px; margin: 20px; border-radius: var(--r-xl); background: var(--card); } /* Метки брони на своей карточке товара */ .deal-row { display: flex; gap: 8px; margin: 14px 0 6px; } .deal-row .chip { flex: 1; text-align: center; padding: 10px 12px; font-size: 13px; } .deal-hint { margin-bottom: 10px; } .card-name { font-size: 13px; margin-top: 3px; line-height: 1.35; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-sub { font-size: 11.5px; color: var(--faint); margin-top: 5px; display: flex; align-items: center; gap: 4px; } .card-sub svg { width: 11px; height: 11px; flex: 0 0 auto; } .card-attrs { font-size: 11.5px; color: var(--muted); margin-top: 4px; } .card-shop { font-size: 11.5px; margin-top: 4px; display: flex; align-items: center; gap: 4px; } .card-shop svg { width: 12px; height: 12px; flex: 0 0 auto; } .rate { font-size: 11.5px; color: var(--muted); margin-top: 4px; display: inline-flex; align-items: center; gap: 3px; } .rate svg { width: 12px; height: 12px; } /* Сердечко — единственное, что лежит на фотографии */ .fav-btn { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(255, 255, 255, .88); color: #0A1730; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(10, 20, 40, .18); transition: transform var(--fast) var(--ease); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .fav-btn { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } } html[data-theme="dark"] .fav-btn { background: rgba(20, 24, 34, .76); color: #fff; } .fav-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } .fav-btn.on { color: var(--red); } .fav-btn.on svg { fill: var(--red); stroke: var(--red); } .fav-btn:active { transform: scale(.88); } /* Метки видео и магазина — тоже на снимке, слева внизу */ .badge-video { position: absolute; left: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(8, 12, 22, .58); color: #fff; display: grid; place-items: center; } .badge-video svg { width: 12px; height: 12px; fill: currentColor; stroke: none; } .pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; margin-top: 8px; } .pill.pending { background: rgba(245,158,11,.15); color: #B45309; } .pill.approved { background: rgba(16,185,129,.15); color: #047857; } .pill.rejected { background: rgba(239,68,68,.15); color: #B91C1C; } .pill.flag { background: rgba(239,68,68,.15); color: #B91C1C; } /* Почему объявление ждёт проверки — видит только его автор. */ .why { margin-top: 6px; font-size: 11.5px; line-height: 1.35; color: #B45309; } .empty { text-align: center; color: var(--muted); padding: 52px 34px; font-size: 15px; line-height: 1.5; white-space: pre-line; } /* ═════════ Карточка товара ═════════ */ /* Галерея: крупный кадр и лента превью под ним */ .gal-wrap { position: relative; } .gal-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .gal-track::-webkit-scrollbar { display: none; } .gal-slide { flex: 0 0 100%; width: 100%; aspect-ratio: 4/5; scroll-snap-align: start; background: var(--bg-deep); } .gal-slide img, .gal-slide video { width: 100%; height: 100%; object-fit: cover; display: block; } .gal-slide video { object-fit: contain; background: #0A1730; } .gal-counter { position: absolute; right: 12px; bottom: 12px; background: rgba(10, 23, 48, .62); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(6px); } /* Снизу нужен запас: лист с описанием наезжает на галерею на 26 пикселей, и без запаса он срезал маленькие превью — были видны одни верхушки. */ .gal-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 12px 18px 36px; scrollbar-width: none; } .gal-thumbs::-webkit-scrollbar { display: none; } .gal-thumb { position: relative; flex: 0 0 auto; width: 62px; height: 62px; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--bg-deep); transition: border-color .16s ease, transform .16s ease; } .gal-thumb.on { border-color: var(--blue); } .gal-thumb:active { transform: scale(.94); } .gal-thumb img, .gal-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; } .gal-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10, 23, 48, .34); } .gal-play svg { width: 18px; height: 18px; fill: #fff; stroke: none; } .gal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .gal::-webkit-scrollbar { display: none; } .gal img { flex: 0 0 100%; width: 100%; aspect-ratio: 1/1; object-fit: cover; scroll-snap-align: start; } .gal-ph { width: 100%; aspect-ratio: 1/1; background: var(--bg-deep); color: var(--faint); display: flex; align-items: center; justify-content: center; } .gal-ph svg { width: 64px; height: 64px; } /* Содержимое наезжает на фотографию стеклянным листом со скруглением: верхний край подхватывает саму фотографию, остальное — свечение фона */ .item-wrap { position: relative; z-index: 2; margin-top: -26px; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--glass-bar); border-top: 1px solid var(--glass-line); box-shadow: 0 -14px 34px rgba(10, 20, 40, .10); padding: 24px 22px 26px; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .item-wrap { -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .item-wrap { background: var(--bg); } } .item-price { font-size: var(--t-price-big); font-weight: 900; letter-spacing: -1.2px; line-height: 1.05; } .item-name { font-size: 19px; font-weight: 700; margin: 10px 0 14px; line-height: 1.3; } .item-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .tag { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--card); padding: 7px 13px; border-radius: 999px; box-shadow: var(--sh-sm); } .item-desc { font-size: 15px; line-height: 1.55; white-space: pre-wrap; margin-bottom: 24px; } .acts { display: flex; gap: 10px; } .acts .cta { border-radius: var(--r-md); flex: 1; } /* ═════════ Кнопки ═════════ */ .cta { display: block; width: 100%; border: none; border-radius: var(--r-md); background: linear-gradient(125deg, var(--blue-lt), var(--blue)); color: #fff; font-family: inherit; font-size: 16.5px; font-weight: 750; padding: 16px; cursor: pointer; text-align: center; text-decoration: none; box-shadow: var(--sh-blue); transition: transform .14s ease; } .cta:active { transform: scale(.98); } .cta:disabled { opacity: .55; box-shadow: none; } .cta.green { background: var(--green); box-shadow: 0 8px 22px rgba(16,185,129,.28); } .cta.red { background: var(--red); box-shadow: 0 8px 22px rgba(239,68,68,.26); } /* ═════════ Форма ═════════ */ .form { padding: 18px 18px 40px; display: flex; flex-direction: column; gap: 20px; } .field { display: flex; flex-direction: column; gap: 7px; } .field > label { font-size: 13.5px; font-weight: 750; color: var(--text-2); } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Поля должны читаться как поля. Раньше они были почти белыми на почти белом — человек не понимал, куда вообще писать. Теперь заметная рамка и своя подложка. */ input, select, textarea { font-family: inherit; font-size: 16px; padding: 14px 15px; border: 1.5px solid var(--field-line); border-radius: var(--r-md); background: var(--field-bg); color: var(--text); outline: none; width: 100%; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } input::placeholder, textarea::placeholder { color: var(--faint); } input:focus, select:focus, textarea:focus { border-color: var(--blue); background: var(--card); box-shadow: 0 0 0 3px rgba(12, 112, 228, .14); } /* Заголовок — самое читаемое поле формы: с него начинается объявление. Растёт вниз по мере набора, поэтому текст всегда виден целиком. */ #f-title { font-size: 17px; font-weight: 700; padding: 14px 15px; line-height: 1.35; resize: none; overflow: hidden; min-height: 52px; } #f-description { min-height: 132px; } textarea { resize: vertical; line-height: 1.5; } /* Счётчик символов под полем: видно, сколько осталось, и почему текст перестал вводиться */ .counter { align-self: flex-end; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; } .counter.near { color: var(--yellow-ink); } .counter.full { color: var(--red); } /* Подсказка под полем — что именно сюда писать */ .hint { font-size: 12px; color: var(--muted); line-height: 1.4; } /* Стрелочки у поля цены убраны: на компьютере прокрутка над ними меняла цену вместо того, чтобы листать страницу. */ input[type="number"] { -moz-appearance: textfield; appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .error { color: var(--red); font-size: 14px; text-align: center; } /* Экран магазина пользовался этими классами, а стилей для них не было — поэтому пояснение и ошибка выглядели как случайный текст. */ .form-note { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0 0 4px; } .form-error { font-size: 13.5px; color: var(--red); line-height: 1.45; padding: 11px 13px; border-radius: var(--r-sm); background: rgba(239, 68, 68, .10); } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* ═════════ Обмен ═════════ Человек должен за секунду понять, что отдаёт и что получает. Поэтому две вещи одна под другой и стрелка между ними, а не таблица, в которой надо разбираться. */ .swap-chips { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; } .swap-cat-name { font-size: 11.5px; font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; } .swap-cat-subs { display: flex; flex-wrap: wrap; gap: 6px; } .chip { border: 1px solid var(--field-line); background: var(--field-bg); color: var(--text-2); border-radius: 999px; padding: 6px 12px; font-family: inherit; font-size: 12.5px; cursor: pointer; transition: all var(--fast) var(--ease); } .chip.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; } /* Ряд состояний в форме. Переносится строкой: «Майже не користувались» в одну строку с остальными не помещается ни на одном телефоне. */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .chip:active { transform: scale(.95); } /* ═════════ Раздел «Ще» ═════════ Строчки списком, как принято в настройках телефона: человек уже знает, как этим пользоваться, и не тратит время на разгадывание. */ .rows { border-radius: var(--r-lg); overflow: hidden; background: var(--card); box-shadow: var(--sh-sm); } .row-btn { display: flex; align-items: center; gap: 13px; width: 100%; padding: 15px 16px; border: none; border-bottom: 1px solid var(--line); background: none; color: var(--text); font-family: inherit; font-size: 15px; text-align: left; cursor: pointer; transition: background var(--fast) ease; } .rows .row-btn:last-child { border-bottom: none; } .row-btn:active { background: var(--field); } .row-btn > svg:first-child { width: 21px; height: 21px; flex: 0 0 auto; color: var(--muted); } .row-btn > span:not(.row-note) { flex: 1; min-width: 0; } .row-note { font-size: 13.5px; color: var(--muted); flex: 0 0 auto; } .row-arw { width: 16px; height: 16px; color: var(--faint); flex: 0 0 auto; } .more-foot { text-align: center; padding: 28px 20px 40px; color: var(--faint); font-size: 12px; } .more-logo { font-size: 17px; font-weight: 900; letter-spacing: .8px; color: var(--faint); margin-bottom: 5px; } /* ═════════ Документ ═════════ */ .doc { font-size: 15px; line-height: 1.6; color: var(--text-2); } .doc h2 { font-size: 21px; font-weight: 850; letter-spacing: -.4px; color: var(--text); margin: 0 0 14px; } .doc h3 { font-size: 16px; font-weight: 800; color: var(--text); margin: 26px 0 8px; } .doc h4 { font-size: 14.5px; font-weight: 750; color: var(--text); margin: 18px 0 6px; } .doc p { margin: 0 0 12px; } .doc ul { margin: 0 0 14px; padding-left: 20px; } .doc li { margin-bottom: 6px; } .doc b { color: var(--text); font-weight: 750; } .doc-updated { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--faint); } /* ═════════ Помощь ═════════ Открыт только один ответ: иначе список превращается в ту же простыню, от которой мы и уходили. */ .faq { border-radius: var(--r-lg); overflow: hidden; background: var(--card); box-shadow: var(--sh-sm); } .faq-item { border-bottom: 1px solid var(--line); } .faq-item:last-child { border-bottom: none; } .faq-q { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 16px; border: none; background: none; color: var(--text); font-family: inherit; font-size: 14.5px; font-weight: 650; text-align: left; cursor: pointer; line-height: 1.35; } .faq-q > span { flex: 1; } .faq-arw { width: 16px; height: 16px; flex: 0 0 auto; color: var(--faint); transition: transform var(--fast) var(--ease); } .faq-item.open .faq-arw { transform: rotate(180deg); } .faq-a { max-height: 0; overflow: hidden; padding: 0 16px; font-size: 14px; line-height: 1.55; color: var(--text-2); transition: max-height var(--slow) var(--ease), padding var(--slow) var(--ease); } .faq-item.open .faq-a { max-height: 460px; padding: 0 16px 15px; } .faq-a p { margin: 0 0 8px; } .faq-a p:last-child { margin-bottom: 0; } .faq-a b { color: var(--text); font-weight: 750; } /* ═════════ Полоса выгод ═════════ Реклама, поданная как польза. Человек не «смотрит рекламу» — он видит, что рядом есть скидки. */ .perkbar { display: flex; align-items: center; gap: 13px; width: 100%; padding: 14px 16px; border: none; border-radius: var(--r-lg); background: linear-gradient(120deg, rgba(16,185,129,.12), rgba(12,112,228,.10)); color: var(--text); cursor: pointer; text-align: left; font-family: inherit; } html[data-theme="dark"] .perkbar { background: linear-gradient(120deg, rgba(16,185,129,.16), rgba(44,144,255,.14)); } .perkbar-ic { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: var(--green); color: #fff; box-shadow: 0 6px 16px rgba(16,185,129,.28); } .perkbar-ic svg { width: 19px; height: 19px; stroke-width: 1.9; } .perkbar-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .perkbar-title { font-size: 14.5px; font-weight: 750; } .perkbar-sub { font-size: 12px; color: var(--muted); } .perkbar-go { flex: 0 0 auto; color: var(--green); font-size: 17px; font-weight: 700; } /* ═════════ Сосед-курьер ═════════ */ .rides-list { display: flex; flex-direction: column; gap: 12px; } .ride { border-radius: var(--r-lg); padding: 14px; } .ride-top { display: flex; align-items: center; gap: 12px; } .ride img, .ride-ph { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 12px; object-fit: cover; background: var(--bg-deep); } .ride-tx { flex: 1; min-width: 0; } .ride-name { font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ride-way { font-size: 12.5px; color: var(--muted); margin-top: 3px; } .ride-fee { font-size: 12.5px; font-weight: 700; color: var(--green); margin-top: 3px; } .ride-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; } .ride-foot .cta { flex: 0 0 auto; padding: 9px 18px; font-size: 13.5px; } .ride-st { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--field); color: var(--muted); } .ride-st.taken { background: rgba(12,112,228,.12); color: var(--blue); } .ride-st.picked { background: rgba(245,158,11,.14); color: var(--yellow-ink); } .ride-st.delivered { background: rgba(16,185,129,.14); color: #047857; } html[data-theme="dark"] .ride-st.delivered { color: #34D399; } .ride-note { font-size: 12.5px; color: var(--muted); line-height: 1.45; padding: 12px 14px; border-radius: var(--r-sm); background: var(--field); } .route-row { margin-bottom: 10px; } /* ═════════ Живая распродажа ═════════ */ .lives-list { display: flex; flex-direction: column; gap: 14px; } .live { border-radius: var(--r-lg); padding: 15px; } .live-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .live-when { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); } .live-when.on { color: var(--red); display: inline-flex; align-items: center; gap: 6px; } .live-when.on::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: pulse 2s infinite; } .live-watch { font-size: 12.5px; font-weight: 750; color: var(--blue); text-decoration: none; } .live-title { font-size: 16.5px; font-weight: 800; letter-spacing: -.3px; margin-top: 8px; } .live-by { font-size: 12px; color: var(--muted); margin-top: 3px; } .live-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 13px; } .live-item { position: relative; } .live-item img, .live-item-ph { width: 100%; aspect-ratio: 1/1; border-radius: 12px; object-fit: cover; display: block; background: var(--bg-deep); } .live-item.gone img { opacity: .45; } .live-item-price { font-size: 12.5px; font-weight: 800; margin-top: 5px; } .live-take { width: 100%; margin-top: 5px; padding: 6px; border: none; border-radius: 999px; cursor: pointer; background: var(--blue); color: #fff; font-family: inherit; font-size: 12px; font-weight: 750; transition: transform var(--fast) var(--ease); } .live-take:active { transform: scale(.94); } .live-item-st { margin-top: 5px; font-size: 11.5px; font-weight: 700; color: var(--faint); text-align: center; } .live-item-st.mine { color: var(--green); } .swaps-list { display: flex; flex-direction: column; gap: 14px; } .swap { border-radius: var(--r-lg); padding: 16px; animation: cardIn .3s var(--ease) backwards; } .swap-kind { font-size: 11.5px; font-weight: 800; color: var(--blue); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; } .swap-side-label { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; } .swap-item { display: flex; align-items: center; gap: 11px; } .swap-item img, .swap-item-ph { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 12px; object-fit: cover; background: var(--bg-deep); } .swap-item-tx { min-width: 0; } .swap-item-name { font-size: 14.5px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .swap-item-price { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .swap-arrow { display: flex; justify-content: center; color: var(--faint); margin: 9px 0; } .swap-arrow svg { width: 18px; height: 18px; } .swap-extra { margin-top: 12px; padding: 9px 12px; border-radius: var(--r-sm); background: rgba(245, 158, 11, .13); color: var(--yellow-ink); font-size: 12.5px; font-weight: 700; } .swap-extra.get { background: rgba(16, 185, 129, .13); color: #047857; } html[data-theme="dark"] .swap-extra.get { color: #34D399; } .swap-who { margin-top: 10px; font-size: 12px; color: var(--muted); } .swap-who .yes { color: var(--green); font-weight: 700; } .swap-acts { display: flex; gap: 10px; margin-top: 14px; } .swap-acts .cta { flex: 1; } .swap-ok, .swap-wait { margin-top: 14px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 13px; font-weight: 650; text-align: center; } .swap-ok { background: rgba(16, 185, 129, .14); color: #047857; } html[data-theme="dark"] .swap-ok { color: #34D399; } .swap-wait { background: var(--field); color: var(--muted); } /* ═════════ Пальцу нужно куда попасть ═════════ Крестики и сердечки нарисованы маленькими — так и должно быть. Но область нажатия расширяем невидимой рамкой до 44 пикселей: иначе на телефоне человек мажет и злится. */ .photo-del::after, .fav-btn::after, .pinbar-x::after, .mic-btn::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; } .photo-del, .fav-btn, .pinbar-x, .mic-btn { position: relative; } /* ═════════ Фото ═════════ */ .photo-grid { display: flex; gap: 10px; flex-wrap: wrap; } .photo-add, .photo-thumb { width: 78px; height: 78px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; cursor: pointer; } .photo-add { background: var(--card); border: 1.5px dashed rgba(124,134,152,.4); color: var(--muted); } .photo-add svg { width: 24px; height: 24px; } .photo-thumb img { width: 100%; height: 100%; object-fit: cover; } .photo-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(10,23,48,.68); color: #fff; border: none; font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* ═════════ Нижнее меню ═════════ */ /* Панель не приклеена к краю, а висит с отступом — сквозь неё просвечивает лента. Это и есть «живой материал» вместо плоской полосы. */ .tabbar { position: fixed; z-index: 40; left: 14px; right: 14px; bottom: calc(10px + max(env(safe-area-inset-bottom), var(--pad-bottom))); display: flex; align-items: center; border-radius: 30px; padding: 8px 4px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--sh-md); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .tabbar { -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%); } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html[data-theme="light"] .tabbar { background: #FFFFFF; } html[data-theme="dark"] .tabbar { background: #1A1E27; } } .tab { flex: 1; border: none; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); padding: 4px 0; font-family: inherit; transition: color var(--fast) ease; } .tab svg { width: 22px; height: 22px; } .tab i { font-style: normal; font-size: 10px; font-weight: 700; } .tab.active { color: var(--text); } html[data-theme="light"] .tab.active { color: var(--blue); } .tab-fab { flex: 0 0 auto; margin: 0 2px; } .fab { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--blue-lt), var(--blue)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-blue); margin-top: -22px; transition: transform var(--fast) var(--ease); } .tab-fab:active .fab { transform: scale(.9); } .fab svg { width: 25px; height: 25px; stroke-width: 2.6; } /* ═════════ Мелочи в карточке ═════════ */ .card-sub .dist { color: var(--blue); font-weight: 700; } /* ═════════ Сортировка ═════════ */ .sortbar { display: flex; gap: 8px; overflow-x: auto; padding: 12px 18px 4px; scrollbar-width: none; } .sortbar::-webkit-scrollbar { display: none; } .sort-chip { flex: 0 0 auto; border: none; cursor: pointer; background: var(--card); color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 999px; box-shadow: var(--sh-sm); transition: background .16s ease, color .16s ease; } .sort-chip.on { background: var(--blue); color: #fff; } /* ═════════ Кнопки в шапке товара ═════════ */ .bar-right { margin-left: auto; display: flex; gap: 8px; } /* Круглые кнопки поверх фотографии: назад, в обране, поскаржитись. Здесь было два оформления с одним именем — светлое и тёмное. Работало нижнее, верхнее лежало мёртвым грузом и путало при правках. */ .icon-btn.round { background: rgba(10,23,48,.42); color: #fff; border-radius: 50%; } #item-fav.on { color: #FF6B6B; } #item-fav.on svg { fill: currentColor; } /* ═════════ Продавец и отзывы ═════════ */ .seller { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 16px; } .seller.muted { color: var(--muted); font-weight: 500; } .stars { display: inline-flex; gap: 2px; color: #DCE1EA; } .stars .on { color: #FFC81E; } .stars svg { width: 15px; height: 15px; } .tag.accent { color: var(--blue); font-weight: 700; } .tag svg { width: 12px; height: 12px; vertical-align: -1px; } /* ═════════ Кнопки-варианты ═════════ */ .cta.ghost { background: var(--card); color: var(--blue); box-shadow: var(--sh-sm); margin-top: 10px; } .cta.ghost.danger { color: var(--red); } .item-wrap .cta + .cta { margin-top: 10px; } .acts .cta { margin-top: 0; } /* ═════════ Видео в форме ═════════ */ .video-box { display: flex; gap: 10px; align-items: flex-start; } .video-add { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-radius: var(--r-md); background: var(--card); border: 1.5px dashed rgba(124,134,152,.4); color: var(--muted); font-size: 14px; font-weight: 650; cursor: pointer; } .video-add svg { width: 20px; height: 20px; flex: 0 0 auto; } .video-thumb { position: relative; width: 104px; height: 78px; border-radius: var(--r-md); overflow: hidden; background: #000; } .video-thumb video { width: 100%; height: 100%; object-fit: cover; } /* ═════════ Кнопка геолокации в форме ═════════ */ .loc-btn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 14px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); color: var(--muted); font-family: inherit; font-size: 15px; font-weight: 650; cursor: pointer; transition: color .16s ease, border-color .16s ease; } .loc-btn svg { width: 19px; height: 19px; flex: 0 0 auto; } .loc-btn.on { color: var(--blue); border-color: var(--blue); } /* ═════════ AI-кнопка ═════════ */ .ai-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 15px; border: none; border-radius: 999px; cursor: pointer; background: linear-gradient(125deg, #2563EB, #7C3AED); color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 700; box-shadow: 0 6px 16px rgba(88,60,214,.28); transition: transform .14s ease; } .ai-btn:active { transform: scale(.96); } .ai-btn:disabled { opacity: .6; } .ai-btn svg { width: 16px; height: 16px; fill: currentColor; stroke: none; } /* ═════════ «Сфотографуй — я заповню сам» ═════════ Главный вход в публикацию. Стоит выше формы, потому что для большинства людей форма и есть причина не выкладывать вещь. */ .shoot { display: flex; align-items: center; gap: 14px; width: 100%; margin-bottom: 18px; padding: 16px 18px; border: none; border-radius: var(--r-lg); text-align: left; cursor: pointer; } .shoot-ic { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(135deg, #2563EB, #7C3AED); color: #fff; box-shadow: 0 8px 18px rgba(88, 60, 214, .30); } .shoot-ic svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .shoot-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .shoot-title { font-size: 16.5px; font-weight: 800; letter-spacing: -.3px; } .shoot-sub { font-size: var(--t-small); color: var(--muted); } .shoot-arw { width: 17px; height: 17px; flex: 0 0 auto; color: var(--faint); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* «Скажіть — я запишу»: самый короткий путь, поэтому стоит первым и выглядит теплее остальных. Пока идёт запись — пульсирует. */ .shoot.say { border: none; width: 100%; margin-bottom: 12px; } .say-ic { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 8px 18px rgba(16, 185, 129, .30); } .shoot.say.listening .say-ic { background: linear-gradient(135deg, #EF4444, #DC2626); box-shadow: 0 8px 18px rgba(239, 68, 68, .34); animation: mic-pulse 1.4s infinite; } .shoot.say.working { opacity: .7; } .shoot.say.working .say-ic { animation: mic-spin 1s linear infinite; } .shoot.say .shoot-sub { white-space: normal; line-height: 1.35; } @media (prefers-reduced-motion: reduce) { .shoot.say.listening .say-ic, .shoot.say.working .say-ic { animation: none; } } /* Помощник заполнил поля — человек должен это заметить и проверить. */ .ai-note { white-space: pre-line; display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 11px 13px; border-radius: var(--r-sm); background: rgba(37, 99, 235, .10); font-size: var(--t-small); line-height: 1.4; color: var(--text); } .ai-note.warn { background: rgba(255, 176, 32, .16); } .ai-note-ic { flex: 0 0 auto; color: #2563EB; margin-top: 1px; } .ai-note.warn .ai-note-ic { color: #B87400; } .ai-note-ic svg { width: 15px; height: 15px; fill: currentColor; stroke: none; } .ai-note-tx { flex: 1; min-width: 0; } /* Короткая подсветка того, что заполнилось само. */ .just-filled { animation: filled-flash 1.6s var(--ease); } @keyframes filled-flash { 0% { box-shadow: 0 0 0 2px rgba(37, 99, 235, .55); } 100% { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0); } } /* Пока помощник думает, форма слегка гаснет: понятно, что идёт работа. */ body.ai-busy .form .field { opacity: .55; transition: opacity var(--slow) var(--ease); } body.ai-busy .shoot { pointer-events: none; opacity: .55; } @media (prefers-reduced-motion: reduce) { .just-filled { animation: none; } } /* ═════════ Подсказка по цене ═════════ Не «сколько это стоит», а сколько просят за похожее прямо сейчас. Нажал на число — оно встало в поле. */ .price-hint { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; } .price-take { border: none; border-radius: 999px; cursor: pointer; padding: 6px 12px; background: rgba(37, 99, 235, .12); color: var(--blue); font-family: inherit; font-size: 13.5px; font-weight: 800; transition: transform var(--fast) var(--ease); } .price-take:active { transform: scale(.94); } .price-hint-tx { font-size: 12.5px; color: var(--muted); line-height: 1.35; } /* ═════════ Геокарточка ═════════ */ /* ═════════ Сохранённые поиски ═════════ */ .saved-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 10px; } .mini-btn { border: none; background: none; cursor: pointer; color: var(--blue); font-family: inherit; font-size: 13px; font-weight: 700; } .saved-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; } .saved-row { display: flex; align-items: center; justify-content: space-between; background: var(--card); border-radius: var(--r-md); padding: 12px 14px; font-size: 14px; font-weight: 650; box-shadow: var(--sh-sm); } .saved-del { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; padding: 0 4px; } .saved-empty { font-size: 13px; color: var(--muted); line-height: 1.45; } /* ═════════ Мои объявления ═════════ */ .mine-list { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; padding: 16px 18px 22px; } /* ═════════ Пять вкладок ═════════ */ .tabbar .tab i { font-size: 10px; } /* ═════════ Телефон в карточке ═════════ */ .cta.phone-cta { display: flex; align-items: center; justify-content: center; gap: 9px; background: var(--green); box-shadow: 0 8px 22px rgba(16,185,129,.28); } .cta.phone-cta svg { width: 19px; height: 19px; fill: currentColor; stroke: none; } /* подсказка под полем формы */ .hint { font-size: 12px; color: var(--muted); line-height: 1.4; margin-top: -2px; } /* ═════════ Рекламный баннер ═════════ */ #banner .promo-sub { font-size: 14px; opacity: .95; margin: 0 0 14px; line-height: 1.35; } /* блок «подать объявление» — спокойнее рекламного, чтобы не спорили */ .promo-add-block { background: linear-gradient(125deg, var(--blue-lt), var(--blue)); box-shadow: 0 10px 26px rgba(12,112,228,.26); } /* ═════════ Мини-карточки: на экран и поддержка ═════════ */ .mini-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mini-card { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; background: var(--card); border: none; border-radius: 16px; padding: 15px 14px; cursor: pointer; text-align: left; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--text); box-shadow: var(--sh-sm); transition: transform .16s cubic-bezier(.22,.8,.3,1); } .mini-card:active { transform: scale(.96); } .mini-card svg { width: 22px; height: 22px; color: var(--blue); } /* ═════════ Цена на фоне похожих предложений ═════════ */ .pricecmp { border-radius: var(--r-md); padding: 0 0 18px; margin: 0 0 18px; background: none; border-bottom: 1px solid var(--line); } .pricecmp.good, .pricecmp.bad { background: none; } .pc-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; } .pc-badge { font-size: 13px; font-weight: 800; letter-spacing: -.2px; padding: 4px 10px; border-radius: 999px; background: rgba(124, 134, 152, .18); color: var(--text-2); } .pricecmp.good .pc-badge { background: rgba(16, 185, 129, .18); color: #047857; } .pricecmp.bad .pc-badge { background: rgba(245, 158, 11, .20); color: #B45309; } .pc-note { font-size: 12px; color: var(--muted); } .pc-scale { position: relative; height: 16px; margin-bottom: 7px; } .pc-line { position: absolute; left: 0; right: 0; top: 6px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, #10B981, #FFC81E 52%, #F59E0B); opacity: .5; } .pc-dot { position: absolute; top: 0; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; border: 3.5px solid var(--blue); box-shadow: 0 2px 7px rgba(12, 112, 228, .34); } .pc-ends { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .pc-mid { font-weight: 700; color: var(--text-2); } /* ═════════ Кнопки связи под номером ═════════ */ .msgr { display: flex; gap: 8px; margin-top: 10px; } .msgr-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 8px; border: none; border-radius: 13px; font-family: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer; background: var(--field); color: var(--text); transition: transform .16s cubic-bezier(.22,.8,.3,1); } .msgr-btn:active { transform: scale(.96); } .msgr-ic { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; } .msgr-btn.viber .msgr-ic { background: #7360F2; } .msgr-btn.wa .msgr-ic { background: #25D366; } .msgr-btn.copy .msgr-ic { background: #7C8698; font-size: 13px; } /* ═════════ Продавец ═════════ */ .sellerbox { display: flex; align-items: center; gap: 13px; margin: 0 22px 20px; padding: 14px 0; background: none; border: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); width: calc(100% - 44px); } .sb-ava { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--blue-lt)); color: #fff; font-size: 19px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .sb-tx { flex: 1; min-width: 0; } .sb-name { font-size: 15px; font-weight: 750; } .sb-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; margin-top: 2px; } .sb-meta .stars svg { width: 12px; height: 12px; } .sb-count { font-size: 12px; color: var(--muted); text-align: right; flex: 0 0 auto; } /* ═════════ Ленты «ещё у продавца» и «похожие» ═════════ */ .strip { margin: 0 0 22px; } .strip-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 18px; margin-bottom: 11px; } .strip-head h3 { margin: 0; font-size: 16.5px; font-weight: 800; letter-spacing: -.3px; } .strip-row { display: flex; gap: 11px; overflow-x: auto; padding: 2px 18px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .strip-row::-webkit-scrollbar { display: none; } .minicard { flex: 0 0 auto; width: 132px; padding: 0; border: none; background: var(--card); border-radius: 14px; overflow: hidden; text-align: left; cursor: pointer; font-family: inherit; color: var(--text); box-shadow: var(--sh-sm); transition: transform .16s cubic-bezier(.22,.8,.3,1); } .minicard:active { transform: scale(.96); } .minicard-img { width: 100%; aspect-ratio: 1/1; background: var(--bg-deep); } .minicard-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .mini-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--faint); } .mini-ph svg { width: 30px; height: 30px; } .minicard-price { font-size: 14.5px; font-weight: 800; padding: 9px 10px 0; letter-spacing: -.3px; } .minicard-name { font-size: 12.5px; padding: 3px 10px 11px; color: var(--muted); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Цена в долларах — рядом, но заметно тише основной цены */ .price-usd { font-size: 15px; font-weight: 700; letter-spacing: -.2px; color: var(--muted); margin-left: 9px; } /* Снижение цены — сильный сигнал для покупателя, выделяем зелёным */ .price-drop { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #047857; background: rgba(16, 185, 129, .12); padding: 5px 10px; border-radius: 999px; margin-top: 8px; } .price-drop svg { width: 13px; height: 13px; fill: currentColor; stroke: none; } /* ═════════ Параметры товара ═════════ */ .attrs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .attrs-grid .field-bool, .attrs-grid .field-range { grid-column: 1 / -1; } .range-row { display: flex; gap: 9px; } .range-row input { flex: 1; min-width: 0; } .switch { display: flex; align-items: center; gap: 10px; cursor: pointer; } .switch input { width: 20px; height: 20px; accent-color: var(--blue); flex: 0 0 auto; } .switch span { font-size: 14.5px; font-weight: 600; } /* в карточке ленты — одной строкой под названием */ .card-attrs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* в объявлении — плашками */ .item-attrs { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; } .iattr { font-size: 12.5px; font-weight: 650; background: var(--field); color: var(--text-2); padding: 6px 11px; border-radius: 9px; } /* ═════════ Панель над списком: сортировка, фильтры, карта ═════════ */ .listtools { display: flex; align-items: center; gap: 10px; padding-right: 14px; } .listtools .sortbar { flex: 1; min-width: 0; } .listtools-btns { display: flex; gap: 7px; flex: 0 0 auto; } .tool-btn { display: flex; align-items: center; gap: 5px; border: none; border-radius: 11px; padding: 8px 11px; background: var(--card); color: var(--text); cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; box-shadow: var(--sh-sm); transition: transform .16s cubic-bezier(.22,.8,.3,1); } .tool-btn:active { transform: scale(.95); } .tool-btn.on { background: var(--blue); color: #fff; } .tool-btn svg { width: 15px; height: 15px; } .tool-count { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--yellow); color: #5A4200; font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center; } .tool-btn.on .tool-count { background: rgba(255,255,255,.95); color: var(--blue); } .filt-price { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; } .filt-hint { font-size: 12px; color: var(--muted); margin-bottom: 16px; } #fl-fields { margin-bottom: 20px; } /* ═════════ Карта ═════════ */ .screen-map.active { display: flex; flex-direction: column; height: 100dvh; } body:has(.screen-map.active) { padding-bottom: 0; } .map-canvas { flex: 1; position: relative; background: var(--bg-deep); z-index: 1; } .map-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px; color: var(--muted); font-size: 15px; line-height: 1.5; z-index: 500; pointer-events: none; } /* Метка — цена: сразу видно, где дешевле */ .map-pin { display: inline-block; transform: translate(-50%, -100%); background: var(--blue); color: #fff; font-size: 12.5px; font-weight: 800; white-space: nowrap; padding: 5px 10px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(10, 23, 48, .32); } /* ── Карточка вещи на карте ── Шторка снизу во всю ширину, а не узкая полоска. Раньше поверх неё стояла нижняя панель и закрывала почти всё: от карточки был виден уголок фотографии. Теперь панель на время уезжает (.tabbar.tucked). */ .map-card { position: absolute; left: 0; right: 0; bottom: 0; z-index: 600; background: var(--card); color: var(--text); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(10, 23, 48, .26); animation: sheetUp .24s cubic-bezier(.22,.8,.3,1); } /* Полоска-ручка сверху: и знак «это тянется», и кнопка закрытия. Область нажатия шире самой полоски — пальцем в 4 пикселя не попасть. */ .mapcard-grab { display: block; width: 100%; height: 22px; margin: 0 0 6px; border: none; background: none; cursor: pointer; padding: 0; position: relative; } .mapcard-grab::before { content: ""; position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 44px; height: 4px; border-radius: 2px; background: var(--faint); } .mapcard-top { display: flex; align-items: center; gap: 12px; } .mapcard-img { width: 62px; height: 62px; flex: 0 0 auto; border-radius: 12px; overflow: hidden; background: var(--bg-deep); } .mapcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .mapcard-tx { flex: 1; min-width: 0; } .mapcard-price { font-size: 18px; font-weight: 800; letter-spacing: -.4px; } .mapcard-name { font-size: 13.5px; color: var(--text); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mapcard-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; } .mapcard-who { font-size: 13px; color: var(--muted); margin-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mapcard-stars { color: var(--text); font-weight: 700; } .mapcard-dot { margin: 0 5px; color: var(--faint); } .mapcard-open { width: 100%; margin-top: 12px; } /* Стрелка «открыть» в строке списка. Раньше называлась .mapcard-go и жила в карточке на карте, но осталась только в списке магазинов — имя врало о месте. */ .row-go { width: 18px; height: 18px; flex: 0 0 auto; color: var(--faint); } /* ── Поделиться с другом ── Одна кнопка на все экраны. Висит над нижней панелью справа: там её находит большой палец, и она не спорит с содержимым. Уезжает вместе с панелью, когда та прячется. ── Почему жёлтая и со словом ── Была стеклянная, круглая, с одним значком. Владелец открыл своё же приложение и кнопку не нашёл: стекло на светлом фоне сливается, а три кружка с чёрточками ничего не говорят тому, кто не видел их раньше. Кнопка, которую надо искать, — это кнопка, которой не пользуются. Жёлтый — цвет площадки, второго такого на экране нет. Слово снимает вопрос «а что будет, если нажать». */ .share-fab { position: fixed; z-index: 45; right: 16px; bottom: calc(84px + max(env(safe-area-inset-bottom), var(--pad-bottom))); height: 42px; padding: 0 15px 0 9px; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 21px; background: var(--yellow); color: #3D2900; font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: -.2px; white-space: nowrap; box-shadow: 0 8px 20px rgba(255, 200, 30, .34), var(--sh-md); cursor: pointer; /* По вертикали страница листается как обычно, а горизонталь наша: ею человек отодвигает кнопку. Без этого браузер съедает движение вбок раньше, чем до него доходит наш обработчик. */ touch-action: pan-y; transition: transform var(--fast) ease, opacity var(--fast) ease; } .share-fab-ic { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .share-fab-ic, .share-fab-tx { transition: opacity var(--fast) ease; } /* Рукоятка. Говорит пальцу, что кнопку можно взять и отодвинуть, и она же остаётся торчать, когда кнопка уехала за край. */ .share-fab-grip { width: 3px; height: 16px; flex: 0 0 auto; border-radius: 2px; background: rgba(61, 41, 0, .34); } .share-fab:active { transform: scale(.96); } /* Пока палец ведёт кнопку, плавность выключаем: иначе кнопка тянется следом с задержкой и кажется, что её заело. */ .share-fab.dragging { transition: none; } /* Кнопку отодвинули. Уезжает за правый край, но не насовсем: торчит язычок шириной с рукоятку — знак, что она цела и вернётся. */ .share-fab.side { transform: translateX(calc(100% - 16px)); } .share-fab.side .share-fab-tx, .share-fab.side .share-fab-ic { opacity: 0; } /* Язычок узкий, а палец — нет. Расширяем место нажатия влево, не трогая то, как кнопка выглядит. */ .share-fab.side::after { content: ""; position: absolute; top: -6px; bottom: -6px; right: 0; left: -16px; } /* Панель уехала — кнопке над ней тоже делать нечего. */ .tabbar.tucked ~ .share-fab, body:has(.tabbar.tucked) .share-fab { opacity: 0; pointer-events: none; } /* Панель уезжает вниз, пока человек смотрит вещь на карте. Не display:none — иначе она вернётся рывком, без движения. */ .tabbar { transition: transform var(--fast) ease, opacity var(--fast) ease; } .tabbar.tucked { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; } /* ═════════ Магазины ═════════ */ /* Значок «проверенный продавец» */ .shop-ver { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: var(--blue); vertical-align: middle; margin-left: 3px; } .shop-ver svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 3.2; } .shop-ver.small { width: 14px; height: 14px; } .shop-ver.small svg { width: 9px; height: 9px; } /* Метка магазина в карточке ленты */ .card-shop { font-weight: 700; color: var(--blue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-shop svg { fill: currentColor; stroke: none; } /* Витрина: шапка */ .shop-hero { position: relative; min-height: 132px; background: var(--blue); } .shop-hero .icon-btn.round { position: absolute; top: 12px; left: 12px; z-index: 3; } .shop-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; } .shop-head { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 13px; padding: 62px 18px 16px; background: linear-gradient(transparent, rgba(6, 14, 30, .55)); } .shop-logo { width: 62px; height: 62px; flex: 0 0 auto; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; font-weight: 800; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(10, 23, 48, .28); background: var(--blue); } .shop-logo img { width: 100%; height: 100%; object-fit: cover; } .shop-head-tx { min-width: 0; padding-bottom: 4px; } .shop-name { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -.4px; } .shop-name .shop-ver { background: #fff; } .shop-name .shop-ver svg { stroke: var(--blue); } .shop-meta { font-size: 12.5px; color: rgba(255, 255, 255, .88); margin-top: 2px; } /* ═════════ Для бизнеса ═════════ Два пути: бесплатный первым и крупнее — он нужен, чтобы зашли. */ .biz-ways { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 0; } .bizway { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; border: 1px solid var(--field-line); background: var(--card); border-radius: var(--r-xl); padding: 16px; cursor: pointer; font-family: inherit; text-align: left; box-shadow: var(--sh-sm); } .bizway.free { border-color: var(--green); } .bizway:active { transform: scale(.99); } .bw-tag { font-size: 11px; font-weight: 800; color: #fff; background: var(--green); padding: 3px 9px; border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .3px; } .bw-title { font-size: 16px; font-weight: 800; color: var(--text); } .bw-sub { font-size: 13px; line-height: 1.5; color: var(--muted); } .biz-done { text-align: center; padding: 40px 24px; } .biz-done-t { font-size: 18px; font-weight: 800; color: var(--text); } .biz-done-s { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 6px; } /* «Реклама у VENDO» под чужим баннером. Подпись, а не призыв: человек только что увидел, как это выглядит — кому надо, заметит. */ .promo-mine { display: block; margin: 6px auto 0; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--faint); padding: 4px 8px; } .promo-mine:active { opacity: .6; } /* Строка «Для бізнесу» внутри формы витрины — без карточки вокруг. */ .row-btn.plain { margin: 4px 0 12px; } /* Мой профиль: лицо крупно, действия под ним словами. Кружок нажимается сам — туда тянется палец в первую очередь. */ .me-photo { text-align: center; padding: 4px 0 18px; } .me-ava { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; font-size: 38px; font-weight: 800; box-shadow: var(--sh-sm); } .me-ava img { width: 100%; height: 100%; object-fit: cover; } .me-ava:active { transform: scale(.97); } .me-photo-acts { display: flex; gap: 16px; justify-content: center; margin-top: 12px; } .me-lnk { border: none; background: none; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--blue); padding: 4px 2px; } .me-lnk:active { opacity: .6; } /* Сколько знаков осталось. Предел есть на сервере, и человек должен знать о нём заранее, а не после того, как текст молча обрежут. */ /* Своё окно вместо системного prompt: он внутри Telegram выглядит чужеродно, а местами не открывается вовсе. */ #say-input { width: 100%; resize: none; overflow: hidden; min-height: 46px; border: 1px solid var(--field-line); background: var(--field-bg); color: var(--text); font-family: inherit; font-size: 15px; padding: 12px 14px; border-radius: var(--r-xl); } .say-acts { display: flex; gap: 10px; margin-top: 14px; } .say-acts .cta { flex: 1; margin: 0; } .say-stars { display: flex; gap: 6px; margin-bottom: 12px; } .say-star { border: none; background: none; cursor: pointer; padding: 2px 4px; font-size: 30px; line-height: 1; color: var(--field-line); } .say-star.on { color: var(--yellow); } .say-star:active { transform: scale(.9); } .me-count { text-align: right; margin-top: 5px; } .me-count span { font-size: 11.5px; color: var(--faint); } .me-count span.low { color: var(--red); font-weight: 700; } #me-about { resize: none; overflow: hidden; min-height: 46px; } /* Где магазин: строка в настройке витрины */ .shop-place { display: flex; align-items: center; gap: 9px; width: 100%; border: 1px solid var(--field-line); background: var(--field-bg); border-radius: var(--r-xl); padding: 11px 13px; cursor: pointer; font-family: inherit; text-align: left; } .sp-pin { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: var(--muted); stroke-width: 2; } .shop-place.set .sp-pin { stroke: var(--blue); } #sh-place-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shop-place.set #sh-place-name { color: var(--text); } .sp-go { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #fff; background: var(--blue); padding: 6px 12px; border-radius: var(--r-pill); } .shop-place:active { transform: scale(.99); } .field-hint { font-size: 12px; line-height: 1.45; color: var(--faint); margin: 7px 2px 0; } /* Точка магазина на витрине. Карта неподвижна — это картинка, которая по нажатию раскрывается в большую. */ .shop-map { position: relative; margin: 14px 18px 2px; } .shop-map-canvas { height: 150px; border-radius: var(--r-xl); overflow: hidden; background: var(--field-bg); cursor: pointer; } .shop-map-tag { position: absolute; left: 10px; bottom: 10px; z-index: 500; background: var(--card); color: var(--text); box-shadow: var(--sh-sm); font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: var(--r-pill); } .shop-pin { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(10, 23, 48, .3); color: #fff; font-size: 13px; font-weight: 800; overflow: hidden; } .shop-pin img { width: 100%; height: 100%; object-fit: cover; } .shop-pin.ver { border-color: var(--green); } /* Витрина: сведения */ .shop-info { padding: 16px 18px 6px; } .shop-about { font-size: 14px; line-height: 1.5; margin-bottom: 12px; } .shop-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 0; border: none; background: none; font-family: inherit; font-size: 13.5px; color: var(--muted); text-align: left; border-top: 1px solid var(--line); } .shop-row:first-of-type { border-top: none; } .shop-row svg { width: 15px; height: 15px; flex: 0 0 auto; fill: currentColor; stroke: none; } .shop-row.link { color: var(--blue); font-weight: 650; cursor: pointer; } /* Витрина: разделы */ .shop-cats { display: flex; gap: 8px; overflow-x: auto; padding: 10px 18px 12px; scrollbar-width: none; } .shop-cats::-webkit-scrollbar { display: none; } .shop-cat { flex: 0 0 auto; border: none; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; background: var(--card); color: var(--text); box-shadow: var(--sh-sm); } .shop-cat.on { background: var(--blue); color: #fff; } .shop-cat span { opacity: .6; margin-left: 4px; font-weight: 600; } .shop-cat.on span { opacity: .8; } /* Каталог магазинов */ .shops-list { padding: 6px 18px 24px; display: flex; flex-direction: column; gap: 11px; } .shoprow { display: flex; align-items: center; gap: 13px; width: 100%; border: none; border-radius: 16px; padding: 13px 14px; background: var(--card); cursor: pointer; text-align: left; font-family: inherit; color: var(--text); box-shadow: var(--sh-sm); transition: transform .16s cubic-bezier(.22,.8,.3,1); } .shoprow:active { transform: scale(.98); } .shoprow-logo { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 13px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 19px; font-weight: 800; } .shoprow-logo img { width: 100%; height: 100%; object-fit: cover; } .shoprow-tx { flex: 1; min-width: 0; } .shoprow-name { font-size: 15px; font-weight: 750; } .shoprow-meta { font-size: 12px; color: var(--muted); margin-top: 1px; } .shoprow-about { font-size: 12.5px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Кнопка магазина во вкладке «Мои» */ .myshop-btn { display: flex; align-items: center; gap: 11px; width: 100%; border: none; border-radius: 16px; padding: 15px 16px; background: var(--card); cursor: pointer; text-align: left; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--text); box-shadow: var(--sh-sm); transition: transform .16s cubic-bezier(.22,.8,.3,1); } .myshop-btn:active { transform: scale(.98); } .myshop-btn > svg:first-child { width: 21px; height: 21px; color: var(--blue); flex: 0 0 auto; } .myshop-btn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .myshop-go { width: 17px; height: 17px; color: var(--faint); flex: 0 0 auto; } /* Карточка продавца стала кнопкой, когда это магазин */ .sellerbox.link { cursor: pointer; width: calc(100% - 36px); font-family: inherit; text-align: left; } .sb-name { display: flex; align-items: center; gap: 3px; } .sb-go { font-size: 11.5px; color: var(--blue); font-weight: 700; margin-top: 3px; } /* Логотип и обложка в форме магазина */ .shop-imgs { display: flex; gap: 11px; margin-bottom: 4px; } .shop-img-btn { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 7px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 650; color: var(--muted); } .shop-img-btn.wide { flex: 1; } .shop-img-prev { display: flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 16px; background: var(--field); border: 1.5px dashed rgba(124, 134, 152, .38); overflow: hidden; } .shop-img-prev.wide { width: 100%; height: 66px; } .shop-img-prev img { width: 100%; height: 100%; object-fit: cover; } .perks-banner.shops { background: linear-gradient(120deg, #DCE9FF, #9CC4FF); color: #10305E; box-shadow: 0 6px 18px rgba(12, 112, 228, .22); } /* ═════════ Скидки партнёров ═════════ */ .perks-banner { display: flex; align-items: center; gap: 12px; width: 100%; border: none; border-radius: 16px; padding: 15px 16px; cursor: pointer; font-family: inherit; text-align: left; color: #5A4200; background: linear-gradient(120deg, #FFE9A8, #FFC81E); box-shadow: 0 6px 18px rgba(255, 200, 30, .30); transition: transform .16s cubic-bezier(.22,.8,.3,1); } .perks-banner:active { transform: scale(.98); } .perks-banner-tx { flex: 1; min-width: 0; } .perks-banner-title { font-size: 15.5px; font-weight: 800; letter-spacing: -.3px; } .perks-banner-sub { font-size: 12.5px; opacity: .78; margin-top: 2px; } .perks-banner svg { width: 18px; height: 18px; flex: 0 0 auto; } .perks-note { padding: 0 18px; margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--muted); } .perks-list { padding: 0 18px 24px; display: flex; flex-direction: column; gap: 14px; } .perk { background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: var(--sh-sm); } .perk-head { height: 68px; display: flex; align-items: center; padding: 0 16px; position: relative; color: #fff; } .perk-head img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; } .perk-company { position: relative; font-size: 16px; font-weight: 800; letter-spacing: -.3px; } .perk-body { padding: 14px 16px 16px; } .perk-title { font-size: 15.5px; font-weight: 750; } .perk-terms { font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 5px; } .perk-addr { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); margin-top: 7px; } .perk-addr svg { width: 13px; height: 13px; fill: currentColor; stroke: none; } .perk-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 13px; border: 1.5px dashed var(--blue); border-radius: 12px; padding: 11px 14px; cursor: pointer; background: rgba(12, 112, 228, .06); font-family: inherit; transition: transform .16s cubic-bezier(.22,.8,.3,1); } .perk-code:active { transform: scale(.97); } .perk-code-label { font-size: 12px; color: var(--muted); font-weight: 600; } .perk-code-val { font-size: 16px; font-weight: 800; letter-spacing: 1px; color: var(--blue); } .perk-link { display: block; text-align: center; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--blue); text-decoration: none; } /* ═════════ Переписка ═════════ */ /* Кружок непрочитанных на вкладке */ .tab { position: relative; } .badge { position: absolute; top: 2px; left: 50%; margin-left: 6px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center; } /* Список разговоров */ .chats-list { padding: 6px 0 12px; } .chatrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 18px; border: none; background: none; cursor: pointer; text-align: left; font-family: inherit; color: var(--text); } .chatrow:active { background: var(--field); } .chatrow-img { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 13px; overflow: hidden; background: var(--bg-deep); } .chatrow-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .chatrow-tx { flex: 1; min-width: 0; } .chatrow-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .chatrow-name { font-size: 15px; font-weight: 750; } .chatrow-time { font-size: 11.5px; color: var(--muted); flex: 0 0 auto; } .chatrow-title { font-size: 12px; color: var(--blue); font-weight: 600; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chatrow-last { font-size: 13px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chatrow.unread .chatrow-last { color: var(--text); font-weight: 600; } .chatrow-badge { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 11.5px; font-weight: 800; line-height: 20px; text-align: center; } /* Экран переписки: шапка сверху, поле ввода снизу, лента между ними */ .screen-chat.active { display: flex; flex-direction: column; height: 100dvh; } body:has(.screen-chat.active) { padding-bottom: 0; } .chat-bar { display: flex; align-items: center; gap: 8px; padding: calc(10px + var(--pad-top)) 12px 10px; border-bottom: 1px solid var(--line); flex: 0 0 auto; background: var(--glass-bar); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .chat-bar { -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .chat-bar { background: var(--bg); } } .chat-item { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; border: none; background: none; cursor: pointer; font-family: inherit; color: var(--text); text-align: left; padding: 0; } .chat-item img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; } .chat-item-tx { min-width: 0; } .chat-item-name { font-size: 14.5px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-item-price { font-size: 12.5px; color: var(--muted); } .chat-warn { flex: 0 0 auto; margin: 10px 14px 0; padding: 10px 13px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; background: rgba(245, 158, 11, .13); color: #B45309; font-weight: 600; } .chat-body { flex: 1; overflow-y: auto; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 8px; -webkit-overflow-scrolling: touch; } .msg { max-width: 78%; align-self: flex-start; background: var(--card); border-radius: 16px 16px 16px 5px; padding: 9px 13px 7px; box-shadow: var(--sh-sm); } .msg.mine { align-self: flex-end; background: var(--blue); color: #fff; border-radius: 16px 16px 5px 16px; box-shadow: 0 3px 12px rgba(12,112,228,.22); } .msg-tx { font-size: 14.5px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; } .msg-time { font-size: 10.5px; opacity: .6; text-align: right; margin-top: 3px; } /* Полоса ввода стеклянная: переписка проступает под ней при прокрутке */ .chat-send { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 9px; padding: 10px 14px calc(10px + max(env(safe-area-inset-bottom), var(--pad-bottom))); border-top: 1px solid var(--line); background: var(--glass-bar); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .chat-send { -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .chat-send { background: var(--bg); } } .chat-send textarea { flex: 1; resize: none; border: none; border-radius: 18px; padding: 11px 15px; font-family: inherit; font-size: 15px; background: var(--card); color: var(--text); max-height: 120px; line-height: 1.35; } .chat-send textarea:focus { outline: 2px solid rgba(12,112,228,.28); } .chat-go { flex: 0 0 auto; width: 42px; height: 42px; border: none; border-radius: 50%; background: var(--blue); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-blue); transition: transform .16s cubic-bezier(.22,.8,.3,1); } .chat-go:active { transform: scale(.92); } .chat-go:disabled { opacity: .5; } .chat-go svg { width: 19px; height: 19px; fill: #fff; stroke: none; margin-left: -2px; } /* ═════════ Статистика объявления (видит только автор) ═════════ */ .stats { background: none; border-radius: 0; padding: 18px 0; margin: 0 0 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stats-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .stats-head h3 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.3px; } .stats-days { font-size: 12px; color: var(--muted); } .snums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 16px; } .snum { background: var(--field); border-radius: 13px; padding: 12px 10px; text-align: center; } .snum.hot { background: rgba(16, 185, 129, .13); } .snum b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.6px; line-height: 1.1; } .snum.hot b { color: #047857; } .snum span { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.25; } .schart { margin-bottom: 14px; } .schart-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 9px; } .schart-head b { color: var(--text); font-size: 14px; } .schart-head .up { color: #047857; font-weight: 800; font-size: 12.5px; } .schart-head .down { color: #B45309; font-weight: 800; font-size: 12.5px; } .sbars { display: flex; align-items: flex-end; gap: 4px; height: 54px; } .sbar { flex: 1; height: 100%; display: flex; align-items: flex-end; } .sbar-fill { width: 100%; border-radius: 4px 4px 2px 2px; background: rgba(12, 112, 228, .30); transition: height .3s cubic-bezier(.22,.8,.3,1); } .sbar.today .sbar-fill { background: var(--blue); } .sline { font-size: 13px; color: var(--muted); padding: 9px 0; border-top: 1px solid var(--line); } .sline b { color: var(--text); font-size: 14px; } .sline .muted { font-size: 11.5px; margin-left: 5px; } .stips { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .stip { font-size: 13px; line-height: 1.45; font-weight: 600; background: rgba(255, 200, 30, .16); color: #8A5A00; border-radius: 12px; padding: 11px 13px; } /* ═════════ Рекламное место внутри карточки ═════════ */ .itemad-slot { margin: 0 18px 22px; } .itemad-label { font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); margin: 0 2px 6px; } .itemad { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border: none; border-radius: 18px; color: #fff; cursor: pointer; font-family: inherit; text-align: left; box-shadow: 0 10px 26px rgba(12, 112, 228, .20); transition: transform .16s cubic-bezier(.22,.8,.3,1); } .itemad:active { transform: scale(.98); } .itemad-img { flex: 0 0 auto; width: 62px; height: 62px; border-radius: 13px; overflow: hidden; background: rgba(255,255,255,.18); } .itemad-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .itemad-tx { flex: 1; min-width: 0; } .itemad-title { font-size: 15.5px; font-weight: 800; letter-spacing: -.3px; } .itemad-sub { font-size: 12.5px; opacity: .88; line-height: 1.4; margin-top: 3px; } .itemad-btn-in { flex: 0 0 auto; border-radius: 12px; padding: 10px 14px; font-size: 13px; font-weight: 800; background: var(--card); color: var(--text); white-space: nowrap; } /* Кнопок связи стало больше — переносим на две строки */ .msgr.wrap { flex-wrap: wrap; } .msgr.wrap .msgr-btn { flex: 1 1 calc(50% - 4px); } .msgr-btn.tgm .msgr-ic { background: #2AABEE; } /* ═════════ Окно «Поставить VENDO на экран» ═════════ */ .sheet { position: fixed; inset: 0; z-index: 200; } .sheet.hidden { display: none; } .sheet-back { position: absolute; inset: 0; background: rgba(6, 14, 30, .5); animation: fadeIn .2s ease; } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } .sheet-body { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto; background: var(--card); color: var(--text); border-radius: 26px 26px 0 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); animation: sheetUp .3s cubic-bezier(.22,.8,.3,1); } @keyframes sheetUp { from { transform: translateY(100%) } to { transform: none } } .sheet-grip { width: 40px; height: 4px; border-radius: 999px; background: var(--line); margin: 0 auto 16px; } .sheet-title { margin: 0 0 6px; font-size: 21px; font-weight: 800; letter-spacing: -.4px; } .sheet-sub { margin: 0 0 18px; font-size: 14px; line-height: 1.45; color: var(--muted); } .pin-steps { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; } .pin-step { display: flex; gap: 14px; align-items: center; } .pin-step img { width: 116px; flex: 0 0 auto; border-radius: 14px; background: var(--field); } .pin-step-n { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; background: var(--blue); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .pin-step-tx { font-size: 14.5px; line-height: 1.4; font-weight: 600; } .pin-step-tx b { color: var(--blue); } .btn-primary { width: 100%; border: none; border-radius: 15px; padding: 16px; font-family: inherit; font-size: 16px; font-weight: 800; background: var(--blue); color: #fff; cursor: pointer; box-shadow: var(--sh-blue); transition: transform .16s cubic-bezier(.22,.8,.3,1); } .btn-primary:active { transform: scale(.975); } .btn-ghost { width: 100%; border: none; background: none; cursor: pointer; padding: 14px; margin-top: 4px; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--muted); } /* уважаем системную настройку «уменьшить движение» */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ═══════════════════════════════════════════════════════════════ РАЗНЫЕ ТЕЛЕФОНЫ ─────────────────────────────────────────────────────────────── Поля были заданы в твёрдых пикселях под телефон средней ширины. На узком экране от карточек оставались полоски, на широком — лента растягивалась во всю стену. Здесь мы это выравниваем. ═══════════════════════════════════════════════════════════════ */ /* Узкие телефоны: iPhone SE, простые Android — 320–370 точек */ @media (max-width: 370px) { :root { --t-hero: 27px; --t-price-big: 29px; --t-price: 19px; --t-title: 17.5px; --r-xl: 24px; --r-lg: 20px; } .tophead, .hero, .sec, .searchrow, .livebar, .intents, .sortbar, .strip-row, .shop-cats, .gal-thumbs { padding-left: 15px; padding-right: 15px; } .pinbar-wrap { margin-left: 13px; margin-right: 13px; } .feed { gap: 18px 11px; padding-left: 15px; padding-right: 15px; } .intents { gap: 9px; } .intent { padding: 13px 13px 14px; min-height: 104px; } .mini-cards, .cat-grid { gap: 9px; } .searchbox { height: 50px; padding: 0 13px; } .tabbar { left: 10px; right: 10px; } } /* Совсем узкие (320 точек): намерения становятся друг под другом, иначе в узкую половинку не влезает даже слово «Продаю». */ @media (max-width: 335px) { .intents { grid-template-columns: 1fr; } .intent { min-height: 0; flex-direction: row; align-items: center; gap: 12px; } .intent-tx { margin-top: 0; } } /* Планшет и Telegram на компьютере. Тянуть ленту на всю стену нельзя: строка становится нечитаемо длинной, а карточки — с человека ростом. Держим колонку телефонной ширины по центру, как это делают все Mini App. */ @media (min-width: 620px) { .screen { max-width: 560px; margin-left: auto; margin-right: auto; } .tabbar { left: 50%; right: auto; width: min(532px, calc(100% - 28px)); margin-left: calc(min(532px, 100% - 28px) / -2); } .sheet, .modal-card { max-width: 560px; margin-left: auto; margin-right: auto; } } /* ═══════════════════════════════════════════════════════════════ ПОТЯНУТЬ ВНИЗ — ОБНОВИТЬ ─────────────────────────────────────────────────────────────── Кружок висит над самым верхом экрана и выезжает вместе с пальцем. Пока тянут — он поворачивается следом за движением: человек видит, что жест поймали, ещё до того как отпустил. Дотянул до края — кружок наливается цветом, и это единственный знак, что можно отпускать. Слова тут не нужны. ═══════════════════════════════════════════════════════════════ */ .ptr { position: fixed; top: calc(-46px + var(--pad-top)); left: 0; right: 0; z-index: 60; display: flex; justify-content: center; opacity: 0; pointer-events: none; } .ptr.back { transition: transform .26s var(--ease), opacity .26s var(--ease); } .ptr-circle { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--sh-md); color: var(--muted); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .ptr-circle { -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); } } .ptr-circle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; } /* дотянул — можно отпускать */ .ptr.ready .ptr-circle { color: var(--blue); border-color: var(--blue); } /* отпустил — крутится, пока идёт обновление */ .ptr.spin .ptr-circle { animation: ptrSpin .7s linear infinite; color: var(--blue); border-color: var(--blue); } @keyframes ptrSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ptr.spin .ptr-circle { animation: none; } } /* ═══════════════════════════════════════════════════════════════ ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА НА КАЖДОЙ СТРАНИЦЕ ─────────────────────────────────────────────────────────────── Раньше язык менялся только в «Ще → Мова». Человек заходил украинским, доходил до формы объявления и понимал, что писать ему удобнее по-русски, — а переключатель за три экрана отсюда. Теперь он в углу любой страницы. Нарочно маленький и приглушённый: это не действие, ради которого открывают приложение. Нужен — найдёшь, не нужен — не мешает. ═══════════════════════════════════════════════════════════════ */ /* Заголовок забирает всё свободное место, поэтому всё, что стоит после него, прижимается вправо в том порядке, в каком написано. */ .bar > .bar-title { margin-right: auto; } .lang-pill { flex: 0 0 auto; display: flex; align-items: center; padding: 0; border: 1px solid var(--glass-line); background: var(--glass); border-radius: var(--r-pill); overflow: hidden; cursor: pointer; font-family: inherit; height: 27px; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .lang-pill { -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); } } .lang-pill span { padding: 0 9px; line-height: 25px; font-size: 11.5px; font-weight: 800; letter-spacing: .4px; color: var(--muted); transition: color var(--fast) var(--ease), background var(--fast) var(--ease); } .lang-pill span.on { color: #fff; background: var(--blue); } .lang-pill:active { transform: scale(.94); } /* В шапке главной и на плавающей панели карточки товара фон другой, поэтому там переключатель делаем чуть плотнее — иначе на фотографии он растворяется. */ .bar-float .lang-pill, .tophead .lang-pill { background: rgba(10, 23, 48, .42); border-color: rgba(255, 255, 255, .18); } .bar-float .lang-pill span, .tophead .lang-pill span { color: rgba(255, 255, 255, .72); } html[data-theme="light"] .tophead .lang-pill { background: var(--glass); border-color: var(--glass-line); } html[data-theme="light"] .tophead .lang-pill span { color: var(--muted); } html[data-theme="light"] .tophead .lang-pill span.on { color: #fff; } /* На узком телефоне место в шапке дорогое */ @media (max-width: 370px) { .lang-pill span { padding: 0 7px; font-size: 11px; } } /* ═══════════════════════════════════════════════════════════════ ПРЕДЛОЖЕНИЕ С БРОНЬЮ ─────────────────────────────────────────────────────────────── Это реклама, и она не притворяется объявлением: свой цвет, своя форма, слово «Реклама» сверху. Выдавать рекламу за содержимое — короткий путь к тому, что человек перестанет верить всей ленте. Но и прятаться ей незачем: предложение настоящее, кнопка ведёт к настоящему заказу. Поэтому блок сделан красивым, а не пугливым. ═══════════════════════════════════════════════════════════════ */ .promo-slot { padding: 0 22px; margin: 18px 0 4px; } /* Раскладка сверху вниз, а не в два столбца. Столбцами было плохо: картинка съедала треть ширины, текст сжимался до двух слов в строку, а цена с кнопкой не помещались в один ряд — кнопка уезжала за край. Сверху вниз этого случиться не может: у каждой части своя строка на всю ширину. */ .promo2 { display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-md); color: #fff; } /* Картинка широкой полосой сверху. 1200×628 — размер, под который дизайнеры делают рекламу для соцсетей: он у них уже в заготовках. */ .promo2-art { position: relative; width: 100%; aspect-ratio: 1200 / 628; background: rgba(0, 0, 0, .16); overflow: hidden; } /* Готовый баннер: картинка и есть весь блок. */ .promo2.ready { background: var(--bg-deep); padding: 0 0 12px; } .promo2.ready .promo2-btn { width: calc(100% - 24px); margin: 12px 12px 0; } .promo2-label.over { position: absolute; top: 9px; left: 9px; background: rgba(10, 23, 48, .55); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .promo2-img { width: 100%; height: 100%; object-fit: cover; display: block; } .promo2-tx { padding: 13px 16px 15px; display: flex; flex-direction: column; gap: 3px; } .promo2-top { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; } .promo2-label { flex: 0 0 auto; font-size: 9.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .95); } .promo2-company { min-width: 0; font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .82); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .promo2-title { font-size: 17px; font-weight: 850; letter-spacing: -.35px; line-height: 1.22; overflow-wrap: anywhere; } .promo2-sub { font-size: 13px; line-height: 1.38; color: rgba(255, 255, 255, .86); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .promo2-price { font-size: 18px; font-weight: 850; letter-spacing: -.3px; margin-top: 9px; overflow-wrap: anywhere; } .promo2-price em { font-style: normal; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .72); } /* Кнопка своей строкой во всю ширину. Тогда ей некуда уехать, и палец попадает по ней не целясь. */ /* Кнопка бывает и ссылкой — чтобы телефон умел по ней звонить. Выглядеть при этом она должна одинаково. */ .promo2-btn { display: block; width: 100%; text-align: center; text-decoration: none; margin-top: 11px; border: none; cursor: pointer; font-family: inherit; padding: 12px 16px; border-radius: var(--r-pill); background: #fff; color: #16202F; font-size: 14.5px; font-weight: 800; letter-spacing: -.1px; box-shadow: 0 3px 12px rgba(0, 0, 0, .18); transition: transform var(--fast) var(--ease); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .promo2-btn:active { transform: scale(.97); } @media (max-width: 370px) { .promo-slot { padding: 0 15px; } .promo2-tx { padding: 12px 13px 13px; } .promo2-title { font-size: 15.5px; } .promo2-price { font-size: 16.5px; } .promo2-btn { padding: 11px 14px; font-size: 13.5px; } } /* ── Бланк брони ── */ /* Четыре вопроса и кнопка. Каждое лишнее поле — это люди, которые закрыли окно, не дойдя до конца. */ .bk { display: flex; flex-direction: column; gap: 13px; } .bk-co { font-size: 12.5px; color: var(--muted); margin-top: -6px; } .bk-f { display: flex; flex-direction: column; gap: 6px; } .bk-f > span { font-size: 12.5px; font-weight: 700; color: var(--text-2); } .bk-f input, .bk-f select { width: 100%; height: 46px; padding: 0 13px; border-radius: var(--r-md); border: 1px solid var(--field-line); background: var(--field); color: var(--text); font-family: inherit; font-size: 15px; -webkit-appearance: none; appearance: none; } .bk-f select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 17px; padding-right: 34px; } .bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .bk-qty { display: flex; align-items: center; gap: 12px; } .bk-qty button { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--field-line); background: var(--field); color: var(--text); font-size: 21px; line-height: 1; cursor: pointer; font-family: inherit; } .bk-qty button:active { transform: scale(.92); } .bk-qty b { font-size: 19px; font-weight: 850; min-width: 26px; text-align: center; } .bk-sum { margin-left: auto; font-size: 17px; font-weight: 850; color: var(--blue); } .bk-fine { font-size: 11.5px; line-height: 1.4; color: var(--muted); margin: -4px 0 0; text-align: center; } .bk-done { text-align: center; display: flex; flex-direction: column; gap: 15px; align-items: center; } .bk-done-ic { width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(16, 185, 129, .14); color: var(--green); } .bk-done-ic svg { width: 32px; height: 32px; } .bk-done p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.45; } .bk-done .btn-primary { width: 100%; } /* Телефон в тексте рекламы — по нему звонят, значит он ссылка. */ .promo2-tel { color: #fff; text-decoration: underline; text-underline-offset: 2px; } /* Номер крупно — запасной путь, когда Telegram не пропустил звонок сам. */ .phone-big { display: block; text-align: center; font-size: 26px; font-weight: 850; letter-spacing: -.5px; color: var(--blue); text-decoration: none; padding: 14px 10px; border-radius: var(--r-lg); background: var(--field); border: 1px solid var(--field-line); } .phone-big:active { transform: scale(.98); }