/* theme-style */
/*
Theme Name: Software Shaker
Author: Softwareshaker
Description: Custom theme for softwareshaker.com. Page, block and shared styles live in /css/ and load only where needed (see inc/enqueue.php).
Version: 1.0
*/
@font-face{font-family:'metropolisbold';src:url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-bold-webfont.woff2') format('woff2'),url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-bold-webfont.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'metropolismedium';src:url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-medium-webfont.woff2') format('woff2'),url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-medium-webfont.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'metropolisregular';src:url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-regular-webfont.woff2') format('woff2'),url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-regular-webfont.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'metropolissemi_bold';src:url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-semibold-webfont.woff2') format('woff2'),url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-semibold-webfont.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;}
:root {
--textColor: #353535;
--textColortwo: #6e6e6e; /* was #848484; #6e6e6e reaches 4.5:1 on white, grey and pink sections */
--backgrondColorGray : #f2f2f2;
--backgrondColorRed : #D32020; /* Orginal #FB4545 */
--textColorRed : #B51B1B; /* small red text on light backgrounds (labels): 4.8:1 or more, also on the pink pill */
--backgrondColorRedlight : #F38989;
--backgrondColorPink : #FEEFEE;
--backgrondColorBlack : #353535;
--backgroundBody : #fff;
--bodyFont : 16px;
--tableBorder : #E8E8E8;
/* Font roles. css/global/font-inter.css redefines these when Theme Setting > Lettertype is Inter. */
--font-regular : 'metropolisregular';
--font-medium : 'metropolismedium';
--font-semibold : 'metropolissemi_bold';
--font-bold : 'metropolisbold';
--font-weight-regular : normal;
--font-weight-medium : normal;
--font-weight-semibold : normal;
--font-weight-bold : normal;
}
/* ---------- Base ---------- */
* {margin: 0;padding: 0;box-sizing: border-box;}
img {max-width: 100%;height: auto;}
body {background: var(--backgroundBody);font-size:var(--bodyFont);color: var(--textColor);font-family: var(--font-regular); font-weight: var(--font-weight-regular);}
p{margin-bottom: 25px;}
p, li {line-height: 25px;font-size: 16px;}
p:last-child{margin-bottom: 0;}
p a{color:inherit;transition:color .3s ease, text-decoration-color .3s ease;}
p a:hover{color:var(--backgrondColorRed);}
/* Links in running text (no class: not buttons): red and semi-bold instead of underlined. The weight keeps them
recognisable without colour (WCAG 1.4.1: red is only 2.3:1 against the text colour). Underline on hover. */
p a:not([class]), .left_part li a:not([class]) {color:var(--backgrondColorRed);font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);text-decoration:none;text-decoration-thickness:1px;text-underline-offset:3px;}
p a:not([class]):hover, .left_part li a:not([class]):hover {color:var(--textColorRed);text-decoration:underline;}
.ss_bg--red p a:not([class]), .ss_bg--red .left_part li a:not([class]) {color:var(--textColorRed);} /* #D32020 is only 4.0:1 on the pink sections */
.cta_panel p a:not([class]), .cta_panel p a:not([class]):hover {color:#fff;} /* dark panel */
a {color: inherit;}
ul, ol {padding-left: 19px;margin-bottom: 25px;}
ul li::marker{color: var(--backgrondColorRed);font-size: 14px;}
html{scroll-behavior: smooth;scroll-padding-top:100px;}
@media (prefers-reduced-motion: reduce) {html{scroll-behavior:auto;}}
/* No focus ring after a mouse click, a clear one for keyboard users (WCAG 2.4.7) */
a:focus:not(:focus-visible), .btn:focus:not(:focus-visible), button:focus:not(:focus-visible){outline: none;box-shadow: none;}
input:focus:not(:focus-visible), textarea:focus:not(:focus-visible), select:focus:not(:focus-visible) {outline: none;}
:focus-visible {outline:2px solid var(--backgrondColorRed);outline-offset:2px;box-shadow:0 0 0 2px #fff;} /* red ring with a white inner edge: visible on white, on the dark header/hero/footer and around red buttons */
#content:focus {outline:none;} /* focus target of the skip link */
/* Skip link: first element on the page, visible only when it has keyboard focus */
.skip_link {position:fixed;left:16px;top:-100px;z-index:100000;padding:12px 18px;border-radius:6px;background:#fff;color:#111214;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:15px;line-height:1.2;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.25);}
.skip_link:focus {top:16px;}
/* Text only for screen readers (WordPress' standard class) */
.screen-reader-text {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
input, button, label, textarea, select {font-family: var(--font-regular); font-weight: var(--font-weight-regular);}
/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6, .h4, .h5, .h6 {margin-bottom: 25px;line-height: 1;font-family: var(--font-bold);font-weight: var(--font-weight-bold);}
h1{font-size:50px;}
h2{font-size:38px;}
h3{font-size:30px;}
h4, .h4{font-size:24px;}
h5, .h5{font-size:20px; font-family: var(--font-semibold); font-weight: var(--font-weight-semibold);}
h6, .h6{font-size:12px;margin-bottom: 0;}
.small_p p{font-size: 13px;line-height: 20px;}
strong{font-family: var(--font-bold);font-weight: var(--font-weight-bold);}
/* Label: pink pill with red text, white on red/dark backgrounds */
.sub_h6 h6, .sub_h6 .h6{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(211,32,32,.1);color:var(--textColorRed);font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:11px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;}
.hero_section .sub_h6 h6, .hero_section .sub_h6 .h6{background:rgba(255,255,255,.14);color:#fff;}
/* Red line under block titles, centered when the title is centered */
.block_title::after{content:"";display:block;width:56px;height:3px;margin-top:20px;border-radius:2px;background:var(--backgrondColorRed);}
.short_intro_box .block_title::after, .top_title .block_title::after, .intro_section .block_title::after, .cta_section:not(.cta_panel_section) .block_title::after, .video_intro_head .block_title::after, .text-center-all .block_title::after{margin-left:auto;margin-right:auto;}
/* ---------- Layout and Utilities ---------- */
.layout{overflow: clip;}
.wrapper{max-width: 1280px;margin: 0 auto;width: 100%;padding: 0 40px;}
.flex_center{display: flex;justify-content: center;gap: 14px;flex-wrap: wrap;}
.mb-0{margin-bottom: 0 !important;}
.mb-20{margin-bottom: 20px !important;}
.mb-30{margin-bottom: 30px !important;}
.mb-40{margin-bottom: 40px !important;}
.mb-50{margin-bottom: 50px !important;}
.mb-60{margin-bottom: 60px !important;}
.mb-70{margin-bottom: 70px !important;}
.mb-80{margin-bottom: 80px !important;}
.mb-90{margin-bottom: 90px !important;}
.mb-100{margin-bottom: 100px !important;}
.mb-110{margin-bottom: 110px !important;}
.mb-120{margin-bottom: 120px !important;}
.mb-130{margin-bottom: 130px !important;}
.mb-140{margin-bottom: 140px !important;}
.mb-160{margin-bottom: 160px !important;}
.mb-170{margin-bottom: 170px !important;}
.mb-180{margin-bottom: 180px !important;}
.mb-190{margin-bottom: 190px !important;}
.mb-200{margin-bottom: 200px !important;}
/* ---------- Block spacing ----------
Every flexible content block (partial/content-*.php) gets the same vertical
padding and no margin, so two blocks are always 2 x --block-space apart. */
:root{--block-space: 80px;}
.ss_block{padding-top: var(--block-space) !important;padding-bottom: var(--block-space) !important;margin-top: 0 !important;margin-bottom: 0 !important;}
@media only screen and (max-width:1023px){:root{--block-space: 64px;}}
@media only screen and (max-width:600px){:root{--block-space: 48px;}}
/* ---------- Buttons ---------- */
.btn_one{overflow: hidden; text-decoration: none; color: #FFF;font-size: 15px;line-height: 1; font-family: var(--font-medium); font-weight: var(--font-weight-medium);display: inline-flex;cursor: pointer;height: 48px;padding: 0px 24px;border-radius: 5px;border: 1px solid #FFF;}
span.link-effect{position: relative;line-height: inherit;transition: transform .3s;display: flex;align-items: center;}
span.link-effect::before {content: attr(data-hover);height: 100%;position: absolute;top: 100%;width: 100%;font-size: inherit;color: inherit;display: flex;align-items: center;}
.btn_one:hover span.link-effect{-webkit-transform: translateY(-100%);transform: translateY(-100%);}
.btn_one.red{background: var(--backgrondColorRed);border-color: var(--backgrondColorRed);font-family: var(--font-bold);font-weight: var(--font-weight-bold);}
.btn_one.black{background: var(--backgrondColorBlack);border-color: var(--backgrondColorBlack);font-family: var(--font-bold);font-weight: var(--font-weight-bold);}
span.arrow {display: inline-block; margin-left: 8px; width: 13px;height: 13px;background: url("data:image/svg+xml;utf8,") no-repeat center center;background-size: contain;position: relative;top: 50%;transform: translateY(-50%);}
button.btn_one{position: relative;}
/* ---------- Header ---------- */
.navigation > ul{opacity:1;transition:opacity .2s ease;}
/* ---------- Hero ---------- */
.hero_section{padding:200px 0 280px;display:flex;align-items:flex-end;min-height:100vh;max-height:900px;background:#000;position:relative;overflow:hidden;}
.hero_section .wrapper{height:100%;display:flex;align-items:flex-end;}
.banner_img{position:absolute!important;left:0;top:0;width:100%;height:100%;opacity:.4;}
.banner_img .swiper-wrapper{height:100%;}
.banner_img .swiper-slide{height:100%;}
.banner_img img{display:block;width:100%;height:100%;object-fit:cover;}
.hero_section .inner_part{position:relative;z-index:2;width:100%;}
.hero_section .sqr_image{content:"";position:absolute;left:-23px;top:-8px;width:33px;height:32px;background:url("data:image/svg+xml;utf8,") no-repeat center center;background-size:contain;}
.hero_section h1, .hero_section p, .hero_section h6, .hero_section .h6{color:#fff;}
.hero_section h6, .hero_section .h6{text-transform:uppercase;}
.hero_section h6 a, .hero_section .h6 a{text-decoration:none;position:relative;}
.hero_section h6 a:hover, .hero_section .h6 a:hover{text-decoration:none;}
.hero_section h6 a::after, .hero_section .h6 a::after{content:"";width:5px;margin:0 8px;display:inline-block;height:10px;background-repeat:no-repeat;background-size:contain;background-position:center;background-image:url("data:image/svg+xml;utf8,");}
.hero_section .text_wrap{max-width:628px;}
.hero_section p{margin:20px 0 35px;font-size:18px;max-width:491px;}
.hero_section .right_arrow{position:absolute;right:0;bottom:56px;animation:animate 1s;}
.hero_section::after{pointer-events:none;position:absolute;content:"";right:-555px;bottom:-380px;width:1403px;height:1242px;opacity:.84;background:radial-gradient(52.63% 45.31% at 68% 58.21%,var(--backgrondColorRed) 0%,rgba(251,69,69,0) 100%);z-index:1;}
.hero_section .right_arrow svg{width:100%;height:100%;}
.hero_section h1{width:100%;margin:0;}
/* ---------- Sliders and Cards ---------- */
.short_intro_box{text-align: center;}
.short_intro_box .wrap{max-width: 800px;margin: 0 auto;}
.slider_section{padding: 60px 0 60px;background: var(--backgrondColorGray);position: relative;}
.slider_section .bottom_link{margin-top: 20px;}
.short_intro_box p{line-height: 18px;}
.short_intro_box h2:last-child{margin-bottom: 40px;}
.slider_section .short_intro_box .wrap{max-width: 800px;}
.slider_section .wrapper{position: relative;}
.arrow-right{position: absolute;right: 25px;top: 0;width: 507px;height: auto;pointer-events: none;}
.arrow-left{position: absolute;left: 25px;bottom: 0;width: 507px;height: auto;pointer-events: none;}
.arrow-right img, .arrow-left img {display: block;}
.aos-animate.arrow-right{animation: animate 1s;}
.aos-animate.arrow-left{animation: animateOpp 1s;}
.right_part .arrow-right{z-index:20;}
.bottom_link{display:flex;justify-content:center}
.bottom_link .btn_one{width:auto!important;max-width:max-content;display:inline-flex}
/* ---------- Image and Media ---------- */
.wrapper::before, .wrapper::after, .outer_part::before, .outer_part::after, .arrow-right, .arrow-right *{pointer-events:none!important;}
/* Playing video keeps the 16:9 frame (a fixed height gave a tall black frame on mobile) */
lite-youtube.lyt-activated {
background-image:none !important;
background: inherit;
height:auto;
aspect-ratio:16/9;
}
/* ---------- Benefits ---------- */
.top_title *:last-child{margin-bottom: 0;}
/* ---------- Reviews ---------- */
/* ---------- Pricing ---------- */
.check_list ul{list-style: none;padding-left: 0;}
.check_list li{position: relative;padding-left: 28px;}
.check_list li::before{content: "";position: absolute;left: 0;top: 0;width: 20px;height: 20px;background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9998 4.8125C19.9998 5.40234 19.7654 5.97266 19.3474 6.39062L8.97632 16.7617C8.10523 17.6328 6.69117 17.6328 5.82007 16.7617L0.652106 11.5977C-0.19555 10.7031 -0.160394 9.29297 0.734137 8.44531C1.59742 7.625 2.94898 7.62891 3.80836 8.44531L7.3982 12.0352L16.1912 3.23828C17.0623 2.36719 18.4763 2.36719 19.3474 3.23828C19.7654 3.65625 19.9998 4.22266 19.9998 4.8125Z' fill='%23FB4545'/%3E%3C/svg%3E");background-repeat: no-repeat;background-size: contain;}
.home h2 + p + ol{list-style:decimal;padding-left:20px;}
.home h2 + p + ol > li{padding-left:0;}
.home h2 + p + ol > li::before{display:none;}
.prijzen {background-color: var(--backgrondColorPink); padding: 80px 0 120px 0;}
/* ---------- Contact ---------- */
.arrow-right.ani_opp{right: unset;left: -40px;top: unset;bottom: 0;}
/* ---------- Functionalities ---------- */
.video-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:999999;padding:90px 20px 20px}
.video-popup-inner{position:relative;flex:0 0 auto;width:min(1200px,calc(100vw - 40px),calc((100vh - 130px) * 16 / 9));aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden}
.video-popup-inner iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video-popup-close{position:absolute;top:26px;right:30px;width:56px;height:56px;padding:0;border:0;background:transparent;cursor:pointer;z-index:10;transition:transform .25s ease}
.video-popup-close::before,.video-popup-close::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:3px;background:#fff;border-radius:3px;pointer-events:none;transition:background .25s ease}
.video-popup-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.video-popup-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.video-popup-close:hover{transform:rotate(90deg)}
.video-popup-close:hover::before,.video-popup-close:hover::after{background:var(--backgrondColorRed)}
@media(max-width:767px){.video-popup-overlay{padding:70px 14px 14px}.video-popup-close{top:14px;right:14px;width:42px;height:42px}}
/* ---------- Tabs and Interaction ---------- */
/* ---------- Alignment Utilities ---------- */
.text-center-all{text-align:center;}
.text-center-all *{text-align:inherit;}
.text-center-all .btn_one{margin-left:auto;margin-right:auto;display:inline-block;}
.text-center-all ul, .text-center-all ol {list-style-position:inside;}
.text-center-all ul, .text-center-all ol {padding-left:0;margin:0 auto;display:table;}
.text-center-all li{text-align:left;}
/* ---------- Demo Popup ---------- */
body.popup_open{overflow:hidden;}
/* ---------- Cookie Banner ---------- */
#cookiescript_injected {
position:fixed!important;
bottom:0;
left:0;
width:100%;
z-index:999999;
}
#cookiescript_injected #cookiescript_accept {background-color: #D32020 !important;color: #FFFFFF !important;}
#cookiescript_injected #cookiescript_readmore,#cookiescript_injected a {color: #D32020 !important;}
#cookiescript_injected #cookiescript_link {color: #D32020 !important;}
#cookiescript_injected a#cookiescript_link,#cookiescript_injected a#cookiescript_link span {color: #D32020 !important;}
/* ---------- Compare Table ---------- */
.tabel_scroll {overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 25px;}
.vergelijk_tabel {width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 15px; color: var(--textColor);}
.vergelijk_tabel th, .vergelijk_tabel td {padding: 15px 20px; text-align: left; vertical-align: middle; line-height: 22px; border-bottom: 1px solid var(--tableBorder);}
.vergelijk_tabel thead th {font-family: var(--font-bold); font-weight: var(--font-weight-bold); font-size: 16px; padding-bottom: 13px; border-bottom: 2px solid var(--tableBorder);}
.vergelijk_tabel th:first-child, .vergelijk_tabel td:first-child {width: 32%; font-family: var(--font-semibold); font-weight: var(--font-weight-semibold);}
.vergelijk_tabel td:nth-child(2) {color: var(--textColortwo);}
.vergelijk_tabel th:last-child, .vergelijk_tabel td:last-child {background: var(--backgrondColorPink);}
.vergelijk_tabel thead th:last-child {color: var(--backgrondColorRed); border-bottom-color: var(--backgrondColorPink); border-top-left-radius: 8px; border-top-right-radius: 8px;}
.vergelijk_tabel tbody tr:last-child td {border-bottom: 0;}
.vergelijk_tabel tbody tr:last-child td:last-child {border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
/* ---------- Animations ---------- */
@keyframes animate{0%{transform:translateX(100%);}100%{transform:translateX(0);}}
@keyframes animateOpp{0%{transform:translateX(-100%);}100%{transform:translateX(0);}}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* (min-width:1024px) */
@media (min-width:1024px){
.menu-item-has-children>a:hover{color:var(--backgrondColorRed)!important;}
.menu-item-has-children.active>a{background-color:var(--backgroundBody)!important;color:var(--textColor)!important;border-radius:8px 8px 0 0;}
.menu-item-has-children.active>a:hover{color:var(--backgrondColorRed)!important;}
}
/* only screen and (max-width:1279px) */
@media only screen and (max-width:1279px){
.hero_section .right_arrow{max-width: 44vw;}
}
/* only screen and (max-width:1023px) */
@media only screen and (max-width:1023px){
h1{font-size: 40px;}
h2{font-size: 30px;}
h3{font-size: 22px;}
h4, .h4{font-size: 20px;}
h5, .h5{font-size: 16px;line-height: 1.2;}
.wrapper{max-width: 827px;padding: 0 30px;}
.hero_section .text_wrap{max-width: 510px;}
.hero_section {padding: 140px 0 80px;}
.hero_section p{font-size: 16px;}
.hero_section .right_arrow{bottom: 0;}
.slider_section .arrow-right{max-width: 35vw;}
.arrow-right.ani_opp{max-width: 40vw;}
.slider_section .arrow-left{max-width: 35vw;}
.mb-130, .mb-140, .mb-160, .mb-170, .mb-180, .mb-190, .mb-200 {margin-bottom: 120px !important;}
.short_intro_box.mb-100{margin-bottom: 50px !important;}
.scroll_stop{overflow: hidden;}
}
/* (max-width:768px) */
@media (max-width:768px){
.pricing_page { padding-top:0; }
#cookiescript_injected {max-height: 90dvh !important;height: auto !important;overflow-y: auto !important;}
}
/* (max-width:767px) */
@media (max-width:767px){
.vergelijk_tabel {font-size: 14px;}
.vergelijk_tabel th, .vergelijk_tabel td {padding: 12px 14px; line-height: 20px;}
}
/* only screen and (max-width:767px) */
@media only screen and (max-width:767px){
h1{font-size: 30px;}
h2{font-size: 25px;}
.hero_section::after {width: 614px;height: 543px;right: -130px;bottom: -250px;}
.hero_section h1{width: 100%;}
.mb-120, .mb-110, .mb-130, .mb-140, .mb-160, .mb-170, .mb-180, .mb-190, .mb-200 {margin-bottom: 90px !important;}
}
/* only screen and (max-width:600px) */
@media only screen and (max-width:600px){
h2{font-size: 24px;}
.sub_h6 h6, .sub_h6 .h6{font-size: 10px;}
.block_title::after{width:44px;margin-top:14px;}
.hero_section h1{margin-bottom:0;}
.hero_section h1{width: 100%;overflow-wrap: break-word;word-wrap: break-word;}
.hero_section .text_wrap{max-width: 100%;}
.hero_section p{line-height: 20px;margin-bottom: 28px;}
.btn_one{font-size: 14px;height: 46px;padding: 0px 20px;}
.hero_section .sqr_image{width: 26px;height: 26px;}
span.arrow{width: 11px;height: 11px;margin-left: 5px;}
.hero_section .right_arrow { max-width: 60vw;}
.hero_section.mb-130{margin-bottom: 65px !important;}
p, li {line-height: 20px;font-size: 14px;}
body{font-size: 14px;}
.mb-90, .mb-100, .mb-110, .mb-120, .mb-130, .mb-140 {margin-bottom: 65px !important;}
.mb-160, .mb-170, .mb-180, .mb-190, .mb-200 {margin-bottom: 80px !important;}
.slider_section .bottom_link{margin-top: 45px;}
.slider_section .arrow-right{right: -80px;max-width: 300px;}
.slider_section .arrow-left{left: -80px;max-width: 300px;}
.slider_section{padding: 50px 0 70px;}
h1, h2, h3, h4, h5, h6, p, .h4, .h5, .h6 {margin-bottom: 20px;}
.short_intro_box p br{display: none;}
.small_p p{font-size: 12px;}
.short_intro_box.mb-100{margin-bottom: 50px !important;}
.hero_section h6, .hero_section .h6{font-size: 11px;}
.short_intro_box.mb-80{margin-bottom: 50px !important;}
.check_list li::before {width: 15px;height: 15px;}
.hero_section{min-height: calc(100vh - 100px);}
.hero_section{min-height: calc(100svh - 100px);}
}
/* only screen and (max-width:400px) */
@media only screen and (max-width:400px){
h1 {
font-size: 28px;
}
}
/* last */
.desktop_hidden{display: none;}
/* sectoren slider start */
.slider_section .bottom_link{margin-top:45px;}
.slider_section .short_intro_box p{max-width:700px;margin-left:auto;margin-right:auto;}
@media only screen and (max-width:600px){
.slider_section .bottom_link{margin-top:35px;}
}
/* sectoren slider end */
/* ---------- Block background (ACF "Achtergrondkleur" on every block except Select Testimonials) ----------
Standaard keeps the block's own background; Wit / Grijs / Rood override it (software_shaker_block_classes()
adds "ss_bg ss_bg--white|grey|red"). Rood is the light pink of the Voordelen block (--backgrondColorPink).
The extra .ss_bg keeps these rules above the block stylesheets. */
.ss_block.ss_bg.ss_bg--white {background:#fff !important;}
.ss_block.ss_bg.ss_bg--grey {background:var(--backgrondColorGray) !important;}
.ss_block.ss_bg.ss_bg--red {background:var(--backgrondColorPink) !important;}
/* Slider edges fade into the block background */
.ss_block.ss_bg--white .wrapper_large::before {background:linear-gradient(88deg,#fff 28.6%,rgba(255,255,255,0) 98.21%);}
.ss_block.ss_bg--white .wrapper_large::after {background:linear-gradient(-88deg,#fff 28.6%,rgba(255,255,255,0) 98.21%);}
.ss_block.ss_bg--grey .wrapper_large::before {background:linear-gradient(88deg,var(--backgrondColorGray) 28.6%,rgba(242,242,242,0) 98.21%);}
.ss_block.ss_bg--grey .wrapper_large::after {background:linear-gradient(-88deg,var(--backgrondColorGray) 28.6%,rgba(242,242,242,0) 98.21%);}
.ss_block.ss_bg--red .wrapper_large::before {background:linear-gradient(88deg,var(--backgrondColorPink) 28.6%,rgba(254,239,238,0) 98.21%);}
.ss_block.ss_bg--red .wrapper_large::after {background:linear-gradient(-88deg,var(--backgrondColorPink) 28.6%,rgba(254,239,238,0) 98.21%);}
/* Rood: the label pill gets a little more contrast on the pink */
.ss_block.ss_bg.ss_bg--red .sub_h6 h6, .ss_block.ss_bg.ss_bg--red .sub_h6 .h6 {background:rgba(211,32,32,.14);}
/* Decorative background arrows / diagonal stripes (div.arrow-right / div.arrow-left with images/half-arrow-*.svg,
the arrow in the front page hero .right_arrow): switched off site-wide */
.arrow-right, .arrow-left, .right_arrow, .ani_arrow_append {display:none !important;}
/* theme-header */
/* =============================================================================
Global: global/header.css
Extracted from style.css. Loaded on every page.
============================================================================= */
.menubar {display: none;}
.header {padding:30px 0;position:fixed;left:0;top:0;width:100%;z-index:10;background-color:transparent;transition:.4s;}
/* Sticky: the background of the dark hero (global/hero.css .ss_hero_box). The colour transitions; the glows (::before)
and the grid (::after) are gradients, which can't be transitioned, so they fade in with their opacity. */
.header::before, .header::after {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s ease;}
.header::before {background:radial-gradient(820px circle at 74% 55%, rgba(211,32,32,.62), rgba(211,32,32,.26) 36%, rgba(211,32,32,.08) 58%, transparent 72%), radial-gradient(760px 340px at 62% 0%, rgba(211,32,32,.26), transparent 70%), radial-gradient(560px circle at 0% 100%, rgba(211,32,32,.16), transparent 62%);}
.header::after {background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);mask-image:radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);}
.header.sticky::before {opacity:.56;} /* a bit less red than the hero */
.header.sticky::after {opacity:1;}
.header.sticky {background-color:#111214;box-shadow:0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.25);padding:10px 0;transform:none;transition:.4s;}
.header ul {padding-left:0;margin-bottom:0;list-style:none;}
.header .wrapper {max-width:1440px;position:relative;}
.header .header_inner {display:flex;justify-content:space-between;gap:20px;align-items:center;}
.header .logo {width:210px;}
.header .right_part {width:calc(100% - 230px);display:flex;justify-content:flex-end;flex-wrap:nowrap;align-items:center;} /* menu and buttons always on one line (see the breakpoints below) */
.header .navigation {margin:0 auto;}
.header .navigation>ul {display:flex;flex-wrap:nowrap;}
.header .navigation>ul>li {display:inline-block;}
.header .navigation a {text-decoration:none;font-size:13px;font-family:var(--font-medium);font-weight:var(--font-weight-medium);}
.header .navigation>ul>li>a {text-transform:uppercase;color:#fff;padding:14px 16px;position:relative;z-index:1;}
.header .navigation>ul>li:has(ul):hover>a, .header .navigation>ul>li.active:has(ul)>a {background:#fff;color:var(--textColor);border-top-left-radius:8px;border-top-right-radius:8px;}
.header .navigation>ul>li:has(ul):hover>a::after, .header .navigation>ul>li.active:has(ul)>a::after {content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:12px;background:#fff;} /* white bridge from the tab to the panel: no strip in between, and the menu stays open while moving down. .active: js/global.js keeps a menu open after the mouse leaves */
/* Caret after menu items with a dropdown, turned up while it is open. All top-level links are
inline-flex so the items with and without a caret stay on one line; ::after is the white bridge,
so the caret is ::before with order:2 (after the text). */
.header .navigation>ul>li>a {display:inline-flex;align-items:center;}
.header .navigation>ul>li.menu-item-has-children>a {gap:6px;}
.header .navigation>ul>li.menu-item-has-children>a::before {content:"";order:2;flex:none;width:9px;height:9px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;transition:transform .2s ease;}
.header .navigation>ul>li.menu-item-has-children:hover>a::before, .header .navigation>ul>li.menu-item-has-children.active>a::before {transform:rotate(180deg);}
.header .navigation>ul>li:not(:has(ul)):hover>a {color:var(--backgrondColorRed);}
.header .btn_box {flex:none;margin-left:20px;display:flex;align-items:center;gap:8px;}
.header .navigation>ul>li:not(.mega-menu) {position:relative;}
.header .navigation li:not(.mega-menu) .sub-menu {position:absolute;left:50%;top:100%;background:#fff;display:block;padding:18px;border-radius:5px;transform:translateX(-50%);opacity:0;visibility:hidden;pointer-events:none;min-width:max-content;}
.header .navigation li:not(.mega-menu):hover .sub-menu {opacity:1;visibility:visible;pointer-events:all;}
.header .navigation .sub-menu li {display:block;line-height:1;}
.header .navigation li:not(.mega-menu) .sub-menu a, .header .navigation li.mega-menu li ul li a {font-size:12px;font-family:var(--font-regular);font-weight:var(--font-weight-regular);}
.header .navigation li:not(.mega-menu) .sub-menu a:hover {color:var(--backgrondColorRed);}
.header .navigation li:not(.mega-menu) .sub-menu li:not(:last-child) {margin-bottom:5px;}
.header .navigation li.mega-menu .sub-menu {opacity:0;visibility:hidden;pointer-events:none;position:absolute;left:50%;transform:translateX(-50%);top:48px;width:max-content;max-width:1200px;background:#fff;border-radius:5px;display:block;padding:29px 24px;filter:drop-shadow(0 0 4.2px rgba(0,0,0,.25));}
.header .navigation li.mega-menu:hover>.sub-menu, .header .navigation li.mega-menu.active>.sub-menu {opacity:1;visibility:visible;pointer-events:all;}
.header .navigation li.mega-menu .sub-menu .sub-menu {opacity:1!important;visibility:visible!important;display:block!important;filter:none;}
.header .navigation li.mega-menu li ul {position:relative!important;left:unset!important;top:unset!important;transform:unset!important;padding:0!important;}
.header .navigation li.mega-menu li ul li {display:block;width:100%;}
.header .navigation li.mega-menu .sub-menu a {color:var(--textColor);}
.header .navigation li.mega-menu>ul {display:grid!important;grid-template-columns:repeat(auto-fit,250px);gap:45px;justify-content:start;width:max-content;}
.header .navigation li.mega-menu>ul>ul {display:contents;}
.header .navigation li.mega-menu li .menu-icon {max-width:28px;max-height:24px;}
.header .navigation li.mega-menu>ul>li>a+.menu-item-description {display:block;font-size:11px;color:var(--textColor);margin-top:6px;line-height:1.5;font-family:var(--font-regular)!important;font-weight:var(--font-weight-regular)!important;}
.header .navigation li>a[href="#"], .header .navigation li>a[href=""], .header .navigation li>a:not([href]) {pointer-events:none;cursor:default;}
.header .navigation li.mega-menu>ul>li>a[href="#"], .header .navigation li.mega-menu>ul>li>a[href=""], .header .navigation li.mega-menu>ul>li>a:not([href]) {background-image:none!important;border-bottom:none;padding-bottom:0;}
.header .navigation>ul>li.menu-item-has-children>.sub-menu {opacity:0;visibility:hidden;pointer-events:none;}
.header .navigation>ul>li.menu-item-has-children.active>.sub-menu {opacity:1;visibility:visible;pointer-events:all;}
.header .navigation li.menu_leesmeer>ul>li:not(.full_width):not([class*="menu-button"])>a:first-of-type {position:relative;display:block;font-size:14px;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);padding-bottom:9px;margin-bottom:14px;border-bottom:1px solid var(--backgrondColorGray);}
.header .navigation li.menu_leesmeer>ul>li:not(.full_width)>a:first-of-type+.menu-item-description {display:block;font-size:11px;color:var(--textColor);margin-top:6px;line-height:1.5;font-family:var(--font-regular);font-weight:var(--font-weight-regular);}
.header .navigation li.menu_leesmeer>ul>li:not(.full_width)>a:first-of-type[href]:not([href="#"]):not([href=""])::after {content:"Lees meer >";position:absolute;right:0;top:1px;font-size:12px;font-family:var(--font-regular);font-weight:var(--font-weight-regular);color:var(--textColor);white-space:nowrap;}
.header .navigation li.menu_leesmeer>ul>li:not(.full_width)>a:not([href="#"]):not([href=""]):hover, .header .navigation li.menu_leesmeer>ul>li:not(.full_width)>a:first-of-type[href]:not([href="#"]):not([href=""]):hover::after {color:var(--backgrondColorRed);}
/* Software menu (menu item class "menu_products"): compact panel right under the tab, in 2 columns;
every product has a dot, a bold title and a short description, and is clickable as a whole with a
grey background on hover. Menu item class "dot-dark" gives a dark dot (other brand). */
.header .navigation>ul>li.menu_products>.sub-menu {left:auto;top:48px;transform:none;padding:12px;border-radius:0 14px 14px 14px;}
.header .navigation li.menu_products>ul {grid-template-columns:repeat(2,minmax(0,250px));gap:4px;}
.header .navigation li.menu_products>ul>li {position:relative;padding:12px 16px 12px 36px;border-radius:10px;transition:background-color .2s ease;}
.header .navigation li.menu_products>ul>li::before {content:"";position:absolute;left:16px;top:17px;width:9px;height:9px;border-radius:50%;background:var(--backgrondColorRed);}
.header .navigation li.menu_products>ul>li.dot-dark::before {background:var(--textColor);}
.header .navigation li.menu_products>ul>li:hover {background:var(--backgrondColorGray);}
.header .navigation li.menu_products>ul>li>a:first-of-type {display:block;font-size:14px;line-height:1.3;font-family:var(--font-bold);font-weight:var(--font-weight-bold);color:var(--textColor);}
.header .navigation li.menu_products>ul>li>a:first-of-type::after {content:"";position:absolute;inset:0;border-radius:10px;}
.header .navigation li.menu_products>ul>li>a+.menu-item-description {display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:#6b6b6b;font-family:var(--font-regular)!important;font-weight:var(--font-weight-regular)!important;}
.header .navigation li.mega-menu>ul>li.menu-button-pos2, .header .navigation li.mega-menu>ul>li.menu-button-pos3, .header .navigation li.mega-menu>ul>li.menu-button-pos4 {grid-row:3;justify-self:left;width:max-content;border-top:none;}
.header .navigation li.mega-menu>ul>li.menu-button-pos2 {grid-column:2;}
.header .navigation li.mega-menu>ul>li.menu-button-pos3 {grid-column:3;}
.header .navigation li.mega-menu>ul>li.menu-button-pos4 {grid-column:1/-1;}
.header .navigation li.mega-menu>ul>li.menu-button-pos2>a, .header .navigation li.mega-menu>ul>li.menu-button-pos3>a, .header .navigation li.mega-menu>ul>li.menu-button-pos4>a {display:inline-flex;width:max-content;}
.header .navigation li.mega-menu>.sub-menu>li[class*="menu-button"]>a {color:var(--textColor);padding:12px 20px 12px 0;border-radius:8px;font-family:var(--font-regular);font-weight:var(--font-weight-regular);text-decoration:none;background-repeat:no-repeat;background-size:11px;background-position:right center;}
.header .navigation li.mega-menu>.sub-menu>li[class*="menu-button"]>a:hover {color:var(--backgrondColorRed);}
.header .navigation li.menu_arrow>ul>li:not(.full_width):not([class*="menu-button"])>a {font-size:14px;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);display:flex;align-items:center;gap:10px;padding-bottom:9px;border-bottom:1px solid var(--backgrondColorGray);margin-bottom:14px;background-repeat:no-repeat;background-size:11px;background-position:right calc(50% - 3px);}
.header .navigation li.menu_arrow>ul>li:not(.full_width):not([class*="menu-button"])>a:hover {color:var(--backgrondColorRed);}
.header .navigation li.mega-menu>ul>li.full_width {width:100%;display:flex;justify-content:center;border-top:1px solid var(--backgrondColorGray);padding-top:20px;align-items:center;}
.header .navigation li.mega-menu>ul>li.full_width>a {display:inline-flex;align-items:center;gap:10px;font-family:var(--font-regular);font-weight:var(--font-weight-regular);}
.header .navigation li.mega-menu>ul>li.full_width>a:hover {color:var(--backgrondColorRed);}
.header .navigation li.mega-menu>ul>li.full_width li {display:inline-block;width:auto;margin-bottom:0!important;}
.header .navigation li.mega-menu>ul>li.full_width ul {width:auto;}
.header .navigation li.mega-menu>ul>li.full_width ul li a {position:relative;margin-left:32px;}
.header .navigation li.mega-menu>ul>li.full_width ul li a::before {content:"";width:1px;height:26px;position:absolute;left:-16px;top:50%;transform:translateY(-50%);background:var(--backgrondColorGray);}
/* Functies menu (menu item class "menu_arrow"): groups in 4 columns, every function a link with the
same grey hover as the Software menu; under a line the two "Bekijk alle ..." links next to each
other with a small divider. After the general mega-menu rules above, so these win. */
.header .navigation li.menu_arrow>.sub-menu {width:min(1120px, calc(100vw - 48px));max-width:none;padding:24px 28px 14px;border-radius:14px;}
.header .navigation li.menu_arrow>ul {grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 36px;}
.header .navigation li.menu_arrow>ul>li:not(.full_width):not([class*="menu-button"])>a {padding-bottom:8px;margin-bottom:6px;border-bottom-color:#EEEEEE;}
.header .navigation li.menu_arrow .sub-menu .sub-menu li:not(:last-child) {margin-bottom:0;}
.header .navigation li.menu_arrow .sub-menu .sub-menu a {display:block;margin:0 -10px;padding:3px 10px;border-radius:7px;font-size:13px;line-height:1.35;color:#4a4a4a;transition:background-color .2s ease,color .2s ease;}
.header .navigation li.menu_arrow .sub-menu .sub-menu a:hover {background:var(--backgrondColorGray);color:var(--textColor);}
.header .navigation li.menu_arrow>ul::after {content:"";grid-row:3;grid-column:1/-1;align-self:start;border-top:1px solid #EEEEEE;}
.header .navigation li.menu_arrow>ul>li.menu-button-pos2, .header .navigation li.menu_arrow>ul>li.menu-button-pos3 {grid-row:3;width:max-content;padding-top:10px;border-top:none;}
.header .navigation li.menu_arrow>ul>li.menu-button-pos2 {grid-column:1/3;justify-self:end;}
.header .navigation li.menu_arrow>ul>li.menu-button-pos3 {position:relative;grid-column:3/5;justify-self:start;}
.header .navigation li.menu_arrow>ul>li.menu-button-pos3::before {content:"";position:absolute;left:-18px;top:calc(10px + 50% - 14px);width:1px;height:18px;background:#E5E5E5;}
.header .navigation li.menu_arrow>.sub-menu>li[class*="menu-button"]>a {display:inline-flex;align-items:center;gap:8px;margin:0 -10px;padding:6px 10px;border-radius:7px;font-size:13px;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);color:var(--textColor);background-image:none;transition:background-color .2s ease;}
.header .navigation li.menu_arrow>.sub-menu>li[class*="menu-button"]>a::after {content:"";flex:none;width:12px;height:12px;background:var(--backgrondColorRed);-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;transition:transform .2s ease;}
.header .navigation li.menu_arrow>.sub-menu>li[class*="menu-button"]>a:hover {background:var(--backgrondColorGray);color:var(--textColor);}
.header .navigation li.menu_arrow>.sub-menu>li[class*="menu-button"]>a:hover::after {transform:translateX(3px);}
/* Sectoren menu (menu item class "menu_sectors"): 2 columns right under the tab, grey hover like the
other menus, and "Alle sectoren" (menu item class "menu_all") under a line. */
.header .navigation>ul>li.menu_sectors>.sub-menu {display:grid;grid-template-columns:repeat(2,220px);gap:2px 6px;left:auto;top:48px;transform:none;width:max-content;min-width:0;padding:12px;border-radius:0 14px 14px 14px;}
.header .navigation>ul>li.menu_sectors>.sub-menu>li {margin:0!important;}
.header .navigation>ul>li.menu_sectors>.sub-menu>li>a {display:block;padding:7px 12px;border-radius:8px;font-size:13px;line-height:1.35;font-family:var(--font-regular);font-weight:var(--font-weight-regular);color:#4a4a4a;transition:background-color .2s ease,color .2s ease;} /* same font as the Functies links */
.header .navigation>ul>li.menu_sectors>.sub-menu>li>a:hover {background:var(--backgrondColorGray);color:var(--textColor);}
.header .navigation>ul>li.menu_sectors>.sub-menu>li.menu_all {grid-column:1/-1;margin-top:6px!important;padding-top:6px;border-top:1px solid #EEEEEE;}
.header .navigation>ul>li.menu_sectors>.sub-menu>li.menu_all>a {display:inline-flex;align-items:center;gap:8px;padding:6px 12px;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);color:var(--textColor);} /* like "Bekijk alle functionaliteiten" */
.header .navigation>ul>li.menu_sectors>.sub-menu>li.menu_all>a::after {content:"";flex:none;width:12px;height:12px;background:var(--backgrondColorRed);-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;transition:transform .2s ease;}
.header .navigation>ul>li.menu_sectors>.sub-menu>li.menu_all>a:hover {color:var(--textColor);}
.header .navigation>ul>li.menu_sectors>.sub-menu>li.menu_all>a:hover::after {transform:translateX(3px);}
/* Overig menu (menu item class "menu_more"): one column, same font and grey hover as Sectoren;
menu item class "menu_external" adds the ↗ icon (a link to another site, opens in a new tab). */
.header .navigation>ul>li.menu_more>.sub-menu {display:grid;grid-template-columns:minmax(240px,max-content);gap:2px;width:max-content;min-width:0;padding:10px;border-radius:0 14px 14px 14px;}
.header .navigation>ul>li.menu_more>.sub-menu>li {margin:0!important;}
.header .navigation>ul>li.menu_more>.sub-menu>li>a {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:7px 12px;border-radius:8px;font-size:13px;line-height:1.35;font-family:var(--font-regular);font-weight:var(--font-weight-regular);color:#4a4a4a;white-space:nowrap;transition:background-color .2s ease,color .2s ease;}
.header .navigation>ul>li.menu_more>.sub-menu>li>a:hover {background:var(--backgrondColorGray);color:var(--textColor);}
.header .navigation>ul>li.menu_more>.sub-menu>li.menu_external>a::after {content:"";flex:none;width:11px;height:11px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;transition:transform .2s ease;}
.header .navigation>ul>li.menu_more>.sub-menu>li.menu_external>a:hover::after {transform:translate(2px,-2px);}
/* Every dropdown opens at the same height as the mega menus (48px / 41px from the top of the header
row, the tab's white bridge covers the gap). left:auto keeps a panel at the left edge of its own tab. */
.header .navigation>ul>li:not(.mega-menu) {position:static;}
.header .navigation>ul>li:not(.mega-menu):not(.menu_sectors):not(.menu_more)>.sub-menu {left:auto;top:48px;transform:none;border-radius:0 10px 10px 10px;}
.header .navigation>ul>li.menu_more>.sub-menu {left:auto;top:48px;transform:none;}
@media only screen and (max-width:1279px) {
.header .navigation>ul>li:not(.mega-menu)>.sub-menu, .header .navigation>ul>li.menu_products>.sub-menu {top:41px;}
}
/* Inloggen dropdown in the header (replaces the School button, markup in header.php). Its links come
from the menu item with class "menu_login". Opens on hover, keyboard focus and tap (js/global.js). */
.header .navigation li.menu_login {display:none;} /* shown as the Inloggen button next to Demo aanvragen; the mobile menu keeps it */
.header .login_menu {position:relative;}
.header .login_menu__toggle {align-items:center;gap:8px;background:transparent;transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
.header .login_menu__chevron {display:block;flex:none;transition:transform .2s ease;}
.header .login_menu:hover .login_menu__toggle, .header .login_menu:focus-within .login_menu__toggle, .header .login_menu.open .login_menu__toggle {background:#fff;border-color:#fff;color:var(--backgrondColorRed);}
.header .login_menu:hover .login_menu__chevron, .header .login_menu:focus-within .login_menu__chevron, .header .login_menu.open .login_menu__chevron {transform:rotate(180deg);}
.header .login_menu__list {position:absolute;top:calc(100% + 8px);left:50%;z-index:20;min-width:220px;margin:0;padding:8px;list-style:none;background:#fff;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.18);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,4px);transition:opacity .2s ease,transform .2s ease,visibility .2s;}
.header .login_menu__list::before {content:"";position:absolute;left:0;right:0;top:-8px;height:8px;} /* keeps the hover while moving down to the list */
.header .login_menu:hover .login_menu__list, .header .login_menu:focus-within .login_menu__list, .header .login_menu.open .login_menu__list {opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);}
.header .login_menu__list li {display:block;margin:0;}
.header .login_menu__list a {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.3;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);color:var(--textColor);text-decoration:none;white-space:nowrap;transition:background-color .2s ease;}
.header .login_menu__list a svg {display:block;flex:none;color:var(--textColor);transition:transform .2s ease,color .2s ease;}
.header .login_menu__list a:hover, .header .login_menu__list a:focus-visible {background:var(--backgrondColorGray);outline:none;}
.header .login_menu__list a:hover svg {color:var(--backgrondColorRed);transform:translate(2px,-2px);}
/* Google rating (inc/helpers.php software_shaker_header_reviews()): always visible social proof, between the menu and the buttons */
.header .header_reviews {display:inline-flex;align-items:center;gap:6px;flex:none;margin-left:14px;padding:7px 10px;border-radius:999px;color:#fff;font-size:13px;line-height:1;white-space:nowrap;text-decoration:none;transition:background-color .2s ease;}
.header .header_reviews:hover, .header .header_reviews:focus-visible {background:rgba(255,255,255,.1);color:#fff;text-decoration:none;outline:none;}
.header .header_reviews_g {display:block;flex:none;width:16px;height:16px;}
.header .header_reviews_stars {position:relative;display:block;color:rgba(255,255,255,.28);font-family:Arial,sans-serif;font-size:13px;letter-spacing:1px;}
.header .header_reviews_stars::before {content:"★★★★★";}
.header .header_reviews_stars::after {content:"★★★★★";position:absolute;left:0;top:0;width:var(--rating);overflow:hidden;color:#ffc400;white-space:nowrap;}
.header .header_reviews_score {font-family:var(--font-bold);font-weight:var(--font-weight-bold);}
.header .header_reviews_count {color:rgba(255,255,255,.65);}
.mobile_menu_slide {display:none;}
#menu .menu-item-description {pointer-events:auto!important;cursor:pointer!important;position:relative;z-index:9999}
/* 1200-1399: menu + Inloggen + Demo aanvragen don't fit at full size, so a bit more compact */
@media only screen and (max-width:1399px) {
.header .logo {width:170px;}
.header .right_part {width:calc(100% - 190px);}
.header .navigation>ul>li>a {padding:14px 10px;white-space:nowrap;}
.header .navigation a {font-size:12px;}
.header .btn_box {margin-left:12px;}
.header .btn_one {font-size:13px;padding:0 14px;height:44px;}
}
@media only screen and (max-width:1279px) {
.header {padding: 25px 0;}
.header .logo {width: 140px;}
.header .right_part {width: calc(100% - 140px);}
.header .wrapper {padding: 0 20px;}
.header .navigation > ul > li > a {padding: 12px 10px;}
.header .btn_box {margin-left: 0;}
.header .btn_one {font-size: 13px;padding: 0 14px;height: 44px;}
.header .navigation a {font-size: 12px;}
.header .navigation li.mega-menu .sub-menu {top: 41px;max-width: 1000px;}
}
/* Hamburger menu (mobile_menu_slide) below 1200: the full menu doesn't fit next to the buttons */
@media only screen and (max-width:1199px) {
.header .wrapper {max-width: 100%;padding: 0 20px;}
.header .navigation {display: none;}
.header .logo {width: 180px;}
.header .right_part {width: calc(100% - 180px);}
.menubar {width: 40px;height: 40px;border-radius: 4px;background: var(--backgrondColorRed);padding: 12px 10px;display: flex;justify-content: center;flex-direction: column;gap: 5px;}
.menubar span {display: block;width: 100%;height: 1px;background: #fff;}
.header .header_inner {gap: 8px;}
.mobile_menu_slide {overflow: auto; color: #fff; opacity:0;visibility:hidden;pointer-events:none;transition:0.4s;padding:30px 0 50px;z-index:11;position:fixed;left:0;top:0;width:100%;height:100%;display:block;background:#0a0a0b;}
/* Background like the dark hero (global/hero.css .ss_hero_box), a bit darker: red glows and a faint grid, fixed behind the scrolling menu */
.mobile_menu_slide::before, .mobile_menu_slide::after {content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;}
.mobile_menu_slide::before {opacity:.4;}
.mobile_menu_slide::before {background:radial-gradient(820px circle at 74% 55%, rgba(211,32,32,.62), rgba(211,32,32,.26) 36%, rgba(211,32,32,.08) 58%, transparent 72%), radial-gradient(760px 340px at 62% 0%, rgba(211,32,32,.26), transparent 70%), radial-gradient(560px circle at 0% 100%, rgba(211,32,32,.16), transparent 62%);}
.mobile_menu_slide::after {background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);mask-image:radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);}
.mobile_menu_slide.show {opacity: 1;visibility: visible;pointer-events: all;}
.mobile_menu_slide ul {margin-bottom:0;padding-left:0;list-style:none;display:unset}
.mobile_menu_slide .outer_part>ul>li>a {padding:15px 0;display:block;font-size: 20px;font-family: var(--font-medium);font-weight: var(--font-weight-medium);text-transform: uppercase;}
.mobile_menu_slide svg path {fill: #fff;}
.mobile_menu_slide .menu-track-trace svg path {fill: transparent;stroke: #fff;}
.mobile_menu_slide a {text-decoration: none;}
.mobile_menu_slide .outer_part>ul>li {border-bottom:1px solid rgba(255, 255, 255, 0.3);}
.mobile_menu_slide .outer_part>ul>li:first-child {border-top:1px solid rgba(255, 255, 255, 0.3);}
.mobile_menu_slide .outer_part>ul>li.mega-menu>ul {padding-top: 15px;}
.mobile_menu_slide .outer_part>ul>li>ul {padding-left: 22px;display: block;}
.mobile_menu_slide .outer_part>ul>li>ul>li>a:not(.menu-item-description) {display:flex;align-items:center;font-family:var(--font-medium);font-weight:var(--font-weight-medium);gap:8px;margin-bottom:12px;font-size:18px;}
.mobile_menu_slide .outer_part>ul>li>ul>li>a {display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:14px;}
.mobile_menu_slide .menu-item-description {font-family:var(--font-regular)!important;font-weight:var(--font-weight-regular)!important;font-size:16px;line-height:1.6;display:block;margin-top:-6px;}
.mobile_menu_slide .outer_part .menu-icon {height: 24px;}
.mobile_menu_slide .outer_part li li li a {font-size: 16px;line-height: 32px;}
.mobile_menu_slide .outer_part li li ul {margin-bottom: 20px;display: block;}
.mobile_menu_slide .outer_part li li.full_width {margin-left: -22px;width: calc(100% + 22px);}
.mobile_menu_slide li {position:relative}
.mobile_menu_slide li .arrow {background:url('data:image/svg+xml;utf8,') no-repeat center center;width:50px;height:55px;position:absolute;right:0;top:0;transform:rotate(0);transition:0.4s;cursor:pointer;background-size: 16px;}
.mobile_menu_slide .outer_part li li .arrow {display: none !important;}
.mobile_menu_slide .outer_part li li ul {display: block !important;}
.mobile_menu_slide .cross_icon {width: 100%;text-align: right;margin-bottom: 40px;cursor: pointer;position: sticky;top: 0;z-index: 2;}
.mobile_menu_slide .wrapper {max-width: 100%;padding: 0 20px;}
.menubar {cursor: pointer;}
.mobile_menu_slide li .arrow.open {transform: rotate(180deg);}
}
@media (max-width:767px) {
.header.sticky::before {opacity:.2;} /* the glows are sized for desktop (hero on mobile: .35), a bit less red */
.mobile_menu_slide .menu-item-description {display:block;padding-bottom:24px;}
.mobile_menu_slide::before {opacity:.16;} /* the glows are sized for desktop and would fill the whole narrow menu */
}
@media only screen and (max-width:600px) {
.header .right_part {width:auto;margin-left:auto;} /* only the Google rating is left here */
.header .btn_box {display:none;}
.header .header_reviews {margin-left:0;padding:6px 8px;gap:5px;}
.header .header_reviews_stars, .header .header_reviews_count {display:none;}
.header .header_reviews_score::before {content:"★";margin-right:3px;color:#ffc400;font-family:Arial,sans-serif;font-weight:normal;}
.header .logo {width: 175px;}
.header {padding: 20px 0;}
}
/* Pages with the light hero (body.ss-light-hero, inc/hero.php): dark text and the dark logo while the
header is transparent at the top; once it turns sticky (dark background) the normal styles apply again.
:where() keeps these below the hover and dropdown states. */
.header .logo .logo_dark {display:none;}
body.ss-light-hero .header:not(.sticky) .logo:has(.logo_dark) .logo_light {display:none;}
body.ss-light-hero .header:not(.sticky) .logo .logo_dark {display:block;}
body.ss-light-hero .header:not(.sticky) :where(.navigation>ul>li>a) {color:var(--textColor);}
body.ss-light-hero .header:not(.sticky) :where(.header_reviews) {color:var(--textColor);}
body.ss-light-hero .header:not(.sticky) :where(.header_reviews_stars) {color:rgba(17,18,20,.2);}
body.ss-light-hero .header:not(.sticky) :where(.header_reviews_count) {color:rgba(17,18,20,.6);}
body.ss-light-hero .header:not(.sticky) :where(.header_reviews:hover) {background:rgba(17,18,20,.06);}
body.ss-light-hero .header:not(.sticky) :where(.login_menu__toggle) {color:var(--textColor);border-color:rgba(17,18,20,.25);}
body.ss-light-hero .header:not(.sticky) :where(.login_menu:hover, .login_menu:focus-within, .login_menu.open) .login_menu__toggle {border-color:rgba(17,18,20,.12);box-shadow:0 6px 18px rgba(17,18,20,.08);}
/* theme-hero */
/* =============================================================================
Global: global/hero.css
The hero of every page (partial/hero.php, inc/hero.php): a full-width dark band with red glows
and a faint grid. "split": text left, image right. "center": centered text without image.
The buttons are the CTA buttons (style.css .btn_one, css/content-cta.css .cta_panel_button).
============================================================================= */
.ss_hero_box {position:relative;isolation:isolate;overflow:hidden;background:#111214;color:#fff;} /* full width, edge to edge */
.ss_hero_box::before {content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(820px circle at 74% 55%, rgba(211,32,32,.62), rgba(211,32,32,.26) 36%, rgba(211,32,32,.08) 58%, transparent 72%), radial-gradient(760px 340px at 62% 0%, rgba(211,32,32,.26), transparent 70%), radial-gradient(560px circle at 0% 100%, rgba(211,32,32,.16), transparent 62%);} /* a big, bright glow behind the image */
.ss_hero_box::after {content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);mask-image:radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);}
.ss_hero_box > * {position:relative;z-index:1;}
/* Breadcrumbs + label (.ss_hero_head) sit in a row of their own above the H1; the image is in the row of
the H1..note block (.ss_hero_text), so it is centered next to that block and never rises above the H1. */
.ss_hero_inner {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:center;align-items:start;column-gap:56px;row-gap:0;min-height:680px;padding:150px 0 90px;}
.ss_hero_head, .ss_hero_text {grid-column:1;min-width:0;}
/* ---------- Breadcrumbs, label, title, text ---------- */
.ss_hero_crumbs ol {display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:0 0 24px;padding:0;list-style:none;font-size:14px;line-height:1.4;color:rgba(255,255,255,.55);}
.ss_hero_crumbs li {display:flex;align-items:center;margin:0;font-size:inherit;line-height:inherit;}
.ss_hero_crumbs li + li::before {content:"›";margin:0 9px;color:rgba(255,255,255,.4);}
.ss_hero_crumbs a {color:inherit;text-decoration:none;transition:color .2s ease;}
.ss_hero_crumbs a:hover {color:#fff;}
.ss_hero_crumbs [aria-current] {color:#fff;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);}
.ss_hero_label {display:inline-flex;align-items:center;gap:8px;margin:0 0 22px;padding:6px 14px;border-radius:999px;background:rgba(211,32,32,.2);color:var(--backgrondColorRedlight);font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:12px;line-height:16px;letter-spacing:.12em;text-transform:uppercase;}
.ss_hero_label::before {content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--backgrondColorRed);box-shadow:0 0 0 3px rgba(211,32,32,.25);}
.ss_hero .ss_hero_title {max-width:680px;margin:0 0 22px;color:#fff;font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:54px;line-height:1.06;letter-spacing:-.025em;overflow-wrap:break-word;}
/* Value proposition (field "Waardepropositie"): the main benefit in one sentence, right under the H1 */
.ss_hero .ss_hero_value {position:relative;max-width:620px;margin:-4px 0 20px;padding-left:16px;color:#fff;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:21px;line-height:1.4;}
.ss_hero .ss_hero_value::before {content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:3px;border-radius:2px;background:var(--backgrondColorRed);}
.ss_hero .ss_hero_value:last-child {margin-bottom:0;}
.ss_hero .ss_hero_lead {max-width:590px;margin:0 0 34px;color:rgba(255,255,255,.78);font-size:20px;line-height:1.5;}
.ss_hero .ss_hero_lead a {color:#fff;}
/* ---------- Buttons and note ---------- */
.ss_hero_buttons {display:flex;flex-wrap:wrap;gap:12px;}
/* No align-items on the button: the text must fill its height so the hover copy (span.link-effect::before) stays hidden below it */
.ss_hero_play {flex:none;align-self:center;width:9px;height:10px;margin-right:10px;background:var(--backgrondColorRed);clip-path:polygon(0 0, 100% 50%, 0 100%);}
.ss_hero .ss_hero_note {margin:16px 0 0;color:rgba(255,255,255,.55);font-size:14px;line-height:1.4;}
/* ---------- Image ---------- */
.ss_hero_visual {grid-column:2;grid-row:1;align-self:center;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;} /* image, with the partner badge under it */
.ss_hero_inner--head .ss_hero_visual {grid-row:2;}
.ss_hero_media {position:relative;max-width:100%;}
.ss_hero {--hero-img-h:560px;}
.ss_hero_image {display:block;width:auto;max-width:100%;height:auto;max-height:var(--hero-img-h);margin:0 auto;border-radius:14px;filter:drop-shadow(0 28px 50px rgba(0,0,0,.5));}
/* Mockup with wide transparent margins: only the visible part (inline --ratio / --img-*) */
.ss_hero_crop {position:relative;display:block;width:min(100%, calc(var(--hero-img-h) * var(--ratio)));aspect-ratio:var(--ratio);margin:0 auto;overflow:hidden;filter:drop-shadow(0 28px 50px rgba(0,0,0,.5));}
.ss_hero_crop .ss_hero_image {position:absolute;left:var(--img-x);top:var(--img-y);width:var(--img-w);max-width:none;height:auto;max-height:none;border-radius:0;filter:none;}
/* Portrait app screenshots in a phone */
.ss_hero_phone {position:relative;width:272px;max-width:100%;aspect-ratio:1179 / 2556;padding:9px;border-radius:46px;background:#0b0b0c;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 40px 80px rgba(0,0,0,.55);}
.ss_hero_phone::before {content:"";position:absolute;z-index:2;top:19px;left:50%;width:32%;height:22px;border-radius:999px;background:#0b0b0c;transform:translateX(-50%);}
.ss_hero_phone_screen {width:100%;height:100%;overflow:hidden;border-radius:37px;background:#fff;}
.ss_hero_phone_screen img {display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}
/* Laptop (or other image) with a phone in front of it, bottom right ("Telefoonscherm") */
.ss_hero_media--combo {width:100%;padding:0 5% 5% 0;}
.ss_hero_media--combo .ss_hero_image {width:100%;max-height:none;}
.ss_hero_media--combo .ss_hero_crop {width:100%;}
.ss_hero_media--combo .ss_hero_combo_phone {position:absolute;right:0;bottom:0;z-index:2;width:23%;padding:5px;border-radius:26px;}
.ss_hero_media--combo .ss_hero_combo_phone::before {top:10px;width:30%;height:11px;}
.ss_hero_media--combo .ss_hero_combo_phone .ss_hero_phone_screen {border-radius:21px;}
/* Floating cards on the image */
.ss_hero_tag {position:absolute;z-index:3;display:flex;align-items:center;gap:12px;max-width:250px;padding:12px 18px 12px 12px;border-radius:12px;background:#fff;color:var(--textColor);box-shadow:0 18px 40px rgba(0,0,0,.35);}
.ss_hero_tag--1 {top:13%;left:-58px;}
.ss_hero_tag--2 {bottom:15%;right:-54px;}
.ss_hero_tag_icon {flex:none;position:relative;width:34px;height:34px;border-radius:50%;background:var(--backgrondColorPink);color:var(--backgrondColorRed);}
.ss_hero_tag_icon::before {content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;background:currentColor;-webkit-mask:var(--hero-icon) center/contain no-repeat;mask:var(--hero-icon) center/contain no-repeat;}
.ss_hero_tag_icon--check {--hero-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4 6.4 11.6 13 4.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.ss_hero_tag_icon--clock {--hero-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M8 4.6V8l2.4 1.6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.ss_hero_tag_icon--calendar {--hero-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='3.2' width='12' height='10.8' rx='2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M2 6.6h12M5.4 1.8v2.6M10.6 1.8v2.6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");}
.ss_hero_tag_icon--euro {--hero-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.4 4.2A5 5 0 1 0 12.4 11.8M2.6 6.8h6.6M2.6 9.2h6.6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");}
.ss_hero_tag_icon--chart {--hero-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 13.5h11M4.5 11V8M8 11V4.5M11.5 11V6.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");}
.ss_hero_tag_icon--file {--hero-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.4 1.8H4.6a1.6 1.6 0 0 0-1.6 1.6v9.2a1.6 1.6 0 0 0 1.6 1.6h6.8a1.6 1.6 0 0 0 1.6-1.6V5.4z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M9.2 2v3.6H13M5.6 8.6h4.8M5.6 11h3.2' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");}
.ss_hero_tag_text {display:flex;flex-direction:column;gap:2px;min-width:0;}
.ss_hero_tag_text strong {font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:15px;line-height:1.25;color:#111214;}
.ss_hero_tag_text span {font-size:13px;line-height:1.3;color:var(--textColortwo);}
/* ---------- Partner badge (Theme Setting > Hero; also in the front page hero): dark grey glass card on the dark hero ---------- */
.ss_badge {display:inline-flex;align-items:center;gap:14px;max-width:100%;margin-top:30px;padding:11px 14px 11px 16px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(30,31,35,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;text-align:left;vertical-align:top;}
.ss_badge_logo {flex:none;display:flex;align-items:center;gap:9px;padding-right:14px;border-right:1px solid rgba(255,255,255,.18);}
.ss_badge_plus {color:rgba(255,255,255,.55);font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:14px;line-height:1;}
.ss_badge_logo img {display:block;width:auto;max-width:110px;height:20px;object-fit:contain;}
.ss_badge_text {display:flex;flex-direction:column;gap:2px;min-width:0;}
.ss_badge_text strong {color:#fff;font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:14px;line-height:1.3;}
.ss_badge_text span {color:rgba(255,255,255,.7);font-size:12.5px;line-height:1.35;}
.ss_badge_check {flex:none;position:relative;width:24px;height:24px;margin-left:6px;border-radius:50%;background:rgba(211,32,32,.2);color:var(--backgrondColorRedlight);}
.ss_badge_check::before {content:"";position:absolute;inset:0;margin:auto;width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4 6.4 11.6 13 4.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4 6.4 11.6 13 4.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.hero_section .ss_badge {margin:0;} /* front page: under the text (the paragraph's margin gives the gap) */
/* ---------- Front page (its own hero): the image right of the title ----------
The title then wraps: "ERP-software voor de bouw & techniek" on two lines, "Onder andere voor" and
the rotating word each on a line of their own (so the layout does not jump when the word changes). */
.ss_home_visual {position:relative;isolation:isolate;min-width:0;pointer-events:none;}
.ss_home_visual::before {content:"";position:absolute;inset:-38% -46% -38% -14%;z-index:-1;background:radial-gradient(closest-side, rgba(211,32,32,.96), rgba(211,32,32,.72) 40%, rgba(211,32,32,.34) 66%, rgba(211,32,32,.1) 86%, transparent 100%);filter:blur(8px);} /* centre a bit right of the image */ /* red glow behind the image, for contrast with the photo */
.ss_home_visual .ss_hero_image {filter:drop-shadow(0 24px 44px rgba(0,0,0,.5));}
.hero_section--visual .right_arrow {display:none;}
@media only screen and (min-width:1024px) {
.hero_section--visual .inner_part {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:center;}
.hero_section--visual .ss_home_visual {margin-right:-20px;} /* a little past the column */
.hero_section--visual .text_wrap {max-width:none;min-width:0;container-type:inline-size;}
.hero_section--visual .hero_heading {width:auto;max-width:100%;}
.hero_section--visual .hero_heading__title {white-space:normal;}
.hero_section--visual .hero_heading__title, .hero_section--visual .hero_heading__subtitle-row {font-size:min(52px, 100cqi / 11.8);} /* "betonboring & zagen" (~11.5em) fits */
.hero_section--visual .hero_heading__subtitle-row {flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:0;}
.hero_section--visual .hero_bottom {grid-column:1 / -1;}
}
@media only screen and (max-width:1023px) {
.ss_home_visual {display:none;}
.hero_section--visual .right_arrow {display:block;}
}
/* ---------- Centered, without image ---------- */
.ss_hero--center .ss_hero_box::before {background:radial-gradient(860px circle at 50% 120%, rgba(211,32,32,.6), rgba(211,32,32,.24) 38%, rgba(211,32,32,.07) 58%, transparent 72%), radial-gradient(760px 320px at 50% 0%, rgba(211,32,32,.24), transparent 70%), radial-gradient(480px circle at 0% 100%, rgba(211,32,32,.14), transparent 62%);}
.ss_hero--center .ss_hero_box::after {-webkit-mask-image:radial-gradient(ellipse 55% 90% at 50% 60%, #000 15%, transparent 75%);mask-image:radial-gradient(ellipse 55% 90% at 50% 60%, #000 15%, transparent 75%);}
.ss_hero--center .ss_hero_inner {grid-template-columns:minmax(0,1fr);min-height:0;padding:170px 0 96px;text-align:center;}
.ss_hero--center .ss_hero_head, .ss_hero--center .ss_hero_text {max-width:880px;margin:0 auto;}
.ss_hero--center .ss_hero_crumbs ol, .ss_hero--center .ss_hero_buttons {justify-content:center;}
.ss_hero--center .ss_hero_title {max-width:none;}
.ss_hero--center .ss_hero_lead {margin-left:auto;margin-right:auto;}
.ss_hero--center .ss_hero_value {margin-left:auto;margin-right:auto;padding-left:0;}
.ss_hero--center .ss_hero_value::before {display:none;}
.ss_hero--center .ss_hero_title:last-child, .ss_hero_lead:last-child {margin-bottom:0;}
/* ---------- Light version (Theme Setting > Hero > Kleur: Licht, the default) ----------
Near-white (#f5f5f4) with soft red/peach glows and a dotted grid; dark text. Same layout as the dark one. */
.ss_hero--light .ss_hero_box {background:#f5f5f4;color:#111214;}
.ss_hero--light .ss_hero_box::before {background:radial-gradient(760px circle at 74% 56%, rgba(211,32,32,.34), rgba(211,32,32,.13) 38%, transparent 68%), radial-gradient(860px 580px at 100% 0%, rgba(255,150,100,.42), transparent 70%), radial-gradient(660px circle at 0% 100%, rgba(211,32,32,.15), transparent 62%);} /* a big glow behind the image */
.ss_hero--light .ss_hero_box::after {background-image:radial-gradient(rgba(17,18,20,.13) 1px, transparent 1.3px);background-size:22px 22px;}
.ss_hero--light .ss_hero_crumbs ol {color:rgba(17,18,20,.55);}
.ss_hero--light .ss_hero_crumbs li + li::before {color:rgba(17,18,20,.35);}
.ss_hero--light .ss_hero_crumbs a:hover, .ss_hero--light .ss_hero_crumbs [aria-current] {color:#111214;}
.ss_hero--light .ss_hero_label {background:rgba(211,32,32,.1);color:var(--textColorRed);}
.ss_hero--light .ss_hero_label::before {box-shadow:0 0 0 3px rgba(211,32,32,.16);}
.ss_hero--light .ss_hero_title {color:#111214;}
.ss_hero--light .ss_hero_lead {color:rgba(17,18,20,.76);}
.ss_hero--light .ss_hero_value {color:#111214;}
.ss_hero--light .ss_hero_lead a {color:#111214;}
.ss_hero--light .ss_hero_note {color:rgba(17,18,20,.55);}
.ss_hero--light .cta_panel_button--secondary {border-color:rgba(17,18,20,.85);color:#111214;}
.ss_hero--light .cta_panel_button--secondary:hover {border-color:#111214;background:rgba(17,18,20,.05);color:#111214;}
.ss_hero--light .ss_hero_image, .ss_hero--light .ss_hero_crop {filter:drop-shadow(0 24px 44px rgba(17,18,20,.16));}
.ss_hero--light .ss_hero_crop .ss_hero_image {filter:none;}
.ss_hero--light .ss_hero_phone {background:#111214;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 34px 70px rgba(17,18,20,.22);}
.ss_hero--light .ss_hero_phone::before {background:#111214;}
.ss_hero--light .ss_hero_tag {box-shadow:0 16px 36px rgba(17,18,20,.12);}
.ss_hero--light .ss_badge {border-color:rgba(17,18,20,.08);background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 10px 26px rgba(17,18,20,.06);color:#111214;}
.ss_hero--light .ss_badge_logo {border-right-color:rgba(17,18,20,.12);}
.ss_hero--light .ss_badge_plus {color:rgba(17,18,20,.45);}
.ss_hero--light .ss_badge_logo img {filter:brightness(0);opacity:.85;} /* the white logo of the dark hero, in dark */
.ss_hero--light .ss_badge_text strong {color:#111214;}
.ss_hero--light .ss_badge_text span {color:rgba(17,18,20,.6);}
.ss_hero--light .ss_badge_check {background:rgba(211,32,32,.1);color:var(--backgrondColorRed);}
.ss_hero--light.ss_hero--center .ss_hero_box::before {background:radial-gradient(800px circle at 50% 118%, rgba(211,32,32,.3), rgba(211,32,32,.11) 40%, transparent 68%), radial-gradient(900px 440px at 85% 0%, rgba(255,150,100,.4), transparent 70%), radial-gradient(560px circle at 0% 100%, rgba(211,32,32,.13), transparent 62%);}
@media only screen and (max-width:1279px) {
.ss_hero_inner {column-gap:40px;min-height:620px;padding:140px 0 80px;}
.ss_hero .ss_hero_title {font-size:48px;}
.ss_hero .ss_hero_lead {font-size:18px;}
.ss_hero_tag--1 {left:-24px;}
.ss_hero_tag--2 {right:-20px;}
}
@media only screen and (max-width:1023px) {
.ss_hero_inner {grid-template-columns:minmax(0,1fr);min-height:0;padding:130px 0 64px;}
.ss_hero_inner .ss_hero_visual, .ss_hero_inner--head .ss_hero_visual {grid-column:1;grid-row:auto;margin-top:48px;}
.ss_hero--center .ss_hero_inner {padding:140px 0 72px;}
.ss_hero .ss_hero_title {font-size:42px;}
.ss_hero {--hero-img-h:440px;}
.ss_hero_phone {width:240px;}
.ss_hero_tag--1 {left:-40px;}
.ss_hero_tag--2 {right:-40px;}
}
@media only screen and (max-width:767px) {
.ss_hero--dark .ss_hero_box::before {opacity:.35;} /* the glows are sized for desktop and would fill the whole narrow hero */
.ss_hero_inner {padding:112px 0 48px;}
.ss_hero_inner .ss_hero_visual, .ss_hero_inner--head .ss_hero_visual {margin-top:40px;}
.ss_hero--center .ss_hero_inner {padding:116px 0 56px;}
.ss_hero_crumbs ol {margin-bottom:18px;font-size:13px;}
.ss_hero_label {margin-bottom:18px;font-size:11px;}
.ss_hero .ss_hero_title, .ss_hero--center .ss_hero_title {font-size:36px;line-height:1.08;}
.ss_hero .ss_hero_title br {display:none;}
.ss_hero .ss_hero_value {margin-bottom:16px;font-size:18px;}
.ss_hero .ss_hero_lead {margin-bottom:28px;font-size:17px;}
.ss_hero .ss_hero_lead:last-child {margin-bottom:0;}
.ss_hero_buttons .cta_panel_button {width:100%;min-width:0;}
.ss_hero {--hero-img-h:340px;}
.ss_hero_phone {width:210px;padding:7px;border-radius:36px;}
.ss_hero_phone::before {top:14px;height:17px;}
.ss_hero_phone_screen {border-radius:29px;}
.ss_hero_media--combo .ss_hero_combo_phone {padding:4px;border-radius:18px;}
.ss_hero_media--combo .ss_hero_combo_phone::before {top:7px;height:8px;}
.ss_hero_media--combo .ss_hero_combo_phone .ss_hero_phone_screen {border-radius:14px;}
.ss_hero_tag {padding:9px 12px 9px 9px;gap:9px;}
.ss_hero_tag--1 {left:-28px;}
.ss_hero_tag--2 {right:-28px;}
.ss_hero_tag_icon {width:28px;height:28px;}
.ss_hero_tag_text strong {font-size:13px;}
.ss_hero_tag_text span {font-size:11px;}
}
/* Mobile: the badge without the logo(s), only the text and the check */
@media only screen and (max-width:767px) {
.ss_badge_logo {display:none;}
}
@media only screen and (max-width:600px) {
.ss_badge {gap:12px;padding:10px 12px 10px 14px;}
.ss_badge_text {flex:1;}
.ss_badge_text strong {font-size:13px;}
.ss_badge_text span {font-size:11.5px;}
.ss_badge_check {width:22px;height:22px;margin-left:2px;}
}
@media only screen and (max-width:400px) {
.ss_hero .ss_hero_title, .ss_hero--center .ss_hero_title {font-size:31px;}
.ss_hero_tag--1 {left:-12px;}
.ss_hero_tag--2 {right:-12px;}
}
/* theme-pages-legal */
/* =============================================================================
Page: legal.css (page-template/template-legal.php)
Privacy statement and other legal texts: a table of contents beside the text,
numbered sections, "in short" cards, tables and a contact card.
============================================================================= */
.legal_page {padding:80px 0 100px;}
.legal_layout {display:grid;grid-template-columns:270px minmax(0,1fr);gap:72px;align-items:start;}
.legal_body {min-width:0;max-width:780px;}
/* ---------- Table of contents ---------- */
.legal_aside {position:sticky;top:110px;}
.legal_toc {padding:24px 18px 18px;border:1px solid #ECECEC;border-radius:14px;background:#fff;box-shadow:0 12px 32px rgba(17,18,20,.05);}
.legal_toc_label {display:inline-block;margin:0 0 14px 6px;padding:5px 12px;border-radius:999px;background:rgba(211,32,32,.1);color:var(--textColorRed);font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:11px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;list-style:none;cursor:default;}
.legal_toc_label::-webkit-details-marker {display:none;}
.legal_toc_list {margin:0;padding:0;list-style:none;}
.legal_toc_list li {margin:0;font-size:14px;line-height:1.35;}
.legal_toc_list li + li {margin-top:2px;}
.legal_toc_list a {display:flex;gap:12px;align-items:baseline;padding:8px 10px;border-radius:8px;color:var(--textColor);text-decoration:none;transition:background-color .2s ease, color .2s ease;}
.legal_toc_num {flex:none;min-width:18px;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:12px;color:var(--textColortwo);font-variant-numeric:tabular-nums;}
.legal_toc_list a:hover {background:#F6F6F6;color:var(--textColorRed);}
.legal_toc_list a[aria-current="location"] {background:rgba(211,32,32,.08);color:var(--textColorRed);font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);}
.legal_toc_list a[aria-current="location"] .legal_toc_num {color:var(--textColorRed);}
/* ---------- Text ---------- */
.legal_body p, .legal_body li {font-size:16px;line-height:1.75;color:var(--textColor);}
.legal_body p {margin:0 0 16px;}
.legal_body a:not([class]) {color:var(--backgrondColorRed);font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);text-decoration:none;text-underline-offset:3px;}
.legal_body a:not([class]):hover {color:var(--textColorRed);text-decoration:underline;}
.legal_body strong {color:#111214;}
/* Introduction: the first paragraph larger, a list becomes the "in short" cards */
.legal_intro {padding-bottom:48px;}
.legal_intro > p:first-child {margin-bottom:28px;font-size:20px;line-height:1.6;color:#111214;}
.legal_intro > p:last-child {margin-bottom:0;}
.legal_intro ul {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 28px;padding:0;list-style:none;}
.legal_intro li {position:relative;margin:0;padding:18px 20px 18px 56px;border:1px solid #ECECEC;border-radius:12px;background:#FAFAFA;font-size:15px;line-height:1.55;}
.legal_intro li::before {content:"";position:absolute;left:18px;top:17px;width:24px;height:24px;border-radius:50%;background:rgba(211,32,32,.1) url("data:image/svg+xml;utf8,") center / 13px no-repeat;}
/* Numbered sections */
.legal_section {padding:48px 0;border-top:1px solid #ECECEC;} /* anchor offset: html scroll-padding-top in style.css */
.legal_section_head {display:flex;align-items:center;gap:16px;margin-bottom:24px;}
.legal_num {flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:rgba(211,32,32,.1);color:var(--textColorRed);font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:14px;font-variant-numeric:tabular-nums;}
.legal_section h2 {margin:0;font-size:26px;line-height:1.25;text-wrap:balance;}
.legal_section h3 {margin:32px 0 10px;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:19px;line-height:1.35;}
.legal_section_head + h3 {margin-top:0;}
.legal_section > :last-child {margin-bottom:0;}
/* Lists: red dots; long lists in two columns */
.legal_section ul {margin:0 0 18px;padding:0;list-style:none;}
.legal_section ul li {position:relative;margin:0 0 8px;padding-left:22px;break-inside:avoid;}
.legal_section ul li::before {content:"";position:absolute;left:3px;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--backgrondColorRed);}
.legal_section ul:has(> li:nth-child(6)) {columns:2;column-gap:40px;}
/* Company details */
.legal_body address {margin:0 0 18px;padding:22px 24px;border-left:3px solid var(--backgrondColorRed);border-radius:0 12px 12px 0;background:#F7F7F7;font-style:normal;font-size:15px;line-height:1.75;}
.legal_body address strong {display:block;margin-bottom:2px;font-size:16px;}
/* Tables */
.legal_table {margin:8px 0 20px;overflow-x:auto;border:1px solid #ECECEC;border-radius:12px;background:#fff;}
.legal_table table {width:100%;min-width:520px;border-collapse:collapse;}
.legal_table th, .legal_table td {padding:14px 18px;text-align:left;vertical-align:top;font-size:15px;line-height:1.55;}
.legal_table thead th {padding-top:12px;padding-bottom:12px;background:#F7F7F7;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--textColortwo);}
.legal_table tbody tr + tr td, .legal_table tbody tr + tr th {border-top:1px solid #ECECEC;}
.legal_table tbody td:first-child, .legal_table tbody th {font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);color:#111214;}
/* Questions card */
.legal_help {display:flex;align-items:center;justify-content:space-between;gap:24px 32px;flex-wrap:wrap;margin-top:8px;padding:32px 36px;border-radius:16px;background:var(--backgrondColorPink);}
.legal_help_text {flex:1 1 320px;min-width:0;}
.legal_help_title {margin:0 0 6px;font-size:22px;line-height:1.3;}
.legal_help p {margin:0;font-size:15px;line-height:1.6;}
.legal_help_buttons {display:flex;flex-wrap:wrap;gap:10px;}
.legal_btn {display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:1px solid rgba(17,18,20,.2);border-radius:6px;background:#fff;color:#111214;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:15px;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .2s ease, border-color .2s ease, color .2s ease;}
.legal_btn:hover {border-color:#111214;}
.legal_btn--red {border-color:var(--backgrondColorRed);background:var(--backgrondColorRed);color:#fff;}
.legal_btn--red:hover {border-color:#B81A1A;background:#B81A1A;color:#fff;}
@media only screen and (max-width:1023px) {
.legal_page {padding:48px 0 72px;}
.legal_layout {grid-template-columns:minmax(0,1fr);gap:36px;}
.legal_aside {position:static;}
.legal_body {max-width:none;}
.legal_toc {padding:0;box-shadow:none;}
.legal_toc_label {display:flex;align-items:center;justify-content:space-between;margin:0;padding:16px 20px;border-radius:14px;background:none;color:#111214;font-size:12px;cursor:pointer;}
.legal_toc_label::after {content:"";width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s ease;}
.legal_toc_details[open] .legal_toc_label::after {transform:translateY(2px) rotate(-135deg);}
.legal_toc_list {padding:0 10px 12px;}
}
@media only screen and (max-width:767px) {
.legal_page {padding:36px 0 56px;}
.legal_intro {padding-bottom:36px;}
.legal_intro > p:first-child {font-size:18px;}
.legal_intro ul {grid-template-columns:minmax(0,1fr);gap:10px;}
.legal_section {padding:36px 0;}
.legal_section_head {gap:12px;margin-bottom:18px;}
.legal_num {width:34px;height:34px;font-size:13px;}
.legal_section h2 {font-size:22px;}
.legal_section h3 {font-size:17px;}
.legal_section ul:has(> li:nth-child(6)) {columns:1;}
.legal_help {padding:26px 22px;}
.legal_help_buttons, .legal_btn {width:100%;}
}
/* content-cta */
/* ---------- Call to Action ---------- */
.cta_section{text-align:center;}
.cta_section:not(.cta_panel_section) h2{margin-bottom:40px;line-height:1.1;}
.cta_section:not(.cta_panel_section) .outer_part{max-width:900px;margin:0 auto;text-align:center;}
.cta_panel_section{text-align:left;}
.cta_panel{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.65fr);gap:70px;align-items:center;overflow:hidden;padding:52px 64px;border-radius:24px;background:#111214;box-shadow:0 18px 45px rgba(53,53,53,.12);color:#fff;}
/* Same background as the dark hero (global/hero.css .ss_hero_box): red glows and a faint grid, mirrored (glow on the left) */
.cta_panel::before, .cta_panel::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;transform:scaleX(-1);} /* own rounding: overflow:hidden doesn't clip the transformed layers at the corners */
.cta_panel::before{opacity:.4;background:radial-gradient(820px circle at 74% 55%, rgba(211,32,32,.62), rgba(211,32,32,.26) 36%, rgba(211,32,32,.08) 58%, transparent 72%), radial-gradient(760px 340px at 62% 0%, rgba(211,32,32,.26), transparent 70%), radial-gradient(560px circle at 0% 100%, rgba(211,32,32,.16), transparent 62%);}
.cta_panel::after{background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);mask-image:radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);}
.cta_panel_content{position:relative;z-index:1;max-width:700px;}
.cta_panel_label{display:inline-block;padding:5px 12px;border-radius:999px;font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:11px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.14);color:#fff;margin-bottom:14px;}
.cta_panel h2{margin:0 0 18px;color:#fff;font-size:38px;line-height:1.08;letter-spacing:-.025em;}
.cta_panel_text{max-width:670px;color:rgba(255,255,255,.84);}
.cta_panel_text p{margin:0;color:inherit;font-size:16px;line-height:1.75;}
.cta_panel_note{min-width:230px;text-align:center;white-space:nowrap;color:#fff;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:13px;line-height:1.5;}
.cta_panel_actions{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;} /* buttons and the note under them centred on each other */
.cta_panel_button{min-width:230px;justify-content:center;}
.cta_panel_button .link-effect{justify-content:center;}
.cta_panel_button--secondary{background:transparent;border-color:rgba(255,255,255,.7);}
.cta_panel_button--secondary:hover{border-color:#fff;background:rgba(255,255,255,.06);color:#fff;text-decoration:none;}
@media(max-width:900px){
.cta_panel{grid-template-columns:1fr;gap:32px;padding:46px 44px;}
.cta_panel_actions{flex-direction:row;flex-wrap:wrap;}
.cta_panel_note{flex-basis:100%;text-align:left;} /* its own line under the buttons, which sit side by side here */
}
@media(max-width:600px){
.cta_section:not(.cta_panel_section) h2{margin-bottom:20px;}
.cta_section:not(.cta_panel_section) h2 br{display:none;}
.cta_panel{gap:28px;padding:34px 26px;border-radius:18px;}
.cta_panel::before{opacity:.15;} /* like the hero on mobile: the glows are sized for desktop */
.cta_panel_label{font-size:10px;}
.cta_panel h2{font-size:26px;line-height:1.12;}
.cta_panel_text p{font-size:14px;line-height:1.6;}
.cta_panel_note{font-size:12px;text-align:center;white-space:normal;}
.cta_panel_actions{flex-direction:column;align-items:stretch;width:100%;}
.cta_panel_button{width:100%;min-width:0;}
}
/* Optional phone line under the buttons */
.cta_panel_phone {margin:4px 0 0;font-size:12px;line-height:1.5;color:rgba(255,255,255,.8);}
.cta_panel_phone a {color:#fff;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}
.cta_panel_phone a:hover {color:#fff;text-decoration:none;}
/* theme-font-inter */
/* =============================================================================
Global: global/font-inter.css
Loaded only when Theme Setting > Lettertype is set to Inter (see inc/fonts.php).
Inter is self-hosted (SIL Open Font License), one variable file per subset.
============================================================================= */
/* latin-ext */
@font-face {font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('https://softwareshaker.com/wp-content/themes/software-shaker/css/global/../../fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face {font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('https://softwareshaker.com/wp-content/themes/software-shaker/css/global/../../fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root {
--font-sans : "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-regular : var(--font-sans);
--font-medium : var(--font-sans);
--font-semibold : var(--font-sans);
--font-bold : var(--font-sans);
--font-weight-regular : 400;
--font-weight-medium : 500;
--font-weight-semibold : 600;
--font-weight-bold : 700;
}