:root { --accent: #0078D4; --accent-hover: #106EBE; --accent-soft: #E5F1FB; --bg: #F5F7FA; --surface: #FFFFFF; --text: #201F1E; --text-secondary: #616161; --border: #E1E1E1; --radius: 12px; --radius-sm: 8px; --shadow: 0 2px 8px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06); --transition: 180ms cubic-bezier(0.1, 0.9, 0.2, 1); } @media (prefers-color-scheme: dark) { :root { --accent: #4CC2FF; --accent-hover: #6FD3FF; --accent-soft: #123049; --bg: #1B1A19; --surface: #252423; --text: #F3F2F1; --text-secondary: #C8C6C4; --border: #3B3A39; --shadow: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.45); } } /* Ручной выбор темы в Mini App "Товары" (поверх авто-темы Telegram/ОС) — выставляется app/static/tovary/app.js через data-theme на , значение "auto" сюда не попадает (просто не переопределяет ничего). */ :root[data-theme="light"] { --accent: #0078D4; --accent-hover: #106EBE; --accent-soft: #E5F1FB; --bg: #F5F7FA; --surface: #FFFFFF; --text: #201F1E; --text-secondary: #616161; --border: #E1E1E1; --shadow: 0 2px 8px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06); } :root[data-theme="dark"] { --accent: #4CC2FF; --accent-hover: #6FD3FF; --accent-soft: #123049; --bg: #1B1A19; --surface: #252423; --text: #F3F2F1; --text-secondary: #C8C6C4; --border: #3B3A39; --shadow: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; } a { color: inherit; text-decoration: none; } /* --- Шапка --- */ .topbar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .topbar-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 32px; } .brand { font-weight: 600; font-size: 1.1rem; white-space: nowrap; } .nav { display: flex; gap: 24px; flex: 1; flex-wrap: wrap; } .nav a { color: var(--text-secondary); font-size: 0.95rem; padding: 6px 0; border-bottom: 2px solid transparent; transition: color var(--transition), border-color var(--transition); } .nav a:hover, .nav a.active { color: var(--accent); border-bottom-color: var(--accent); } .lang-switch { display: flex; gap: 4px; background: var(--bg); border-radius: 999px; padding: 3px; border: 1px solid var(--border); } .lang-switch a { padding: 4px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); transition: background var(--transition), color var(--transition); } .lang-switch a.active { background: var(--accent); color: #fff; } /* --- Контейнер страницы --- */ .page { max-width: 1200px; margin: 0 auto; padding: 32px 24px 64px; min-height: 60vh; } .page-title { font-size: 1.8rem; font-weight: 600; margin: 0 0 24px; } /* --- Главная / hero --- */ .hero { text-align: center; padding: 64px 16px 48px; } .hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; margin: 0 0 16px; background: linear-gradient(90deg, var(--accent), #6B4EFF); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p { color: var(--text-secondary); font-size: 1.1rem; max-width: 620px; margin: 0 auto; } .tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 48px; } .tile { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 24px; border: 1px solid var(--border); transition: transform var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; gap: 8px; } .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .tile h3 { margin: 0; font-size: 1.2rem; } .tile p { margin: 0; color: var(--text-secondary); font-size: 0.92rem; } .tile .open-link { margin-top: 12px; color: var(--accent); font-weight: 600; font-size: 0.9rem; } /* Плитки-баннеры с фото (ведут напрямую в Telegram-бота) */ .tile-photo { position: relative; padding: 0; height: 220px; background-size: cover; background-position: center; justify-content: flex-end; overflow: hidden; color: #fff; } .tile-photo-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(6, 8, 14, 0.85) 100%); } .tile-photo-body { position: relative; z-index: 1; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; } .tile-photo-body h3, .tile-photo-body p { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65); } .tile-photo-body p { opacity: 0.88; } /* Плитки-баннеры без наложенного текста (готовая реклама уже содержит название/описание) — только маленькая кликабельная метка в углу, чтобы не спорить с текстом на самой картинке (см. "Электроника"/"Дом и сад"). */ .tile-banner { position: relative; padding: 0; height: 220px; background-size: cover; background-position: center; justify-content: flex-end; align-items: flex-end; overflow: hidden; } .tile-banner-chip { margin: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(10, 12, 20, 0.72); color: #fff; font-weight: 600; font-size: 0.88rem; backdrop-filter: blur(4px); } /* Боты, для которых ещё не создан токен в BotFather — баннер уже готов, ссылка на Telegram появится, когда пользователь заведёт бота. */ .tile-banner-soon { cursor: default; filter: grayscale(55%); } .tile-banner-soon:hover { transform: none; box-shadow: var(--shadow); } .tile-banner-soon .tile-banner-chip { background: rgba(10, 12, 20, 0.55); } .tile-photo .open-link { color: #fff; text-decoration: underline; } /* --- Фильтры/поиск --- */ .toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; align-items: center; } .tabs { display: flex; gap: 8px; } .tab { padding: 8px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); font-weight: 600; font-size: 0.9rem; transition: background var(--transition), color var(--transition), border-color var(--transition); } .tab.active, .tab:hover { background: var(--accent); color: #fff; border-color: var(--accent); } select, input[type="text"] { font-family: inherit; font-size: 0.9rem; padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); } .search-form { display: flex; gap: 8px; flex: 1; min-width: 220px; } .search-form input[type="text"] { flex: 1; } button, .btn { font-family: inherit; font-size: 0.9rem; font-weight: 600; padding: 9px 18px; border-radius: var(--radius-sm); border: none; background: var(--accent); color: #fff; cursor: pointer; transition: background var(--transition), transform var(--transition); } button:hover, .btn:hover { background: var(--accent-hover); } /* --- Карточки списков --- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: transform var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; gap: 10px; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .card-photo { margin: -20px -20px 0 -20px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--border); } .card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-title { font-weight: 600; font-size: 1.05rem; } .card-badge { display: inline-block; background: var(--accent-soft); color: var(--accent); font-size: 0.78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; width: fit-content; } .card-fields { display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; color: var(--text-secondary); } .card-fields b { color: var(--text); } .card-price { font-size: 1.1rem; font-weight: 700; color: var(--accent); } .card .btn { margin-top: auto; text-align: center; } .empty-state { text-align: center; padding: 64px 16px; color: var(--text-secondary); } /* --- Полоса рекламы: намеренно скромная — мельче обычных карточек, отделена отступом и рамкой сверху, без анимаций/автопрокрутки --- */ .ads-strip { margin-top: 56px; padding-top: 24px; border-top: 1px dashed var(--border); } .ads-strip-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin: 0 0 12px; } .ads-strip-row { display: flex; flex-wrap: wrap; gap: 12px; } .ads-card { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; max-width: 240px; font-size: 0.82rem; color: var(--text); transition: box-shadow var(--transition); } .ads-card:hover { box-shadow: var(--shadow); } .ads-card-title { font-weight: 600; } .ads-card-desc { color: var(--text-secondary); font-size: 0.78rem; } .ads-more { display: inline-block; margin-top: 10px; font-size: 0.8rem; color: var(--accent); } /* --- Футер --- */ .footer { border-top: 1px solid var(--border); padding: 20px 24px; text-align: center; color: var(--text-secondary); font-size: 0.85rem; } @media (max-width: 640px) { .topbar-inner { flex-wrap: wrap; gap: 12px; } .nav { order: 3; width: 100%; justify-content: space-between; } .hero { padding: 40px 8px 32px; } }