From 4d144c51944115d184406427a566d71cd39df45d Mon Sep 17 00:00:00 2001 From: Kerim Date: Tue, 31 Jan 2023 23:52:59 +0500 Subject: [PATCH] css js --- themes/tps/assets/css/animate.css | 0 .../assets/css/components/1-main/mixin.scss | 2 +- .../css/components/1-main/nulifier.scss | 0 .../css/components/1-main/variables.scss | 0 .../assets/css/components/2-layout/crumb.scss | 4 +- .../css/components/2-layout/footer.scss | 0 .../css/components/2-layout/header.scss | 295 +++++++- .../assets/css/components/2-layout/modal.scss | 6 +- .../css/components/2-layout/responsive.scss | 66 +- .../css/components/2-layout/select.scss | 0 .../css/components/2-layout/slick-theme.scss | 0 .../assets/css/components/2-layout/slick.scss | 0 .../css/components/2-layout/slider.scss | 0 .../assets/css/components/3-page/about.scss | 114 ++-- .../assets/css/components/3-page/home.scss | 117 +++- .../css/components/3-page/portfolio.scss | 1 + .../assets/css/components/3-page/service.scss | 55 +- themes/tps/assets/css/jquery.fancybox.min.css | 0 themes/tps/assets/css/main.css | 635 +++++++++++++++--- themes/tps/assets/css/main.scss | 0 themes/tps/assets/css/swiper.min.css | 0 themes/tps/assets/js/customSelect.js | 0 themes/tps/assets/js/jquery.fancybox.min.js | 0 themes/tps/assets/js/jquery.js | 0 themes/tps/assets/js/main.js | 19 +- themes/tps/assets/js/modal-close.js | 0 themes/tps/assets/js/slick.min.js | 0 themes/tps/assets/js/slider.js | 4 +- themes/tps/assets/js/swiper-bundle.min.js | 0 themes/tps/assets/js/wow.min.js | 0 30 files changed, 1124 insertions(+), 194 deletions(-) mode change 100755 => 100644 themes/tps/assets/css/animate.css mode change 100755 => 100644 themes/tps/assets/css/components/1-main/mixin.scss mode change 100755 => 100644 themes/tps/assets/css/components/1-main/nulifier.scss mode change 100755 => 100644 themes/tps/assets/css/components/1-main/variables.scss mode change 100755 => 100644 themes/tps/assets/css/components/2-layout/crumb.scss mode change 100755 => 100644 themes/tps/assets/css/components/2-layout/footer.scss mode change 100755 => 100644 themes/tps/assets/css/components/2-layout/header.scss mode change 100755 => 100644 themes/tps/assets/css/components/2-layout/modal.scss mode change 100755 => 100644 themes/tps/assets/css/components/2-layout/responsive.scss mode change 100755 => 100644 themes/tps/assets/css/components/2-layout/select.scss mode change 100755 => 100644 themes/tps/assets/css/components/2-layout/slick-theme.scss mode change 100755 => 100644 themes/tps/assets/css/components/2-layout/slick.scss mode change 100755 => 100644 themes/tps/assets/css/components/2-layout/slider.scss mode change 100755 => 100644 themes/tps/assets/css/components/3-page/about.scss mode change 100755 => 100644 themes/tps/assets/css/components/3-page/home.scss mode change 100755 => 100644 themes/tps/assets/css/components/3-page/portfolio.scss mode change 100755 => 100644 themes/tps/assets/css/components/3-page/service.scss mode change 100755 => 100644 themes/tps/assets/css/jquery.fancybox.min.css mode change 100755 => 100644 themes/tps/assets/css/main.css mode change 100755 => 100644 themes/tps/assets/css/main.scss mode change 100755 => 100644 themes/tps/assets/css/swiper.min.css mode change 100755 => 100644 themes/tps/assets/js/customSelect.js mode change 100755 => 100644 themes/tps/assets/js/jquery.fancybox.min.js mode change 100755 => 100644 themes/tps/assets/js/jquery.js mode change 100755 => 100644 themes/tps/assets/js/main.js mode change 100755 => 100644 themes/tps/assets/js/modal-close.js mode change 100755 => 100644 themes/tps/assets/js/slick.min.js mode change 100755 => 100644 themes/tps/assets/js/slider.js mode change 100755 => 100644 themes/tps/assets/js/swiper-bundle.min.js mode change 100755 => 100644 themes/tps/assets/js/wow.min.js diff --git a/themes/tps/assets/css/animate.css b/themes/tps/assets/css/animate.css old mode 100755 new mode 100644 diff --git a/themes/tps/assets/css/components/1-main/mixin.scss b/themes/tps/assets/css/components/1-main/mixin.scss old mode 100755 new mode 100644 index 4519e39..6aa7a9a --- a/themes/tps/assets/css/components/1-main/mixin.scss +++ b/themes/tps/assets/css/components/1-main/mixin.scss @@ -106,7 +106,7 @@ } } -@mixin xlg-xxlg { +@mixin xlg-xxxlg { @media (max-width: 1400px) { @content; } diff --git a/themes/tps/assets/css/components/1-main/nulifier.scss b/themes/tps/assets/css/components/1-main/nulifier.scss old mode 100755 new mode 100644 diff --git a/themes/tps/assets/css/components/1-main/variables.scss b/themes/tps/assets/css/components/1-main/variables.scss old mode 100755 new mode 100644 diff --git a/themes/tps/assets/css/components/2-layout/crumb.scss b/themes/tps/assets/css/components/2-layout/crumb.scss old mode 100755 new mode 100644 index 9b85058..da56836 --- a/themes/tps/assets/css/components/2-layout/crumb.scss +++ b/themes/tps/assets/css/components/2-layout/crumb.scss @@ -13,8 +13,8 @@ &_txt { font-weight: 400; - font-size: 16px; - line-height: 36px; + font-size: 18px; + line-height: 30px; color: #FFFFFF; } } \ No newline at end of file diff --git a/themes/tps/assets/css/components/2-layout/footer.scss b/themes/tps/assets/css/components/2-layout/footer.scss old mode 100755 new mode 100644 diff --git a/themes/tps/assets/css/components/2-layout/header.scss b/themes/tps/assets/css/components/2-layout/header.scss old mode 100755 new mode 100644 index e603113..d338318 --- a/themes/tps/assets/css/components/2-layout/header.scss +++ b/themes/tps/assets/css/components/2-layout/header.scss @@ -22,6 +22,11 @@ align-items: center; position: relative; + svg { + @include ImgCon; + position: relative; + } + &_bg { width: 70px; height: 70px; @@ -77,20 +82,87 @@ li { margin-right: 60px; + position: relative; &:last-child { margin-right: 0; } - a { + a, + span { display: block; font-weight: 500; font-size: 16px; line-height: 20px; color: #FFFFFF; + cursor: pointer; + + &.service_nav-link { + position: relative; + + &::after { + content: ""; + position: absolute; + top: 50%; + right: -20px; + transform: translateY(-50%); + -moz-ransform: translateY(-50%); + -o-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + width: 8px; + height: 4px; + -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0); + clip-path: polygon(0 0, 50% 100%, 100% 0); + background: #fff; + } + } + + // &:hover~.service_nav { + // display: block; + // max-height: unset; + // } } } } + + .service_nav { + display: none; + @include transition; + max-height: 0; + overflow: hidden; + background: rgba(0, 0, 0, .7); + + position: absolute; + top: calc(100% + 20px); + left: 50%; + @include transformX; + white-space: nowrap; + z-index: 3; + min-width: 400px; + text-align: center; + + &.active { + display: block; + max-height: unset; + } + + a { + display: block; + font-weight: 500; + font-size: 16px; + line-height: 20px; + color: #fff; + @include transition; + padding: 20px 0; + + &:hover { + background: $main-color; + color: #fff; + } + + } + } } .lang { @@ -142,8 +214,8 @@ top: calc(100% + 50px); left: 50%; @include transformX; - background: #fff; - color: #000; + background: rgba(0, 0, 0, .7); + color: #fff; width: 120px; opacity: 0; @@ -157,7 +229,7 @@ } &-link { - color: #000 !important; + color: #fff !important; display: block; text-align: center; text-transform: uppercase; @@ -193,6 +265,7 @@ transform: rotate(360deg); } } + @-webkit-keyframes logo-bg { 0% { transform: rotate(0deg); @@ -216,6 +289,7 @@ opacity: 1; } } + @-webkit-keyframes inner-txt { 0% { opacity: 0; @@ -241,6 +315,7 @@ opacity: 1; } } + @-webkit-keyframes group-txt { 0% { transform: translateX(-150%); @@ -266,4 +341,216 @@ .group-txt-animte { animation: group-txt 1s linear; -webkit-animation: group-txt 1s linear; +} + +// ============================================================= + +svg .svg-elem-1 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0s; + transition: fill 0.7s ease-in 0s; +} + +svg.active .svg-elem-1 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-2 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.07s; + transition: fill 0.7s ease-in 0.07s; +} + +svg.active .svg-elem-2 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-3 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.14s; + transition: fill 0.7s ease-in 0.14s; +} + +svg.active .svg-elem-3 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-4 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.21000000000000002s; + transition: fill 0.7s ease-in 0.21000000000000002s; +} + +svg.active .svg-elem-4 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-5 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.28s; + transition: fill 0.7s ease-in 0.28s; +} + +svg.active .svg-elem-5 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-6 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.35000000000000003s; + transition: fill 0.7s ease-in 0.35000000000000003s; +} + +svg.active .svg-elem-6 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-7 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.42000000000000004s; + transition: fill 0.7s ease-in 0.42000000000000004s; +} + +svg.active .svg-elem-7 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-8 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.49000000000000005s; + transition: fill 0.7s ease-in 0.49000000000000005s; +} + +svg.active .svg-elem-8 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-9 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.56s; + transition: fill 0.7s ease-in 0.56s; +} + +svg.active .svg-elem-9 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-10 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.6300000000000001s; + transition: fill 0.7s ease-in 0.6300000000000001s; +} + +svg.active .svg-elem-10 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-11 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.7000000000000001s; + transition: fill 0.7s ease-in 0.7000000000000001s; +} + +svg.active .svg-elem-11 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-12 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.77s; + transition: fill 0.7s ease-in 0.77s; +} + +svg.active .svg-elem-12 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-13 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.8400000000000001s; + transition: fill 0.7s ease-in 0.8400000000000001s; +} + +svg.active .svg-elem-13 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-14 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.9100000000000001s; + transition: fill 0.7s ease-in 0.9100000000000001s; +} + +svg.active .svg-elem-14 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-15 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.9800000000000001s; + transition: fill 0.7s ease-in 0.9800000000000001s; +} + +svg.active .svg-elem-15 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-16 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.05s; + transition: fill 0.7s ease-in 1.05s; +} + +svg.active .svg-elem-16 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-17 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.12s; + transition: fill 0.7s ease-in 1.12s; +} + +svg.active .svg-elem-17 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-18 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.1900000000000002s; + transition: fill 0.7s ease-in 1.1900000000000002s; +} + +svg.active .svg-elem-18 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-19 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.2600000000000002s; + transition: fill 0.7s ease-in 1.2600000000000002s; +} + +svg.active .svg-elem-19 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-20 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.33s; + transition: fill 0.7s ease-in 1.33s; +} + +svg.active .svg-elem-20 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-21 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.4000000000000001s; + transition: fill 0.7s ease-in 1.4000000000000001s; +} + +svg.active .svg-elem-21 { + fill: rgb(255, 255, 255); } \ No newline at end of file diff --git a/themes/tps/assets/css/components/2-layout/modal.scss b/themes/tps/assets/css/components/2-layout/modal.scss old mode 100755 new mode 100644 index d784407..1eea5fe --- a/themes/tps/assets/css/components/2-layout/modal.scss +++ b/themes/tps/assets/css/components/2-layout/modal.scss @@ -25,9 +25,10 @@ top: 60%; left: 50%; @include transform; - max-width: 600px; + max-width: 900px; width: calc(100% - 120px); - max-height: calc(100% - 150px); + max-height: 450px; + height: calc(100% - 150px); padding: 70px 50px; background: rgba(0, 0, 0, .5); backdrop-filter: 5px; @@ -59,6 +60,7 @@ &_video { width: 100%; + height: 100%; video { @include ImgCon; diff --git a/themes/tps/assets/css/components/2-layout/responsive.scss b/themes/tps/assets/css/components/2-layout/responsive.scss old mode 100755 new mode 100644 index 2bcdd05..8ffe9fd --- a/themes/tps/assets/css/components/2-layout/responsive.scss +++ b/themes/tps/assets/css/components/2-layout/responsive.scss @@ -1,5 +1,5 @@ // 1400 ======================== -@include xlg-xxlg { +@include xlg-xxxlg { // About ================ .about { @@ -316,6 +316,10 @@ } } } + + .service_nav { + top: -100px; + } } } @@ -393,6 +397,25 @@ height: 385px; } } + + + } + + // About Page ==================== + .about.page { + .about { + &_box { + &-item { + &-title { + font-size: 18px; + } + + &-txt { + font-size: 14px; + } + } + } + } } // Contact =============== @@ -438,6 +461,12 @@ height: 600px; } } + + &_item { + &-info { + top: 35%; + } + } } } @@ -467,6 +496,17 @@ } } } + + // About Page ==================== + .about.page { + .about { + &_box { + &-item { + width: calc(50% - 82px); + } + } + } + } } // 750 ======================== @@ -711,9 +751,13 @@ } } } + + .main_title { + font-size: 20px; + } } -// 600 ======================= +// 650 ======================= @include md-sm { // Gallery ============== @@ -778,6 +822,24 @@ } } } + + // About Page ==================== + .about.page { + .about { + &_box { + &-item { + width: calc(100% - 82px); + } + } + } + } + + // Modal ========================= + .modal { + &_inner { + height: unset; + } + } } // 400 =========================== diff --git a/themes/tps/assets/css/components/2-layout/select.scss b/themes/tps/assets/css/components/2-layout/select.scss old mode 100755 new mode 100644 diff --git a/themes/tps/assets/css/components/2-layout/slick-theme.scss b/themes/tps/assets/css/components/2-layout/slick-theme.scss old mode 100755 new mode 100644 diff --git a/themes/tps/assets/css/components/2-layout/slick.scss b/themes/tps/assets/css/components/2-layout/slick.scss old mode 100755 new mode 100644 diff --git a/themes/tps/assets/css/components/2-layout/slider.scss b/themes/tps/assets/css/components/2-layout/slider.scss old mode 100755 new mode 100644 diff --git a/themes/tps/assets/css/components/3-page/about.scss b/themes/tps/assets/css/components/3-page/about.scss old mode 100755 new mode 100644 index 2b8a159..19ab775 --- a/themes/tps/assets/css/components/3-page/about.scss +++ b/themes/tps/assets/css/components/3-page/about.scss @@ -1,64 +1,98 @@ // About ================ .about.page { - padding: 50px 0 100px; + padding: 50px 0 0; .about { &_txt { font-weight: 400; - font-size: 16px; - line-height: 36px; + font-size: 18px; + line-height: 30px; color: #000000; margin-bottom: 30px; } - &_list { - margin-bottom: 30px; + &_box { + background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../images/blur-bg.jpg") no-repeat center; + background-size: cover; + margin-bottom: 50px; position: relative; + padding: 80px 0; - li { - margin-bottom: 15px; - padding-left: 70px; + &::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backdrop-filter: blur(15px); + z-index: 1; + } + + &-inner { + display: flex; + flex-wrap: wrap; + z-index: 5; position: relative; + } - &::before { - content: ''; - position: absolute; - top: 15px; - left: 25px; - background: url("../images/svg/circle.svg") no-repeat center; - background-size: contain; - width: 20px; - height: 20px; - } + &-item { + width: calc(33.33% - 82px); + margin: 20px; + text-align: center; + padding: 30px 20px; + border: .5px solid hsla(0, 0%, 100%, .3); + ; + border-radius: 12px; - &::after { - content: ''; - position: absolute; - top: 27px; - left: 34px; - height: calc(100% + 10px); - width: 1px; - border-left: 2px dashed #C4DAF0; - border-right: none; - border-top: none; - border-bottom: none; + color: #fff; - z-index: -1; - } - - &:last-child { - &::after { - display: none; - } - } - - p { + &-title { + font-size: 22px; font-weight: 400; + line-height: 1.4; + } + + &-txt { + margin-top: 20px; font-size: 16px; - line-height: 50px; + font-weight: 400; + line-height: 1.4; } } } } +} + +.main_title { + padding-left: 25px; + position: relative; + font-size: 28px; + font-weight: 500; + line-height: 1.4; + margin: 45px 0 30px; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 3px; + height: 100%; + max-height: 35px; + background: $main-color; + } +} + +.p0 { + padding: 0 !important; +} + +.pt0 { + padding-top: 0 !important; +} + +.pb0 { + padding-bottom: 0 !important; } \ No newline at end of file diff --git a/themes/tps/assets/css/components/3-page/home.scss b/themes/tps/assets/css/components/3-page/home.scss old mode 100755 new mode 100644 index 296052c..d7e7f91 --- a/themes/tps/assets/css/components/3-page/home.scss +++ b/themes/tps/assets/css/components/3-page/home.scss @@ -53,9 +53,9 @@ } &-title { - font-weight: 700; - font-size: 38px; - line-height: 46px; + font-weight: 600; + font-size: 34px; + line-height: 1.4; color: #FFFFFF; position: relative; transition: all 1s linear; @@ -65,8 +65,8 @@ &-txt { font-weight: 400; - font-size: 16px; - line-height: 36px; + font-size: 18px; + line-height: 30px; color: #FFFFFF; margin: 30px 0; position: relative; @@ -282,7 +282,6 @@ &_box { display: flex; - } &_info { @@ -294,8 +293,8 @@ &-title { font-style: normal; - font-weight: 700; - font-size: 38px; + font-weight: 600; + font-size: 34px; line-height: 46px; color: #000000; margin-bottom: 30px; @@ -308,8 +307,8 @@ &-txt { font-weight: 400; - font-size: 16px; - line-height: 36px; + font-size: 18px; + line-height: 1.4; color: #000000; margin-bottom: 30px; @@ -424,6 +423,59 @@ } } } + + &_list { + margin-bottom: 50px; + position: relative; + + li { + margin-bottom: 15px; + padding-left: 70px; + position: relative; + + &::before { + content: ''; + position: absolute; + top: 7px; + left: 25px; + background: url("../images/svg/circle.svg") no-repeat center; + background-size: contain; + width: 20px; + height: 20px; + } + + &::after { + content: ''; + position: absolute; + top: 27px; + left: 34px; + height: calc(100% + 10px); + width: 1px; + border-left: 2px dashed #C4DAF0; + border-right: none; + border-top: none; + border-bottom: none; + + z-index: -1; + } + + &:last-child { + &::after { + display: none; + } + } + + p { + font-weight: 400; + font-size: 18px; + line-height: 35px; + + span { + font-weight: 700; + } + } + } + } } @keyframes open-arrow { @@ -550,6 +602,19 @@ flex-direction: column; text-align: center; + position: relative; + + &-info { + position: absolute; + top: 50%; + left: 0; + @include transformY; + width: 100%; + + display: flex; + flex-direction: column; + align-items: center; + } &:last-child { border-right: none; @@ -579,6 +644,7 @@ justify-content: center; background: rgba(0, 0, 0, .6); + width: calc(100% - 20px); transition: .4s linear; -webkit-transition: .4s linear; @@ -592,6 +658,11 @@ width: calc(100% - 40px); margin: 20px auto 0; opacity: 0; + width: 100%; + + position: absolute; + bottom: -110px; + left: 0; transition: .4s linear; -webkit-transition: .4s linear; @@ -607,8 +678,8 @@ padding: 100px 0; &_title { - font-weight: 700; - font-size: 38px; + font-weight: 600; + font-size: 34px; line-height: 46px; margin-bottom: 50px; @@ -636,7 +707,7 @@ margin-bottom: 20px; input { - border: 1px solid #D6D6D6; + border: 1px solid #737373; padding: 12px 20px; width: calc(100% - 40px); @@ -646,12 +717,12 @@ font-family: 'Montserrat', sans-serif; &::placeholder { - color: #D6D6D6; + color: #737373; } } textarea { - border: 1px solid #D6D6D6; + border: 1px solid #737373; padding: 12px 20px; width: calc(100% - 40px); @@ -663,7 +734,7 @@ height: 180px; &::placeholder { - color: #D6D6D6; + color: #737373; } } } @@ -772,8 +843,8 @@ background: #F5F5F5; &_title { - font-weight: 700; - font-size: 38px; + font-weight: 600; + font-size: 34px; line-height: 46px; margin-bottom: 50px; @@ -824,6 +895,16 @@ } } } + + .slick { + &-dots { + li { + &:nth-of-type(n+12) { + display: none; + } + } + } + } } // Client end ========================= diff --git a/themes/tps/assets/css/components/3-page/portfolio.scss b/themes/tps/assets/css/components/3-page/portfolio.scss old mode 100755 new mode 100644 index dd36a72..5f81ca2 --- a/themes/tps/assets/css/components/3-page/portfolio.scss +++ b/themes/tps/assets/css/components/3-page/portfolio.scss @@ -54,6 +54,7 @@ &_box { display: flex; + flex-wrap: wrap; margin: 50px -1px; &-item { diff --git a/themes/tps/assets/css/components/3-page/service.scss b/themes/tps/assets/css/components/3-page/service.scss old mode 100755 new mode 100644 index e650dc3..0dee9ff --- a/themes/tps/assets/css/components/3-page/service.scss +++ b/themes/tps/assets/css/components/3-page/service.scss @@ -9,6 +9,34 @@ left: unset; bottom: unset; right: unset; + display: block; + + p { + font-weight: 400; + font-size: 18px; + line-height: 30px; + margin-bottom: 30px; + + b { + font-weight: 600; + } + + strong { + font-weight: 600; + position: relative; + padding-left: 15px; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 5px; + height: 100%; + background: $main-color; + } + } + } } &_block { @@ -19,23 +47,26 @@ &::-webkit-scrollbar { display: none; } - } &_txt { font-weight: 400; - font-size: 16px; - line-height: 36px; + font-size: 18px; + line-height: 30px; margin-bottom: 30px; + + b { + font-weight: 600; + } } &_box { display: flex; - width: calc(100% + 420px); + // width: calc(100% + 420px); - .slick-list { - padding: 0 420px 0 0 !important; - } + // .slick-list { + // padding: 0 420px 0 0 !important; + // } // .slick-initialized .slick-slide { // display: block; @@ -48,7 +79,7 @@ &-photo { width: 100%; - height: 380px; + height: 300px; img { @include ImgCov; @@ -57,7 +88,7 @@ &-title { font-weight: 700; - font-size: 24px; + font-size: 27px; line-height: 36px; margin: 30px 0 20px; @@ -77,7 +108,7 @@ &::before { content: ''; position: absolute; - top: 7px; + top: 5px; left: 0px; background: url("../images/svg/circle.svg") no-repeat center; background-size: contain; @@ -108,8 +139,8 @@ p { font-weight: 400; - font-size: 14px; - line-height: 32px; + font-size: 16px; + line-height: 30px; } } } diff --git a/themes/tps/assets/css/jquery.fancybox.min.css b/themes/tps/assets/css/jquery.fancybox.min.css old mode 100755 new mode 100644 diff --git a/themes/tps/assets/css/main.css b/themes/tps/assets/css/main.css old mode 100755 new mode 100644 index 1ffd936..995ccba --- a/themes/tps/assets/css/main.css +++ b/themes/tps/assets/css/main.css @@ -163,6 +163,13 @@ li { align-items: center; position: relative; } +.header .logo svg { + width: 100%; + height: 100%; + object-fit: contain; + -o-object-fit: contain; + position: relative; +} .header .logo_bg { width: 70px; height: 70px; @@ -221,16 +228,80 @@ li { } .header .nav ul li { margin-right: 60px; + position: relative; } .header .nav ul li:last-child { margin-right: 0; } -.header .nav ul li a { +.header .nav ul li a, +.header .nav ul li span { display: block; font-weight: 500; font-size: 16px; line-height: 20px; color: #FFFFFF; + cursor: pointer; +} +.header .nav ul li a.service_nav-link, +.header .nav ul li span.service_nav-link { + position: relative; +} +.header .nav ul li a.service_nav-link::after, +.header .nav ul li span.service_nav-link::after { + content: ""; + position: absolute; + top: 50%; + right: -20px; + transform: translateY(-50%); + -moz-ransform: translateY(-50%); + -o-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + width: 8px; + height: 4px; + -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0); + clip-path: polygon(0 0, 50% 100%, 100% 0); + background: #fff; +} +.header .nav .service_nav { + display: none; + -webkit-transition: all 0.2s ease-in-out 0s; + transition: all 0.2s ease-in-out 0s; + -moz-transition: all 0.2s ease-in-out 0s; + max-height: 0; + overflow: hidden; + background: rgba(0, 0, 0, 0.7); + position: absolute; + top: calc(100% + 20px); + left: 50%; + transform: translateX(-50%); + -moz-ransform: translateX(-50%); + -o-transform: translateX(-50%); + -ms-transform: translateX(-50%); + -webkit-transform: translateX(-50%); + white-space: nowrap; + z-index: 3; + min-width: 400px; + text-align: center; +} +.header .nav .service_nav.active { + display: block; + max-height: unset; +} +.header .nav .service_nav a { + display: block; + font-weight: 500; + font-size: 16px; + line-height: 20px; + color: #fff; + -webkit-transition: all 0.2s ease-in-out 0s; + transition: all 0.2s ease-in-out 0s; + -moz-transition: all 0.2s ease-in-out 0s; + padding: 20px 0; +} +.header .nav .service_nav a:hover { + background: #2B72B6; + color: #fff; } .header .lang { position: relative; @@ -290,8 +361,8 @@ li { -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); - background: #fff; - color: #000; + background: rgba(0, 0, 0, 0.7); + color: #fff; width: 120px; opacity: 0; pointer-events: none; @@ -304,7 +375,7 @@ li { top: calc(100% + 20px); } .header .lang_drop-link { - color: #000 !important; + color: #fff !important; display: block; text-align: center; text-transform: uppercase; @@ -405,6 +476,216 @@ li { -webkit-animation: group-txt 1s linear; } +svg .svg-elem-1 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0s; + transition: fill 0.7s ease-in 0s; +} + +svg.active .svg-elem-1 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-2 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.07s; + transition: fill 0.7s ease-in 0.07s; +} + +svg.active .svg-elem-2 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-3 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.14s; + transition: fill 0.7s ease-in 0.14s; +} + +svg.active .svg-elem-3 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-4 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.21s; + transition: fill 0.7s ease-in 0.21s; +} + +svg.active .svg-elem-4 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-5 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.28s; + transition: fill 0.7s ease-in 0.28s; +} + +svg.active .svg-elem-5 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-6 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.35s; + transition: fill 0.7s ease-in 0.35s; +} + +svg.active .svg-elem-6 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-7 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.42s; + transition: fill 0.7s ease-in 0.42s; +} + +svg.active .svg-elem-7 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-8 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.49s; + transition: fill 0.7s ease-in 0.49s; +} + +svg.active .svg-elem-8 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-9 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.56s; + transition: fill 0.7s ease-in 0.56s; +} + +svg.active .svg-elem-9 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-10 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.63s; + transition: fill 0.7s ease-in 0.63s; +} + +svg.active .svg-elem-10 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-11 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.7s; + transition: fill 0.7s ease-in 0.7s; +} + +svg.active .svg-elem-11 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-12 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.77s; + transition: fill 0.7s ease-in 0.77s; +} + +svg.active .svg-elem-12 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-13 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.84s; + transition: fill 0.7s ease-in 0.84s; +} + +svg.active .svg-elem-13 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-14 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.91s; + transition: fill 0.7s ease-in 0.91s; +} + +svg.active .svg-elem-14 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-15 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.98s; + transition: fill 0.7s ease-in 0.98s; +} + +svg.active .svg-elem-15 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-16 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.05s; + transition: fill 0.7s ease-in 1.05s; +} + +svg.active .svg-elem-16 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-17 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.12s; + transition: fill 0.7s ease-in 1.12s; +} + +svg.active .svg-elem-17 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-18 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.19s; + transition: fill 0.7s ease-in 1.19s; +} + +svg.active .svg-elem-18 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-19 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.26s; + transition: fill 0.7s ease-in 1.26s; +} + +svg.active .svg-elem-19 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-20 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.33s; + transition: fill 0.7s ease-in 1.33s; +} + +svg.active .svg-elem-20 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-21 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.4s; + transition: fill 0.7s ease-in 1.4s; +} + +svg.active .svg-elem-21 { + fill: rgb(255, 255, 255); +} + .crumb { padding: 220px 0 50px; background: url("../images/mini_banner.png") no-repeat center; @@ -418,8 +699,8 @@ li { } .crumb_txt { font-weight: 400; - font-size: 16px; - line-height: 36px; + font-size: 18px; + line-height: 30px; color: #FFFFFF; } @@ -550,9 +831,10 @@ li { -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); - max-width: 600px; + max-width: 900px; width: calc(100% - 120px); - max-height: calc(100% - 150px); + max-height: 450px; + height: calc(100% - 150px); padding: 70px 50px; background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: 5px; @@ -586,6 +868,7 @@ li { } .modal_video { width: 100%; + height: 100%; } .modal_video video { width: 100%; @@ -678,9 +961,9 @@ li { width: 100%; } .hero_item-title { - font-weight: 700; - font-size: 38px; - line-height: 46px; + font-weight: 600; + font-size: 34px; + line-height: 1.4; color: #FFFFFF; position: relative; -webkit-transition: all 1s linear; @@ -690,8 +973,8 @@ li { } .hero_item-txt { font-weight: 400; - font-size: 16px; - line-height: 36px; + font-size: 18px; + line-height: 30px; color: #FFFFFF; margin: 30px 0; position: relative; @@ -748,7 +1031,7 @@ li { font-size: 0; width: 15px; height: 15px; - border: 1px solid #ffff; + border: 1px solid white; border-radius: 50%; display: block; margin: 0 5px; @@ -918,8 +1201,8 @@ li { } .about_info-title { font-style: normal; - font-weight: 700; - font-size: 38px; + font-weight: 600; + font-size: 34px; line-height: 46px; color: #000000; margin-bottom: 30px; @@ -930,8 +1213,8 @@ li { } .about_info-txt { font-weight: 400; - font-size: 16px; - line-height: 36px; + font-size: 18px; + line-height: 1.4; color: #000000; margin-bottom: 30px; } @@ -979,7 +1262,7 @@ li { animation: open-arrow 0.3s linear; } .about_video { - width: calc(50%); + width: 50%; margin-left: 25px; } .about_video-box { @@ -1038,7 +1321,7 @@ li { -webkit-transform: translate(-50%, -50%); width: 85px; height: 85px; - background: #ffff; + background: white; border-radius: 50%; display: block; z-index: 5; @@ -1060,6 +1343,49 @@ li { width: 24px; height: 27px; } +.about_list { + margin-bottom: 50px; + position: relative; +} +.about_list li { + margin-bottom: 15px; + padding-left: 70px; + position: relative; +} +.about_list li::before { + content: ""; + position: absolute; + top: 7px; + left: 25px; + background: url("../images/svg/circle.svg") no-repeat center; + background-size: contain; + width: 20px; + height: 20px; +} +.about_list li::after { + content: ""; + position: absolute; + top: 27px; + left: 34px; + height: calc(100% + 10px); + width: 1px; + border-left: 2px dashed #C4DAF0; + border-right: none; + border-top: none; + border-bottom: none; + z-index: -1; +} +.about_list li:last-child::after { + display: none; +} +.about_list li p { + font-weight: 400; + font-size: 18px; + line-height: 35px; +} +.about_list li p span { + font-weight: 700; +} @keyframes open-arrow { 0% { @@ -1174,6 +1500,28 @@ li { -ms-flex-direction: column; flex-direction: column; text-align: center; + position: relative; +} +.service_item-info { + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + -moz-ransform: translateY(-50%); + -o-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .service_item:last-child { border-right: none; @@ -1204,6 +1552,7 @@ li { -ms-flex-pack: center; justify-content: center; background: rgba(0, 0, 0, 0.6); + width: calc(100% - 20px); transition: 0.4s linear; -webkit-transition: 0.4s linear; -ms-transition: 0.4s linear; @@ -1215,6 +1564,10 @@ li { width: calc(100% - 40px); margin: 20px auto 0; opacity: 0; + width: 100%; + position: absolute; + bottom: -110px; + left: 0; transition: 0.4s linear; -webkit-transition: 0.4s linear; -ms-transition: 0.4s linear; @@ -1224,8 +1577,8 @@ li { padding: 100px 0; } .contact_title { - font-weight: 700; - font-size: 38px; + font-weight: 600; + font-size: 34px; line-height: 46px; margin-bottom: 50px; overflow: hidden; @@ -1257,7 +1610,7 @@ li { margin-bottom: 20px; } .contact_input input { - border: 1px solid #D6D6D6; + border: 1px solid #737373; padding: 12px 20px; width: calc(100% - 40px); font-weight: 500; @@ -1266,22 +1619,22 @@ li { font-family: "Montserrat", sans-serif; } .contact_input input::-webkit-input-placeholder { - color: #D6D6D6; + color: #737373; } .contact_input input::-moz-placeholder { - color: #D6D6D6; + color: #737373; } .contact_input input:-ms-input-placeholder { - color: #D6D6D6; + color: #737373; } .contact_input input::-ms-input-placeholder { - color: #D6D6D6; + color: #737373; } .contact_input input::placeholder { - color: #D6D6D6; + color: #737373; } .contact_input textarea { - border: 1px solid #D6D6D6; + border: 1px solid #737373; padding: 12px 20px; width: calc(100% - 40px); font-weight: 500; @@ -1292,19 +1645,19 @@ li { height: 180px; } .contact_input textarea::-webkit-input-placeholder { - color: #D6D6D6; + color: #737373; } .contact_input textarea::-moz-placeholder { - color: #D6D6D6; + color: #737373; } .contact_input textarea:-ms-input-placeholder { - color: #D6D6D6; + color: #737373; } .contact_input textarea::-ms-input-placeholder { - color: #D6D6D6; + color: #737373; } .contact_input textarea::placeholder { - color: #D6D6D6; + color: #737373; } .contact_btn { display: -webkit-box; @@ -1406,8 +1759,8 @@ li { background: #F5F5F5; } .client_title { - font-weight: 700; - font-size: 38px; + font-weight: 600; + font-size: 34px; line-height: 46px; margin-bottom: 50px; overflow: hidden; @@ -1449,6 +1802,9 @@ li { -webkit-transform: scale(1.05); transform: scale(1.05); } +.client .slick-dots li:nth-of-type(n+12) { + display: none; +} .title-animate { animation: typing 3.5s steps(40, end); @@ -1456,54 +1812,93 @@ li { } .about.page { - padding: 50px 0 100px; + padding: 50px 0 0; } .about.page .about_txt { font-weight: 400; - font-size: 16px; - line-height: 36px; + font-size: 18px; + line-height: 30px; color: #000000; margin-bottom: 30px; } -.about.page .about_list { - margin-bottom: 30px; +.about.page .about_box { + background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7))), url("../images/blur-bg.jpg") no-repeat center; + background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../images/blur-bg.jpg") no-repeat center; + background-size: cover; + margin-bottom: 50px; position: relative; + padding: 80px 0; } -.about.page .about_list li { - margin-bottom: 15px; - padding-left: 70px; - position: relative; -} -.about.page .about_list li::before { +.about.page .about_box::after { content: ""; position: absolute; - top: 15px; - left: 25px; - background: url("../images/svg/circle.svg") no-repeat center; - background-size: contain; - width: 20px; - height: 20px; + top: 0; + left: 0; + width: 100%; + height: 100%; + -webkit-backdrop-filter: blur(15px); + backdrop-filter: blur(15px); + z-index: 1; } -.about.page .about_list li::after { - content: ""; - position: absolute; - top: 27px; - left: 34px; - height: calc(100% + 10px); - width: 1px; - border-left: 2px dashed #C4DAF0; - border-right: none; - border-top: none; - border-bottom: none; - z-index: -1; +.about.page .about_box-inner { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + z-index: 5; + position: relative; } -.about.page .about_list li:last-child::after { - display: none; +.about.page .about_box-item { + width: calc(33.33% - 82px); + margin: 20px; + text-align: center; + padding: 30px 20px; + border: 0.5px solid hsla(0deg, 0%, 100%, 0.3); + border-radius: 12px; + color: #fff; } -.about.page .about_list li p { +.about.page .about_box-item-title { + font-size: 22px; font-weight: 400; + line-height: 1.4; +} +.about.page .about_box-item-txt { + margin-top: 20px; font-size: 16px; - line-height: 50px; + font-weight: 400; + line-height: 1.4; +} + +.main_title { + padding-left: 25px; + position: relative; + font-size: 28px; + font-weight: 500; + line-height: 1.4; + margin: 45px 0 30px; +} +.main_title::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 3px; + height: 100%; + max-height: 35px; + background: #2B72B6; +} + +.p0 { + padding: 0 !important; +} + +.pt0 { + padding-top: 0 !important; +} + +.pb0 { + padding-bottom: 0 !important; } .gallery { @@ -1565,6 +1960,8 @@ li { display: -webkit-box; display: -ms-flexbox; display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; margin: 50px -1px; } .gallery_box-item { @@ -1663,6 +2060,30 @@ li { left: unset; bottom: unset; right: unset; + display: block; +} +.service.page .service_info p { + font-weight: 400; + font-size: 18px; + line-height: 30px; + margin-bottom: 30px; +} +.service.page .service_info p b { + font-weight: 600; +} +.service.page .service_info p strong { + font-weight: 600; + position: relative; + padding-left: 15px; +} +.service.page .service_info p strong::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 5px; + height: 100%; + background: #2B72B6; } .service.page .service_block { overflow-x: auto; @@ -1674,26 +2095,25 @@ li { } .service.page .service_txt { font-weight: 400; - font-size: 16px; - line-height: 36px; + font-size: 18px; + line-height: 30px; margin-bottom: 30px; } +.service.page .service_txt b { + font-weight: 600; +} .service.page .service_box { display: -webkit-box; display: -ms-flexbox; display: flex; - width: calc(100% + 420px); -} -.service.page .service_box .slick-list { - padding: 0 420px 0 0 !important; } .service.page .service_box-item { - width: calc(470px - 30px); + width: 440px; margin-right: 30px; } .service.page .service_box-item-photo { width: 100%; - height: 380px; + height: 300px; } .service.page .service_box-item-photo img { width: 100%; @@ -1703,7 +2123,7 @@ li { } .service.page .service_box-item-title { font-weight: 700; - font-size: 24px; + font-size: 27px; line-height: 36px; margin: 30px 0 20px; } @@ -1719,7 +2139,7 @@ li { .service.page .service_list li::before { content: ""; position: absolute; - top: 7px; + top: 5px; left: 0px; background: url("../images/svg/circle.svg") no-repeat center; background-size: contain; @@ -1744,8 +2164,8 @@ li { } .service.page .service_list li p { font-weight: 400; - font-size: 14px; - line-height: 32px; + font-size: 16px; + line-height: 30px; } /* Slider */ @@ -2241,7 +2661,6 @@ li { .about_video-box { height: 470px; } - .gallery { padding: 80px 0; } @@ -2251,7 +2670,6 @@ li { .gallery .gal_slider-item { height: 300px !important; } - .service.page .service_box { width: calc(100% + 60px); } @@ -2259,7 +2677,7 @@ li { padding: 0 60px 0 0 !important; } } -@media (max-width: 1400px) { +@media (max-width: 1200px) { .hero_item-title { font-size: 30px; } @@ -2272,7 +2690,6 @@ li { .hero .page_box-link { font-size: 16px; } - .about_box { -webkit-box-orient: vertical; -webkit-box-direction: normal; @@ -2307,14 +2724,12 @@ li { width: 13px; height: 17px; } - .service_item-title { font-size: 14px; } .service_item-txt { font-size: 13px; } - .contact { padding: 70px 0; } @@ -2322,7 +2737,6 @@ li { font-size: 30px; margin-bottom: 30px; } - .client_title { font-size: 30px; margin-bottom: 30px; @@ -2340,7 +2754,6 @@ li { .client_item { height: 145px !important; } - .footer .logo { width: 160px; height: 55px; @@ -2350,7 +2763,6 @@ li { .auto_container { padding: 0 35px; } - .header .burger { display: -webkit-box; display: -ms-flexbox; @@ -2482,7 +2894,9 @@ li { .header .nav ul li a { font-size: 20px; } - + .header .nav .service_nav { + top: -100px; + } .hero_item-title { font-size: 22px; } @@ -2524,7 +2938,6 @@ li { object-fit: contain; -o-object-fit: contain; } - .about { padding: 35px 0 120px; } @@ -2534,7 +2947,12 @@ li { .about_video-box { height: 385px; } - + .about.page .about_box-item-title { + font-size: 18px; + } + .about.page .about_box-item-txt { + font-size: 14px; + } .contact_box { -webkit-box-orient: vertical; -webkit-box-direction: normal; @@ -2559,13 +2977,15 @@ li { width: 100%; margin-left: 0; } - .service .inner { height: 600px; } .service_box-image { height: 600px; } + .service_item-info { + top: 35%; + } } @media (max-width: 1000px) { .gallery_box { @@ -2575,13 +2995,15 @@ li { .gallery_box-item { width: calc(50% - 2px); } - .service.page .service_box { width: calc(100% + 70px); } .service.page .service_box .slick-list { padding: 0 170px 0 0 !important; } + .about.page .about_box-item { + width: calc(50% - 82px); + } } @media (max-width: 750px) { .header .logo_bg { @@ -2604,7 +3026,6 @@ li { .header .logo_group-txt { width: 95px; } - .crumb { padding: 180px 0 40px; } @@ -2615,7 +3036,6 @@ li { line-height: 30px; font-size: 14px; } - .hero_item { height: 800px !important; } @@ -2643,7 +3063,6 @@ li { width: 17px; right: -24px; } - .about { padding-top: 0; } @@ -2670,7 +3089,6 @@ li { width: 13px; height: 13px; } - .contact { padding: 50px 0; } @@ -2688,7 +3106,6 @@ li { padding: 12px 30px; line-height: 30px; } - .client_title { font-size: 26px; margin-bottom: 25px; @@ -2703,7 +3120,6 @@ li { width: 12px; height: 12px; } - .footer_box { -webkit-box-orient: vertical; -webkit-box-direction: normal; @@ -2718,7 +3134,6 @@ li { line-height: 30px; text-align: center; } - .gallery_box-item { width: calc(50% - 2px); height: 245px; @@ -2733,13 +3148,15 @@ li { .gallery .gal_slider-item { height: 245px !important; } - .service.page .service_box-item { min-width: 390px; } .service.page .service_box-item-photo { height: 280px; } + .main_title { + font-size: 20px; + } } @media (max-width: 650px) { .gallery { @@ -2766,7 +3183,6 @@ li { .gallery_box-item { width: calc(100% - 2px); } - .service.page .service_box { width: 100%; } @@ -2787,16 +3203,20 @@ li { .service.page .service_list li p { line-height: 28px; } + .about.page .about_box-item { + width: calc(100% - 82px); + } + .modal_inner { + height: unset; + } } @media (max-width: 400px) { .auto_container { padding: 0 20px; } - .header { top: 30px; } - .crumb { padding: 180px 0 40px; } @@ -2807,18 +3227,15 @@ li { line-height: 30px; font-size: 14px; } - .hero_item { height: 700px !important; } - .about { margin-top: -20px; } .about_video-box { height: 230px; } - .service.page .service_box { width: calc(100% + 0px); } diff --git a/themes/tps/assets/css/main.scss b/themes/tps/assets/css/main.scss old mode 100755 new mode 100644 diff --git a/themes/tps/assets/css/swiper.min.css b/themes/tps/assets/css/swiper.min.css old mode 100755 new mode 100644 diff --git a/themes/tps/assets/js/customSelect.js b/themes/tps/assets/js/customSelect.js old mode 100755 new mode 100644 diff --git a/themes/tps/assets/js/jquery.fancybox.min.js b/themes/tps/assets/js/jquery.fancybox.min.js old mode 100755 new mode 100644 diff --git a/themes/tps/assets/js/jquery.js b/themes/tps/assets/js/jquery.js old mode 100755 new mode 100644 diff --git a/themes/tps/assets/js/main.js b/themes/tps/assets/js/main.js old mode 100755 new mode 100644 index 6da6b6d..a46d193 --- a/themes/tps/assets/js/main.js +++ b/themes/tps/assets/js/main.js @@ -10,6 +10,9 @@ let lang_current = document.querySelector(".lang_current"); let burger = document.querySelector(".burger"); let nav_bg = document.querySelector(".nav_bg"); +let service_nav_link = document.querySelector(".service_nav-link"); +let service_nav = document.querySelector(".service_nav"); + function sleep(time) { return new Promise((resolve) => setTimeout(resolve, time)); @@ -40,11 +43,11 @@ window.onclick = function (e) { // drop_lang.classList.remove('active') // } - if (nav_bg.classList.contains('active') && !e.target.closest('.burger') && !e.target.closest('.lang_current')) { + if (nav_bg.classList.contains('active') && !e.target.closest('.burger') && !e.target.closest('.lang_current') && !e.target.closest('.service_nav-link')) { nav_bg.classList.remove('active') } - if (burger.classList.contains('active') && !e.target.closest('.burger') && !e.target.closest('.lang_current')) { + if (burger.classList.contains('active') && !e.target.closest('.burger') && !e.target.closest('.lang_current') && !e.target.closest('.service_nav-link')) { burger.classList.remove('active') } @@ -52,6 +55,10 @@ window.onclick = function (e) { lang_drop.classList.remove('active') } + if (service_nav.classList.contains('active') && !e.target.closest('.service_nav-link')) { + service_nav.classList.remove('active') + } + } @@ -74,3 +81,11 @@ if (burger != undefined) { }); }); } + +if (service_nav_link != undefined) { + service_nav_link.addEventListener('click', function () { + sleep(2).then(() => { + service_nav.classList.toggle('active'); + }); + }); +} diff --git a/themes/tps/assets/js/modal-close.js b/themes/tps/assets/js/modal-close.js old mode 100755 new mode 100644 diff --git a/themes/tps/assets/js/slick.min.js b/themes/tps/assets/js/slick.min.js old mode 100755 new mode 100644 diff --git a/themes/tps/assets/js/slider.js b/themes/tps/assets/js/slider.js old mode 100755 new mode 100644 index 4f0f778..2ed5d33 --- a/themes/tps/assets/js/slider.js +++ b/themes/tps/assets/js/slider.js @@ -113,7 +113,7 @@ $(".service_box").slick({ responsive: [ { - breakpoint: 1450, + breakpoint: 1290, settings: { slidesToShow: 2, slidesToScroll: 1, @@ -122,7 +122,7 @@ $(".service_box").slick({ { breakpoint: 1000, settings: { - slidesToShow: 1, + slidesToShow: 2, slidesToScroll: 1, } }, diff --git a/themes/tps/assets/js/swiper-bundle.min.js b/themes/tps/assets/js/swiper-bundle.min.js old mode 100755 new mode 100644 diff --git a/themes/tps/assets/js/wow.min.js b/themes/tps/assets/js/wow.min.js old mode 100755 new mode 100644