/**=====================
Home scss
==========================**/
.bg-effect {
background-image: url("../images/bg-body.png");
background-repeat: no-repeat;
background-position: center;
}
.home-contain {
overflow: hidden;
position: relative;
border-radius: 10px;
.home-detail {
@include pseudowh;
position: absolute;
top: 0;
left: 0;
padding: calc(18px + (60 - 18) * ((100vw - 320px) / (1920 - 320)));
&.home-big-space {
padding: calc(27px + (185 - 27) * ((100vw - 320px) / (1920 - 320))) 0 !important;
}
&.home-overlay {
@include mq-max(md) {
background-color: rgba($white, 0.529);
}
}
&>.home-top {
margin-top: -100px;
@include mq-max(sm) {
margin-top: -80px;
}
@include mq-max(xs) {
margin-top: 0;
}
}
&.home-p-sm {
padding: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320))) !important;
}
&.home-p-medium {
padding: 50px calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320))) !important;
}
.ls-expanded {
letter-spacing: 2.2px;
}
h1 {
font-size: calc(16px + (42 - 16) * ((100vw - 320px) / (1920 - 320)));
width: 80%;
line-height: 1.4;
margin-bottom: calc(3px + (10 - 3) * ((100vw - 320px) / (1920 - 320)));
@include mq-max(xs) {
width: 100%;
}
[dir="rtl"] & {
margin-right: auto;
text-align: left;
}
&.super-sale {
font-size: 45px;
}
&.name-title {
font-size: calc(25px + (42 - 25) * ((100vw - 320px) / (1920 - 320)));
}
&.home-name {
font-size: 86px;
font-weight: 700;
position: relative;
display: inline-block;
&::before {
@include pos;
@include center(horizontal);
@include pseudowh($width: 80%, $height: 2px);
bottom: 0;
background-color: $title-color;
}
}
&.furniture-heading {
span {
position: relative;
&::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
background-image: url(../images/furniture/banner/line.png);
width: 100%;
height: 100%;
top: 90%;
background-repeat: no-repeat;
}
}
}
&.poster-1 {
line-height: calc(23px + (68 - 23) * ((100vw - 320px) / (1920 - 320)));
}
&.poster-2 {
line-height: calc(29px + (63 - 29) * ((100vw - 320px) / (1920 - 320)));
}
span {
&.name {
font-weight: 800;
color: var(--theme-color);
position: relative;
z-index: 0;
&::before {
@include pos;
@include pseudowh($width: 100%, $height: 20px);
bottom: 10px;
left: 0;
background-color: var(--theme-color);
opacity: 0.4;
z-index: -1;
@include mq-max(md) {
display: none;
}
}
@media (max-width: 1399px) {
&::before {
content: none;
}
}
}
&.name-2 {
font-weight: 800;
color: var(--theme-color);
}
}
.daily {
color: var(--theme-color);
font-weight: 800;
}
.discount {
font-size: 16px;
color: #262834;
font-weight: 400;
}
}
h2 {
font-size: calc(25px + (38 - 25) * ((100vw - 320px) / (1920 - 320)));
margin-bottom: 7px;
[dir="rtl"] & {
text-align: left;
}
span {
&.discount {
font-size: 16px;
font-weight: 400;
}
}
&.home-name {
font-size: calc(52px + (85 - 52) * ((100vw - 320px) / (1920 - 320)));
font-weight: 700;
}
}
h3 {
font-size: calc(20px + (26 - 20) * ((100vw - 320px) / (1920 - 320)));
margin-bottom: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)));
font-weight: 600;
[dir="rtl"] & {
text-align: left;
}
}
h4 {
font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1920 - 320)));
margin-bottom: 5px;
[dir="rtl"] & {
text-align: left;
}
}
h5 {
font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
letter-spacing: 1px;
[dir="rtl"] & {
text-align: left;
}
}
h6 {
font-size: 14px;
letter-spacing: 0.1px;
color: $content-color;
[dir="rtl"] & {
text-align: left;
}
@include mq-max(2xs) {
margin-bottom: 5px;
}
&.home-home {
margin-bottom: 10px;
font-weight: 500;
}
span {
font-weight: 500;
padding: calc(6px + (10 - 6) * ((100vw - 320px) / (1920 - 320))) calc(8px + (16 - 8) * ((100vw - 320px) / (1920 - 320)));
background: $black;
background: linear-gradient(90deg,
rgba(255, 114, 114, 0.15) 0%,
rgba(255, 114, 114, 0) 79%);
border-radius: 50px;
color: $danger-color;
margin-left: calc(2px + (9 - 2) * ((100vw - 320px) / (1920 - 320)));
[dir="rtl"] & {
margin-left: unset;
margin-right: calc(2px + (9 - 2) * ((100vw - 320px) / (1920 - 320)));
}
@include mq-max(2xs) {
display: none;
}
}
}
p {
margin-bottom: 0;
color: $content-color;
letter-spacing: 0.8px;
line-height: calc(19px + (27 - 19) * ((100vw - 320px) / (1920 - 320)));
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
[dir="rtl"] & {
margin-right: auto;
text-align: left;
}
&.organic {
width: 70%;
}
}
.shop-button {
font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
margin-top: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
display: flex;
align-items: center;
color: $title-color;
[dir="rtl"] & {
justify-content: flex-end;
}
&:hover {
i {
transform: translateX(4px);
}
}
i {
transition: 0.3s ease;
margin-left: 8px;
[dir="rtl"] & {
margin-left: unset;
margin-right: 8px;
}
}
}
.social-icon {
@include flex_common;
margin-top: 10px;
flex-wrap: nowrap;
gap: 14px;
li {
&:hover {
a {
border-color: var(--theme-color);
background-color: var(--theme-color);
color: $white;
}
}
a {
@include pseudowh($width: 28px, $height: 28px);
@include flex_common;
border-radius: 100%;
border: 1px solid $content-color;
color: $title-color;
}
}
}
}
}
.home-section-2 {
background-image: url("../images/veg-3/home-bg.png");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
&.home-section-bg {
background: none;
}
.home-contain {
border-radius: 10px;
overflow: hidden;
position: relative;
.home-detail {
@include pseudowh;
position: absolute;
top: 0%;
left: 0;
padding: calc(20px + (50 - 20) * ((100vw - 320px) / (1920 - 320)));
&.home-p-sm {
padding: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320))) !important;
}
h1 {
font-size: calc(25px + (45 - 25) * ((100vw - 320px) / (1920 - 320)));
margin-bottom: 6px;
&.sale-name {
font-size: calc(25px + (38 - 25) * ((100vw - 320px) / (1920 - 320)));
}
&.heding-2 {
font-size: calc(22px + (50 - 22) * ((100vw - 320px) / (1920 - 320)));
font-weight: 700;
line-height: normal;
text-transform: uppercase;
margin-bottom: 13px;
margin-top: 7px;
width: 100%;
}
}
h2 {
font-size: calc(18px + (32 - 18) * ((100vw - 320px) / (1920 - 320)));
margin-bottom: 10px;
&.content-2 {
font-size: calc(16px + (36 - 16) * ((100vw - 320px) / (1920 - 320)));
margin-bottom: 10px;
font-weight: 500;
}
}
h3 {
font-size: calc(18px + (32 - 18) * ((100vw - 320px) / (1920 - 320)));
margin-bottom: 10px;
}
h4 {
font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1920 - 320)));
margin-bottom: 5px;
}
h5 {
font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
letter-spacing: 1px;
}
h6 {
font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
margin-bottom: calc(7px + (12 - 7) * ((100vw - 320px) / (1920 - 320)));
}
p {
font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
margin-bottom: 0;
line-height: 1.5;
color: $content-color;
letter-spacing: 0.8px;
}
.shop-now-button {
@include flex_common;
padding: 0;
color: var(--theme-color);
font-size: 15px;
i {
font-size: 17px;
margin-left: 8px;
}
}
}
}
}
.home-section-small {
.home-contain {
.home-detail {
&.home-width {
width: 50%;
&:before {
@include mq-max(2xs) {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.25);
z-index: -1;
}
}
@include mq-max(lg) {
width: 60%;
}
@include mq-max(2xs) {
width: 100%;
}
}
}
&.home-small {
.home-detail {
padding: calc(20px + (50 - 20) * ((100vw - 767px) / (1920 - 767))) calc(12px + (50 - 12) * ((100vw - 767px) / (1920 - 767)));
h4 {
font-size: calc(14px + (22 - 14) * ((100vw - 767px) / (1920 - 767)));
}
}
}
}
}
.home-search {
background-image: linear-gradient(to right top,
#0da487,
#06a188,
#019e88,
#009a89,
#009789,
#009489,
#009089,
#008d89,
#008a89,
#008688,
#008387,
#007f86);
padding-top: 0;
.home-search-content {
display: flex;
align-items: flex-end;
padding-top: 156px;
justify-content: center;
text-align: center;
width: 100%;
padding-bottom: 70px;
>div {
width: 100%;
}
h1 {
color: $white;
font-size: 42px;
text-transform: inherit;
}
h3 {
font-size: 18px;
font-weight: 400;
color: $white;
margin-top: 12px;
}
.search-box {
margin-top: 35px;
position: relative;
width: 50%;
margin-left: auto;
margin-right: auto;
.btn {
background-color: $white;
}
.feather-search {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
color: #a3a3a3;
}
}
.category-sec {
margin-top: 80px;
&.category-section-2 {
.category-slider {
.shop-category-box {
.category-name {
h6 {
color: $white;
}
}
}
}
}
}
}
}
.custom-row {
.sidebar-col {
width: 320px;
border-right: 1px solid #ececec;
position: fixed;
left: 0;
top: 0;
height: 100vh;
overflow: auto;
padding-top: 0;
background-color: $white;
transition: all 0.3s ease-in-out;
[dir="rtl"] & {
right: 0;
left: unset;
}
@include mq-max(xl) {
border-right: unset;
left: -350px;
background-color: $white;
z-index: 10;
height: 100%;
width: calc(300px + (320 - 300) * ((100vw - 320px) / (1199 - 320)));
[dir="rtl"] & {
right: -350px;
left: unset;
}
&.show {
left: 0;
[dir="rtl"] & {
right: 0;
left: unset;
}
}
}
.category-menu {
background-color: transparent;
.web-logo {
display: block;
margin-bottom: calc(34px + (40 - 34) * ((100vw - 320px) / (1920 - 320)));
img {
width: calc(53% + (70 - 53) * ((100vw - 320px) / (1920 - 320)));
}
}
ul {
gap: calc(21px + (28 - 21) * ((100vw - 320px) / (1920 - 320)));
border-bottom: none;
li {
.category-list {
img {
width: calc(30px + (35 - 30) * ((100vw - 320px) / (1920 - 320)));
height: calc(30px + (35 - 30) * ((100vw - 320px) / (1920 - 320)));
}
h5 {
font-size: calc(15px + (17 - 15) * ((100vw - 320px) / (1920 - 320)));
}
}
}
}
}
}
.content-col {
margin-left: 320px;
padding-left: calc(12px + (25 - 12) * ((100vw - 320px) / (1920 - 320)));
margin-top: calc(77px + (113 - 77) * ((100vw - 320px) / (1920 - 320)));
padding-right: calc(12px + (25 - 12) * ((100vw - 320px) / (1920 - 320)));
[dir="rtl"] & {
margin-left: unset;
margin-right: 320px;
}
@include mq-max(xl) {
margin-left: 0;
[dir="rtl"] & {
margin-left: unset;
margin-right: 0;
}
}
}
}
.home-search-full {
height: 70vh;
@include mq-max(sm) {
height: 50vh;
}
.home-contain {
.home-detail {
height: 70vh;
padding: 0;
padding-top: 64px;
@include mq-max(sm) {
height: 50vh;
}
@include mq-max(md) {
padding-top: 48px;
}
@include mq-max(xs) {
padding: 48px 15px 0;
}
>div {
width: 50%;
@include mq-max(lg) {
width: 67%;
}
@include mq-max(sm) {
width: 100%;
}
}
h1 {
font-size: calc(31px + (58 - 31) * ((100vw - 320px) / (1920 - 320)));
text-transform: inherit;
margin-left: auto;
margin-right: auto;
margin-top: -18px;
[dir="rtl"] & {
text-align: center;
}
}
h3 {
font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
font-weight: 400;
margin-top: calc(4px + (12 - 4) * ((100vw - 320px) / (1920 - 320)));
margin-bottom: 0;
color: $content-color;
line-height: 1.4;
[dir="rtl"] & {
text-align: center;
}
}
.search-box {
margin-top: calc(23px + (35 - 23) * ((100vw - 320px) / (1920 - 320)));
position: relative;
width: 60%;
margin-left: auto;
margin-right: auto;
@include mq-max(3xl) {
width: 83%;
}
@include mq-max(xs) {
width: 100%;
}
.btn {
background-color: $white;
}
.feather-search {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
color: #a3a3a3;
width: calc(21px + (24 - 21) * ((100vw - 320px) / (1920 - 320)));
height: auto;
[dir="rtl"] & {
right: unset;
left: 20px;
}
}
}
}
}
&.gradient-home {
height: 80vh;
.home-contain {
.home-overlay {
@media (max-width: 767px) {
background-color: transparent;
}
}
.search-box {
border-radius: 6px;
overflow: hidden;
width: 70%;
.form-control {
border-radius: 0;
border: unset;
}
.input-group-text {
display: block;
width: auto;
padding: 0;
border: unset;
margin: 0;
.form-select {
border-radius: 0;
height: 100%;
border: unset;
border-left: 1px solid #eee;
background-color: $light-gray;
font-weight: 500;
font-size: 15px;
}
}
}
.home-detail {
padding: 0;
height: 80vh;
padding-top: 58px;
h1 {
color: $white;
}
h3 {
color: rgba($white, 0.6);
}
.search-box .feather-search {
position: relative;
inset: unset;
transform: unset;
width: auto;
}
}
}
}
}
.home-section-ratio {
.ratio_180 {
.bg-size {
&:before {
@include mq-max(lg) {
padding-top: 128%;
}
}
}
}
.custom-ratio {
@include mq-max(lg) {
order: -1;
}
}
}
.home-furniture {
.feature-detail {
h2 {
font-size: calc(32px + (51 - 32) * ((100vw - 1200px) / (1920 - 1200)));
}
h3 {
background-color: #ffa53b;
font-size: calc(29px + (40 - 29) * ((100vw - 1200px) / (1920 - 1200)));
color: $white;
padding: 4px calc(9px + (13 - 9) * ((100vw - 1200px) / (1920 - 1200)));
font-weight: 700;
}
}
}
.furniture-contain-2 {
.home-detail {
width: calc(100% + (75 - 100) * ((100vw - 320px) / (1920 - 320)));
&::before {
@include mq-max(md) {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba($color: #ffffff, $alpha: 0.4);
z-index: -1;
}
}
h1 {
width: calc(100% + (75 - 100) * ((100vw - 320px) / (1920 - 320)));
}
}
} |