diff --git a/src/public/css/style.css b/src/public/css/style.css index 6f0422c..4a71822 100644 --- a/src/public/css/style.css +++ b/src/public/css/style.css @@ -10,6 +10,8 @@ --success: #00b894; --warn: #fdcb6e; --error: #ff7675; + --sale: #ff6b6b; + --sale-bg: rgba(255, 107, 107, 0.12); --radius: 12px; --shadow: 0 8px 32px rgba(0, 0, 0, 0.35); font-family: 'DM Sans', system-ui, sans-serif; @@ -63,6 +65,9 @@ a:hover { } .logo { + display: inline-flex; + align-items: center; + gap: 0.45rem; font-size: 1.35rem; font-weight: 700; color: var(--text); @@ -70,6 +75,10 @@ a:hover { letter-spacing: -0.02em; } +.logo__icon { + color: var(--accent-hover); +} + .logo:hover { color: var(--accent-hover); text-decoration: none; @@ -78,13 +87,24 @@ a:hover { .search { flex: 1; display: flex; + align-items: center; gap: 0.5rem; min-width: 200px; max-width: 420px; + position: relative; +} + +.search__icon { + position: absolute; + left: 0.75rem; + color: var(--muted); + pointer-events: none; + display: flex; } .search input { flex: 1; + padding-left: 2.35rem; } .nav { @@ -103,10 +123,25 @@ a:hover { color: var(--text); } +.nav__link--icon { + display: inline-flex; + align-items: center; + gap: 0.35rem; + text-decoration: none; +} + +.nav__link--icon:hover { + text-decoration: none; +} + .nav__cart { position: relative; } +.nav__admin { + color: var(--warn); +} + .badge { display: inline-flex; align-items: center; @@ -144,7 +179,8 @@ a:hover { letter-spacing: -0.03em; } -.hero p { +.hero p, +.hero__lead { margin: 0; color: var(--muted); } @@ -185,7 +221,7 @@ a:hover { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; - transition: transform 0.2s, box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } .card:hover { @@ -193,13 +229,40 @@ a:hover { box-shadow: var(--shadow); } +.card--sale { + border-color: rgba(255, 107, 107, 0.35); + box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.08); +} + +.card--sale:hover { + border-color: rgba(255, 107, 107, 0.55); +} + .card__image-wrap { display: block; + position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface-2); } +.card__sale-ribbon { + position: absolute; + top: 0.65rem; + left: 0.65rem; + z-index: 2; + display: inline-flex; + align-items: center; + gap: 0.3rem; + padding: 0.3rem 0.55rem; + font-size: 0.75rem; + font-weight: 700; + color: #fff; + background: linear-gradient(135deg, #ff6b6b, #ee5a5a); + border-radius: 6px; + box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4); +} + .card__image { width: 100%; height: 100%; @@ -240,10 +303,8 @@ a:hover { color: var(--accent-hover); } -.card__price { - margin: 0 0 0.75rem; - font-size: 1.1rem; - font-weight: 700; +.card .price-block { + margin-bottom: 0.75rem; } .card__form { @@ -272,9 +333,16 @@ a:hover { } .product-detail__price { - font-size: 1.75rem; - font-weight: 700; - margin: 0.5rem 0; + margin: 0.75rem 0 1rem; + padding: 1rem 1.15rem; + background: var(--surface-2); + border: 1px solid var(--border); + border-radius: var(--radius); +} + +.product-detail__price:has(.price-block--sale) { + border-color: rgba(255, 107, 107, 0.3); + background: var(--sale-bg); } .product-detail__desc { @@ -323,15 +391,29 @@ a:hover { } .link-back { - display: inline-block; + display: inline-flex; + align-items: center; + gap: 0.35rem; margin-top: 1rem; color: var(--muted); + text-decoration: none; +} + +.link-back:hover { + color: var(--text); + text-decoration: none; +} + +.icon { + flex-shrink: 0; + vertical-align: middle; } .btn { display: inline-flex; align-items: center; justify-content: center; + gap: 0.45rem; padding: 0.55rem 1.1rem; border: none; border-radius: 8px; @@ -1008,27 +1090,129 @@ body:has(.cookie-banner) .main { } .price-block { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.35rem; +} + +.price-block__meta { + display: flex; + align-items: center; + gap: 0.4rem; + flex-wrap: wrap; +} + +.price-block__tag { + display: inline-flex; + align-items: center; + gap: 0.25rem; + font-size: 0.7rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--sale); +} + +.price-block__badge { + font-size: 0.7rem; + font-weight: 700; + padding: 0.15rem 0.45rem; + border-radius: 4px; + background: var(--sale-bg); + color: var(--sale); +} + +.price-block__prices { display: flex; flex-wrap: wrap; align-items: baseline; - gap: 0.35rem 0.6rem; - margin: 0.35rem 0 0; + gap: 0.5rem 0.75rem; } .price-block__old { - text-decoration: line-through; + position: relative; color: var(--muted); - font-size: 0.9rem; + font-size: 0.95em; + font-weight: 500; + text-decoration: line-through; + text-decoration-thickness: 2px; + text-decoration-color: var(--sale); + opacity: 0.85; +} + +.price-block__current { + font-weight: 700; + color: var(--text); + letter-spacing: -0.02em; +} + +.price-block__current--solo { + font-size: 1.1rem; } .price-block--sale .price-block__current { - color: var(--accent); - font-weight: 600; + color: var(--sale); + font-weight: 800; +} + +.price-block__savings { + font-size: 0.85rem; + color: var(--success); + font-weight: 500; +} + +.price-block--md .price-block__current { + font-size: 1.2rem; +} + +.price-block--md .price-block__old { + font-size: 0.95rem; +} + +.price-block--lg .price-block__current { + font-size: clamp(1.75rem, 4vw, 2.25rem); +} + +.price-block--lg .price-block__old { + font-size: 1.15rem; +} + +.price-block--sm .price-block__meta { + display: none; +} + +.price-block--sm .price-block__prices { + flex-direction: column; + align-items: flex-start; + gap: 0.15rem; +} + +.price-block--sm .price-block__current { + font-size: 1rem; +} + +.cart-table__price .price-block { + margin: 0; +} + +.promo-countdown--product { + display: flex; + align-items: center; + gap: 0.4rem; + margin: 0.75rem 0 0; + padding: 0; + font-size: 0.9rem; + color: var(--muted); +} + +.promo-countdown--product strong { + color: var(--warn); } .badge--sale { - background: rgba(239, 68, 68, 0.15); - color: #f87171; + background: var(--sale-bg); + color: var(--sale); font-size: 0.75rem; padding: 0.15rem 0.45rem; border-radius: 4px; diff --git a/src/views/cart.ejs b/src/views/cart.ejs index d7eaa39..84425e4 100644 --- a/src/views/cart.ejs +++ b/src/views/cart.ejs @@ -29,20 +29,22 @@ <% } %> <%= item.name %> -
Доставка по России. Оплата при получении.
+Доставка по России · Оплата при получении · Акции со скидкой в каталоге