css/style.css - main - Artist_A/test

css/style.css
271 строка7 KB
Anna
Первый коммит: секция каталога для тестового задания
29 июн 2026, 21:53
29 июн 2026, 21:53cbb73a4
	/* ============================================================
                   БАЗОВЫЕ СБРОСЫ
                   ============================================================ */
	*,
	*::before,
	*::after {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	/* ============================================================
                   ТИПОГРАФИКА И ТЕЛО
                   ============================================================ */
	body {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
		background: #faf8f6;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		padding: 40px 20px;
		color: #1c1c1c;
		line-height: 1.4;
		-webkit-font-smoothing: antialiased;
	}

	.container {
		max-width: 1240px;
		width: 100%;
	}

	/* ============================================================
                   ЗАГОЛОВОК СЕКЦИИ — РИТМ И ИЕРАРХИЯ
                   ============================================================ */
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		flex-wrap: wrap;
		margin-bottom: 40px;
		padding-bottom: 8px;
		border-bottom: 2px solid #ece8e3;
	}

	.section-header h2 {
		font-size: 30px;
		font-weight: 600;
		letter-spacing: -0.02em;
		color: #1c1c1c;
		line-height: 1.2;
	}

	.section-header .see-all {
		font-size: 15px;
		font-weight: 450;
		color: #8a7a6a;
		text-decoration: none;
		padding-bottom: 2px;
		border-bottom: 1.5px solid transparent;
		transition: border-color 0.2s ease, color 0.2s ease;
		letter-spacing: 0.01em;
	}

	.section-header .see-all:hover {
		color: #1c1c1c;
		border-bottom-color: #1c1c1c;
	}

	/* ============================================================
                   СЕТКА — 3 КОЛОНКИ С ВОЗДУХОМ
                   ============================================================ */
	.catalog-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
	}

	/* ============================================================
                   КАРТОЧКА ТОВАРА — АККУРАТНЫЙ РИТМ ВНУТРИ
                   ============================================================ */
	.product-card {
		background: #ffffff;
		border-radius: 18px;
		padding: 20px 20px 24px;
		display: flex;
		flex-direction: column;
		transition: transform 0.3s cubic-bezier(0.25, 0, 0, 1), box-shadow 0.35s ease;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
		border: 1px solid rgba(0, 0, 0, 0.03);
		will-change: transform;
	}

	/* ----- HOVER КАРТОЧКИ: подъём + глубокая тень ----- */
	.product-card:hover {
		transform: translateY(-8px);
		box-shadow: 0 20px 48px rgba(0, 0, 0, 0.07), 0 4px 12px rgba(0, 0, 0, 0.03);
	}

	/* ============================================================
                   ИЗОБРАЖЕНИЕ — ПРОСТРАНСТВО И ПЛАВНОСТЬ
                   ============================================================ */
	.product-image {
		width: 100%;
		aspect-ratio: 1 / 1;
		background: #f0ece7;
		border-radius: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 18px;
		transition: background 0.25s ease;
		font-size: 14px;
		color: #b5a99b;
		font-weight: 400;
		letter-spacing: 0.5px;
		user-select: none;
	}

	.product-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 14px;
		display: block;
	}

	.product-card:hover .product-image {
		background: #e9e3dd;
	}

	.product-image .placeholder-icon {
		opacity: 0.6;
		font-size: 28px;
		line-height: 1;
	}

	/* ============================================================
                   ТИПОГРАФИКА ВНУТРИ КАРТОЧКИ — ИЕРАРХИЯ И РИТМ
                   ============================================================ */

	/* Бренд — маленький, капс, разреженный */
	.product-brand {
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: #9a8a7a;
		margin-bottom: 2px;
		font-weight: 550;
	}

	/* Название — средний, полужирный, читаемый */
	.product-name {
		font-size: 18px;
		font-weight: 550;
		color: #1c1c1c;
		margin-bottom: 4px;
		line-height: 1.3;
		letter-spacing: -0.01em;
	}

	/* Характеристика — маленькая, светлая, для контекста */
	.product-meta {
		font-size: 13px;
		color: #a09080;
		margin-bottom: 14px;
		font-weight: 400;
		letter-spacing: 0.01em;
	}

	/* Цена — крупная, жирная, с акцентом */
	.product-price {
		font-size: 21px;
		font-weight: 630;
		color: #1c1c1c;
		margin-bottom: 18px;
		letter-spacing: -0.01em;
		line-height: 1.2;
	}

	.product-price .currency-symbol {
		font-weight: 400;
		font-size: 15px;
		color: #9a8a7a;
		margin-left: 2px;
	}

	/* ============================================================
                   КНОПКА — ЧИСТАЯ, С HOVER И АКТИВНЫМ СОСТОЯНИЕМ
                   ============================================================ */
	.btn-cart {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 13px 0 12px;
		background: #1c1c1c;
		color: #ffffff;
		font-size: 15px;
		font-weight: 510;
		border: none;
		border-radius: 40px;
		cursor: pointer;
		transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
		letter-spacing: 0.02em;
		margin-top: auto;
		font-family: inherit;
		line-height: 1;
		-webkit-tap-highlight-color: transparent;
	}

	/* ----- HOVER КНОПКИ: затемнение + лёгкая тень ----- */
	.btn-cart:hover {
		background: #2c3e50;
		box-shadow: 0 6px 20px rgba(28, 28, 28, 0.12);
	}

	/* ----- ACTIVE: тактильное нажатие ----- */
	.btn-cart:active {
		transform: scale(0.97);
		background: #1c1c1c;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	/* ----- Фокус для доступности (клавиатура) ----- */
	.btn-cart:focus-visible {
		outline: 2px solid #1c1c1c;
		outline-offset: 3px;
	}



	/* ============================================================
                   ДОПОЛНИТЕЛЬНО: СОСТОЯНИЕ ЗАГРУЗКИ (ДЕМО)
                   ============================================================ */
	.product-image .placeholder-icon {
		transition: opacity 0.3s;
	}

	.product-card:hover .placeholder-icon {
		opacity: 0.8;
	}

	/* ============================================================
                   МЕЛКИЕ ДЕТАЛИ: АККУРАТНЫЙ РИТМ ВНУТРИ КАРТОЧКИ
                   ============================================================ */
	/* Все дочерние элементы с отступами только сверху */
	.product-card>*+* {
		margin-top: 0;
	}

	/* При этом у бренда отступа сверху нет — он первый после картинки */
	.product-brand {
		margin-top: 0;
	}

	/* У кнопки margin-top: auto — прижимается к низу */
	.btn-cart {
		margin-top: auto;
	}

	/* Дополнительный нюанс: при очень длинных названиях */
	.product-name {
		overflow-wrap: break-word;
		word-break: break-word;
	}

	/* Плавный скролл для всей страницы */
	html {
		scroll-behavior: smooth;
	}