/* ============================================================ sravnilka-online.ru — main stylesheet ============================================================ */ /* Параметры фонового перелива задаёт регулятор в админке (admin/background.php) → /bg.php. Должен идти первым (правило @import). Если /bg.php недоступен — берутся дефолты из var(). */ @import url("/bg.php"); :root { --blue: #7C3AED; --blue-h: #6D28D9; --blue-dark: #5B21B6; --blue-bg: #F5F3FF; --orange: #F59E0B; --orange-h: #D97706; --orange-bg: #FFFBEB; --green: #16a34a; --green-bg: #f0fdf4; --red: #dc2626; --red-bg: #fef2f2; --bg: #f1f5f9; --bg2: #f8fafc; --white: #ffffff; --text: #0f172a; --text2: #334155; --muted: #64748b; --light: #94a3b8; --border: #e2e8f0; --border-l: #f1f5f9; --sh-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); --sh: 0 4px 12px rgba(15,23,42,.08); --sh-md: 0 8px 24px rgba(15,23,42,.10); --sh-lg: 0 20px 48px rgba(15,23,42,.14); --r-xs: 5px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px; --ease: cubic-bezier(.4,0,.2,1); --dur: .18s; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; } /* ── Еле заметный переливающийся фон: фиолетовый ↔ янтарный. Анимируется ТОЛЬКО opacity (композитится на GPU, без перерисовки) — не грузит систему. На всех страницах, КРОМЕ админки: её помечен favicon-admin, ловим через :has(). ── */ body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; } body::before { /* фиолетовый, сверху-слева */ background: radial-gradient(185% 185% at 16% 6%, rgba(var(--bg-rgb-a, 124,58,237), var(--bg-alpha, 0.22)) 0%, transparent 82%); animation: bgTintPurple var(--bg-speed, 12s) ease-in-out infinite; } body::after { /* янтарный, снизу-справа */ background: radial-gradient(185% 185% at 84% 94%, rgba(var(--bg-rgb-b, 236,168,48), var(--bg-alpha, 0.24)) 0%, transparent 82%); animation: bgTintAmber var(--bg-speed, 12s) ease-in-out infinite; } /* Плавный перелив: оба цвета всегда на месте, мягко меняется лишь баланс — резких переходов не видно */ @keyframes bgTintPurple { 0%, 100% { opacity: 0.7; } 50% { opacity: 0.42; } } @keyframes bgTintAmber { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.7; } } /* Админку не трогаем */ html:has(link[href*="favicon-admin"]) body::before, html:has(link[href*="favicon-admin"]) body::after { display: none; } /* Уважаем системную настройку «меньше движения» */ @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; opacity: 0.45; } } a { color: inherit; text-decoration: none; } /* ── Виджет города (шапка): чип, тултип подтверждения, модалка выбора ── */ .city-chip { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border:1px solid #e1e6ec; background:#fff; border-radius:20px; cursor:pointer; font-size:13px; font-family:inherit; color:#1a2233; transition:border-color .15s; max-width:180px; } .city-chip:hover { border-color:#7C3AED; color:#7C3AED; } .city-chip svg { flex-shrink:0; color:#7C3AED; } .city-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .city-tip { position:absolute; top:64px; right:16px; z-index:950; background:#fff; border:1px solid #e1e6ec; border-radius:10px; padding:14px 16px; box-shadow:0 8px 30px rgba(0,0,0,.14); width:250px; } .city-tip::before { content:""; position:absolute; top:-6px; right:38px; width:10px; height:10px; background:#fff; border-left:1px solid #e1e6ec; border-top:1px solid #e1e6ec; transform:rotate(45deg); } .city-tip-text { font-size:13.5px; margin-bottom:10px; } .city-tip-btns { display:flex; gap:8px; } .city-tip-yes { flex:1; padding:7px 10px; border:none; border-radius:7px; background:#7C3AED; color:#fff; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; } .city-tip-yes:hover { background:#6D28D9; } .city-tip-no { flex:1; padding:7px 10px; border:1px solid #e1e6ec; border-radius:7px; background:#fff; color:#4a5568; font-size:12.5px; cursor:pointer; font-family:inherit; } .city-tip-no:hover { border-color:#c5d0da; } .city-modal { position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:1200; display:none; align-items:flex-start; justify-content:center; padding:8vh 16px 16px; } .city-modal.open { display:flex; } .city-modal-box { background:#fff; border-radius:14px; width:100%; max-width:440px; padding:22px 24px; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.25); max-height:80vh; overflow-y:auto; } .city-modal-x { position:absolute; top:12px; right:14px; background:none; border:none; font-size:18px; color:#9aa5b4; cursor:pointer; } .city-modal-box h3 { margin:0 0 14px; font-size:17px; } .city-search { width:100%; box-sizing:border-box; padding:10px 14px; border:1.5px solid #e1e6ec; border-radius:9px; font-size:14px; font-family:inherit; } .city-search:focus { outline:none; border-color:#7C3AED; } .city-results { margin-top:8px; } .city-res-item { display:flex; justify-content:space-between; align-items:baseline; gap:10px; width:100%; padding:9px 12px; border:none; background:none; border-radius:7px; cursor:pointer; font-size:14px; font-family:inherit; text-align:left; color:#1a2233; } .city-res-item:hover { background:#f5f3ff; } .city-res-item small { color:#9aa5b4; font-size:12px; flex-shrink:0; } .city-res-empty { padding:12px; font-size:13px; color:#9aa5b4; } .city-popular-title { font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:#9aa5b4; font-weight:700; margin:16px 0 8px; } .city-popular-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; } .city-pop-item { padding:7px 10px; border:none; background:none; border-radius:7px; cursor:pointer; font-size:13px; font-family:inherit; text-align:left; color:#374151; } .city-pop-item:hover { background:#f5f3ff; color:#7C3AED; } @media (max-width:760px) { .city-chip span { max-width:74px; } .city-popular-grid { grid-template-columns:1fr 1fr; } .city-tip { right:8px; left:8px; width:auto; } } /* ── Самовывоз на карточке товара ── */ .pp-pickup { margin:18px 20px 20px; border:1px solid #e5eaf0; border-radius:12px; overflow:hidden; } .pp-pickup-head { display:flex; align-items:center; gap:10px; padding:13px 18px; background:#f8fafc; border-bottom:1px solid #eef2f7; } .pp-pickup-head h3 { margin:0; font-size:15px; } .pp-pickup-cnt { font-size:12.5px; color:#6b7785; background:#eef2f7; padding:2px 10px; border-radius:12px; } .pp-pickup-map { height:340px; } .pp-pickup-list { display:flex; gap:8px; overflow-x:auto; padding:12px 16px; background:#fff; } .pp-pickup-item { flex:0 0 auto; max-width:250px; text-align:left; border:1px solid #e5eaf0; background:#fff; border-radius:9px; padding:9px 13px; cursor:pointer; font-family:inherit; display:flex; flex-direction:column; gap:2px; } .pp-pickup-item:hover { border-color:#7C3AED; } .pp-pickup-item b { font-size:12px; color:#7C3AED; } .pp-pickup-item span { font-size:12.5px; color:#1a2233; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pp-pickup-item small { font-size:11px; color:#9aa5b4; } @media (max-width:760px) { .pp-pickup { margin:14px 12px 16px; } .pp-pickup-map { height:260px; } } img { display: block; max-width: 100%; } .container { max-width: 1240px; margin: 0 auto; padding: 0 20px; } /* ====== HEADER ====== */ .header { background: rgba(255,255,255,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 8px rgba(15,23,42,.05); } .header__inner { display: flex; align-items: center; gap: 20px; padding: 11px 20px; } .logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 20px; color: var(--text); flex-shrink: 0; letter-spacing: -.3px; } .logo__img { display: block; height: 48px; width: auto; } /* Значок бета-версии в шапке ЛК продавца */ .beta-badge { display: inline-block; align-self: center; background: linear-gradient(135deg, #7C3AED, #9333ea); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; line-height: 1; } .search { flex: 1; max-width: 580px; display: flex; position: relative; } .search input { width: 100%; border: 1.5px solid var(--border); border-radius: var(--r-full); padding: 10px 50px 10px 68px; font-size: 14px; font-family: inherit; outline: none; background: var(--white); color: var(--text); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .search input::placeholder { color: var(--light); } .search-ai-badge { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 3px; background: linear-gradient(135deg, #7C3AED, #F59E0B); color: #fff; border-radius: var(--r-full); font-size: 10px; font-weight: 700; padding: 3px 8px; pointer-events: none; z-index: 2; letter-spacing: 0.3px; user-select: none; white-space: nowrap; } .search-ai-badge i { font-size: 11px; } .search-fallback-msg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: none; align-items: center; gap: 3px; background: var(--muted); color: #fff; border-radius: var(--r-full); font-size: 10px; font-weight: 600; padding: 3px 8px; pointer-events: none; z-index: 2; white-space: nowrap; } .search-fallback-msg.visible { display: flex; } .search input:focus { border-color: var(--blue-h); box-shadow: 0 0 0 4px rgba(124,58,237,.12); } .search button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: none; border-radius: var(--r-full); background: var(--blue); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--dur) var(--ease); } .search button:hover { background: var(--orange); } .search-icon { width: 16px; height: 16px; stroke: white; fill: none; stroke-width: 2.2; stroke-linecap: round; } .header-links { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; } .header-links a { font-size: 13px; color: var(--muted); padding: 6px 10px; border-radius: var(--r-sm); transition: color var(--dur), background var(--dur); white-space: nowrap; } .header-links a:hover { color: var(--text); background: var(--bg); } /* ====== LAYOUT ====== */ .layout { display: grid; grid-template-columns: 240px 1fr; gap: 22px; padding: 22px 0 80px; } @media (max-width: 880px) { .layout { grid-template-columns: 1fr; } .sidebar { position: static !important; } } /* ====== SIDEBAR ====== */ .sidebar { position: sticky; top: 76px; align-self: start; } .s-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); } .s-card + .s-card { margin-top: 12px; } .s-card__head { padding: 10px 14px; background: var(--bg2); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .sidebar ul { list-style: none; margin: 0; padding: 6px; } .sidebar li { margin: 0; } .sidebar a { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--text2); transition: background var(--dur), color var(--dur); } .sidebar a:hover { background: var(--bg); color: var(--blue); } .sidebar a.active { background: var(--blue-bg); color: var(--blue); font-weight: 600; } .sidebar .s-count { font-size: 11px; color: var(--light); background: var(--bg); padding: 2px 7px; border-radius: var(--r-full); min-width: 26px; text-align: center; } .sidebar a.active .s-count { background: rgba(124,58,237,.12); color: var(--blue); } /* ====== TOOLBAR ====== */ .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 16px; margin-bottom: 14px; box-shadow: var(--sh-sm); } .toolbar__info { font-size: 13px; color: var(--muted); } .toolbar__info strong { color: var(--text); } .toolbar__right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tb-label { font-size: 12px; color: var(--muted); } .tb-select { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 10px; font-size: 13px; font-family: inherit; color: var(--text); background: var(--white); cursor: pointer; outline: none; transition: border-color var(--dur); } .tb-select:focus { border-color: var(--blue-h); } .tb-sep { width: 1px; height: 20px; background: var(--border); } /* Price filter */ .pf { display: flex; align-items: center; gap: 5px; } .pf input[type="number"] { width: 80px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 8px; font-size: 12px; font-family: inherit; outline: none; color: var(--text); background: var(--white); -moz-appearance: textfield; } .pf input[type="number"]::-webkit-inner-spin-button, .pf input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; } .pf input:focus { border-color: var(--blue-h); } .pf span { font-size: 12px; color: var(--muted); } .pf button { padding: 6px 11px; background: var(--blue); color: #fff; border: none; border-radius: var(--r-sm); font-size: 12px; cursor: pointer; font-family: inherit; transition: background var(--dur); } .pf button:hover { background: var(--orange); } .filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .f-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; background: var(--blue-bg); color: var(--blue); border-radius: var(--r-full); font-size: 12px; font-weight: 500; } .f-chip a { color: var(--blue); opacity: .65; } .f-chip a:hover { opacity: 1; } /* ====== PRODUCT GRID ====== */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); cursor: pointer; position: relative; } .card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: transparent; } .card__pic { position: relative; background: var(--bg2); padding: 12px; } .card__img { height: 156px; display: flex; align-items: center; justify-content: center; } .card__img img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .22s var(--ease); } .card:hover .card__img img { transform: scale(1.05); } .card__shops-badge { position: absolute; top: 8px; right: 8px; background: rgba(15,23,42,.07); backdrop-filter: blur(6px); color: var(--text2); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: var(--r-full); } .card__body { padding: 11px 14px 14px; display: flex; flex-direction: column; flex: 1; } .card__name { font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--text); flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px; } .card__price-wrap { margin-top: auto; } .card__from { font-size: 11px; color: var(--muted); margin-bottom: 1px; } .card__price { font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -.3px; } .card__meta { font-size: 11.5px; color: var(--muted); margin-top: 5px; display: flex; align-items: center; gap: 5px; } .card__dot { width: 4px; height: 4px; border-radius: var(--r-full); background: var(--orange); flex-shrink: 0; } /* ====== PAGINATION ====== */ .pagination { display: flex; align-items: center; gap: 5px; justify-content: center; margin-top: 36px; } .pagination a, .pagination span, .pagination em { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--white); font-size: 14px; font-weight: 500; font-style: normal; color: var(--text2); transition: all var(--dur) var(--ease); } .pagination a:hover { background: var(--blue); color: #fff; border-color: var(--blue); } .pagination .pg-curr { background: var(--blue); color: #fff; border-color: var(--blue); } .pagination .pg-curr:hover { background: var(--orange); border-color: var(--orange); } .pagination .pg-dots { border: none; background: none; pointer-events: none; color: var(--muted); } /* ====== EMPTY ====== */ .empty { padding: 80px 20px; text-align: center; color: var(--muted); } .empty__icon { font-size: 48px; margin-bottom: 16px; opacity: .4; } .empty h3 { font-size: 18px; margin: 0 0 8px; color: var(--text2); } .empty p { margin: 0; font-size: 14px; } /* ====== BREADCRUMBS ====== */ .breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 13px; color: var(--muted); margin-bottom: 18px; } .breadcrumbs a { color: var(--muted); transition: color var(--dur); } .breadcrumbs a:hover { color: var(--blue); text-decoration: underline; } .bc-sep { color: var(--light); } .bc-cur { color: var(--text2); } /* ====== PRODUCT PAGE ====== */ .product-wrap { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); } .product-top { display: grid; grid-template-columns: 300px 1fr; } @media (max-width: 720px) { .product-top { grid-template-columns: 1fr; } } .product-gallery { background: var(--bg2); display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 290px; border-right: 1px solid var(--border); } .product-gallery img { max-width: 100%; max-height: 250px; object-fit: contain; } .product-gallery__empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--light); font-size: 13px; } .product-info { padding: 26px 30px; display: flex; flex-direction: column; gap: 12px; } @media (max-width: 720px) { .product-gallery { border-right: none; border-bottom: 1px solid var(--border); } .product-info { padding: 18px 20px; } } .product-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .p-vendor-tag { font-size: 12px; font-weight: 600; color: var(--blue); background: var(--blue-bg); padding: 3px 10px; border-radius: var(--r-full); } .p-model-tag { font-size: 12px; color: var(--muted); font-family: ui-monospace, 'Courier New', monospace; } .product-title { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--text); margin: 0; letter-spacing: -.3px; } .product-price-box { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .product-price-main { } .p-price-label { font-size: 12px; color: var(--muted); margin-bottom: 2px; } .p-price-val { font-size: 34px; font-weight: 800; color: var(--text); letter-spacing: -.6px; line-height: 1; } .p-shops-note { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; } .p-shops-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--green-bg); color: var(--green); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-full); } .p-best-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--orange); color: #fff; padding: 11px 22px; border-radius: var(--r); font-size: 14px; font-weight: 700; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); white-space: nowrap; } .p-best-btn:hover { background: var(--orange-h); transform: translateY(-1px); } .p-best-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; flex-shrink: 0; } .p-savings { font-size: 12px; color: var(--green); background: var(--green-bg); padding: 3px 10px; border-radius: var(--r-full); font-weight: 600; } /* Product tabs */ .product-tabs { display: flex; border-bottom: 2px solid var(--border); background: var(--bg2); padding: 0 20px; overflow-x: auto; } .p-tab { padding: 13px 18px; font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color var(--dur), border-color var(--dur); user-select: none; } .p-tab.active { color: var(--blue); border-color: var(--blue); } .p-tab:hover:not(.active) { color: var(--text2); } .p-tab-cnt { font-size: 11px; color: var(--light); background: var(--bg); padding: 1px 6px; border-radius: var(--r-full); margin-left: 5px; } .p-tab.active .p-tab-cnt { background: rgba(124,58,237,.1); color: var(--blue); } .p-panel { display: none; padding: 24px 28px; } .p-panel.active { display: block; } @media (max-width: 720px) { .product-tabs { padding: 0 12px; } .p-tab { padding: 11px 13px; font-size: 13px; } .p-panel { padding: 18px; } } /* Offers list */ .offers-list { display: flex; flex-direction: column; gap: 0; } .offer-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border-l); transition: background var(--dur); } .offer-row:last-child { border-bottom: none; } .offer-row.best { background: var(--orange-bg); margin: 0 -28px; padding: 14px 28px; border-radius: var(--r); border-bottom-color: transparent; } @media (max-width: 720px) { .offer-row { grid-template-columns: 1fr auto; } .offer-row.best { margin: 0 -18px; padding: 12px 18px; } .offer-btn-col { display: none; } } .offer-shop-wrap { display: flex; align-items: center; gap: 10px; } .offer-logo { width: 48px; height: 34px; object-fit: contain; border-radius: 5px; border: 1px solid var(--border); background: white; padding: 3px; flex-shrink: 0; } .offer-name-wrap { } .offer-shop-name { font-size: 14px; font-weight: 600; color: var(--text); } .offer-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; } .ob { font-size: 11px; padding: 2px 7px; border-radius: var(--r-full); border: 1px solid currentColor; font-weight: 500; } .ob-best { color: var(--orange-h); border-color: var(--orange); background: var(--orange-bg); } .ob-del { color: var(--blue); border-color: var(--blue-bg); background: var(--blue-bg); } .ob-pick { color: var(--green); border-color: var(--green-bg); background: var(--green-bg); } .ob-pay { color: var(--muted); border-color: var(--border); background: var(--bg2); } .offer-price-col { text-align: right; } .offer-price { font-size: 20px; font-weight: 700; color: var(--text); white-space: nowrap; } .offer-oldprice { font-size: 12px; color: var(--light); text-decoration: line-through; margin-top: 1px; } .offer-btn-col { } .offer-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--orange); color: #fff; padding: 9px 18px; border-radius: var(--r); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background var(--dur), transform var(--dur); } .offer-btn:hover { background: var(--orange-h); transform: translateY(-1px); } .offer-btn-sm { display: none; font-size: 12px; font-weight: 600; color: var(--orange); padding: 4px 0; } @media (max-width: 720px) { .offer-btn-sm { display: block; } } /* Description + specs */ .desc-body { font-size: 14.5px; color: var(--text2); line-height: 1.78; max-width: 700px; } .desc-source { margin-top: 18px; font-size: 12px; color: var(--light); padding: 10px 14px; border-left: 3px solid var(--border); } .specs-table { width: 100%; border-collapse: collapse; } .specs-table tr:nth-child(odd) { background: var(--bg2); } .specs-table td { padding: 9px 14px; font-size: 13.5px; border-bottom: 1px solid var(--border-l); vertical-align: top; } .specs-table td:first-child { color: var(--muted); width: 44%; } .specs-table td:last-child { font-weight: 500; color: var(--text); } /* ====== FOOTER ====== */ .footer { border-top: 1px solid var(--border); padding: 24px 0; } .footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--muted); } .footer__links { display: flex; gap: 14px; } .footer__links a:hover { color: var(--blue); } /* ====== CATEGORY BAR ====== */ .cat-bar-wrap { position: relative; z-index: 90; } .cat-bar { background: var(--white); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } .cat-bar::-webkit-scrollbar { display: none; } .cat-bar__inner { display: flex; gap: 8px; padding: 12px 20px; width: max-content; margin: 0 auto; } .cat-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--r); cursor: pointer; transition: all var(--dur) var(--ease); text-decoration: none; flex-shrink: 0; min-width: 76px; color: var(--muted); background: var(--white); font-family: inherit; } .cat-tile i { font-size: 22px; } .cat-tile__label { font-size: 10.5px; line-height: 1.3; text-align: center; font-weight: 500; } .cat-tile:hover { border-color: var(--blue); color: var(--white); background: var(--blue); } .cat-tile.active { background: var(--text); border-color: var(--text); color: var(--white); } .cat-tile.active:hover { background: var(--text2); } /* ====== MEGAMENU ====== */ .megamenu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border-top: 1px solid var(--border); border-bottom: 2px solid var(--blue); box-shadow: var(--sh-lg); z-index: 200; } .megamenu.open { display: block; } .megamenu__inner { max-width: 1240px; margin: 0 auto; padding: 20px 20px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } @media (max-width: 860px) { .megamenu__inner { grid-template-columns: repeat(2, 1fr); } } .mega-group__head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; text-decoration: none; margin-bottom: 2px; transition: background var(--dur); } .mega-group__head:hover { background: var(--bg); } .mega-icon { width: 32px; height: 32px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mega-icon i { font-size: 16px; } .mega-group__name { font-size: 13px; font-weight: 500; color: var(--text); } .mega-subs { padding: 0 0 8px 50px; } .mega-sub { display: block; font-size: 12px; color: var(--muted); padding: 3px 0; text-decoration: none; transition: color var(--dur); } .mega-sub:hover { color: var(--blue); } .mega-more { font-size: 12px; color: var(--light); padding: 3px 0; } /* ====== AI BAR ====== */ .relax-note { display: flex; align-items: center; gap: 9px; max-width: 1240px; margin: 10px auto 0; padding: 10px 16px; background: #fffaf0; border: 1px solid #f0d492; border-radius: 9px; color: #7a5b12; font-size: 13.5px; line-height: 1.45; } .relax-note svg { flex-shrink: 0; color: #a9720b; } .ai-bar { background: var(--blue-bg); border-bottom: 1px solid rgba(124,58,237,.15); padding: 8px 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ai-bar__label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--blue); font-weight: 500; flex-shrink: 0; } .ai-bar__label i { font-size: 14px; } .ai-bar__orig { font-size: 12px; color: var(--muted); font-style: italic; } .ai-chips { display: flex; gap: 6px; flex-wrap: wrap; } .ai-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--white); border: 1px solid rgba(124,58,237,.25); color: var(--blue); font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: var(--r-full); } .ai-chip-x { color: var(--blue); opacity: .5; cursor: pointer; } .ai-chip-x:hover { opacity: 1; } .ai-bar__reset { margin-left: auto; font-size: 12px; color: var(--muted); text-decoration: underline; cursor: pointer; } /* ====== SEARCH SPINNER ====== */ .search-spinner { display: none; width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--blue); border-radius: var(--r-full); animation: spin .7s linear infinite; position: absolute; right: 48px; top: 50%; transform: translateY(-50%); pointer-events: none; } .search-spinner.visible { display: block; } @keyframes spin { to { transform: translateY(-50%) rotate(360deg); } } /* ====== FULL-WIDTH LAYOUT ====== */ .layout-full { padding: 18px 0 80px; } /* ====== ADMIN ====== */ .admin-box { max-width: 960px; margin: 40px auto; background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 24px; } .admin-box h1 { margin-top: 0; font-size: 20px; } .admin-table { width: 100%; border-collapse: collapse; margin-top: 16px; } .admin-table th, .admin-table td { text-align: left; padding: 10px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; } .form-row { margin-bottom: 12px; } .form-row label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; } .form-row input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 14px; } .btn-small { padding: 5px 12px; font-size: 12px; border-radius: 5px; border: none; cursor: pointer; } .btn-blue { background: var(--blue); color: #fff; } .btn-blue:hover { background: var(--orange); } .btn-red { background: #e3402c; color: #fff; } .btn-red:hover { background: #c5331f; } .btn-green { background: #1a8a3e; color: #fff; } .btn-green:hover { background: #137030; } .btn-orange { background: var(--orange); color: #fff; } .btn-orange:hover { background: var(--orange-h); } .tag-ok { color: #1a8a3e; font-size: 12px; } .tag-err { color: #c5331f; font-size: 12px; } .alert { padding: 10px 14px; border-radius: var(--r-sm); margin-bottom: 16px; font-size: 14px; } .alert-ok { background: #e8f7ee; color: #1a8a3e; } .alert-err { background: #fdeceb; color: #c5331f; } /* ====== PHONE MASK ====== */ input[type="tel"].phone-incomplete { border-color: #e53935; box-shadow: 0 0 0 3px rgba(229,57,53,.12); animation: phone-shake .35s ease; } input[type="tel"].phone-incomplete + .phone-hint, input[type="tel"].phone-incomplete ~ .phone-hint { display: block; } .phone-hint { display: none; font-size: .78rem; color: #e53935; margin-top: 4px; } /* ====== SELLER CABINET ====== */ .seller-tabs { display: flex; gap: 4px; margin-bottom: 16px; } .seller-tab { padding: 10px 18px; border-radius: 8px 8px 0 0; font-size: 14px; font-weight: 600; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-bottom: none; } .seller-tab.active { background: var(--white); color: var(--blue-dark); } .seller-tab--logout { margin-left: auto; border-radius: 8px; border-bottom: 1px solid var(--border); color: #c5331f; } .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 16px 0 10px; } .stat-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; } .stat-card .value { font-size: 26px; font-weight: 700; color: var(--blue-dark); } .stat-card .label { font-size: 13px; color: var(--muted); margin-top: 4px; } /* ── Статистика: дельты, инсайты, конкуренция, здоровье, города ── */ .stx-delta { display:inline-block; margin-top:7px; font-size:12px; font-weight:700; padding:2px 9px; border-radius:12px; } .stx-delta.stx-up { background: var(--green-bg); color: var(--green); } .stx-delta.stx-down { background: var(--red-bg); color: var(--red); } .stx-delta.stx-flat { background: #eef2f7; color: var(--muted); } .stx-insights { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 4px; } .stx-insight { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#1a2233; background:#fff; border:1px solid var(--border); border-radius:22px; padding:8px 15px; line-height:1.35; } .stx-insight-ic { font-size:15px; } .stx-insight.stx-up { border-color:#bfe9cf; background:#f4fcf7; } .stx-insight.stx-down { border-color:#f3c9c9; background:#fdf5f5; } .stx-insight.stx-warn { border-color:#f0d492; background:#fffaf0; } .stx-csv-row { text-align:right; margin:0 0 22px; } .stx-csv { font-size:12.5px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; } .stx-csv:hover { color:var(--blue); } /* Карточка «Показы телефона» — отдельная конверсия, не мешается с переходами */ .stx-phone-card { display:flex; align-items:center; gap:14px; margin:0 0 12px; padding:13px 16px; border:1px solid var(--border); border-radius:12px; background:var(--bg); } .stx-phone-ic { font-size:22px; line-height:1; flex-shrink:0; } .stx-phone-title { font-size:12.5px; color:var(--muted); font-weight:600; margin-bottom:2px; } .stx-phone-nums { font-size:15px; color:var(--text); } .stx-phone-nums b { font-size:19px; font-weight:800; } .stx-phone-nums span { font-size:13px; color:var(--muted); white-space:nowrap; } @media (max-width:560px){ .stx-phone-nums span { display:block; } } .stx-comp-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin:6px 0 16px; } .stx-comp-tile { border-radius:10px; padding:13px 15px; border:1px solid var(--border); background:var(--bg); } .stx-comp-tile .n { font-size:24px; font-weight:800; line-height:1.1; } .stx-comp-tile .t { font-size:12px; color:#3d4551; margin-top:3px; } .stx-comp-win { background:#f4fcf7; border-color:#bfe9cf; } .stx-comp-win .n { color:#16803c; } .stx-comp-close { background:#fffaf0; border-color:#f0d492; } .stx-comp-close .n { color:#a9720b; } .stx-comp-mid { background:var(--bg); } .stx-comp-mid .n { color:#6b7785; } .stx-comp-far { background:#fdf5f5; border-color:#f3c9c9; } .stx-comp-far .n { color:#b91c1c; } .stx-comp-subtitle { font-size:13px; font-weight:600; color:#a9720b; margin:2px 0 8px; } .stx-comp-list { display:flex; flex-direction:column; } .stx-comp-row { display:flex; align-items:baseline; gap:14px; padding:7px 2px; border-bottom:1px solid #f1f4f8; font-size:13px; } .stx-comp-row:last-child { border-bottom:none; } .stx-comp-row .nm { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#1a2233; } .stx-comp-row a.nm:hover { color:var(--blue); } .stx-comp-row .pr { flex-shrink:0; color:var(--muted); font-size:12.5px; } .stx-comp-row .pr b { color:#1a2233; font-weight:600; } .stx-comp-row .gap { flex-shrink:0; font-weight:700; color:#a9720b; font-size:12.5px; } .stx-share { margin:4px 0 18px; } .stx-share-head { display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:#3d4551; margin-bottom:6px; } .stx-share-head b { font-size:17px; color:var(--blue-dark); } .stx-share-bar { height:9px; border-radius:6px; background:#eef2f7; overflow:hidden; } .stx-share-fill { height:100%; border-radius:6px; background:var(--blue); } .stx-share-note { font-size:11.5px; color:var(--muted); margin-top:5px; } .stx-dead-head { display:flex; align-items:center; gap:10px; font-size:13.5px; color:#3d4551; } .stx-dead-num { font-size:24px; font-weight:800; color:#a9720b; } .stx-dead-num.ok { color:#16803c; } .stx-dead-details { margin-top:10px; font-size:13px; } .stx-dead-details summary { cursor:pointer; color:var(--muted); } .stx-dead-row { display:flex; justify-content:space-between; gap:12px; padding:6px 2px; border-bottom:1px solid #f1f4f8; } .stx-dead-row a:hover { color:var(--blue); } .stx-dead-hint { font-size:12px; color:var(--muted); margin-top:8px; } .stx-city-hint { font-size:12px; color:#a9720b; background:#fffaf0; border:1px solid #f0d492; border-radius:8px; padding:8px 12px; margin-top:12px; line-height:1.5; } .period-tabs { display: flex; gap: 8px; margin-bottom: 14px; } .period-tab { padding: 6px 14px; border-radius: 20px; font-size: 13px; border: 1px solid var(--border); color: var(--muted); } .period-tab.active { background: var(--blue); color: #fff; border-color: var(--blue); } .stats-table { width: 100%; border-collapse: collapse; } .stats-table th, .stats-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; } .bar-cell { background: var(--bg); border-radius: 4px; overflow: hidden; height: 18px; position: relative; min-width: 120px; } .bar-fill { background: var(--blue); height: 100%; border-radius: 4px; } /* ── Графики статистики (SVG-бары: временной ряд, по часам, по дням недели) ── */ .chart-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 20px; margin-bottom: 16px; } .chart-card h3 { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--text); } .chart-svg { display: block; overflow: visible; } .chart-baseline { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; } .chart-bar { fill: var(--blue); transition: fill .12s; } .chart-bar-hover { fill: var(--blue-h); } .chart-bar-zero { fill: var(--border); } .chart-bar-selected, .chart-bar-selected.chart-bar-hover { fill: var(--orange); } .chart-hit-clickable { cursor: pointer; } .stats-filter-badge { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; background: var(--orange-bg); color: var(--orange-h); border: 1px solid #fde4b8; border-radius: var(--r-full); padding: 2px 6px 2px 10px; font-size: 11.5px; font-weight: 600; vertical-align: middle; } .stats-filter-badge button { border: none; background: none; color: var(--orange-h); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 50%; } .stats-filter-badge button:hover { background: #fde4b8; } .stats-offer-row-static { cursor: default; } .chart-hit { fill: transparent; cursor: pointer; } .chart-axis-label { fill: var(--muted); font-size: 10.5px; font-family: inherit; } .chart-empty { padding: 30px 0; text-align: center; color: var(--light); font-size: 13px; } .chart-tooltip { position: fixed; z-index: 3000; transform: translate(-50%, calc(-100% - 10px)); background: #1a2233; color: #fff; padding: 7px 11px; border-radius: 8px; font-size: 12.5px; box-shadow: 0 6px 20px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .12s; white-space: nowrap; text-align: center; } .chart-tooltip.show { opacity: 1; } .chart-tooltip .ct-value { font-weight: 700; font-size: 13.5px; } .chart-tooltip .ct-label { color: #b6bfd6; margin-top: 1px; } .stats-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; } .stats-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 860px) { .stats-grid-2 { grid-template-columns: 1fr; } } .stats-source-row { display: grid; grid-template-columns: 1fr 90px 50px; gap: 10px; align-items: center; padding: 7px 0; font-size: 13px; } .stats-source-row .lbl { color: var(--text2); } .stats-source-row .cnt { text-align: right; font-weight: 600; color: var(--text); } .stats-offer-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border-l); cursor: pointer; border-radius: 6px; transition: background .12s; } .stats-offer-row:last-child { border-bottom: none; } .stats-offer-row:hover, .stats-offer-row:focus-visible { background: var(--bg2); outline: none; } .stats-offer-rank { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .stats-offer-thumb { width: 36px; height: 36px; border-radius: 6px; object-fit: contain; background: var(--bg); border: 1px solid var(--border-l); flex-shrink: 0; } .stats-offer-info { flex: 1; min-width: 0; } .stats-offer-name { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stats-offer-shop { font-size: 11.5px; color: var(--muted); } .stats-offer-clicks { font-weight: 700; color: var(--blue-dark); font-size: 14px; white-space: nowrap; } .stats-offer-chevron { flex-shrink: 0; color: var(--light); transition: transform .15s; } .stats-offer-chevron.open { transform: rotate(90deg); color: var(--blue); } .stats-offer-chart { padding: 10px 4px 14px 46px; margin-bottom: 4px; border-bottom: 1px solid var(--border-l); } .stats-shop-picker { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--text); background: var(--white); } .checkbox-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 4px; } .checkbox-row label { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 400; color: var(--text); } .checkbox-row input { width: auto; } .shop-card { border: 1px solid var(--border); border-radius: var(--r); padding: 18px; margin-bottom: 18px; } .shop-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .shop-card__head h3 { margin: 0; font-size: 16px; } @keyframes phone-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } /* ====== SEO: H1 + текстовые блоки ====== */ .page-head { margin: 4px 0 14px; } .page-h1 { font-size: 22px; font-weight: 800; color: var(--dark, #1a2233); margin: 0 0 4px; line-height: 1.3; } .page-sub { font-size: 13.5px; color: var(--muted, #6b7785); margin: 0; line-height: 1.5; } .seo-text { background: var(--white, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 22px 26px; margin-top: 28px; font-size: 13.5px; line-height: 1.7; color: #3c4658; } .seo-text h2 { font-size: 17px; font-weight: 800; color: var(--dark, #1a2233); margin: 0 0 10px; } .seo-text h3 { font-size: 14.5px; font-weight: 700; color: var(--dark, #1a2233); margin: 16px 0 6px; } .seo-text p { margin: 0 0 10px; } .seo-text ul { margin: 0 0 10px 20px; padding: 0; } .seo-text li { margin: 3px 0; } .seo-text a { color: var(--blue, #7C3AED); text-decoration: none; } .seo-text a:hover { text-decoration: underline; } /* ====== Подкатегории на странице категории ====== */ .subcats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; } .subcat-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; background: var(--white, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 999px; font-size: 13px; color: var(--dark, #1a2233); text-decoration: none; font-weight: 600; transition: border-color .15s, color .15s; } .subcat-chip:hover { border-color: var(--blue, #7C3AED); color: var(--blue, #7C3AED); } .subcat-chip.active { background: var(--blue, #7C3AED); border-color: var(--blue, #7C3AED); color: #fff; } .subcat-chip.active .subcat-cnt { color: rgba(255,255,255,.75); } .subcat-up { color: var(--muted, #6b7785); font-weight: 500; } .subcat-cnt { font-size: 11px; color: var(--muted, #8a94a6); font-weight: 700; } /* ====== RESPONSIVE: планшет и мобильный ====== */ @media (max-width: 880px) { .header__inner { flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; } .logo__img { height: 36px; } .search { order: 3; flex-basis: 100%; max-width: none; } .search input { padding: 9px 44px 9px 60px; font-size: 13px; } .header-links { margin-left: auto; gap: 4px; } .header-links a { font-size: 12.5px; padding: 6px 8px; } .page-head { margin: 2px 0 12px; } .page-h1 { font-size: 19px; } .page-sub { font-size: 12.5px; } .toolbar { flex-direction: column; align-items: stretch; gap: 10px; } .toolbar__right { flex-wrap: wrap; row-gap: 8px; } .tb-sep { display: none; } .subcats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .subcat-chip { flex-shrink: 0; } .seo-text { padding: 16px; margin-top: 20px; } .seo-text h2 { font-size: 15px; } } @media (max-width: 560px) { .container { padding-left: 12px; padding-right: 12px; } .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .card__img { height: 118px; } .card__body { padding: 10px 12px 12px; } .card__name { font-size: 12.5px; } .card__price { font-size: 15px; } .card__shops-badge { font-size: 10px; } .pagination { flex-wrap: wrap; row-gap: 8px; } .pagination a, .pagination span, .pagination em { min-width: 34px; padding: 7px 0; } .footer__inner { flex-direction: column; gap: 10px; text-align: center; } .footer__links { flex-wrap: wrap; justify-content: center; row-gap: 6px; } .breadcrumbs { font-size: 11.5px; white-space: nowrap; overflow-x: auto; padding-bottom: 4px; } } /* Кабинет продавца на мобильном */ @media (max-width: 720px) { .seller-tabs { flex-wrap: wrap; row-gap: 6px; } .shop-card { padding: 16px 14px !important; } .shop-card table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .stat-cards { flex-wrap: wrap; } #onboardingWidget { display: none !important; } #onboardingCollapsed { display: block !important; } }