/* ========== ОСНОВНЫЕ СТИЛИ ========== */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-dark: #2c1810; --primary: #8B5A2B; --primary-light: #c49a6c; --accent: #d4a373; --light: #fef9f0; --dark: #2c2c2c; --gray: #6c757d; --light-gray: #e9ecef; --success: #28a745; --warning: #ffc107; --danger: #dc3545; --info: #17a2b8; --shadow-sm: 0 2px 4px rgba(0,0,0,0.1); --shadow-md: 0 4px 6px rgba(0,0,0,0.1); --shadow-lg: 0 10px 15px rgba(0,0,0,0.1); } body { font-family: 'Montserrat', 'Arial', sans-serif; line-height: 1.6; color: #2c2c2c; background-image: url('/static/images/background.jpg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; position: relative; } /* Затемнение фона */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: -1; pointer-events: none; } html, body { height: 100%; } .wrapper { min-height: 100%; display: flex; flex-direction: column; } /* ========== СТИЛИ ДЛЯ ВСЕХ БЛОКОВ (КАК НА ГЛАВНОЙ) ========== */ /* Все блоки - темный полупрозрачный фон, как у hero */ section, .service-item, .abonement-item, .certificate-item, .discount-card, .review-card, .order-card, .auth-container, .order-form, .review-form, .chat-container, .admin-card, .filters, .about-content, .about-hero, .about-quote, .gallery-item, .advantages .advantage-item, .add-review, .reviews-list, .chat-messages, .chat-input, .orders-filters, .orders-list, .admin-table, .gallery-intro, .gallery-note, .discounts-intro, .discounts-note, .empty-orders, .empty-reviews, .empty-state { background: rgba(0, 0, 0, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: var(--shadow-sm); border-radius: 20px; transition: transform 0.2s ease; } /* Убираем смену цвета при наведении - только легкое поднятие */ section:hover, .service-item:hover, .abonement-item:hover, .certificate-item:hover, .discount-card:hover, .review-card:hover, .order-card:hover, .gallery-item:hover, .advantages .advantage-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: rgba(0, 0, 0, 0.58) !important; } /* Весь текст внутри блоков делаем белым */ section p, .service-item p, .abonement-item p, .certificate-item p, .discount-card p, .review-card p, .order-card p, .auth-container p, .order-form p, .review-form p, .chat-container p, .admin-card p, .filters p, .about-content p, .about-hero p, .about-quote p, .gallery-item p, .advantages .advantage-item p, .add-review p, .reviews-list p, .chat-messages p, .chat-input p, .orders-filters p, .orders-list p, .admin-table p, .gallery-intro p, .gallery-note p, .discounts-intro p, .discounts-note p, .empty-orders p, .empty-reviews p, .empty-state p, section li, .service-item li, .about-content li, .review-comment, .order-details p { color: #ffffff !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); } /* Заголовки внутри блоков делаем светлыми */ section h2, section h3, .service-item h3, .abonement-item h3, .certificate-item h3, .discount-card h3, .review-card h3, .order-card h3, .auth-container h2, .auth-container h3, .order-form h2, .order-form h3, .review-form h2, .review-form h3, .chat-container h3, .admin-card h3, .filters h3, .about-content h3, .about-hero h3, .about-quote h3, .gallery-item h3, .advantages .advantage-item h4, .add-review h3, .reviews-list h3, .gallery-intro h3, .discounts-intro h3, .discounts-note h3, .empty-orders h3, .empty-reviews h3, .empty-state h3 { color: #f5cba0 !important; } /* Специально для цен - делаем золотыми */ .price { color: #f5cba0 !important; font-size: 1.4rem; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); } /* Рейтинг звезд - оставляем желтым */ .rating { color: #ffc107 !important; } /* Ссылки внутри блоков */ section a, .service-item a, .order-card a { color: #f5cba0 !important; } section a:hover, .service-item a:hover, .order-card a:hover { color: #ffdd99 !important; } /* Статусы заказов */ .status-pending { background: #ffc107; color: #856404; } .status-confirmed { background: #17a2b8; color: white; } .status-completed { background: #28a745; color: white; } .status-cancelled { background: #dc3545; color: white; } /* Шапка сайта */ header { background: rgba(44, 24, 16, 0.92) !important; border-bottom: 2px solid #d4a373; padding: 1rem 0; position: sticky; top: 0; z-index: 1000; } header h1 { font-family: 'Playfair Display', serif; font-size: 2rem; text-align: center; margin-bottom: 1rem; color: #fff; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } /* Навигация */ nav ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } nav a { color: #fff; text-decoration: none; padding: 0.6rem 1.2rem; border-radius: 50px; transition: all 0.2s ease; font-weight: 500; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); } nav a:hover { background: #d4a373; color: #2c1810; transform: translateY(-2px); } /* Основной контент */ .content { flex: 1 1 auto; max-width: 1200px; margin: 2rem auto; padding: 0 1rem; width: 100%; } /* Заголовки страниц (h2 вне блоков) */ .content > h2, .orders-header h2, .admin-dashboard h2 { background: rgba(0, 0, 0, 0.55) !important; backdrop-filter: blur(4px); display: inline-block; padding: 0.6rem 1.2rem; border-radius: 12px; border-left: 4px solid #f5cba0; margin-bottom: 1.5rem; color: white !important; } /* Главная страница (hero уже темный, оставляем как есть) */ .hero { text-align: center; padding: 3rem 2rem; background: rgba(0, 0, 0, 0.55) !important; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.2); } .hero h2 { color: white !important; font-size: 2.5rem; border-left: none; padding-left: 0; } .about-text { max-width: 800px; margin: 1.5rem auto; font-size: 1.1rem; line-height: 1.6; } .about-text p { color: white !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); } /* Карточки */ .services-list, .abonements-list, .certificates-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .service-item, .abonement-item, .certificate-item { padding: 1.5rem; } .duration { color: #d4a373 !important; font-style: italic; font-size: 0.9rem; } /* Преимущества */ .advantages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .advantage-item { padding: 1.5rem; text-align: center; } /* Скидки */ .discounts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; } .discount-card { padding: 1.5rem; text-align: center; } .discount-icon { font-size: 2.5rem; margin-bottom: 0.5rem; } .discount-value { font-size: 1.5rem; font-weight: bold; color: #f5cba0 !important; margin: 0.5rem 0; } /* Галерея */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding: 0.5rem; } .gallery-item { overflow: hidden; } .gallery-item img { width: 100%; height: 200px; object-fit: cover; transition: transform 0.3s ease; } .gallery-item:hover img { transform: scale(1.05); } .gallery-caption { padding: 0.75rem; text-align: center; font-weight: 500; color: #f5cba0 !important; } /* Формы */ .auth-container, .order-form, .review-form { max-width: 500px; margin: 2rem auto; padding: 2rem; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; margin-bottom: 0.3rem; font-weight: 600; color: #f5cba0 !important; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.6rem; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; font-size: 1rem; background: rgba(255, 255, 255, 0.9); color: #2c2c2c; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #f5cba0; box-shadow: 0 0 0 3px rgba(245, 203, 160, 0.2); } /* Кнопки */ .btn { display: inline-block; padding: 0.6rem 1.2rem; border: none; border-radius: 50px; cursor: pointer; text-decoration: none; font-size: 1rem; font-weight: 600; transition: all 0.2s ease; } .btn-primary { background: linear-gradient(135deg, #f5cba0 0%, #d4a373 100%) !important; color: #2c1810 !important; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .btn-primary:hover { background: linear-gradient(135deg, #ffdd99 0%, #f5cba0 100%) !important; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .btn-danger { background-color: var(--danger); color: white; } .btn-danger:hover { background-color: #c82333; } .btn-warning { background-color: var(--warning); color: #333; } .btn-warning:hover { background-color: #e0a800; } /* Заказы */ .order-card { padding: 1rem; margin-bottom: 1rem; overflow: hidden; } .order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .order-header h3 { margin: 0; font-size: 1.1rem; color: #f5cba0 !important; } .order-details p { margin: 0.5rem 0; } /* Отзывы */ .reviews-section { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; } .add-review, .reviews-list { padding: 1.5rem; } .review-card { padding: 1rem; margin-bottom: 1rem; } .review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.5rem; } .review-header strong { color: #f5cba0 !important; font-weight: 600; } .review-date { color: #d4a373 !important; font-size: 0.7rem; margin-bottom: 0.5rem; } /* Чат */ .chat-container { overflow: hidden; } .chat-messages { height: 400px; overflow-y: auto; padding: 1rem; } .message { margin-bottom: 0.8rem; padding: 0.6rem 1rem; border-radius: 12px; max-width: 80%; } .message-user { background: linear-gradient(135deg, #f5cba0 0%, #d4a373 100%) !important; color: #2c1810 !important; margin-left: auto; text-align: right; } .message-admin { background: rgba(44, 24, 16, 0.85) !important; color: white; } .message-system { background: rgba(255, 255, 255, 0.2) !important; color: #f5cba0 !important; text-align: center; max-width: 100%; font-style: italic; } .message-time { color: rgba(255,255,255,0.7); font-size: 0.7rem; } .chat-input { padding: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.2); } /* Админ панель */ .admin-dashboard { padding: 1rem; } .admin-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } .admin-card { padding: 1.5rem; text-align: center; } .admin-table { overflow-x: auto; padding: 0.5rem; } .admin-table table { width: 100%; border-collapse: collapse; } .admin-table th, .admin-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .admin-table th { background: rgba(44, 24, 16, 0.9) !important; color: #f5cba0; font-weight: 600; } .admin-table td { color: white !important; } .admin-table tr:hover { background: rgba(255, 255, 255, 0.1); } /* Фильтры */ .filter-bar { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: 0.5rem; } .filter-bar label { font-size: 0.85rem; font-weight: 500; color: #f5cba0 !important; } .filter-bar select { padding: 0.4rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 6px; background: rgba(255, 255, 255, 0.9); cursor: pointer; color: #2c2c2c; } /* Уведомления */ .alert { padding: 0.75rem; margin-bottom: 1rem; border-radius: 8px; } .alert-success { background: rgba(40, 167, 69, 0.9) !important; color: white; border: 1px solid #c3e6cb; } .alert-danger { background: rgba(220, 53, 69, 0.9) !important; color: white; border: 1px solid #f5c6cb; } .alert-warning { background: rgba(255, 193, 7, 0.9) !important; color: #2c2c2c; border: 1px solid #ffeeba; } /* Специальное предложение */ .special-offer { background: linear-gradient(135deg, #f5cba0 0%, #d4a373 100%) !important; border-radius: 20px; padding: 1.5rem; text-align: center; margin: 1.5rem 0; } .special-offer h3, .special-offer p { color: #2c1810 !important; text-shadow: none; } /* Футер */ footer { background: rgba(30, 16, 10, 0.98) !important; border-top: 3px solid #d4a373; padding: 2rem 0 1rem 0; margin-top: auto; box-shadow: 0 -5px 20px rgba(0,0,0,0.2); } .footer-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; padding: 0 1rem; } .footer-section h4 { color: #ffdd99 !important; font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); letter-spacing: 1px; position: relative; display: inline-block; } .footer-section h4::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 40px; height: 2px; background: #d4a373; border-radius: 2px; } .footer-section p { color: #f0e2d0 !important; font-size: 0.95rem; line-height: 1.6; margin: 0.6rem 0; transition: all 0.2s ease; } .footer-section p:hover { color: #ffdd99 !important; transform: translateX(5px); } .footer-bottom { text-align: center; padding: 1.5rem 1rem 0.5rem; border-top: 1px solid rgba(212, 163, 115, 0.4); margin-top: 1.5rem; } .footer-bottom p { color: #ddc8aa !important; font-size: 0.9rem; font-weight: 500; } .team-credit { font-size: 0.75rem; margin-top: 0.6rem; color: #c9a87c !important; transition: all 0.2s ease; cursor: default; } .team-credit:hover { color: #ffdd99 !important; text-shadow: 0 0 5px rgba(212,163,115,0.5); } /* ========== УМНЫЙ BLUR (только для мощных устройств) ========== */ @media (min-width: 1200px) and (prefers-reduced-motion: no-preference) { section, .service-item, .abonement-item, .certificate-item, .discount-card, .review-card, .order-card, .auth-container, .order-form, .review-form, .chat-container, .admin-card, .filters, .about-content, .about-hero, .about-quote, .gallery-item, .advantages .advantage-item, .add-review, .reviews-list, .gallery-intro, .gallery-note, .discounts-intro, .discounts-note { backdrop-filter: blur(6px); transition: backdrop-filter 0.2s ease; } section:hover, .service-item:hover, .discount-card:hover, .review-card:hover, .order-card:hover, .gallery-item:hover { backdrop-filter: blur(0px); } header, footer { backdrop-filter: blur(8px); } .content > h2, .orders-header h2, .admin-dashboard h2 { backdrop-filter: blur(4px); } } /* Адаптивность */ @media (max-width: 768px) { header h1 { font-size: 1.2rem; } nav a { padding: 0.3rem 0.6rem; font-size: 0.85rem; } h2 { font-size: 1.5rem; } .hero h2 { font-size: 1.8rem; } .hero { padding: 2rem 1rem; } .reviews-section { grid-template-columns: 1fr; gap: 1rem; } .message { max-width: 95%; } .footer-content { grid-template-columns: 1fr; text-align: center; gap: 1rem; } .footer-section h4::after { left: 50%; transform: translateX(-50%); } .footer-section p:hover { transform: translateX(0); } } /* ========== ИСПРАВЛЕНИЕ РАЗМЕРОВ БЛОКОВ С ТЕКСТОМ ========== */ /* Все текстовые блоки вне карточек - делаем полноразмерными */ .gallery-intro, .gallery-note, .discounts-intro, .discounts-note, .empty-orders, .empty-reviews, .empty-state, .orders-stats { width: 100%; max-width: 100%; box-sizing: border-box; margin: 0 0 1.5rem 0; padding: 1.2rem 1.5rem; background: rgba(0, 0, 0, 0.55) !important; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.2); } /* Текст внутри этих блоков */ .gallery-intro p, .gallery-note p, .discounts-intro p, .discounts-note p, .empty-orders p, .empty-reviews p, .empty-state p { color: white !important; margin: 0; line-height: 1.5; word-wrap: break-word; } /* Заголовки внутри этих блоков */ .discounts-note h3, .empty-orders h3, .empty-reviews h3, .empty-state h3 { color: #f5cba0 !important; margin-bottom: 0.8rem; font-size: 1.2rem; } /* Специальное предложение */ .special-offer { width: 100%; max-width: 100%; box-sizing: border-box; margin: 1.5rem 0; padding: 1.5rem; background: linear-gradient(135deg, #f5cba0 0%, #d4a373 100%) !important; border-radius: 20px; text-align: center; } .special-offer h3, .special-offer p { color: #2c1810 !important; margin: 0; } .special-offer h3 { margin-bottom: 0.8rem; } /* Фильтры */ .filters { width: 100%; max-width: 100%; box-sizing: border-box; margin-bottom: 1.5rem; padding: 1rem 1.5rem; background: rgba(0, 0, 0, 0.55) !important; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.2); } .filters h3 { color: #f5cba0 !important; margin-bottom: 0.8rem; font-size: 1.2rem; } /* Статистика заказов */ .orders-stats { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.5rem; padding: 0.8rem 1.2rem; } .orders-stats .stat-badge { background: rgba(255, 255, 255, 0.15); border-radius: 20px; padding: 0.3rem 0.8rem; font-size: 0.8rem; color: white !important; border: 1px solid rgba(255, 255, 255, 0.2); } /* Заголовки страниц */ .content > h2, .orders-header h2, .admin-dashboard h2 { width: auto; max-width: 100%; box-sizing: border-box; display: inline-block; margin-bottom: 1.5rem; padding: 0.6rem 1.2rem; background: rgba(0, 0, 0, 0.55) !important; border-radius: 12px; border-left: 4px solid #f5cba0; color: white !important; font-size: 1.8rem; } /* Контейнер для всего контента - чтобы ничего не выходило за края */ .content { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; width: 100%; overflow-x: hidden; } /* Все блоки внутри контента */ .content > * { max-width: 100%; box-sizing: border-box; } /* Отзывы */ .reviews-section { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; width: 100%; } .add-review, .reviews-list { width: 100%; min-width: 0; overflow: hidden; } /* Адаптивность для мобильных */ @media (max-width: 768px) { .gallery-intro, .gallery-note, .discounts-intro, .discounts-note, .empty-orders, .empty-reviews, .empty-state, .filters, .orders-stats { padding: 0.8rem 1rem; } .content > h2, .orders-header h2, .admin-dashboard h2 { font-size: 1.3rem; padding: 0.4rem 0.8rem; } .special-offer { padding: 1rem; } .special-offer h3 { font-size: 1.1rem; } .special-offer p { font-size: 0.9rem; } .reviews-section { gap: 1rem; } } /* ========== ИСПРАВЛЕНИЯ ========== */ /* Цвет заголовка "О нашей базе" на белый */ .about-hero h2 { color: white !important; } /* Блок специального предложения - такой же как у остальных */ .special-offer { background: rgba(0, 0, 0, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 20px; padding: 1.5rem; text-align: center; margin: 1.5rem 0; backdrop-filter: blur(4px); } .special-offer h3, .special-offer p { color: white !important; } .special-offer h3 { color: #f5cba0 !important; margin-bottom: 0.8rem; } /* Отступ сверху для пустого состояния отзывов */ .empty-reviews { margin-top: 1rem !important; } /* Статичное поле комментария - фиксированная высота */ .form-group textarea { resize: none; height: 100px; } /* Убираем смайлики в фильтрах заказов */ .filter-bar label { font-size: 0.85rem; font-weight: 500; color: #f5cba0 !important; } .filter-bar label::before { display: none; } /* Приводим фильтры к единому стилю */ .orders-filters .filter-bar label, .filters .filter-bar label { background: none; padding: 0; } /* Белый цвет для подсказок */ small { color: #ffffff !important; opacity: 0.8; }