/** * CRITICAL CSS - Above-the-fold стили для СНИКЕРХЭД * Этот файл содержит минимальный набор стилей для быстрого первого рендера * Загружается inline в для устранения render-blocking * * Размер: ~4-5KB (сжатый) * Покрывает: Header, Hero, первые 4-6 карточек товаров */ /* ============================================ 1. RESET & BASE (критичные) ============================================ */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } :root { /* Только критичные цвета */ --primary: #2563eb; --dark: #111827; --gray: #6b7280; --gray-light: #f3f4f6; --white: #ffffff; --danger: #ef4444; --success: #10b981; /* Базовые spacing */ --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; /* Базовые радиусы */ --radius-sm: 8px; --radius-md: 12px; /* Базовая тень */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.07); /* Transition */ --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.5; color: var(--dark); background: var(--gray-light); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================ 2. HEADER (критичный - всегда видим) ============================================ */ header.ecom-header, .ecom-header, .catalog-header, .main-header, header { display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 1000 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; overflow: visible !important; } .ecom-header .main-header { position: sticky !important; top: 0 !important; background: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; } .catalog-header .container, .main-header .container { display: flex; justify-content: space-between; max-width: 100%; gap: var(--spacing-md); } .logo { font-size: 18px; font-weight: 700; color: var(--primary); text-decoration: none; display: flex; align-items: center; gap: 8px; } /* ИСПРАВЛЕНО: Убраны фиксированные размеры для header-btn с текстом */ .header-actions .header-btn { border: none; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--dark); transition: var(--transition); cursor: pointer; padding: 0.5rem; } /* ============================================ 3. CONTAINER & LAYOUT (критичный) ============================================ */ /* ВАЖНО: Базовые стили контейнера переопределяются в container-system.css */ /* УДАЛЕНО: старое определение .container - теперь управляется через container-system.css */ /* .container определяется в container-system.css с max-width: 80% */ .catalog-layout { display: grid; gap: var(--spacing-lg); } /* ============================================ 4. КАРТОЧКА ТОВАРА (критичная - первый экран) ============================================ */ .products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } /* ПРИМЕЧАНИЕ: Минимальные стили для первого рендера. Полная реализация в catalog-card.css загружается отдельно. Эти стили предотвращают FOUC (Flash of Unstyled Content). */ .product.product-card { background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; height: 100%; } /* ============================================ 5. БЕЙДЖИ (критичные - первый экран) ============================================ */ .product-badges-compact { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 3; } .badge-discount { padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--danger); color: var(--white); } .badge-new { padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--success); color: var(--white); } /* ============================================ 6. КНОПКИ (критичные) ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border: none; border-radius: var(--radius-md); font-weight: 600; font-size: 14px; cursor: pointer; transition: var(--transition); text-decoration: none; } .btn-primary { background: var(--dark); color: var(--white); } .btn-secondary { background: var(--gray-light); color: var(--dark); } /* ============================================ 7. СКЕЛЕТОН (критичный - первый рендер) ============================================ */ .skeleton-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .skeleton-card { background: var(--white); border-radius: 12px; overflow: hidden; animation: skeleton-pulse 1.5s ease-in-out infinite; } .skeleton-image { width: 100%; aspect-ratio: 1; background: var(--gray-light); } .skeleton-content { padding: 12px; } .skeleton-line { height: 12px; background: var(--gray-light); border-radius: 4px; margin-bottom: 8px; } @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* ============================================ 8. RESPONSIVE (только критичные брейкпоинты) ============================================ */ @media (min-width: 768px) { .products-grid, .skeleton-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } } @media (min-width: 1024px) { .catalog-layout { grid-template-columns: 280px 1fr; } .products-grid, .skeleton-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }