@charset "UTF-8";
  *,
*::before,
*::after {
box-sizing: border-box;
} * {
margin: 0;
}
p {
margin-bottom: 1.2em;
}
h1 {
margin-bottom: 0.67em;
}
h2 {
margin-bottom: 0.83em;
}
h3,
h4 {
margin-bottom: 0.83em;
} @media (prefers-reduced-motion: no-preference) {
html {
interpolate-size: allow-keywords;
}
}
body { line-height: 1.48; -webkit-font-smoothing: antialiased;
} img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
} input,
button,
textarea,
select {
font: inherit;
} p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
} p {
text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
} #root,
#__next {
isolation: isolate;
}  :root {
--header-font-size: 17px;
--h2-font-size: clamp(24px, calc(1.5rem + ((1vw - 7.68px) * 2.1858)), 40px);
--font-size-normal: 16px;
}
h2 {
font-size: var(--wp--preset--font-size--24-40);
}
.wp-block-column {
font-size: 18px;
}
html,
body {
margin: 0;
padding: 0;
border: 0;
scroll-behavior: smooth;
font-family: "Dagny Pro", sans-serif;
color: #00205c;
}
html {
font-size: 18px;
}
.wennichesmalbrauche {
font-family: "Temeraire", serif;
}
body {
overflow-x: hidden;
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
min-height: 100vh;
}
a,
button {
cursor: pointer;
}
.container {
width: calc(100% - 2 * clamp(10px, 3vw, 40px));
max-width: 1680px;
margin-left: clamp(10px, 3vw, 40px);
margin-right: clamp(10px, 3vw, 40px);
}
main {
flex-grow: 1;
}
mark {
padding-left: 14px;
padding-right: 14px;
border-radius: 9999px;
}
.deactivate-all-links a {
pointer-events: none;
}
.blue {
min-width: 20px;
min-height: 20px;
background-color: rgb(123, 139, 221);
}
.red {
min-width: 20px;
min-height: 20px;
background-color: rgb(197, 110, 110);
}
.yellow {
min-width: 20px;
min-height: 20px;
background-color: rgb(204, 216, 134);
}
.bg-health-green {
background-color: #dcf5bd;
}
.bg-light-blue {
background-color: #e0e7f3;
}
.no-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
border: 2px dashed #cbd5e0;
border-radius: 8px;
color: #64748b;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
}
.no-image-placeholder.no-image-placeholder--image::before {
content: "🖼️";
display: block;
font-size: 32px;
margin-bottom: 8px;
opacity: 0.5;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -70%);
}
.no-image-placeholder:hover {
border-color: #94a3b8;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}
.parent-img--zoom {
overflow: hidden;
}
.parent-img--zoom img {
transform: scale(1);
will-change: transform;
transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.parent-img--zoom img:hover {
transform: scale(1.035);
}
.parent-img--zoom--radius {
overflow: hidden;
border-radius: 28px;
}
.parent-img--zoom--radius img {
transform: scale(1);
will-change: transform;
transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.parent-img--zoom--radius img:hover {
transform: scale(1.035);
}
.btn {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
text-decoration: none;
transition: all cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s;
}
.btn--rounded {
padding-top: 11px;
padding: 10px 42px;
padding-bottom: 9px;
gap: 10px;
border-radius: 28px;
}
.dark-blue {
color: #fff;
background: #00205c;
border: 2px solid #00205c;
}
.dark-blue:hover {
color: #00205c;
background: #fff;
}
.btn--outline-blue {
display: inline-flex;
padding: 10px 30px;
padding-top: 10px;
padding-bottom: 9px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 28px;
border: 2px solid #081c41;
color: #081c41;
font-weight: 700;
}
.btn--outline-blue:hover {
background: #00205c;
color: #fff;
border-color: #00205c;
}
.gform_button.button {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
text-decoration: none;
transition: all cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s;
padding-top: 11px;
padding: 10px 42px;
padding-bottom: 9px;
gap: 10px;
border-radius: 28px;
display: inline-flex;
padding: 10px 30px;
padding-top: 10px;
padding-bottom: 9px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 28px;
border: 2px solid #081c41;
color: #081c41;
font-weight: 700;
background: #fff !important;
color: #00205c !important;
border-color: #00205c !important;
}
.gform_button.button:hover {
background: #00205c;
color: #fff;
border-color: #00205c;
}
.gform_button.button:hover {
background: #00205c !important;
color: #fff !important;
border-color: #00205c !important;
}
.icon-card-list .accordion-unit {
cursor: pointer;
}
.icon-card-list .accordion-unit--open {
cursor: default;
}
.icon-card-list .accordion-unit--open .accordion-title::after {
opacity: 1;
transform: translateY(0px);
}
.icon-card-list .accordion-unit--open .accordion-title::before {
opacity: 0;
transform: translateY(-15px);
}
.icon-card-list .accordion-panel {
overflow: hidden;
transition: max-height 450ms cubic-bezier(0.4, 0, 0.2, 1);
max-height: 0;
}
.icon-card-list .accordion-panel .spacer-height {
height: 15px;
}
.icon-card-list button {
cursor: pointer;
}
.icon-card-list {
--icon-width: 38px;
--text-margin-left: 28px;
display: flex;
flex-direction: column;
row-gap: 29px;
font-family: "Overpass", sans-serif;
}
.icon-card-list .accordion-unit {
background: #ffffff 0% 0% no-repeat padding-box;
border-radius: 20px;
display: flex;
flex-direction: column;
padding-top: 30px;
padding-bottom: 28px;
padding-left: clamp(30px, 1.875rem + (1vw - 7.82px) * 1.2302, 44px);
padding-right: clamp(20px, 1.25rem + (1vw - 7.82px) * 2.109, 44px);
}
.icon-card-list h3 {
display: flex;
margin: 0;
}
.icon-card-list h3 button,
.icon-card-list h3 button span {
padding-left: 0;
font-family: "Overpass", sans-serif;
color: var(--paletteColor1);
background-color: #fff;
border: none;
}
.icon-card-list h3 button {
width: 100%;
}
.icon-card-list h3 .accordion-title {
font-size: 24px;
display: flex;
justify-content: flex-start;
align-items: center;
font-weight: 600;
text-align: left;
width: 100%;
position: relative;
}
@media (max-width: 750px) {
.icon-card-list h3 .accordion-title {
font-size: 20px;
}
}
.icon-card-list h3 .accordion-title::after {
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20License%3A%20CC%20Attribution.%20Made%20by%20salesforce%3A%20https%3A%2F%2Flightningdesignsystem.com%2F%20--%3E%3Csvg%20fill%3D%22rgb(0%2C58%2C93)%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2222px%22%20height%3D%2222px%22%20viewBox%3D%220%200%2052%2052%22%20enable-background%3D%22new%200%200%2052%2052%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M4.4%2C34.2l20.5-20.7c0.6-0.6%2C1.6-0.6%2C2.2%2C0l20.5%2C20.7c0.6%2C0.6%2C0.6%2C1.6%2C0%2C2.2l-2.2%2C2.2c-0.6%2C0.6-1.6%2C0.6-2.2%2C0L27.1%2C22.2c-0.6-0.6-1.6-0.6-2.2%2C0L8.8%2C38.5c-0.6%2C0.6-1.6%2C0.6-2.2%2C0l-2.2-2.2C3.9%2C35.7%2C3.9%2C34.8%2C4.4%2C34.2z%22%2F%3E%3C%2Fsvg%3E");
content: "";
width: 22px;
height: 22px;
background-repeat: no-repeat;
display: inline-block;
padding-left: 10px;
vertical-align: middle;
font-weight: 600;
position: absolute;
right: 0;
opacity: 0;
transform: translateY(12px);
transition: opacity 375ms cubic-bezier(0.2, 0, 0, 1), transform 375ms cubic-bezier(0.2, 0, 0, 1);
}
.icon-card-list h3 .accordion-title:active::after {
opacity: 0.5;
transform: translateY(0px);
}
.icon-card-list h3 .accordion-title.active {
opacity: 1;
transform: translateY(0px);
}
.icon-card-list h3 .accordion-title::before {
content: "";
position: absolute;
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20License%3A%20CC%20Attribution.%20Made%20by%20salesforce%3A%20https%3A%2F%2Flightningdesignsystem.com%2F%20--%3E%3Csvg%20fill%3D%22rgb(0%2C58%2C93)%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2222px%22%20height%3D%2222px%22%20viewBox%3D%220%200%2052%2052%22%20enable-background%3D%22new%200%200%2052%2052%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M47.6%2C17.8L27.1%2C38.5c-0.6%2C0.6-1.6%2C0.6-2.2%2C0L4.4%2C17.8c-0.6-0.6-0.6-1.6%2C0-2.2l2.2-2.2c0.6-0.6%2C1.6-0.6%2C2.2%2C0l16.1%2C16.3c0.6%2C0.6%2C1.6%2C0.6%2C2.2%2C0l16.1-16.2c0.6-0.6%2C1.6-0.6%2C2.2%2C0l2.2%2C2.2C48.1%2C16.3%2C48.1%2C17.2%2C47.6%2C17.8z%22%2F%3E%3C%2Fsvg%3E");
right: 0;
width: 22px;
height: 22px;
background-repeat: no-repeat;
display: inline-block;
padding-left: 10px;
vertical-align: middle;
font-weight: 600;
transition: opacity 375ms cubic-bezier(0.2, 0, 0, 1), transform 375ms cubic-bezier(0.2, 0, 0, 1);
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.icon-card-list h3 .accordion-title:active::before {
opacity: 0;
transform: translateY(-15px);
}
.icon-card-list h3 .accordion-title .accordion-icon {
margin-right: var(--text-margin-left);
width: var(--icon-width);
height: auto;
display: flex;
align-items: center;
box-sizing: border-box;
}
@media (max-width: 750px) {
.icon-card-list h3 .accordion-title .accordion-icon {
margin-right: 10px;
}
.icon-card-list h3 .accordion-title .accordion-icon svg {
width: 28px;
height: 28px;
}
}
@media (max-width: 750px) {
.icon-card-list h3 .accordion-title .accordion-icon {
display: none;
}
}
.icon-card-list h3 .accordion-title .title-text {
padding-right: 35px;
flex: 1;
}
.icon-card-list .accordion-panel .spacer-height {
height: 15px;
}
.icon-card-list .accordion-panel fieldset {
padding: 0;
margin: 0;
border: none;
margin-left: calc(var(--text-margin-left) + var(--icon-width));
max-width: 860px;
}
@media (max-width: 782px) {
.icon-card-list .accordion-panel fieldset {
margin-left: 0;
}
}
.icon-card-list .accordion-panel fieldset p,
.icon-card-list .accordion-panel fieldset li {
font-size: clamp(16px, 1rem + (1vw - 7.82px) * 0.3515, 20px);
font-weight: 400;
line-height: 32px;
}
.icon-card-list .accordion-panel fieldset p:last-child,
.icon-card-list .accordion-panel fieldset li:last-child {
margin-bottom: 0;
}
.hero-block {
--gap: 30px;
--width: calc(100% - 30px);
--big-card--title: clamp(28px, calc(1.75rem + ((1vw - 5px) * 1.2999)), 42px);
--big-card--text: clamp(18px, calc(1.125rem + ((1vw - 3.75px) * 0.1474)), 20px);
--small-card--title: 20px;
--small-card--title--big: clamp(24px, calc(1.5rem + ((1vw - 13.8px) * 5.0761)), 34px);
display: flex;
gap: var(--gap);
max-height: fit-content;
}
.hero-block__big-image {
width: calc(var(--width) / 2);
}
.hero-block__big-image img,
.hero-block__big-image svg {
width: 100%;
border-radius: 28px;
}
.hero-block .hero__grid {
flex: 1;
display: flex;
flex-direction: column;
row-gap: 30px;
}
.hero-block .hero__grid .big-card {
--icon-width: 45px;
background: linear-gradient(280deg, #bcdc4a 2.26%, #9dd4cf 97.74%);
border-radius: 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 50px;
height: 57%;
}
.hero-block .hero__grid .big-card__head {
display: flex;
}
.hero-block .hero__grid .big-card__head .wp-block-heading {
flex: 1;
font-size: var(--big-card--title);
color: #00205c;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1.3em;
}
.hero-block .hero__grid .big-card__foot {
display: flex;
gap: 5px;
}
.hero-block .hero__grid .big-card__foot p {
margin-bottom: 0;
font-size: var(--big-card--text);
}
.hero-block .hero__grid .big-card .big-card__link-button {
min-width: fit-content;
background: none;
border: none;
display: flex;
align-items: flex-start;
}
.hero-block .hero__grid .big-card .big-card__link-button svg {
width: var(--icon-width);
height: var(--icon-width);
}
.hero-block .hero__grid .big-card .big-card__link-button--mobile {
display: none;
}
.hero-block .hero__grid .hero__small-grid {
--card-gap: 30px;
--card-width: calc((100% - 30px) / 2);
display: flex;
flex-grow: 1;
gap: var(--card-gap);
}
.hero-block .hero__grid .hero__small-grid .small-card {
width: calc(var(--card-width));
border-radius: 28px;
padding: 35px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hero-block .hero__grid .hero__small-grid .small-card .small-card__title--small {
font-size: var(--small-card--title);
}
.hero-block .hero__grid .hero__small-grid .small-card .small-card__title--medium {
font-size: var(--small-card--title--big);
font-family: "Temeraire", serif;
line-height: 1.3em;
font-weight: normal;
font-style: normal;
}
.hero-block .hero__grid .hero__small-grid .small-card .small-card__symbol {
display: flex;
justify-content: end;
}
@media (max-width: 1200px) {
.hero-block {
--big-card--title: 32px;
}
}
@media (max-width: 1240px) {
.hero-block .hero__grid .hero__small-grid {
--card-width: 100%;
}
.hero-block .hero__grid .hero__small-grid .small-card-second {
display: none;
}
}
@media (max-width: 1100px) {
.hero-block {
--big-card--title: 28px;
flex-direction: column;
min-height: fit-content;
}
.hero-block__big-image {
width: 100%;
height: 45%;
}
.hero-block__big-image img,
.hero-block__big-image svg {
width: 100%;
height: 100%;
object-fit: cover;
max-height: 535px;
}
.hero-block .hero__grid {
flex: unset;
}
.hero-block .hero__grid .big-card {
height: fit-content;
gap: 50px;
}
.hero-block .hero__grid .big-card .big-card__link-button--desktop {
display: none;
}
.hero-block .hero__grid .big-card .big-card__link-button--mobile {
display: flex;
align-items: flex-end;
}
.hero-block .hero__grid .hero__small-grid {
display: none;
}
}
@media (max-width: 900px) {
.hero-block .hero__grid .big-card {
padding: 40px;
}
}
@media (max-width: 700px) {
.hero-block .hero__grid .big-card {
padding: 30px;
}
}
@media (max-width: 400px) {
.hero-block {
--big-card--title: 24px;
}
}
.card-overview {
--ink: #ffffff;
--title: #00205c;
--bg: #f5f7fb;
--radius: 28px;
--gap: 30px;
--padding: 40px;
width: 100%;
}
.card-overview__title {
margin: 0 0 14px;
font-weight: 800;
font-size: clamp(20px, 2.2vw, 28px);
color: var(--title);
} .card-overview__list {
padding: 0;
list-style: none;
display: flex;
gap: var(--gap);
flex-wrap: wrap;
justify-content: center;
} .card-overview__card {
position: relative;
height: 34vw;
max-height: 400px;
border-radius: 24px;
overflow: hidden;
isolation: isolate;
box-shadow: 0 2px 12px rgba(10, 23, 42, 0.1); transition: box-shadow 0.35s ease;
flex: 1;
min-width: 340px;
}
@media (max-width: 1529px) {
.card-overview__card {
flex: 48%;
}
} .card-overview__link {
position: relative;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: inherit;
}
.card-overview__link:focus-visible {
outline: 3px solid rgba(61, 130, 255, 0.9);
outline-offset: 4px;
border-radius: 24px;
} .card-overview__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.98);
transform: scale(1);
will-change: transform;
transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
} .card-overview__vignette {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(8, 28, 65, 0) 0%, rgba(8, 28, 65, 0.8) 100%);
pointer-events: none;
opacity: 1;
transition: opacity 0.35s ease;
} .card-overview__overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: flex-end;
padding: var(--padding);
}
.card-overview__overlay-text {
width: calc(100% - 10px - var(--padding));
}
.card-overview__heading {
margin: 0 0 21px;
color: var(--ink);
font-weight: 700;
font-size: 21px;
line-height: 1.25;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.card-overview__desc {
margin: 0;
color: var(--ink);
opacity: 0.95;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
color: #fff;
font-size: clamp(16px, 1rem + (1vw - 7.68px) * 0.5464, 18px);
font-weight: 400;
line-height: 26px; }
@media (max-width: 800px) {
.card-overview__desc {
line-height: 1.35em;
}
} .card-overview__cta {
position: absolute;
right: var(--padding);
bottom: var(--padding);
z-index: 3;
border-radius: 50%;
border: 2px solid #fff;
display: grid;
place-items: center;
width: 45px;
height: 45px;
transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}
.card-overview__cta svg {
width: 18px;
height: 18px;
fill: none;
stroke: #0a2540;
stroke-width: 2;
} .card-overview__card:hover {
box-shadow: 0 12px 30px rgba(10, 23, 42, 0.2);
}
.card-overview__card:hover .card-overview__image {
transform: scale(1.035);
}
.card-overview__card:hover .card-overview__vignette {
opacity: 1.07;
}
.card-overview__card:hover .card-overview__cta {
box-shadow: 0 4px 12px rgba(10, 23, 42, 0.18);
} .card-overview__card::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
opacity: 0.6;
transition: opacity 0.35s ease;
}
.card-overview__card:hover::after {
opacity: 0.9;
}
@media (max-width: 768px) {
.card-overview__card {
min-height: 340px;
max-height: 340px;
}
} @media (max-width: 640px) {
.card-overview__card {
height: 260px;
border-radius: 22px;
min-width: 100%;
}
} @media (prefers-reduced-motion: reduce) {
.card-overview__image,
.card-overview__vignette,
.card-overview__cta,
.card-overview__card {
transition: none !important;
}
} .card-overview__card--small {
min-height: 400px;
max-height: 400px;
}
.highlight-section {
--gap: clamp(16px, 2vw, 32px);
display: grid;
grid-template-columns: calc(60% - var(--gap) / 2) calc(40% - var(--gap) / 2);
column-gap: var(--gap);
row-gap: 30px;
align-items: stretch;
}
@media (max-width: 1440px) {
.highlight-section {
grid-template-columns: 1fr;
}
}
@media (max-width: 800px) {
.highlight-section {
display: flex;
flex-direction: column;
}
}
.highlight-section .wp-block-heading {
font-size: var(--wp--preset--font-size--32-47);
color: #00205c;
margin-bottom: 40px;
}
.highlight-section__text {
position: relative;
background: #dcf5bd;
border-radius: 28px;
padding: 90px clamp(24px, 1.5rem + (1vw - 7.68px) * 7.6503, 80px);
padding-top: clamp(52px, 3.25rem + (1vw - 7.68px) * 5.1913, 90px);
padding-bottom: clamp(28px, 1.5rem + (1vw - 7.68px) * 7.6503, 80px);
font-size: var(--font-size-normal);
max-height: fit-content;
display: block;
}
.highlight-section__text p {
margin-bottom: 25px;
}
.highlight-section__text .highlight-section__actions .btn {
margin-top: 40px;
}
.highlight-section__text mark {
margin-left: -10px;
}
.highlight-section__media {
height: 100%;
}
@media (max-width: 1440px) {
.highlight-section__media {
aspect-ratio: 2/1;
}
}
.highlight-section__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.highlight-section__button-group {
padding-top: 10px;
}
@media (max-width: 580px) {
.highlight-section__button-group {
flex-direction: column;
display: flex;
align-items: start;
}
}
.highlight-section__corner-svg {
position: absolute;
right: 3vw;
bottom: 0;
}
.hero-single-block {
background: linear-gradient(280deg, #bcdc4a 2.26%, #9dd4cf 97.74%);
border-radius: 28px;
padding: 50px;
height: 57%;
display: flex;
flex-wrap: wrap;
column-gap: 30px;
row-gap: 70px;
padding-right: 90px;
}
@media (max-width: 900px) {
.hero-single-block {
padding-right: 50px;
}
}
@media (max-width: 768px) {
.hero-single-block {
padding: 24px 30px;
}
}
.hero-single-block .wp-block-heading {
flex-basis: 50%;
margin: 0;
font-size: var(--wp--preset--font-size--32-47);
flex-grow: 1;
}
@media (max-width: 420px) {
.hero-single-block .wp-block-heading {
word-break: break-word;
}
}
.hero-single-block .description {
flex-basis: 577px;
align-self: end;
font-size: clamp(18px, 1.125rem + (1vw - 3.75px) * 0.1474, 20px);
max-width: 100%;
flex-grow: 1;
}
.hero-single-block .description > :last-child {
margin-bottom: 0;
}
.product-overview-block {
--grid-gap: 26px;
display: flex;
flex-wrap: wrap;
gap: var(--grid-gap);
}
.product-overview-block .po-card {
padding: 50px;
border-radius: 28px;
background: #e0e7f3;
flex-basis: auto;
min-width: 520px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
@media (max-width: 1000px) {
.product-overview-block .po-card {
min-width: 0px;
flex-basis: 100%;
}
}
@media (max-width: 768px) {
.product-overview-block .po-card {
padding: 60px 25px;
}
}
@media (max-width: 600px) {
.product-overview-block .po-card {
padding: 47px 19px;
}
}
.product-overview-block .po-card__head {
--gap: 17px;
display: flex;
gap: var(--gap);
}
@media (max-width: 1300px) {
.product-overview-block .po-card__head {
flex-wrap: wrap;
}
}
.product-overview-block .po-card__title {
font-family: "Temeraire", serif;
flex-basis: calc(50% - var(--gap) / 2);
font-size: var(--wp--preset--font-size--32-38);
font-weight: 400;
line-height: 40px;
margin-right: auto;
}
.product-overview-block .po-card__image {
--main-height: 180px;
flex-basis: calc(50% - var(--gap) / 2);
height: var(--main-height);
flex-grow: 1;
max-width: 90%;
max-width: 400px;
justify-self: end;
}
@media (max-width: 1546px) {
.product-overview-block .po-card__image {
height: calc(var(--main-height) + 15px);
}
}
@media (max-width: 950px) {
.product-overview-block .po-card__image {
height: var(--main-height);
}
}
.product-overview-block .po-card__image img {
width: 100%;
height: 100%;
border-radius: 20px;
object-fit: cover;
}
.product-overview-block .po-card__content-title {
font-size: var(--wp--preset--font-size--20-24);
font-weight: bold;
margin-bottom: 20px;
}
.product-overview-block .po-card__content-text {
font-weight: 400;
font-size: var(--wp--preset--font-size--16-20);
line-height: 1.6em;
max-width: 72ch;
}
.product-overview-block .po-card__content-actions {
margin-top: 30px;
display: flex;
flex-wrap: wrap;
gap: 22px;
} .no-products {
--np-bg-start: #f8f9fa;
--np-bg-end: #e9ecef;
--np-border: #dee2e6;
--np-text: #495057;
--np-sub: #6c757d;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
padding: 60px 40px;
margin: 40px 0;
background: linear-gradient(135deg, var(--np-bg-start) 0%, var(--np-bg-end) 100%);
border-radius: 12px;
border: 2px dashed var(--np-border);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.no-products__icon {
width: min(100px, 40%);
margin-bottom: 20px;
opacity: 0.85;
}
.no-products__svg {
width: 100%;
height: auto;
display: block;
}
.no-products__title {
margin: 0 0 10px;
font-size: 24px;
font-weight: 600;
color: var(--np-text);
}
.no-products__text {
margin: 0 0 18px;
font-size: 16px;
line-height: 1.55;
color: var(--np-sub);
}
.no-products__cta {
margin-top: 6px;
}
.breadcrumb-block {
padding: 30px 0;
width: 100%;
}
.breadcrumb-block .breadcrumb-navigation .breadcrumb-list {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
justify-content: flex-end;
flex-wrap: wrap;
}
@media (max-width: 350px) {
.breadcrumb-block .breadcrumb-navigation .breadcrumb-list {
justify-content: flex-start;
}
}
.breadcrumb-block .breadcrumb-navigation .breadcrumb-item {
font-size: 15px;
display: flex;
align-items: center;
}
.breadcrumb-block .breadcrumb-navigation .breadcrumb-link {
color: #00205c;
text-decoration: none;
font-weight: 400;
transition: color 0.3s ease;
}
.breadcrumb-block .breadcrumb-navigation .breadcrumb-link:hover {
text-decoration: underline;
}
.breadcrumb-block .breadcrumb-navigation .breadcrumb-separator {
display: flex;
align-items: center;
}
.breadcrumb-block .breadcrumb-navigation .breadcrumb-separator svg {
fill: none;
stroke: #00205c;
}
.breadcrumb-block .breadcrumb-navigation .breadcrumb-current {
font-weight: 700;
} .product-image-block figure {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.product-image-block figure img {
object-fit: cover;
height: auto;
width: 100%;
max-width: 320px;
max-height: 400px;
}
.product-image-block .no-image-placeholder::before {
content: "🖼️";
display: block;
font-size: 32px;
margin-bottom: 8px;
opacity: 0.5;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -70%);
}
.is-style-product-content-box {
border-radius: 28px;
padding: 40px;
background-color: var(--wp--preset--color--health-soft);
}
.is-style-product-content-box > * {
max-width: 761px;
margin-left: auto;
margin-right: auto;
font-size: 20px;
}
.is-style-product-content-box p {
margin-bottom: 1.5em;
}
.is-style-reading-width > * {
max-width: 72ch;
}
.is-style-lacsell-image {
overflow: hidden;
border-radius: 28px;
max-width: fit-content;
height: 100%;
margin: 0;
}
.is-style-lacsell-image img {
height: 100%;
object-fit: cover;
}
.is-style-lacsell-image img {
transform: scale(1);
will-change: transform;
transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.is-style-lacsell-image img:hover {
transform: scale(1.035);
}
.is-style-text-image {
gap: clamp(50px, 2vw, 80px);
flex-wrap: wrap !important;
}
.is-style-text-image .wp-block-column {
flex-basis: 350px !important;
width: 100% !important;
flex-grow: 1 !important;
}
.is-style-text-image > .wp-block-column:first-of-type {
flex-basis: 457px !important;
}
#lacsell-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 30px;
padding-bottom: 53px;
z-index: 100;
position: relative;
}
#lacsell-header .logo-nav {
display: flex;
}
#lacsell-header .logo {
padding-right: clamp(10px, 4vw, 90px);
}
@media (max-width: 1474px) {
#lacsell-header .logo {
padding-right: clamp(10px, 2vw, 25px);
}
}
#lacsell-header .primary-navigation {
list-style: none;
align-items: center;
height: 100%;
}
#lacsell-header .primary-navigation a {
text-decoration: none;
color: var(--color-text-primary);
font-size: var(--header-font-size);
font-weight: 600;
}
#lacsell-header .primary-navigation a:hover {
text-decoration: underline;
text-underline-offset: 6px;
}
#lacsell-header .extras {
display: flex;
gap: 22px;
}
.desktop-navigation {
padding-left: 0;
display: none;
}
@media (min-width: 1239px) {
.desktop-navigation {
display: flex;
}
}
.wpml-floating-language-switcher ul {
border: none !important;
}
.wpml-floating-language-switcher * {
color: #00205c;
}
.wpml-ls-statics-shortcode_actions > ul {
padding-right: 15px !important;
padding-left: 15px !important;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.js-wpml-ls-sub-menu {
visibility: visible;
background: #fff;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
padding-right: 15px !important;
padding-left: 15px !important;
padding-bottom: 15px !important;
}
.wpml-ls-legacy-dropdown-click {
width: 5.5em !important;
}
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
margin-bottom: 0;
}
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions a {
background-color: transparent !important;
opacity: 0.7;
}
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions a:hover {
opacity: 1;
}
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
padding: 5px;
}
.js-wpml-ls-item-toggle {
border: none !important;
}
.js-wpml-ls-item-toggle[style*="visibility: visible"] {
border-top-right-radius: 16px;
border-top-left-radius: 16px;
background: #00205c;
color: #fff;
}
.wpml-ls-link {
border: none !important;
}
.wpml-ls-current-language > a {
opacity: 1 !important;
}
@media (min-width: 1px) {
a.js-wpml-ls-item-toggle.wpml-ls-item-toggle.hide-after::after {
content: unset !important;
}
}
header .top-level-menu-item {
position: relative;
}
header .top-level-menu-item > a {
padding-right: 40px;
padding-left: 40px;
padding-top: 19px;
padding-bottom: 19px;
padding: 19px 30px;
}
@media (max-width: 1474px) {
header .top-level-menu-item > a {
padding: 16px;
}
}
header .sub-menu {
display: none;
}
header .menu-item--active {
border-top-right-radius: 16px;
border-top-left-radius: 16px;
background: #00205c;
color: #fff;
}
header .menu-item--active > a {
border-radius: 16px;
background: #00205c;
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.25);
color: #fff;
}
header .menu-item--active .sub-menu {
display: flex;
flex-direction: column;
width: 100%;
position: absolute;
top: 30px;
left: 0;
padding-top: 40px;
padding-right: 30px;
padding-left: 30px;
list-style: none;
background: #00205c;
padding-bottom: 30px;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}
header .menu-item--active .sub-menu .menu-item {
padding: 0;
padding-top: 5px;
padding-bottom: 5px;
} .burger-button {
width: 36px;
height: 36px;
background: #00205c;
border: none;
border-radius: 6px;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@media (min-width: 1239px) {
.burger-button {
display: none;
}
}
.burger-button:hover:not(.is-active) {
background: #00205c;
} .burger-button.is-active {
background: white;
}
.burger-button.is-active:hover {
background: #f5f5f5;
}
.burger-button:focus {
outline: 2px solid #00205c;
outline-offset: 2px;
} .burger-lines {
width: 18px;
height: 14px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
} .burger-line {
width: 100%;
height: 2px;
background: white;
border-radius: 1px;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-origin: center;
position: absolute;
}
.burger-line--top {
top: 0;
}
.burger-line--middle {
top: 50%;
transform: translateY(-50%);
}
.burger-line--bottom {
bottom: 0;
}
.burger-button.burger-button.is-active .burger-line {
background: #00205c;
} .burger-button.is-active .burger-line--top {
transform: translateY(6px) rotate(45deg);
}
.burger-button.is-active .burger-line--middle {
opacity: 0;
transform: translateX(-8px);
}
.burger-button.is-active .burger-line--bottom {
transform: translateY(-6px) rotate(-45deg);
} :root {
--primary-blue: $color-primary;
--hover-blue: $color-primary;
--text-dark: $color-primary;
--bg-light: #fff;
--transition-duration: 0.4s;
--transition-easing: cubic-bezier(0.68, -0.55, 0.265, 1.55);
} .mobile-menu-overlay {
border-top-left-radius: 20px;
position: fixed;
top: var(--header-height);
right: 0;
width: 100%;
max-width: 400px;
height: calc(100vh - var(--header-height));
background: white;
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
transform: translateX(100%);
transition: transform var(--transition-duration) var(--transition-easing);
z-index: 999;
overflow-y: auto;
overflow-x: hidden;
}
.mobile-menu-overlay.is-open {
transform: translateX(0);
} .mobile-nav-container {
position: relative;
width: 100%;
height: 100%;
} .nav-panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
padding: 20px;
transform: translateX(0);
transition: transform var(--transition-duration) var(--transition-easing), opacity var(--transition-duration) ease;
display: flex;
flex-direction: column;
}
.nav-panel--main {
opacity: 1;
}
.nav-panel--sub {
transform: translateX(100%);
opacity: 0;
} .mobile-nav-container.show-submenu .nav-panel--main {
transform: translateX(-100%);
opacity: 0.3;
}
.mobile-nav-container.show-submenu .nav-panel--sub {
transform: translateX(0);
opacity: 1;
} .mobile-menu {
list-style: none;
padding: 0;
margin: 0;
} .mobile-menu.main-menu { margin: 0;
padding: 0;
}
.mobile-menu-item,
.mobile-menu .menu-item {
margin-bottom: 5px;
list-style: none;
}
.mobile-menu-link,
.mobile-menu .menu-item a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px;
color: var(--primary-blue);
text-decoration: none;
font-size: 24px;
font-weight: 400;
transition: background-color 0.2s ease;
}
.mobile-menu-link:hover,
.mobile-menu .menu-item a:hover {
text-decoration: underline;
text-underline-offset: 6px;
}
.mobile-menu-link:hover,
.mobile-menu .menu-item a:hover {
background: var(--bg-light);
}
.mobile-menu-link.has-children::after,
.mobile-menu .menu-item a.has-children::after {
content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%2211%22%20viewBox%3D%220%200%206%2011%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M5.37113%200.646729L1.01074%205.70174L5.37113%2010.3534%22%20stroke%3D%22%2300205C%22%2F%3E%0A%3C%2Fsvg%3E");
font-size: 24px;
color: var(--primary-blue);
margin-left: auto;
top: -2px;
position: relative;
transform: scaleX(-1);
} .mobile-menu .sub-menu {
display: none;
} .back-button {
display: flex;
align-items: center;
padding: 15px 10px;
margin-bottom: 8px;
color: var(--primary-blue);
background: none;
border: none;
font-size: 16px;
font-weight: 400;
cursor: pointer;
transition: opacity 0.2s ease;
width: 100%;
text-align: left;
}
.back-button:hover {
opacity: 0.7;
}
.back-button::before {
content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%2211%22%20viewBox%3D%220%200%206%2011%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M5.37113%200.646729L1.01074%205.70174L5.37113%2010.3534%22%20stroke%3D%22%2300205C%22%2F%3E%0A%3C%2Fsvg%3E");
font-size: 24px;
margin-right: 10px;
top: -2px;
position: relative;
} .submenu-title {
font-size: 24px;
font-weight: 700;
color: var(--primary-blue);
margin-bottom: 23px;
padding: 0 10px;
} .mobile-menu-footer {
margin-top: 40px;
padding-top: 20px;
padding: 0;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: end;
margin-bottom: 10px;
gap: 5px;
}
.mobile-menu-footer li {
list-style: none;
}
.mobile-menu-footer a {
color: #00205c !important;
}
.mobile-menu-footer .mobile-menu-link {
font-size: 14px;
color: #666;
} .menu-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-duration) ease, visibility var(--transition-duration) ease;
z-index: 998;
}
.menu-backdrop.is-visible {
opacity: 1;
visibility: visible;
} @media (max-width: 500px) {
.mobile-menu-overlay {
max-width: 100%;
border-top-left-radius: 0;
box-shadow: none;
}
} body.admin-bar .mobile-menu-overlay {
top: calc(var(--header-height) + 32px);
height: calc(100vh - var(--header-height) - 32px);
}
body.admin-bar .menu-backdrop {
top: calc(var(--header-height) + 32px);
}
@media screen and (max-width: 782px) {
body.admin-bar .mobile-menu-overlay {
top: calc(var(--header-height) + 46px);
height: calc(100vh - var(--header-height) - 46px);
}
body.admin-bar .menu-backdrop {
top: calc(var(--header-height) + 46px);
}
}
@media (min-width: 1239px) {
.menu-backdrop {
display: none;
}
.mobile-menu-overlay {
display: none;
}
}
footer {
justify-self: center;
margin-bottom: clamp(35px, 2.1875rem + (1vw - 7.68px) * 5.2083, 70px);
margin-top: clamp(60px, 1.375rem + (1vw - 7.68px) * 7.1429, 70px);
}
.footer-container {
gap: 30px;
background: #081c41;
border-radius: 28px;
padding: clamp(40px, 2.5rem + (1vw - 7.68px) * 5.9524, 80px);
color: #fff;
width: 100%;
display: flex;
justify-content: space-between;
}
.footer-container .first-column {
width: 50%;
}
.footer-container .first-column p:last-child {
margin-bottom: 0;
}
.footer-container .second-column {
display: none;
flex: 1;
gap: 15px;
flex-wrap: wrap;
height: fit-content;
}
.footer-container .third-column {
width: max-content;
min-width: 120px;
font-size: 17px;
font-style: normal;
font-weight: 400;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.footer-container .third-column ul {
list-style: none;
padding-left: 0;
}
.footer-container .btn--light-rounded-outline {
border: 2px solid #fff;
border-radius: 15px;
padding-top: 9px;
padding-bottom: 9px;
padding-left: 20px;
padding-right: 20px;
display: flex;
flex-wrap: nowrap;
color: #fff;
font-size: clamp(20px, 1.25rem + (1vw - 7.68px) * 2.1858, 36px);
height: fit-content;
}
.footer-container .btn--light-rounded-outline:hover {
background-color: #fff;
color: #00205c;
}
.footer-title-big {
display: flex;
flex-direction: column;
font-size: var(--wp--preset--font-size--32-47);
font-weight: 700;
line-height: 1.25em;
}
.footer-title-big mark {
word-break: keep-all;
color: #00205c;
background: #bcdc4a;
margin-left: -10px;
}
@media (max-width: 1240px) {
.footer-container {
flex-direction: column;
gap: 50px;
}
.footer-container .column {
width: 100%;
}
.footer-container .second-column {
order: -1;
}
.footer-container .footer-title-big {
gap: 5px;
}
}
.footer-menu a {
color: #fff;
text-decoration: none;
font-size: 17px;
font-weight: 400;
}
.footer-menu a:hover {
text-decoration: underline;
text-underline-offset: 6px;
}
.gform-theme--framework input[type=checkbox]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *))::before {
color: #081c41 !important;
}
.gfield_description {
color: #081c41 !important;
opacity: 0.8 !important;
}
.gform-field-label.gform-field-label--type-sub {
color: #081c41 !important;
opacity: 0.8 !important;
}