3177 lines
59 KiB
Plaintext
3177 lines
59 KiB
Plaintext
@import "mixins.less";
|
||
// =======================
|
||
// === БАЗОВЫЕ СТИЛИ ===
|
||
// =======================
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html, body {
|
||
height: 100%;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
font-family: @font-main;
|
||
background-color: @color-secondary;
|
||
color: @color-text-dark;
|
||
line-height: 1.6;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1210px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
ul {
|
||
list-style: none;
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-family: @font-heading;
|
||
margin: 0;
|
||
}
|
||
|
||
p, li, span {
|
||
font-family: @font-main;
|
||
}
|
||
|
||
// =======================
|
||
// === КОМПОНЕНТЫ ===
|
||
// =======================
|
||
|
||
.logo, .footer-logo {
|
||
font: bold 32px/1 @font-logo;
|
||
letter-spacing: 2px;
|
||
text-shadow: @shadow-dark;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.btn {
|
||
padding: 12px 30px;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
text-transform: uppercase;
|
||
transition: all 0.3s ease;
|
||
font-family: @font-main;
|
||
|
||
&.primary-btn {
|
||
background-color: @color-button;
|
||
color: @color-text-light;
|
||
|
||
&:hover {
|
||
background-color: lighten(@color-button, 10%);
|
||
transform: translateY(-2px);
|
||
box-shadow: @shadow-light;
|
||
}
|
||
}
|
||
}
|
||
|
||
.number-circle {
|
||
.flex-center();
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
background-color: @color-button;
|
||
color: @color-text-light;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.breadcrumbs {
|
||
font-size: 14px;
|
||
margin-bottom: 20px;
|
||
color: #666;
|
||
|
||
a {
|
||
color: #666;
|
||
opacity: 0.7;
|
||
&:hover { opacity: 1; }
|
||
}
|
||
|
||
.current-page {
|
||
font-weight: bold;
|
||
color: @color-text-dark;
|
||
}
|
||
}
|
||
|
||
// =======================
|
||
// === ШАПКА САЙТА ===
|
||
// =======================
|
||
.header {
|
||
background-color: @color-secondary;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||
z-index: 1000;
|
||
|
||
&__top, &__bottom {
|
||
padding: 15px 0;
|
||
.container {
|
||
.flex-between();
|
||
gap: 20px;
|
||
}
|
||
}
|
||
|
||
&__bottom {
|
||
padding: 10px 0;
|
||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||
|
||
.catalog-link.active-catalog {
|
||
background-color: rgba(0, 0, 0, 0.08);
|
||
pointer-events: none;
|
||
}
|
||
}
|
||
|
||
.search-catalog {
|
||
.flex-center();
|
||
border: 2px solid @color-text-dark;
|
||
background-color: #fff;
|
||
max-width: 600px;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
|
||
.catalog-dropdown {
|
||
position: relative;
|
||
background-color: #f8f8f8;
|
||
padding: 10px 15px 10px 25px;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
border-right: 1px solid @color-text-dark;
|
||
.flex-center(10px);
|
||
width: 200px;
|
||
flex-shrink: 0;
|
||
|
||
&__menu {
|
||
.menu-base();
|
||
li {
|
||
padding: 8px 0;
|
||
cursor: pointer;
|
||
transition: color 0.3s;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
&:last-child { border-bottom: none; }
|
||
&:hover { color: @color-accent; }
|
||
}
|
||
}
|
||
&:hover &__menu { display: block; }
|
||
}
|
||
|
||
.search-box {
|
||
.flex-center();
|
||
padding: 0 15px;
|
||
flex-grow: 1;
|
||
position: relative;
|
||
font-size: 15px;
|
||
|
||
input {
|
||
border: none;
|
||
padding: 10px 30px 10px 0;
|
||
outline: none;
|
||
font-size: 16px;
|
||
width: 100%;
|
||
text-align: left;
|
||
}
|
||
|
||
.search-icon {
|
||
font-size: 20px;
|
||
width: 24px;
|
||
height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}}
|
||
|
||
&__icons--top {
|
||
.flex-center(15px);
|
||
flex-shrink: 0;
|
||
.icon { .icon-base(); font-size: 20px;}
|
||
}
|
||
|
||
.nav-list {
|
||
.flex-center(30px);
|
||
font-size: 18px;
|
||
a {
|
||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
|
||
&:hover { text-shadow: @shadow-dark; }
|
||
&.active {
|
||
border-bottom: 2px solid @color-button;
|
||
padding-bottom: 5px;
|
||
text-shadow: @shadow-dark;
|
||
}
|
||
&[href="#footer"] {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.catalog-link {
|
||
.flex-center(10px);
|
||
border-radius: 4px;
|
||
white-space: nowrap;
|
||
font-size: 18px;
|
||
padding: 10px 18px;
|
||
&:hover { background-color: rgba(0, 0, 0, 0.05); }
|
||
}
|
||
|
||
.header-phone {
|
||
font-weight: bold;
|
||
color: @color-button;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
// =======================
|
||
// === ОСНОВНЫЕ СЕКЦИИ ===
|
||
// =======================
|
||
.hero {
|
||
padding: 15px 0;
|
||
|
||
&__content {
|
||
.flex-center(50px);
|
||
min-height: 60vh;
|
||
align-items: center;
|
||
}
|
||
|
||
&__image-block {
|
||
position: relative;
|
||
flex: 0 0 40%;
|
||
max-width: 600px;
|
||
height: 600px;
|
||
.flex-center();
|
||
|
||
.hero__circle {
|
||
position: absolute;
|
||
width: 450px;
|
||
height: 450px;
|
||
background-color: @color-primary;
|
||
border-radius: 50%;
|
||
z-index: 1;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.hero__img {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
|
||
&__text-block {
|
||
flex: 0 0 60%;
|
||
padding-left: 50px;
|
||
|
||
h1 {
|
||
font-size: 42px;
|
||
font-weight: normal;
|
||
margin-bottom: 25px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.hero__usp-text {
|
||
position: relative;
|
||
padding-left: 50px;
|
||
margin-bottom: 35px;
|
||
line-height: 1.7;
|
||
.flex-center();
|
||
justify-content: flex-start;
|
||
min-height: 40px;
|
||
font-size: 16px;
|
||
|
||
&::before {
|
||
content: "✓";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 32px;
|
||
height: 32px;
|
||
border: 2px solid @color-button;
|
||
background-color: transparent;
|
||
color: @color-button;
|
||
border-radius: 50%;
|
||
.flex-center();
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.btn.primary-btn {
|
||
margin: 25px 0 0 50px;
|
||
padding: 14px 35px;
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.advantages {
|
||
padding: 30px 0 40px;
|
||
|
||
&__header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 50px;
|
||
margin-bottom: 40px;
|
||
h2 {
|
||
font-size: 32px;
|
||
font-weight: normal;
|
||
flex: 0 0 30%;
|
||
}
|
||
}
|
||
|
||
&__items {
|
||
flex: 0 0 70%;
|
||
display: flex;
|
||
gap: 30px;
|
||
}
|
||
|
||
.advantage-item {
|
||
flex: 1;
|
||
text-align: left;
|
||
position: relative;
|
||
padding-top: 30px;
|
||
|
||
&__number {
|
||
.number-circle();
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
h4 {
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.promo-images {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-top: 50px;
|
||
|
||
.promo-image-col {
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-radius: 8px;
|
||
flex: 1;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: @shadow-light;
|
||
.image-overlay-text { background-color: rgba(0, 0, 0, 0.6); }
|
||
img { transform: scale(1.05); }
|
||
.image-overlay-text h4,
|
||
.image-overlay-text .overlay-link { transform: translateY(0); }
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 350px;
|
||
object-fit: cover;
|
||
display: block;
|
||
transition: transform 0.5s ease;
|
||
}
|
||
|
||
.image-overlay-text {
|
||
.image-overlay();
|
||
h4 {
|
||
font-size: 24px;
|
||
text-transform: uppercase;
|
||
line-height: 1.2;
|
||
margin-bottom: 15px;
|
||
transform: translateY(20px);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
}
|
||
|
||
.overlay-link {
|
||
display: inline-block;
|
||
text-transform: uppercase;
|
||
font-weight: bold;
|
||
border-radius: 3px;
|
||
margin-top: 15px;
|
||
padding: 10px 25px;
|
||
background-color: @color-button;
|
||
color: @color-text-light;
|
||
font-size: 12px;
|
||
transform: translateY(20px);
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
background-color: lighten(@color-button, 10%);
|
||
transform: translateY(-2px);
|
||
box-shadow: @shadow-light;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.about {
|
||
padding: 40px 0 80px;
|
||
|
||
&__content {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 50px;
|
||
}
|
||
|
||
&__column {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
&--left { flex: 0 0 40%; margin-bottom: 30px; }
|
||
&--right {
|
||
flex: 0 0 60%;
|
||
.about__caption {
|
||
padding-right: 50px;
|
||
}
|
||
}
|
||
}
|
||
|
||
&__text-block {
|
||
margin-bottom: 30px;
|
||
h2 { margin-bottom: 15px; }
|
||
}
|
||
|
||
&__img {
|
||
width: 93%;
|
||
object-fit: cover;
|
||
display: block;
|
||
&--small { height: 300px; }
|
||
&--large { height: 450px; }
|
||
}
|
||
|
||
.text-justified {
|
||
text-align: justify;
|
||
color: #555;
|
||
}
|
||
}
|
||
|
||
.solutions {
|
||
padding: 0;
|
||
background-color: @color-secondary;
|
||
|
||
&-slider {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 1200px;
|
||
margin: 40px auto;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
|
||
&__slides {
|
||
display: flex;
|
||
width: 200%;
|
||
height: 100%;
|
||
animation: slideLeftRight 10s infinite ease-in-out;
|
||
}
|
||
|
||
&__slide {
|
||
width: 50%;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: transform 0.5s ease, box-shadow 0.5s ease;
|
||
|
||
&:hover {
|
||
transform: scale(1.02);
|
||
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
|
||
.solution-img {
|
||
transform: scale(1.05);
|
||
filter: brightness(0.8);
|
||
}
|
||
.solution-text-overlay {
|
||
opacity: 1;
|
||
transform: translateY(-5px);
|
||
}
|
||
.solution-image-link {
|
||
transform: translateX(-50%) translateY(-6px);
|
||
background-color: rgba(255,255,255,0.9);
|
||
color: @color-text-dark;
|
||
}
|
||
}
|
||
}
|
||
|
||
.solution-img {
|
||
width: 100%;
|
||
height: auto;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.solution-text-overlay {
|
||
position: absolute;
|
||
top: 15%;
|
||
left: 8%;
|
||
color: #493131;
|
||
text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
|
||
z-index: 2;
|
||
opacity: 0.9;
|
||
transition: opacity 0.5s ease, transform 0.5s ease;
|
||
h2 {
|
||
font-size: 35px;
|
||
text-transform: uppercase;
|
||
margin-bottom: 10px;
|
||
}
|
||
p {
|
||
font-size: 25px;
|
||
text-transform: uppercase;
|
||
}
|
||
}
|
||
|
||
.solution-image-link {
|
||
position: absolute;
|
||
bottom: 40px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
padding: 12px 30px;
|
||
border: 2px solid @color-text-light;
|
||
color: #493131;
|
||
text-transform: uppercase;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
background: transparent;
|
||
transition: 0.4s ease;
|
||
z-index: 2;
|
||
&:hover {
|
||
background: @color-text-light;
|
||
color: @color-text-dark;
|
||
transform: translateX(-50%) translateY(-2px);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes slideLeftRight {
|
||
0%, 40% { transform: translateX(0); }
|
||
50%, 90% { transform: translateX(-50%); }
|
||
100% { transform: translateX(0); }
|
||
}
|
||
|
||
.stats {
|
||
padding: 0;
|
||
margin-top: 20px;
|
||
|
||
.container {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
&__items {
|
||
display: flex;
|
||
gap: 20px;
|
||
.stat-item {
|
||
text-align: left;
|
||
.stat-number {
|
||
font-size: 36px;
|
||
font-weight: bold;
|
||
color: @color-text-dark;
|
||
margin-bottom: 5px;
|
||
}
|
||
.stat-label { color: @color-text-dark; }
|
||
}
|
||
}
|
||
}
|
||
|
||
.faq {
|
||
padding: 50px 0;
|
||
|
||
h2 {
|
||
text-align: left;
|
||
font-size: 32px;
|
||
font-weight: normal;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
&__items {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 40px 60px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.faq-item {
|
||
flex: 0 0 calc(50% - 30px);
|
||
.flex-center(15px);
|
||
align-items: flex-start;
|
||
&__content h4 {
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
.btn.primary-btn {
|
||
display: block;
|
||
width: 100%;
|
||
margin: 20px auto 80px;
|
||
}
|
||
}
|
||
|
||
// =======================
|
||
// === СТИЛИ КАТАЛОГА ===
|
||
// =======================
|
||
.catalog-main {
|
||
padding: 30px 0 60px;
|
||
background-color: lighten(@color-secondary, 5%);
|
||
}
|
||
|
||
.catalog-wrapper {
|
||
display: flex;
|
||
gap: 20px;
|
||
}
|
||
|
||
.catalog-sidebar {
|
||
flex: 0 0 250px;
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
||
height: fit-content;
|
||
}
|
||
|
||
.filter-group {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.filter-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-bottom: 15px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.filter-list li {
|
||
padding: 5px 0;
|
||
font-size: 16px;
|
||
a {
|
||
color: #555;
|
||
transition: color 0.2s;
|
||
&:hover { color: @color-accent; }
|
||
&.active-category {
|
||
font-weight: bold;
|
||
color: @color-primary;
|
||
}
|
||
}
|
||
}
|
||
|
||
.price-range {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
width: 100%;
|
||
|
||
.range-slider {
|
||
width: 100%;
|
||
|
||
input[type="range"] {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 100%;
|
||
height: 5px;
|
||
background: @color-primary;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
margin: 0;
|
||
|
||
&::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 20px;
|
||
height: 20px;
|
||
background: @color-accent;
|
||
border: 2px solid #fff;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
transform: scale(1.1);
|
||
background: lighten(@color-accent, 10%);
|
||
}
|
||
}
|
||
|
||
&::-moz-range-thumb {
|
||
width: 20px;
|
||
height: 20px;
|
||
background: @color-accent;
|
||
border: 2px solid #fff;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
transform: scale(1.1);
|
||
background: lighten(@color-accent, 10%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.price-display {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
color: @color-text-dark;
|
||
padding: 10px;
|
||
background: #f8f8f8;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
|
||
.filter-options {
|
||
list-style: none;
|
||
li {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 4px 0;
|
||
font-size: 14px;
|
||
}
|
||
label {
|
||
margin-left: 10px;
|
||
cursor: pointer;
|
||
color: #555;
|
||
}
|
||
input[type="checkbox"] {
|
||
width: 15px;
|
||
height: 15px;
|
||
cursor: pointer;
|
||
accent-color: @color-primary;
|
||
&:checked + label {
|
||
font-weight: bold;
|
||
color: @color-primary;
|
||
}
|
||
}
|
||
}
|
||
|
||
.filter-apply-btn {
|
||
width: 100%;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.catalog-products {
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.products-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
}
|
||
|
||
.product-card {
|
||
background-color: #fff;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
transition: transform 0.3s ease;
|
||
box-sizing: border-box;
|
||
|
||
&:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||
.product-img { transform: scale(1.05); }
|
||
}
|
||
}
|
||
|
||
.product-image-container {
|
||
position: relative;
|
||
overflow: hidden;
|
||
margin-bottom: 0;
|
||
padding: 0;
|
||
height: 250px;
|
||
.flex-center();
|
||
}
|
||
|
||
.product-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
display: block;
|
||
transition: transform 0.3s ease;
|
||
margin: 0;
|
||
}
|
||
|
||
.product-img1 {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
transition: transform 0.3s ease;
|
||
margin: 0;
|
||
}
|
||
|
||
.product-discount {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
background-color: @color-button;
|
||
color: @color-text-light;
|
||
padding: 3px 8px;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
z-index: 10;
|
||
}
|
||
|
||
.product-wishlist-icon {
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 10px;
|
||
color: #333;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
transition: color 0.3s ease;
|
||
z-index: 10;
|
||
&:hover { color: @color-accent; }
|
||
}
|
||
|
||
.product-name {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.product-details {
|
||
font-size: 13px;
|
||
color: #777;
|
||
margin-bottom: 10px;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.product-price {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: @color-button;
|
||
}
|
||
|
||
.product-card.small { flex: 0 0 300px; max-width: 300px; height: 200px; }
|
||
.product-card.small1 { flex: 0 0 320px; max-width: 320px; height: 250px;width: 320px; }
|
||
.product-card.large { flex: 0 0 580px; max-width: 580px; height: 380px; }
|
||
.product-card.wide { flex: 0 0 240px; max-width: 240px; height: 250px; }
|
||
.product-card.wide1 { flex: 0 0 350px; max-width: 350px; height: 250px; }
|
||
.product-card.wide2 { flex: 0 0 560px; max-width: 560px; height: 260px; }
|
||
.product-card.wide2_1 { flex: 0 0 560px; max-width: 560px; height: 260px; margin: -280px 0 0; }
|
||
.product-card.wide3 {
|
||
flex: 0 0 320px; max-width: 320px; height: 540px;
|
||
.product-image-container { height: 580px; }
|
||
}
|
||
.product-card.wide4 {
|
||
flex: 0 0 545px; max-width: 545px; margin: -270px 0 0; height: 250px;
|
||
.product-image-container { padding: 0; justify-content: flex-start; }
|
||
.product-img { margin-left: 0; align-self: flex-start; object-position: left center; }
|
||
}
|
||
.product-card.tall { flex: 0 0 300px; max-width: 300px; margin: -180px 0 0; height: 430px; }
|
||
.product-card.full-width { flex: 0 0 100%; margin: -20px 0 0; max-width: 900px; height: 300px;}
|
||
|
||
.product-card.full-width {
|
||
flex: 0 0 100%;
|
||
max-width: 100%;
|
||
height: 300px;
|
||
|
||
.product-image-container {
|
||
height: 100%;
|
||
padding: 0;
|
||
margin: 0;
|
||
|
||
.product-img1 {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.product-card.tall .product-image-container,
|
||
.product-card.large .product-image-container { height: 430px; }
|
||
|
||
// =======================
|
||
// === СТРАНИЦА ТОВАРА ===
|
||
// =======================
|
||
.product__section {
|
||
display: flex;
|
||
gap: 0;
|
||
margin: 30px 0;
|
||
}
|
||
|
||
.product__gallery, .product__info {
|
||
flex: 1;
|
||
}
|
||
|
||
.product__main-image {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.product__image {
|
||
width: 500px;
|
||
height: 300px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.product__thumbnails {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.product__thumbnail {
|
||
border: none;
|
||
background: none;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
}
|
||
|
||
.product__thumbnail img {
|
||
width: 245px;
|
||
height: 150px;
|
||
object-fit: cover;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.product__title {
|
||
font-size: 30px;
|
||
margin-bottom: 35px;
|
||
}
|
||
|
||
.product__rating {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.product__color-selector {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.product__color-option {
|
||
width: 45px;
|
||
height: 45px;
|
||
border-radius: 50%;
|
||
border: 2px solid transparent;
|
||
cursor: pointer;
|
||
transition: transform 0.3s ease;
|
||
|
||
&:hover{
|
||
transform: translateY(-2px);
|
||
}
|
||
}
|
||
|
||
.product__color-option.active {
|
||
border-color: @color-primary;
|
||
}
|
||
|
||
.product__description {
|
||
margin-bottom: 65px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.product__details-link {
|
||
display: inline-block;
|
||
margin-bottom: 20px;
|
||
color: @color-primary;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.product__purchase {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 35px;
|
||
}
|
||
|
||
.product__price {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.product__quantity {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.product__qty-btn {
|
||
width: 30px;
|
||
height: 30px;
|
||
background: @color-button;
|
||
color: @color-text-light;
|
||
border: none;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
font-weight: bold;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
background: lighten(@color-button, 10%);
|
||
transform: scale(1.1);
|
||
}
|
||
}
|
||
|
||
.product__qty-value {
|
||
font-weight: bold;
|
||
min-width: 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
.product__actions {
|
||
display: flex;
|
||
gap: 15px;
|
||
}
|
||
|
||
.product__btn {
|
||
flex: 1;
|
||
padding: 12px 20px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: @shadow-light;
|
||
}
|
||
}
|
||
|
||
.product__btn.primary {
|
||
background: @color-button;
|
||
color: @color-text-light;
|
||
|
||
&:hover {
|
||
background: lighten(@color-button, 10%);
|
||
}
|
||
}
|
||
|
||
.product__btn.secondary {
|
||
background: transparent;
|
||
border: 1px solid @color-button;
|
||
color: @color-button;
|
||
|
||
&:hover {
|
||
background: @color-button;
|
||
color: @color-text-light;
|
||
}
|
||
}
|
||
|
||
.similar {
|
||
margin: 60px 0;
|
||
}
|
||
|
||
.similar__title {
|
||
margin-bottom: 30px;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.similar__grid {
|
||
display: flex;
|
||
gap: 25px;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.similar__card {
|
||
flex: 0 0 calc(33.333% - 17px);
|
||
min-width: 320px;
|
||
background: @color-secondary;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
|
||
&:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||
}
|
||
}
|
||
|
||
.similar__card-image {
|
||
height: 300px;
|
||
overflow: hidden;
|
||
background: white;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
transition: transform 0.3s ease;
|
||
|
||
&:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
}
|
||
}
|
||
|
||
.similar__card-content {
|
||
padding: 25px;
|
||
}
|
||
|
||
.similar__card-title {
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
font-size: 20px;
|
||
color: @color-text-dark;
|
||
}
|
||
|
||
.similar__card-description {
|
||
font-size: 15px;
|
||
margin-bottom: 15px;
|
||
color: #666;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.similar__card-price {
|
||
font-weight: bold;
|
||
font-size: 22px;
|
||
color: @color-button;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.similar {
|
||
&__card {
|
||
flex: 0 0 calc(50% - 13px);
|
||
min-width: 280px;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.similar {
|
||
&__grid {
|
||
justify-content: center;
|
||
}
|
||
|
||
&__card {
|
||
flex: 0 0 100%;
|
||
max-width: 400px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// =======================
|
||
// === КОРЗИНА И ЗАКАЗ ===
|
||
// =======================
|
||
.main__content {
|
||
display: flex;
|
||
gap: 40px;
|
||
margin: 30px 0;
|
||
|
||
.products {
|
||
flex: 1;
|
||
}
|
||
|
||
.order {
|
||
flex: 0 0 65%;
|
||
padding: 40px;
|
||
|
||
&__header {
|
||
.flex-between();
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
&__title {
|
||
font-family: @font-logo;
|
||
font-size: 28px;
|
||
color: @color-text-dark;
|
||
margin: 0;
|
||
}
|
||
|
||
&__total {
|
||
font-weight: bold;
|
||
color: @color-text-dark;
|
||
}
|
||
|
||
&__section {
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
&__section-title {
|
||
font-family: @font-logo;
|
||
margin-bottom: 15px;
|
||
font-size: 18px;
|
||
color: @color-text-dark;
|
||
}
|
||
}
|
||
}
|
||
|
||
.products {
|
||
&__title {
|
||
font-family: @font-logo;
|
||
margin-bottom: 20px;
|
||
font-size: 24px;
|
||
color: @color-text-dark;
|
||
}
|
||
|
||
&__list {
|
||
.flex-column();
|
||
gap: 20px;
|
||
}
|
||
|
||
&__item {
|
||
background-color: @color-secondary;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
display: flex;
|
||
gap: 15px;
|
||
border: 1px solid @color-secondary;
|
||
transition: transform 0.3s ease;
|
||
align-items: flex-start;
|
||
position: relative;
|
||
|
||
&:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
}
|
||
|
||
&__image {
|
||
width: 300px;
|
||
height: 200px;
|
||
border-radius: 4px;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.product-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
transition: transform 0.3s ease;
|
||
margin: 0;
|
||
}
|
||
|
||
&__details {
|
||
flex: 1;
|
||
.flex-column();
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
min-height: 200px;
|
||
}
|
||
|
||
&__name {
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
color: @color-accent;
|
||
font-size: 18px;
|
||
font-family: @font-main;
|
||
}
|
||
|
||
&__price {
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
margin-bottom: 15px;
|
||
color: @color-text-dark;
|
||
}
|
||
|
||
&__controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
margin-top: auto;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
&__quantity {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
&__qty-btn {
|
||
width: 30px;
|
||
height: 30px;
|
||
background-color: @color-text-dark;
|
||
color: @color-text-light;
|
||
border: none;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
.flex-center();
|
||
font-family: @font-main;
|
||
font-weight: bold;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
}
|
||
|
||
&__qty-value {
|
||
font-weight: bold;
|
||
min-width: 30px;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
}
|
||
|
||
&__cart-icon {
|
||
background-color: transparent;
|
||
color: @color-text-dark;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
border: 2px solid @color-text-dark;
|
||
margin-left: 20px;
|
||
|
||
&:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
i { font-size: 18px; }
|
||
}
|
||
}
|
||
|
||
.form {
|
||
&__group { margin-bottom: 15px; }
|
||
&__label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-weight: bold;
|
||
color: #000000;
|
||
}
|
||
&__input {
|
||
width: 100%;
|
||
padding: 14px 16px;
|
||
border: 2px solid #ccc;
|
||
font-family: @font-main;
|
||
font-size: 15px;
|
||
transition: border-color 0.3s ease;
|
||
|
||
&:focus {
|
||
border-color: @color-primary;
|
||
}
|
||
|
||
&:hover {
|
||
border-color: darken(#ccc, 10%);
|
||
}
|
||
&::placeholder {
|
||
font-style: italic;
|
||
color: #999;
|
||
}
|
||
}
|
||
&__row {
|
||
display: flex;
|
||
gap: 20px;
|
||
justify-content: space-between;
|
||
}
|
||
&__input--half {
|
||
width: 100%;
|
||
}
|
||
&__radio-group {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
&__radio-label {
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
color: @color-text-dark;
|
||
position: relative;
|
||
padding-left: 30px;
|
||
flex: 1;
|
||
|
||
&:hover {
|
||
.form__custom-radio {
|
||
border-color: lighten(@color-accent, 10%);
|
||
}
|
||
}
|
||
}
|
||
&__radio-input {
|
||
position: absolute;
|
||
opacity: 0;
|
||
cursor: pointer;
|
||
}
|
||
&__custom-radio {
|
||
position: absolute;
|
||
left: 0;
|
||
height: 20px;
|
||
width: 20px;
|
||
background-color: @color-secondary;
|
||
border: 2px solid @color-accent;
|
||
border-radius: 50%;
|
||
transition: border-color 0.3s ease;
|
||
}
|
||
&__radio-input:checked ~ &__custom-radio {
|
||
background-color: @color-accent;
|
||
|
||
&:after {
|
||
content: "";
|
||
position: absolute;
|
||
display: block;
|
||
top: 4px;
|
||
left: 4px;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: white;
|
||
}
|
||
}
|
||
}
|
||
|
||
.divider {
|
||
height: 1px;
|
||
background-color: #999;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.promo {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
|
||
&__input {
|
||
flex: 1;
|
||
padding: 10px;
|
||
border: 1px solid #000;
|
||
background-color: @color-secondary;
|
||
font-family: @font-main;
|
||
height: auto;
|
||
min-height: 48px;
|
||
|
||
&:hover {
|
||
border-color: @color-primary;
|
||
}
|
||
|
||
&::placeholder {
|
||
font-style: italic;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
&__btn {
|
||
background-color: @color-accent;
|
||
color: @color-secondary;
|
||
border: none;
|
||
padding: 10px 60px;
|
||
cursor: pointer;
|
||
font-family: @font-main;
|
||
font-size: 18px;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
background-color: lighten(@color-accent, 10%);
|
||
transform: translateY(-2px);
|
||
}
|
||
}
|
||
}
|
||
|
||
.summary {
|
||
margin-bottom: 20px;
|
||
|
||
&__item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
color: @color-text-dark;
|
||
|
||
&.total {
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
padding-top: 10px;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.order-btn {
|
||
width: 100%;
|
||
background-color: @color-accent;
|
||
color: @color-secondary;
|
||
border: none;
|
||
padding: 15px;
|
||
border-radius: 4px;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
margin-bottom: 10px;
|
||
font-family: @font-main;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
background-color: lighten(@color-accent, 10%);
|
||
transform: translateY(-2px);
|
||
}
|
||
}
|
||
|
||
.privacy {
|
||
display: flex;
|
||
gap: 8px;
|
||
font-size: 16px;
|
||
color: #666;
|
||
margin-bottom: 20px;
|
||
|
||
input[type="checkbox"] {
|
||
width: 18px;
|
||
height: 18px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.services {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
gap: 24px;
|
||
margin-bottom: 24px;
|
||
|
||
&__title {
|
||
font-family: @font-logo;
|
||
margin-bottom: 10px;
|
||
font-size: 18px;
|
||
color: @color-text-dark;
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
|
||
&__item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 8px;
|
||
color: @color-text-dark;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.cart-icon {
|
||
position: relative;
|
||
}
|
||
|
||
.cart-count {
|
||
position: absolute;
|
||
top: -8px;
|
||
right: -8px;
|
||
background: @color-accent;
|
||
color: @color-text-light;
|
||
border-radius: 50%;
|
||
width: 18px;
|
||
height: 18px;
|
||
font-size: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.form__input.error {
|
||
border-color: #ff4444;
|
||
box-shadow: 0 0 5px rgba(255, 68, 68, 0.3);
|
||
}
|
||
|
||
.empty-cart {
|
||
text-align: center;
|
||
padding: 40px;
|
||
color: #666;
|
||
font-size: 18px;
|
||
}
|
||
|
||
// =======================
|
||
// === АВТОРИЗАЦИЯ ===
|
||
// =======================
|
||
.profile-page-main {
|
||
.flex-center();
|
||
min-height: 80vh;
|
||
padding: 40px 0;
|
||
background-color: lighten(@color-secondary, 5%);
|
||
z-index: 1;
|
||
|
||
.profile-container {
|
||
display: flex;
|
||
width: 100%;
|
||
max-width: 1000px;
|
||
min-height: 600px;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||
background-color: @color-text-light;
|
||
}
|
||
|
||
.profile-left-col {
|
||
flex: 0 0 35%;
|
||
background-color: @color-primary;
|
||
color: @color-text-light;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
padding: 40px;
|
||
.logo {
|
||
font-size: 32px;
|
||
font-weight: normal;
|
||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
|
||
color: @color-text-light;
|
||
}
|
||
}
|
||
|
||
.profile-right-col {
|
||
flex: 0 0 65%;
|
||
.flex-center();
|
||
padding: 40px;
|
||
.profile-form-block {
|
||
width: 100%;
|
||
max-width: 400px;
|
||
h2 {
|
||
font-size: 28px;
|
||
font-weight: normal;
|
||
margin-bottom: 40px;
|
||
text-align: left;
|
||
color: @color-text-dark;
|
||
}
|
||
}
|
||
}
|
||
|
||
.profile-form {
|
||
.input-group {
|
||
margin-bottom: 20px;
|
||
label {
|
||
display: block;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
color: @color-text-dark;
|
||
margin-bottom: 5px;
|
||
text-transform: uppercase;
|
||
}
|
||
}
|
||
|
||
input[type="text"],
|
||
input[type="email"],
|
||
input[type="tel"] {
|
||
.input-base();
|
||
}
|
||
|
||
.password-link {
|
||
display: block;
|
||
text-align: left;
|
||
font-size: 13px;
|
||
color: @color-text-dark;
|
||
text-decoration: underline;
|
||
margin: 10px 0 20px;
|
||
&:hover {
|
||
color: @color-accent;
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
.save-btn {
|
||
padding: 15px 30px;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 15px;
|
||
text-transform: uppercase;
|
||
transition: all 0.3s ease;
|
||
font-family: @font-main;
|
||
width: 100%;
|
||
margin-top: 20px;
|
||
background-color: @color-primary;
|
||
color: @color-text-light;
|
||
|
||
&:hover {
|
||
background-color: lighten(@color-primary, 10%);
|
||
transform: translateY(-2px);
|
||
box-shadow: @shadow-light;
|
||
}
|
||
}
|
||
|
||
.auth-actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 25px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid #eee;
|
||
|
||
.auth-text {
|
||
font-size: 13px;
|
||
color: @color-text-dark;
|
||
}
|
||
|
||
.login-btn {
|
||
background-color: transparent;
|
||
color: @color-accent;
|
||
border: 1px solid @color-accent;
|
||
padding: 10px 25px;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
background-color: @color-primary;
|
||
color: @color-text-light;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// =======================
|
||
// === СЕКЦИЯ УСЛУГ ===
|
||
// =======================
|
||
.services-section {
|
||
padding: 60px 0;
|
||
background-color: @color-secondary;
|
||
}
|
||
|
||
.services__wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30px;
|
||
}
|
||
|
||
.services__top-row {
|
||
display: flex;
|
||
gap: 30px;
|
||
justify-content: center;
|
||
|
||
@media (max-width: 768px) {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.service-card {
|
||
border-radius: 8px;
|
||
padding: 40px;
|
||
min-height: 200px;
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: @shadow-light;
|
||
}
|
||
|
||
&--green {
|
||
background: @color-primary;
|
||
color: @color-text-light;
|
||
flex: 1;
|
||
max-width: 450px;
|
||
}
|
||
|
||
&--beige {
|
||
background: @color-beige;
|
||
color: @color-text-light;
|
||
width: 100%;
|
||
max-width: 930px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
&__title {
|
||
font-family: @font-logo;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
margin-bottom: 15px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
&__text {
|
||
font-family: @font-main;
|
||
font-size: 16px;
|
||
line-height: 1.6;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
// =======================
|
||
// === ФУТЕР ===
|
||
// =======================
|
||
.footer {
|
||
background-color: @color-primary;
|
||
color: black;
|
||
padding: 40px 0 10px;
|
||
position: relative;
|
||
z-index: 1000;
|
||
|
||
&::before {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
top: -80px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 1px;
|
||
visibility: hidden;
|
||
}
|
||
|
||
&__content {
|
||
display: flex;
|
||
gap: 20px;
|
||
padding-bottom: 30px;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
&__col {
|
||
flex: 1;
|
||
&--logo { flex: 1.5; }
|
||
h5 {
|
||
margin-bottom: 15px;
|
||
font-size: 14px;
|
||
text-transform: uppercase;
|
||
}
|
||
ul li {
|
||
margin-bottom: 8px;
|
||
a:hover { text-decoration: underline; }
|
||
}
|
||
.social-icons,
|
||
.payment-icons {
|
||
.flex-center(15px);
|
||
justify-content: flex-start;
|
||
margin-top: 10px;
|
||
}
|
||
.social-icons .icon {
|
||
.icon-base(20px, 1.1);
|
||
color: black;
|
||
&:hover { color: @color-accent; }
|
||
}
|
||
.payment-icons .pay-icon {
|
||
.icon-base(24px, 1.05);
|
||
color: black;
|
||
}
|
||
}
|
||
|
||
.copyright {
|
||
text-align: center;
|
||
font-size: 12px;
|
||
padding-top: 20px;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
}
|
||
|
||
// =======================
|
||
// === ДОСТАВКА ===
|
||
// =======================
|
||
.delivery-content {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.delivery-content h1 {
|
||
font-family: @font-logo;
|
||
font-size: 42px;
|
||
text-align: center;
|
||
margin-bottom: 50px;
|
||
color: #453227;
|
||
}
|
||
|
||
.delivery-section {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 30px;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.delivery-card {
|
||
background: white;
|
||
padding: 30px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||
text-align: center;
|
||
transition: transform 0.3s ease;
|
||
flex: 1;
|
||
min-width: 350px;
|
||
max-width: 400px;
|
||
}
|
||
|
||
.delivery-card:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.delivery-icon {
|
||
font-size: 48px;
|
||
color: #617365;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.delivery-card h3 {
|
||
font-family: @font-logo;
|
||
font-size: 24px;
|
||
margin-bottom: 20px;
|
||
color: #453227;
|
||
}
|
||
|
||
.delivery-details {
|
||
text-align: left;
|
||
}
|
||
|
||
.detail-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 12px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.detail-label {
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.detail-value {
|
||
color: #617365;
|
||
text-align: right;
|
||
}
|
||
|
||
// =======================
|
||
// === ГАРАНТИЯ ===
|
||
// =======================
|
||
.warranty-content {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.warranty-content h1 {
|
||
font-family: 'Anek Kannada', sans-serif;
|
||
font-size: 42px;
|
||
text-align: center;
|
||
margin-bottom: 50px;
|
||
color: #453227;
|
||
}
|
||
|
||
.warranty-overview {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 25px;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.warranty-card {
|
||
background: white;
|
||
padding: 30px;
|
||
border-radius: 12px;
|
||
text-align: center;
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||
transition: transform 0.3s ease;
|
||
flex: 1;
|
||
min-width: 250px;
|
||
max-width: 280px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.warranty-card:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.warranty-icon {
|
||
font-size: 48px;
|
||
color: #617365;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.warranty-card h3 {
|
||
font-family: 'Anek Kannada', sans-serif;
|
||
font-size: 20px;
|
||
margin-bottom: 15px;
|
||
color: #453227;
|
||
}
|
||
|
||
.warranty-period {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #617365;
|
||
margin-top: auto;
|
||
}
|
||
|
||
.coverage-section {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 40px;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.coverage-covered,
|
||
.coverage-not-covered {
|
||
flex: 1;
|
||
min-width: 300px;
|
||
}
|
||
|
||
.coverage-section h2 {
|
||
font-family: 'Anek Kannada', sans-serif;
|
||
font-size: 24px;
|
||
margin-bottom: 25px;
|
||
color: #453227;
|
||
}
|
||
|
||
.coverage-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
.coverage-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 15px;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
background: white;
|
||
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.coverage-item.covered i {
|
||
color: #28a745;
|
||
font-size: 20px;
|
||
margin-top: 2px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.coverage-item.not-covered i {
|
||
color: #dc3545;
|
||
font-size: 20px;
|
||
margin-top: 2px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.coverage-text {
|
||
flex: 1;
|
||
}
|
||
|
||
.coverage-item h4 {
|
||
font-family: 'Anek Kannada', sans-serif;
|
||
font-size: 16px;
|
||
margin-bottom: 5px;
|
||
color: #333;
|
||
}
|
||
|
||
.card {
|
||
min-height: 250px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: @color-text-light;
|
||
text-align: center;
|
||
|
||
&--green {
|
||
background: @color-primary;
|
||
flex: 0 1 450px;
|
||
max-width: 450px;
|
||
}
|
||
|
||
&--beige {
|
||
background: @color-beige;
|
||
color: @color-text-dark;
|
||
flex: 0 1 925px;
|
||
max-width: 925px;
|
||
}
|
||
}
|
||
|
||
.design-section {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 40px;
|
||
.card { width: 100%; }
|
||
}
|
||
|
||
// =======================
|
||
// === АДАПТИВНОСТЬ ===
|
||
// =======================
|
||
@media (max-width: 1240px) {
|
||
.catalog-wrapper { gap: 20px; }
|
||
.catalog-sidebar { flex: 0 0 200px; }
|
||
.products-container {
|
||
gap: 15px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.product-card.small1 {
|
||
margin-top: 100px;
|
||
}
|
||
|
||
.product-card.small,
|
||
.product-card.small1,
|
||
.product-card.large,
|
||
.product-card.wide,
|
||
.product-card.wide1,
|
||
.product-card.wide2,
|
||
.product-card.wide2_1,
|
||
.product-card.wide4 {
|
||
flex: 0 0 calc(33.333% - 10px);
|
||
max-width: calc(33.333% - 10px);
|
||
height: 180px;
|
||
margin: 0;
|
||
|
||
.product-image-container {
|
||
height: 180px;
|
||
}
|
||
}
|
||
|
||
.product-card.wide3 {
|
||
flex: 0 0 calc(25% - 10px);
|
||
max-width: calc(25% - 10px);
|
||
height: 300px;
|
||
margin: 0;
|
||
|
||
.product-image-container {
|
||
height: 350px;
|
||
}
|
||
}
|
||
|
||
.product-card.tall {
|
||
flex: 0 0 calc(25% - 10px);
|
||
max-width: calc(25% - 10px);
|
||
height: 300px;
|
||
margin: 0;
|
||
|
||
.product-image-container {
|
||
height: 300px;
|
||
}
|
||
}
|
||
|
||
.product-card.full-width {
|
||
flex: 0 0 100%;
|
||
max-width: 100%;
|
||
height: 300px;
|
||
margin: 0;
|
||
|
||
.product-image-container {
|
||
height: 300px;
|
||
}
|
||
}
|
||
|
||
.product-card.small { order: 1; }
|
||
.product-card.large { order: 2; }
|
||
.product-card.wide { order: 3; }
|
||
|
||
.product-card.small1 { order: 11; }
|
||
.product-card.wide2 { order: 12; }
|
||
.product-card.wide2_1 { order: 13; }
|
||
|
||
.product-card.wide3 { order: 21; }
|
||
.product-card.tall { order: 22; }
|
||
|
||
.product-card.wide3 { order: 31; }
|
||
|
||
.product-card.full-width { order: 41; flex-basis: 100%; }
|
||
|
||
.main__content {
|
||
gap: 20px;
|
||
.products {
|
||
flex: 0 0 35%;
|
||
.products__image {
|
||
width: 250px;
|
||
height: 180px;
|
||
}
|
||
}
|
||
.order {
|
||
flex: 0 0 60%;
|
||
padding: 30px;
|
||
|
||
.order__title {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.order__section-title {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.solutions-slider {
|
||
&__slide {
|
||
.solution-text-overlay {
|
||
top: 10%;
|
||
left: 5%;
|
||
h2 {
|
||
font-size: 26px;
|
||
margin-bottom: 5px;
|
||
line-height: 1.2;
|
||
}
|
||
p {
|
||
font-size: 18px;
|
||
line-height: 1.2;
|
||
}
|
||
}
|
||
.solution-image-link {
|
||
bottom: 70px;
|
||
padding: 10px 25px;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.product__image {
|
||
width: 350px;
|
||
height: 250px;
|
||
}
|
||
|
||
.product__thumbnail img {
|
||
width: 170px;
|
||
height: 120px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.main__content {
|
||
gap: 25px;
|
||
.products {
|
||
flex: 0 0 30%;
|
||
.products__image {
|
||
width: 200px;
|
||
height: 150px;
|
||
}
|
||
|
||
.products__name {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.products__price {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
.order {
|
||
flex: 0 0 60%;
|
||
padding: 25px;
|
||
|
||
.order__title {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.form__input {
|
||
padding: 12px 14px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.promo__btn {
|
||
padding: 10px 40px;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.container { padding: 0 15px; }
|
||
|
||
.delivery-section {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.delivery-card {
|
||
min-width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.delivery-content h1 {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.warranty-overview {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.warranty-card {
|
||
max-width: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.coverage-section {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.warranty-content h1 {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.header__top .container,
|
||
.header__bottom .container,
|
||
.hero__content,
|
||
.advantages__header,
|
||
.about__content,
|
||
.advantages__items,
|
||
.promo-images,
|
||
.stats__items,
|
||
.faq__items,
|
||
.catalog-wrapper,
|
||
.main__content {
|
||
flex-direction: column;
|
||
gap: 30px;
|
||
}
|
||
|
||
.search-catalog {
|
||
order: 3;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.nav-list {
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.hero {
|
||
&__image-block {
|
||
flex: none;
|
||
max-width: 400px;
|
||
height: 400px;
|
||
}
|
||
&__circle {
|
||
width: 380px;
|
||
height: 380px;
|
||
}
|
||
&__text-block {
|
||
flex: none;
|
||
padding-left: 0;
|
||
text-align: center;
|
||
h1 { font-size: 32px; }
|
||
.hero__usp-text {
|
||
padding-left: 0;
|
||
justify-content: center;
|
||
&::before { display: none; }
|
||
}
|
||
.btn.primary-btn { margin-left: 0; }
|
||
}
|
||
}
|
||
|
||
.advantages__header h2,
|
||
.faq h2 { font-size: 28px; }
|
||
|
||
.faq-item,
|
||
.stat-item {
|
||
flex: none;
|
||
.flex-center();
|
||
text-align: center;
|
||
}
|
||
|
||
.stats .container { justify-content: center; }
|
||
.catalog-dropdown__menu { width: 200px; }
|
||
|
||
.catalog-sidebar { width: 100%; flex: none; }
|
||
.products-container { gap: 15px; }
|
||
|
||
.product-card.small,
|
||
.product-card.small1,
|
||
.product-card.large,
|
||
.product-card.wide,
|
||
.product-card.wide1,
|
||
.product-card.wide2,
|
||
.product-card.wide2_1,
|
||
.product-card.wide3,
|
||
.product-card.wide4,
|
||
.product-card.tall,
|
||
.product-card.full-width {
|
||
flex: 0 0 100%;
|
||
max-width: 100%;
|
||
height: 250px;
|
||
margin: 0;
|
||
|
||
.product-image-container {
|
||
height: 200px;
|
||
}
|
||
}
|
||
|
||
.main__content {
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
|
||
.products,
|
||
.order {
|
||
flex: 0 0 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.products {
|
||
.products__item {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.products__image {
|
||
width: 100%;
|
||
height: 200px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.products__details {
|
||
min-height: auto;
|
||
align-items: center;
|
||
}
|
||
|
||
.products__controls {
|
||
justify-content: center;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.products__cart-icon {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
.order {
|
||
padding: 20px;
|
||
|
||
.order__title {
|
||
font-size: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.order__total {
|
||
text-align: center;
|
||
}
|
||
|
||
.form__radio-group {
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
}
|
||
|
||
.form__radio-label {
|
||
flex: none;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.promo {
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
|
||
&__btn {
|
||
width: 100%;
|
||
padding: 12px;
|
||
}
|
||
}
|
||
|
||
.order-btn {
|
||
padding: 12px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.services {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.product-image-container { height: 200px; }
|
||
.product-card.tall .product-image-container,
|
||
.product-card.large .product-image-container { height: 250px; }
|
||
|
||
.profile-page-main {
|
||
.profile-container {
|
||
flex-direction: column;
|
||
min-height: auto;
|
||
max-width: 100%;
|
||
box-shadow: none;
|
||
}
|
||
.profile-left-col {
|
||
flex: none;
|
||
width: 100%;
|
||
height: 100px;
|
||
.flex-center();
|
||
padding: 0;
|
||
}
|
||
.profile-right-col {
|
||
flex: none;
|
||
width: 100%;
|
||
padding: 30px 20px;
|
||
}
|
||
.profile-form-block { max-width: 100%; }
|
||
}
|
||
|
||
.form__row { flex-direction: column; }
|
||
.form__input--half { flex: 0 0 100%; max-width: 100%; }
|
||
.services { flex-direction: column; align-items: center; }
|
||
|
||
.services-section {
|
||
padding: 40px 0;
|
||
}
|
||
|
||
.service-card {
|
||
padding: 30px 20px;
|
||
min-height: 180px;
|
||
|
||
&--green,
|
||
&--beige {
|
||
max-width: 100%;
|
||
}
|
||
|
||
&__title {
|
||
font-size: 20px;
|
||
}
|
||
|
||
&__text {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
.solutions-slider {
|
||
margin: 20px auto;
|
||
&__slide {
|
||
.solution-text-overlay {
|
||
top: 8%;
|
||
left: 4%;
|
||
h2 {
|
||
font-size: 20px;
|
||
margin-bottom: 3px;
|
||
line-height: 1.1;
|
||
}
|
||
p {
|
||
font-size: 15px;
|
||
line-height: 1.1;
|
||
}
|
||
}
|
||
.solution-image-link {
|
||
bottom: 90px;
|
||
padding: 8px 20px;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Стили для ошибок полей
|
||
.error-input {
|
||
border-color: #ff4444 !important;
|
||
box-shadow: 0 0 0 1px #ff4444;
|
||
}
|
||
|
||
.field-error {
|
||
color: #ff4444;
|
||
font-size: 12px;
|
||
margin-top: 5px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
// Стили для сообщений
|
||
.message {
|
||
padding: 15px;
|
||
margin: 20px 0;
|
||
border-radius: 5px;
|
||
display: none;
|
||
}
|
||
|
||
.message.error {
|
||
background-color: #ffebee;
|
||
color: #c62828;
|
||
border: 1px solid #ffcdd2;
|
||
}
|
||
|
||
.message.success {
|
||
background-color: #e8f5e9;
|
||
color: #2e7d32;
|
||
border: 1px solid #c8e6c9;
|
||
}
|
||
|
||
// Добавьте в конец файла
|
||
.access-denied {
|
||
text-align: center;
|
||
padding: 80px 20px;
|
||
background: white;
|
||
border-radius: 10px;
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||
margin: 50px 0;
|
||
|
||
h2 {
|
||
color: #dc3545;
|
||
margin-bottom: 30px;
|
||
font-size: 28px;
|
||
}
|
||
|
||
p {
|
||
color: #666;
|
||
margin-bottom: 40px;
|
||
font-size: 18px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.btn {
|
||
margin: 5px;
|
||
min-width: 200px;
|
||
}
|
||
}
|
||
// =======================
|
||
// === ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ ===
|
||
// =======================
|
||
|
||
.user-profile-dropdown {
|
||
position: relative;
|
||
display: inline-block;
|
||
|
||
&__toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
padding: 8px 12px;
|
||
border-radius: 4px;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
background-color: rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background-color: @color-primary;
|
||
color: @color-text-light;
|
||
.flex-center();
|
||
font-weight: bold;
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.user-email {
|
||
font-size: 12px;
|
||
color: #666;
|
||
max-width: 150px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.user-status {
|
||
font-size: 10px;
|
||
padding: 2px 6px;
|
||
border-radius: 10px;
|
||
text-transform: uppercase;
|
||
|
||
&.admin {
|
||
background-color: #617365;
|
||
color: white;
|
||
}
|
||
|
||
&.user {
|
||
background-color: #28a745;
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&__menu {
|
||
.menu-base();
|
||
width: 220px;
|
||
top: 100%;
|
||
right: 0;
|
||
|
||
.user-details {
|
||
padding: 15px;
|
||
border-bottom: 1px solid #eee;
|
||
|
||
.user-name {
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.user-registered {
|
||
font-size: 11px;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
ul {
|
||
padding: 10px 0;
|
||
|
||
li {
|
||
padding: 8px 15px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
transition: background-color 0.3s ease;
|
||
|
||
&:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
&.logout {
|
||
color: #dc3545;
|
||
border-top: 1px solid #eee;
|
||
margin-top: 5px;
|
||
padding-top: 12px;
|
||
|
||
&:hover {
|
||
background-color: #ffe6e6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&:hover &__menu {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
// =======================
|
||
// === КАРТОЧКА ТОВАРА ===
|
||
// =======================
|
||
|
||
.product-image-container {
|
||
position: relative;
|
||
overflow: hidden;
|
||
margin-bottom: 0;
|
||
padding: 0;
|
||
height: 250px;
|
||
.flex-center();
|
||
|
||
&:hover {
|
||
.product-overlay-info {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
}
|
||
|
||
.product-overlay-info {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
||
color: white;
|
||
padding: 15px;
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
transition: all 0.3s ease;
|
||
|
||
.product-overlay-name {
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.product-overlay-price {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
|
||
.old-price {
|
||
text-decoration: line-through;
|
||
font-size: 12px;
|
||
color: #ccc;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.current-price {
|
||
color: #ffd700;
|
||
}
|
||
}
|
||
|
||
.product-overlay-category {
|
||
font-size: 11px;
|
||
opacity: 0.8;
|
||
margin-top: 3px;
|
||
}
|
||
|
||
.product-overlay-stock {
|
||
font-size: 11px;
|
||
margin-top: 5px;
|
||
|
||
&.out-of-stock {
|
||
color: #ff6b6b;
|
||
}
|
||
|
||
i {
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.product-card-details {
|
||
padding: 15px;
|
||
background: white;
|
||
flex-grow: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.product-card-name {
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
margin-bottom: 8px;
|
||
color: @color-text-dark;
|
||
}
|
||
|
||
.product-card-description {
|
||
font-size: 13px;
|
||
color: #777;
|
||
margin-bottom: 10px;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.product-card-attributes {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-bottom: 10px;
|
||
|
||
.attribute {
|
||
font-size: 11px;
|
||
background: #f5f5f5;
|
||
padding: 3px 8px;
|
||
border-radius: 12px;
|
||
color: #666;
|
||
|
||
i {
|
||
margin-right: 3px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.product-card-price {
|
||
margin-bottom: 10px;
|
||
|
||
.old-price {
|
||
text-decoration: line-through;
|
||
font-size: 14px;
|
||
color: #999;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.current-price {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: @color-button;
|
||
}
|
||
}
|
||
|
||
.add-to-cart-btn {
|
||
width: 100%;
|
||
padding: 8px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.admin-actions {
|
||
display: flex;
|
||
gap: 5px;
|
||
margin-top: 10px;
|
||
|
||
.admin-btn {
|
||
flex: 1;
|
||
font-size: 12px;
|
||
padding: 6px;
|
||
|
||
&.delete-btn {
|
||
background: #dc3545;
|
||
|
||
&:hover {
|
||
background: #c82333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// =======================
|
||
// === ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ ===
|
||
// =======================
|
||
|
||
.user-profile-dropdown {
|
||
position: relative;
|
||
display: inline-block;
|
||
|
||
.user-profile-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
cursor: pointer;
|
||
padding: 8px 12px;
|
||
border-radius: 4px;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
background-color: rgba(0, 0, 0, 0.05);
|
||
|
||
.dropdown-arrow {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #617365 0%, #453227 100%);
|
||
color: @color-text-light;
|
||
.flex-center();
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.user-email {
|
||
font-size: 12px;
|
||
color: #666;
|
||
max-width: 120px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.user-status {
|
||
font-size: 10px;
|
||
padding: 2px 8px;
|
||
border-radius: 12px;
|
||
text-transform: uppercase;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin-top: 2px;
|
||
|
||
&.admin {
|
||
background-color: #617365;
|
||
color: white;
|
||
border: 1px solid #617365;
|
||
}
|
||
|
||
&.user {
|
||
background-color: #28a745;
|
||
color: white;
|
||
border: 1px solid #28a745;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dropdown-arrow {
|
||
font-size: 10px;
|
||
color: #666;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
}
|
||
|
||
.user-profile-menu {
|
||
.menu-base();
|
||
width: 280px;
|
||
top: 100%;
|
||
right: 0;
|
||
margin-top: 10px;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
|
||
.user-profile-header {
|
||
padding: 20px;
|
||
background: linear-gradient(135deg, #617365 0%, #453227 100%);
|
||
color: white;
|
||
|
||
.user-profile-name {
|
||
font-weight: bold;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.user-profile-details {
|
||
small {
|
||
display: block;
|
||
opacity: 0.8;
|
||
margin-bottom: 5px;
|
||
font-size: 11px;
|
||
|
||
i {
|
||
margin-right: 5px;
|
||
width: 14px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.user-profile-links {
|
||
list-style: none;
|
||
padding: 10px 0;
|
||
|
||
li {
|
||
border-bottom: 1px solid #f0f0f0;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
a {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 12px 20px;
|
||
color: #333;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
background-color: #f8f9fa;
|
||
color: @color-primary;
|
||
text-decoration: none;
|
||
|
||
i {
|
||
transform: scale(1.1);
|
||
}
|
||
}
|
||
|
||
i {
|
||
width: 20px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: #617365;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
span {
|
||
flex-grow: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.logout-item {
|
||
border-top: 2px solid #f0f0f0;
|
||
margin-top: 5px;
|
||
|
||
a {
|
||
color: #dc3545;
|
||
|
||
&:hover {
|
||
background-color: #ffe6e6;
|
||
color: #c82333;
|
||
|
||
i {
|
||
color: #dc3545;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&:hover .user-profile-menu {
|
||
display: block;
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
// Для мобильных устройств
|
||
@media (max-width: 768px) {
|
||
.user-profile-dropdown {
|
||
.user-profile-toggle {
|
||
.user-info {
|
||
display: none;
|
||
}
|
||
|
||
.dropdown-arrow {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.user-profile-menu {
|
||
width: 250px;
|
||
right: -50px;
|
||
}
|
||
}
|
||
}
|
||
// Добавьте в конец файла
|
||
.unavailable-product {
|
||
position: relative;
|
||
opacity: 0.6;
|
||
filter: grayscale(0.7);
|
||
|
||
&::before {
|
||
content: "ТОВАР ЗАКОНЧИЛСЯ";
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: rgba(0, 0, 0, 0.85);
|
||
color: white;
|
||
padding: 15px 25px;
|
||
border-radius: 5px;
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
text-align: center;
|
||
z-index: 100;
|
||
white-space: nowrap;
|
||
pointer-events: none;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.product-name-overlay {
|
||
.name, .price {
|
||
color: #999 !important;
|
||
text-shadow: none !important;
|
||
}
|
||
}
|
||
|
||
.add-to-cart-btn {
|
||
display: none !important;
|
||
}
|
||
|
||
&:hover {
|
||
transform: none !important;
|
||
cursor: not-allowed;
|
||
}
|
||
}
|
||
|
||
.out-of-stock-badge {
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 10px;
|
||
background: #6c757d;
|
||
color: white;
|
||
padding: 5px 10px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
z-index: 10;
|
||
}
|
||
|
||
// Для админ-таблицы
|
||
.admin-table tr.unavailable {
|
||
background-color: #f8f9fa !important;
|
||
opacity: 0.7;
|
||
|
||
td {
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.status-unavailable {
|
||
background-color: #6c757d !important;
|
||
color: white !important;
|
||
} |