.tabbed-section {
margin-top: 83px;
border-radius: 20px;
background: #FFF;
padding: 0 53px;
box-shadow: 0px 0px 22px 0px rgba(4, 4, 4, 0.10);
position: relative;
z-index: 95;
max-width: 1157px;
margin-left: auto;
margin-right: auto;
@media (max-width: 990px) {
.tabbed-section {
margin-top: 84px;
padding-left: 24px;
padding-right: 24px;
}
}
& .tabs {
list-style-type: none;
display: flex;
width: fit-content;
padding: 0 48px;
margin: 0 auto;
transform: translateY(-36px);
gap: 30px;
border-radius: 100px;
background: #FFF;
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.12);
margin-bottom: -10px;
@media (max-width: 990px) {
flex-wrap: wrap;
border-radius: 20px;
gap: 0;
width: 100%;
padding-left: 20px;
padding-right: 20px;
gap: 8px 16px;
margin-bottom: 16px;
}
& button {
background: none;
appearance: none;
border: none;
font-weight: 500;
color: #717579;
position: relative;
padding: 14px 11px;
font-size: 14px;
@media (max-width: 990px) {
width: 50%;
}
&:is(.active, :hover) { color: var(--linkColor); font-weight: 700 }
&::after {
position: absolute;
content: '';
bottom: 0;
width: 100%;
left: 0;
height: 4px;
border-radius: 12px 12px 0px 0px;
background: transparent;
}
&.active::after {
background: var(--linkColor);
}
}
}
& .contents {
position: relative;
top: 0;
}
& .content {
pointer-events: auto;
top: 0;
opacity: 1;
transition: opacity linear 0.25s;
&:not(.active) {
opacity: 0;
position: absolute;
pointer-events: none;
}
}
}
.tabs button::before {
content: '';
width: 100%;
display: block;
height: 22px;
margin-bottom: 5px;
mask-position: 50%;
mask-repeat: no-repeat;
background-color: currentcolor;
}
.tabs .production-compliance::before {
mask-image: url('data:image/svg+xml,')
}
.tabs .esg::before {
mask-image: url('data:image/svg+xml,')
}
.tabs :is(.trade-compliance, .responsible-sourcing)::before {
mask-image: url('data:image/svg+xml,')
}
.tabs .data-visualization::before {
mask-image: url('data:image/svg+xml,');
}
.tabs .data-collection::before {
mask-image: url('data:image/svg+xml,');
}
.tabs .communicationd::before {
mask-image: url('data:image/svg+xml,');
}
.tabs .scalability::before {
mask-image: url('data:image/svg+xml,');
}
.lower-section {
text-align: center;
padding-top: 80px;
padding-bottom: 100px;
& h2 {
color: #343A40;
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 115%; /* 51.75px */
letter-spacing: -0.45px !important;
& + p {
color: #77797E;
text-align: center;
font-size: 18px;
font-weight: 400;
line-height: 150%;
margin-top: 26px;
margin-bottom: -15px;
}
}
& .tabbed-section {
box-shadow: none;
padding: 0;
margin-top: 70px;
& .tabs {
transform: translateY(-10px);
box-shadow: none;
position: relative;
z-index: 10;
& button::after {
border-radius: 0 0 12px 12px;
bottom: -4px;
}
@media (max-width: 800px) {
flex-wrap: wrap;
border-radius: 20px;
gap: 0;
width: 100%;
padding-left: 0;
padding-right: 0;
margin: 0;
transform: none;
}
@media (max-width: 400px) { padding: 0; }
}
}
& .content {
position: relative;
background-color: #F5F5F7;
background-image: url(/wp-content/themes/assent-wp/assets/images/webistry/tabbed-contents-triangles.svg);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: 100% 50%;
overflow: hidden;
display: flex;
gap: 98px;
flex-wrap: wrap;
text-align: left;
border-radius: 20px;
padding: 100px 35px !important;
@media (max-width: 800px) {
flex-direction: column;
padding: 32px 16px !important;
gap: 48px;
}
}
& .column {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
align-self: center;
& + .column {
max-width: 395px;
margin-left: auto;
@media (max-width: 800px) {
margin: 0 auto;
width: 100%;
}
& img { border-radius: 12px }
}
& a {
margin-top: auto;
width: fit-content;
}
& p {
margin-bottom: 36px;
max-width: 515px;
color: #343A40;
font-size: 16px;
font-weight: 400;
line-height: 150%; /* 24px */
letter-spacing: -0.16px;
}
& h3 {
color: #343A40;
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: 115%; /* 41.4px */
letter-spacing: -0.36px;
@media (max-width: 991px) {
font-size: 24px;
}
}
@media (max-width: 800px) {
& .column img {
margin: 0 auto;
width: 100%;
}
}
}
}