/* latin-ext */
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url(../fonts/Figtree-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: 'Figtree';
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url(../fonts/Figtree-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;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
*:not(dialog) {
margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
html {
interpolate-size: allow-keywords;
}
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
}
b,
strong {
font-weight: 600;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
p {
text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: pretty;
}
#root,
#__next {
isolation: isolate;
}
p:last-child,
ul:last-child,
ol:last-child,
table:last-child {
margin-bottom: 0;
}
button {
cursor: pointer;
}
/** End Reset **/
/**
* Variables
*/
:root {
--primary-color: #21b89f;
--alternate-color: #ff7f50;
--light-grey: #eff3f8;
--text-color: #2c3232;
--small-text: 17px;
--medium-text: 18px;
--dark-green: #24827d;
--darker-green: #135551;
--breathe: 6em;
--gutter: 1.9em;
--gap: 1em;
--content-width: 1200px;
--content-large: 990px;
--content-medium: 900px;
--content-small: 780px;
--shadow: 0 0 60px 10px rgba(0, 0, 0, .05);
--green-gradient: linear-gradient(154deg, #089496, #03b087);
}
@media (max-width: 767px) {
:root {
--gutter: 1.75em;
}
}
/**
* Generic classes
*/
.center {
text-align: center;
}
.align-center {
margin-left: auto;
margin-right: auto;
}
.block {
display: block;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.flex.center {
justify-content: center;
}
.flex.center-items {
align-items: center;
}
.flex.split {
gap: 0 5%;
}
.flex.split>div {
width: 47.5%;
}
@media (min-width: 1024px) {
.flex.split.center {
text-align: left;
}
.flex.split.center h2:after {
left: 0;
transform: none;
}
}
@media (max-width: 1023px) {
.flex.split {
gap: 0;
}
.flex.split>div {
order: 0 !important;
width: 100%;
}
.flex.split .media {
margin-top: var(--gutter);
}
}
.gap {
gap: var(--gap);
}
.gap-large {
gap: 32px;
}
.grid {
display: grid;
}
.grid.two {
grid-template-columns: repeat(2, 1fr);
}
.grid.three {
grid-template-columns: repeat(3, 1fr);
}
.space-between {
justify-content: space-between;
}
.nowrap {
flex-wrap: nowrap;
}
.dark {
color: white;
}
@media (min-width: 1024px) {
.t,
.m {
display: none;
}
}
@media (max-width: 1023px) {
.d {
display: none;
}
.t {
display: block;
}
}
.glass {
background: rgba(255, 255, 255, .55);
backdrop-filter: saturate(180%) blur(25px);
border: 1px solid #ffffffaa;
border-radius: 24px;
/*box-shadow: 0 5px 25px 5px #0000001a;*/
box-shadow: 0 0 60px 5px #00000022;
padding: var(--gutter);
}
.silver {
background: radial-gradient(circle, #47615c17 60%, rgb(210 217 216 / 60%) 100%);
border: 1px solid #fff;
box-shadow: 0 0 60px 10px #00000011;
padding: var(--gutter) calc(var(--gutter) / 4 * 3);
}
.light-grad {
background: radial-gradient(circle, #21b89f20 0%, rgba(239, 243, 248, 1) 100%);
}
.light-grad .glass {
border: 2px solid white;
box-shadow: 0 0 60px 10px rgba(0, 0, 0, .1);
background: #ffffffaa;
backdrop-filter: none;
}
.breathe-top {
padding-top: var(--gap);
}
.shadow {
box-shadow: var(--shadow);
}
.img-shadow {
filter: drop-shadow(0 0 80px #33ffcc55);
}
.drop-shadow {
border-radius: 24px;
filter: drop-shadow(0 0 60px rgba(50, 50, 50, 0.2));
}
.checks {
list-style: none;
}
.checks li {
font-size: var(--medium-text);
margin-bottom: 10px;
padding-left: 30px;
position: relative;
}
.checks.large li {
font-size: 20px;
}
.checks li:after {
content: '';
display: block;
color: var(--primary-color);
font-size: 20px;
position: absolute;
left: 0;
top: 4.5px;
mask: url('data:image/svg+xml;utf8,') no-repeat center;
mask-size: contain;
width: 18px;
height: 18px;
background-color: var(--primary-color);
}
.dark .checks li::after {
background-color: #ffffffaa;
}
.rtt {
transition: all .1s ease !important;
}
.rtt:hover,
.swiper-initialized .rtt.swiper-slide-active {
box-shadow: 0px 15px 40px 0px #0000001A;
transform: rotate(-3.5deg) !important;
background: #ffffffdd;
}
.rtt:nth-child(even):hover,
.swiper-initialized .rtt.swiper-slide-active:nth-child(even) {
transform: rotate(3.5deg) !important;
}
.swiper-initialized .rtt:hover:not(.swiper-slide-active) {
transform: none !important;
}
/**
* Main elements
*/
body {
color: var(--text-color);
font-family: "Figtree", sans-serif;
font-optical-sizing: auto;
}
main p,
main ul,
main ol,
main table {
font-size: 20px;
margin-bottom: 2em;
}
a {
color: var(--primary-color)
}
a.ext {
display: inline-flex !important;
flex-wrap: nowrap;
}
a.ext i {
font-size: 9.5px;
opacity: .75;
margin-top: 3px;
margin-left: 1px;
}
footer a.ext i {
margin-top: 6px;
opacity: .85;
}
.dark a {
color: white;
}
h1 {
font-size: 51px;
font-weight: 500;
margin-bottom: .5em;
letter-spacing: -1px;
line-height: 1.3;
-webkit-font-smoothing: auto;
}
.hero h1 span {
display: block;
font-size: 80%;
font-weight: 400;
}
@media (max-width: 767px) {
h1 {
font-size: 40px;
}
.hero h1 {
font-size: 38px;
font-weight: 600;
}
.hero h1 span {
font-size: 30px;
font-weight: 500;
height: 80px;
}
}
h2 {
font-size: 40px;
font-weight: 600;
margin-bottom: 1.25em;
letter-spacing: -1px;
line-height: 1.2;
position: relative;
}
@media (max-width: 767px) {
h2 {
font-size: 37px;
letter-spacing: -1.25px;
}
}
h2:after {
content: '';
display: block;
width: 50px;
background: var(--primary-color);
height: 4px;
position: absolute;
border-radius: 2px;
margin-top: 2px;
margin-left: 0;
bottom: -12px;
}
.center h2:after {
left: 50%;
transform: translateX(-50%);
}
section>.wrap>h2:first-child {
margin-top: -20px;
}
h3 {
font-size: 27px;
font-weight: 550;
letter-spacing: -.5px;
margin-bottom: .25em;
}
h4 {
font-size: 20px;
font-weight: 600;
-webkit-font-smoothing: auto;
}
ul,
ol {
padding-left: 0;
text-align: left;
}
ul.flex {
list-style: none;
}
/**
* Buttons
*/
.btn,
input[type=submit] {
background: var(--green-gradient);
border: 1px solid #ffffffcc;
border-color: transparent;
border-radius: 100px;
box-shadow: var(--shadow);
color: #ffffffee;
display: inline-block;
font-size: 19px;
letter-spacing: -.5px;
line-height: 1;
font-weight: 500;
padding: 13px 21px 15px;
text-decoration: none;
transition: all ease .1s;
}
.btn.light,
.btn.lighter {
background: linear-gradient(0deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .15) 50%);
border-color: var(--primary-color);
color: var(--primary-color);
font-weight: 400;
}
.btn:hover,
input[type=submit]:hover {
filter: brightness(1.1);
text-decoration: none !important;
transform: translateY(-2px);
box-shadow: 0 14px 35px rgba(0, 0, 0, 0.2) !important;
}
.btn.light:hover,
.btn.lighter:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
filter: brightness(.95);
}
.dark .btn:hover {
filter: brightness(.95);
}
@media (max-width: 767px) {
.btn {
padding-left: 18px;
padding-right: 18px;
}
}
.dark.hero .btn:not(.light):not(.lighter) {
/*
background: linear-gradient(139deg, rgba(255, 127, 80, 1) 0%, rgba(242, 100, 48, 1) 100%);
color: white;
border-color: #ffffff66;
*/
background: white;
color: var(--darker-green);
border-color: #ffffff88;
}
.dark .btn:not(.light):not(.lighter) {
background: white;
color: var(--darker-green);
border-color: #ffffff66;
}
.dark .btn.light {
background: linear-gradient(0deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .15) 50%);
border-color: #ffffffaa;
color: white;
}
.dark .btn.lighter {
background: transparent;
border-color: #ffffff99;
color: #ffffffdd;
}
.dark .btn.lighter:hover {
border-color: #fff;
color: #fff;
}
@media (max-width: 1023px) {
.dark .btn.lighter {
background: transparent;
border-color: #ffffffaa;
color: #ffffffee;
}
}
/*
.highlight .btn:not(.light) {
background: linear-gradient(139deg, rgba(255, 127, 80, 1) 0%, rgba(242, 100, 48, 1) 100%);
color: white;
border-color: #ffffff66;
}*/
header .btn {
font-size: var(--small-text);
font-weight: 400;
}
@media (min-width: 1024px) {
header .btn {
padding: 10px 17px 12px;
}
}
@media (max-width: 1023px) {
header .btn,
footer .btn {
font-size: var(--medium-text);
}
}
.btn i {
margin-top: 1px;
display: block;
float: right;
margin-left: 1px;
margin-right: -7px;
}
/*
@media (max-width: 479px) {
.btns .btn i {
display: none;
}
}
*/
/**
* Layout
*/
section,
footer {
padding: var(--breathe) 0;
position: relative;
z-index: 0;
}
main {
overflow: hidden;
}
section:not(.hero):not(.stats-bar):not(.page-head)+section {
border-top: 2px solid var(--light-grey);
}
.wrap {
margin: 0 auto;
max-width: var(--content-width);
padding: 0 var(--gutter);
position: relative;
z-index: 1;
}
.wrap.medium {
max-width: var(--content-medium);
}
.wrap.large {
max-width: var(--content-large);
}
@media (max-width: 1023px) {
.wrap.large {
max-width: var(--content-medium);
width: 100%;
}
}
.content-small {
max-width: var(--content-small);
}
p.intro {
margin-bottom: 3em;
margin-left: auto;
margin-right: auto;
max-width: 700px;
}
p.intro:last-child {
margin-bottom: 0;
}
/**
* Topbar
*/
.topbar {
border-bottom: 1px solid #97c6b952;
font-size: 14px;
position: relative;
z-index: 11;
background-color: #eef4f8;
background: var(--green-gradient);
}
.topbar .wrap {
justify-content: flex-end;
}
.topbar ul {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0 8px 0 0;
padding: 0;
}
.topbar a {
color: #fff;
display: block;
padding: 5px 11px;
text-decoration: none;
font-size: 13.5px;
}
.topbar a:hover {
color: white;
text-decoration: underline;
}
.topbar a.ext .lucide {
margin-top: 4px;
}
.topbar .topbar-langs {
border-left: 1px solid #ffffff55;
margin-left: 11px;
padding-left: 11px;
}
.topbar-langs a {
padding: 5px 6px;
text-transform: uppercase;
}
.topbar-langs li {
width: auto;
}
.topbar-langs li:last-child a {
padding-right: 0;
}
.topbar-langs li.active a {
font-weight: 700;
}
@media (max-width: 1023px) {
.topbar {
font-size: 13px;
}
}
@media (max-width: 767px) {
.topbar {
display: none;
}
.topbar-langs {
display: flex;
list-style: none;
border: 0;
margin-left: 0;
padding-left: 0;
padding-top: 1em;
}
}
/**
* Header
*/
header {
height: 96px;
margin-bottom: -96px;
padding: 37px 0 17px 0;
top: -79px;
width: 100%;
z-index: 10;
}
header .logo-light {
display: none;
}
header .logo img {
filter: drop-shadow(0 0 30px #00000055);
}
header.scrolled .logo img {
filter: drop-shadow(0 0 30px #ffffffbb);
}
header nav ul {
align-items: center;
}
@media (min-width: 1024px) {
header.scrolled .logo img {
margin-top: 1.5px;
}
header nav ul.extra {
display: none;
}
header .menu-toggle {
display: none;
}
header nav li:first-child {
display: none;
}
}
header nav a:not(.btn) {
color: var(--text-color);
display: block;
font-size: var(--small-text);
padding: 8px 17px 10px;
text-decoration: none;
}
@media (min-width: 1024px) {
header nav a:not(.btn):hover {
text-decoration: underline;
}
header nav a {
position: relative;
}
header nav a:not(.btn):hover {
text-decoration: none !important;
color: #000;
}
header nav a.active {
/*box-shadow: 0 0 20px 5px #00000011;
border-radius: 10px;
*/
color: #1d8a7e !important;
font-weight: 500;
border-radius: 10px;
}
header nav a:not(.btn):after {
content: '';
width: 0;
position: absolute;
height: 2px;
background: linear-gradient(90deg, #14b8a6, #2dd4bf);
left: 17.5px;
bottom: 1px;
/*transform: translateX(-50%);*/
transition: .25s ease;
}
header nav a:not(.btn).active:after,
header nav a:not(.btn):hover:after {
width: 30%;
}
}
@media (max-width: 1023px) {
header nav a.active {
color: var(--dark-green);
font-weight: 550;
}
}
header nav .h-t {
margin: 0 1.25em;
}
@media (min-width: 1024px) {
header nav a {
color: var(--text-color);
}
}
@media (max-width: 1023px) {
header nav a:not(.btn) {
font-size: var(--medium-text);
padding: 10px 8px;
}
}
/*
@media (min-width: 1024px) and (max-width: 1067px) {
header nav .h-t {
display: none;
}
header nav .h-t+li {
margin-left: 1.25em;
}
}*/
header.scrolled {
/*background: rgba(255, 255, 255, .75);
backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid #ffffff55;
box-shadow: var(--shadow);*/
padding: 18px 0;
position: fixed;
top: 0;
transition: all 0.5s ease;
}
header.scrolled {
height: auto;
}
header.scrolled .logo-light {
display: none;
}
header.scrolled .logo-dark {
display: block;
}
header.scrolled>.wrap {
backdrop-filter: saturate(180%) blur(20px);
box-shadow: 0 0 60px 5px #00000022;
padding: .75em 1.5em;
max-width: 970px;
border-radius: 12px;
background: #ffffffaa;
border: 1px solid #ffffff77;
}
@media (min-width: 1024px) {
header.scrolled nav a:not(.btn) {
color: var(--text-color);
padding-left: 14px;
padding-right: 14px;
letter-spacing: -.15px;
color: #084f4ef5;
}
}
@media (max-width: 1023px) {
body.nav-open {
overflow: hidden;
}
body.nav-open header {
position: fixed;
top: 0;
}
body.nav-open header:not(.scrolled) .logo {
opacity: .625;
}
header nav {
position: fixed;
top: 0;
right: 0;
width: 84%;
max-width: 340px;
height: 100vh;
background: #fff;
padding: 80px 30px 30px;
transform: translateX(calc(100% + var(--gutter)));
transition: transform 0.4s cubic-bezier(.4, 0, .2, 1);
z-index: 11;
}
header.scrolled nav {
width: calc(82.5% + (var(--gutter) * 2));
width: calc((100% + (var(--gutter) * 2)) / 100 * 82.5);
}
.menu-toggle {
display: block;
width: 40px;
height: 40px;
position: relative;
border: none;
background: transparent;
cursor: pointer;
padding: 0;
right: 1.125em;
top: .5px;
position: absolute;
z-index: 12;
}
.menu-toggle span {
position: absolute;
left: 50%;
width: 24px;
height: 2px;
background: #fff;
border-radius: 2px;
transform: translateX(-50%);
transition: all 0.35s ease;
}
.menu-toggle span:nth-child(1) {
top: 10.5px;
}
.menu-toggle span:nth-child(2) {
top: 18px;
}
.menu-toggle span:nth-child(3) {
top: 25.5px;
}
.nav-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 9;
}
#header.nav-open~.nav-overlay,
body.nav-open .nav-overlay {
opacity: 1;
pointer-events: auto;
}
.nav-open .menu-toggle span:nth-child(1) {
top: 18px;
transform: translateX(-50%) rotate(45deg);
}
.nav-open .menu-toggle span:nth-child(2) {
opacity: 0;
}
.nav-open .menu-toggle span:nth-child(3) {
top: 18px;
transform: translateX(-50%) rotate(-45deg);
}
header.scrolled .menu-toggle {
top: 50%;
transform: translateY(-50%);
transition: .25s all ease;
}
.nav-open header.scrolled .menu-toggle {
right: 0;
}
header.scrolled {
padding: calc(var(--gutter) / 2) 0;
}
header.scrolled>.wrap {
border-color: #eee;
padding: 1em 1.25em;
margin-left: calc(var(--gutter) / 2);
margin-right: calc(var(--gutter) / 2);
width: calc(100% - (var(--gutter)));
}
header.scrolled .logo img {
margin-top: -2px;
width: 150px;
}
.menu-toggle span,
header.scrolled .menu-toggle span,
.nav-open .menu-toggle span {
background: var(--darker-green);
}
header.nav-open nav {
transform: translateX(0);
}
header.scrolled.nav-open nav {
top: -20px;
right: calc(var(--gutter) * -1);
}
header nav .extra a:not(.btn) {
padding: 6px 8px;
}
header nav ul li {
width: 100%;
}
header nav li.h-t,
header nav li.h-t+li {
margin-left: 0;
margin-top: 1em;
width: auto;
}
header nav .extra {
border-top: 1px solid #eee;
margin-top: 3em;
padding-top: 1em;
opacity: .75;
list-style: none;
}
header nav .extra a {
font-size: 16px;
padding: 7px 8px;
}
}
@media (max-width: 480px) {
header.scrolled>.wrap {
box-shadow: 0 0 20px 5px #00000022;
border-color: #ddddddcc;
}
}
/**
* Footer
*/
footer {
background: linear-gradient(45deg, #13404d, #007376);
padding-bottom: 1em;
padding-top: 4em;
}
footer img {
width: 200px;
display: block;
margin-bottom: 1.5em !important;
}
footer .wrap {
max-width: 1100px;
}
@media (max-width: 1023px) {
footer {
padding-top: 2em;
}
}
footer p {
font-size: 16px;
line-height: 2;
margin-bottom: 1.5em !important;
}
@media (max-width: 1023px) {
footer p {
font-size: var(--small-text);
}
}
footer a {
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
footer .copy {
margin-top: 2.5em;
border-top: 1px solid #ffffff33;
padding-top: 12px;
opacity: .625;
}
footer .copy br {
display: none;
}
footer .copy p {
font-size: 15px;
line-height: 1.5;
}
footer .flex {
gap: 78px;
}
@media (max-width: 1179px) {
footer .flex {
gap: 62px;
}
footer .flex .flex {
padding-right: 50px;
}
}
@media (max-width: 1094px) {
footer .flex .flex {
padding-right: 50px;
}
}
@media (max-width: 1094px) and (min-width: 1024px) {
footer .stores {
flex-direction: column;
gap: 20px;
}
}
@media (max-width: 1023px) {
footer .flex {
gap: 0 10vw;
}
footer .flex .flex {
padding-right: 0;
}
footer .space-between>div:first-child {
width: 100%;
}
}
@media (max-width: 767px) {
footer .flex .flex>div+div+div {
display: flex;
gap: var(--gap);
width: 100%;
}
}
@media (max-width: 519px) {
footer .copy p br {
display: block;
}
}
/*
@media (max-width: 449px) {
footer .flex>div {
width: 100%;
}
footer p {
margin-bottom: 0 !important;
}
footer .copy p {
margin-bottom: 1.5em !important;
text-wrap: auto;
}
footer .flex .flex>div+div+div {
padding-top: 1.5em;
margin-bottom: -1em;
}
}
*/
/**
* Language selector
*/
.lang {
display: inline-block;
height: 42px;
margin-bottom: 1.5em;
}
.lang ul {
border: 1px solid white;
padding: 7px 0;
margin-bottom: .25em;
border-radius: 20px;
position: relative;
cursor: pointer;
list-style: none;
width: 136px;
}
.lang ul::after {
content: "";
position: absolute;
right: 15px;
top: 15px;
width: 16px;
height: 16px;
background: url('data:image/svg+xml;utf8,') no-repeat center / contain;
transition: transform .2s ease;
}
.lang.open ul::after {
transform: rotate(180deg);
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
.lang:hover li {
display: block;
}
.lang:hover ul::after {
transform: rotate(180deg);
}
}
/*
@media (max-width: 1023px) {
.lang {
height: 48px;
}
.lang ul {
border-radius: 80px;
padding: 6px 0 7px;
width: 148px;
}
.lang ul::after {
top: 17px;
}
.lang.open ul {
border-radius: 25px;
}
.lang ul a {
font-size: var(--medium-text);
}
}
*/
.lang li {
display: none;
}
.lang.open li,
.lang li.active {
display: block;
}
.lang li a {
display: block;
padding: 3px 34px 3px 20px;
}
.lang li.active,
.lang li.active a {
cursor: default;
}
.lang li.active a {
pointer-events: none;
}
/**
* Hero
*/
@media (min-width: 768px) {
.hero {
padding-bottom: 10em;
padding-top: 7.75em;
}
}
@media (min-width: 1024px) {
.hero {
padding-bottom: 11.75em;
padding-top: 9.5em;
}
}
.hero .content {
width: 600px;
}
.hero .content p:not(.btns) {
opacity: .9;
}
@media (min-width: 1024px) {
.hero .content p {
max-width: 500px;
}
.hero .content p.btns {
margin-bottom: 0;
padding-top: 1em;
}
}
.hero .media {
margin-right: -80px;
}
.hero .media img {
/*filter: drop-shadow(rgba(85, 255, 221, 0.267) 0px 0px 80px);*/
/*filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.35));*/
margin-bottom: -200px;
margin-top: -2em;
width: 760px;
}
@media (min-width: 1024px) {
.hero .media::after {
content: "";
position: absolute;
bottom: -65px;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 40px;
background: rgba(0, 0, 0, 0.2);
filter: blur(20px);
border-radius: 50%;
}
/*
.hero .media img {
filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.35));
}*/
}
@media (min-width: 1024px) and (max-width: 1100px) {
.hero h1 {
font-size: 42px;
}
.hero .content {
width: 540px;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.hero h1 {
font-size: 36px;
}
.hero .content {
min-width: 385px;
width: 65%;
}
.hero .media {
padding-left: 30px;
max-width: 400px;
width: 65%;
margin-bottom: -3em;
margin-top: 50px;
}
.hero .media img {
height: 420px;
}
.hero p {
font-size: 19px;
}
.hero .media img {
position: relative;
top: 50%;
transform: translateY(-50%);
width: auto;
}
}
@media (max-width: 767px) {
.hero {
text-align: center;
}
.hero h1 {
font-size: clamp(30px, 8vw, 38px);
font-weight: 600;
hyphens: none;
text-wrap: balance;
/*margin-left: -1.5em;
margin-right: -1.5em;*/
}
.hero>.wrap>.flex {
display: block;
}
.hero .content {
width: 100%;
}
.hero .btns {
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.hero .media {
margin-right: 0;
}
.hero .media img {
height: auto;
margin: 1.5em auto 0;
min-width: 430px;
width: 70%;
}
}
#changing-text {
display: block;
will-change: transform, opacity;
}
/* OUT (fast + sharp) */
.slide-out {
animation: slideOut 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
}
/* IN (slightly softer) */
.slide-in {
animation: slideIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
/* Keyframes */
@keyframes slideOut {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(125px);
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(125px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/**
* Page head
*/
.page-head {
padding-top: 8em;
padding-bottom: calc(var(--breathe) / 4 * 3);
}
.page-head:not(.light-grad) {
background: #edf8fb66 !important;
border-bottom: 1px solid #00808021;
}
/*
.page-head.light-grad {
margin-bottom: 0;
padding-bottom: calc(var(--breathe) / 4);
}
*/
.page-head.light-grad+.light-grad {
padding-top: calc(var(--breathe) / 2);
}
.page-head h1 {
font-weight: 600;
}
@media (min-width: 768px) {
.page-head:not(.kennis) h1 {
margin-left: auto;
margin-right: auto;
max-width: 700px;
}
}
/**
* Stats bar
*/
.stats-bar {
background: transparent;
padding: 0;
}
.stats-inner {
display: flex;
padding: 0;
/*background: rgba(255, 255, 255, .625);*/
backdrop-filter: saturate(150%) blur(25px);
background: rgba(255, 255, 255, .125) !important;
}
@media (min-width: 768px) {
.stats-inner {
justify-content: center;
height: 150px;
margin: -75px auto 0;
max-width: 860px;
}
}
.stat-item {
flex: 1;
text-align: center;
padding: 2em 1.5em;
position: relative;
}
.stat-item+.stat-item::before {
content: '';
position: absolute;
left: 0;
top: 25%;
height: 50%;
width: 1px;
background: #23908d42;
}
.stat-number {
font-size: 36px;
color: var(--primary-color);
line-height: 1.1;
display: block;
color: #0f4b4cd4;
color: #092526cc;
font-weight: 600;
-webkit-font-smoothing: auto;
}
@media (max-width: 1023px) {
.stat-number {
font-size: 32px;
}
.stat-item {
padding: 2em 1.3em;
}
}
@media (max-width: 767px) {
.stats-bar {
height: 148px;
margin-top: calc(148px / -2);
}
.stats-inner {
border-radius: 0;
margin-left: calc(var(--gutter) * -1);
margin-right: calc(var(--gutter) * -1);
overflow: auto;
}
.stat-number {
font-size: 28px;
}
.stat-item {
min-width: 170px;
}
}
.stat-label {
font-size: 16px;
color: #596563;
line-height: 1.3;
margin-top: .35em;
display: block;
}
/**
* Reveal
*/
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .6s ease, transform .6s ease;
}
.delay {
transition-delay: .4s;
}
.delay-more {
transition-delay: .8s;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/**
* How it works
*/
#how-it-works .step-buttons {
list-style: none;
margin-bottom: 2em;
padding-left: 0;
width: 382px;
z-index: 1;
}
#how-it-works .step-buttons li {
cursor: pointer;
display: flex;
padding: 23.5px;
position: relative;
transition: none;
}
#how-it-works .step-buttons li:not(.active) {
background: transparent;
backdrop-filter: none;
box-shadow: none;
opacity: .75;
}
#how-it-works .step-buttons li:hover {
opacity: 1;
}
#how-it-works .step-buttons li.active {
transition: all 1s ease;
}
#how-it-works .step-buttons p {
font-size: var(--small-text);
}
#how-it-works .counter {
align-items: center;
background: #cfe7e5;
border-radius: 100px;
color: var(--dark-green);
display: flex;
font-size: 22px;
font-weight: 700;
height: 40px;
justify-content: center;
line-height: 1;
margin-right: .8em;
text-align: center;
width: 40px;
}
#how-it-works li.active .counter {
background-color: var(--primary-color);
color: white;
}
#how-it-works .steps {
position: relative;
}
#how-it-works .steps .step-videos {
position: absolute;
margin-top: 24px;
position: absolute;
z-index: -1;
}
#how-it-works .steps .step-videos video {
display: none;
}
#how-it-works .steps .step-videos video.active {
display: block;
}
@media (min-width: 1201px) {
#how-it-works .steps .step-videos {
right: -220px;
top: -91px;
width: calc(100% - 85px);
}
}
/*
@media (min-width: 1201px) and (max-width: 1440px) {
#how-it-works .steps .step-videos {
right: -150px;
top: -84px;
width: calc(100% - 169px);
}
}*/
@media (min-width: 1024px) and (max-width: 1200px) {
#how-it-works .steps {
margin-top: -2em;
margin-bottom: -2em;
}
#how-it-works .step-buttons {
margin-top: 32px;
width: 332px;
}
#how-it-works .step-buttons li {
padding: 18px;
}
#how-it-works .step-buttons h4 {
font-size: 18px;
}
#how-it-works .step-buttons p {
line-height: 1.3;
}
#how-it-works .steps .step-videos {
right: -150px;
top: 50%;
width: calc(100% - 120px);
transform: translateY(-50%);
margin-top: 0;
}
}
@media (max-width: 1023px) {
#how-it-works .counter {
margin-right: .5em;
}
#how-it-works .step-buttons li {
align-items: center;
border-radius: 100px;
padding: 10px;
}
#how-it-works .step-buttons h4 {
font-size: var(--medium-text);
}
#how-it-works .step-buttons p {
display: none;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
#how-it-works .step-buttons {
padding-right: 1em;
width: 320px;
}
#how-it-works .steps .step-videos {
width: calc(100% - 155px);
right: -110px;
top: -70px;
}
}
@media (max-width: 767px) {
#how-it-works .step-buttons {
margin-bottom: 0;
}
#how-it-works .steps .step-videos {
display: block;
position: static;
width: calc(100% + 132px);
margin-left: -66px;
margin-right: -66px;
margin-top: 10px;
margin-bottom: -2em;
}
}
/**
* Tabs
*/
.tabs .tab {
display: none;
margin: 0 auto;
}
.tabs .tab.active {
display: block;
}
.tab-nav {
background: #ffffffaa;
border-radius: 100px;
display: inline-flex;
flex-grow: 0;
list-style: none;
padding: 8px 10px;
position: relative;
margin-bottom: 2em;
box-shadow: 0 0 60px 10px rgba(0, 0, 0, .09);
}
.page-head .tab-nav {
margin-bottom: 0;
}
.tab img.media {
/*filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.25));*/
width: 960px;
}
.tab:nth-child(3) img.media {
filter: none;
margin-bottom: -19px;
width: 680px;
}
.tab:nth-child(4) img.media {
margin-bottom: 9px;
width: 740px;
}
@media (max-width: 1023px) {
.tab-nav-scroll {
width: 100vw;
margin-left: calc(50% - 50vw);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-top: 4em;
padding-bottom: 4em;
margin-top: -4em;
margin-bottom: -4em;
}
.tab-nav-scroll::-webkit-scrollbar {
display: none;
}
.tab-nav-wrap {
display: inline-block;
padding-left: 1.5em;
padding-right: 1.5em;
}
.tab-nav {
display: inline-flex;
width: max-content;
max-width: none;
white-space: nowrap;
box-sizing: border-box;
}
.tab-link {
flex: 0 0 auto;
}
.tab .media img {
width: 100%;
}
}
.tab-link {
color: #14464a;
position: relative;
z-index: 2;
padding: 9px 24px;
text-decoration: none;
white-space: nowrap;
font-size: 18px;
}
.tab-link.active {
color: white;
text-shadow: 0 0 25px #000000aa;
}
.pill {
position: absolute;
z-index: 1;
border-radius: 999px;
background: var(--primary-color);
transition: all 0.3s ease;
box-shadow: 0px 0px 50px 10px #00000011;
border: 1px solid white;
}
.reorder-tabs .tab {
padding: calc(var(--breathe) / 3 * 2) 0 calc(var(--breathe) / 4 * 3);
position: relative;
}
.reorder-tabs .tab:first-child {
margin-top: -2em;
padding-top: 0;
}
.reorder-tabs .tab:last-child {
padding-bottom: 0;
}
.reorder-tabs .tab+.tab:before {
content: '';
display: block;
width: 100%;
background: #eee;
height: 1.5px;
position: absolute;
border-radius: 2px;
top: 0;
}
.reorder-tabs .tab+.tab .flex>div:first-child {
order: 2;
}
.reorder-tabs .tab+.tab+.tab .flex>div:first-child {
order: 0;
}
/**
* Boxes
*/
.boxes {
list-style: none;
max-width: 940px;
padding-left: 0;
}
.boxes.content-small {
max-width: var(--content-small);
}
.boxes p {
font-size: var(--small-text);
}
.boxes.icons li,
.boxes.checks li {
padding-left: 74px;
position: relative;
}
.boxes.icons li .icon,
.boxes.checks li::after {
color: var(--primary-color);
position: absolute;
left: 27px;
top: 27px;
width: 27px;
height: 27px;
}
.boxes.checks li::after {
top: 29px;
}
.boxes.icons li .icon {
filter: brightness(115%);
}
.boxes.checks li {
font-size: 20px;
margin-bottom: 0;
}
.boxes.icons li h4,
.boxes.checks li h4 {
margin-top: -15px;
}
.boxes.icons li p,
.boxes.checks li p {
margin-bottom: -15px;
}
.boxes:not(.icons):not(.checks) h4 {
margin-top: -7.5px;
}
.boxes:not(.icons):not(.checks) p {
margin-bottom: -7.5px;
}
.boxes .pull {
display: block;
font-size: var(--medium-text);
margin: -10px 0 -10px -5px;
}
.start-card {
margin: 0 auto 32px;
max-width: 880px;
}
.pricing-module {
background: rgba(255, 255, 255, .72);
border: 1px solid #ffffffcc;
border-radius: 28px;
box-shadow: 0 24px 80px rgba(19, 85, 81, .14);
display: grid;
grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
margin: 3.2em auto 0;
max-width: 1040px;
overflow: hidden;
text-align: left;
}
.pricing-free {
background:
radial-gradient(circle at 90% 0%, rgba(255, 255, 255, .56), transparent 36%),
linear-gradient(165deg, rgba(8, 148, 150, .14), rgba(33, 184, 159, .22));
border-right: 1px solid rgba(33, 184, 159, .16);
padding: clamp(28px, 4vw, 42px);
}
.pricing-free h3,
.pricing-ranges h3 {
font-size: 28px;
line-height: 1.2;
margin-bottom: 12px;
}
.pricing-free>p:not(.price-pill) {
color: rgba(44, 50, 50, .72);
font-size: var(--small-text);
}
.pricing-free .checks {
margin-top: 24px;
}
.pricing-free .checks li {
font-size: 17px;
margin-bottom: 12px;
}
.pricing-ranges {
padding: clamp(28px, 4vw, 42px);
}
.pricing-ranges-head {
margin-bottom: 18px;
max-width: 620px;
}
.pricing-row {
align-items: center;
border-top: 1px solid rgba(44, 50, 50, .12);
display: grid;
gap: 24px;
grid-template-columns: minmax(0, 1fr) auto;
min-height: 88px;
padding: 18px 0;
}
.pricing-row strong:not(.pricing-amount) {
display: block;
font-size: 22px;
line-height: 1.25;
}
.pricing-row span {
color: rgba(44, 50, 50, .68);
display: block;
font-size: 16px;
margin-top: 4px;
}
.pricing-amount {
align-items: center;
background: var(--green-gradient);
border-radius: 999px;
color: white;
display: inline-flex;
font-size: 24px;
justify-content: center;
line-height: 1;
min-width: 82px;
padding: 12px 18px;
}
.pricing-screen {
filter: drop-shadow(0 26px 45px rgba(19, 85, 81, .18));
margin-top: 2.2em;
max-width: 500px;
width: 100%;
}
.addon-showcase,
.enterprise-callout {
display: grid;
gap: clamp(32px, 6vw, 72px);
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}
.enterprise-callout {
align-items: center;
}
.addon-showcase h2,
.enterprise-callout h2 {
text-align: left;
}
.addon-showcase h2:after,
.enterprise-callout h2:after {
left: 0;
transform: none;
}
/*
.addon-rows {
border-top: 1px solid rgba(44, 50, 50, .14);
}
*/
.addon-row {
align-items: flex-start;
display: grid;
gap: 22px;
grid-template-columns: 58px minmax(0, 1fr);
}
.addon-row+.addon-row {
border-top: 1px solid rgba(44, 50, 50, .14);
padding-top: 30px;
margin-top: 30px;
}
.addon-icon {
background: rgba(33, 184, 159, .11);
border: 1px solid rgba(33, 184, 159, .18);
border-radius: 16px;
height: 58px;
padding: 13px;
width: 58px;
}
.addon-row h3 {
font-size: 24px;
margin-bottom: 10px;
}
.price-pill {
align-items: center;
background: rgba(33, 184, 159, .12);
border: 1px solid rgba(33, 184, 159, .28);
border-radius: 999px;
color: var(--darker-green);
display: inline-flex;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 14px;
padding: 8px 14px;
}
.dark .price-pill,
.banner .price-pill {
background: rgba(255, 255, 255, .16);
border-color: rgba(255, 255, 255, .32);
color: #fff;
}
.enterprise-callout {
background: rgba(255, 255, 255, .72);
margin: 0 auto;
max-width: 1040px;
}
.enterprise-callout .btns {
margin-top: 1.4em;
}
.enterprise-icons {
display: flex;
gap: 12px;
margin-bottom: 26px;
}
.enterprise-icons img {
background: rgba(33, 184, 159, .11);
border: 1px solid rgba(33, 184, 159, .18);
border-radius: 16px;
height: 54px;
padding: 12px;
width: 54px;
}
.audience-links {
font-size: var(--medium-text);
margin: 34px auto 0;
max-width: 820px;
text-align: center;
}
.audience-links a {
color: var(--darker-green);
font-weight: 600;
text-decoration-color: rgba(33, 184, 159, .45);
text-underline-offset: 4px;
}
.exit-hero .wrap {
text-align: left;
}
.exit-hero h1::after {
left: 0;
transform: none;
}
.exit-hero .media {
display: flex;
justify-content: center;
}
.exit-visual {
align-items: center;
display: grid;
grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
max-width: 620px;
position: relative;
width: 100%;
}
.exit-report {
background: rgba(255, 255, 255, .82);
border: 1px solid rgba(255, 255, 255, .9);
border-radius: 22px;
box-shadow: 0 26px 70px rgba(19, 85, 81, .14);
min-height: 270px;
padding: 28px;
}
.exit-report.after {
margin-top: 74px;
}
.exit-report span {
color: var(--darker-green);
display: block;
font-size: 14px;
font-weight: 700;
margin-bottom: 18px;
text-transform: uppercase;
}
.exit-report strong {
display: block;
font-size: 26px;
line-height: 1.2;
margin-bottom: 12px;
}
.exit-report p {
color: rgba(44, 50, 50, .72);
font-size: 16px;
line-height: 1.5;
margin-bottom: 22px;
}
.exit-report div {
background: rgba(33, 184, 159, .12);
border-radius: 999px;
height: 12px;
margin-top: 12px;
width: 82%;
}
.exit-report div:last-child {
width: 58%;
}
.exit-compare-icon {
align-items: center;
background: var(--green-gradient);
border: 8px solid #fff;
border-radius: 999px;
box-shadow: 0 18px 40px rgba(19, 85, 81, .18);
display: flex;
height: 72px;
justify-content: center;
margin-left: -10px;
margin-right: -10px;
position: relative;
z-index: 2;
}
.exit-compare-icon img {
filter: brightness(0) invert(1);
height: 30px;
width: 30px;
}
.exit-flow,
.exit-pricing {
display: grid;
gap: clamp(32px, 6vw, 76px);
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}
.exit-steps {
counter-reset: exitStep;
display: grid;
gap: 0;
}
.exit-steps article {
border-top: 1px solid rgba(44, 50, 50, .12);
display: grid;
gap: 22px;
grid-template-columns: 52px minmax(0, 1fr);
padding: 26px 0;
}
.exit-steps article:last-child {
border-bottom: 1px solid rgba(44, 50, 50, .12);
}
.exit-steps span {
align-items: center;
background: rgba(33, 184, 159, .12);
border: 1px solid rgba(33, 184, 159, .24);
border-radius: 999px;
color: var(--darker-green);
display: flex;
font-size: 20px;
font-weight: 800;
height: 52px;
justify-content: center;
width: 52px;
}
.exit-steps h3 {
font-size: 24px;
margin-bottom: 6px;
}
.exit-steps p {
font-size: 16px;
margin-bottom: 0;
}
.exit-included-panel {
padding: 26px;
}
.exit-included-panel img {
filter: drop-shadow(0 24px 48px rgba(19, 85, 81, .16));
margin: 0 auto 24px;
width: 100%;
}
.exit-note {
border-top: 1px solid rgba(44, 50, 50, .12);
padding-top: 22px;
}
.exit-note strong {
display: block;
font-size: 22px;
margin-bottom: 6px;
}
.exit-note p {
font-size: 16px;
margin-bottom: 0;
}
.exit-options {
display: grid;
gap: clamp(24px, 4vw, 36px);
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 3.2em;
text-align: left;
}
.exit-options article {
padding: clamp(28px, 4vw, 42px);
}
.exit-options article>span {
align-items: center;
background: rgba(33, 184, 159, .12);
border: 1px solid rgba(33, 184, 159, .28);
border-radius: 999px;
color: var(--darker-green);
display: inline-flex;
font-size: 15px;
font-weight: 700;
margin-bottom: 18px;
padding: 8px 14px;
}
.exit-options h3 {
font-size: 30px;
line-height: 1.18;
margin-bottom: 14px;
}
.exit-options .checks {
margin-top: 24px;
}
.exit-options .checks li {
font-size: 17px;
margin-bottom: 12px;
}
.exit-pricing {
align-items: center;
background: rgba(255, 255, 255, .76);
border: 1px solid #fff;
border-radius: 28px;
box-shadow: 0 24px 80px rgba(19, 85, 81, .12);
padding: clamp(28px, 5vw, 56px);
}
.exit-pricing-lines {
border-left: 1px solid rgba(44, 50, 50, .12);
padding-left: clamp(26px, 4vw, 50px);
}
.exit-pricing-lines div {
align-items: flex-start;
border-bottom: 1px solid rgba(44, 50, 50, .12);
display: grid;
gap: 20px;
grid-template-columns: 150px minmax(0, 1fr);
padding: 26px 0;
}
.exit-pricing-lines strong {
color: var(--darker-green);
font-size: 28px;
line-height: 1.2;
}
.exit-pricing-lines span {
color: rgba(44, 50, 50, .72);
font-size: 17px;
line-height: 1.45;
}
.exit-pricing-lines a {
display: inline-block;
font-weight: 700;
margin-top: 32px;
}
.exit-audiences {
margin-top: 3em;
}
.exit-audiences article {
border-top: 4px solid rgba(33, 184, 159, .65);
padding-top: 24px;
text-align: left;
}
.exit-audiences h3 {
font-size: 20px;
margin-bottom: 14px;
}
.damage-hero .wrap {
text-align: left;
}
.damage-hero h1::after {
left: 0;
transform: none;
}
.damage-hero-img {
border-radius: 28px;
box-shadow: 0 30px 80px rgba(19, 85, 81, .18);
width: min(520px, 100%);
}
.damage-included,
.damage-report-preview {
align-items: center;
display: grid;
gap: clamp(32px, 6vw, 76px);
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}
.damage-status {
display: grid;
gap: 16px;
}
.damage-status article {
align-items: center;
background: rgba(255, 255, 255, .78);
border: 1px solid rgba(255, 255, 255, .9);
border-radius: 20px;
box-shadow: 0 18px 50px rgba(19, 85, 81, .1);
display: grid;
gap: 18px;
grid-template-columns: 140px minmax(0, 1fr);
padding: 22px 26px;
}
.damage-status article.highlight {
background: var(--green-gradient);
color: #fff;
}
.damage-status strong {
color: var(--darker-green);
font-size: 20px;
}
.damage-status article.highlight strong {
color: #fff;
}
.damage-status span {
color: rgba(44, 50, 50, .72);
font-size: 18px;
}
.damage-status article.highlight span {
color: rgba(255, 255, 255, .88);
}
.damage-estimate {
display: grid;
gap: clamp(22px, 4vw, 34px);
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 3.2em;
text-align: left;
}
.damage-estimate article {
padding: clamp(28px, 4vw, 42px);
}
.damage-estimate span {
color: var(--darker-green);
display: block;
font-size: 15px;
font-weight: 800;
letter-spacing: .08em;
margin-bottom: 18px;
}
.damage-estimate h3 {
font-size: 28px;
margin-bottom: 12px;
}
.damage-table {
padding: clamp(24px, 4vw, 38px);
}
.damage-table-head,
.damage-table-row {
align-items: start;
display: grid;
gap: 18px;
grid-template-columns: minmax(0, 1fr) minmax(130px, auto);
}
.damage-table-head {
border-bottom: 1px solid rgba(44, 50, 50, .14);
padding-bottom: 22px;
}
.damage-table-head span {
color: var(--darker-green);
font-size: 17px;
font-weight: 800;
text-transform: uppercase;
}
.damage-table-head strong {
color: var(--darker-green);
font-size: 30px;
line-height: 1.1;
text-align: right;
}
.damage-table-summary {
border-bottom: 1px solid rgba(44, 50, 50, .1);
color: rgba(44, 50, 50, .72);
font-size: 16px;
line-height: 1.5;
margin-bottom: 0;
padding: 18px 0 20px;
}
.damage-table-row {
border-bottom: 1px solid rgba(44, 50, 50, .1);
padding: 18px 0;
}
.damage-table-row:last-child {
border-bottom: 1px solid rgba(44, 50, 50, .1);
}
.damage-table-row span,
.damage-table-total span {
color: var(--body);
display: block;
font-size: 18px;
font-weight: 800;
line-height: 1.25;
}
.damage-table-row p {
color: rgba(44, 50, 50, .72);
font-size: 14px;
line-height: 1.45;
margin: 6px 0 7px;
}
.damage-table-row small {
color: var(--darker-green);
display: block;
font-size: 13px;
font-weight: 700;
line-height: 1.35;
margin-top: 5px;
}
.damage-table-row em {
color: rgba(44, 50, 50, .58);
display: block;
font-size: 13px;
line-height: 1.35;
}
.damage-table-row strong {
color: var(--darker-green);
font-size: 17px;
line-height: 1.3;
text-align: right;
white-space: nowrap;
}
.damage-table-total {
align-items: center;
display: grid;
gap: 18px;
grid-template-columns: minmax(0, 1fr) auto;
padding-top: 20px;
}
.damage-table-total strong {
color: var(--darker-green);
font-size: 22px;
text-align: right;
white-space: nowrap;
}
.damage-audiences article {
border-top-color: rgba(3, 176, 135, .9);
}
.features-overview-head {
margin: 0 auto 2.5em;
max-width: 760px;
}
.features-final-cta .banner {
margin-top: 0;
}
.about-hero h1 {
font-size: 56px;
}
.about-hero-copy {
margin: 0 auto;
max-width: 920px;
}
.about-story,
.about-values {
align-items: center;
display: grid;
gap: clamp(32px, 6vw, 76px);
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}
.about-principles h3 {
font-size: 28px;
margin-bottom: 22px;
}
.about-team-grid {
display: grid;
gap: clamp(20px, 3vw, 28px);
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 3.2em;
text-align: left;
}
.about-team-grid article {
padding: 28px;
}
.about-team-marker {
align-items: center;
background: rgba(33, 184, 159, .12);
border: 1px solid rgba(33, 184, 159, .24);
border-radius: 999px;
color: var(--darker-green);
display: inline-flex;
font-size: 15px;
font-weight: 800;
height: 42px;
justify-content: center;
margin-bottom: 18px;
width: 42px;
}
.about-team-grid h3 {
font-size: 24px;
line-height: 1.2;
margin-bottom: 10px;
}
.about-team-grid p {
color: rgba(44, 50, 50, .72);
font-size: 16px;
line-height: 1.5;
margin-bottom: 0;
}
.about-workflow {
align-items: flex-start;
}
.about-proof-list {
display: grid;
gap: 16px;
}
.about-proof-list article {
background: rgba(255, 255, 255, .78);
border: 1px solid rgba(255, 255, 255, .9);
border-radius: 20px;
box-shadow: 0 18px 50px rgba(19, 85, 81, .1);
padding: 24px 28px;
}
.about-proof-list strong {
color: var(--darker-green);
display: block;
font-size: 21px;
line-height: 1.25;
margin-bottom: 8px;
}
.about-proof-list span {
color: rgba(44, 50, 50, .72);
display: block;
font-size: 16px;
line-height: 1.5;
}
.about-value-list {
display: grid;
gap: 0;
}
.about-value-list article {
border-top: 1px solid rgba(44, 50, 50, .14);
display: grid;
gap: 22px;
grid-template-columns: 52px minmax(0, 1fr);
padding: 26px 0;
}
.about-value-list article:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.about-value-list article:first-child {
padding-top: 0;
border-top: 0;
}
.about-value-list span {
align-items: center;
background: rgba(33, 184, 159, .12);
border: 1px solid rgba(33, 184, 159, .24);
border-radius: 999px;
color: var(--darker-green);
display: flex;
font-size: 18px;
font-weight: 800;
height: 52px;
justify-content: center;
width: 52px;
}
.about-value-list h3 {
font-size: 24px;
margin-bottom: 6px;
}
.about-value-list p {
font-size: 16px;
margin-bottom: 0;
}
.features-overview-head h2 {
font-size: 32px;
margin-bottom: .7em;
}
.features-overview-head h2::after {
width: 56px;
}
.features-overview-head p {
color: rgba(44, 50, 50, .72);
font-size: var(--medium-text);
margin-bottom: 0;
}
.features-overview {
display: grid;
gap: 0 34px;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0 auto;
max-width: 1120px;
padding: 30px 34px;
background: rgba(255, 255, 255, .82);
border: 1px solid rgba(255, 255, 255, .95);
border-radius: 26px;
box-shadow: 0 22px 70px rgba(19, 85, 81, .1);
}
.features-overview article {
background: transparent;
border-top: 1px solid rgba(44, 50, 50, .1);
box-shadow: none;
min-height: 0;
padding: 18px 0 18px 24px;
position: relative;
}
.features-overview article:nth-child(-n+3) {
border-top: 0;
padding-top: 0;
}
.features-overview article:nth-last-child(-n+3) {
padding-bottom: 0;
}
.features-overview article::before {
background: var(--teal);
border-radius: 999px;
content: "";
height: 8px;
left: 0;
position: absolute;
top: 26px;
width: 8px;
}
.features-overview article:nth-child(-n+3)::before {
top: 8px;
}
.features-overview strong {
color: var(--darker-green);
display: block;
font-size: 18px;
line-height: 1.25;
margin-bottom: 5px;
}
.features-overview span {
color: rgba(44, 50, 50, .72);
display: block;
font-size: 15px;
line-height: 1.45;
}
.features-core,
.feature-strip,
.feature-workflow {
align-items: center;
display: grid;
gap: clamp(32px, 6vw, 76px);
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}
.features-core-list,
.feature-strip-list {
display: grid;
gap: 16px;
}
.features-core-list article,
.feature-strip-list article {
background: rgba(255, 255, 255, .78);
border: 1px solid rgba(255, 255, 255, .9);
border-radius: 20px;
box-shadow: 0 18px 50px rgba(19, 85, 81, .1);
padding: 24px 28px;
}
.features-core-list strong,
.feature-strip-list h3 {
display: block;
font-size: 22px;
line-height: 1.25;
margin-bottom: 8px;
}
.features-core-list span,
.feature-strip-list p {
color: rgba(44, 50, 50, .72);
font-size: 16px;
line-height: 1.5;
margin-bottom: 0;
}
.feature-link-grid {
display: grid;
gap: clamp(24px, 4vw, 36px);
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 3.2em;
text-align: left;
}
.feature-link-card {
padding: clamp(28px, 4vw, 42px);
}
.feature-link-card>span {
align-items: center;
background: rgba(33, 184, 159, .12);
border: 1px solid rgba(33, 184, 159, .28);
border-radius: 999px;
color: var(--darker-green);
display: inline-flex;
font-size: 15px;
font-weight: 700;
margin-bottom: 18px;
padding: 8px 14px;
}
.feature-link-card h3 {
font-size: 30px;
line-height: 1.18;
margin-bottom: 14px;
}
.feature-link-card a {
display: inline-block;
font-weight: 700;
margin-top: 10px;
}
.feature-workflow .media img {
margin-left: auto;
margin-right: auto;
max-width: 520px;
}
@media (max-width: 767px) {
.boxes {
display: flex;
flex-wrap: wrap;
gap: var(--gap);
}
.boxes.grid>li {
width: 100%;
}
.boxes.icons>li {
display: block;
padding: calc(var(--gutter)/2);
text-align: center;
width: calc(50% - calc(var(--gap) / 2))
}
.boxes.icons li .icon {
margin: 0 auto .5em;
position: static;
}
.boxes.icons h4 {
font-size: var(--small-text);
font-weight: 400;
margin: 0 !important;
line-height: 1.4;
}
.boxes.icons p {
display: none;
}
.boxes:not(.icons):not(.checks) li {
text-align: center;
}
.boxes:not(.icons):not(.checks) {
gap: var(--gutter);
}
.boxes:not(.icons):not(.checks) li h4 {
font-size: 22px;
line-height: 1.3;
margin-bottom: .5em;
}
.boxes:not(.icons):not(.checks) h4 {
margin-top: -5px;
}
.boxes:not(.icons):not(.checks) p {
margin-bottom: -5px;
}
}
@media (max-width: 1023px) {
.addon-showcase,
.enterprise-callout,
.about-story,
.about-values {
grid-template-columns: 1fr;
}
.about-team-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pricing-module {
grid-template-columns: 1fr;
}
.pricing-free {
border-bottom: 1px solid rgba(33, 184, 159, .16);
border-right: 0;
}
.pricing-ranges-head {
grid-template-columns: 1fr;
}
}
.exit-hero h1 {
font-size: 40px;
}
@media (min-width: 768px) {
.exit-hero.page-head h1::after {
left: 0;
transform: none;
}
}
@media (max-width: 767px) {
.prices .grid.two {
gap: 0;
grid-template-columns: 1fr;
}
.pricing-module {
border-radius: 22px;
margin-top: 2.4em;
}
.pricing-row {
gap: 14px;
grid-template-columns: 1fr;
}
.pricing-amount {
justify-self: flex-start;
}
.addon-row {
grid-template-columns: 1fr;
}
.pricing-screen {
margin-left: auto;
margin-right: auto;
}
.exit-hero {
padding-bottom: 4.2em;
}
.exit-hero h1 {
font-size: 32px;
line-height: 1.16;
}
.exit-hero .media {
display: none;
}
.damage-hero h1 {
font-size: 32px;
line-height: 1.16;
}
.damage-hero .media {
display: none;
}
.features-hub-hero h1 {
font-size: 32px;
line-height: 1.16;
}
.about-hero h1 {
font-size: 32px;
line-height: 1.16;
}
.about-team-grid {
grid-template-columns: 1fr;
}
.about-team-grid article {
padding: 24px;
}
.about-value-list article {
gap: 16px;
grid-template-columns: 42px minmax(0, 1fr);
}
.about-value-list span {
font-size: 15px;
height: 42px;
width: 42px;
}
.features-overview-section {
padding-bottom: 3.5em;
}
.features-overview {
gap: 0;
grid-template-columns: 1fr;
padding: 24px;
}
.features-overview-head h2 {
font-size: 28px;
}
.features-overview article {
border-top: 1px solid rgba(44, 50, 50, .1);
min-height: 0;
padding: 16px 0 16px 24px;
}
.features-overview article:first-child {
border-top: 0;
padding-top: 0;
}
.features-overview article:nth-child(-n+3) {
border-top: 1px solid rgba(44, 50, 50, .1);
padding-top: 16px;
}
.features-overview article:nth-last-child(-n+3) {
padding-bottom: 16px;
}
.features-overview article::before,
.features-overview article:nth-child(-n+3)::before {
top: 24px;
}
.features-overview article:first-child::before {
top: 8px;
}
.exit-visual {
grid-template-columns: 1fr;
gap: 18px;
margin-top: 2em;
}
.exit-report,
.exit-report.after {
margin-top: 0;
min-height: 0;
}
.exit-compare-icon {
height: 62px;
justify-self: center;
margin: -8px 0;
width: 62px;
}
.exit-flow,
.exit-pricing,
.exit-options,
.damage-included,
.damage-report-preview,
.damage-estimate,
.features-core,
.feature-strip,
.feature-workflow,
.feature-link-grid {
grid-template-columns: 1fr;
}
.feature-workflow.swap .media {
order: 2;
}
.damage-status article {
grid-template-columns: 1fr;
}
.exit-pricing-lines {
border-left: 0;
border-top: 1px solid rgba(44, 50, 50, .12);
padding-left: 0;
padding-top: 10px;
}
.exit-pricing-lines div {
grid-template-columns: 1fr;
}
.exit-steps article {
grid-template-columns: 44px minmax(0, 1fr);
}
.exit-steps span {
font-size: 18px;
height: 44px;
width: 44px;
}
}
/**
* Cards
*/
.card {
border: 1.5px solid white;
font-size: var(--small-text);
padding: 20px 28px 30px;
position: relative;
text-align: left;
transition-property: unset !important;
}
.card:first-child {
z-index: 1;
}
.card p,
.card li {
font-size: var(--medium-text);
letter-spacing: -.25px;
}
.card p {
margin-bottom: 1.25em;
opacity: .75;
}
.card ul {
margin-bottom: 1.75em;
}
.card.highlight {
background: linear-gradient(45deg, #235967, #21b8aa);
background: linear-gradient(165deg, #008690 0%, #0f8789ee 32.5%, #1dc4aeff 66%, #1dc4aeff 71%, #14847e 100%);
border-color: #ffffffdd;
box-shadow: 0 0 60px 10px #0894964d;
}
.card.border {
border-color: var(--primary-color);
}
/**
* Pricing cards
*/
.prices .pricebg {
margin-bottom: 0;
background: #ffffff22;
border-radius: 100px;
padding: 1px 7px;
margin-top: -3px;
font-weight: 500;
background: #ffffff22;
border: 1px solid #ffffff77;
}
@media (min-width: 1024px) {
.prices .swiper-slide {
flex-grow: 1;
flex-shrink: 0;
margin-right: 0 !important;
max-width: 320px;
width: calc(33.333% - 27px) !important;
}
}
@media (min-width: 1120px) {
.prices .swiper-slide {
max-width: 332px;
}
}
.has-tag p {
padding-right: 30px;
}
@media (max-width: 400px) {
.has-tag p {
padding-right: 10px;
}
}
.has-tag::before,
.has-tag::after {
content: '';
display: block;
width: 100%;
height: 100%;
/*background: #09a245;*/
background: rgb(168 67 28);
z-index: -1;
position: absolute;
top: 0;
right: -20px;
border-top-right-radius: 24px;
z-index: -1;
}
.has-tag:before {
height: 4px;
top: -4px;
right: 22px;
width: 100px;
}
.has-tag::after {
height: 100px;
right: -4px;
top: 22px;
width: 4px;
}
.price-tag {
position: absolute;
right: -4px;
top: -4px;
width: 126px;
height: 126px;
overflow: hidden;
border-top-right-radius: 22px;
}
.price-tag .inner {
/*background: #0fc29f;*/
/*background: linear-gradient(370deg, #1cc4ae, #22aebb);*/
/*background: linear-gradient(370deg, #1cc4ae, #10ffb1);*/
/*background: linear-gradient(156deg, #e7af10, rgb(242 88 48));*/
background: linear-gradient(156deg, #ff8349, rgb(255 109 71));
padding: 1em;
transform: rotate(45deg);
text-align: center;
position: absolute;
top: -10px;
right: -70px;
width: 210px;
text-align: center;
height: 84px;
padding-top: 23px;
box-shadow: 0 0 5px 0px #00000033;
text-shadow: 0 0 10px #00000044;
}
.price-tag span {
display: block;
}
.price-tag .label {
font-size: 15px;
}
.price-tag .price {
font-size: 26px;
font-weight: 700;
margin-top: -6px;
}
/**
* Quotes
*/
.quote {
max-width: 320px;
padding-bottom: 90px;
position: relative;
}
.quote:before {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 27px;
font-size: 70px;
border-radius: 50%;
width: 44px;
height: 44px;
line-height: 85px;
font-family: sans-serif;
color: white;
background-image: url(../images/quote.svg);
background-size: cover;
background-repeat: no-repeat;
}
.quote p {
font-size: var(--medium-text);
}
/**
* Banner
*/
.banner {
background: url(../images/arrows.svg), linear-gradient(0deg, rgb(17 195 164), rgb(2 134 137 / 90%)),
/* base gradient */
linear-gradient(42.64deg, #083934 0%, #08bfae 57.7588%, #000000 100%);
background-size: auto 100%, auto, auto;
background-position: 436px center, 0 0, 0 0;
background-repeat: no-repeat, no-repeat, no-repeat;
border-radius: 30px;
position: relative;
max-width: none;
padding: 0;
border: 0;
border: 1px solid #e9eff3;
box-shadow: 0 0 80px 15px rgba(0, 0, 0, .19);
padding: var(--gutter);
}
.banner p {
font-size: 18px;
}
.banner h2 {
margin-bottom: .3em;
}
.banner h2:after {
display: none;
}
.banner .media,
.banner .video {
position: relative;
}
.banner.video .content {
width: 620px;
}
.banner.video .media {
width: calc(100% - 620px);
}
.banner.video .media iframe {
border-radius: 20px;
box-shadow: var(--shadow);
aspect-ratio: 16 / 9;
width: 90%;
border: 5px solid #ffffffaa;
margin: .5em;
height: auto;
}
.pull-next+.pull-up .banner {
margin-top: 0;
}
@media (min-width: 768px) and (max-width: 1023px) {
.banner {
height: 334px;
}
.pull-up .banner {
margin-bottom: calc(334px / -2);
}
.pull-up+section {
padding-top: calc(var(--breathe) + calc(334px / 2));
}
.pull-next {
padding-bottom: calc(var(--breathe) + 148px + 20px);
}
.pull-next+.pull-up {
margin-top: calc(334px / -2);
}
.banner .content {
width: 66%;
}
.banner .content h2 {
font-size: 34px;
}
.banner .media {
width: 34%;
}
.banner .media img {
position: absolute;
width: auto;
max-width: none;
left: -55%;
top: 50%;
transform: translateY(-50%);
margin-top: 18px;
margin-top: 24px;
height: 480px;
}
}
@media (min-width: 1024px) {
.banner .content {
padding: 0 var(--gap);
width: 500px;
}
.banner .media,
.banner .video {
min-width: calc(100% - 500px);
}
.banner .media img {
margin-top: 14px;
max-width: none;
position: absolute;
right: -5%;
top: 50%;
transform: translateY(-50%);
width: 560px;
}
}
@media (min-width: 1024px) and (max-width: 1149px) {
.banner {
height: 302px;
margin-top: 2em;
}
.pull-up .banner {
margin-bottom: calc(302px / -2);
}
.pull-up+section {
padding-top: calc(var(--breathe) + calc(302px / 2) + 1em);
}
.pull-next {
padding-bottom: calc(var(--breathe) + 151px + 20px);
}
.pull-next+.pull-up {
margin-top: calc(302px / -2);
}
.banner .content h2 {
font-size: 32px;
}
.banner .content p {
font-size: 17px;
}
.banner .h-t2 {
display: none;
}
.banner.video h2 {
font-size: 38px;
}
.banner.video .content p {
font-size: var(--medium-text);
}
.banner.video .content {
padding-right: 5vw;
width: calc(100% - 428px);
}
.banner.video .media {
min-width: 0;
width: 428px;
}
}
@media (min-width: 1150px) {
.banner:not(.video) {
height: 356px;
margin-top: 2.5em;
}
.banner.tll:not(.video) {
height: 376px;
margin-top: 2.5em;
}
.pull-up .banner {
margin-bottom: calc(356px / -2);
}
.pull-up+section {
padding-top: calc(var(--breathe) + calc(356px / 2) + 1.5em);
}
.pull-next {
padding-bottom: calc(var(--breathe) + 178px);
}
.pull-next+.pull-up {
margin-top: calc(356px / -2);
}
.banner .content {
padding: 20px 7.55%;
width: 725px;
}
.banner .content.es {
padding-right: 60px;
}
.banner .media,
.banner .video {
min-width: calc(100% - 700px);
}
.banner .media img {
margin-top: 20px;
}
}
@media (min-width: 1150px) and (max-width: 1349px) {
.banner .media img {
min-width: 170%;
right: -7.5%;
}
.banner.video .content {
padding: 20px 5%;
width: 520px;
}
.banner.video .media {
width: calc(100% - 520px);
}
}
@media (min-width: 1350px) {
.pull-next {
padding-bottom: calc(var(--breathe) + 178px + 24px);
}
.banner {
margin-left: -6.5%;
margin-top: 4.5em;
max-width: none;
width: 113%;
}
.banner .media img {
right: 3.5%;
width: 130%;
}
}
@media (max-width: 767px) {
.banner {
height: 474px;
padding: calc(var(--gutter) * 1.5);
}
.banner h2 {
font-size: 32px;
margin-bottom: .5em;
}
.banner:not(.video) .media {
display: none;
}
.pull-up .banner {
margin-bottom: calc(474px / -2);
}
.pull-up+section {
padding-top: calc(var(--breathe) + calc(474px / 2));
}
.pull-next {
padding-bottom: calc(var(--breathe) + 237px - 20px);
}
.pull-next+.pull-up {
margin-top: calc(474px / -2);
}
}
@media (min-width: 525px) and (max-width: 767px) {
.banner .media {
display: block;
position: absolute;
width: 52vw;
bottom: -3vw;
right: 1vw;
}
}
@media (max-width: 400px) {
.banner h2 {
font-size: 30px;
}
}
.banner.video {
margin-top: -1em;
}
@media (max-width: 1200px) {
.banner.video .media {
position: relative;
}
.banner.video .media iframe {
width: auto;
height: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0;
}
}
@media (min-width: 1024px) and (max-width: 1149px) {
.banner.video .media iframe {
height: 238px;
}
}
@media (max-width: 1023px) {
.banner.video {
height: auto !important;
}
.banner.video>.flex {
display: block;
}
.banner.video>.flex>div {
width: 100% !important;
}
.banner.video .media {
position: static;
}
.banner.video .media iframe {
position: static;
height: auto;
margin: 1.5em 0 -.5em;
width: 100%;
}
}
/**
* FAQs
*/
.faq {
max-width: var(--content-small);
text-align: left;
}
.faq .q {
cursor: pointer;
padding: 2em 0;
border-bottom: 1px solid #eee;
opacity: .75;
position: relative;
}
.faq .q:hover,
.faq .q.active {
opacity: 1;
}
.faq .q:last-child {
border: 0;
margin-bottom: -2em;
}
.faq .q-top p {
margin: 0;
}
.faq .q-top p {
padding-right: 52px;
}
.faq .answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
}
.faq .answer p {
margin: 0;
padding: 0;
color: #666;
line-height: 1.7;
padding-top: 1em;
padding-left: 2em;
border-left: 3px solid #12c7bb;
margin-top: 1em;
padding-top: 0;
padding-left: 1.5em;
margin-left: 1.5em;
color: var(--dark-green);
}
.faq .open {
position: absolute;
right: 0;
color: var(--primary-color);
font-size: 30px;
width: 32px;
height: 32px;
line-height: 24px;
padding: 0 0 3px;
border-radius: 100px;
border: 1.5px solid var(--primary-color);
text-decoration: none;
top: 1.085em;
text-align: center;
background: white;
cursor: pointer;
transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.faq .q.active .open {
transform: rotate(45deg);
border-color: var(--alternate-color);
background-color: var(--alternate-color);
color: white;
}
/**
* Swiper
*/
.swiper {
overflow: visible !important;
}
.swiper-slide {
height: auto !important;
}
@media (min-width: 1024px) {
.sw-pagination {
display: none;
}
}
@media (min-width: 768px) {
.quotes-pagination.sw-pagination {
display: none;
}
}
.sw-pagination {
margin-top: 2em;
text-align: center;
}
.quotes-pagination.sw-pagination {
margin-top: 3em;
}
.pricing-pagination {
margin-bottom: -1em;
}
.sw-pagination .swiper-pagination-bullet {
width: 26px;
height: 4px;
border-radius: 999px;
background: #cfd8d6;
opacity: 1;
transition: all 0.3s ease;
}
.sw-pagination .swiper-pagination-bullet-active {
width: 40px;
background: #08bfae;
}
.swiper-initialized .swiper-wrapper {
flex-wrap: nowrap !important;
justify-content: unset !important;
}
.swiper-initialized .glass,
.swiper-initialized .reveal {
opacity: 1 !important;
transform: translateY(0) !important;
}
.swiper-initialized .flex {
gap: 0 !important;
}
/**
* Forms
*/
form .flex>div {
flex-grow: 1;
}
form label {
cursor: pointer;
display: block;
padding-bottom: 4px;
font-weight: 500;
font-size: 17px;
opacity: .75;
letter-spacing: -.25px;
padding-left: 3px;
}
form input,
form textarea,
form select {
border-radius: 8px !important;
border: 0;
background: white;
padding: 8px;
display: block;
font-size: var(--small-text);
margin-bottom: 1.5em;
width: 100%;
box-shadow: var(--shadow);
border: 1.5px solid #0a594d20;
/*border: 1px solid rgba(0, 0, 0, 0.1);*/
min-width: 204px;
}
form select {
height: 43px;
}
form textarea {
height: 113px;
}
form input[type=submit] {
background: var(--green-gradient);
border: 1px solid #ffffff33;
color: white;
cursor: pointer;
margin-bottom: 0;
margin-top: 0;
}
form.glass {
border-width: 1px !important;
}
form .gap-large {
gap: 0 32px
}
@media (min-width: 1023px) {
.form-success {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
}
/*
#contact .wrap {
padding-top: 3em;
}
#contact form {
margin-top: -3em;
}*/
#book-demo h1:after,
.page-head h1.aft-left::after {
left: 0;
transform: none;
}
#book-demo p.intro {
margin-bottom: 1.5em;
}
#book-demo .checks li {
font-weight: 500;
}
@media (max-width: 610px) {
#book-demo form .grid {
display: block;
}
}
@media (min-width: 1024px) {
#book-demo h1 {
line-height: 1.2;
padding-bottom: .25em;
padding-top: 1em;
}
#book-demo .wrap>.flex {
gap: var(--gutter);
}
#book-demo .wrap>.flex>div:first-child {
max-width: 400px;
}
#book-demo .wrap>.flex>div+div {
width: calc(100% - 400px - calc(var(--gutter) * 2));
}
#book-demo form {
width: 100%;
}
}
@media (min-width: 1024px) and (max-width: 1069px) {
#book-demo .wrap>.flex>div:first-child {
max-width: 380px;
}
#book-demo .wrap>.flex>div+div {
width: calc(100% - 350px - calc(var(--gutter) * 2));
}
}
@media (min-width: 1024px) and (max-width: 1280px) {
form input,
form textarea,
form select {
min-width: 200px;
}
#book-demo h1 {
font-size: 46px;
}
}
@media (min-width: 1281px) {
#book-demo .wrap>.flex>div:first-child {
max-width: 470px;
}
#book-demo .wrap>.flex>div+div {
width: calc(100% - 470px - calc(var(--gutter) * 2));
}
}
@media (max-width: 1023px) {
#book-demo h1,
#book-demo .intro {
margin-left: 0;
margin-right: 0;
text-align: left;
}
#contact>.wrap>.flex>div,
#book-demo>.wrap>.flex>div {
gap: 0 calc(var(--gutter) * 2);
}
#contact>.wrap>.flex>div,
#book-demo>.wrap>.flex>div {
width: 100%;
}
#contact>.wrap>.flex>div:first-child,
#book-demo>.wrap>.flex>div:first-child {
display: flex;
flex-wrap: wrap;
padding-bottom: calc(var(--breathe) / 4);
}
}
/**
* Contact blocks
*/
.contact-item {
font-size: 17px;
line-height: 1.4;
margin-bottom: 24px;
max-width: 280px;
padding-left: 40px;
position: relative;
width: 100%;
}
@media (max-width: 1023px) {
.contact-item {
font-size: var(--medium-text);
}
}
.contact-item .icon {
color: var(--darker-green);
font-size: 18px;
left: 0;
position: absolute;
top: 0;
}
.contact-item.border {
border-bottom: 1px solid #8cb8b621;
padding-bottom: 1.75em;
margin-bottom: 1.75em;
}
.contact-item.border:last-child {
border: 0;
padding-bottom: 0;
}
@media (min-width: 500px) and (max-width: 1023px) {
.contact-item {
min-width: 0;
max-width: 100%;
width: calc(50% - var(--gutter));
}
.contact-item:nth-child(2) {
order: 2;
}
.contact-item:nth-child(4) {
order: 3;
}
}
@media (min-width: 768px) {
#book-demo .contact-item {
max-width: none;
width: 100%;
}
}
@media (max-width: 768px) {
.contact-item {
min-width: 0;
max-width: 100%;
width: calc(50% - (var(--gutter) / 2));
}
#contact>.wrap>.flex>div,
#book-demo>.wrap>.flex>div {
gap: 0 var(--gutter);
}
}
@media (max-width: 580px) {
.contact-item {
width: 100%;
}
.contact-item.border {
border: 0;
padding-bottom: 0;
}
}
/**
* Error page
*/
.nf-visual {
display: flex;
justify-content: center;
align-items: center;
gap: 0.075em;
font-size: clamp(4rem, 12vw, 8rem);
font-weight: 700;
line-height: 1;
margin-bottom: 1rem;
color: #212d45;
}
.nf-zero {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: var(--primary-color);
}
.not-found-page p {
padding-bottom: 1em;
}
/**
* Legal pages
*/
.longtxt {
max-width: calc(900px + 4em);
margin-left: auto;
margin-right: auto;
}
.longtxt hr {
border: 0;
border-bottom: 1px solid #ddd;
padding-top: 2em;
margin-bottom: 3em;
}
.longtxt h3 {
margin-bottom: .5em;
font-size: 24px;
}
.longtxt h4 {
font-weight: 500;
margin-bottom: .5em;
}
.longtxt p,
.longtxt li,
.longtxt dt,
.longtxt dd {
font-size: 18px;
}
.longtxt li {
margin-bottom: 9px;
}
.longtxt dt {
font-weight: 600;
}
.longtxt ul,
.longtxt ol,
.longtxt p,
.longtxt dl,
.longtxt dd {
margin-bottom: 1.625em;
}
.longtxt ul,
.longtxt ol {
margin-left: var(--gutter);
}
.longtxt p+ul,
.longtxt p+ol {
margin-top: -.825em;
}
.longtxt> :last-child {
margin-bottom: 0;
}
/**
* Cookie banner
*/
.cookie-banner {
position: fixed;
left: auto;
right: 20px;
bottom: 20px;
z-index: 2147483001;
opacity: 0;
transform: translateY(40px);
pointer-events: none;
}
.cookie-banner.show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
transition: transform 0.7s ease,
opacity 0.7s ease;
}
.cookie-banner__inner {
max-width: 460px;
margin: 0 auto;
background: #fff;
color: #212d45;
border-radius: 18px;
box-shadow: 0 10px 40px rgba(0, 0, 0, .15);
padding: 24px;
}
@media (max-width: 767px) {
.cookie-banner {
right: 0;
}
.cookie-banner__inner {
width: calc(100% - 40px);
max-width: none;
}
}
@media (max-width: 509px) {
.cookie-banner__actions {
gap: 20px !important;
}
.cookie-banner__actions button {
width: calc(50% - 10px);
}
.cookie-banner__actions button:first-child {
width: 100%;
margin-bottom: 0;
}
}
.cookie-banner__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
padding-top: 10px;
}
.cookie-banner__settings {
margin-top: 2em;
padding-top: 1.3em;
border-top: 1px solid rgba(0, 0, 0, .08);
}
.cookie-banner__settings button {
margin-top: 1em;
}
.cookie-option {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 3px;
font-size: 15px;
}
.cookie-option span {
padding-top: 4px;
}
.cookie-banner p,
.cookie-banner .btn {
font-size: 16px;
}
.cookie-banner p a {
color: var(--primary-color)
}
.cookie-banner p {
margin-bottom: .75em;
}
.cookie-banner h3 {
font-size: 20px;
margin-bottom: .25em;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 75% 35%, rgba(255, 255, 255, 0.12), transparent 30%),
radial-gradient(circle at 70% 35%, rgba(255, 255, 255, 0.06), transparent 45%);
pointer-events: none;
}
.hero .btn:not(.lighter):hover {
transform: translateY(-2px) !important;
box-shadow: 0 14px 35px rgba(0, 0, 0, 0.2) !important;
}
.hero::before {
content: "";
position: absolute;
top: 45%;
right: 30%;
width: 700px;
height: 700px;
background: radial-gradient(circle,
rgba(255, 255, 255, 0.18),
rgba(255, 255, 255, 0.06) 40%,
transparent 70%);
transform: translate(50%, -50%);
pointer-events: none;
}
.page-head {
position: relative;
}
.page-head h1 {
position: relative;
margin-bottom: 1em;
}
.page-head h1::after {
width: 80px;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, #14b8a6, #2dd4bf);
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
}
.page-head.kennis h1::after {
left: 0;
transform: none;
}
.page-head:not(.kennis) p {
max-width: 700px;
}
.page-head form p {
max-width: none;
}
input:focus,
textarea:focus {
outline: none;
border-color: #1bbf9b;
box-shadow: 0 0 0 3px rgba(27, 191, 155, 0.1);
}
@media (max-width: 1023px) {
header {
height: 78px;
margin-bottom: -78px;
padding: 20px 0;
}
header .logo {
margin-left: -2px;
}
header:not(.scrolled)>.wrap {
background: linear-gradient(180deg, #00000010, transparent);
margin-top: -1.25em;
padding-top: 1.25em;
padding-bottom: 1.25em;
margin-bottom: -1.25em;
}
header:not(.scrolled) .menu-toggle {
top: 20px;
}
/*
header:not(.scrolled)::after {
content: '';
display: block;
width: 100%;
height: 1px;
background: #0000000f;
top: 78px;
left: 0;
position: absolute;
z-index: 1;
}
.hl header:not(.scrolled)::after {
background: #ffffff2a;
}
*/
}
.solutions-explore:not(.single) {
margin-top: 3.5em;
margin-bottom: 0;
opacity: .8;
border-top: 2px solid white;
padding-top: 3em;
}
.solutions-explore span {
display: block;
padding-bottom: 1em;
}
.page-head.ct .media {
max-width: 650px;
}
@media (max-width: 767px) {
.center-mobile {
text-align: center;
}
.center-mobile .flex.split.center>div:first-child {
padding-bottom: 2.2em;
}
.center-mobile h2:after {
left: 50%;
transform: translateX(-50%);
}
}
.solutions-explore .se-lead {
display: block;
margin-bottom: .6em;
}
.solutions-explore a {
white-space: nowrap;
}
/* link never splits mid-phrase */
.solutions-explore a:not(:last-of-type)::after {
content: "·";
display: inline-block;
opacity: .75;
margin: 0 .35em 0 .5em;
}
@media (max-width: 767px) {
.solutions-explore a {
display: block;
white-space: normal;
margin-top: .5em;
}
.solutions-explore a:not(:last-of-type)::after {
content: none;
}
/* no dangling dots */
}
.stores img {
width: auto;
height: 48px;
}
/* ===== Voorbeeld plaatsbeschrijving page ===== */
.example-report-hero {
overflow: hidden;
padding-bottom: 5em;
}
.example-report-hero-grid,
.example-report-intro-grid,
.example-report-layout,
.example-editor-section,
.example-legend {
align-items: center;
display: grid;
gap: 64px;
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}
.example-report-hero .content {
max-width: 620px;
}
.example-report-hero-preview {
background: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(234, 243, 242, .88));
border: 1px solid rgba(0, 115, 105, .12);
border-radius: 28px;
box-shadow: 0 34px 90px rgba(15, 53, 51, .16);
padding: 18px;
}
.example-browser-bar {
align-items: center;
display: flex;
gap: 8px;
height: 28px;
padding: 0 6px 12px;
}
.example-browser-bar span {
background: rgba(0, 107, 97, .28);
border-radius: 50%;
display: block;
height: 9px;
width: 9px;
}
.example-editor-card {
background: #fff;
border-radius: 18px;
padding: 26px;
}
.example-editor-toolbar {
align-items: center;
display: flex;
gap: 12px;
margin-bottom: 22px;
}
.example-editor-toolbar strong {
color: var(--darker-green);
margin-right: auto;
}
.example-editor-toolbar span {
background: rgba(0, 168, 145, .1);
border-radius: 999px;
color: var(--darker-green);
font-size: 14px;
font-weight: 700;
padding: 6px 10px;
}
.example-editor-line {
background: linear-gradient(90deg, var(--primary-color), rgba(33, 184, 159, .12));
border-radius: 99px;
height: 8px;
margin-bottom: 22px;
width: 72%;
}
.example-editor-room {
background: #f3f8f7;
border-radius: 16px;
margin-bottom: 14px;
padding: 20px;
}
.example-editor-room h3 {
font-size: 24px;
margin-bottom: 8px;
}
.example-editor-room p {
color: var(--body);
font-size: 18px;
margin: 0;
}
.example-editor-note {
border-radius: 14px;
font-weight: 700;
margin-top: 12px;
padding: 14px 16px;
}
.example-editor-note.warning {
background: #fff9cf;
color: #6d5d00;
}
.example-editor-note.danger {
background: #ffe8e8;
color: #8d1111;
}
.example-report-intro-grid {
align-items: start;
}
.example-report-stats {
display: grid;
gap: 18px;
grid-template-columns: repeat(3, 1fr);
}
/*
.example-report-stats article,
.example-option-grid article,
.example-signal-grid article {
background: rgba(255, 255, 255, .78);
border: 1px solid rgba(0, 115, 105, .1);
border-radius: 22px;
box-shadow: 0 20px 60px rgba(15, 53, 51, .08);
padding: 28px;
}
*/
.example-report-stats strong {
color: var(--darker-green);
display: block;
font-size: 30px;
margin-bottom: 8px;
}
.example-report-stats span {
color: var(--body);
display: block;
}
.example-report-layout {
align-items: start;
grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
}
.example-report-sidebar {
position: sticky;
top: 110px;
}
.example-paper {
background: #fff;
border: 1px solid rgba(0, 115, 105, .08);
border-radius: 26px;
box-shadow: 0 30px 100px rgba(15, 53, 51, .16);
padding: 50px;
}
.example-paper-head {
align-items: center;
border-bottom: 2px solid #ececec;
display: flex;
justify-content: space-between;
margin-bottom: 30px;
padding-bottom: 20px;
}
.example-paper-head span {
color: var(--darker-green);
font-weight: 800;
text-transform: uppercase;
}
.example-paper-head strong {
background: rgba(33, 184, 159, .12);
border-radius: 999px;
color: var(--darker-green);
font-size: 14px;
padding: 8px 12px;
}
.example-paper h3 {
font-size: 38px;
margin-bottom: 18px;
}
.example-paper-lead {
color: #2e3534;
font-size: 20px;
line-height: 1.65;
margin-bottom: 42px;
}
.example-paper-room {
border-top: 2px solid #ececec;
padding-top: 32px;
}
.example-paper-room+.example-paper-room {
margin-top: 34px;
}
.example-paper-room h4 {
font-size: 25px;
margin-bottom: 22px;
text-transform: uppercase;
}
.example-paper-room h5 {
font-size: 18px;
font-weight: 900;
letter-spacing: .01em;
margin: 30px 0 16px;
text-transform: uppercase;
}
.example-room-intro {
color: #2e3534;
font-size: 19px;
line-height: 1.6;
margin-bottom: 26px;
}
.example-report-list {
display: grid;
gap: 24px;
list-style: disc;
margin: 0 0 26px;
padding-left: 28px;
}
.example-report-list li {
color: #111;
font-size: 19px;
line-height: 1.55;
padding-left: 4px;
}
.example-report-list strong,
.example-finding.meter strong {
font-weight: 700;
}
.example-photo-grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(3, 1fr);
margin-bottom: 28px;
}
.example-photo-grid div {
align-items: end;
aspect-ratio: 1 / 1.08;
background:
linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .12)),
linear-gradient(135deg, #e4ddd1, #9faeaa 42%, #6c7c76);
border-radius: 12px;
display: flex;
overflow: hidden;
padding: 12px;
}
.example-photo-grid div:nth-child(2) {
background:
linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .14)),
linear-gradient(135deg, #d7d1c2, #f4f1ea 38%, #83938d);
}
.example-photo-grid div:nth-child(3) {
background:
linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .16)),
linear-gradient(135deg, #c8c0ad, #e9e0cf 42%, #5d6b66);
}
.example-photo-grid span {
background: rgba(255, 255, 255, .84);
border-radius: 999px;
color: var(--darker-green);
font-size: 13px;
font-weight: 800;
padding: 5px 9px;
}
.example-finding {
align-items: center;
border-radius: 20px;
display: grid;
gap: 20px;
grid-template-columns: 38px minmax(0, 1fr);
margin-top: 20px;
padding: 24px;
}
.example-finding p {
font-size: 19px;
line-height: 1.55;
margin: 0;
}
.example-finding i {
align-items: center;
border-radius: 50%;
color: #fff;
display: flex;
font-size: 18px;
font-style: normal;
font-weight: 900;
height: 38px;
justify-content: center;
width: 38px;
}
.example-finding.warning {
background: #fffbea;
}
.example-finding.warning i,
.example-signal-grid .warning span {
background: #d9bf00;
}
.example-finding.danger {
background: #fff0f0;
}
.example-finding.danger i,
.example-signal-grid .danger span {
background: #b71616;
}
.example-paper-room.compact p {
font-size: 19px;
}
.example-finding.meter {
margin-top: 24px;
}
.example-signal-grid {
display: grid;
gap: 24px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.example-signal-grid article span,
.example-option-grid article span {
align-items: center;
border-radius: 50%;
color: #fff;
display: flex;
font-size: 22px;
font-weight: 900;
height: 54px;
justify-content: center;
margin-bottom: 20px;
width: 54px;
}
.example-signal-grid h3,
.example-option-grid h3 {
font-size: 26px;
margin-bottom: 12px;
}
.example-editor-section {
grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
}
.example-editor-panel {
background: #eef3f3;
border-radius: 24px;
box-shadow: 0 26px 80px rgba(15, 53, 51, .12);
padding: 34px;
position: relative;
}
.example-editor-actions {
display: flex;
flex-direction: column;
gap: 12px;
position: absolute;
right: 26px;
top: 26px;
}
.example-editor-actions button {
align-items: center;
background: #171a1a;
border: 0;
border-radius: 8px;
color: #fff;
display: flex;
font-size: 24px;
font-weight: 900;
height: 44px;
justify-content: center;
width: 44px;
}
.example-editor-panel label {
color: #111;
display: block;
font-size: 20px;
font-weight: 800;
margin-bottom: 10px;
margin-top: 24px;
}
.example-editor-panel label:first-of-type {
margin-top: 0;
padding-right: 70px;
}
.example-textarea {
background: #fff;
border: 2px solid #d8dddd;
color: #111;
font-size: 20px;
line-height: 1.45;
min-height: 112px;
padding: 18px;
width: calc(100% - 60px);
}
.example-textarea.small {
min-height: 64px;
}
.example-option-grid {
display: grid;
gap: 24px;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 42px;
}
.example-option-grid article span {
background: var(--primary-color);
}
.example-banner-card {
align-items: center;
display: flex;
justify-content: center;
}
.example-mini-export {
background: rgba(255, 255, 255, .92);
border-radius: 24px;
box-shadow: 0 24px 80px rgba(0, 0, 0, .18);
color: var(--darker-green);
padding: 34px;
transform: rotate(-2deg);
width: 330px;
}
.example-mini-export span {
background: rgba(33, 184, 159, .14);
border-radius: 999px;
display: inline-block;
font-weight: 800;
margin-bottom: 22px;
margin-right: 8px;
padding: 8px 12px;
}
.example-mini-export strong {
display: block;
font-size: 34px;
line-height: 1.1;
}
@media (max-width: 1023px) {
.example-report-hero-grid,
.example-report-intro-grid,
.example-report-layout,
.example-editor-section,
.example-legend {
grid-template-columns: 1fr;
}
.example-report-sidebar {
position: static;
}
.example-report-stats,
.example-option-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.example-report-hero {
padding-bottom: 3em;
}
.example-report-hero-preview {
transform: none;
}
.example-paper {
border-radius: 18px;
padding: 26px;
}
.example-paper-head,
.example-finding {
align-items: start;
grid-template-columns: 1fr;
}
.example-paper-head {
display: block;
}
.example-paper-head strong {
display: inline-block;
margin-top: 12px;
}
.example-paper h3 {
font-size: 30px;
}
.example-paper-lead,
.example-finding p,
.example-room-intro,
.example-report-list li,
.example-paper-room.compact p,
.example-textarea {
font-size: 18px;
}
.example-photo-grid,
.example-signal-grid {
grid-template-columns: 1fr;
}
.example-editor-panel {
padding: 24px;
}
.example-editor-actions {
flex-direction: row;
position: static;
margin-bottom: 20px;
}
.example-editor-panel label:first-of-type {
padding-right: 0;
}
.example-textarea {
width: 100%;
}
}
.example-paper section {
padding-bottom: 12px;
}
footer .stores {
padding-right: 0 !important;
padding-top: 6px;
}
footer .stores a img {
outline: 2px solid #305e63;
outline-offset: -2px;
border-radius: 7px;
overflow: hidden;
display: block;
height: 40px;
}
footer .stores img {
margin-bottom: 0 !important;
}
@media (max-width: 450px) {
footer .stores {
margin-bottom: 1.5em !important;
}
}
/** New Footer **/
footer {
background: radial-gradient(circle at 86% 18%, rgb(25 107 124 / 55%) 0%, rgba(12, 83, 86, 0.36) 28%, rgb(22 98 111 / 0%) 54%), radial-gradient(circle at 96% 100%, rgb(27 102 137 / 32%) 0%, rgb(56 166 165 / 18%) 30%, rgb(63 106 115 / 0%) 58%), linear-gradient(135deg, #105c6e 0%, #175f6a 38%, #07575a 72%, #0b566a 100%);
}
footer .wrap {
max-width: 1280px;
}
footer .flex {
gap: 54px;
}
footer .flex * {
font-size: 14.5px;
font-weight: 500;
}
footer .flex .flex {
gap: 50px;
justify-content: space-between;
flex-grow: 1;
}
footer img {
width: 200px;
display: block;
margin-bottom: 1.5em !important;
}
footer .flex strong {
color: #baf6f3cc;
text-transform: uppercase;
font-weight: 700;
letter-spacing: .5px;
padding-bottom: 12px;
display: block;
position: relative;
margin-bottom: 10px;
font-size: 13px;
}
footer .flex strong:after {
content: '';
width: 30px;
background: #baf6f3cc;
height: 1px;
position: absolute;
display: block;
bottom: 0;
}
footer .glass {
padding: 20px 28px 24px;
background: #ffffff11;
backdrop-filter: blur(25px);
margin-top: -30px;
border: 1px solid #ffffff33;
}
footer .copy {
border-top: 1px solid #ffffff33;
padding-top: 24px;
opacity: .625;
margin-top: 48px;
}
footer .copy p {
font-size: 14.5px;
line-height: 1.5;
}
.copy .links {
gap: 0;
display: flex;
}
footer .copy .links a {
padding-left: 12px;
display: block;
}
footer .copy .links a:not(:last-child) {
padding-right: 7px;
}
footer .tagline {
display: inline-block;
max-width: 260px;
width: 100%;
line-height: 22px;
opacity: .825;
margin-top: -8px;
}
footer .call span {
opacity: .825;
display: block;
}
footer .call em {
font-style: normal;
}
footer .call svg {
margin-right: 6px;
}
footer .call strong {
padding-bottom: 0;
font-size: 21px;
margin-top: -4px;
letter-spacing: -.125px;
gap: 0 !important;
margin-bottom: 0 !important;
}
footer .call strong+span {
margin-top: -12px;
}
/* Explicit tel: link so iOS Safari doesn't auto-detect the number and override
its styling; the link inherits the surrounding appearance. */
footer .call strong a {
color: inherit;
font: inherit;
letter-spacing: inherit;
text-decoration: none;
}
footer .call strong::after {
display: none;
}
footer .lang {
margin-bottom: 0;
}
footer .call {
text-align: center;
}
footer .call div:first-child span:first-child {
display: flex;
align-items: center;
gap: 16px;
font-weight: 600;
font-size: 16px;
}
footer .call span:first-child::before,
footer .call span:first-child::after {
content: "";
flex: 1;
height: 1px;
background: #ffffff77;
}
footer .glass a,
footer .glass .lang ul,
footer .glass .lang {
display: block;
width: 100%;
}
footer .lang {
height: 46px;
transition: .2s all ease;
}
footer .btn {
font-size: 16px;
}
footer .lang {
position: relative;
}
footer .lang ul {
border-color: #ffffff77;
border-radius: 50px;
margin-bottom: 0;
transition: .2s all ease;
padding-left: 20px;
}
footer .lang ul * {
font-size: 16px;
}
footer .lang:hover ul {
border-radius: 19px;
}
footer .lang:hover ul {
background-color: #00000066;
border-color: #ffffff77;
}
footer .lang .lucide {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 15px;
width: 1.25em;
height: 1.25em;
opacity: .75;
}
footer .lang:hover .lucide {
color: white;
z-index: 1;
}
/* Lucide inline icons (replace FontAwesome) */
.lucide {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
flex: none
}
.btn .lucide {
float: right;
margin-top: -1px;
margin-left: 1px;
margin-right: -7px;
height: 1.2em;
width: 1.2em;
margin-bottom: -4px;
}
a.ext .lucide {
font-size: 9.5px;
opacity: .75;
margin-top: 3px;
margin-left: 1px
}
footer a.ext .lucide {
margin-top: 6px;
opacity: .85
}
/* Dunnere lijnen voor de globe in de footer-taalkiezer */
#langSelector .lucide {
stroke-width: 1.5px;
}
/* Telefoon-icoon naast het nummer in het footer-call-blok */
footer .call strong {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
footer .call strong .lucide {
width: .8em;
height: .8em;
opacity: .85;
}
@media (min-width: 1185px) {
footer .call {
padding-bottom: 20px;
}
footer .call strong {
padding: 12px 0 0;
margin-bottom: -3px !important;
display: block;
}
footer .call strong+span {
display: block;
}
}
@media (min-width: 1024px) and (max-width: 1184px) {
footer .flex {
flex-wrap: nowrap;
}
footer .wrap>.flex>div:first-child {
min-width: 270px;
}
footer .flex .flex {
flex-wrap: wrap;
gap: 20px;
}
footer .call>div:first-child>span:first-child {
display: none;
}
footer .glass {
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
width: 100%;
order: -1;
display: flex;
margin-top: 0;
gap: 50px;
border-bottom: 1px solid #ffffff33;
border-radius: 0;
padding-bottom: 16px;
margin-bottom: 16px;
justify-content: space-between;
}
footer .glass a,
footer .glass .lang ul,
footer .glass .lang {
width: auto;
display: inline-block;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
footer>.wrap>.flex>div:first-child {
border-bottom: 1px solid #ffffff33;
margin-bottom: 12px;
padding-bottom: 10px;
width: 100%;
}
footer .glass {
margin-top: -98px;
}
footer .tagline {
display: block;
max-width: none;
}
footer .stores {
justify-content: flex-start !important;
}
footer .flex .flex {
gap: 0;
width: 100%;
}
footer .glass strong {
display: block;
margin: 10px 0;
}
footer .call {
margin-bottom: 30px;
}
footer .copy {
gap: 0;
display: block;
}
footer .copy p.links {
order: -1;
}
footer .copy p.links a {
padding-left: 0;
margin-right: 12px;
}
footer .copy a {
text-decoration: underline;
}
}
@media (max-width: 767px) {
footer .logo-link img {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
footer * {
text-align: center;
}
footer .stores {
margin-top: 0px;
margin-bottom: 16px !important;
justify-content: center !important;
}
footer .flex .flex {
gap: 0;
width: 100%;
}
footer .flex .flex>div:not(:last-child) {
display: none !important;
}
footer .glass {
padding: 0;
border: 0;
box-shadow: none;
background: none;
display: flex !important;
flex-wrap: wrap;
margin-top: 0;
justify-content: center;
}
footer .glass>div.call {
width: 100%;
padding-bottom: 16px;
margin-top: -8px;
}
footer .call strong {
margin: 10px 0;
}
footer .tagline {
max-width: none;
font-size: 18px;
font-weight: 400;
line-height: 1.5;
}
footer .call em {
font-size: 20px;
}
footer .call strong {
font-size: 28px;
}
footer .call span {
font-size: 18px;
}
footer .copy {
gap: 10px;
margin-top: 16px;
}
footer .copy>p {
width: 100%;
}
footer .copy .links {
display: block;
order: -1;
}
footer .copy .links a {
padding: 0;
line-height: 2em;
font-size: 17px;
text-decoration: underline;
}
footer .copy>p {
font-size: 17px;
}
footer .copy .links br {
display: none;
}
footer .stores a img {
height: 46px;
}
footer .flex .flex>div:not(:last-child) {
display: block !important;
}
footer .flex .flex>div:not(:last-child) * {
text-align: left;
}
footer .flex .flex>div:nth-child(2) {
display: none !important;
}
footer .flex .flex>div+div+div {
width: auto !important;
}
footer .flex .flex {
justify-content: space-evenly;
gap: 0 24px;
}
footer .flex .flex>div:not(:last-child) a {
font-size: 16px;
}
footer .flex .flex>div:last-child {
margin-top: -20px;
margin-bottom: 20px;
order: -1;
}
}
@media (max-width: 388px) {
footer .flex .flex {
gap: 0 10px;
}
footer .flex .flex>div:not(:last-child) a {
font-size: 15px;
}
}
/* FR heeft langere navlabels: de sticky nav-pill wat meer ruimte geven (enkel FR) */
html[lang^="fr"] header.scrolled>.wrap {
max-width: 1100px;
}
html[lang^="fr"] header.scrolled nav a:not(.btn) {
padding-left: 11px;
padding-right: 11px;
}
/* reCAPTCHA: badge verbergen (toegestaan mits de tekstvermelding hieronder in het formulier staat) */
.grecaptcha-badge {
visibility: hidden;
}
.recaptcha-terms {
font-size: 12px;
opacity: .6;
margin-top: 12px;
line-height: 1.4;
}
.recaptcha-terms a {
text-decoration: underline;
}
/* Validatie-/foutmeldingen boven de formulieren */
.form-errors {
background: #fdecec;
border: 1px solid #f1c6c6;
color: #962a2a;
border-radius: 16px;
padding: 14px 20px;
margin-bottom: 22px;
}
.form-errors ul {
margin: 0;
padding-left: 20px;
}
.form-errors li {
font-size: var(--medium-text);
line-height: 1.45;
}
.form-errors li::marker {
color: #c98a8a;
}
@media (max-width: 411px) {
.icons.sm-mob h4 {
font-size: 15.5px;
}
}
@media (max-width: 380px) {
.icons.sm-mob h4 {
font-size: 14.5px;
}
.icons.sm-mob .glass {
padding: .5em;
}
}
/**
* Kennis section (articles)
*/
.breadcrumb {
font-size: 15px;
opacity: .75;
margin-bottom: 1.5em;
}
.breadcrumb a {
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.breadcrumb .sep {
padding: 0 .4em;
opacity: .6;
}
.article-answer {
background: var(--light-grey);
border-left: 4px solid var(--primary-color);
border-radius: 8px;
padding: 1.4em 1.6em;
margin: 1.5em 0;
}
.article-answer p {
margin: 0;
font-size: var(--medium-text);
}
.article-meta {
font-size: 15px;
opacity: .7;
}
.article-sources {
font-size: 16px;
}
.article-sources .lucide {
margin-left: .35em;
vertical-align: -.1em;
}
.grid.kennis .glass h3 {
margin-bottom: .375em;
margin-top: -12px;
}
.grid.kennis .glass h3 a {
text-decoration: none;
}
.grid.kennis .glass p {
margin-bottom: 1em;
}
.grid.kennis .glass .article-meta {
padding-top: 1em;
margin-bottom: 1em;
display: none;
}
.grid.kennis .glass {
padding-bottom: .5em;
}
/**
* Tijdswinst en rendement (roi_*)
*/
.roi-methods {
display: grid;
gap: clamp(22px, 3vw, 30px);
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 3.2em 0 2.6em;
text-align: left;
}
.roi-methods article {
display: flex;
flex-direction: column;
padding: clamp(26px, 3vw, 34px);
}
.roi-methods .is-immohabits {
border: 2px solid rgba(3, 176, 135, .55);
}
/* Compacte variant voor de homepagina: enkel label, naam en tijd. */
.roi-methods.compact {
margin: 2.6em 0 2.2em;
}
.roi-methods.compact h3 {
font-size: 21px;
margin: 8px 0 14px;
}
.roi-methods.compact .roi-method-time {
margin-bottom: 0;
}
.roi-method-label {
color: var(--darker-green);
display: block;
font-size: 14px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.roi-methods h3 {
font-size: 24px;
margin: 10px 0 18px;
}
/* Houdt de tijdsblokken van de drie kaarten op dezelfde hoogte,
ook wanneer een titel over twee regels loopt. */
@media (min-width: 768px) {
.roi-methods h3 {
min-height: 2.5em;
}
}
.roi-method-time {
border-bottom: 1px solid rgba(44, 50, 50, .12);
border-top: 1px solid rgba(44, 50, 50, .12);
margin-bottom: 18px;
padding: 15px 0;
}
.roi-method-time span {
color: rgba(44, 50, 50, .7);
display: block;
font-size: 14px;
}
.roi-method-time strong {
color: var(--darker-green);
display: block;
font-size: 26px;
line-height: 1.15;
}
.roi-methods p {
font-size: 16px;
margin-bottom: 18px;
}
.roi-method-list {
list-style: none;
margin-top: auto;
padding-left: 0;
}
.roi-method-list li {
color: rgba(44, 50, 50, .75);
font-size: 15px;
line-height: 1.4;
padding: 7px 0 7px 20px;
position: relative;
}
.roi-method-list li::before {
background: rgba(44, 50, 50, .3);
border-radius: 50%;
content: '';
height: 6px;
left: 2px;
position: absolute;
top: 14px;
width: 6px;
}
.roi-methods .is-immohabits .roi-method-list li::before {
background: var(--primary-color);
}
.roi-verdict {
font-size: 20px;
font-weight: 600;
margin: 0 auto;
max-width: 800px;
}
.roi-note {
font-size: 15px;
margin: 1.6em auto 0;
max-width: 800px;
opacity: .75;
}
.roi-note.tight {
font-size: 14px;
margin-top: .7em;
opacity: .6;
}
.roi-calc {
display: grid;
gap: clamp(26px, 4vw, 52px);
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
margin-top: 3em;
padding: clamp(28px, 4vw, 42px);
text-align: left;
}
.roi-calc-field+.roi-calc-field {
margin-top: 2em;
}
.roi-calc-field label {
display: block;
font-size: 16px;
font-weight: 600;
}
.roi-calc-field output {
color: var(--darker-green);
display: block;
font-size: 34px;
font-weight: 700;
line-height: 1.2;
margin: 2px 0 10px;
}
.roi-calc input[type="range"] {
appearance: none;
-webkit-appearance: none;
background: rgba(44, 50, 50, .14);
border-radius: 999px;
height: 6px;
width: 100%;
}
.roi-calc input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background: var(--primary-color);
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
cursor: pointer;
height: 24px;
width: 24px;
}
.roi-calc input[type="range"]::-moz-range-thumb {
background: var(--primary-color);
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
cursor: pointer;
height: 24px;
width: 24px;
}
.roi-calc-results {
align-self: center;
}
.roi-calc-row {
align-items: baseline;
border-bottom: 1px solid rgba(44, 50, 50, .1);
display: flex;
gap: 18px;
justify-content: space-between;
padding: 14px 0;
}
.roi-calc-row span {
color: rgba(44, 50, 50, .75);
font-size: 16px;
}
.roi-calc-row strong {
font-size: 18px;
white-space: nowrap;
}
.roi-calc-total {
align-items: baseline;
display: flex;
gap: 18px;
justify-content: space-between;
padding-top: 18px;
}
.roi-calc-total span {
font-size: 17px;
font-weight: 600;
}
.roi-calc-total strong {
color: var(--darker-green);
font-size: 30px;
line-height: 1.1;
white-space: nowrap;
}
.roi-example {
display: grid;
gap: clamp(22px, 3vw, 34px);
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 3.5em;
text-align: left;
}
.roi-example article {
background: var(--light-grey);
border-radius: 24px;
padding: clamp(24px, 3vw, 32px);
}
.roi-example h3 {
font-size: 22px;
}
.roi-example p {
font-size: 16px;
margin-bottom: 0;
}
.roi-example .roi-caveat {
background: transparent;
border: 2px dashed rgba(19, 85, 81, .25);
}
.roi-nuance {
display: grid;
gap: clamp(22px, 4vw, 34px);
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 3.2em;
text-align: left;
}
.roi-nuance article {
padding: clamp(26px, 3vw, 38px);
}
.roi-nuance span {
color: var(--darker-green);
display: block;
font-size: 15px;
font-weight: 800;
letter-spacing: .08em;
margin-bottom: 16px;
}
.roi-nuance h3 {
font-size: 24px;
margin-bottom: 10px;
}
.roi-nuance p {
font-size: 16px;
margin-bottom: 0;
}
@media (max-width: 767px) {
.roi-methods,
.roi-calc,
.roi-example,
.roi-nuance {
grid-template-columns: 1fr;
}
.roi-verdict {
font-size: 18px;
}
.roi-calc-field output {
font-size: 28px;
}
.roi-calc-total strong {
font-size: 26px;
}
}
/* ── Juridische onderbouwing (pagina "juridisch") ─────────────────── */
.legal-requirements {
display: grid;
gap: 0 34px;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 3em auto 0;
max-width: 1120px;
padding: 30px 34px;
background: rgba(255, 255, 255, .82);
border: 1px solid rgba(255, 255, 255, .95);
border-radius: 26px;
box-shadow: 0 22px 70px rgba(19, 85, 81, .1);
text-align: left;
}
.legal-requirements article {
border-top: 1px solid rgba(44, 50, 50, .1);
padding: 22px 0;
}
.legal-requirements article:nth-child(-n+3) {
border-top: 0;
padding-top: 0;
}
.legal-requirements article:nth-last-child(-n+3) {
padding-bottom: 0;
}
.legal-requirements strong {
color: var(--darker-green);
display: block;
font-size: 20px;
margin-bottom: 8px;
}
.legal-requirements span {
color: rgba(44, 50, 50, .72);
display: block;
font-size: 16px;
line-height: 1.5;
}
.legal-strict,
.legal-items {
align-items: center;
display: grid;
gap: clamp(32px, 6vw, 76px);
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}
.legal-strict-panel,
.legal-doc {
padding: clamp(28px, 4vw, 42px);
}
.legal-strict-panel p,
.legal-doc p {
font-size: 17px;
line-height: 1.6;
}
.legal-strict-panel p:last-child,
.legal-doc ul:last-child {
margin-bottom: 0;
}
.legal-callout {
border-left: 3px solid var(--darker-green);
color: var(--body);
font-weight: 600;
padding-left: 20px;
}
.legal-doc h3 {
font-size: 26px;
margin-bottom: 12px;
}
.legal-answer {
display: grid;
gap: clamp(22px, 4vw, 34px);
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 3.2em;
text-align: left;
}
.legal-answer article {
padding: clamp(28px, 4vw, 42px);
}
.legal-answer span {
color: var(--darker-green);
display: block;
font-size: 15px;
font-weight: 800;
letter-spacing: .08em;
margin-bottom: 18px;
}
.legal-answer h3 {
font-size: 28px;
margin-bottom: 12px;
}
.legal-answer p {
font-size: 17px;
line-height: 1.6;
margin-bottom: 0;
}
.legal-items-rows {
margin-top: 2em;
}
.legal-items-rows .addon-row h3 {
font-size: 24px;
}
.legal-items-rows .addon-row p {
font-size: 17px;
margin-bottom: 0;
}
.legal-yours {
display: grid;
gap: clamp(22px, 3vw, 30px) clamp(28px, 4vw, 54px);
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 3em auto 0;
max-width: 1120px;
text-align: left;
}
.legal-yours article {
border-top: 1px solid rgba(44, 50, 50, .12);
padding-top: 22px;
}
.legal-yours h3 {
font-size: 22px;
margin-bottom: 8px;
}
.legal-yours p {
color: rgba(44, 50, 50, .78);
font-size: 17px;
line-height: 1.6;
margin-bottom: 0;
}
.legal-sources {
margin: 0 auto;
max-width: 780px;
text-align: left;
}
.legal-sources h2 {
font-size: 26px;
}
.legal-sources h2:after {
display: none;
}
.legal-sources ul {
list-style: none;
margin-bottom: 1.4em;
padding: 0;
}
.legal-sources li {
border-top: 1px solid rgba(44, 50, 50, .1);
font-size: 17px;
padding: 12px 0;
}
.legal-sources li:first-child {
border-top: 0;
}
.legal-disclaimer {
color: rgba(44, 50, 50, .62);
font-size: 15px !important;
line-height: 1.6;
}
@media (max-width: 767px) {
.legal-requirements {
gap: 0;
grid-template-columns: 1fr;
padding: 24px;
}
.legal-requirements article {
border-top: 1px solid rgba(44, 50, 50, .1);
padding: 18px 0;
}
.legal-requirements article:nth-child(-n+3) {
border-top: 1px solid rgba(44, 50, 50, .1);
padding-top: 18px;
}
.legal-requirements article:nth-last-child(-n+3) {
padding-bottom: 18px;
}
.legal-requirements article:first-child {
border-top: 0;
padding-top: 0;
}
.legal-requirements article:last-child {
padding-bottom: 0;
}
.legal-strict,
.legal-items,
.legal-answer,
.legal-yours {
grid-template-columns: 1fr;
}
}
/* ── Juridische geloofwaardigheid: hero-regel + homepagina-blok ────── */
.hero .content p.hero-legal {
margin-bottom: 0;
max-width: 560px;
opacity: 1;
padding-top: 1.6em;
}
.hero-legal a {
align-items: flex-start;
border-top: 1px solid rgba(44, 50, 50, .14);
color: rgba(44, 50, 50, .72);
display: inline-flex;
font-size: 16px;
gap: 11px;
line-height: 1.45;
padding-top: 1.1em;
text-decoration: none;
transition: color .2s ease;
}
.hero-legal a:hover {
color: var(--darker-green);
}
.hero-legal a:hover span {
text-decoration: underline;
text-underline-offset: 3px;
}
.hero-legal .lucide {
color: var(--darker-green);
flex: 0 0 auto;
font-size: 20px;
margin-top: 2px;
}
@media (max-width: 767px) {
.hero .content p.hero-legal {
margin-left: auto;
margin-right: auto;
max-width: 380px;
padding-top: 1.2em;
}
/* Block-level anchor so the divider spans the full width instead of
hugging a wrapped, centred text block. */
.hero-legal a {
align-items: center;
display: flex;
font-size: 15px;
justify-content: center;
text-align: left;
}
}
.home-legal-note {
align-items: center;
color: rgba(44, 50, 50, .68);
display: flex;
font-size: 17px !important;
gap: 12px;
justify-content: center;
line-height: 1.5;
margin: 2.4em auto 2em;
max-width: 720px;
text-align: left;
}
.home-legal-note .lucide {
color: var(--darker-green);
flex: 0 0 auto;
font-size: 24px;
}
@media (max-width: 767px) {
.home-legal-note {
font-size: 16px !important;
margin: 2em auto 1.6em;
}
}
/* ── Vertrouwensstrip onder de hero + download voorbeeldrapport ────── */
.trust-bar-section {
padding-bottom: 3em;
}
.trust-bar {
display: grid;
gap: 14px 34px;
grid-template-columns: repeat(2, minmax(0, 1fr));
list-style: none;
margin: 0 auto !important;
max-width: 1120px;
padding: 0;
margin-left: auto;
margin-right: auto;
max-width: 920px;
}
.trust-bar li {
padding-top: 14px;
}
.trust-bar a {
align-items: flex-start;
color: rgba(44, 50, 50, .72);
display: flex;
font-size: 15px;
gap: 10px;
line-height: 1.4;
text-decoration: none;
transition: color .2s ease;
justify-content: center;
}
.trust-bar a:hover {
color: var(--body);
}
.trust-bar a:hover span {
text-decoration: underline;
text-underline-offset: 3px;
}
.trust-bar .lucide {
color: var(--darker-green);
flex: 0 0 auto;
font-size: 19px;
margin-top: 1px;
}
.sample-download {
margin-top: 1.6em;
}
.sample-download small {
color: rgba(44, 50, 50, .62);
display: block;
font-size: 14px;
line-height: 1.5;
margin-top: 12px;
}
.btn .lucide {
vertical-align: -.12em;
}
.legal-entity {
display: inline-block;
font-size: 13px;
margin-top: .6em;
opacity: .62;
}
@media (max-width: 1023px) {
.trust-bar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.trust-bar {
grid-template-columns: 1fr;
}
}
.linkedin {
display: flex;
font-weight: 600;
opacity: .625;
text-decoration: none !important;
}
.linkedin:hover {
opacity: 1;
}
.linkedin svg {
display: block;
width: 30px;
height: 30px;
margin-left: 3px;
}