File: /mnt/data/dreamssalon-wp-market/wp-content/themes/dreamsalon/assets/scss/pages/_banner.scss
/*============================
19. Banner
============================*/
@use "../utils/mixins" as *;
@use '../variables' as *;
.banner-section {
background: url('../img/banner/banner-bg.png') $darkmode-dark;
position: relative;
padding-top: 74px;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
background: url('../img/bg/banner-bg-01.png');
height: 187px;
width: 100%;
background-size: 100% 100%;
}
.banner-content {
padding: 134px 0;
@include respond-below(xl) {
padding: 100px 0;
}
@include respond-below(lg) {
padding: 70px 0;
}
.user-rating {
gap: 12px;
margin-bottom: 24px;
@include respond-below(sm) {
justify-content: center;
flex-wrap: wrap;
text-align: center;
flex-direction: column;
}
.avatar-list-stacked {
img {
border: 2px solid $darkmode-white;
}
}
.rating {
font-size: 14px;
i {
&.filled {
color: $warning;
}
}
@include respond-below(sm) {
justify-content: center;
}
}
p, span {
color: $darkmode-white;
margin-bottom: 0;
font-size: 14px;
}
}
h1 {
color: $darkmode-white;
font-size: 52px;
@include respond-below(xl) {
font-size: 44px;
}
@include respond-below(lg) {
font-size: 38px;
}
@include respond-below(md) {
font-size: 30px;
}
@include respond-below(sm) {
text-align: center;
}
}
p {
color: $darkmode-white;
margin-bottom: 40px;
@include respond-below(sm) {
text-align: center;
}
}
.banner-search {
position: relative;
border-radius: $border-radius-md;
display: flex;
align-items: center;
padding: 16px;
gap: 20px;
z-index: 1;
border: 3px solid transparent;
background: rgba($white-rgb, 0.1);
background-image: linear-gradient($dark, $dark), $linear-gradient-secondary;
background-origin: border-box;
background-clip: padding-box, border-box;
@include respond-below(sm) {
display: block;
padding: 16px;
}
div {
flex: 1;
flex-shrink: 0;
@include respond-below(sm) {
margin-bottom: 24px;
}
}
.form-label {
color: $darkmode-white;
font-weight: $font-weight-semibold;
margin-bottom: 4px;
}
.form-control {
min-height: 24px;
width: 100%;
background: transparent;
color: $darkmode-white;
font-size: 16px;
@include respond-below(lg) {
font-size: 14px;
}
@include respond-below(sm) {
width: 100%;
}
}
button {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
color: $darkmode-white;
background-color: $primary;
border-color: $primary;
&:hover {
@include respond-above(sm) {
background-color: $primary-dark;
border-color: $primary-dark;
}
}
@include respond-above(sm) {
font-size: 16px;
}
@include respond-below(sm) {
width: 100%;
}
}
}
}
.banner-img {
position: relative;
text-align: end;
z-index: 1;
margin-left: 60px;
@include respond-below(xl) {
margin-left: 0;
}
@include respond-below(lg) {
display: none;
}
.banner-bg {
position: absolute;
bottom: 0;
right: 0;
max-width: 100%;
max-height: 100%;
z-index: -1;
}
.banner-bg-01 {
position: absolute;
top: 26%;
right: 20%;
width: 27px;
height: 27px;
z-index: -1;
}
.banner-bg-02 {
position: absolute;
bottom: 43%;
right: 5%;
width: 27px;
height: 27px;
z-index: -1;
}
.app-view {
background: $darkmode-white;
padding: 12px;
@include rounded(6px);
position: absolute;
right: 15px;
top: 18%;
font-size: 14px;
font-weight: $font-weight-semibold;
color: $darkmode-gray-900;
@include respond-below(xxl) {
right: 0;
}
@include respond-below(xl) {
top: 0;
}
&::before {
border: 8px solid $darkmode-white;
border-color: transparent transparent $darkmode-white $darkmode-white;
content: "";
position: absolute;
top: 50%;
left: -7px;
transform: rotate(45deg) translateY(-50%);
}
}
}
&-two {
position: relative;
background-color: #FFF9F6;
padding: 80px 0 80px;
@include respond-below(lg) {
padding: 60px 0 60px;
}
.user-rating {
padding: 9px 20px 9px 12px;
box-shadow: $box-shadow;
}
.banner-bg4 {
right: 39%;
top: 8%;
}
.banner-btns {
margin-top: 34px;
margin-bottom: 40px;
}
.banner-content {
padding-right: 86px;
@include respond-below(xxl) {
padding-right: 60px;
}
@include respond-below(xl) {
padding-right: 40px;
}
@include respond-below(lg) {
padding-right: 0;
}
h1 {
font-size: 52px;
@include respond-below(xl) {
font-size: 44px;
}
@include respond-below(lg) {
font-size: 38px;
}
@include respond-below(md) {
font-size: 30px;
}
}
.item-padding {
padding: 16px !important;
@include respond-below(sm) {
text-align: center;
}
.item-text {
@include respond-below(xl) {
display: flex;
flex-direction: column;
}
@include respond-below(md) {
display: flex;
flex-direction: row;
}
@include respond-below(sm) {
justify-content: center;
}
span {
@include respond-below(md) {
padding-left: 4px;
}
}
}
}
}
.banner-search {
position: relative;
padding: 16px;
gap: 20px;
background: $white;
z-index: 1;
text-align: left;
max-width: 853px;
width: 100%;
margin: 80px auto -40px;
border-radius: 6px;
border: 2px solid $border-color;
box-shadow: $box-shadow;
@include respond-below(lg) {
margin-top: 60px;
}
@include respond-below(sm) {
flex-direction: column;
div {
width: 100%;
}
.btn {
width: 100%;
}
}
.form-label {
font-weight: $font-weight-semibold;
margin-bottom: 4px;
}
.form-control {
font-size: 16px;
min-height: 24px;
width: 100%;
background: transparent;
color: $body-color;
@include respond-below(sm) {
width: 100%;
}
}
}
.banner-image {
min-height: 538px;
position: relative;
overflow: visible;
@include respond-below(xxl){
min-height: 458px;
}
@include respond-below(xl){
min-height: 370px;
}
@include respond-below(lg){
display: none;
}
img {
border-radius: 6px;
border: 4px solid $white;
box-shadow: $box-shadow;
position: absolute;
}
.banner-img1 {
width: 53%;
rotate: 9deg;
left: 0;
bottom: 20px;
z-index: 3;
}
.banner-img2 {
width: 57%;
z-index: 1;
right: 0;
top: 0;
}
.banner-img3 {
width: 33%;
z-index: 2;
rotate: 86deg;
right: 73px;
bottom: -51px;
}
}
}
&-three {
background: $linear-gradient-white, $radial-gradient;
position: relative;
padding: 120px 0;
z-index: 0;
@include respond-below(lg) {
padding: 50px 0;
}
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
background-image: url('../img/home-3/banner-bg-01.png');
height: 100%;
width: 100%;
background-size: auto;
background-repeat: no-repeat;
z-index: -1;
}
.banner-content {
.badge {
border: 1px solid $primary;
margin-bottom: 20px;
padding: 6px 8px;
font-weight: $font-weight-semibold;
}
h1 {
font-size: 52px;
margin-bottom: 20px;
@include respond-below(xl) {
font-size: 44px;
}
@include respond-below(lg) {
font-size: 38px;
}
@include respond-below(md) {
font-size: 30px;
}
}
.avatar-list-stacked {
img {
border: 2px solid $white;
}
}
}
.banner-search {
position: relative;
padding: 16px;
gap: 20px;
background: rgba($white-rgb, 1);
z-index: 1;
text-align: left;
max-width: 788px;
margin: 0 auto;
border: 3px solid transparent;
background-image: linear-gradient($white, $white), $linear-gradient-secondary;
background-origin: border-box;
background-clip: padding-box, border-box;
@include respond-below(lg) {
margin-bottom: 30px;
}
div {
flex: 1;
flex-shrink: 0;
@include respond-below(sm) {
margin-bottom: 10px;
}
&:first-child {
max-width: 160px;
padding-right: 16px;
border-right: 1px solid $border-color;
@include respond-below(sm) {
max-width: 100%;
padding-right: 0;
border-right: 0;
}
}
}
.select2-container--default {
.select2-selection--single {
background-color: transparent;
border-color: transparent;
color: $gray-900;
font-size: 16px;
height: 32px;
display: flex;
align-items: center;
.select2-selection__rendered {
color: $gray-900 !important;
padding-left: 4px;
font-size: 16px;
line-height: 30px;
@include respond-below(md) {
font-size: 14px;
}
}
.select2-selection__arrow {
height: 30px;
right: 0;
b {
border-color: $gray-900;
top: 50%;
}
}
}
&.select2-container--open .select2-selection--single {
.select2-selection__arrow {
b {
margin-top: 0;
}
}
}
}
.select2-container--focus {
.select2-selection--single {
background-color: transparent !important;
height: 32px;
}
}
.form-label {
font-weight: $font-weight-semibold;
margin-bottom: 4px;
}
.form-control {
font-size: 16px;
min-height: 24px;
width: 100%;
background: transparent;
color: $gray-900;
@include respond-below(sm) {
width: 100%;
}
}
}
.user-rating {
.rating {
i {
color: $warning;
font-size: 14px;
}
}
}
.banner-bg1 {
animation: sparkleFloat 5s ease-in-out infinite;
left: 6%;
bottom: 15%;
}
.banner-bg2 {
animation: sparkleFloat 5s ease-in-out infinite;
right: 6%;
top: 15%;
}
.banner-bg3 {
right: 0;
bottom: 0;
}
.section-content-margin {
margin-bottom: 40px;
@include respond-below(lg) {
margin-bottom: 30px;
}
}
}
&-four {
background: url('../img/banner/banner-bg-01.png') $light;
position: relative;
padding-top: 74px;
z-index: 1;
overflow: hidden;
@include respond-below(lg) {
padding-top: 55px;
}
.banner-01 {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.banner-02 {
position: absolute;
bottom: 10%;
right: 0;
z-index: -2;
}
.banner-03 {
position: absolute;
top: 40%;
right: 10%;
z-index: -1;
animation: updown 3.5s ease-in-out 0s infinite alternate;
}
.banner-04 {
position: absolute;
top: 20%;
left: 10%;
z-index: -1;
animation: updown 3.5s ease-in-out 0s infinite alternate;
}
.horizontal-slide {
position: absolute;
top: 50%;
@include transform(translateY(-50%));
z-index: -1;
.slide-list {
gap: 50px;
}
span {
font-size: 250px;
font-weight: $font-weight-bold;
display: block;
margin-bottom: 0;
white-space: nowrap;
color: $darkmode-white;
text-shadow: 0 4px 10px rgba(0,0,0,0.12);
@include respond-below(lg) {
font-size: 140px;
}
@include respond-below(md) {
font-size: 100px;
}
@include respond-below(sm) {
font-size: 40px;
}
}
}
.banner-content {
text-align: center;
padding: 76px 0;
position: relative;
@include respond-below(lg) {
padding: 50px 0;
}
.wave-01 {
position: absolute;
top: 0;
right: 0;
width: 100%;
}
.wave {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
}
.banner-img {
text-align: center;
position: relative;
@include respond-below(sm) {
max-width: 250px;
margin: 0 auto;
}
&::before {
content: none;
position: absolute;
top: 50%;
left: 50%;
width: 506px;
height: 506px;
background: $primary;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: -1;
}
img {
@include respond-below(sm) {
margin: 0 auto;
}
}
}
.banner-bg {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
z-index: -1;
animation: spin 30s linear infinite;
@include respond-below(sm) {
max-width: 250px;
}
}
}
.wave-container {
position: absolute;
height: 506px;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
z-index: -1;
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 506px;
height: 506px;
background: $primary;
border-radius: 50%;
z-index: 10;
@include respond-below(lg) {
width: 290px;
height: 290px;
}
@include respond-below(md) {
width: 210px;
height: 210px;
}
}
&::before {
content: "";
position: absolute;
width: 50%;
height: 50%;
background-repeat: no-repeat;
background-size: 100% auto;
bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 674 117' fill='none'><path d='M181.903 25.7396C85.1469 59.7082 5.01021 39.8932 -22.9636 25.7396V104.292C41.2115 131.892 151.5 104.292 181.903 90C250.071 57.9552 360.026 43.4071 426.262 68.2004C484.5 90 612.5 49.5 633.597 68.2004H670.621C675.557 33.5241 684.5 -9 601.509 8.75526C508.583 28.6361 524.993 10.8783 411.452 8.75526C297.912 6.63222 302.848 -16.7212 181.903 25.7396Z' fill='%23567642'/></svg>");
@include respond-below(lg) {
height: 20%;
bottom: 15%;
}
}
&::after {
content: "";
position: absolute;
width: 60%;
height: 50%;
background-repeat: repeat-x;
background-size: 100% auto;
top: 5%;
right: -5%;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 674 117' fill='none'><path d='M181.903 25.7396C85.1469 59.7082 5.01021 39.8932 -22.9636 25.7396V104.292C41.2115 131.892 151.5 104.292 181.903 90C250.071 57.9552 360.026 43.4071 426.262 68.2004C484.5 90 612.5 49.5 633.597 68.2004H670.621C675.557 33.5241 684.5 -9 601.509 8.75526C508.583 28.6361 524.993 10.8783 411.452 8.75526C297.912 6.63222 302.848 -16.7212 181.903 25.7396Z' fill='%23567642'/></svg>");
@include respond-below(lg) {
height: 20%;
top: 19%;
}
@include respond-below(md) {
top: 28%;
}
}
}
.wave {
position: absolute;
width: 200%;
height: 150px;
animation: waveMove 8s linear infinite;
}
.wave1 {
animation: waveMove 8s linear infinite;
}
.wave2 {
animation: waveMove 12s linear infinite;
}
@keyframes waveMove {
0% {
transform: translateX(0) translateY(0) rotate(0deg);
}
25% {
transform: translateX(-5px) translateY(2px) rotate(0deg);
}
50% {
transform: translateX(0) translateY(4px) rotate(0deg);
}
75% {
transform: translateX(5px) translateY(2px) rotate(0deg);
}
100% {
transform: translateX(0) translateY(0) rotate(0deg);
}
}
}
&-six {
position: relative;
overflow: hidden;
width: 100%;
background: $darkmode-dark;
video {
position: absolute;
top: 0;
left: 50%;
min-width: 100%;
min-height: inherit;
width: 100%;
height: auto;
object-fit: cover;
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
@include respond-below(xl) {
min-height: 100%;
}
@include respond-below(lg) {
height: 495px;
}
@include respond-below(md) {
height: 450px;
}
@include respond-below(sm) {
height: 480px;
}
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(89.85deg, rgba(0, 0, 0, 0.7) 28.66%, rgba(0, 0, 0, 0.28) 48.52%, rgba(0, 0, 0, 0.7) 69.79%);
opacity: 0.5;
z-index: 1;
}
.banner-content {
padding: 120px 0;
position: relative;
z-index: 2;
@include respond-below(lg) {
padding: 60px 0;
}
@include respond-below(sm) {
padding: 35px 0;
text-align: center;
}
h1 {
color: $darkmode-white;
font-size: 52px;
margin-bottom: 16px;
@include respond-below(xl) {
font-size: 44px;
}
@include respond-below(lg) {
font-size: 38px;
}
@include respond-below(md) {
font-size: 30px;
}
@include respond-below(sm) {
text-align: center;
}
}
p {
color: $darkmode-white;
margin-bottom: 40px;
@include respond-below(sm) {
text-align: center;
}
}
}
.section-badge {
@include respond-below(sm) {
justify-content: center;
}
}
.banner-slide {
padding-bottom: 30px;
}
}
&-five {
padding: 230px 0px !important;
@include respond-below(lg) {
padding: 100px 0px !important;
}
&:before {
content: unset;
}
.row {
position: relative;
z-index: 1;
}
.banner-content {
position: relative;
padding-left: 67px;
padding-top: 0px;
padding-bottom: 0px;
@include respond-below(lg) {
text-align: center;
padding-left: 0px;
}
.sub-title {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
transform: rotate(-90deg);
text-decoration: underline;
@include respond-below(lg) {
position: unset;
transform: unset;
margin-bottom: 4px;
}
@include respond-below(sm) {
left: 32px;
}
}
h1 {
color: $darkmode-white;
margin-bottom: 20px !important;
}
p {
text-align: start;
@include respond-below(lg) {
text-align: center;
}
}
.banner-btn {
margin-top: 40px;
@include respond-below(lg) {
justify-content: center;
}
}
}
.banner-right {
text-align: end;
@include respond-below(lg) {
display: flex;
align-items: center;
gap: 20px;
justify-content: center;
margin: 40px 0px 0px;
}
@include respond-below(sm) {
display: flex;
flex-wrap: wrap;
}
.banner-video {
margin-left: auto;
position: relative;
width: 100%;
max-width: 255px;
@include respond-below(lg) {
margin-left: unset;
}
img {
border-radius: $border-radius-md !important;
width: 100%;
}
.banner-vid-play-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: $darkmode-white;
color: $primary;
text-decoration: none;
cursor: pointer;
z-index: 1;
transition: transform 0.3s ease;
position: absolute;
inset: 0;
margin: auto;
i {
position: relative;
z-index: 2;
}
&:hover {
transform: scale(1.05);
}
&::before,
&::after {
content: "";
position: absolute;
border: 5px solid $primary-transparent;
border-radius: 50%;
inset: 0;
animation: wave-pulse 2s infinite;
z-index: 0;
}
&::after {
animation-delay: 1s;
}
}
}
.banner-group {
background: $white;
border-radius: 6px;
text-align: start;
width: fit-content;
margin-left: auto;
@include respond-below(lg) {
margin-left: unset;
}
p {
font-weight: $font-weight-semibold;
color: $gray-900;
}
.avatar-item {
padding: 12px;
}
}
}
}
}
.slider-item {
overflow: hidden;
&::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: $dark-linear-gradient;
z-index: 1;
}
.banner-slider-item {
position: absolute;
top: 0;
height: 100%;
width: 100%;
.banner-slider {
height: 100%;
.slick-list {
height: 100%;
img {
height: 100%;
width: 100%;
object-fit: cover !important;
}
}
}
.slick-dots {
list-style: none;
padding: 0;
margin: 0;
z-index: 111;
bottom: 40px;
width: 100%;
transform: translateX(0%);
li {
align-items: center;
margin: 0px 18px;
.slick-number {
font-size: 16px;
font-weight: 600;
color: $darkmode-white;
position: absolute;
display: inline-block;
left: 0;
opacity: 0.7;
}
&.slick-active .slick-number {
opacity: 1;
}
&.slick-active .slick-number::before {
content: '';
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 4px;
background: $primary;
border-radius: 4px;
}
}
}
.slick-track {
height: 100%;
.slick-slide , div , .banner-slide{
height: 100%;
}
}
}
}
@keyframes spin {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.banner-slide {
.support-item {
position: relative;
margin-right: 40px;
padding-right: 0;
&::after {
content: none;
}
span {
display: block;
font-weight: $font-weight-bold;
font-size: 76px;
white-space: nowrap;
margin-bottom: 0;
color: transparent;
-webkit-text-stroke: 1px $white;
-webkit-font-smoothing: antialiased;
@include respond-below(lg) {
font-size: 50px;
}
@include respond-below(md) {
font-size: 38px;
}
&:hover {
color: $darkmode-white;
}
}
}
}
@keyframes wave-pulse {
0% {
transform: scale(1);
opacity: 0.7;
}
70% {
transform: scale(1.8);
opacity: 0;
}
100% {
opacity: 0;
}
}