:root { --bg: #0f1115; /* Темный фон, основа */ --card-base: rgba(255, 255, 255, 0.05); /* Основной полупрозрачный фон карточек */ --card-hover: rgba(255, 255, 255, 0.12); /* Фон карточек при наведении */ --card-border: rgba(255, 255, 255, 0.1); /* Нежная рамка для эффекта стекла */ --text: #ffffff; /* Основной текст */ --muted: rgba(255, 255, 255, 0.7); /* Приглушенный текст */ --accent: #83e9ff; /* Яркий акцентный цвет (водянистый) */ --accent-light: #b2f7ff; /* Более светлый оттенок акцента */ --danger: #ff6b81; /* Красный (опасность) */ --success: #70e0a2; /* Зеленый (успех) */ --primary-gradient: linear-gradient(135deg, rgba(131, 233, 255, 0.4) 0%, rgba(178, 247, 255, 0.6) 100%); /* Граддиент для акцентов */ --shadow-light: rgba(0, 0, 0, 0.15); /* Легкая тень */ --shadow-medium: rgba(0, 0, 0, 0.25); /* Средняя тень */ --blur-amount: 20px; /* Сила размытия */ } * { box-sizing: border-box; } body { margin: 0; padding: 0 0 86px 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Современный шрифт */ color: var(--text); background: var(--bg); min-height: 100vh; background-size: cover; background-position: center; background-attachment: fixed; } body::before { content: ""; position: fixed; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.85)); z-index: -1; } #app { padding: 14px; } .loader { padding: 30px; text-align: center; color: var(--muted); } .header { margin-bottom: 14px; } .header h1 { margin: 0 0 6px 0; font-size: 28px; /* Чуть крупнее */ font-weight: 700; } .header p { margin: 0; color: var(--muted); font-size: 15px; } .section { margin: 26px 0; /* Больше пространства между секциями */ } .section-title { font-size: 22px; /* Ярче заголовок секции */ margin: 0 0 12px 0; font-weight: 700; color: var(--accent-light); } /* Стилизация карусели товаров для эффекта Liquid Glass */ .products-carousel { display: flex; overflow-x: auto; gap: 16px; /* Расстояние между карточками */ padding-bottom: 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-left: 8px; /* Небольшой отступ слева, чтобы первая карточка не прилегала */ padding-right: 8px; /* Небольшой отступ справа */ } .products-carousel::-webkit-scrollbar { display: none; /* Скрываем стандартный скроллбар */ } /* Карточка товара в карусели */ .product-card { flex: 0 0 auto; width: 80%; /* Уменьшил ширину для лучшего карусельного эффекта */ max-width: 340px; /* Увеличил макс. ширину */ scroll-snap-align: center; background: var(--card-base); /* Полупрозрачный фон */ border-radius: 28px; /* Более плавные углы */ overflow: hidden; border: 1px solid var(--card-border); /* Нежная рамка */ backdrop-filter: blur(var(--blur-amount)); /* Эффект размытия */ box-shadow: 0 12px 35px var(--shadow-medium); /* Более выраженная тень */ transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Улучшенный переход */ display: flex; flex-direction: column; justify-content: space-between; position: relative; /* Для потенциальных псевдоэлементов */ padding: 20px; /* Увеличенный внутренний отступ */ padding-top: 0; /* Сбрасываем верхний padding, чтобы изображение начиналось сверху */ } .product-card:not(.no-image-card) { /* Если есть изображение */ padding-top: 0; /* Убираем верхний padding, чтобы картинка была вровень */ } .product-card:hover { transform: translateY(-8px) scale(1.02); /* Более выраженный эффект при наведении */ box-shadow: 0 20px 50px var(--shadow-medium); } .product-card img, .product-card .no-image { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; border-radius: 20px; /* Скругляем углы изображения */ margin-bottom: 16px; /* Отступ под изображением */ background: rgba(255, 255, 255, 0.08); /* Фон для безымянных изображений */ } .product-card-body { padding: 0; /* Убрали padding, т.к. он задан у .product-card */ } .product-card-title { font-weight: 700; font-size: 18px; margin-bottom: 8px; color: var(--accent-light); /* Цвет заголовка */ } .product-card-price { font-weight: 800; color: var(--primary-gradient); /* Градиент для цены */ background-clip: text; /* Применяем градиент к тексту */ -webkit-background-clip: text; color: transparent; /* Делаем текст прозрачным, чтобы градиент был виден */ font-size: 20px; /* Крупнее цена */ margin-bottom: 10px; } .product-card-meta { margin-top: 8px; font-size: 14px; color: var(--muted); opacity: 0.85; /* Чуть ярче */ } /* Навигация карусели (если нужна) */ .products-carousel-nav { display: flex; justify-content: center; gap: 12px; margin-top: 20px; margin-bottom: 20px; } .products-carousel-nav .nav-button { width: 12px; height: 12px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; cursor: pointer; transition: background 0.3s ease, transform 0.2s ease; border: 1px solid rgba(255, 255, 255, 0.15); } .products-carousel-nav .nav-button.active { background: var(--accent); transform: scale(1.2); box-shadow: 0 0 10px var(--accent); } .products-carousel-nav .nav-button:hover { background: var(--accent-light); } /* Кнопки */ .button, button { border: 0; border-radius: 18px; /* Скругление */ padding: 14px 20px; font-weight: 700; font-size: 16px; width: 100%; margin: 8px 0; cursor: pointer; transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; box-shadow: 0 6px 20px rgba(131, 233, 255, 0.5); /* Тень акцента */ background: var(--primary-gradient); /* Градиент */ color: #ffffff; /* Белый текст */ position: relative; /* Для псевдоэлементов */ overflow: hidden; } .button::before, button::before { /* Псевдоэлемент для эффекта при наведении */ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0)); opacity: 0; transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } .button:hover, button:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 30px rgba(131, 233, 255, 0.6); } .button:active, button:active { transform: translateY(-2px) scale(1.01); box-shadow: 0 4px 15px rgba(131, 233, 255, 0.5); } .button.secondary, button.secondary { background: var(--card-base); /* Полупрозрачный фон */ border: 1px solid var(--card-border); /* Нежная рамка */ box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); /* Внутренняя тень */ color: var(--text); } .button.secondary:hover, button.secondary:hover { background: var(--card-hover); transform: translateY(-2px); box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.15); } button.danger { background: var(--danger); box-shadow: 0 6px 20px rgba(255, 107, 129, 0.5); } button.danger:hover { background: #e66074; transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 30px rgba(255, 107, 129, 0.6); } button.success { background: var(--success); box-shadow: 0 6px 20px rgba(112, 224, 162, 0.5); } button.success:hover { background: #62cc92; transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 30px rgba(112, 224, 162, 0.6); } /* Меню навигации в стиле Liquid Glass */ .bottom-menu { position: fixed; left: 16px; right: 16px; bottom: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; /* Расстояние между кнопками */ padding: 16px; /* Больше отступов */ background: rgba(15, 17, 21, 0.8); /* Темный полупрозрачный фон */ backdrop-filter: blur(25px); /* Сильное размытие */ border: 1px solid var(--card-border); /* Нежная стеклянная рамка */ border-radius: 32px; /* Сильное скругление */ z-index: 1000; box-shadow: 0 10px 40px var(--shadow-medium); } .bottom-menu button { margin: 0; padding: 14px 10px; font-size: 14px; border-radius: 20px; /* Сильное скругление */ background: var(--card-base); /* Полупрозрачный фон */ border: 1px solid var(--card-border); /* Нежная рамка */ font-weight: 600; color: var(--text); transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1); /* Внутренняя тень */ display: flex; align-items: center; justify-content: center; height: 55px; /* Фиксированная высота */ } .bottom-menu button:hover { background: var(--card-hover); transform: translateY(-3px); box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.15), 0 4px 12px var(--shadow-light); } /* Общие карточки */ .card { background: var(--card-base); /* Полупрозрачный фон */ border-radius: 28px; /* Сильное скругление */ padding: 20px; /* Увеличенный отступ */ margin: 12px 0; border: 1px solid var(--card-border); /* Нежная рамка */ backdrop-filter: blur(var(--blur-amount)); /* Размытие */ box-shadow: 0 8px 25px var(--shadow-light); /* Тень */ } .cart-row { display: grid; grid-template-columns: 70px 1fr; /* Размер изображения */ gap: 14px; align-items: center; } .cart-row img { width: 70px; height: 100px; /* Соответствующая высота */ border-radius: 16px; /* Скругление */ object-fit: cover; } input, textarea, select { width: 100%; padding: 16px; margin: 8px 0; border-radius: 18px; /* Скругление */ border: 1px solid var(--card-border); /* Рамка */ background: var(--card-base); /* Полупрозрачный фон */ color: var(--text); outline: none; transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; font-size: 15px; } input:focus, textarea:focus, select:focus { border-color: var(--accent); /* Подсвечиваем рамку */ background: var(--card-hover); box-shadow: 0 0 15px rgba(131, 233, 255, 0.5); /* Тень при фокусе */ } textarea { min-height: 120px; resize: vertical; } input::file-selector-button { border: 0; border-radius: 14px; /* Скругление */ background: var(--primary-gradient); color: white; padding: 10px 14px; font-weight: 700; margin-right: 12px; /* Отступ от текста */ transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; box-shadow: 0 4px 15px rgba(131, 233, 255, 0.4); } input::file-selector-button:hover { background: #70ddeb; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(131, 233, 255, 0.5); } /* Прочие элементы */ .admin-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; } .admin-tabs button { margin: 0; } .media-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .media-list img, .media-list video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; /* Скругление */ } .review-photo-list { display: flex; gap: 8px; overflow-x: auto; } .review-photo-list img { width: 96px; height: 128px; object-fit: cover; border-radius: 14px; /* Скругление */ } .small { font-size: 13px; color: var(--muted); } hr { border: 0; height: 1px; background: rgba(255,255,255,.12); margin: 16px }