/*
* Theme Name: Yooker Theme
* Description: Yooker Theme
* Template: Impreza
* Version: 1.0
* Author: Yooker
* Theme URI: https://yooker.nl
* Author URI: https://yooker.nl
*/
/* Headings */
.heading-1 {
font-family: var(--h1-font-family);
font-size: var(--h1-font-size);
line-height: var(--h1-line-height);
font-weight: var(--h1-font-weight);
text-transform: var(--h1-text-transform);
font-style: var(--h1-font-style);
letter-spacing: var(--h1-letter-spacing);
margin-bottom: var(--h1-margin-bottom);
}
.heading-2 {
font-family: var(--h2-font-family);
font-size: var(--h2-font-size);
line-height: var(--h2-line-height);
font-weight: var(--h2-font-weight);
text-transform: var(--h2-text-transform);
font-style: var(--h2-font-style);
letter-spacing: var(--h2-letter-spacing);
margin-bottom: var(--h2-margin-bottom);
}
.heading-3 {
font-family: var(--h3-font-family);
font-size: var(--h3-font-size);
line-height: var(--h3-line-height);
font-weight: var(--h3-font-weight);
text-transform: var(--h3-text-transform);
font-style: var(--h3-font-style);
letter-spacing: var(--h3-letter-spacing);
margin-bottom: var(--h3-margin-bottom);
}
.heading-4 {
font-family: var(--h4-font-family);
font-size: var(--h4-font-size);
line-height: var(--h4-line-height);
font-weight: var(--h4-font-weight);
text-transform: var(--h4-text-transform);
font-style: var(--h4-font-style);
letter-spacing: var(--h4-letter-spacing);
margin-bottom: var(--h4-margin-bottom);
}
.heading-5 {
font-family: var(--h5-font-family);
font-size: var(--h5-font-size);
line-height: var(--h5-line-height);
font-weight: var(--h5-font-weight);
text-transform: var(--h5-text-transform);
font-style: var(--h5-font-style);
letter-spacing: var(--h5-letter-spacing);
margin-bottom: var(--h5-margin-bottom);
}
.heading-6 {
font-family: var(--h6-font-family);
font-size: var(--h6-font-size);
line-height: var(--h6-line-height);
font-weight: var(--h6-font-weight);
text-transform: var(--h6-text-transform);
font-style: var(--h6-font-style);
letter-spacing: var(--h6-letter-spacing);
margin-bottom: var(--h6-margin-bottom);
}
.text-label{
font-size: 1.2rem;
font-weight: 600;
line-height: 1.2;
color: #006C47;
margin-bottom: .75rem;
}
/* .w-image.has_height img, .w-image[class*="ush_image_"] img {
width: revert-layer !important;
} */
/* Separators */
.w-separator.size_small { height: 1rem !important; }
.w-separator.size_medium { height: 2rem !important; }
.w-separator.size_large { height: 4rem !important; }
.w-separator.size_huge { height: 8rem !important; }
/* - Algemeen - */
.no-click { pointer-events: none; } /* Clickthrough */
.overflow-slider .owl-stage-outer { overflow: visible; } /* Overflowing slider */
.logo-main i { color: var(--color-content-primary);} /* Logo main color */
.logo-secondary i { color: var(--color-content-secondary); } /* Logo secondary color */
.contain-img img { object-fit: contain; }
.l-footer{
padding-top: 75px;
overflow: visible;
}
.jus-space-between{
justify-content: space-between;
}
.footer-main-row a:hover{
color: black;
text-decoration: underline;
}
/* Scrollbar */
body::-webkit-scrollbar { width: 1em; }
body::-webkit-scrollbar-track {
background:#fff;
}
body::-webkit-scrollbar-thumb {
background-color: var(--color-content-primary);
}
/* Gforms */
.gform_required_legend { display: none; }
/* Cookie Banner */
.seopress-user-consent {
font-size: 1rem !important;
padding: 0.75rem !important;
background: #f7f7f7 !important;
border-right: 0 !important;
}
.seopress-user-consent p a:first-child {
content: "";
background-image: url(/wp-content/uploads/2022/01/yooker-cookies.png);
width: 32px;
height: 32px;
display: inline-block;
background-size: cover;
margin-bottom: -11px;
margin-right: 13px;
}
.seopress-user-consent #seopress-user-consent-accept{
background: var(--color-content-primary);
color: #fff;
padding: 0.5rem 2rem;
margin-top: 5px;
font-size: 13px;
font-weight: 600;
margin-left: 50px !important;
border: none;
cursor: pointer;
transition: all ease .3s;
}
.seopress-user-consent #seopress-user-consent-close {
background: none;
border: none;
font-size: 13px;
padding: 3px 20px;
margin-top: 5px;
font-weight: 600;
color: #000;
transition:all ease .3s;
}
.seopress-user-consent #seopress-user-consent-close:hover {
border:none;
background:none;
color:red;
transition:all ease .3s;
}
.seopress-user-consent p a:nth-child(2) {
text-decoration:underline;
}
.seopress-user-consent p {
padding-bottom:0 !important;
}
/* Mobile Responsive */
@media screen and (max-width: 600px){
/* Footer */
footer .w-tabs-section.active:not(.has_text_color)>.w-tabs-section-header{
color: #fff;
}
}
/* Tablet Responsive */
@media screen and (min-width: 601px) and (max-width: 1024px){
}
/* Mobile & Tablet */
@media screen and (max-width: 1024px){
}
/* Vanaf laptop */
@media screen and (min-width: 1025px){
}
/* Laptop Responsive */
@media screen and (min-width: 1025px) and (max-width: 1536px){
}
/* Desktop Responsive */
@media screen and (min-width: 1537px){
}
/*header*/
.l-header.sticky .l-subheader.at_top{
height: inherit !important;
visibility: visible !important;
}
.g-rating-stars{
display: flex;
}
.top-bar-buttons-wrapper{
display: flex;
align-items: center;
gap: 3px;
margin-top: 4px;
}
.top-bar-button{
font-size: 14px;
font-weight: 600;
padding: 7px 12px;
border-radius: 4px 4px 0 0;
color: white;
}
.top-bar-button.current{
color: #003B27;
background: white;
}
.menu-item-w-icon a.level_1 .w-nav-title{
position: relative;
padding-left: 28px;
}
.menu-item-w-icon a.level_1 .w-nav-title:before{
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 20px;
width: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.menu-item-w-icon.menu-item--reparatie a.level_1 .w-nav-title:before{
background-image: url('data:image/svg+xml,');
}
.menu-item-w-icon.menu-item--assortiment a.level_1 .w-nav-title:before{
background-image: url('data:image/svg+xml,');
}
.menu-item-w-icon.menu-item--accessoires a.level_1 .w-nav-title:before{
background-image: url('data:image/svg+xml,');
}
.menu-item-w-icon.menu-item--services a.level_1 .w-nav-title:before{
background-image: url('data:image/svg+xml,');
}
.menu-item-w-icon.menu-item--faq a.level_1 .w-nav-title:before{
background-image: url('data:image/svg+xml,');
}
.l-subheader.at_bottom{
height: fit-content !important;
}
@media (max-width: 600px) {
.l-subheader.at_bottom {
display: flex !important;
}
}
/*open/closed/vakantie status winkel*/
.ykr-opening-hours-status {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 15px;
line-height: 1.35;
padding: 8px 0;
}
.ykr-opening-hours-status__dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex: 0 0 6px;
margin-top: 7px;
background: currentColor;
}
.ykr-opening-hours-status__message {
display: inline;
}
.ykr-opening-hours-status.is-open {
color: #178a3b;
}
.ykr-opening-hours-status.is-closed,
.ykr-opening-hours-status.is-vacation {
color: #d71920;
}
@media only screen and (max-width: 600px) {
.ykr-opening-hours-status {
font-size: 13px;
}
}
/*hero*/
.hero-grid-blocks .vc_column-inner{
height: 100%;
width: 100%;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.hero-grid-blocks .vc_column-inner .wpb_wrapper{
height: 100%;
width: 100%;
}
.hero-grid-block-cta{
position: relative;
overflow-y: hidden;
overflow-x: visible;
}
.hero-grid-block-cta .vc_column-inner{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.hero-logo-slider{
position: relative;
overflow: hidden;
}
.hero-logo-slider:before{
content: "";
position: absolute;
left: 0;
top: 0;
z-index: 2;
height: 48px;
width: 64px;
background: linear-gradient(90deg, #F5F5F5 0%, rgba(245, 245, 245, 0.00) 100%);
}
.hero-logo-slider:after{
content: "";
position: absolute;
right: 0;
top: 0;
z-index: 2;
height: 48px;
width: 64px;
background: linear-gradient(90deg, rgba(245, 245, 245, 0.00) 0%, #F5F5F5 100%);
}
.logo-slider-slide img{
object-fit: contain !important;
margin: auto;
}
@media only screen and (max-width: 1024px) and (min-width: 600px) {
.hero-grid-blocks .wpb_column{
width: 50%;
}
.hero-grid-blocks .via_flex{
row-gap: 2rem;
}
}
@media only screen and (max-width: 600px){
.w-hwrapper.stack_on_mobiles>:not(script){
display: flex !important;
margin-bottom: 1.5rem !important;
}
.w-hwrapper.stack_on_mobiles>:not(script):last-child{
margin-bottom: unset !important;
}
}
.break-word{
word-break: break-word;
}
@media only screen and (max-width: 600px) {
.hero-typing-text h1{
font-size: 32px;
}
}
/*additional gap responsive fix*/
@media only screen and (max-width: 768px){
.g-cols.via_flex.type_default[style*="gap"]{
margin: 0 calc( -1.5rem - 0px );
}
.g-cols.via_flex[style*="gap"]>.vc_column_container{
padding-left: unset;
padding-right: unset;
}
}
/*highlighted text*/
.highlighted-text{
color: #56BC9A;
}
/*formulieren*/
.nieuwe-devices-formulier .gform_button.button{
color: #003B27 !important;
background: #9dd9c4;
}
/*accordeon*/
.gsm-accordion .w-tabs-section{
border-top: unset !important;
border-bottom: 1px solid #9DD9C4 !important;
padding: .5rem 0 !important;
}
.gsm-accordion .w-tabs-section-header{
position: relative;
}
.w-tabs.gsm-accordion.accordion.remove_indents>div>div>.w-tabs-section-header{
padding-left: 2.5rem !important;
}
.gsm-accordion .w-tabs-section-header:before{
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translatey(-50%);
font-size: 1.5rem;
font-weight: 600;
color: #56BC9A;
}
.gsm-accordion .w-tabs-section:nth-child(1) .w-tabs-section-header:before{
content: "1."
}
.gsm-accordion .w-tabs-section:nth-child(2) .w-tabs-section-header:before{
content: "2."
}
.gsm-accordion .w-tabs-section:nth-child(3) .w-tabs-section-header:before{
content: "3."
}
.gsm-accordion .w-tabs-section:nth-child(4) .w-tabs-section-header:before{
content: "4."
}
.gsm-accordion .w-tabs-section:nth-child(5) .w-tabs-section-header:before{
content: "5."
}
.gsm-accordion .w-tabs-section-header .w-tabs-section-title{
font-size: 1.5rem !important;
font-weight: 600;
color: #003B27;
}
.gsm-accordion .w-tabs-section-control{
height: 1.5rem;
width: 1.5rem;
color: #56BC9A
}
.gsm-accordion .w-tabs-sections.icon_chevron>div>.w-tabs-section-header .w-tabs-section-control:before{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100%;
width: 2px;
background: currentcolor;
}
.gsm-accordion .w-tabs-sections.icon_chevron>div>.w-tabs-section-header .w-tabs-section-control:after{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 2px;
width: 100%;
background: currentcolor;
}
.gsm-accordion .w-tabs-section.active>.w-tabs-section-header .w-tabs-section-control{
transform: rotate(0deg) !important
}
.gsm-accordion .w-tabs-section.active>.w-tabs-section-header .w-tabs-section-control:before{
display: none;
}
.no-touch .w-tabs.remove_indents>div>div>.w-tabs-section-header:hover, .no-touch .w-tabs.remove_indents>div>div>.w-tabs-section-header:focus {
background: unset !important;
}
/*faq alt accordions*/
.gsm-accordion-alt .w-tabs-section{
padding: 1rem 2rem;
background: #fff;
border-radius: .62rem;
border-width: 4px !important;
border-color: white;
margin-bottom: 1rem;
}
.gsm-accordion-alt .w-tabs-section.active{
border-color: #9DD9C4;
}
.gsm-accordion-alt .w-tabs-section .w-tabs-section-header{
font-size: 1.25rem;
font-weight: 600;
color: #003B27;
}
.gsm-accordion a { color: #56BC9A; }
/*diensten blocks*/
.diensten-row-blocks .vc_column_container{
padding-left: unset !important;
padding-right: unset !important;
}
.diensten-row-blocks .vc_column_container .vc_column-inner{
padding-left: 1rem !important;
padding-right: 1rem !important;
}
@media only screen and (max-width: 1024px) and (min-width: 600px) {
.diensten-row-blocks .wpb_column.vc_col-sm-4{
width: 50%;
}
.diensten-row-blocks.via_flex{
row-gap: 2rem;
}
.diensten-row-blocks .wpb_column.vc_col-sm-4:last-child{
width: 100%;
}
}
/*assortiment cards*/
.assortiment-card-garantie-tag{
display: flex;
align-items: center;
gap: 6px;
padding: .25rem 0.5rem;
color: #7E5C16;
background: #FFF9C4;
border: 1px solid #FFF176;
border-radius: .25rem;
}
.assortiment-card-garantie-tag svg{
min-width: 16px;
height: 16px;
fill: #F9A825;
}
.assortiment-card-garantie-tag p{
font-size: 12px;
}
.assortiment-card-title{
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gsm-assortiment-grid-cta{
position: relative;
height: 100%;
padding: 2rem;
color: #fff;
background: #003B27;
border-radius: 1rem;
}
.gsm-assortiment-grid-cta .w-grid-item-h{
display: flex;
align-items: center;
}
.cta-card-content{
position: relative;
z-index: 1;
max-width: 200px;
}
.cta-card-content__title{
font-size: 1.25rem;
font-weight: 600;
margin-bottom: .5rem;
}
.cta-card-content__text{
line-height: 1.4;
margin-bottom: 1rem;
}
.gsm-assortiment-grid-cta .cta-card__image{
position: absolute;
bottom: 0;
right: -25px;
width: 250px;
height: auto;
aspect-ratio: 1;
}
@media only screen and (max-width: 768px) {
.gsm-assortiment-grid-cta .cta-card__image{
width: 145px;
}
}
/*assortiment single page*/
.fw-img img{
width: 100% !important;
}
/*review widget*/
.gsm-g-rev-widget{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 3px;
padding: 1rem 1.5rem;
background: #fff;
border-radius: 1rem;
}
.gsm-g-rev-widget .g-rating-stars svg{
height: 22px;
width: auto;
}
.gsm-g-rev-widget .g-rating-stars svg path{
fill: #F9A825;
}
@media only screen and (max-width: 768px) {
.gsm-g-rev-widget{
font-size: 14px;
padding: .5rem 1rem;
}
.gsm-g-rev-widget .g-rating-stars svg{
height: 16px;
}
}
/*reviews*/
.rev-text{
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gsm-g-review-link{
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 4px;
}
.gsm-g-review-link p{
color: #9E9E9E;
margin: unset;
}
.gsm-g-stars{
display: flex;
align-items: center;
}
@media only screen and (max-width: 600px) {
.gsm-g-review-link{
justify-content: flex-start;
}
}
/*bg shapes*/
.has-bg-grad-shape{
position: relative;
}
.has-bg-grad-shape:before{
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(157, 217, 196, 0.00) 21%, rgba(157, 217, 196, 0.25) 70%);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: url(\"data:image/svg+xml;utf8,\");
mask-size: 100% 100%;
mask-repeat: no-repeat;
mask-position: center;
}
/*repair plugin components*/
html body .wp-repair-search-box-shortcode-container .wp-repair-search-box, html body .wp-repair-search-box-shortcode-container .wp-repair-search-box .repair-search-box{
margin-left: unset !important;
}
/*forms*/
#contact .gform-field-label a{
color: #fff;
}
#contact .gform_button{
color: #003B27 !important;
background: #9DD9C4;
}
.assortiment-form input[type=submit]:not(.w-btn){
color: #003B27 !important;
background: #9DD9C4;
}
.gfield_consent_label a{
text-decoration: underline;
}
/*footer*/
.reparatie-menu ul{
columns: 2;
column-gap: 30px;
}
.l-footer .footer-main-row{
gap: 2rem;
justify-content: space-between;
}
@media only screen and (min-width: 1200px){
.l-footer .footer-main-row .wpb_column.vc_column_container:nth-child(1){
max-width: 304px;
width: 100%;
}
.l-footer .footer-main-row .wpb_column.vc_column_container:nth-child(2){
max-width: 192px;
width: 100%;
}
.l-footer .footer-main-row .wpb_column.vc_column_container:nth-child(3){
max-width: 304px;
width: 100%;
}
.l-footer .footer-main-row .wpb_column.vc_column_container:nth-child(4){
max-width: 304px;
width: 100%;
}
}
@media only screen and (max-width: 600px) {
.reparatie-menu ul{
columns: 1;
}
.cta-block-button{
align-items: unset !important;
}
}
/*accessoire grid items*/
.accessoire-grid-item-image-wrapper{
display: flex;
align-items: center;
justify-content: center;
}
.accessoire-grid-item-image-wrapper .post_image{
width: 95%;
height: auto;
max-height: 75%;
}
.accessoire-grid-item-image-wrapper .post_image img{
height: 100%;
width: auto;
margin: auto;
}
.no-touch .accessoires-slider .owl-carousel.arrows-hor-pos_on_sides_outside.navstyle_circle>.owl-nav button:hover{
color: white;
}
/*iconbox check item*/
.iconbox-check-item.w-iconbox.style_circle .w-iconbox-icon{
height: 1.5rem;
width: 1.5rem;
}
/*socials*/
.w-socials.style_outlined .w-socials-item-link{
box-shadow: inset 0 0 0 2px #9DD9C4;
}
/*gform tag disabled fix*/
.gform-dropdown .ui-state-disabled{
opacity: 1 !important;
cursor: pointer !important;
pointer-events: all !important;
}