/* ═══════════════════════════════════════════════════════════════ ЦВЕТА И РАЗМЕРЫ 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; /* Стекло: панель размывает то, что под ней */ --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); --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; } html, body { overscroll-behavior-y: contain; } 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: 104px; -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; padding: 14px 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; } /* ═════════ Намерения: бенто ═════════ Широкий блок и узкий рядом. Разный размер сам расставляет приоритет: сначала глаз идёт к покупке, потом к продаже. */ .intents { display: grid; grid-template-columns: 1.55fr 1fr; gap: 11px; padding: 0 22px; } .intent { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 118px; border-radius: var(--r-lg); padding: 15px 16px 16px; cursor: pointer; text-align: left; 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-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; width: 100%; margin-top: auto; position: relative; z-index: 1; } .intent-title { font-size: 17px; font-weight: 800; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .intent-sub { font-size: var(--t-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ═════════ «Віддаю даром»: низкая широкая полоса ═════════ */ .freebar { 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; } .freebar-ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--green); color: #fff; box-shadow: 0 8px 20px rgba(16,185,129,.30); position: relative; z-index: 1; } .freebar-ic svg { width: 19px; height: 19px; stroke-width: 2.4; } .freebar-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; } .freebar-title { font-size: 16px; font-weight: 800; letter-spacing: -.3px; } .freebar-sub { font-size: var(--t-small); color: var(--muted); } .freebar-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; padding: 16px 22px 0; font-size: var(--t-small); } .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; } .live-all { color: var(--blue); font-weight: 700; flex: 0 0 auto; } /* ═════════ Секции ═════════ */ .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-badge { display: inline-block; margin-bottom: 7px; font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); } .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; } } /* ═════════ Геолокация ═════════ */ .geo { display: flex; align-items: center; gap: 13px; background: var(--card); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--sh-sm); } .geo-pin { width: 44px; height: 44px; border-radius: 14px; flex: 0 0 auto; background: rgba(12,112,228,.10); color: var(--blue); display: flex; align-items: center; justify-content: center; } .geo-pin svg { width: 22px; height: 22px; } .geo-txt { min-width: 0; } .geo-title { font-size: 14.5px; font-weight: 750; } .geo-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; } /* ═════════ Экран подкатегорий ═════════ */ .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: 13px 16px; 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: 14px 16px; -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; } .icon-btn.round { background: rgba(255,255,255,.22); color: #fff; border-radius: 50%; } /* ═════════ Лента объявлений ═════════ */ /* ═════════ Лента ═════════ Первая карточка — во всю ширину и крупная, остальные парами. Взгляду есть за что зацепиться, и это сразу читается как продукт, а не как таблица. */ .feed { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 22px 22px; } #list-feed, #mine-list, #mod-list, #home-feed { padding-top: 14px; } /* ── Бенто-лента ── Первое объявление занимает высокий блок слева, следующие два — маленькие справа. Дальше идёт обычная сетка. Разный размер держит взгляд: одинаковые плитки листают не глядя. */ .feed.bento { grid-auto-rows: auto; } .feed.bento .card:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; } .feed.bento .card:nth-child(1) .card-img { height: 100%; aspect-ratio: auto; min-height: 268px; } .feed.bento .card:nth-child(2) { grid-column: 2; grid-row: 1; } .feed.bento .card:nth-child(3) { grid-column: 2; grid-row: 2; } .feed.bento .card:nth-child(2) .card-img, .feed.bento .card:nth-child(3) .card-img { aspect-ratio: 1/1.06; } .feed.bento .card:nth-child(1) .card-price { font-size: var(--t-price); } .feed.bento .card:nth-child(1) .card-name { -webkit-line-clamp: 2; font-size: 13px; } /* У маленьких плиток на плашке только цена и расстояние — название там всё равно не прочитать. */ .feed.bento .card:nth-child(2) .card-name, .feed.bento .card:nth-child(3) .card-name, .feed.bento .card:nth-child(2) .card-attrs, .feed.bento .card:nth-child(3) .card-attrs, .feed.bento .card:nth-child(2) .rate, .feed.bento .card:nth-child(3) .rate { display: none; } /* В списке результатов первое объявление по-прежнему во всю ширину */ #list-feed .card:first-child { grid-column: 1 / -1; } #list-feed .card:first-child .card-img { aspect-ratio: 16/10; } .card { position: relative; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; background: var(--bg-deep); transition: transform var(--fast) var(--ease); animation: cardIn .32s var(--ease) backwards; } .card:active { transform: scale(.97); } /* Затемнение к низу фотографии. Без него белый текст на плашке пропадает на светлых снимках — а половина вещей снята при дневном свете. */ .card-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; pointer-events: none; background: linear-gradient(180deg, rgba(6, 10, 20, 0), rgba(6, 10, 20, .58)); } .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 { position: absolute; left: 8px; right: 8px; bottom: 8px; border-radius: 14px; padding: 9px 12px 10px; background: var(--over); border: 1px solid var(--over-line); color: #fff; /* Цену должно быть видно даже на белом холодильнике */ text-shadow: 0 1px 2px rgba(0, 0, 0, .30); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .card-body { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } } .card-price { font-size: 16px; font-weight: 900; letter-spacing: -.4px; color: #fff; } #list-feed .card:first-child .card-price { font-size: var(--t-price); } .card-name { font-size: 12px; margin-top: 2px; line-height: 1.3; color: rgba(255,255,255,.82); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } #list-feed .card:first-child .card-name { -webkit-line-clamp: 2; font-size: 13px; } .card-sub { font-size: 11px; color: rgba(255,255,255,.68); margin-top: 3px; display: flex; align-items: center; gap: 4px; } .card-sub svg { width: 11px; height: 11px; flex: 0 0 auto; } .card-attrs { color: rgba(255,255,255,.7) !important; } .card-shop { color: #fff !important; } .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); } .gal-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 18px 2px; scrollbar-width: none; } .gal-thumbs::-webkit-scrollbar { display: none; } .gal-thumb { position: relative; flex: 0 0 auto; width: 58px; height: 58px; 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 32px; display: flex; flex-direction: column; gap: 17px; } .field { display: flex; flex-direction: column; gap: 8px; } .field > label { font-size: 13px; font-weight: 700; color: var(--muted); } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } input, select, textarea { font-family: inherit; font-size: 16px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--text); outline: none; width: 100%; transition: border-color .15s ease, box-shadow .15s ease; } input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(12,112,228,.12); } textarea { resize: vertical; line-height: 1.45; } .error { color: var(--red); font-size: 14px; text-align: center; } /* ═════════ Фото ═════════ */ .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 + env(safe-area-inset-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-media { position: relative; height: 100%; } .card { display: flex; flex-direction: column; } .feed.bento .card:nth-child(1) .card-media { flex: 1; } .badge-video { position: absolute; left: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(10,23,48,.62); color: #fff; display: flex; align-items: center; justify-content: center; } .badge-video svg { width: 13px; height: 13px; } .fav-btn { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.9); color: #B8C0CE; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(17,24,39,.12); transition: transform .16s cubic-bezier(.22,.8,.3,1), color .16s ease; } .fav-btn svg { width: 16px; height: 16px; } .fav-btn.on { color: var(--red); } .fav-btn:active { transform: scale(.85); } .card-sub .dist { color: var(--blue); font-weight: 700; } .rate { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: #B8860B; margin-top: 6px; } .rate svg { width: 12px; height: 12px; } /* ═════════ Сортировка ═════════ */ .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; } #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; } /* Помощник заполнил поля — человек должен это заметить и проверить. */ .ai-note { 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; } /* ═════════ Геокарточка ═════════ */ .geo { cursor: pointer; transition: border-color .16s ease; border: 1px solid transparent; } .geo.geo-on { border-color: var(--blue); } .geo-arw { width: 17px; height: 17px; color: var(--muted); flex: 0 0 auto; margin-left: auto; } /* ═════════ Сохранённые поиски ═════════ */ .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; } /* ═════════ Рекламный баннер ═════════ */ .promo-badge { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; background: rgba(255,255,255,.22); padding: 5px 12px; border-radius: 999px; margin-bottom: 9px; } #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 { font-size: 12px; color: var(--muted); margin-top: 3px; 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); } .map-card { position: absolute; left: 14px; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; z-index: 600; background: var(--card); color: var(--text); border-radius: var(--r-md); padding: 10px 12px; cursor: pointer; box-shadow: 0 10px 30px rgba(10, 23, 48, .26); animation: sheetUp .24s cubic-bezier(.22,.8,.3,1); } .mapcard-img { width: 54px; height: 54px; 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: 16px; font-weight: 800; letter-spacing: -.4px; } .mapcard-name { font-size: 13px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mapcard-go { width: 18px; height: 18px; flex: 0 0 auto; color: var(--faint); } /* ═════════ Магазины ═════════ */ /* Значок «проверенный продавец» */ .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 { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--blue); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-shop svg { width: 12px; height: 12px; fill: currentColor; stroke: none; flex: 0 0 auto; } /* Витрина: шапка */ .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; } /* Витрина: сведения */ .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: 10px 12px; 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 + env(safe-area-inset-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; } }