620 lines
10 KiB
SCSS
620 lines
10 KiB
SCSS
@import "_variables";
|
|
|
|
.main-top {
|
|
padding-top: 16px;
|
|
overflow: hidden;
|
|
max-height: 570px;
|
|
position: relative;
|
|
|
|
@media (min-width: 576px) {
|
|
max-height: 600px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
max-height: 700px;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
min-height: 516px;
|
|
max-height: 555px;
|
|
|
|
&:after {
|
|
content: "";
|
|
width: 28px;
|
|
height: 28px;
|
|
background: #4566E8;
|
|
filter: blur(4px);
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
top: 30px;
|
|
right: 106px;
|
|
}
|
|
|
|
&:before {
|
|
content: "";
|
|
width: 65px;
|
|
height: 65px;
|
|
background: #7CE6EE;
|
|
filter: blur(16px);
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
left: calc(((100% - 990px) / 2) / 2);
|
|
top: 32px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
min-height: 555px;
|
|
&:before {
|
|
left: calc(((100% - 1290px) / 2) / 2);
|
|
top: 32px;
|
|
}
|
|
}
|
|
|
|
|
|
.b-inner {
|
|
position: relative;
|
|
|
|
&:before {
|
|
@media (min-width: 992px) {
|
|
content: "";
|
|
width: 65px;
|
|
height: 65px;
|
|
background: #7CE6EE;
|
|
filter: blur(16px);
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
left: 500px;
|
|
top: 300px;
|
|
}
|
|
@media (min-width: 1200px) {
|
|
left: 520px;
|
|
top: 310px;
|
|
}
|
|
}
|
|
|
|
&:after {
|
|
@media (min-width: 992px) {
|
|
width: 65px;
|
|
height: 65px;
|
|
background: #D280FF;
|
|
filter: blur(6.5px);
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
top: 110px;
|
|
right: -2px;
|
|
content: "";
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
top: 320px;
|
|
right: -2%;
|
|
}
|
|
|
|
@media (min-width: 1420px) {
|
|
top: 320px;
|
|
right: -8%;
|
|
}
|
|
|
|
@media (min-width: 1770px) {
|
|
top: 320px;
|
|
right: -18%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.title-h1 {
|
|
text-align: center;
|
|
margin-bottom: 16px;
|
|
padding-top: 8px;
|
|
|
|
@media (min-width: 768px) {
|
|
padding-top: 24px;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
max-width: 690px;
|
|
text-align: left;
|
|
padding-top: 70px;
|
|
margin-bottom: 24px;
|
|
}
|
|
}
|
|
|
|
&__wrap-text {
|
|
margin-bottom: 24px;
|
|
text-align: center;
|
|
|
|
@media (min-width: 992px) {
|
|
max-width: 530px;
|
|
text-align: left;
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
max-width: 580px;
|
|
}
|
|
@media (min-width: 1450px) {
|
|
max-width: 690px;
|
|
}
|
|
}
|
|
|
|
&__text {
|
|
color: #2C7873;
|
|
@include rem(13);
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 133.333%;
|
|
|
|
@media (min-width: 576px) {
|
|
@include rem(16);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
@include rem(24);
|
|
}
|
|
|
|
@media (max-width: 1249px) {
|
|
br {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__wrap-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
@media (min-width: 992px) {
|
|
gap: 24px;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
&:after {
|
|
content: "";
|
|
width: 41px;
|
|
height: 41px;
|
|
background: #FCFF3D;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
left: -63px;
|
|
bottom: -75px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 50px;
|
|
padding: 12px;
|
|
@include rem(14);
|
|
border-radius: 24px;
|
|
gap: 6px;
|
|
color: $white;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: 133.333%;
|
|
text-decoration: none;
|
|
|
|
&--android {
|
|
background: #D280FF;
|
|
}
|
|
|
|
&--apple {
|
|
background: #5AADCC;
|
|
}
|
|
|
|
img {
|
|
width: 24px;
|
|
height: 24px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.line {
|
|
background: #D9D9D9;
|
|
width: 1px;
|
|
height: 24px;
|
|
}
|
|
|
|
@media (min-width: 430px) {
|
|
height: 56px;
|
|
padding: 16px;
|
|
@include rem(18);
|
|
border-radius: 24px;
|
|
min-width: 191px;
|
|
gap: 8px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
height: 64px;
|
|
padding: 11px 15px 11px 24px;
|
|
@include rem(24);
|
|
border-radius: 62px;
|
|
justify-content: flex-start;
|
|
.line {
|
|
height: 42px;
|
|
}
|
|
|
|
img {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__img {
|
|
width: 397px;
|
|
height: 403px;
|
|
left: 50%;
|
|
position: relative;
|
|
transform: translateX(-50%);
|
|
|
|
img {
|
|
width: 100%;
|
|
height: auto;
|
|
object-fit: cover;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 65px;
|
|
height: 65px;
|
|
background: #7CE6EE;
|
|
filter: blur(16px);
|
|
border-radius: 50%;
|
|
top: 255px;
|
|
z-index: 2;
|
|
left: -20px;
|
|
}
|
|
|
|
&:after {
|
|
content: "";
|
|
width: 65px;
|
|
height: 65px;
|
|
background: #D280FF;
|
|
filter: blur(6.5px);
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
right: -35px;
|
|
top: 25px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
width: 415px;
|
|
height: 421px;
|
|
right: 0;
|
|
top: 90px;
|
|
left: auto;
|
|
position: absolute;
|
|
transform: none;
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
top: 0;
|
|
right: 0;
|
|
width: 615px;
|
|
height: 624px;
|
|
}
|
|
|
|
@media (min-width: 1420px) {
|
|
width: 615px;
|
|
height: 624px;
|
|
right: -44px;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-articles {
|
|
position: relative;
|
|
background: #DFF5FB;
|
|
padding-bottom: 4px;
|
|
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
background-image: url(/images/wave-top.svg);
|
|
background-position: center;
|
|
height: 86px;
|
|
width: 100%;
|
|
top: -86px;
|
|
overflow: hidden;
|
|
background-size: 893px 87px;
|
|
|
|
@media (min-width: 768px) {
|
|
height: 97px;
|
|
width: 100%;
|
|
top: -96px;
|
|
background-size: 992px 97px;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
height: 150px;
|
|
width: 100%;
|
|
top: -149px;
|
|
background-size: 1538px 150px;
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
height: 187px;
|
|
top: -186px;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
background-image: url(/images/wave-2.svg);
|
|
background-position: center;
|
|
height: 16px;
|
|
width: 100%;
|
|
bottom: -15px;
|
|
overflow: hidden;
|
|
left: 0;
|
|
background-size: contain;
|
|
background-color: $white;
|
|
|
|
@media (min-width: 768px) {
|
|
height: 80px;
|
|
bottom: -79px;
|
|
width: 100%;
|
|
background-size: 1920px 80px;
|
|
}
|
|
}
|
|
|
|
.title-h2 {
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
|
|
.main-popular {
|
|
padding-top: 32px;
|
|
padding-bottom: 16px;
|
|
|
|
.title-h2 {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
&__row {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
&__coll {
|
|
width: 100%;
|
|
display: none;
|
|
&:first-child {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
&__coll {
|
|
width: calc(50% - 8px);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
padding-top: 104px;
|
|
padding-bottom: 24px;
|
|
|
|
&__coll {
|
|
width: calc(33.33333333% - 8px);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
&__coll {
|
|
width: calc(20% - 8px);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
&__coll {
|
|
width: calc(16.66666667% - 8px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-find {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding-bottom: 25px;
|
|
|
|
.b-inner {
|
|
position: relative;
|
|
|
|
&:before {
|
|
|
|
@media (min-width: 992px) {
|
|
content: "";
|
|
width: 65px;
|
|
height: 65px;
|
|
background: #7CE6EE;
|
|
filter: blur(16px);
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
top: 379px;
|
|
right: -6%;
|
|
}
|
|
@media (min-width: 1200px) {
|
|
top: 379px;
|
|
right: -10%;
|
|
}
|
|
}
|
|
|
|
&:after {
|
|
@media (min-width: 992px) {
|
|
width: 65px;
|
|
height: 65px;
|
|
background: #D280FF;
|
|
filter: blur(6.5px);
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
bottom: -5px;
|
|
right: -2px;
|
|
content: "";
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
|
|
right: -2%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
&:before {
|
|
content: "";
|
|
width: 51px;
|
|
height: 51px;
|
|
background: #EC8238;
|
|
filter: blur(6.5px);
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
left: 20px;
|
|
top: 923px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
&:before {
|
|
left: 126px;
|
|
top: 923px;
|
|
}
|
|
}
|
|
|
|
&__top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.open-filter {
|
|
display: flex;
|
|
cursor: pointer;
|
|
width: 24px;
|
|
height: 24px;
|
|
|
|
@media (min-width: 992px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
.b-filter {
|
|
padding-right: 8px;
|
|
position: relative;
|
|
|
|
@media (min-width: 992px) {
|
|
&:before {
|
|
content: "";
|
|
width: 65px;
|
|
height: 65px;
|
|
background: #D280FF;
|
|
filter: blur(6.5px);
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
left: -126px;
|
|
top: 300px;
|
|
}
|
|
|
|
&:after {
|
|
content: "";
|
|
width: 65px;
|
|
height: 65px;
|
|
background: #F5F944;
|
|
filter: blur(6.5px);
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
left: 51px;
|
|
bottom: -110px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__search {
|
|
width: 100%;
|
|
display: none;
|
|
height: 54px;
|
|
gap: 16px;
|
|
margin-bottom: 16px;
|
|
|
|
select,
|
|
input {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&__input {
|
|
height: 100%;
|
|
flex: 1 0 0%;
|
|
}
|
|
|
|
&__sort {
|
|
width: 200px;
|
|
height: 100%;
|
|
}
|
|
|
|
&__language {
|
|
width: 150px;
|
|
height: 100%;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
display: flex;
|
|
&__sort {
|
|
width: 120px;
|
|
}
|
|
|
|
&__language {
|
|
width: 120px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
&__sort {
|
|
width: 200px;
|
|
}
|
|
|
|
&__language {
|
|
width: 150px;
|
|
}
|
|
}
|
|
|
|
.btn-apply {
|
|
width: 97px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-result {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
margin-bottom: 16px;
|
|
}
|