@use '../utils' as *;
/*----------------------------------------*/
/* 2.10 Offcanvas
/*----------------------------------------*/
.body-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 995;
width: 100%;
height: 100%;
background: rgba(24, 24, 24, 0.5);
visibility: hidden;
opacity: 0;
transition: 0.45s ease-in-out;
&.apply {
opacity: 1;
visibility: visible;
}
&:hover {
cursor: url(../img/cross-icon/cross-out.png), pointer;
}
}
.mtoffcanvas {
&__fullscreen {
&.opened {
& .animated-text {
&>nav>ul>li a {
&::after {
visibility: visible;
opacity: 1;
bottom: 35px;
}
&::before {
width: 100%;
}
& .mt-text-hover-effect-word .single-char span {
@include transform(translateZ(.1px));
}
}
}
& .mtoffcanvas {
&__left,
&__right {
visibility: visible;
opacity: 1;
}
&__wrapper {
visibility: visible;
opacity: 1;
}
&__bg {
&.is-left,
&.is-right {
@include transform(scale(1, 1));
transition-delay: 0s;
}
}
&-menu {
transition-delay: 0s;
}
&__close {
visibility: visible;
opacity: 1;
@include transform(translateY(0));
transition-delay: .9s;
}
}
}
& .mt-offcanvas-menu {
&>nav {
&>ul {
list-style: none;
&>li {
position: relative !important;
&>a {
font-weight: 700;
font-size: 50px;
line-height: 1;
color: #D5D5D5;
letter-spacing: -0.02em;
@media #{$md} {
font-size: 35px;
}
@media #{$xs} {
font-size: 30px;
}
&::after {
position: absolute;
left: 0;
top: 3px;
font-weight: 500;
font-size: 13px;
// content: "0" counter(count);
counter-increment: count;
color: rgba(113, 113, 114, 0.8);
}
}
&.is-active {
&>a {
color: var(--mt-common-black);
}
& .mt-menu-close i {
color: var(--mt-common-black);
}
}
&>ul {
&>li {
&>a {
font-weight: 600;
font-size: 30px;
line-height: 1;
transition: .3s;
color: #717172;
@media #{$md,$xs} {
font-size: 20px;
}
&:hover {
transform: translateX(15px);
}
}
}
}
}
}
}
}
& .mt-offcanvas-menu .mt-submenu li a:hover {
background-color: initial;
color: var(--mt-common-black);
}
& .mt-offcanvas-menu ul li:not(:last-child)>a {
border-bottom: 0;
}
& .mt-offcanvas-menu ul li>a {
padding: 0;
padding-left: 30px;
}
& .mt-offcanvas-menu ul>li {
&:not(:last-child) {
margin-bottom: 45px;
}
}
& .mt-offcanvas-menu ul li .sub-menu {
padding-left: 20px;
margin-top: 40px;
margin-bottom: 56px;
@media #{$md,$xs} {
padding-left: 0;
}
& li {
&:not(:last-child) {
margin-bottom: 30px;
}
}
}
//
& .mtoffcanvas {
&__bg {
&.left-box {
position: fixed;
top: 0;
height: 100%;
width: 60%;
@include transition-mul((all 1s cubic-bezier(.77, 0, .175, 1)));
z-index: 1111;
@media #{$sm,$xs} {
width: 100%;
}
}
&.right-box {
position: fixed;
top: 0;
height: 100%;
width: 40%;
@include transition-mul((all 1s cubic-bezier(.77, 0, .175, 1)));
z-index: 1111;
@media #{$xs} {
width: 100%;
}
}
&.is-left {
left: 0;
@include transform(scale(1, 0));
transform-origin: top center;
background: var(--mt-common-white);
transition-delay: 1s;
}
&.is-right {
right: 0;
transform-origin: bottom center;
@include transform(scale(1, 0));
background-color: #F6F6F9;
transition-delay: 1s;
}
}
&__wrapper {
& .left-box {
position: fixed;
top: 0;
width: 60%;
height: 100vh;
z-index: 9999;
overflow-y: scroll;
pointer-events: auto;
scrollbar-width: none;
padding: 40px 80px 50px 80px;
@media #{$md} {
padding: 40px 40px;
}
@media #{$sm,$xs} {
width: 100%;
padding: 40px 40px;
}
& .mt-offcanvas-menu {
padding: 0px 125px;
@media #{$xxl,$xl} {
padding: 0 70px;
}
@media #{$lg,$md} {
padding: 0 20px;
}
@media #{$sm,$xs} {
padding: 0;
}
}
}
& .right-box {
position: fixed;
top: 0;
width: 40%;
height: 100vh;
z-index: 9999;
padding: 50px 100px 50px 0;
scrollbar-width: none;
overscroll-behavior-y: contain;
@media #{$md} {
padding-right: 40px;
}
&::-webkit-scrollbar {
display: none;
}
@media #{$sm,$xs} {
width: 100%;
}
}
& .mt-menu-close {
top: 10px;
height: 0;
width: 0;
@media #{$sm,$xs} {
top: 0;
right: 20px;
}
& i {
font-size: 20px;
color: #717172;
}
}
}
&__left {
visibility: hidden;
opacity: 0;
left: 0;
transition: .3s;
transition-delay: .8s;
&-wrap {
@media #{$sm,$xs} {
margin-bottom: 80px;
}
}
}
&__right {
visibility: hidden;
opacity: 0;
right: 0;
transition: .3s;
transition-delay: .8s;
&-inner {
height: 100%;
padding: 100px;
@media #{$xl} {
padding-left: 50px;
padding-right: 50px;
}
@media #{$lg} {
padding: 50px;
}
@media #{$md} {
padding: 30px;
}
}
&-info {
&-box {
padding: 0 200px;
@media #{$xxl} {
padding: 0px 100px;
}
@media #{$xl} {
padding: 0 100px;
padding-right: 0;
}
@media #{$lg} {
padding: 0 70px;
padding-right: 0;
}
@media #{$md} {
padding: 0 60px;
padding-right: 0;
margin-top: 130px;
}
}
&-title {
font-weight: 700;
font-size: 30px;
line-height: 1;
margin-bottom: 35px;
color: var(--mt-common-black);
@media #{$lg,$md} {
font-size: 25px;
}
}
&-item {
margin-bottom: 30px;
& label {
font-weight: 500;
font-size: 15px;
line-height: 1;
display: block;
color: #717172;
}
&>a {
font-weight: 600;
font-size: 16px;
line-height: 1;
letter-spacing: -0.01em;
color: var(--mt-common-black);
@media #{$lg,$md,$sm,$xs} {
& br {
display: none;
}
}
}
}
}
&-social {
& a {
height: 40px;
width: 40px;
transition: .3s;
line-height: 35px;
text-align: center;
border-radius: 50%;
display: inline-block;
color: var(--mt-common-black);
border: 1px solid rgba(0, 0, 0, 0.1);
&:hover {
color: var(--mt-common-black);
border-color: var(--mt-border-2);
background-color: var(--mt-common-white);
}
}
}
}
&__close {
visibility: visible;
opacity: 1;
transition: .3s;
transition-delay: .5s;
@include transform(translateY(20px));
@media #{$md} {
padding-right: 30px;
}
&-btn {
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
color: var(--mt-common-black);
& .texts {
width: 60px;
height: 20px;
transition: .3s;
overflow: hidden;
display: inline-block;
transform: translateY(4px);
color: var(--mt-common-black);
& span {
transition: .3s;
display: inline-block;
@include transform(translateX(130%));
}
}
&:hover {
& .texts {
& span {
transform: translateX(0%);
}
}
& span {
& svg {
@include transform(rotate(90deg));
}
}
}
}
}
&__logo {
margin-bottom: 105px;
@media #{$sm,$xs} {
margin-bottom: 0;
}
& .logo-2 {
display: block !important;
}
}
&__white-bg {
background: var(--mt-common-white);
}
}
}
}
// Mobile
.mtoffcanvas {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: fixed;
top: 0;
right: -100%;
width: 450px;
bottom: 0;
box-shadow: 0 16px -32px 0 rgba(0, 0, 0, .8);
background-color: var(--mt-common-white);
z-index: 997;
padding: 50px;
scrollbar-width: none;
opacity: 0;
visibility: hidden;
transition: 0.45s ease-in-out;
overflow-y: scroll;
@media #{$xs} {
width: 100%;
padding: 40px 35px;
}
@media #{$sm} {
width: 400px;
padding: 40px;
}
&.opened {
opacity: 1;
visibility: visible;
right: 0;
-webkit-transition: all .4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-moz-transition: all .4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all .4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-duration: .6s;
}
&__top {
margin-bottom: 90px;
}
&__close {
&-btn {
& button {
color: rgba($color: #000, $alpha: 1);
&:hover {
opacity: 1;
@include transform(rotate(90deg));
}
}
}
}
&__menu {
& ul {
& li {
& .mt-submenu {
& .homemenu {
position: relative;
&.comeing-soon {
& .homemenu-thumb {
position: relative;
&::before {
position: absolute;
z-index: 22;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
backdrop-filter: blur(6px);
background-color: rgba(0, 0, 0, 0.2);
border-radius: 6px;
}
}
}
&:hover {
& .homemenu-btn {
opacity: 1;
visibility: visible;
top: 50%;
}
}
&-btn {
position: absolute;
top: 55%;
transform: translateY(-50%);
left: 0;
right: 0;
text-align: center;
opacity: 0;
visibility: hidden;
transition: all .4s ease;
& .mt-btn-lg {
@media #{$sm,$xs} {
padding: 12px 17px;
font-size: 14px;
}
}
}
}
}
}
}
}
&__social {
margin-top: 30px;
& ul {
@include flexbox();
align-items: center;
& li {
list-style: none;
&:not(:last-child) {
margin-right: 8px;
}
& a {
display: inline-block;
text-align: center;
width: 40px;
height: 40px;
line-height: 38px;
border-radius: 40px;
transition: all .3s;
color: var(--mt-common-black);
border: 1px solid rgba(2, 11, 24, 0.10);
&:hover {
background-color: var(--mt-common-black);
border-color: var(--mt-common-black);
color: var(--mt-common-white);
}
& svg {
@include transform(translateY(-1px));
}
}
}
}
}
&__title {
font-size: 40px;
line-height: 1;
letter-spacing: -0.8px;
font-weight: 700;
margin-bottom: 15px;
color: var(--mt-common-black);
font-family: var(--mt-ff-thunder);
&.sm {
font-size: 20px;
font-weight: 700;
margin-bottom: 15px;
text-transform: uppercase;
color: var(--mt-common-black);
font-family: var(--mt-ff-thunder);
}
}
&__contact {
margin-bottom: 55px;
& ul {
& li {
list-style: none;
&:not(:last-child) {
margin-bottom: 2px;
}
& a {
display: inline-block;
color: #414144;
font-size: 16px;
position: relative;
&::after {
position: absolute;
bottom: 2px;
right: 0;
width: 0;
height: 1px;
content: '';
transition: .4s;
background-color: #1e1e1e;
}
&:hover {
color: var(--mt-common-black);
&::after {
width: 100%;
right: auto;
left: 0;
}
}
}
}
}
}
&__gallery {
margin-bottom: 65px;
&-img {
& img {
transition: .9s;
}
&:hover {
& img {
transform: scale(1.2) rotate(-2deg);
}
}
}
}
&__content {
margin-bottom: 45px;
& p {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #414144;
}
}
}