Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/old/app/design/frontend/Cnc/default/web/scss/cs-blocks/ |
// ==============================================
// CS BLOCKS
// ==============================================
//
// Configuration
// _____________________________________________
$box-shadow: 0 1px 6px 0 rgba(000, 000, 000, 0.06);
.cs-block {
padding: 30px 0;
overflow: hidden;
@extend .displayed-on-scroll;
@include breakpoint(md) {
padding: 60px 0;
}
&:not(.product-highlight) {
.cs-block__title {
text-align: center;
}
}
.cs-block__title {
@extend .title-1;
margin-bottom: 15px;
@include breakpoint(md) {
margin-bottom: 40px;
}
}
// CsBlock Width Container
.cs-block__container {
@extend .container;
}
&.product-highlight,
&.categories-highlight,
&.manufacturers {
.cs-block__container {
max-width: $inner-container-width;
}
}
&.cnc-service .cs-block__container {
max-width: 980px;
}
// Gradient Background
&.product-highlight,
&.cnc-service,
&.manufacturers {
@extend .bg-gradient-top;
}
// CS-BLOCK - STRATE VIDEO
&.video-presentation {
padding: 0;
@include breakpoint(only-md) {
background-repeat: no-repeat;
background-size: cover;
}
.video-presentation_container {
@extend .iframe-video-container;
display: none;
@include breakpoint(md) {
display: block;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
}
}
.cs-block__container {
position: relative;
height: 370px;
max-width: none;
overflow: hidden;
padding: 0;
@include breakpoint(md) {
height: 415px;
}
}
.cs-block__title {
display: none;
@include breakpoint(md) {
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: $c-white;
text-align: center;
}
}
.bg-mobile img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
// CS-BLOCK - STRATE FIND MY PIECE
&.find-piece {
max-width: 450px;
margin: 0 auto;
position: relative;
z-index: 1;
padding: 0;
// Reset Scroll to display overflow
overflow: initial;
@include breakpoint(md) {
max-width: 950px;
}
.find-piece__container {
position: absolute;
bottom: -60px;
left: 0;
right: 0;
width: auto;
@include breakpoint(md) {
bottom: -65px;
}
select {
@extend .custom-select;
}
}
& + .cs-block {
padding-top: 115px;
@include breakpoint(md) {
padding-top: 155px;
}
}
.cs-block__title {
margin-bottom: 0;
padding: 6px 10px;
color: $c-white;
background-color: rgba(36,52,65, 0.7);
@include breakpoint(md) {
padding: 8px 10px;
}
}
.cs-block__content {
background-color: $c-white;
padding: 30px 15px 45px;
counter-reset: i;
position: relative;
@include breakpoint(md) {
padding: 30px 25px 35px;
}
.category-select-container {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
@include breakpoint(md) {
flex-direction: row;
}
& > .category-select-container__item {
width: 100%;
flex-grow: 1;
flex-basis: 0;
position: relative;
z-index: 1;
opacity: 0.2;
padding-left: 60px;
pointer-events: none;
filter: grayscale(100%);
@include breakpoint(md) {
flex-direction: row;
margin: 0 15px;
}
@include breakpoint(only-md) {
& + .category-select-container__item {
margin-top: 30px;
}
}
&:first-child,
&.is-valid + .category-select-container__item {
pointer-events: auto;
filter: grayscale(0);
opacity: 1;
}
&::before {
counter-increment: i;
content: counter(i);
display: inline-block;
width: 40px;
height: 40px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
line-height: 40px;
margin-right: 20px;
border: 2px solid $c-blue;
border-radius: 50%;
color: $c-blue;
font-weight: 700;
font-size: 2rem;
text-align: center;
}
}
}
.btn {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
}
}
}
// CS-BLOCK - STRATE PRODUCT HIGHLIGHT
&.product-highlight {
@include breakpoint(only-md) {
padding-bottom: 0;
}
.cs-block__container {
.cs-block__title {
margin-bottom: 5px;
@include breakpoint(md) {
padding: 0 70px;
}
}
}
.product-item {
padding: 0 10px;
}
.product-item-info {
border: none;
background-color: $c-white;
}
}
// CS-BLOCK - STRATE KEY FIGURES
&.key-figures {
position: relative;
.key-figures__bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
img {
width:100%;
height:100%;
object-position: center;
object-fit: cover;
}
}
.cs-block__container {
position: relative;
padding: 0 20px;
color: $c-white;
text-align: center;
@include breakpoint(md) {
padding: 0 55px;
}
}
.cs-block__title {
color: $c-white;
}
.cs-block__content {
.key-figures-container {
display: flex;
justify-content: space-between;
font-family: $f-roboto;
font-size: 1.4rem;
margin-bottom: 30px;
@include breakpoint(md) {
font-size: 1.6rem;
}
// Item Line Decoration
.key-figures-container__item,
.key-figures-container__item > div {
&::before,
&::after {
display: block;
position: absolute;
background-color: $c-blue-grey;
}
}
.key-figures-container__item {
flex-grow: 1;
flex-basis: 0;
padding: 70px 45px;
position: relative;
@include breakpoint(md) {
padding: 70px 20px;
}
// Horizontal Line
&::before,
&::after {
width: 40px;
height: 1px;
top: 50%;
@include breakpoint(md) {
width: 50px;
}
}
&:first-child {
&::before {
content:"";
left: 0;
@include breakpoint(md) {
left: -25px;
}
}
}
&::after {
content:"";
right: 0px;
@include breakpoint(md) {
right: -25px;
}
}
& > div {
height: 100%;
display: flex;
flex-direction: column;
// Vertical Line
&::before,
&::after {
content:"";
width: 1px;
height: 40px;
left: 50%;
@include breakpoint(md) {
height: 50px;
}
}
&:before {
top: 0;
}
&:after {
bottom: 0;
}
}
}
}
.main-label {
display: block;
margin-bottom: 5px;
font-weight: 700;
font-family: $f-teko;
font-size: 5rem;
white-space: nowrap;
@include breakpoint(md) {
font-size: 6rem;
}
}
span {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
line-height: 1.2;
}
}
// Mobile Slideshow
.slick-prev,
.slick-next {
color: $c-white;
}
.slick-track .slick-slide {
flex-direction: column;
& > div + div {
margin-top: -40px;
}
}
}
&.cnc-offer {
@include breakpoint(md) {
padding-bottom: 35px;
}
.cnc-offer-container {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
@include breakpoint(only-md) {
flex-wrap: wrap;
}
}
.cnc-offer-container__item {
text-align: left;
margin: 0 0 15px;
padding: 20px 5px;
box-shadow: $box-shadow;
width: 48%;
@include breakpoint(md) {
margin: 0 20px 45px;
padding: 25px 30px;
flex-grow: 1;
flex-basis: 0;
width: auto;
}
@include breakpoint(lg) {
font-size: 1.8rem;
}
.status-title {
font-size: 1.4rem;
@include breakpoint(lg) {
font-size: 1.8rem;
}
}
.text {
color: $c-blue-dark;
font-size: 1.2rem;
line-height: 1.4;
@include breakpoint(lg) {
font-size: 1.8rem;
}
}
}
}
&.cnc-service {
@include breakpoint(md) {
padding-bottom: 85px;
}
.cnc-service-container {
display: flex;
flex-direction: column;
@include breakpoint(md) {
flex-direction: row;
}
}
.cnc-service-container__item {
@include breakpoint(only-md) {
& + .cnc-service-container__item {
margin-top: 20px;
}
}
@include breakpoint(md) {
margin: 0 10px;
}
&.left {
.title-2 {
background: url("../images/cs-blocks/cnc-service-bg1.jpg") no-repeat;
background-size: cover;
}
}
&.right {
.title-2 {
background: url("../images/cs-blocks/cnc-service-bg2.jpg") no-repeat;
background-size: cover;
}
}
.title-2 {
margin-bottom: 0;
padding: 25px 20px;
color: $c-white;
border-radius: 4px 4px 0 0;
}
.item-content {
padding: 30px 30px 40px 20px;
background: $c-white;
box-shadow: $box-shadow;
border-radius: 0 0 4px 4px;
}
.item-content__text {
margin-bottom: 20px;
}
}
}
&.categories-highlight {
.cs-block__container {
@include breakpoint(only-md) {
padding: 0;
}
}
.categories-highlight-container {
@include breakpoint(only-md) {
padding-left: 20px;
}
@include breakpoint(md) {
padding-bottom: 35px;
}
}
.cs-block__title,
.a-center {
padding: 0 20px;
}
.slick-list {
@include breakpoint(only-md) {
padding-right: 20px;
}
.slick-slide > div {
padding-right: 20px;
}
}
}
&.manufacturers {
.cs-block__container {
mix-blend-mode: multiply;
@include breakpoint(only-md) {
padding: 0;
}
}
.manufacturers-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 50px 0 0;
@include breakpoint(md) {
margin: 50px 0;
}
}
.manufacturers-container__item {
width: calc(100%/6);
padding: 10px 20px;
display: flex;
justify-content: center;
align-items: center;
border-right: 1px solid $c-blue-grey;
@include breakpoint(md) {
margin: 0 0 40px;
&:nth-child(6),
&:last-child {
border: none;
}
}
a {
display: block;
img {
display: block;
max-width: 15.6rem;
}
}
}
.slick-list {
@include breakpoint(only-md) {
padding-right: 50px;
}
}
}
&.industries-service {
position: relative;
display: flex;
justify-content: center;
@include breakpoint(md) {
justify-content: flex-end;
}
// Slideshow
.industries-service-slideshow {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 0;
img {
width: auto;
max-width: none;
min-width: 100%;
}
// reset slick
.slick-list {
padding: 0;
}
}
.cs-block__container {
max-width: 540px;
position: relative;
margin: 0 20px;
padding: 0;
background-color: rgba(43,87,121,0.57);
@include breakpoint(md) {
margin: 0 0 30px;
}
}
.cs-block__title {
margin-bottom: 0;
padding: 14px 10px;
color: $c-white;
background-color: rgba(36,52,65,0.71);
text-align: center;
@include breakpoint(md) {
text-align: left;
padding: 13px 10px 13px 40px;
}
}
.list-container {
padding: 25px 0;
}
.list-container__item {
&.is-active {
& > a {
background-color: $c-white;
color: $c-red;
font-weight: $fw-roboto-bold;
}
}
& > a {
background-color: transparent;
color: $c-white;
padding: 12px 40px;
display: block;
transition: background-color .3s linear, color .3s linear;
@include breakpoint(md) {
display: inline-block;
}
&::before {
content:"+";
display: inline-block;
margin-right: 10px;
}
}
}
}
}