mejiwoo

1
body {
2
	margin: 0;
3
	font-family: 'Inter', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
4
		'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
5
	-webkit-font-smoothing: antialiased;
6
	-moz-osx-font-smoothing: grayscale;
7
}
8

9
code {
10
	font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
11
		monospace;
12
}
13

14
header {
15
	display: flex;
16
	width: calc(100% - 200px);
17
	height: 103px;
18
	justify-content: space-between;
19
	align-items: center;
20
	margin: 0 100px 0 100px;
21
	/* padding-top: 35px; */
22
}
23

24
.categories {
25
	list-style: none;
26
	display: flex;
27
	color: #505050;
28
	cursor: pointer;
29
}
30

31
.category:hover {
32
	color: #000 !important;
33
	border-bottom: 2px solid #000;
34
}
35

36
.category {
37
	margin-right: 60px;
38
	border-bottom: 2px solid transparent;
39
	padding-bottom: 3px;
40
}
41

42
.category:last-child {
43
	margin-right: 0;
44
}
45

46
.logo {
47
	position: absolute;
48
	left: 50%;
49
	transform: translate(-50%, 0);
50
	cursor: pointer;
51
}
52

53
.tools {
54
	display: inline-flex;
55
	align-items: center;
56
	gap: 26px;
57
	margin-left: auto;
58
}
59

60
.search {
61
	width: 106px;
62
	height: 35px;
63
	border-radius: 10px;
64
	background: var(--button-hover, rgba(217, 217, 217, 0.35));
65
	border: none;
66
	outline: none;
67
	position: relative;
68
	padding: 0 30px 0 19px;
69
	color: rgba(0, 0, 0, 0.8);
70
	font-size: 14px;
71
	font-style: normal;
72
	font-weight: 400;
73
	line-height: normal;
74
}
75

76
.search-wrapper {
77
	display: flex;
78
	align-items: center;
79
}
80

81
.search-icon {
82
	position: absolute;
83
	right: 195px;
84
	/* z-index: -1; */
85
}
86

87
.icon {
88
	cursor: pointer;
89
}
90

91
.promo {
92
	width: 100%;
93
	margin-bottom: 28px;
94
}
95

96
.promo-sale {
97
	position: relative;
98
	display: flex;
99
	justify-content: center;
100
	align-items: center;
101
}
102

103
.saleBtn {
104
	position: absolute;
105
	top: 50%;
106
	display: inline-flex;
107
	padding: 12px 30px;
108
	justify-content: center;
109
	align-items: center;
110
	gap: 10px;
111
	border-radius: 20px;
112
	background: #fff;
113
	border: none;
114
	font-size: 20px;
115
	font-style: normal;
116
	font-weight: 400;
117
	line-height: normal;
118
	cursor: pointer;
119
}
120

121
.saleBtn:hover {
122
	background: var(--button-hover, rgba(217, 217, 217, 0.35));
123
}
124

125
h1 {
126
	font-size: 48px;
127
	font-style: normal;
128
	font-weight: 600;
129
	line-height: normal;
130
}
131

132
.season-pictures {
133
	margin-right: 24px;
134
	width: 398px;
135
}
136

137
.pictures {
138
	display: flex;
139
	justify-content: center;
140
	margin-top: 49px;
141
}
142

143
.season-pictures:last-child {
144
	margin-right: 0;
145
}
146

147
.section {
148
	display: flex;
149
	flex-direction: column;
150
	align-items: center;
151
	position: relative;
152
}
153

154
h2 {
155
	font-size: 32px;
156
	font-style: normal;
157
	font-weight: 600;
158
	line-height: normal;
159
	text-transform: uppercase;
160
}
161

162
.more {
163
	display: inline-flex;
164
	margin-top: 2px;
165
	padding: 12px 30px;
166
	justify-content: center;
167
	align-items: center;
168
	border: none;
169
	width: 118px;
170
	border-radius: 20px;
171
	background: var(--primary, #f7f6f0);
172
	font-size: 20px;
173
	font-style: normal;
174
	font-weight: 500;
175
	line-height: normal;
176
	cursor: pointer;
177
}
178

179
.more:hover {
180
	background: var(--button-hover, rgba(217, 217, 217, 0.35));
181
}
182

183
.best-sellers {
184
	margin-top: 48px;
185
}
186

187
.slider {
188
	display: flex;
189
	justify-content: center;
190
	margin-right: 5px;
191
	position: relative;
192
}
193

194
.items::-webkit-scrollbar {
195
	display: none;
196
}
197

198
.items {
199
	max-width: 1261px;
200
	display: flex;
201
	overflow: scroll;
202
}
203

204
.bestseller {
205
	display: flex;
206
	flex-direction: column;
207
	margin-right: 24px;
208
}
209

210
.bestseller:last-child {
211
	margin-right: 0;
212
}
213

214
h3 {
215
	font-size: 16px;
216
	font-style: normal;
217
	font-weight: 400;
218
	line-height: normal;
219
	margin-bottom: 4px;
220
}
221

222
h4 {
223
	margin-top: 4px;
224
	font-size: 14px;
225
	font-style: normal;
226
	font-weight: 400;
227
	line-height: normal;
228
}
229

230
.bestseller__image {
231
	width: 398px;
232
	height: 496px;
233
}
234

235
.choice {
236
	display: flex;
237
	align-items: center;
238
	justify-content: center;
239
	margin-bottom: 0;
240
}
241

242
.product-type {
243
	list-style: none;
244
	font-size: 32px;
245
	font-style: normal;
246
	font-weight: 500;
247
	line-height: normal;
248
	cursor: pointer;
249
	width: 145px;
250
	height: 79px;
251
	display: flex;
252
	justify-content: center;
253
	align-items: center;
254
	margin-right: 40px;
255
	user-select: none;
256
}
257

258
.product-type:last-child {
259
	margin-right: 0;
260
}
261

262
.active {
263
	display: flex;
264
	justify-content: center;
265
	align-items: center;
266
	position: relative;
267
	background: var(--primary, #f7f6f0);
268
	max-width: 145px;
269
	height: 79px;
270
	border-radius: 10px 10px 0px 0px;
271
}
272

273
.active span {
274
	border-bottom: 3px solid #000;
275
	padding-bottom: 5px;
276
	display: flex;
277
	align-items: center;
278
	justify-content: center;
279
}
280

281
.active::after {
282
	position: absolute;
283
	top: 0;
284
	left: 0;
285
	content: '';
286
}
287

288
.wrapper {
289
	display: grid;
290
	grid-template-columns: 1fr 1fr 1fr;
291
	grid-template-rows: 1fr 1fr;
292
	column-gap: 24px;
293
	row-gap: 18px;
294
	height: 100%;
295
	margin-top: 45px;
296
}
297

298
.products-list {
299
	display: flex;
300
	flex-direction: column;
301
	align-items: center;
302
	justify-content: center;
303
	width: 1314px;
304
	height: 1351px;
305
	margin: 0 auto;
306
	border-radius: 10px;
307
	background: var(--primary, #f7f6f0);
308
}
309

310
.see-more {
311
	display: inline-flex;
312
	padding: 12px 30px;
313
	justify-content: center;
314
	align-items: center;
315
	gap: 10px;
316
	border-radius: 20px;
317
	background: var(--secondary, #fff);
318
	border: none;
319
	width: 195px;
320
	margin-bottom: 35px;
321
	cursor: pointer;
322
}
323

324
.see-more:hover {
325
	background: var(--button-hover, rgba(217, 217, 217, 0.35));
326
}
327

328
.product-picture {
329
	width: 397px;
330
	height: 496px;
331
}
332

333
.featured__pictures {
334
	display: flex;
335
	justify-content: center;
336
}
337

338
.featured-picture,
339
.feat {
340
	width: 397px;
341
}
342

343
.feat {
344
	margin-right: 24px;
345
}
346

347
.featured-picture {
348
	margin-bottom: 18px;
349
}
350

351
.featured__section {
352
	position: relative;
353
	height: 336px;
354
	margin-bottom: 18px;
355
}
356

357
.large {
358
	height: 690px;
359
}
360

361
.featured__section h3 {
362
	position: absolute;
363
	top: 80%;
364
	left: 5%;
365
	font-size: 16px;
366
	font-style: normal;
367
	font-weight: 700;
368
	line-height: normal;
369
	text-align: start;
370
}
371

372
.featured-picture_large {
373
	height: 690px;
374
}
375

376
.featured-btn {
377
	position: absolute;
378
	top: calc(100% - 49px);
379
	left: calc(100% - 49px);
380
	cursor: pointer;
381
}
382

383
.featured-btn:hover .featured-btn-path {
384
	fill: #d9d9d9;
385
}
386

387
.knitwear {
388
	width: 173px;
389
}
390

391
.pants {
392
	width: 95px;
393
}
394

395
.special {
396
	width: 185px;
397
	top: 90% !important;
398
}
399

400
.fresh-top {
401
	width: 130px;
402
}
403

404
.dresses {
405
	width: 140px;
406
}
407

408
.feedback {
409
	margin-bottom: 44px;
410
}
411

412
.offered-product-picture {
413
	width: 329px;
414
	height: 410px;
415
}
416

417
.review {
418
	width: 398px;
419
	height: 631px;
420
	border-radius: 10px;
421
	background: var(--primary, #f7f6f0);
422
	flex-shrink: 0;
423
	display: flex;
424
	align-items: center;
425
	justify-content: center;
426
	margin-right: 23px;
427
}
428

429
.review-section {
430
	display: flex;
431
	flex-direction: column;
432
	align-items: center;
433
}
434

435
.stars img {
436
	margin-right: 4px;
437
}
438

439
.stars img:last-child {
440
	margin-right: 0;
441
}
442

443
.name {
444
	margin-bottom: 0;
445
}
446

447
.review-text {
448
	text-align: justify;
449
	width: 338px;
450
	height: 66px;
451
}
452

453
.get-more {
454
	width: 540px;
455
	text-align: center;
456
	margin-bottom: 60px;
457
}
458

459
.benefits {
460
	padding-right: 45px;
461
	border-right: 1px solid #000;
462
	height: 85%;
463
	display: flex;
464
	justify-content: center;
465
	align-items: center;
466
}
467

468
.benefits__wrapper {
469
	display: flex;
470
	justify-content: center;
471
	flex-direction: column;
472
	align-items: center;
473
}
474

475
.benefits__points {
476
	color: #000;
477
	text-align: start;
478
	font-size: 24px;
479
	font-style: normal;
480
	font-weight: 600;
481
	line-height: normal;
482
	list-style-image: url('../public/images/diamond-point.png');
483
	position: relative;
484
	margin-bottom: 41px;
485
}
486

487
.authorization {
488
	display: flex;
489
	justify-content: center;
490
	align-items: center;
491
	height: 797px;
492
	background: var(--primary, #f7f6f0);
493
}
494

495
.authorization-variants {
496
	margin-left: 86px;
497
	display: flex;
498
	flex-direction: column;
499
	justify-content: center;
500
	align-items: center;
501
}
502

503
.authorization-variants input {
504
	display: flex;
505
	padding: 6px 194px;
506
	width: calc(463px - 388px);
507
	justify-content: center;
508
	align-items: center;
509
	gap: 10px;
510
	margin-bottom: 30px;
511
	border-radius: 4px;
512
	background: var(--secondary, #fff);
513
	border: none;
514
	outline: none;
515
	font-family: Inter;
516
	font-size: 16px;
517
	font-style: normal;
518
	font-weight: 400;
519
	line-height: normal;
520
	color: #000;
521
	text-align: center;
522
}
523

524
.terms {
525
	margin-bottom: 28px;
526
	width: 462px;
527
	display: flex;
528
	justify-content: flex-start;
529
	user-select: none;
530
}
531

532
.terms label {
533
	display: flex;
534
	justify-content: start;
535
	align-items: center;
536
	cursor: pointer;
537
}
538

539
.terms input {
540
	margin: 0;
541
}
542

543
.terms h3 {
544
	color: #000;
545
	font-size: 16px;
546
	font-style: normal;
547
	font-weight: 600;
548
	line-height: normal;
549
	margin: 0;
550
}
551

552
.custom-checkbox {
553
	display: inline-block;
554
	width: 26px;
555
	height: 26px;
556
	border-radius: 4px;
557
	background: var(--secondary, #fff);
558
	vertical-align: sub;
559
	margin-right: 12px;
560
	position: relative;
561
}
562

563
.custom-checkbox::before {
564
	content: '';
565
	display: inline-block;
566
	width: 18px;
567
	height: 18px;
568
	background-image: url('../public/images/check.svg');
569
	background-repeat: no-repeat;
570
	background-size: contain;
571

572
	position: absolute;
573
	left: 50%;
574
	top: 52%;
575
	transform: translate(-50%, -50%) scale(0);
576

577
	/* transition: 0.1s ease-in; */
578
}
579

580
.real-checkbox:checked + .custom-checkbox::before {
581
	transform: translate(-50%, -50%) scale(1);
582
}
583

584
.real-checkbox {
585
	width: 0;
586
	height: 0;
587
	opacity: 0;
588
	position: absolute;
589
	z-index: -1;
590
}
591

592
.signUp {
593
	display: inline-flex;
594
	padding: 12px 30px;
595
	justify-content: center;
596
	align-items: center;
597
	gap: 10px;
598
	border-radius: 20px;
599
	background: #fff;
600
	font-family: Inter;
601
	font-size: 20px;
602
	font-style: normal;
603
	font-weight: 400;
604
	line-height: normal;
605
	border: none;
606
	width: 142px;
607
}
608

609
.signUp:hover {
610
	background: var(--button-hover, rgba(217, 217, 217, 0.35));
611
}
612

613
.or {
614
	margin-bottom: 23px;
615
}
616

617
.or::before,
618
.or::after {
619
	content: '';
620
	display: inline-block;
621

622
	/* выравниваем вертикально по середине */
623
	vertical-align: middle;
624

625
	/* не позволяем ширине превысить 100% (будет добавлен бордюр) */
626
	box-sizing: border-box;
627

628
	/* установка ширины в 100% делает линию равной ширине тега заголовка
629
	** благодаря этому линия заполнит все свободное пространство
630
	** слева и справа от текста
631
	*/
632
	width: 100%;
633
	height: 1px;
634
	background: #000;
635

636
	/* добавляем к линии левый и правый бордюр цветом основного фона заголовка
637
	** благодаря этому создается нужный отступ между линиями и текстом
638
	*/
639
	border: solid #000;
640
	border-width: 0 43px;
641
}
642

643
.or::before {
644
	margin-left: -100%;
645
	margin-right: 11px;
646
}
647

648
.or::after {
649
	margin-right: -100%;
650
	margin-left: 11px;
651
}
652

653
.socialBtn {
654
	display: inline-flex;
655
	padding: 12px 30px;
656
	justify-content: center;
657
	align-items: center;
658
	gap: 10px;
659
	border-radius: 20px;
660
	background: var(--secondary, #fff);
661
	font-size: 17px;
662
	font-style: normal;
663
	font-weight: 400;
664
	line-height: normal;
665
	border: none;
666
	width: 328px;
667
	height: 54px;
668
}
669

670
.socialBtn:hover {
671
	background: var(--button-hover, rgba(217, 217, 217, 0.35));
672
}
673

674
.google {
675
	margin-bottom: 23px;
676
}
677

678
.footer-info {
679
	display: flex;
680
	justify-content: start;
681
	align-items: center;
682
	padding-left: 101px;
683
	height: 261px;
684
	width: calc(100% - 101px);
685
	position: relative;
686
}
687

688
.about-us,
689
.get-help,
690
.follow-us {
691
	display: flex;
692
	flex-direction: column;
693
	align-items: flex-start;
694
	margin-left: 112px;
695
	height: 202px;
696
	margin-top: 42px;
697
}
698

699
.about-us__title,
700
.get-help__title,
701
.follow-us__title {
702
	color: #000;
703
	font-size: 16px;
704
	font-style: normal;
705
	font-weight: 600;
706
	line-height: normal;
707
}
708

709
.about-us__list,
710
.get-help__list {
711
	list-style: none;
712
	text-align: start;
713
	padding-left: 0;
714
}
715

716
.about-us__points,
717
.get-help__points {
718
	margin-bottom: 10px;
719
	color: #000;
720
	font-size: 16px;
721
	font-style: normal;
722
	font-weight: 400;
723
	line-height: normal;
724
	cursor: pointer;
725
	width: fit-content;
726
}
727

728
.social-icons {
729
	display: flex;
730
}
731

732
.social-icon {
733
	display: flex;
734
	justify-content: center;
735
	align-items: center;
736
	margin-right: 6px;
737
	margin-top: 11px;
738
	width: 36px;
739
	height: 36px;
740
	background-color: var(--primary, #f7f6f0);
741
	border-radius: 50px;
742
	cursor: pointer;
743
}
744

745
.social-icon:hover {
746
	fill-opacity: 0.7;
747
}
748

749
.guide {
750
	display: flex;
751
	position: absolute;
752
	right: 0;
753
	bottom: -5px;
754
}
755

756
.guide__list {
757
	display: flex;
758
	list-style: none;
759
}
760

761
.guide__points {
762
	margin-right: 20px;
763
	color: #000;
764
	font-size: 16px;
765
	font-style: normal;
766
	font-weight: 600;
767
	line-height: normal;
768
	cursor: pointer;
769
}
770

771
.footer-rights {
772
	display: flex;
773
	justify-content: center;
774
	align-items: center;
775
	background-color: #000;
776
	height: 49px;
777
	user-select: none;
778
}
779

780
.footer-rights span {
781
	color: #fff;
782
	font-size: 16px;
783
	font-style: normal;
784
	font-weight: 400;
785
	line-height: normal;
786
	margin-left: 2px;
787
}
788