SERVICES
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-services-tabs{
&-wrapper{
padding: 3em 0;
border-top-left-radius: 40px;
@include bp($lg){
border-top-left-radius: 120px;
padding: 6.875em 0;
}
&.bg--primary{
color: $white;
.overline,
.heading,
.content-col{
color: $white;
}
}
}
.intro-row{
padding-bottom: rem-calc(48);
@include bp($lg){
padding-bottom: rem-calc(80);
border-bottom: 1px solid rgba(217, 217, 217, 0.32);
margin-bottom: rem-calc(109);
}
}
.heading{
font-size: rem-calc(24);
line-height: rem-calc(32);
letter-spacing: 0.02em;
font-weight: 400;
@include bp($lg){
font-size: rem-calc(40);
line-height: rem-calc(48);
}
}
.heading-col{
@include bp($lg){
padding-bottom: rem-calc(52);
}
> *{
max-width: rem-calc(526);
}
}
.content-col{
padding-bottom: rem-calc(40);
@include bp($lg){
display: flex;
justify-content: flex-end;
padding-bottom: rem-calc(52);
}
> *{
max-width: rem-calc(526);
}
p{
@include fluid-type(16, 20, 375, $max-container-size);
line-height: rem-calc(28);
letter-spacing: 0.05em;
}
}
&-navmenu-col{
width: 100%;
@include bp($lg){
width: 50%;
}
@include bp($xl){
width: calc(100% - 744px);
}
}
&-navcontent-col{
width: 100%;
@include bp($lg){
width: 50%;
}
@include bp($xl){
width: calc(100% - 552px);
}
}
.services-tabs{
&-mobnav{
display: block;
border-bottom: 1px solid rgba(217, 217, 217, 0.3);
padding: rem-calc(16 0 16 0);
margin-bottom: rem-calc(32);
a{
text-decoration: none;
color: $white;
font-size: rem-calc(24);
line-height: rem-calc(26);
font-weight: 400;
letter-spacing: 0.02em;
display: block;
cursor: pointer;
position: relative;
padding-right: rem-calc(30);
&:hover{
font-weight: 600;
}
&:after{
content: "";
width: rem-calc(24);
height: rem-calc(11);
position: absolute;
right: 0;
top: 7px;
background-repeat: no-repeat;
background-position: center;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='11' viewBox='0 0 24 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.7984 0.487629L23.4222 0.170103C23.1534 -0.0567011 22.7772 -0.0567011 22.5084 0.170103L12.0269 9.01546L1.4916 0.170102C1.22284 -0.056702 0.846584 -0.0567021 0.577827 0.170102L0.201567 0.487628C-0.0671902 0.714432 -0.0671902 1.03196 0.201567 1.25876L11.5431 10.8299C11.8119 11.0567 12.1881 11.0567 12.4569 10.8299L23.7984 1.25876C24.0672 1.03196 24.0672 0.714433 23.7984 0.487629Z' fill='white'/%3E%3C/svg%3E%0A");
}
}
&.active{
border: 0;
a{
font-weight: 600;
&:after{
transform: rotate(180deg);
}
}
}
@include bp($lg){
display: none;
}
}
&-navmenu{
max-width: rem-calc(375);
margin: 0;
padding: 0;
list-style: none;
display: none;
@include bp($lg){
display: block;
}
li{
border-bottom: 1px solid rgba(217, 217, 217, 0.3);
padding: rem-calc(16 0 16 0);
margin-bottom: rem-calc(32);
&.active{
border-color: $orange;
a{
font-weight: 600;
}
}
}
a{
text-decoration: none;
color: $white;
font-size: rem-calc(24);
line-height: rem-calc(26);
font-weight: 400;
letter-spacing: 0.02em;
h3 {
font-size: rem-calc(24);
line-height: rem-calc(26);
font-weight: 400;
letter-spacing: 0.02em;
margin: 0;
}
&:hover{
font-weight: 600;
}
}
}
&-content{
height: 0;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: 0.3s ease-in-out all;
&.active{
height: auto;
max-height: 5000px;
opacity: 1;
border-bottom: 1px solid rgba(217, 217, 217, 0.3);
padding: rem-calc(0 0 24 0);
@include bp($lg){
border-bottom: 0;
padding: 0;
}
}
.service-item{
text-decoration: none;
color: $white;
display: flex;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: rem-calc(20);
margin-bottom: rem-calc(24);
padding: rem-calc(32);
transition: 0.3s ease-in border;
&:last-child{
margin-bottom: 0;
}
&:hover{
border-color: $orange;
}
@include bp($md){
flex-direction: row;
align-items: center;
padding: rem-calc(11 32 11 32);
}
&-content{
@include bp($md){
padding-left: rem-calc(32);
max-width: rem-calc(461);
}
}
&-heading{
font-size: rem-calc(20);
line-height: rem-calc(32);
display: flex;
align-items: center;
margin-bottom: rem-calc(16);
@include bp($md){
font-size: rem-calc(24);
}
.title{
flex: 1;
}
.btn-arrow-only{
width: 2rem;
height: 2rem;
margin-left: rem-calc(16);
@include bp($md){
margin-left: rem-calc(32);
}
}
}
}
}
}
}
class ServicesTabs {
/**
* Create and initialise objects of this class
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
* @param {object} block
*/
constructor() {
this.blocks = document.querySelectorAll('.block-services-tabs');
this.init();
}
init() {
var $root = $('html, body');
this.blocks.forEach((block) => {
block.querySelectorAll('.services-tabs-navmenu a').forEach((tablink)=>{
tablink.addEventListener('click',function(e){
e.preventDefault();
if(!this.parentElement.classList.contains('active')){
this.closest('ul').querySelectorAll('li.active').forEach((liitem)=>{
liitem.classList.remove('active');
});
this.parentElement.classList.add('active');
let tabid = this.getAttribute('href');
block.querySelector('.services-tabs-content.active').classList.remove('active');
//block.querySelector('.services-tabs-content.active').style.maxHeight = 0;
block.querySelector(tabid).style.maxHeight = block.querySelector(tabid).scrollHeight + 160 + "px";
block.querySelector(tabid).classList.add('active');
}
})
});
block.querySelectorAll('.services-tabs-mobnav a').forEach((tablink)=>{
tablink.addEventListener('click',function(e){
e.preventDefault();
if(!this.parentElement.classList.contains('active')){
if(this.closest('.block-services-tabs-navcontent-col').querySelectorAll('.services-tabs-mobnav.active')){
this.closest('.block-services-tabs-navcontent-col').querySelectorAll('.services-tabs-mobnav.active').forEach((liitem)=>{
liitem.classList.remove('active');
});
}
this.parentElement.classList.add('active');
let tabid = this.getAttribute('href');
if(block.querySelector('.services-tabs-content.active')){
block.querySelector('.services-tabs-content.active').classList.remove('active');
}
block.querySelector(tabid).style.maxHeight = block.querySelector(tabid).scrollHeight + 160 + "px";
block.querySelector(tabid).classList.add('active');
$root.animate({
scrollTop: $(tabid).offset().top - ($('.site-header').height() + 154)
}, 0);
}
else{
this.parentElement.classList.remove('active');
let tabid = this.getAttribute('href');
block.querySelector('.services-tabs-content.active').classList.remove('active');
block.querySelector(tabid).style.maxHeight = 0;
block.querySelector(tabid).classList.remove('active');
}
})
});
});
}
}
new ServicesTabs();