219 lines
5.3 KiB
Sass
219 lines
5.3 KiB
Sass
/*******************************************************/
|
|
/******************** ## Hero Area ********************/
|
|
/*******************************************************/
|
|
.hero-title
|
|
z-index: 2
|
|
color: white
|
|
font-weight: 700
|
|
font-size: 200px
|
|
position: relative
|
|
text-align: center
|
|
text-transform: uppercase
|
|
+res-bl(lb)
|
|
font-size: 150px
|
|
+res-bl(lp)
|
|
font-size: 120px
|
|
+res-bl(lg)
|
|
font-size: 80px
|
|
+res-bl(md)
|
|
font-size: 60px
|
|
+res-bl(sm)
|
|
font-size: 50px
|
|
+res-bl(ms)
|
|
font-size: 40px
|
|
+res-bl(xs)
|
|
font-size: 35px
|
|
|
|
.main-hero-image
|
|
height: 790px
|
|
margin-top: -8%
|
|
position: relative
|
|
border-radius: 20px
|
|
+res-bl(xxl)
|
|
height: 555px
|
|
+res-bl(lg)
|
|
height: 450px
|
|
+res-bl(sm)
|
|
height: 400px
|
|
&:before
|
|
+poLT(0)
|
|
content: ''
|
|
+size(100%)
|
|
background: linear-gradient(180deg, #1D231F 0%, rgba(29, 35, 31, 0) 100%)
|
|
|
|
.search-filter-inner
|
|
display: flex
|
|
z-index: 2
|
|
position: relative
|
|
margin-top: -50px
|
|
background: white
|
|
border-radius: 12px
|
|
padding: 28px 55px 10px
|
|
box-shadow: 10px 4px 60px rgba(197, 197, 197, 0.25)
|
|
+res-bl(lp)
|
|
+gapLR(padding, 35px)
|
|
+res-bl(xl)
|
|
flex-wrap: wrap
|
|
.filter-item
|
|
min-width: 18%
|
|
padding-left: 28px
|
|
position: relative
|
|
margin-bottom: 15px
|
|
padding-right: 20px
|
|
margin-right: 30px
|
|
border-right: 1px solid $border-color
|
|
+res-bl(md)
|
|
margin-right: 15px
|
|
padding-right: 5px
|
|
width: calc(50% - 15px)
|
|
+res-bl(ms)
|
|
width: 100%
|
|
margin-right: 0
|
|
.icon
|
|
+poLT(0, 3px)
|
|
.title
|
|
font-size: 14px
|
|
.nice-select
|
|
border: none
|
|
line-height: 1.1
|
|
padding: 0 20px 0 0
|
|
.current
|
|
font-weight: 500
|
|
color: $heading-color
|
|
&:after
|
|
top: 0
|
|
+size(8px)
|
|
.search-button
|
|
align-self: center
|
|
margin-bottom: 15px
|
|
+res-ab(xl)
|
|
margin-left: auto
|
|
|
|
&.style-two
|
|
margin-top: 0
|
|
border-radius: 10px
|
|
flex-direction: column
|
|
padding: 40px 30px 25px
|
|
background: $heading-color
|
|
+res-bl(xs)
|
|
+gapLR(padding, 20px)
|
|
.filter-item
|
|
width: 100%
|
|
max-width: none
|
|
margin-right: 0
|
|
border-right: none
|
|
margin-bottom: -1px
|
|
border-radius: 10px
|
|
background: #292E2A
|
|
padding: 15px 20px 20px 55px
|
|
border: 1px solid rgba(255, 255, 255, 0.07)
|
|
.icon
|
|
top: 20px
|
|
left: 30px
|
|
.title
|
|
color: #939393
|
|
.nice-select
|
|
background-color: transparent
|
|
.current
|
|
color: white
|
|
.list li
|
|
color: $base-color
|
|
|
|
/* Hero Two */
|
|
.hero-area-two
|
|
+res-ab(xl)
|
|
padding-bottom: 160px
|
|
|
|
.hero-image-two
|
|
min-height: 500px
|
|
border-radius: 10px
|
|
+res-ab(xl)
|
|
+poRB(0)
|
|
width: calc(50vw - 155px)
|
|
height: calc(100% - 10px)
|
|
|
|
.hero-content-two
|
|
max-width: 535px
|
|
+res-ab(lg)
|
|
padding-right: 20px
|
|
+res-bl(xl)
|
|
margin-bottom: 55px
|
|
h1
|
|
margin-bottom: 22px
|
|
letter-spacing: -2px
|
|
+res-bl(lb)
|
|
font-size: 72px
|
|
+res-bt(lg, lp)
|
|
font-size: 65px
|
|
+res-bl(md)
|
|
font-size: 55px
|
|
+res-bl(sm)
|
|
font-size: 50px
|
|
+res-bl(ms)
|
|
font-size: 45px
|
|
+res-bl(xs)
|
|
font-size: 40px
|
|
p
|
|
line-height: 1.66
|
|
+res-ab(xs)
|
|
font-size: 18px
|
|
|
|
/* Hero Three */
|
|
.hero-area-three
|
|
+gapLR(margin, 30px)
|
|
+res-bl(lg)
|
|
+gapLR(margin, 15px)
|
|
|
|
.hero-content-three
|
|
.subtitle
|
|
+res-ab(lg)
|
|
font-size: 20px
|
|
h1
|
|
font-size: 80px
|
|
font-weight: 500
|
|
margin-bottom: 50px
|
|
letter-spacing: -2px
|
|
+res-bl(xl)
|
|
font-size: 65px
|
|
+res-bl(md)
|
|
font-size: 55px
|
|
margin-bottom: 30px
|
|
+res-bl(sm)
|
|
font-size: 50px
|
|
+res-bl(ms)
|
|
font-size: 42px
|
|
+res-bl(xs)
|
|
font-size: 36px
|
|
p
|
|
+res-ab(xxl)
|
|
font-size: 27px
|
|
+res-bt(md, xxl)
|
|
font-size: 22px
|
|
span
|
|
color: white
|
|
font-weight: 600
|
|
padding-left: 8px
|
|
padding-right: 5px
|
|
border-radius: 12px
|
|
background: $secondary-color
|
|
|
|
.hero-shapes
|
|
.shape
|
|
z-index: -1
|
|
position: absolute
|
|
&.one
|
|
left: 0
|
|
top: 6%
|
|
max-width: 30%
|
|
&.two
|
|
top: 0
|
|
right: 25%
|
|
max-width: 10%
|
|
&.three
|
|
left: 5%
|
|
bottom: 3%
|
|
max-width: 20%
|
|
&.four
|
|
bottom: 0
|
|
right: 3%
|
|
max-width: 30% |