From d6097e2b5db875c7a2a9b57054401f8cdc3df986 Mon Sep 17 00:00:00 2001 From: sdarbinyan Date: Fri, 20 Feb 2026 10:58:06 +0400 Subject: [PATCH] style fixes --- src/app/pages/home/home.component.html | 77 +- src/app/pages/home/home.component.scss | 867 +++++++++++------- .../item-detail/item-detail.component.scss | 443 ++++++++- 3 files changed, 1015 insertions(+), 372 deletions(-) diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index df26bb4..071f4c8 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -72,55 +72,78 @@ } } @else { - -
-
-

{{ brandName }}

-

Ваш маркетплейс товаров и услуг

-
+ +
+ +
+
+
+

Здесь ты найдёшь всё

+

Тысячи товаров в одном месте

+

просто и удобно

+ +
+ + Перейти в каталог + + +
+
+
+
@if (loading()) { -
- +
+

Загрузка категорий...

} @if (error()) { -
+

{{ error() }}

- +
} @if (!loading() && !error()) { -
-

Категории

+
+

Каталог товаров

@if (topLevelCategories().length === 0) { -
-
📦
+
+
📦

Категории пока отсутствуют

Скоро здесь появятся категории товаров

} @else { -
+
@for (category of topLevelCategories(); track category.categoryID) { -
- -
- @if (category.icon) { - - } @else { -
{{ category.name }}
- } -
-

{{ category.name }}

- + +
+ @if (isWideCategory(category.categoryID) && category.wideBanner && category.wideBanner !== true) { + + } @else if (category.icon) { + + } @else { +
{{ category.name.charAt(0) }}
+ }
- } +
+

{{ category.name }}

+

{{ getItemCount(category.categoryID) }} товаров

+
+ + }
}
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss index 0a23c1b..30e555d 100644 --- a/src/app/pages/home/home.component.scss +++ b/src/app/pages/home/home.component.scss @@ -1,329 +1,25 @@ -.home-container { - max-width: 1200px; - margin: 0 auto; - padding: 20px; - animation: fadeIn 0.5s ease-in; -} - +// ========== SHARED ANIMATIONS ========== @keyframes fadeIn { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } } -.hero { - text-align: center; - padding: 80px 20px; - background: var(--gradient-hero); - color: white; - border-radius: var(--radius-xl); - margin-bottom: 50px; - position: relative; - overflow: hidden; - box-shadow: var(--shadow-lg); - - &.hero-compact { - padding: 35px 20px; - margin-bottom: 25px; - - h1 { - font-size: 2.2rem; - margin-bottom: 8px; - } - - p { - font-size: 1.1rem; - } - } - - &::before { - content: ''; - position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; - background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); - animation: pulse 4s ease-in-out infinite; - } - - @keyframes pulse { - 0%, 100% { - transform: scale(1); - opacity: 0.5; - } - 50% { - transform: scale(1.1); - opacity: 0.8; - } - } - - h1 { - font-size: 3.5rem; - margin: 0 0 15px 0; - font-weight: 700; - position: relative; - z-index: 1; - text-shadow: 0 2px 10px rgba(0,0,0,0.2); - animation: slideDown 0.8s ease-out; - } - - @keyframes slideDown { - from { - opacity: 0; - transform: translateY(-30px); - } - to { - opacity: 1; - transform: translateY(0); - } - } - - p { - font-size: 1.4rem; - margin: 0; - opacity: 0.95; - position: relative; - z-index: 1; - animation: slideUp 0.8s ease-out 0.2s both; - } - - @keyframes slideUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 0.95; - transform: translateY(0); - } - } +@keyframes fadeInUp { + from { opacity: 0; transform: translateY(30px); } + to { opacity: 1; transform: translateY(0); } } -.loading, -.error { - text-align: center; - padding: 60px 20px; -} - -.spinner { - width: 50px; - height: 50px; - border: 4px solid #f3f3f3; - border-top: 4px solid var(--primary-color); - border-radius: 50%; - animation: spin 1s linear infinite; - margin: 0 auto 20px; +@keyframes slideDown { + from { opacity: 0; transform: translateY(-30px); } + to { opacity: 1; transform: translateY(0); } } @keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } } -.error { - button { - margin-top: 20px; - padding: 10px 24px; - background: var(--primary-color); - color: white; - border: none; - border-radius: 6px; - cursor: pointer; - font-size: 1rem; - - &:hover { - background: var(--primary-hover); - } - } -} - -.categories { - h2 { - font-size: 2rem; - margin-bottom: 30px; - color: #333; - } -} - -.empty-categories { - text-align: center; - padding: 60px 20px; - background: white; - border-radius: 12px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - - .empty-icon { - font-size: 4rem; - margin-bottom: 20px; - opacity: 0.5; - } - - h3 { - font-size: 1.5rem; - color: #333; - margin: 0 0 10px 0; - } - - p { - color: #666; - font-size: 1rem; - margin: 0; - } -} - -.categories-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 30px; - animation: fadeIn 0.6s ease-in 0.3s both; -} - -.category-card { - background: white; - border-radius: var(--radius-lg); - box-shadow: var(--shadow-md); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - height: 100%; - display: flex; - flex-direction: column; - overflow: hidden; - position: relative; - - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: var(--gradient-primary); - opacity: 0; - transition: opacity 0.3s ease; - z-index: 1; - } - - &:hover { - transform: translateY(-8px) scale(1.02); - box-shadow: var(--shadow-lg); - - &::before { - opacity: 0.1; - } - - .category-media img { - transform: scale(1.1); - } - - h3 { - color: var(--primary-color); - } - } -} - -.category-link { - display: flex; - flex-direction: column; - flex: 1; - text-decoration: none; - color: inherit; - position: relative; - min-height: 220px; - z-index: 2; - - .category-media { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - background: linear-gradient(135deg, #f6f7fb 0%, #e9ecf5 100%); - } - - .category-media img { - width: 100%; - height: 100%; - object-fit: contain; - background: white; - padding: 15px; - transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s ease; - filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08)); - border-radius: 8px; - } - - &:hover .category-media img { - transform: scale(1.05); - filter: drop-shadow(0 16px 32px rgba(0,0,0,0.18)) saturate(1.1); - } - - .category-fallback { - font-size: 1.5rem; - font-weight: 700; - color: var(--primary-color); - background: var(--gradient-primary); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - text-align: center; - padding: 20px; - } - - h3 { - position: absolute; - bottom: 0; - left: 0; - right: 0; - margin: 0; - padding: 20px; - font-size: 1.3rem; - font-weight: 600; - color: #333; - background: linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.95) 70%, transparent 100%); - z-index: 3; - transition: color 0.3s ease; - } -} - -@media (max-width: 768px) { - .home-container { - padding: 15px; - } - - .hero { - padding: 50px 20px; - border-radius: 15px; - - h1 { - font-size: 2.5rem; - } - - p { - font-size: 1.1rem; - } - } - - .categories-grid { - grid-template-columns: 1fr; - gap: 20px; - } - - .category-card { - &:hover { - transform: translateY(-4px) scale(1); - } - } -} - -// ========== novo HOME PAGE STYLES ========== +// ========== NOVO HOME PAGE STYLES ========== .novo-home { min-height: calc(100vh - 200px); animation: fadeIn 0.6s ease; @@ -619,26 +315,6 @@ } } -@keyframes slideDown { - from { - opacity: 0; - transform: translateY(-30px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - @media (max-width: 968px) { .novo-hero { padding: 4rem 2rem; @@ -701,3 +377,522 @@ transform: translateY(-4px); } } + +// ========== DEXAR REDESIGN 2026 STYLES ========== +.dexar-home { + width: 100%; + overflow-x: hidden; +} + +// Hero Section +.dexar-hero { + position: relative; + width: 100%; + height: 600px; + background-image: url('/assets/images/hero_background_desktop.webp'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + overflow: hidden; + + // Mobile hero image + @media (max-width: 768px) { + background-image: url('/assets/images/hero_background_mobile.webp'); + } +} + +.dexar-hero-overlay { + position: relative; + width: 100%; + height: 100%; + background: linear-gradient( + to right, + rgba(255, 255, 255, 0.1) 10%, + rgba(255, 255, 255, 0.1) 10%, + rgba(255, 255, 255, 0.1) 15%); + display: flex; + align-items: center; + padding: 0 56px; +} + +.dexar-hero-content { + max-width: 600px; + display: flex; + flex-direction: column; + gap: 12px; + animation: fadeInUp 0.8s ease-out; +} + +.dexar-hero-title { + font-weight: 500; + font-size: 42px; + color: var(--text-primary); + line-height: 1.2; + margin: 0; + animation: fadeInUp 0.8s ease-out 0.1s both; +} + +.dexar-hero-subtitle { + font-weight: 500; + font-size: 24px; + color: var(--text-primary); + line-height: 1.3; + margin: 0; + animation: fadeInUp 0.8s ease-out 0.2s both; +} + +.dexar-hero-tagline { + font-weight: 500; + font-size: 24px; + color: var(--text-primary); + line-height: 1.3; + margin: 0; + animation: fadeInUp 0.8s ease-out 0.3s both; +} + +.dexar-hero-actions { + display: flex; + gap: 16px; + margin-top: 12px; + animation: fadeInUp 0.8s ease-out 0.4s both; +} + +.dexar-btn-primary { + display: flex; + align-items: center; + justify-content: center; + width: 280px; + height: 48px; + background: var(--gradient-primary); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + font-weight: 500; + font-size: 20px; + color: #ffffff; + text-decoration: none; + letter-spacing: 1.08px; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 12px rgba(73, 118, 113, 0.3); + + &:hover { + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(73, 118, 113, 0.4); + } + + &:active { + transform: translateY(0px); + box-shadow: 0 2px 8px rgba(73, 118, 113, 0.3); + } +} + +.dexar-btn-secondary { + display: flex; + align-items: center; + justify-content: center; + gap: 9px; + width: 220px; + height: 48px; + background: var(--bg-secondary); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + font-weight: 500; + font-size: 20px; + color: var(--text-primary); + letter-spacing: 1.08px; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + + svg { + width: 11px; + height: 16px; + transition: transform 0.3s ease; + } + + &:hover { + background: #ffffff; + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); + + svg { + transform: translateX(3px); + } + } + + &:active { + transform: translateY(0px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + } +} + +// Loading & Error States +.dexar-loading, +.dexar-error { + text-align: center; + padding: 60px 20px; + max-width: 1200px; + margin: 0 auto; +} + +.dexar-spinner { + width: 50px; + height: 50px; + border: 4px solid #f3f3f3; + border-top: 4px solid var(--primary-color); + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto 20px; +} + +.dexar-error { + button { + margin-top: 20px; + padding: 12px 28px; + background: var(--primary-color); + color: white; + border: none; + border-radius: var(--radius-lg); + cursor: pointer; + font-size: 1.1rem; + font-weight: 500; + transition: all 0.3s ease; + + &:hover { + background: var(--primary-hover); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(73, 118, 113, 0.3); + } + } +} + +// Categories Section +.dexar-categories { + max-width: 1440px; + margin: 50px auto; + padding: 0 56px; +} + +.dexar-categories-title { + font-size: 2.5rem; + font-weight: 600; + margin-bottom: 40px; + color: var(--text-primary); +} + +.dexar-empty-categories { + text-align: center; + padding: 80px 20px; + background: white; + border-radius: 16px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); + + .dexar-empty-icon { + font-size: 4rem; + margin-bottom: 20px; + opacity: 0.5; + } + + h3 { + font-size: 1.8rem; + color: var(--text-primary); + margin: 0 0 12px 0; + font-weight: 600; + } + + p { + color: var(--text-secondary); + font-size: 1.1rem; + margin: 0; + } +} + +.dexar-categories-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 30px; + animation: fadeIn 0.6s ease-in 0.3s both; + width: 100%; +} + +.dexar-category-card { + width: 100%; + display: flex; + flex-direction: column; + text-decoration: none; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + + &:hover { + transform: translateY(-4px); + + .dexar-category-image { + box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2); + } + + .dexar-category-info { + box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2); + } + } +} + +.dexar-category-image { + width: 100%; + aspect-ratio: 4 / 3; + border: 1px solid var(--border-color); + border-radius: var(--radius-lg) var(--radius-lg) 0 0; + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + background: var(--bg-secondary); + position: relative; + + img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; + } + + &:hover img { + transform: scale(1.05); + } +} + +.dexar-category-fallback { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 5rem; + font-weight: 700; + color: var(--primary-color); + background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); +} + +.dexar-category-info { + width: 100%; + border: 1px solid var(--border-color); + border-top: none; + border-radius: 0 0 var(--radius-lg) var(--radius-lg); + padding: 12px 16px; + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); + background: #f5f3f9; + display: flex; + flex-direction: column; + justify-content: center; + gap: 2px; + transition: background 0.3s ease; +} + +.dexar-category-name { + font-weight: 600; + font-size: clamp(14px, 1.4vw, 18px); + color: var(--text-primary); + margin: 0; + line-height: 1.3; + display: -webkit-box; + line-clamp: 2; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + min-height: calc(2 * 1.3em); +} + +.dexar-category-count { + font-weight: 600; + font-size: clamp(11px, 1vw, 13px); + color: var(--text-secondary); + margin: 0; + line-height: 1.2; +} + +// Wide category card (spans 2 columns) +.dexar-category-card--wide { + grid-column: span 2; + + .dexar-category-image { + aspect-ratio: 8 / 3; + + img { + object-fit: cover; + } + } +} + +// Responsive Design +@media (max-width: 1200px) { + .dexar-hero { + height: 380px; + } + + .dexar-hero-overlay { + padding: 0 40px; + } + + .dexar-hero-title { + font-size: 38px; + } + + .dexar-hero-subtitle, + .dexar-hero-tagline { + font-size: 22px; + } + + .dexar-categories { + padding: 0 40px; + } + + .dexar-categories-grid { + grid-template-columns: repeat(3, 1fr); + gap: 24px; + } +} + +@media (max-width: 992px) { + .dexar-hero { + height: 340px; + } + + .dexar-hero-overlay { + padding: 0 32px; + } + + .dexar-hero-title { + font-size: 34px; + } + + .dexar-hero-subtitle, + .dexar-hero-tagline { + font-size: 20px; + } + + .dexar-btn-primary, + .dexar-btn-secondary { + height: 44px; + font-size: 18px; + } + + .dexar-btn-primary { + width: 240px; + } + + .dexar-btn-secondary { + width: 200px; + } + + .dexar-categories { + padding: 0 32px; + } + + .dexar-categories-grid { + grid-template-columns: repeat(3, 1fr); + gap: 20px; + } +} + +@media (max-width: 768px) { + .dexar-hero { + height: 320px; + background-position: right center; + } + + .dexar-hero-overlay { + padding: 0 20px; + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0.45) 0%, + rgba(255, 255, 255, 0.15) 100% + ); + } + + .dexar-hero-title { + font-size: 28px; + } + + .dexar-hero-subtitle, + .dexar-hero-tagline { + font-size: 17px; + } + + .dexar-hero-actions { + flex-direction: row; + gap: 10px; + width: 100%; + } + + .dexar-btn-primary, + .dexar-btn-secondary { + flex: 1; + min-width: 0; + max-width: 180px; + height: 40px; + font-size: 14px; + letter-spacing: 0.5px; + } + + .dexar-categories { + margin: 40px auto; + padding: 0 20px; + } + + .dexar-categories-title { + font-size: 2rem; + margin-bottom: 30px; + } + + .dexar-categories-grid { + grid-template-columns: repeat(2, 1fr); + gap: 16px; + } + + .dexar-category-info { + padding: 10px 12px; + } +} + +@media (max-width: 480px) { + .dexar-hero { + height: 280px; + } + + .dexar-hero-title { + font-size: 24px; + } + + .dexar-hero-subtitle, + .dexar-hero-tagline { + font-size: 15px; + } + + .dexar-hero-actions { + gap: 10px; + } + + .dexar-btn-primary, + .dexar-btn-secondary { + height: 38px; + font-size: 13px; + max-width: 160px; + } + + .dexar-categories { + padding: 0 16px; + } + + .dexar-categories-grid { + grid-template-columns: repeat(2, 1fr); + gap: 12px; + } + + .dexar-category-info { + padding: 8px 10px; + } + + .dexar-category-card:hover { + transform: translateY(-2px); + } +} diff --git a/src/app/pages/item-detail/item-detail.component.scss b/src/app/pages/item-detail/item-detail.component.scss index 9621d4e..590394e 100644 --- a/src/app/pages/item-detail/item-detail.component.scss +++ b/src/app/pages/item-detail/item-detail.component.scss @@ -642,22 +642,70 @@ $dx-card-bg: #f5f3f9; } } -// Responsive +// ========== DEXAR RESPONSIVE ========== + +// Large desktop — constrain gallery height +@media (min-width: 1201px) { + .dx-main-photo { + max-height: 560px; + } +} + +// Tablet landscape / small desktop +@media (max-width: 1200px) { + .dx-item-content { + gap: 32px; + } + + .dx-title { + font-size: 1.5rem; + } +} + +// Tablet portrait @media (max-width: 992px) { .dx-item-content { grid-template-columns: 1fr; gap: 32px; } + + .dx-gallery { + max-width: 600px; + margin: 0 auto; + } + + .dx-main-photo { + max-height: 480px; + aspect-ratio: auto; + } + + .dx-add-cart { + max-width: 100%; + } + + .dx-reviews-section, + .dx-qa-section { + h2 { + font-size: 1.3rem; + } + } } +// Mobile @media (max-width: 768px) { .dx-item-container { padding: 16px; } - // On mobile: thumbnails go below main photo + .dx-item-content { + gap: 24px; + margin-bottom: 32px; + } + + // Thumbnails go below main photo .dx-gallery { flex-direction: column; + max-width: 100%; } .dx-thumbnails { @@ -666,14 +714,16 @@ $dx-card-bg: #f5f3f9; max-height: none; overflow-x: auto; overflow-y: hidden; - order: 1; // put below main photo + order: 1; scrollbar-width: none; &::-webkit-scrollbar { display: none; } } .dx-main-photo { - order: 0; // main photo first + order: 0; + max-height: 400px; + aspect-ratio: auto; } .dx-thumb { @@ -690,8 +740,32 @@ $dx-card-bg: #f5f3f9; font-size: 1.8rem; } + .dx-old-price { + font-size: 1rem; + } + .dx-add-cart { max-width: 100%; + padding: 14px 20px; + font-size: 1rem; + } + + .dx-description { + h2 { + font-size: 1.15rem; + } + } + + .dx-specs-table { + .spec-key { + white-space: normal; + width: auto; + } + + td { + padding: 8px 10px; + font-size: 0.85rem; + } } .dx-review-form { @@ -707,21 +781,153 @@ $dx-card-bg: #f5f3f9; width: 100%; } } + + .dx-review-card { + padding: 16px; + } + + .dx-reviews-section, + .dx-qa-section { + margin-bottom: 32px; + + h2 { + font-size: 1.25rem; + margin-bottom: 16px; + } + } + + .dx-qa-card { + padding: 16px; + } + + .dx-question, + .dx-answer { + font-size: 0.9rem; + } } +// Small mobile @media (max-width: 480px) { + .dx-item-container { + padding: 12px; + } + + .dx-item-content { + gap: 20px; + margin-bottom: 24px; + } + + .dx-main-photo { + max-height: 300px; + border-radius: 10px; + + img, video { + padding: 8px; + } + } + .dx-thumb { - width: 56px; - height: 56px; - min-width: 56px; + width: 52px; + height: 52px; + min-width: 52px; } .dx-title { - font-size: 1.25rem; + font-size: 1.2rem; + } + + .dx-info { + gap: 16px; } .dx-current-price { - font-size: 1.6rem; + font-size: 1.5rem; + } + + .dx-rating { + flex-wrap: wrap; + gap: 6px; + } + + .dx-stock { + flex-wrap: wrap; + gap: 6px; + } + + .dx-add-cart { + padding: 12px 16px; + font-size: 0.95rem; + border-radius: 10px; + } + + .dx-review-form { + padding: 14px; + + h3 { + font-size: 1rem; + } + } + + .dx-star-selector { + .dx-star-pick { + font-size: 1.5rem; + } + } + + .dx-textarea { + padding: 12px; + font-size: 0.9rem; + } + + .dx-review-card { + padding: 14px; + } + + .dx-reviewer-name { + font-size: 0.9rem; + } + + .dx-review-text { + font-size: 0.9rem; + } + + .dx-specs-table { + td { + padding: 6px 8px; + font-size: 0.8rem; + display: block; + } + + .spec-key { + width: 100%; + padding-bottom: 2px; + } + + .spec-value { + padding-top: 0; + } + + tr { + display: flex; + flex-direction: column; + padding: 6px 0; + } + } + + .dx-qa-card { + padding: 14px; + } + + .dx-question, + .dx-answer { + font-size: 0.85rem; + gap: 8px; + } + + .dx-qa-label { + width: 24px; + height: 24px; + font-size: 0.7rem; } } @@ -1299,12 +1505,20 @@ $dx-card-bg: #f5f3f9; } } +// ========== NOVO RESPONSIVE ========== + +// Tablet portrait @media (max-width: 968px) { .novo-item-content { grid-template-columns: 1fr; gap: 2rem; } + .novo-gallery { + max-width: 600px; + margin: 0 auto; + } + .novo-info .novo-title { font-size: 1.5rem; } @@ -1313,6 +1527,10 @@ $dx-card-bg: #f5f3f9; font-size: 2rem; } + .novo-info .novo-add-cart { + max-width: 100%; + } + .novo-review-form { padding: 1.5rem; @@ -1328,6 +1546,213 @@ $dx-card-bg: #f5f3f9; } } +// Mobile +@media (max-width: 768px) { + .novo-item-container { + padding: 1rem; + } + + .novo-item-content { + gap: 1.5rem; + margin-bottom: 2rem; + } + + .novo-gallery { + max-width: 100%; + + .novo-main-photo { + border-radius: var(--radius-lg); + margin-bottom: 0.75rem; + } + + .novo-thumbnails { + grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); + gap: 0.5rem; + } + } + + .novo-info { + .novo-title { + font-size: 1.35rem; + } + + .novo-rating { + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 1rem; + } + + .novo-price-block { + padding: 1rem; + + .current-price { + font-size: 1.75rem; + } + + .old-price { + font-size: 0.95rem; + } + } + + .novo-stock { + flex-wrap: wrap; + gap: 0.5rem; + padding: 0.75rem; + } + + .novo-add-cart { + padding: 1rem 1.5rem; + font-size: 1rem; + margin-bottom: 1.5rem; + } + + .novo-description { + h3 { + font-size: 1.1rem; + } + } + } + + .novo-specs-table { + .spec-key { + white-space: normal; + width: auto; + } + + td { + padding: 8px 10px; + font-size: 0.85rem; + } + } + + .novo-reviews { + margin-top: 2rem; + padding-top: 2rem; + + h2 { + font-size: 1.35rem; + margin-bottom: 1.5rem; + } + } + + .novo-review-card { + padding: 1rem; + } + + .novo-review-form { + padding: 1.25rem; + + h3 { + font-size: 1.1rem; + } + } +} + +// Small mobile +@media (max-width: 480px) { + .novo-item-container { + padding: 0.75rem; + } + + .novo-item-content { + gap: 1.25rem; + margin-bottom: 1.5rem; + } + + .novo-gallery { + .novo-thumbnails { + grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); + gap: 0.4rem; + } + + .novo-main-photo { + border-radius: var(--radius-md); + } + } + + .novo-info { + .novo-title { + font-size: 1.15rem; + } + + .novo-price-block { + padding: 0.75rem; + + .current-price { + font-size: 1.5rem; + } + } + + .novo-stock { + padding: 0.6rem; + font-size: 0.85rem; + } + + .novo-add-cart { + padding: 0.85rem 1rem; + font-size: 0.95rem; + border-radius: var(--radius-md); + } + } + + .novo-review-form { + padding: 1rem; + + .novo-rating-input { + .novo-star-selector { + .novo-star { + font-size: 1.6rem; + } + } + } + + .novo-textarea { + padding: 0.75rem; + font-size: 0.9rem; + } + } + + .novo-review-card { + padding: 0.75rem; + + .review-header { + flex-direction: column; + gap: 0.5rem; + + .review-stars { + align-self: flex-start; + } + } + + .review-text { + font-size: 0.9rem; + } + } + + .novo-specs-table { + td { + padding: 6px 8px; + font-size: 0.8rem; + display: block; + } + + .spec-key { + width: 100%; + padding-bottom: 2px; + } + + .spec-value { + padding-top: 0; + } + + tr { + display: flex; + flex-direction: column; + padding: 6px 0; + } + } +} + // ========== BADGES, TAGS & SPECS (shared) ========== // Badges