#honeypot-field-url{display:none!important}.comment-form-cookies-consent{width:100%;overflow:hidden}.wc_apbct_email_id{display:none!important}.um-form input[type=text].apbct_special_field,input[class*=apbct].apbct_special_field,label[id*=apbct_label_id].apbct_special_field{display:none!important}.apbct-tooltip{display:none;position:inherit;margin-top:5px;left:5px;background:#d3d3d3;border-radius:5px;opacity:.9}.apbct-tooltip--text{position:sticky;background:#d3d3d3;padding:10px;border-radius:5px;width:max-content}.apbct-tooltip--arrow{position:absolute;background:#d3d3d3;width:10px;height:10px;top:-5px;left:10px;transform:rotate(135deg)}.apbct-trusted-text--div{font-size:small!important;display:inline-block;text-align:center;width:100%;margin-bottom:2pc}.apbct-trusted-text--center{font-size:small!important;display:block;text-align:center;width:100%;margin-bottom:2pc}.apbct-trusted-text--label{font-size:small!important;display:inline-block;text-align:center;width:100%;padding:5px 0 5px 0}.apbct-trusted-text--label_left{font-size:small!important;display:inline-block;text-align:left;padding:5px 0 5px 0}.apbct-trusted-text--span{display:inline-block}.apbct-popup-fade:before{content:'';background:#000;position:fixed;left:0;top:0;width:100%;height:100%;opacity:.7;z-index:9999}.apbct-popup{position:fixed;top:20%;left:50%;padding:20px;width:360px;margin-left:-200px;background:#fff;border:1px solid;border-radius:4px;z-index:99999;opacity:1}.apbct-check_email_exist-bad_email,.apbct-check_email_exist-good_email,.apbct-check_email_exist-load{z-index:9999!important;transition:none!important;background-size:contain;background-repeat:no-repeat!important;background-position-x:right;background-position-y:center;cursor:pointer!important}.apbct-check_email_exist-load{background-size:contain;background-image:url(//www.hecon-gmbh.com/wp-content/plugins/cleantalk-spam-protect/css/images/checking_email.gif)!important}.apbct-check_email_exist-block{position:fixed!important;display:block!important}.apbct-check_email_exist-good_email{background-image:url(//www.hecon-gmbh.com/wp-content/plugins/cleantalk-spam-protect/css/images/good_email.svg)!important}.apbct-check_email_exist-bad_email{background-image:url(//www.hecon-gmbh.com/wp-content/plugins/cleantalk-spam-protect/css/images/bad_email.svg)!important}.apbct-check_email_exist-popup_description{display:none;position:fixed!important;padding:2px!important;border:1px solid #e5e8ed!important;border-radius:16px 16px 0 16px!important;background:#fff!important;background-position-x:right!important;font-size:14px!important;text-align:center!important;transition:all 1s ease-out!important}@media screen and (max-width:782px){.apbct-check_email_exist-popup_description{width:100%!important}}.ct-encoded-form{display:none}.ct-encoded-form-loader{display:block;width:48px;height:48px;border:5px solid #f3f3f3;border-top:5px solid #3498db;border-radius:50%;animation:ct-encoded-form-loader-spin 1s linear infinite;margin:auto}@keyframes ct-encoded-form-loader-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.ct-encoded-form-forbidden{display:block;border:1px solid red;padding:10px;background:#fdd;color:red;font-weight:700}.comments-area .comment-list article .comment-author{overflow:visible!important}.apbct-email-encoder-popup{width:30vw;min-width:400px;font-size:16px}.apbct-email-encoder--popup-header{font-size:16px;color:#333}.apbct-email-encoder-elements_center{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:16px!important;color:#000!important}.top-margin-long{margin-top:5px}.apbct-tooltip{display:none}.apbct-email-encoder{position:relative}.apbct-blur{filter:blur(5px);transition:filter 2s}.apbct-email-encoder.no-blur .apbct-blur{filter:none}.apbct-email-encoder-select-whole-email{-webkit-user-select:all;user-select:all}.apbct-email-encoder-got-it-button{all:unset;margin-top:10px;padding:5px 10px;border-radius:5px;background-color:#333;color:#fff;cursor:pointer;transition:background-color .3s}.apbct-ee-animation-wrapper{display:flex;height:60px;justify-content:center;font-size:16px;align-items:center}.apbct_dog{margin:0 5px;color:transparent;text-shadow:0 0 2px #aaa}.apbct_dog_one{animation-duration:1.5s;animation-iteration-count:infinite;animation-delay:0s;animation-name:apbct_dog}.apbct_dog_two{animation-duration:1.5s;animation-iteration-count:infinite;animation-delay:.5s;animation-name:apbct_dog}.apbct_dog_three{animation-duration:1.5s;animation-iteration-count:infinite;animation-delay:1s;animation-name:apbct_dog}@keyframes apbct_dog{0%{scale:100%;color:transparent;text-shadow:0 0 2px #aaa}25%{scale:200%;color:unset;text-shadow:unset}75%{scale:100%;color:transparent;text-shadow:0 0 2px #aaa}100%{scale:100%;color:transparent;text-shadow:0 0 2px #aaa}}.apbct-email-encoder--settings_example_encoded{position:relative}@media screen and (max-width:782px){.apbct-email-encoder--settings_example_encoded{position:relative;display:block}.apbct-email-encoder-popup{width:20vw;min-width:200px;font-size:16px;top:20%;left:75%}.apbct-email-encoder-elements_center{flex-direction:column!important;text-align:center}}.apbct-real-user-wrapper{display:inline-flex;color:#000!important;flex-wrap:nowrap;justify-content:center;flex-direction:row;align-items:center}.apbct-real-user-wrapper-woo{display:inline;align-items:center;color:#444!important;font-size:14px}.apbct-real-user-author-name{display:inline-flex}.apbct-real-user-badge{display:inline-flex;padding-left:6px;cursor:pointer;position:relative}.apbct-real-user-popup{position:absolute;padding:8px;font-weight:400;color:#000!important;background:#fff;border:1px #ccc solid;border-radius:4px;box-shadow:5px 5px 24px -11px #444;z-index:-1;cursor:default;opacity:0;transition-property:opacity,z-index}.apbct-real-user-popup.visible{z-index:1;opacity:1}.apbct-real-user-title{display:grid;gap:4px!important}.apbct-real-user-popup-content_row{display:flex;flex-direction:column;gap:1px}.apbct-real-user-popup-content_row *{color:grey;font-style:italic}.apbct-real-user-popup-content_row strong{color:initial;font-style:initial}.apbct-real-user-popup-img{align-self:start;margin:0!important;height:.9em;vertical-align:sub}.apbct-real-user-popup-header{font-weight:bolder;margin:2px!important}.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
word-break: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}.osp-wpb-hecon {
--hecon-ink: #173345;
--hecon-ink-soft: #365667;
--hecon-blue: #2e6483;
--hecon-blue-strong: #1c4b68;
--hecon-blue-dark: #102c3d;
--hecon-sky: #dfe9ef;
--hecon-sky-soft: #eef4f7;
--hecon-line: rgba(23, 51, 69, 0.15);
--hecon-white: #ffffff;
--hecon-shadow: 0 28px 70px rgba(18, 47, 65, 0.12);
--hecon-shadow-soft: 0 16px 42px rgba(18, 47, 65, 0.08);
color: var(--hecon-ink);
font-family: inherit;
}
.osp-wpb-hecon a {
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.osp-hecon-home-hero {
position: relative;
min-height: min(860px, calc(100vh - 78px));
overflow: hidden;
background:
radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.72), transparent 32%),
linear-gradient(125deg, #eff5f7 0%, #dce8ee 48%, #c7d9e3 100%);
}
.osp-hecon-home-hero::before,
.osp-hecon-home-hero::after {
position: absolute;
content: "";
pointer-events: none;
}
.osp-hecon-home-hero::before {
inset: -16% -8% auto auto;
width: 58vw;
height: 58vw;
max-width: 900px;
max-height: 900px;
opacity: 0.28;
background-image:
linear-gradient(30deg, transparent 48%, rgba(28, 75, 104, 0.13) 49%, rgba(28, 75, 104, 0.13) 51%, transparent 52%),
linear-gradient(150deg, transparent 48%, rgba(28, 75, 104, 0.1) 49%, rgba(28, 75, 104, 0.1) 51%, transparent 52%);
transform: rotate(12deg);
}
.osp-hecon-home-hero::after {
right: -110px;
bottom: -185px;
width: 470px;
height: 410px;
border: 1px solid rgba(255, 255, 255, 0.55);
clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}
.osp-hecon-home-hero__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(620px, 1.12fr);
align-items: center;
gap: clamp(20px, 3vw, 58px);
width: min(calc(100% - 64px), 1540px);
min-height: inherit;
margin-inline: auto;
padding: clamp(86px, 8vw, 130px) 0 clamp(72px, 7vw, 110px);
}
.osp-hecon-home-hero__copy {
max-width: 690px;
margin: 0;
}
.osp-hecon-kicker {
margin: 0 0 18px;
color: var(--hecon-blue);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.17em;
text-transform: uppercase;
}
.osp-hecon-home-hero__title {
max-width: 690px;
margin: 0;
color: var(--hecon-ink);
font-size: clamp(52px, 5.5vw, 88px);
font-weight: 650;
line-height: 0.98;
letter-spacing: -0.045em;
}
.osp-hecon-home-hero__claim {
margin: 28px 0 10px;
color: var(--hecon-blue-strong);
font-size: clamp(20px, 2vw, 27px);
font-weight: 650;
letter-spacing: -0.02em;
}
.osp-hecon-home-hero__lead {
max-width: 610px;
margin: 0;
color: var(--hecon-ink-soft);
font-size: clamp(17px, 1.35vw, 21px);
line-height: 1.65;
}
.osp-hecon-home-hero__buttons,
.osp-hecon-home-cta__buttons {
gap: 12px;
margin-top: 32px;
}
.osp-hecon-button-primary .wp-block-button__link,
.osp-hecon-button-secondary .wp-block-button__link,
.osp-hecon-button-light .wp-block-button__link {
padding: 14px 23px;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.02em;
text-decoration: none;
}
.osp-hecon-button-primary .wp-block-button__link {
border: 1px solid var(--hecon-blue-dark);
background: var(--hecon-blue-dark);
color: #fff;
}
.osp-hecon-button-secondary .wp-block-button__link {
border: 1px solid rgba(23, 51, 69, 0.38);
background: rgba(255, 255, 255, 0.38);
color: var(--hecon-ink);
}
.osp-hecon-button-light .wp-block-button__link {
border: 1px solid rgba(255, 255, 255, 0.88);
background: #fff;
color: var(--hecon-blue-dark);
}
.osp-hecon-hexcluster {
position: relative;
min-height: 650px;
isolation: isolate;
}
.osp-hecon-hex {
position: absolute;
display: flex;
width: 230px;
min-height: 205px;
flex-direction: column;
justify-content: center;
padding: 38px 34px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.72);
background: rgba(250, 253, 255, 0.78);
box-shadow: var(--hecon-shadow);
clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
backdrop-filter: blur(10px);
transition: transform 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}
.osp-hecon-hex:hover {
z-index: 10;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 34px 84px rgba(18, 47, 65, 0.2);
}
.osp-hecon-hex h3 {
margin: 0 0 5px;
font-size: 24px;
line-height: 1.05;
letter-spacing: -0.03em;
}
.osp-hecon-hex h3 a {
position: relative;
color: var(--hecon-ink);
text-decoration: none;
}
.osp-hecon-hex h3 a::after {
position: absolute;
z-index: 4;
content: "";
inset: -160px -170px;
}
.osp-hecon-hex p {
margin: 0;
color: var(--hecon-ink-soft);
font-size: 13px;
line-height: 1.45;
}
.osp-hecon-hex__eyebrow {
margin-bottom: 10px !important;
color: var(--hecon-blue) !important;
font-size: 10px !important;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.osp-hecon-hex--positions {
top: 48px;
left: 50px;
width: 260px;
min-height: 232px;
background: rgba(255, 255, 255, 0.91);
transform: rotate(-1.4deg);
}
.osp-hecon-hex--about {
top: 0;
right: 58px;
width: 208px;
min-height: 184px;
transform: rotate(1.6deg);
}
.osp-hecon-hex--initiative {
top: 260px;
left: 0;
width: 215px;
min-height: 192px;
transform: rotate(1deg);
}
.osp-hecon-hex--ad {
top: 225px;
left: 238px;
width: 235px;
min-height: 210px;
background: rgba(31, 79, 107, 0.91);
transform: rotate(-1.2deg);
}
.osp-hecon-hex--ad h3 a,
.osp-hecon-hex--ad p,
.osp-hecon-hex--ad .osp-hecon-hex__eyebrow {
color: #fff !important;
}
.osp-hecon-hex--request {
top: 190px;
right: 0;
width: 220px;
min-height: 196px;
transform: rotate(1.5deg);
}
.osp-hecon-hex--contact {
top: 438px;
left: 155px;
width: 212px;
min-height: 188px;
transform: rotate(-1deg);
}
.osp-hecon-hex--decor {
min-height: 110px;
width: 124px;
padding: 0;
border-color: rgba(255, 255, 255, 0.54);
background: rgba(255, 255, 255, 0.2);
box-shadow: none;
pointer-events: none;
}
.osp-hecon-hex--decor-a {
top: 468px;
right: 80px;
}
.osp-hecon-hex--decor-b {
top: 430px;
right: 215px;
width: 86px;
min-height: 76px;
opacity: 0.62;
}
.osp-hecon-audience {
padding: clamp(82px, 8vw, 128px) 32px;
background: #f8fafb;
}
.osp-hecon-section-head {
width: min(100%, 1180px);
margin-inline: auto;
text-align: center;
}
.osp-hecon-section-head h2,
.osp-hecon-home-cta h2 {
max-width: 900px;
margin: 0 auto;
color: var(--hecon-ink);
font-size: clamp(38px, 4vw, 62px);
line-height: 1.03;
letter-spacing: -0.04em;
}
.osp-hecon-section-head > p:last-child {
max-width: 760px;
margin: 22px auto 0;
color: var(--hecon-ink-soft);
font-size: 18px;
line-height: 1.65;
}
.osp-hecon-audience__grid {
width: min(100%, 1320px);
gap: 24px;
margin: 54px auto 0;
}
.osp-hecon-path-card {
position: relative;
min-height: 390px;
padding: clamp(36px, 4vw, 58px);
overflow: hidden;
border: 1px solid var(--hecon-line);
border-radius: 28px;
background: #fff;
box-shadow: var(--hecon-shadow-soft);
}
.osp-hecon-path-card--company {
background: var(--hecon-sky-soft);
}
.osp-hecon-path-card::after {
position: absolute;
right: -52px;
bottom: -72px;
width: 220px;
height: 190px;
border: 1px solid rgba(46, 100, 131, 0.18);
content: "";
clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}
.osp-hecon-card-index {
margin: 0 0 34px;
color: var(--hecon-blue);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.13em;
}
.osp-hecon-path-card h3 {
margin: 0 0 16px;
font-size: clamp(30px, 3vw, 44px);
letter-spacing: -0.035em;
}
.osp-hecon-path-card > p:not(.osp-hecon-card-index) {
max-width: 520px;
color: var(--hecon-ink-soft);
font-size: 17px;
line-height: 1.6;
}
.osp-hecon-link-list {
margin: 32px 0 0;
padding: 0;
list-style: none;
}
.osp-hecon-link-list li {
margin: 0;
border-top: 1px solid var(--hecon-line);
}
.osp-hecon-link-list a {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 15px 0;
color: var(--hecon-ink);
font-weight: 650;
text-decoration: none;
}
.osp-hecon-link-list a::after {
content: "→";
color: var(--hecon-blue);
}
.osp-hecon-principles {
position: relative;
overflow: hidden;
padding: clamp(88px, 9vw, 145px) 32px;
background: var(--hecon-blue-dark);
color: #fff;
}
.osp-hecon-principles::before {
position: absolute;
top: -180px;
right: -90px;
width: 540px;
height: 470px;
border: 1px solid rgba(255, 255, 255, 0.12);
content: "";
clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}
.osp-hecon-principles__inner {
position: relative;
z-index: 1;
width: min(100%, 1320px);
gap: clamp(42px, 8vw, 110px);
margin-inline: auto;
}
.osp-hecon-kicker--light {
color: #a8cada;
}
.osp-hecon-principles h2 {
margin: 0;
color: #fff;
font-size: clamp(42px, 4.5vw, 68px);
line-height: 1.02;
letter-spacing: -0.04em;
}
.osp-hecon-principles__copy > p:not(.osp-hecon-kicker) {
max-width: 620px;
margin: 24px 0 0;
color: rgba(255, 255, 255, 0.75);
font-size: 18px;
line-height: 1.72;
}
.osp-hecon-principles__facts {
display: grid;
gap: 12px;
}
.osp-hecon-fact {
padding: 24px 28px;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 18px;
background: rgba(255, 255, 255, 0.055);
}
.osp-hecon-fact h3 {
margin: 0 0 8px;
color: #fff;
font-size: 20px;
}
.osp-hecon-fact p {
margin: 0;
color: rgba(255, 255, 255, 0.68);
line-height: 1.55;
}
.osp-hecon-home-cta {
padding: clamp(84px, 9vw, 140px) 32px;
background: linear-gradient(135deg, #e6eff3, #f8fbfc);
}
.osp-hecon-home-cta__inner {
width: min(100%, 1120px);
margin-inline: auto;
padding: clamp(48px, 6vw, 82px);
border: 1px solid rgba(23, 51, 69, 0.13);
border-radius: 32px;
background: rgba(255, 255, 255, 0.8);
box-shadow: var(--hecon-shadow-soft);
text-align: center;
}
.osp-hecon-home-cta__inner > p:not(.osp-hecon-kicker) {
max-width: 720px;
margin: 22px auto 0;
color: var(--hecon-ink-soft);
font-size: 18px;
line-height: 1.65;
}
.osp-hecon-home-cta__buttons {
justify-content: center;
}
.osp-hecon-lp-footer {
padding: 64px 32px 26px;
background: #0b2433;
color: rgba(255, 255, 255, 0.72);
}
.osp-hecon-lp-footer__grid {
width: min(100%, 1320px);
gap: 38px;
margin-inline: auto;
}
.osp-hecon-lp-footer h3,
.osp-hecon-lp-footer h4 {
margin-top: 0;
color: #fff;
}
.osp-hecon-lp-footer h3 {
font-size: 25px;
}
.osp-hecon-lp-footer h4 {
font-size: 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.osp-hecon-lp-footer a {
color: rgba(255, 255, 255, 0.82);
text-decoration: none;
}
.osp-hecon-lp-footer a:hover {
color: #fff;
}
.osp-hecon-footer-links {
margin: 0;
padding: 0;
list-style: none;
}
.osp-hecon-footer-links li {
margin: 0 0 9px;
}
.osp-hecon-lp-footer__legal {
width: min(100%, 1320px);
margin: 38px auto 0;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, 0.11);
color: rgba(255, 255, 255, 0.45);
font-size: 12px;
}
@media (prefers-reduced-motion: no-preference) {
.osp-hecon-home-hero__copy {
animation: osp-hecon-enter 650ms ease both;
}
.osp-hecon-hex {
animation: osp-hecon-hex-enter 680ms ease both;
}
.osp-hecon-hex--about { animation-delay: 80ms; }
.osp-hecon-hex--initiative { animation-delay: 130ms; }
.osp-hecon-hex--ad { animation-delay: 180ms; }
.osp-hecon-hex--request { animation-delay: 230ms; }
.osp-hecon-hex--contact { animation-delay: 280ms; }
@keyframes osp-hecon-enter {
from { opacity: 0; transform: translate3d(-18px, 18px, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes osp-hecon-hex-enter {
from { opacity: 0; translate: 0 22px; }
to { opacity: 1; translate: 0 0; }
}
}
@media (max-width: 1260px) {
.osp-hecon-home-hero__inner {
grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
}
.osp-hecon-hexcluster {
transform: scale(0.88);
transform-origin: center right;
}
}
@media (max-width: 1050px) {
.osp-hecon-home-hero {
min-height: auto;
}
.osp-hecon-home-hero__inner {
grid-template-columns: 1fr;
width: min(calc(100% - 48px), 900px);
padding-top: 96px;
}
.osp-hecon-home-hero__copy {
max-width: 760px;
}
.osp-hecon-hexcluster {
width: min(100%, 720px);
min-height: 620px;
margin: 0 auto;
transform: none;
}
}
@media (max-width: 781px) {
.osp-hecon-home-hero__inner {
width: min(calc(100% - 34px), 680px);
padding: 74px 0 58px;
}
.osp-hecon-home-hero__title {
font-size: clamp(44px, 13vw, 68px);
}
.osp-hecon-home-hero__claim {
margin-top: 22px;
}
.osp-hecon-home-hero__buttons {
align-items: stretch;
flex-direction: column;
}
.osp-hecon-home-hero__buttons .wp-block-button,
.osp-hecon-home-hero__buttons .wp-block-button__link {
width: 100%;
text-align: center;
}
.osp-hecon-hexcluster {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
min-height: 0;
margin-top: 30px;
}
.osp-hecon-hex {
position: relative;
inset: auto;
width: auto;
min-height: 178px;
padding: 30px 25px;
border-radius: 22px;
clip-path: none;
transform: none;
}
.osp-hecon-hex--positions,
.osp-hecon-hex--ad {
grid-column: span 2;
}
.osp-hecon-hex--decor {
display: none;
}
.osp-hecon-audience,
.osp-hecon-principles,
.osp-hecon-home-cta {
padding-right: 20px;
padding-left: 20px;
}
.osp-hecon-audience__grid,
.osp-hecon-principles__inner,
.osp-hecon-lp-footer__grid {
display: grid;
grid-template-columns: 1fr;
}
.osp-hecon-path-card {
min-height: 0;
}
.osp-hecon-lp-footer {
padding-right: 20px;
padding-left: 20px;
}
}
@media (max-width: 520px) {
.osp-hecon-hexcluster {
grid-template-columns: 1fr;
}
.osp-hecon-hex--positions,
.osp-hecon-hex--ad {
grid-column: auto;
}
.osp-hecon-hex {
min-height: 152px;
}
.osp-hecon-home-cta__inner {
padding: 38px 24px;
border-radius: 24px;
}
}
.osp-hecon-home-hero--hexstage {
--hecon-cyan: #58d5ff;
--hecon-cyan-soft: #9be5ff;
--hecon-night: #031625;
--hecon-night-2: #07263a;
min-height: min(900px, calc(100vh - 72px));
background:
radial-gradient(circle at 68% 27%, rgba(34, 126, 179, 0.20), transparent 26%),
radial-gradient(circle at 87% 76%, rgba(23, 107, 157, 0.23), transparent 27%),
linear-gradient(90deg, rgba(1, 13, 24, 0.97) 0%, rgba(3, 22, 37, 0.94) 39%, rgba(3, 24, 41, 0.85) 66%, rgba(2, 19, 33, 0.94) 100%);
color: #fff;
}
.osp-hecon-home-hero--hexstage::before {
inset: auto 0 0 0;
width: 100%;
height: 44%;
max-width: none;
max-height: none;
opacity: 0.68;
background:
linear-gradient(180deg, transparent 0%, rgba(4, 23, 38, 0.28) 18%, rgba(2, 14, 25, 0.96) 100%),
repeating-linear-gradient(90deg, rgba(63, 136, 177, 0.08) 0 1px, transparent 1px 78px),
linear-gradient(0deg, rgba(40, 112, 153, 0.12), transparent 74%);
transform: none;
}
.osp-hecon-home-hero--hexstage::after {
right: auto;
bottom: -8%;
left: -6%;
width: 50%;
height: 40%;
border: 0;
background:
linear-gradient(100deg, rgba(89, 194, 238, 0.06), transparent 46%),
repeating-linear-gradient(90deg, transparent 0 52px, rgba(104, 202, 242, 0.06) 52px 55px, transparent 55px 92px);
clip-path: polygon(0 100%, 0 30%, 7% 30%, 7% 13%, 13% 13%, 13% 38%, 20% 38%, 20% 8%, 27% 8%, 27% 48%, 34% 48%, 34% 21%, 41% 21%, 41% 55%, 49% 55%, 49% 4%, 57% 4%, 57% 42%, 67% 42%, 67% 20%, 75% 20%, 75% 60%, 84% 60%, 84% 30%, 92% 30%, 92% 52%, 100% 52%, 100% 100%);
opacity: 0.9;
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner {
grid-template-columns: minmax(460px, 0.78fr) minmax(720px, 1.22fr);
gap: clamp(20px, 2.5vw, 52px);
width: min(calc(100% - 68px), 1580px);
padding: clamp(78px, 7vw, 116px) 0 clamp(52px, 5vw, 82px);
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__copy {
z-index: 5;
max-width: 640px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-kicker {
margin-bottom: 22px;
color: var(--hecon-cyan-soft);
font-size: 12px;
font-weight: 650;
letter-spacing: 0.34em;
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__title {
max-width: 650px;
color: #fff;
font-size: clamp(52px, 4.65vw, 78px);
font-weight: 700;
line-height: 0.98;
letter-spacing: -0.045em;
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__title span {
color: var(--hecon-cyan);
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__lead {
max-width: 610px;
margin-top: 24px;
color: rgba(234, 248, 255, 0.84);
font-size: clamp(17px, 1.25vw, 20px);
line-height: 1.55;
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__buttons {
gap: 16px;
margin-top: 34px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-button-primary .wp-block-button__link,
.osp-hecon-home-hero--hexstage .osp-hecon-button-secondary .wp-block-button__link {
min-height: 56px;
padding: 16px 28px;
border-radius: 3px;
font-size: 13px;
font-weight: 750;
letter-spacing: 0.035em;
text-transform: uppercase;
}
.osp-hecon-home-hero--hexstage .osp-hecon-button-primary .wp-block-button__link {
border: 1px solid #32c8ff;
background: linear-gradient(135deg, #058fca, #0faeea);
box-shadow: 0 0 24px rgba(36, 189, 246, 0.24), inset 0 0 0 1px rgba(255,255,255,0.12);
color: #fff;
}
.osp-hecon-home-hero--hexstage .osp-hecon-button-secondary .wp-block-button__link {
border: 1px solid rgba(71, 210, 255, 0.92);
background: rgba(3, 25, 42, 0.42);
color: #d9f6ff;
}
.osp-hecon-home-hero--hexstage .osp-hecon-button-primary .wp-block-button__link:hover,
.osp-hecon-home-hero--hexstage .osp-hecon-button-secondary .wp-block-button__link:hover {
transform: translateY(-2px);
box-shadow: 0 0 32px rgba(56, 205, 255, 0.32);
}
.osp-hecon-home-hero__company-link {
margin: 28px 0 0;
}
.osp-hecon-home-hero__company-link a {
display: inline-flex;
align-items: center;
gap: 18px;
padding: 4px 2px 8px;
border-bottom: 1px solid rgba(87, 211, 255, 0.82);
color: #d9f6ff;
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.osp-hecon-home-hero__company-link a:hover {
color: #fff;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
position: relative;
width: min(56vw, 870px);
min-height: 690px;
margin-left: auto;
isolation: isolate;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex {
--x: 0%;
--y: 0%;
--size: 230px;
--delay: 0ms;
--osp-icon: none;
position: absolute;
top: var(--y);
right: auto;
bottom: auto;
left: var(--x);
display: flex;
width: var(--size);
min-height: 0;
aspect-ratio: 1.14 / 1;
align-items: center;
justify-content: center;
padding: 36px 28px 30px;
overflow: visible;
border: 0;
background: linear-gradient(135deg, rgba(113, 224, 255, 0.98), rgba(15, 118, 173, 0.94));
box-shadow: none;
clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
filter: drop-shadow(0 0 13px rgba(53, 200, 255, 0.38));
transform: none;
backdrop-filter: none;
transition: filter 220ms ease, translate 220ms ease, scale 220ms ease;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex::before {
position: absolute;
z-index: 0;
inset: 2px;
content: "";
background:
radial-gradient(circle at 50% 32%, rgba(32, 128, 179, 0.18), transparent 42%),
linear-gradient(145deg, rgba(8, 38, 61, 0.95), rgba(5, 27, 45, 0.91));
clip-path: inherit;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex::after {
position: absolute;
z-index: -1;
inset: -8px;
content: "";
background: rgba(69, 207, 255, 0.13);
clip-path: inherit;
opacity: 0.7;
filter: blur(9px);
transition: opacity 220ms ease;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex > * {
position: relative;
z-index: 2;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex__icon {
display: block;
width: 48px;
height: 48px;
margin: 0 auto 14px;
background: var(--hecon-cyan-soft);
-webkit-mask: var(--osp-icon) center / contain no-repeat;
mask: var(--osp-icon) center / contain no-repeat;
transition: transform 220ms ease, background-color 220ms ease;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex h3 {
margin: 0 0 7px;
text-align: center;
font-size: clamp(17px, 1.25vw, 21px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.015em;
text-transform: uppercase;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex h3 a {
color: #eefaff;
text-decoration: none;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex p {
margin: 0;
color: rgba(221, 245, 255, 0.82);
text-align: center;
font-size: 14px;
line-height: 1.35;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex:hover,
.osp-hecon-home-hero--hexstage .osp-hecon-hex:focus-within {
z-index: 20;
background: linear-gradient(135deg, #a2ecff, #20bcec);
filter: drop-shadow(0 0 24px rgba(69, 211, 255, 0.68));
translate: 0 -5px;
scale: 1.018;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex:hover::after,
.osp-hecon-home-hero--hexstage .osp-hecon-hex:focus-within::after {
opacity: 1;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex:hover .osp-hecon-hex__icon,
.osp-hecon-home-hero--hexstage .osp-hecon-hex:focus-within .osp-hecon-hex__icon {
background: #fff;
transform: translateY(-3px);
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex h3 a:focus-visible {
outline: 2px solid #fff;
outline-offset: 6px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--positions { --x: 1%; --y: 31%; --size: clamp(210px, 14.4vw, 250px); --delay: 120ms; --osp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2227%22%20cy%3D%2227%22%20r%3D%2215%22%2F%3E%3Cpath%20d%3D%22M38%2038l14%2014%22%2F%3E%3C%2Fsvg%3E"); }
.osp-hecon-home-hero--hexstage .osp-hecon-hex--about { --x: 29%; --y: 5%; --size: clamp(225px, 15.7vw, 272px); --delay: 200ms; --osp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2219%22%20r%3D%228%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2225%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2247%22%20cy%3D%2225%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22M19%2049c1-10%206-16%2013-16s12%206%2013%2016M5%2049c1-8%205-13%2011-13M59%2049c-1-8-5-13-11-13%22%2F%3E%3C%2Fsvg%3E"); }
.osp-hecon-home-hero--hexstage .osp-hecon-hex--initiative { --x: 64%; --y: 24%; --size: clamp(220px, 15.4vw, 268px); --delay: 280ms; --osp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2220%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M15%2053c2-13%208-20%2017-20s15%207%2017%2020%22%2F%3E%3C%2Fsvg%3E"); }
.osp-hecon-home-hero--hexstage .osp-hecon-hex--ad { --x: 45%; --y: 47%; --size: clamp(205px, 14.3vw, 248px); --delay: 360ms; --osp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2029h13l23-11v28L22%2035H9z%22%2F%3E%3Cpath%20d%3D%22M22%2035l5%2014h-9l-4-14M50%2025l7-5M52%2032h8M50%2039l7%205%22%2F%3E%3C%2Fsvg%3E"); }
.osp-hecon-home-hero--hexstage .osp-hecon-hex--request { --x: 12%; --y: 64%; --size: clamp(210px, 14.8vw, 258px); --delay: 440ms; --osp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%2055V24h19v31M32%2033h19v22M20%2031h5M20%2039h5M20%2047h5M39%2040h5M39%2048h5M9%2055h46M20%2024v-8h5v8%22%2F%3E%3C%2Fsvg%3E"); }
.osp-hecon-home-hero--hexstage .osp-hecon-hex--contact { --x: 64%; --y: 70%; --size: clamp(218px, 15.2vw, 265px); --delay: 520ms; --osp-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%2210%22%20y%3D%2216%22%20width%3D%2244%22%20height%3D%2232%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%2020l20%2016%2020-16%22%2F%3E%3C%2Fsvg%3E"); }
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor {
min-height: 0;
width: var(--size);
aspect-ratio: 1.14 / 1;
padding: 0;
background: rgba(36, 153, 211, 0.32);
filter: none;
pointer-events: none;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor::before {
inset: 3px;
background: rgba(2, 20, 34, 0.78);
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor::after {
opacity: 0;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-a { --x: -8%; --y: 8%; --size: 90px; opacity: 0.62; }
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-b { --x: 10%; --y: 2%; --size: 126px; opacity: 0.72; }
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-c { --x: 52%; --y: 9%; --size: 104px; opacity: 0.64; }
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-d { --x: 86%; --y: 2%; --size: 170px; opacity: 0.55; }
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-e { --x: 90%; --y: 51%; --size: 108px; opacity: 0.48; }
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-f { --x: 49%; --y: 84%; --size: 94px; opacity: 0.48; }
@media (prefers-reduced-motion: no-preference) {
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__copy {
animation: osp-hecon-dark-copy 640ms ease both;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor) {
animation: osp-hecon-dark-hex 680ms cubic-bezier(.2,.75,.2,1) both;
animation-delay: var(--delay);
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex__icon {
animation: osp-hecon-dark-icon 520ms ease both;
animation-delay: calc(var(--delay) + 180ms);
}
@keyframes osp-hecon-dark-copy {
from { opacity: 0; transform: translate3d(-20px, 16px, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes osp-hecon-dark-hex {
from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.95); }
to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes osp-hecon-dark-icon {
from { opacity: 0; transform: translateY(10px) scale(.92); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
}
@media (max-width: 1320px) {
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner {
grid-template-columns: minmax(420px, .82fr) minmax(620px, 1.18fr);
}
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
width: min(58vw, 790px);
transform: scale(.92);
transform-origin: center right;
}
}
@media (max-width: 1080px) {
.osp-hecon-home-hero--hexstage { min-height: auto; }
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner {
grid-template-columns: 1fr;
width: min(calc(100% - 48px), 930px);
padding-top: 86px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__copy { max-width: 760px; }
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
width: min(100%, 820px);
min-height: 680px;
margin: 0 auto;
transform: none;
}
}
@media (max-width: 781px) {
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner {
width: min(calc(100% - 34px), 680px);
padding: 68px 0 52px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__title {
font-size: clamp(43px, 12vw, 64px);
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__buttons {
align-items: stretch;
flex-direction: column;
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__buttons .wp-block-button,
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__buttons .wp-block-button__link {
width: 100%;
text-align: center;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
display: grid;
width: 100%;
min-height: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 34px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor) {
position: relative;
inset: auto;
width: 100%;
aspect-ratio: 1.08 / 1;
padding: 30px 18px 26px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--positions,
.osp-hecon-home-hero--hexstage .osp-hecon-hex--ad {
grid-column: auto;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor { display: none; }
.osp-hecon-home-hero--hexstage .osp-hecon-hex__icon { width: 40px; height: 40px; }
.osp-hecon-home-hero--hexstage .osp-hecon-hex h3 { font-size: 16px; }
.osp-hecon-home-hero--hexstage .osp-hecon-hex p { font-size: 12px; }
}
@media (max-width: 460px) {
.osp-hecon-home-hero--hexstage .osp-hecon-kicker { letter-spacing: .22em; }
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster { grid-template-columns: 1fr; gap: 8px; }
.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor) { aspect-ratio: 1.55 / 1; }
}
@media (prefers-reduced-motion: reduce) {
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__copy,
.osp-hecon-home-hero--hexstage .osp-hecon-hex,
.osp-hecon-home-hero--hexstage .osp-hecon-hex__icon {
animation: none !important;
transition: none !important;
}
} .osp-hecon-home-hero--hexstage {
background-image:
linear-gradient(90deg, rgba(1, 12, 22, 0.97) 0%, rgba(1, 14, 25, 0.90) 31%, rgba(2, 18, 31, 0.62) 55%, rgba(2, 18, 31, 0.54) 73%, rgba(1, 13, 23, 0.78) 100%),
linear-gradient(180deg, rgba(2, 18, 31, 0.10) 0%, rgba(1, 12, 22, 0.24) 58%, rgba(1, 10, 18, 0.76) 100%),
url(//www.hecon-gmbh.com/wp-content/themes/understrap-child/assets/images/bg/Chic1.jpg?v=2.5.0);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.osp-hecon-home-hero--hexstage::before {
height: 42%;
opacity: 0.72;
background:
linear-gradient(180deg, transparent 0%, rgba(3, 20, 34, 0.18) 22%, rgba(1, 10, 18, 0.88) 100%),
linear-gradient(90deg, rgba(31, 132, 185, 0.05), transparent 44%, rgba(39, 145, 196, 0.04));
}
.osp-hecon-home-hero--hexstage::after {
display: none;
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner {
grid-template-columns: minmax(440px, 0.82fr) minmax(720px, 1.18fr);
gap: clamp(26px, 3vw, 60px);
width: min(calc(100% - 72px), 1580px);
}
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
position: relative;
display: grid;
width: min(54vw, 820px);
min-height: 0;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-rows: repeat(3, 220px);
column-gap: 12px;
row-gap: 10px;
align-items: center;
margin-left: auto;
isolation: isolate;
transform: none;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor) {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
width: min(100%, 236px);
min-height: 0;
aspect-ratio: 1.14 / 1;
justify-self: center;
align-self: center;
transform: none;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--about {
grid-column: 3 / span 2;
grid-row: 1;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--positions {
grid-column: 1 / span 2;
grid-row: 2;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--ad {
grid-column: 3 / span 2;
grid-row: 2;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--initiative {
grid-column: 5 / span 2;
grid-row: 2;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--request {
grid-column: 2 / span 2;
grid-row: 3;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--contact {
grid-column: 4 / span 2;
grid-row: 3;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor {
position: absolute;
display: block;
z-index: 0;
width: var(--size);
min-height: 0;
aspect-ratio: 1.14 / 1;
opacity: 0.46;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-a {
top: 18px;
left: 12px;
--size: 72px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-b {
top: 16px;
left: 112px;
--size: 94px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-c {
top: 18px;
right: 16px;
left: auto;
--size: 82px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-d {
display: none;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-e {
top: auto;
right: auto;
bottom: -62px;
left: 22px;
--size: 78px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-f {
top: auto;
right: 22px;
bottom: -66px;
left: auto;
--size: 82px;
}
@media (max-width: 1320px) {
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner {
grid-template-columns: minmax(400px, 0.86fr) minmax(610px, 1.14fr);
}
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
width: min(57vw, 750px);
grid-template-rows: repeat(3, 205px);
column-gap: 10px;
row-gap: 8px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor) {
width: min(100%, 220px);
}
}
@media (max-width: 1080px) {
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner {
grid-template-columns: 1fr;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
width: min(100%, 780px);
grid-template-rows: repeat(3, 210px);
margin: 14px auto 0;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor) {
width: min(100%, 226px);
}
}
@media (max-width: 781px) {
.osp-hecon-home-hero--hexstage {
background-position: 58% center;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
display: grid;
width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: none;
column-gap: 10px;
row-gap: 10px;
margin-top: 34px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor) {
position: relative;
width: 100%;
aspect-ratio: 1.08 / 1;
grid-column: auto;
grid-row: auto;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor {
display: none;
}
}
@media (max-width: 460px) {
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
grid-template-columns: 1fr;
}
}
.osp-wpb-hecon {
--hecon-cyan: #55d7ff;
--hecon-cyan-strong: #18b9ef;
--hecon-cyan-soft: #a5ebff;
--hecon-night: #020f1b;
--hecon-night-2: #061a2a;
--hecon-night-3: #0a2437;
--hecon-panel: rgba(9, 38, 58, 0.84);
--hecon-line-dark: rgba(111, 215, 255, 0.18);
--hecon-text-light: rgba(235, 248, 255, 0.86);
--hecon-text-muted: rgba(205, 230, 241, 0.68);
}
.osp-hecon-home-hero--hexstage {
--hecon-hero-image: url(//www.hecon-gmbh.com/wp-content/themes/understrap-child/assets/images/bg/Chic1.jpg?v=2.5.0);
min-height: clamp(790px, calc(100svh - 72px), 930px);
background-image:
linear-gradient(90deg, rgba(1, 10, 18, 0.99) 0%, rgba(1, 13, 23, 0.96) 30%, rgba(2, 17, 29, 0.76) 52%, rgba(2, 18, 31, 0.44) 73%, rgba(1, 12, 21, 0.72) 100%),
linear-gradient(180deg, rgba(1, 8, 15, 0.10) 0%, rgba(1, 11, 20, 0.14) 48%, rgba(1, 8, 15, 0.78) 100%),
var(--hecon-hero-image);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.osp-hecon-home-hero--hexstage::before {
inset: auto 0 0 0;
width: 100%;
height: 34%;
max-width: none;
max-height: none;
opacity: 1;
background: linear-gradient(180deg, transparent 0%, rgba(1, 10, 18, 0.78) 100%);
transform: none;
}
.osp-hecon-home-hero--hexstage::after {
display: block;
right: -14%;
bottom: -26%;
left: auto;
width: 60%;
height: 74%;
border: 0;
background: radial-gradient(circle at 48% 42%, rgba(38, 186, 239, 0.16), transparent 58%);
clip-path: none;
opacity: 1;
filter: blur(18px);
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner {
grid-template-columns: minmax(430px, 0.83fr) minmax(690px, 1.17fr);
align-items: center;
gap: clamp(30px, 3vw, 62px);
width: min(calc(100% - 72px), 1600px);
padding: clamp(72px, 6vw, 106px) 0 clamp(58px, 5vw, 82px);
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__copy {
max-width: 620px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-kicker {
margin-bottom: 22px;
color: var(--hecon-cyan-soft);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.34em;
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__title {
max-width: 620px;
font-size: clamp(50px, 4.15vw, 72px);
font-weight: 700;
line-height: 0.99;
letter-spacing: -0.047em;
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__lead {
max-width: 590px;
margin-top: 24px;
color: rgba(238, 249, 255, 0.87);
font-size: clamp(17px, 1.18vw, 20px);
line-height: 1.58;
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__buttons {
gap: 14px;
margin-top: 32px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-button-primary .wp-block-button__link,
.osp-hecon-home-hero--hexstage .osp-hecon-button-secondary .wp-block-button__link {
min-height: 54px;
padding: 15px 27px;
border-radius: 3px;
font-size: 13px;
line-height: 1.2;
}
.osp-hecon-home-hero--hexstage .osp-hecon-button-primary .wp-block-button__link {
border-color: #35cfff;
background: linear-gradient(135deg, #078fca, #13b2ec);
box-shadow: 0 0 26px rgba(41, 196, 247, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.11);
}
.osp-hecon-home-hero--hexstage .osp-hecon-button-secondary .wp-block-button__link {
border-color: rgba(76, 215, 255, 0.86);
background: rgba(3, 23, 39, 0.48);
color: #dff8ff;
}
.osp-hecon-home-hero__company-link {
margin-top: 26px;
}
.osp-hecon-home-hero__company-link a::before {
display: inline-block;
width: 23px;
height: 23px;
flex: 0 0 23px;
content: "";
background: var(--hecon-cyan-soft);
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2054V24h18v30M28%2033h25v21M17%2031h5M17%2039h5M17%2047h5M36%2040h6M36%2048h6M7%2054h50M17%2024v-8h5v8%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2054V24h18v30M28%2033h25v21M17%2031h5M17%2039h5M17%2047h5M36%2040h6M36%2048h6M7%2054h50M17%2024v-8h5v8%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
--hex-size: clamp(188px, 12.2vw, 226px);
--hex-gap-x: clamp(14px, 1.05vw, 20px);
--hex-gap-y: clamp(12px, 0.9vw, 18px);
position: relative;
display: grid;
width: max-content;
min-height: 0;
grid-template-columns: repeat(6, calc((var(--hex-size) + var(--hex-gap-x)) / 2));
grid-template-rows: repeat(3, calc(var(--hex-size) / 1.14));
column-gap: 0;
row-gap: var(--hex-gap-y);
align-items: center;
align-content: center;
justify-content: center;
margin: 0 0 0 auto;
isolation: isolate;
transform: none;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor) {
position: relative;
z-index: 2;
top: auto;
right: auto;
bottom: auto;
left: auto;
width: var(--hex-size);
min-height: 0;
aspect-ratio: 1.14 / 1;
align-self: center;
justify-self: center;
padding: 31px 24px 27px;
background: linear-gradient(135deg, rgba(116, 226, 255, 0.98), rgba(15, 128, 183, 0.96));
filter: drop-shadow(0 0 13px rgba(54, 201, 255, 0.34));
transform: none;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor)::before {
inset: 2px;
background:
radial-gradient(circle at 50% 27%, rgba(62, 169, 219, 0.16), transparent 42%),
linear-gradient(145deg, rgba(7, 34, 54, 0.96), rgba(3, 22, 37, 0.94));
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor)::after {
inset: -7px;
background: rgba(69, 207, 255, 0.12);
filter: blur(9px);
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex__icon {
width: 45px;
height: 45px;
margin-bottom: 12px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex h3 {
margin-bottom: 6px;
font-size: clamp(15px, 1.05vw, 19px);
line-height: 1.08;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex p {
max-width: 150px;
margin-inline: auto;
font-size: 13px;
line-height: 1.35;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--about {
grid-column: 3 / span 2;
grid-row: 1;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--positions {
grid-column: 1 / span 2;
grid-row: 2;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--ad {
grid-column: 3 / span 2;
grid-row: 2;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--initiative {
grid-column: 5 / span 2;
grid-row: 2;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--request {
grid-column: 2 / span 2;
grid-row: 3;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--contact {
grid-column: 4 / span 2;
grid-row: 3;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor {
position: absolute;
z-index: 0;
display: block;
width: var(--decor-size);
min-height: 0;
aspect-ratio: 1.14 / 1;
padding: 0;
background: rgba(46, 171, 225, 0.28);
filter: none;
pointer-events: none;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor::before {
inset: 3px;
background: rgba(2, 17, 29, 0.79);
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor::after {
opacity: 0;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-a {
top: 11%;
left: -7%;
--decor-size: 68px;
opacity: 0.48;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-b {
top: -2%;
left: 13%;
--decor-size: 92px;
opacity: 0.56;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-c {
top: 10%;
right: 13%;
left: auto;
--decor-size: 74px;
opacity: 0.46;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-d {
top: -6%;
right: -9%;
left: auto;
--decor-size: 126px;
opacity: 0.43;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-e {
top: auto;
right: -7%;
bottom: 10%;
left: auto;
--decor-size: 78px;
opacity: 0.42;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-f {
top: auto;
right: auto;
bottom: -7%;
left: 42%;
--decor-size: 70px;
opacity: 0.38;
}
.osp-hecon-positioning {
position: relative;
overflow: hidden;
padding: clamp(88px, 8vw, 132px) 32px;
background:
radial-gradient(circle at 88% 16%, rgba(62, 188, 235, 0.08), transparent 30%),
#071a29;
color: #fff;
}
.osp-hecon-positioning__inner {
position: relative;
z-index: 1;
width: min(100%, 1320px);
gap: clamp(50px, 8vw, 120px);
margin-inline: auto;
}
.osp-hecon-positioning__copy h2 {
max-width: 650px;
margin: 0;
color: #fff;
font-size: clamp(40px, 4.15vw, 64px);
line-height: 1.04;
letter-spacing: -0.04em;
}
.osp-hecon-positioning__copy > p:not(.osp-hecon-kicker) {
max-width: 650px;
margin: 24px 0 0;
color: var(--hecon-text-light);
font-size: 18px;
line-height: 1.7;
}
.osp-hecon-positioning__statement {
padding-left: 20px;
border-left: 2px solid var(--hecon-cyan-strong);
color: #fff !important;
font-weight: 650;
}
.osp-hecon-positioning__pairs {
display: grid;
gap: 12px;
}
.osp-hecon-pair {
position: relative;
padding: 23px 26px;
border: 1px solid rgba(101, 211, 250, 0.16);
background: linear-gradient(135deg, rgba(10, 43, 65, 0.82), rgba(6, 29, 46, 0.78));
}
.osp-hecon-pair::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 2px;
content: "";
background: linear-gradient(180deg, transparent, var(--hecon-cyan-strong), transparent);
}
.osp-hecon-pair p {
margin: 0;
color: #effbff;
font-size: clamp(18px, 1.5vw, 22px);
font-weight: 620;
}
.osp-hecon-pair span {
margin-inline: 8px;
color: var(--hecon-cyan);
}
.osp-hecon-audience {
padding: clamp(88px, 8vw, 128px) 32px;
background: #eef4f7;
}
.osp-hecon-section-head h2,
.osp-hecon-home-cta h2 {
font-size: clamp(38px, 3.7vw, 58px);
}
.osp-hecon-audience__grid {
gap: 22px;
}
.osp-hecon-path-card {
min-height: 370px;
padding: clamp(38px, 4vw, 56px);
border-radius: 4px;
box-shadow: 0 20px 52px rgba(12, 39, 55, 0.08);
}
.osp-hecon-path-card--applicant {
background: #fff;
}
.osp-hecon-path-card--company {
background: #e5eef3;
}
.osp-hecon-path-card::after {
right: -56px;
bottom: -66px;
width: 205px;
height: 180px;
border-color: rgba(27, 113, 157, 0.16);
}
.osp-hecon-services {
padding: clamp(90px, 8vw, 132px) 32px;
background:
radial-gradient(circle at 15% 10%, rgba(65, 191, 238, 0.08), transparent 27%),
#081d2d;
color: #fff;
}
.osp-hecon-section-head--services .osp-hecon-kicker {
color: var(--hecon-cyan-soft);
}
.osp-hecon-section-head--services h2 {
color: #fff;
}
.osp-hecon-section-head--services > p:last-child {
color: var(--hecon-text-muted);
}
.osp-hecon-services__grid {
width: min(100%, 1320px);
gap: 16px;
margin: 52px auto 0;
}
.osp-hecon-service-card {
position: relative;
min-height: 360px;
padding: 34px 32px 30px;
overflow: hidden;
border: 1px solid rgba(96, 211, 251, 0.15);
background: linear-gradient(145deg, rgba(10, 43, 64, 0.88), rgba(5, 27, 43, 0.88));
}
.osp-hecon-service-card::before {
position: absolute;
top: -88px;
right: -70px;
width: 190px;
height: 166px;
border: 1px solid rgba(84, 208, 251, 0.13);
content: "";
clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}
.osp-hecon-service-card__index {
margin: 0 0 54px;
color: var(--hecon-cyan);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.18em;
}
.osp-hecon-service-card h3 {
margin: 0 0 16px;
color: #fff;
font-size: clamp(25px, 2vw, 32px);
letter-spacing: -0.025em;
}
.osp-hecon-service-card > p:not(.osp-hecon-service-card__index):not(.osp-hecon-service-card__link) {
color: var(--hecon-text-muted);
font-size: 16px;
line-height: 1.65;
}
.osp-hecon-service-card__link {
margin: 32px 0 0;
}
.osp-hecon-service-card__link a {
display: inline-flex;
align-items: center;
gap: 12px;
padding-bottom: 7px;
border-bottom: 1px solid rgba(86, 214, 255, 0.6);
color: #e4f9ff;
font-weight: 650;
text-decoration: none;
}
.osp-hecon-service-card__link a:hover {
color: #fff;
}
.osp-hecon-principles {
padding: clamp(94px, 9vw, 145px) 32px;
background:
linear-gradient(135deg, rgba(3, 18, 30, 0.96), rgba(7, 36, 55, 0.98)),
var(--hecon-night);
}
.osp-hecon-principles::before {
top: -210px;
right: -120px;
width: 580px;
height: 510px;
border-color: rgba(92, 211, 251, 0.11);
}
.osp-hecon-principles__facts {
gap: 10px;
}
.osp-hecon-fact {
padding: 25px 28px;
border-radius: 3px;
border-color: rgba(108, 214, 251, 0.14);
background: rgba(8, 38, 57, 0.58);
}
.osp-hecon-home-cta {
padding: clamp(84px, 8vw, 126px) 32px;
background: #e7f0f4;
}
.osp-hecon-home-cta__inner {
position: relative;
overflow: hidden;
width: min(100%, 1160px);
padding: clamp(50px, 6vw, 78px);
border: 1px solid rgba(17, 95, 133, 0.16);
border-radius: 4px;
background:
radial-gradient(circle at 90% 10%, rgba(80, 207, 249, 0.15), transparent 30%),
rgba(255, 255, 255, 0.88);
box-shadow: 0 22px 54px rgba(15, 47, 64, 0.08);
}
.osp-hecon-lp-footer {
padding-top: 62px;
background: #041522;
}
.osp-hecon-lp-footer__grid {
gap: 42px;
}
@media (max-width: 1360px) {
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner {
grid-template-columns: minmax(390px, 0.88fr) minmax(600px, 1.12fr);
width: min(calc(100% - 56px), 1460px);
}
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
--hex-size: clamp(178px, 14.7vw, 206px);
--hex-gap-x: 14px;
--hex-gap-y: 12px;
}
}
@media (max-width: 1100px) {
.osp-hecon-home-hero--hexstage {
min-height: auto;
background-position: 60% center;
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner {
grid-template-columns: 1fr;
width: min(calc(100% - 48px), 940px);
padding: 82px 0 68px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__copy {
max-width: 720px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
--hex-size: clamp(190px, 22vw, 220px);
width: max-content;
margin: 20px auto 0;
}
.osp-hecon-positioning__inner,
.osp-hecon-principles__inner {
gap: 44px;
}
}
@media (max-width: 781px) {
.osp-hecon-home-hero--hexstage {
background-position: 68% center;
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner {
width: min(calc(100% - 34px), 680px);
padding: 64px 0 52px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__title {
font-size: clamp(42px, 12vw, 62px);
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__buttons {
align-items: stretch;
flex-direction: column;
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__buttons .wp-block-button,
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__buttons .wp-block-button__link {
width: 100%;
text-align: center;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
display: grid;
width: 100%;
min-height: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: none;
gap: 10px;
margin-top: 34px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor) {
position: relative;
width: 100%;
min-width: 0;
aspect-ratio: 1.14 / 1;
grid-column: auto;
grid-row: auto;
padding: 28px 18px 25px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor {
display: none;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex__icon {
width: 39px;
height: 39px;
margin-bottom: 10px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex h3 {
font-size: 15px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex p {
font-size: 12px;
}
.osp-hecon-positioning,
.osp-hecon-audience,
.osp-hecon-services,
.osp-hecon-principles,
.osp-hecon-home-cta {
padding-right: 20px;
padding-left: 20px;
}
.osp-hecon-positioning__inner,
.osp-hecon-principles__inner,
.osp-hecon-services__grid {
display: grid;
grid-template-columns: 1fr;
}
.osp-hecon-positioning__inner {
gap: 38px;
}
.osp-hecon-positioning__pairs {
gap: 8px;
}
.osp-hecon-pair {
padding: 19px 20px;
}
.osp-hecon-services__grid {
gap: 10px;
}
.osp-hecon-service-card {
min-height: 0;
}
}
@media (max-width: 460px) {
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner {
width: min(calc(100% - 28px), 430px);
}
.osp-hecon-home-hero--hexstage .osp-hecon-kicker {
letter-spacing: 0.24em;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
grid-template-columns: 1fr;
gap: 8px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor) {
width: min(100%, 320px);
justify-self: center;
}
.osp-hecon-positioning,
.osp-hecon-audience,
.osp-hecon-services,
.osp-hecon-principles,
.osp-hecon-home-cta {
padding-right: 16px;
padding-left: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__copy,
.osp-hecon-home-hero--hexstage .osp-hecon-hex,
.osp-hecon-home-hero--hexstage .osp-hecon-hex__icon {
animation: none !important;
transition: none !important;
}
} .osp-hecon-home-hero--hexstage {
--hecon-hero-image: url(//www.hecon-gmbh.com/wp-content/themes/understrap-child/assets/images/bg/Chic1.jpg?v=2.5.0);
min-height: clamp(800px, calc(100svh - 72px), 940px);
background-image:
linear-gradient(90deg, rgba(1, 10, 18, 0.99) 0%, rgba(1, 12, 22, 0.96) 27%, rgba(2, 17, 29, 0.80) 45%, rgba(2, 18, 31, 0.50) 67%, rgba(1, 12, 21, 0.68) 100%),
linear-gradient(180deg, rgba(1, 8, 15, 0.16) 0%, rgba(1, 11, 20, 0.10) 46%, rgba(1, 8, 15, 0.78) 100%),
var(--hecon-hero-image);
background-position: center 58%;
background-repeat: no-repeat;
background-size: cover;
}
.osp-hecon-home-hero--hexstage::before {
height: 38%;
opacity: 1;
background:
linear-gradient(180deg, transparent 0%, rgba(1, 10, 18, 0.82) 100%),
radial-gradient(circle at 72% 18%, rgba(52, 194, 241, 0.09), transparent 34%);
}
.osp-hecon-home-hero--hexstage::after {
display: block;
right: -12%;
bottom: -30%;
left: auto;
width: 62%;
height: 78%;
border: 0;
background: radial-gradient(circle at 48% 42%, rgba(39, 190, 241, 0.13), transparent 60%);
clip-path: none;
opacity: 1;
filter: blur(18px);
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner {
grid-template-columns: minmax(430px, 0.84fr) minmax(720px, 1.16fr);
align-items: center;
gap: clamp(34px, 3.2vw, 66px);
width: min(calc(100% - 72px), 1600px);
padding: clamp(72px, 6vw, 108px) 0 clamp(58px, 5vw, 84px);
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__copy {
max-width: 625px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
--hex-size: clamp(200px, 13vw, 242px);
--hex-gap-x: clamp(18px, 1.35vw, 26px);
--hex-gap-y: clamp(16px, 1.1vw, 22px);
position: relative;
display: grid !important;
width: max-content;
min-height: 0;
grid-template-columns: repeat(6, calc((var(--hex-size) + var(--hex-gap-x)) / 2));
grid-template-rows: repeat(3, calc(var(--hex-size) / 1.14));
column-gap: 0;
row-gap: var(--hex-gap-y);
align-items: center;
justify-content: center;
margin: 0 0 0 auto;
isolation: isolate;
transform: none;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor) {
position: relative !important;
z-index: 2;
inset: auto !important;
display: flex !important;
width: var(--hex-size) !important;
min-width: 0;
min-height: 0;
aspect-ratio: 1.14 / 1;
flex-direction: column;
align-items: center;
justify-content: center;
justify-self: center;
align-self: center;
padding: 31px 24px 27px;
margin: 0 !important;
max-width: none !important;
background: linear-gradient(135deg, rgba(115, 225, 255, 0.98), rgba(14, 126, 181, 0.96));
filter: drop-shadow(0 0 14px rgba(53, 202, 255, 0.36));
transform: none;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor)::before {
inset: 2px;
background:
radial-gradient(circle at 50% 28%, rgba(70, 176, 223, 0.17), transparent 43%),
linear-gradient(145deg, rgba(7, 34, 54, 0.97), rgba(3, 22, 37, 0.95));
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor)::after {
inset: -8px;
background: rgba(69, 207, 255, 0.13);
filter: blur(10px);
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--about {
grid-column: 3 / span 2 !important;
grid-row: 1 !important;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--positions {
grid-column: 1 / span 2 !important;
grid-row: 2 !important;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--ad {
grid-column: 3 / span 2 !important;
grid-row: 2 !important;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--initiative {
grid-column: 5 / span 2 !important;
grid-row: 2 !important;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--request {
grid-column: 2 / span 2 !important;
grid-row: 3 !important;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--contact {
grid-column: 4 / span 2 !important;
grid-row: 3 !important;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex__icon {
width: 45px;
height: 45px;
margin: 0 auto 12px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex h3 {
margin: 0 0 6px;
font-size: clamp(15px, 1.05vw, 19px);
line-height: 1.08;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex p {
max-width: 154px;
margin-inline: auto;
font-size: 13px;
line-height: 1.35;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor {
position: absolute !important;
z-index: 0;
display: block;
width: var(--decor-size) !important;
min-height: 0;
aspect-ratio: 1.14 / 1;
padding: 0;
background: rgba(45, 168, 222, 0.25);
filter: none;
pointer-events: none;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-a {
top: 13%;
left: -5%;
--decor-size: 66px;
opacity: 0.40;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-b {
top: -2%;
left: 14%;
--decor-size: 90px;
opacity: 0.48;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-c {
top: 9%;
right: 13%;
left: auto;
--decor-size: 72px;
opacity: 0.40;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-d {
top: -7%;
right: -8%;
left: auto;
--decor-size: 122px;
opacity: 0.36;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-e {
top: auto;
right: -6%;
bottom: 9%;
left: auto;
--decor-size: 76px;
opacity: 0.34;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor-f {
top: auto;
right: auto;
bottom: -7%;
left: 43%;
--decor-size: 68px;
opacity: 0.32;
}
@media (max-width: 1360px) {
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner {
grid-template-columns: minmax(390px, 0.88fr) minmax(610px, 1.12fr);
width: min(calc(100% - 56px), 1460px);
}
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
--hex-size: clamp(178px, 14.2vw, 210px);
--hex-gap-x: 14px;
--hex-gap-y: 13px;
}
}
@media (max-width: 1100px) {
.osp-hecon-home-hero--hexstage {
min-height: auto;
background-position: 57% 58%;
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner {
grid-template-columns: 1fr;
width: min(calc(100% - 48px), 940px);
padding: 82px 0 68px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__copy {
max-width: 720px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
--hex-size: clamp(188px, 21vw, 220px);
width: max-content;
margin: 26px auto 0;
}
}
@media (max-width: 781px) {
.osp-hecon-home-hero--hexstage {
background-position: 59% 58%;
}
.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner {
width: min(calc(100% - 34px), 680px);
padding: 64px 0 52px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
display: grid !important;
width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: none;
gap: 12px;
margin: 34px 0 0;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor) {
width: min(100%, 230px) !important;
aspect-ratio: 1.14 / 1;
grid-column: auto !important;
grid-row: auto !important;
justify-self: center;
padding: 25px 14px 22px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor {
display: none !important;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex__icon {
width: 36px;
height: 36px;
margin-bottom: 9px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex h3 {
max-width: 100%;
font-size: clamp(12px, 3.5vw, 15px);
overflow-wrap: anywhere;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex p {
max-width: 132px;
font-size: 11px;
}
}
@media (max-width: 380px) {
.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
grid-template-columns: 1fr;
gap: 9px;
}
.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor) {
width: min(100%, 300px) !important;
}
} .osp-hecon-home-hero {
--hecon-hero-dummy: url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/hecon-home-v2-dummy.jpg?v=2.6.1);
min-height: clamp(780px, calc(100svh - 72px), 940px) !important;
background-image:
linear-gradient(90deg, rgba(1, 9, 17, 0.98) 0%, rgba(2, 13, 24, 0.94) 31%, rgba(2, 16, 29, 0.73) 51%, rgba(2, 16, 29, 0.36) 72%, rgba(1, 10, 18, 0.58) 100%),
linear-gradient(180deg, rgba(1, 8, 15, 0.10) 0%, rgba(1, 9, 17, 0.08) 55%, rgba(1, 8, 15, 0.68) 100%),
var(--hecon-hero-dummy) !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.osp-hecon-home-hero::before {
inset: auto 0 0 0 !important;
width: 100% !important;
height: 34% !important;
max-width: none !important;
max-height: none !important;
opacity: 1 !important;
background: linear-gradient(180deg, transparent 0%, rgba(1, 9, 17, 0.76) 100%) !important;
transform: none !important;
}
.osp-hecon-home-hero::after {
right: -12% !important;
bottom: -23% !important;
left: auto !important;
width: 58% !important;
height: 72% !important;
border: 0 !important;
background: radial-gradient(circle at 50% 42%, rgba(40, 190, 241, 0.15), transparent 58%) !important;
clip-path: none !important;
opacity: 1 !important;
filter: blur(18px) !important;
}
.osp-hecon-home-hero .osp-hecon-home-hero__inner {
display: grid !important;
width: min(calc(100% - 64px), 1580px) !important;
min-height: inherit !important;
grid-template-columns: minmax(420px, 0.84fr) minmax(620px, 1.16fr) !important;
align-items: center !important;
gap: clamp(34px, 3.2vw, 64px) !important;
margin-inline: auto !important;
padding: clamp(74px, 6vw, 104px) 0 clamp(58px, 5vw, 82px) !important;
}
.osp-hecon-home-hero .osp-hecon-home-hero__copy {
position: relative !important;
z-index: 4 !important;
max-width: 625px !important;
margin: 0 !important;
}
.osp-hecon-home-hero .osp-hecon-hexcluster {
--hex-size: clamp(178px, 12vw, 220px);
--hex-row-2: clamp(168px, 11.3vw, 205px);
--hex-row-3: clamp(336px, 22.6vw, 410px);
position: relative !important;
z-index: 3 !important;
display: block !important;
width: min(100%, 760px) !important;
min-width: 0 !important;
min-height: calc(var(--hex-row-3) + var(--hex-size)) !important;
max-width: none !important;
margin: 0 0 0 auto !important;
padding: 0 !important;
isolation: isolate !important;
transform: none !important;
}
.osp-hecon-home-hero .osp-hecon-hex:not(.osp-hecon-hex--decor) {
position: absolute !important;
z-index: 3 !important;
top: var(--hex-y, 0) !important;
right: auto !important;
bottom: auto !important;
left: var(--hex-x, 0) !important;
width: var(--hex-size) !important;
min-width: 0 !important;
max-width: none !important;
min-height: 0 !important;
aspect-ratio: 1.14 / 1 !important;
margin: 0 !important;
padding: 30px 22px 26px !important;
border: 0 !important;
background: linear-gradient(135deg, rgba(104, 222, 255, 0.98), rgba(17, 131, 184, 0.98)) !important;
box-shadow: none !important;
filter: drop-shadow(0 0 14px rgba(55, 205, 255, 0.34)) !important;
transform: translateX(var(--hex-shift, 0)) !important;
}
.osp-hecon-home-hero .osp-hecon-hex:not(.osp-hecon-hex--decor)::before {
inset: 2px !important;
background:
radial-gradient(circle at 50% 27%, rgba(68, 182, 227, 0.16), transparent 42%),
linear-gradient(145deg, rgba(6, 32, 51, 0.97), rgba(3, 20, 34, 0.96)) !important;
}
.osp-hecon-home-hero .osp-hecon-hex:not(.osp-hecon-hex--decor)::after {
inset: -8px !important;
background: rgba(69, 207, 255, 0.12) !important;
filter: blur(10px) !important;
}
.osp-hecon-home-hero .osp-hecon-hex--about {
--hex-x: 50%;
--hex-y: 0px;
--hex-shift: -50%;
}
.osp-hecon-home-hero .osp-hecon-hex--positions {
--hex-x: 0%;
--hex-y: var(--hex-row-2);
--hex-shift: 0%;
}
.osp-hecon-home-hero .osp-hecon-hex--ad {
--hex-x: 50%;
--hex-y: var(--hex-row-2);
--hex-shift: -50%;
}
.osp-hecon-home-hero .osp-hecon-hex--initiative {
--hex-x: 100%;
--hex-y: var(--hex-row-2);
--hex-shift: -100%;
}
.osp-hecon-home-hero .osp-hecon-hex--request {
--hex-x: 25%;
--hex-y: var(--hex-row-3);
--hex-shift: -50%;
}
.osp-hecon-home-hero .osp-hecon-hex--contact {
--hex-x: 75%;
--hex-y: var(--hex-row-3);
--hex-shift: -50%;
}
.osp-hecon-home-hero .osp-hecon-hex--decor {
position: absolute !important;
z-index: 1 !important;
display: block !important;
width: var(--decor-size, 80px) !important;
min-height: 0 !important;
aspect-ratio: 1.14 / 1 !important;
margin: 0 !important;
padding: 0 !important;
background: rgba(46, 171, 225, 0.25) !important;
filter: none !important;
transform: none !important;
pointer-events: none !important;
}
.osp-hecon-home-hero .osp-hecon-hex--decor-a { top: 8% !important; left: -6% !important; --decor-size: 66px; opacity: .42 !important; }
.osp-hecon-home-hero .osp-hecon-hex--decor-b { top: -3% !important; left: 13% !important; --decor-size: 92px; opacity: .48 !important; }
.osp-hecon-home-hero .osp-hecon-hex--decor-c { top: 10% !important; right: 11% !important; left: auto !important; --decor-size: 72px; opacity: .42 !important; }
.osp-hecon-home-hero .osp-hecon-hex--decor-d { top: -4% !important; right: -8% !important; left: auto !important; --decor-size: 122px; opacity: .40 !important; }
.osp-hecon-home-hero .osp-hecon-hex--decor-e { top: auto !important; right: -6% !important; bottom: 8% !important; left: auto !important; --decor-size: 76px; opacity: .38 !important; }
.osp-hecon-home-hero .osp-hecon-hex--decor-f { top: auto !important; right: auto !important; bottom: -5% !important; left: 44% !important; --decor-size: 68px; opacity: .34 !important; }
@media (max-width: 1240px) {
.osp-hecon-home-hero .osp-hecon-home-hero__inner {
grid-template-columns: minmax(380px, .9fr) minmax(570px, 1.1fr) !important;
width: min(calc(100% - 48px), 1180px) !important;
}
.osp-hecon-home-hero .osp-hecon-hexcluster {
--hex-size: clamp(166px, 14.2vw, 190px);
--hex-row-2: clamp(157px, 13.4vw, 178px);
--hex-row-3: clamp(314px, 26.8vw, 356px);
width: min(100%, 650px) !important;
}
}
@media (max-width: 1180px) {
.osp-hecon-home-hero {
min-height: auto !important;
background-position: 62% center !important;
}
.osp-hecon-home-hero .osp-hecon-home-hero__inner {
grid-template-columns: 1fr !important;
width: min(calc(100% - 42px), 900px) !important;
padding: 76px 0 64px !important;
}
.osp-hecon-home-hero .osp-hecon-hexcluster {
--hex-size: clamp(178px, 22vw, 210px);
--hex-row-2: clamp(168px, 20.8vw, 198px);
--hex-row-3: clamp(336px, 41.6vw, 396px);
width: min(100%, 720px) !important;
margin: 28px auto 0 !important;
}
}
@media (max-width: 781px) {
.osp-hecon-home-hero {
background-position: 72% center !important;
}
.osp-hecon-home-hero .osp-hecon-home-hero__inner {
width: min(calc(100% - 32px), 680px) !important;
padding: 62px 0 50px !important;
}
.osp-hecon-home-hero .osp-hecon-hexcluster {
display: grid !important;
width: 100% !important;
min-height: 0 !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
margin-top: 34px !important;
}
.osp-hecon-home-hero .osp-hecon-hex:not(.osp-hecon-hex--decor) {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
width: 100% !important;
aspect-ratio: 1.14 / 1 !important;
transform: none !important;
}
.osp-hecon-home-hero .osp-hecon-hex--decor {
display: none !important;
}
}
@media (max-width: 460px) {
.osp-hecon-home-hero .osp-hecon-hexcluster {
grid-template-columns: 1fr !important;
}
} .osp-hecon-home-hero.osp-hecon-home-hero--hexstage {
--hecon-hero-dummy: url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/hecon-home-v2-dummy-2-7.jpg);
min-height: clamp(700px, calc(100svh - 72px), 900px) !important;
background-image:
linear-gradient(90deg, rgba(1, 9, 17, 0.98) 0%, rgba(2, 13, 24, 0.92) 30%, rgba(2, 16, 29, 0.67) 48%, rgba(2, 16, 29, 0.22) 70%, rgba(1, 10, 18, 0.38) 100%),
linear-gradient(180deg, rgba(1, 8, 15, 0.04) 0%, rgba(1, 9, 17, 0.06) 58%, rgba(1, 8, 15, 0.58) 100%),
var(--hecon-hero-dummy) !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner {
display: grid !important;
width: min(calc(100% - 56px), 1580px) !important;
min-height: inherit !important;
grid-template-columns: minmax(360px, 0.80fr) minmax(560px, 1.20fr) !important;
align-items: center !important;
gap: clamp(24px, 3vw, 58px) !important;
margin: 0 auto !important;
padding: clamp(66px, 5.3vw, 94px) 0 clamp(52px, 4.4vw, 74px) !important;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner > .wp-block-group__inner-container,
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster > .wp-block-group__inner-container {
display: contents !important;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner > .wp-block-group__inner-container > *,
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster > .wp-block-group__inner-container > * {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__copy {
position: relative !important;
z-index: 4 !important;
grid-column: 1 !important;
max-width: 610px !important;
margin: 0 !important;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
--hex-size: clamp(160px, 13.4vw, 220px);
--hex-row-2: clamp(136px, 10.6vw, 170px);
--hex-row-3: clamp(272px, 21.2vw, 340px);
position: relative !important;
z-index: 4 !important;
display: block !important;
grid-column: 2 !important;
width: min(100%, 780px) !important;
min-width: 0 !important;
max-width: none !important;
min-height: calc(var(--hex-row-3) + var(--hex-size) + 14px) !important;
justify-self: end !important;
align-self: center !important;
margin: 0 !important;
padding: 0 !important;
isolation: isolate !important;
transform: none !important;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor) {
position: absolute !important;
z-index: 4 !important;
top: var(--hex-y, 0) !important;
right: auto !important;
bottom: auto !important;
left: var(--hex-x, 0) !important;
display: flex !important;
width: var(--hex-size) !important;
min-width: 0 !important;
max-width: none !important;
min-height: 0 !important;
aspect-ratio: 1.14 / 1 !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: clamp(22px, 1.7vw, 30px) clamp(14px, 1.4vw, 22px) clamp(20px, 1.5vw, 26px) !important;
transform: translateX(var(--hex-shift, 0)) !important;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor) > .wp-block-group__inner-container {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-hex--about {
--hex-x: 50%;
--hex-y: 0px;
--hex-shift: -50%;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-hex--positions {
--hex-x: 0%;
--hex-y: var(--hex-row-2);
--hex-shift: 0%;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-hex--ad {
--hex-x: 50%;
--hex-y: var(--hex-row-2);
--hex-shift: -50%;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-hex--initiative {
--hex-x: 100%;
--hex-y: var(--hex-row-2);
--hex-shift: -100%;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-hex--request {
--hex-x: 32.5%;
--hex-y: var(--hex-row-3);
--hex-shift: -50%;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-hex--contact {
--hex-x: 67.5%;
--hex-y: var(--hex-row-3);
--hex-shift: -50%;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor {
position: absolute !important;
z-index: 1 !important;
pointer-events: none !important;
}
@media (max-width: 1180px) and (min-width: 901px) {
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner {
width: min(calc(100% - 40px), 1140px) !important;
grid-template-columns: minmax(345px, 0.72fr) minmax(530px, 1.28fr) !important;
gap: 20px !important;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__copy {
max-width: 470px !important;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
--hex-size: clamp(154px, 14.7vw, 182px);
--hex-row-2: clamp(132px, 12.7vw, 154px);
--hex-row-3: clamp(264px, 25.4vw, 308px);
width: min(100%, 640px) !important;
}
}
@media (max-width: 900px) {
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage {
min-height: auto !important;
background-position: 65% center !important;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__inner {
display: grid !important;
width: min(calc(100% - 34px), 760px) !important;
min-height: 0 !important;
grid-template-columns: 1fr !important;
gap: 36px !important;
padding: 62px 0 50px !important;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__copy,
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
grid-column: 1 !important;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-home-hero__copy {
max-width: 680px !important;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
display: grid !important;
width: 100% !important;
min-height: 0 !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
justify-self: stretch !important;
margin: 0 !important;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor) {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
width: min(100%, 260px) !important;
justify-self: center !important;
transform: none !important;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-hex--decor {
display: none !important;
}
}
@media (max-width: 460px) {
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-hexcluster {
grid-template-columns: 1fr !important;
}
.osp-hecon-home-hero.osp-hecon-home-hero--hexstage .osp-hecon-hex:not(.osp-hecon-hex--decor) {
width: min(100%, 310px) !important;
}
} .osp-hecon-hero-v3 {
--hecon-hero-v3-bg: url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/hecon-hero-city-clean-3-1-1.jpg);
position: relative;
isolation: isolate;
overflow: hidden;
min-height: clamp(760px, calc(100svh - 72px), 920px);
margin: 0 !important;
color: #fff;
background-image:
linear-gradient(90deg, rgba(1, 9, 17, 0.99) 0%, rgba(2, 13, 24, 0.95) 28%, rgba(2, 16, 29, 0.76) 46%, rgba(2, 16, 29, 0.30) 69%, rgba(1, 10, 18, 0.46) 100%),
linear-gradient(180deg, rgba(1, 8, 15, 0.06) 0%, rgba(1, 9, 17, 0.05) 58%, rgba(1, 8, 15, 0.70) 100%),
var(--hecon-hero-v3-bg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.osp-hecon-hero-v3::before,
.osp-hecon-hero-v3::after {
position: absolute;
z-index: 0;
content: "";
pointer-events: none;
}
.osp-hecon-hero-v3::before {
inset: 0 auto 0 0;
width: 54%;
background: linear-gradient(90deg, rgba(1, 8, 15, 0.48), rgba(1, 8, 15, 0));
}
.osp-hecon-hero-v3::after {
right: -10%;
bottom: -28%;
width: 62%;
height: 72%;
background: radial-gradient(circle at 50% 42%, rgba(52, 199, 247, 0.13), transparent 62%);
filter: blur(18px);
}
.osp-hecon-hero-v3 > .wp-block-group__inner-container,
.osp-hecon-hero-v3__layout {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.osp-hecon-hero-v3__layout > .wp-block-group__inner-container {
position: relative;
z-index: 2;
display: grid;
width: min(calc(100% - 64px), 1600px);
min-height: clamp(760px, calc(100svh - 72px), 920px);
grid-template-columns: minmax(360px, 0.80fr) minmax(560px, 1.20fr);
align-items: center;
gap: clamp(26px, 3vw, 64px);
margin: 0 auto;
padding: clamp(70px, 5.5vw, 102px) 0 clamp(56px, 4.8vw, 82px);
}
.osp-hecon-hero-v3__copy {
position: relative;
z-index: 3;
width: 100%;
max-width: 630px !important;
margin: 0 !important;
}
.osp-hecon-hero-v3__copy > .wp-block-group__inner-container {
width: 100%;
max-width: none;
margin: 0;
}
.osp-hecon-hero-v3__kicker {
margin: 0 0 22px !important;
color: #8bddfb;
font-size: 12px;
font-weight: 700;
line-height: 1.3;
letter-spacing: .34em;
text-transform: uppercase;
}
.osp-hecon-hero-v3__title {
max-width: 620px;
margin: 0 0 22px !important;
color: #fff;
font-family: Raleway, Arial, sans-serif;
font-size: clamp(42px, 4.0vw, 72px);
font-weight: 700;
line-height: .98;
letter-spacing: -.035em;
}
.osp-hecon-hero-v3__title span {
color: #46cef7;
}
.osp-hecon-hero-v3__lead {
max-width: 620px;
margin: 0 0 30px !important;
color: rgba(255, 255, 255, .88);
font-size: clamp(17px, 1.25vw, 21px);
line-height: 1.55;
}
.osp-hecon-hero-v3__buttons {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: 0 0 30px !important;
}
.osp-hecon-hero-v3__button .wp-block-button__link {
min-height: 52px;
padding: 15px 24px;
border: 1px solid #39c9f7;
border-radius: 3px;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .015em;
text-decoration: none;
text-transform: uppercase;
transition: transform .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.osp-hecon-hero-v3__button--primary .wp-block-button__link {
color: #fff;
background: #11aeea;
box-shadow: 0 10px 28px rgba(20, 174, 232, .20);
}
.osp-hecon-hero-v3__button--secondary .wp-block-button__link {
color: #74dfff;
background: rgba(2, 20, 34, .58);
}
.osp-hecon-hero-v3__button .wp-block-button__link:hover,
.osp-hecon-hero-v3__button .wp-block-button__link:focus-visible {
transform: translateY(-2px);
border-color: #7ee6ff;
box-shadow: 0 12px 30px rgba(37, 191, 240, .24);
}
.osp-hecon-hero-v3__company-link {
margin: 0 !important;
}
.osp-hecon-hero-v3__company-link a {
display: inline-flex;
align-items: center;
gap: 24px;
padding-bottom: 7px;
border-bottom: 1px solid rgba(91, 215, 250, .76);
color: rgba(255, 255, 255, .90);
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.osp-hecon-hero-v3__stage {
--hex-size: clamp(176px, 12vw, 236px);
--hex-gap-x: clamp(18px, 1.2vw, 28px);
--hex-gap-y: clamp(16px, 1vw, 22px);
position: relative;
z-index: 3;
width: max-content !important;
max-width: none !important;
justify-self: end;
margin: 0 !important;
padding: 0 !important;
isolation: isolate;
}
.osp-hecon-hero-v3__stage > .wp-block-group__inner-container {
position: relative;
display: grid;
width: max-content;
grid-template-columns: repeat(6, calc((var(--hex-size) + var(--hex-gap-x)) / 2));
grid-template-rows: repeat(3, calc((var(--hex-size) / 1.1547) + var(--hex-gap-y)));
align-items: center;
justify-items: center;
margin: 0;
padding: 0;
}
.osp-hecon-hero-v3__hex {
position: relative !important;
z-index: 4;
display: block !important;
width: var(--hex-size) !important;
max-width: none !important;
min-height: 0 !important;
aspect-ratio: 1.1547 / 1;
margin: 0 !important;
padding: 0 !important;
color: #fff;
background: linear-gradient(135deg, rgba(117, 225, 255, .98), rgba(14, 126, 181, .96));
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
filter: drop-shadow(0 0 14px rgba(58, 204, 252, .34));
transform-origin: 50% 50%;
will-change: transform, filter;
transition:
transform .34s cubic-bezier(.2, .72, .2, 1),
filter .34s ease;
}
.osp-hecon-hero-v3__hex::before {
position: absolute;
z-index: 0;
inset: 2px;
content: "";
background:
radial-gradient(circle at 50% 27%, rgba(72, 184, 228, .18), transparent 43%),
linear-gradient(145deg, rgba(7, 34, 54, .98), rgba(3, 20, 34, .97));
clip-path: inherit;
transition: background .34s ease;
}
.osp-hecon-hero-v3__hex::after {
position: absolute;
z-index: 1;
inset: 2px;
content: "";
background:
linear-gradient(145deg, rgba(182, 242, 255, .16), transparent 35%, rgba(46, 196, 244, .10) 68%, transparent 86%);
clip-path: inherit;
opacity: 0;
pointer-events: none;
transition: opacity .34s ease;
}
.osp-hecon-hero-v3__hex > .wp-block-group__inner-container {
position: relative;
z-index: 2;
display: flex;
width: 100%;
height: 100%;
max-width: none !important;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: clamp(20px, 1.5vw, 28px) clamp(14px, 1.2vw, 22px) !important;
text-align: center;
}
.osp-hecon-hero-v3__hit {
position: absolute;
z-index: 5;
inset: 0;
display: block;
clip-path: inherit;
}
.osp-hecon-hero-v3__hex:hover,
.osp-hecon-hero-v3__hex:focus-within {
z-index: 6;
filter:
drop-shadow(0 0 12px rgba(121, 229, 255, .70))
drop-shadow(0 0 28px rgba(26, 178, 232, .48));
transform: translateY(-8px) scale(1.035);
}
.osp-hecon-hero-v3__hex:hover::after,
.osp-hecon-hero-v3__hex:focus-within::after {
opacity: 1;
}
.osp-hecon-hero-v3__hex:hover::before,
.osp-hecon-hero-v3__hex:focus-within::before {
background:
radial-gradient(circle at 50% 24%, rgba(94, 211, 249, .28), transparent 44%),
linear-gradient(145deg, rgba(7, 41, 64, .99), rgba(2, 24, 41, .98));
}
.osp-hecon-hero-v3__hit:focus-visible {
outline: 3px solid #fff;
outline-offset: -8px;
}
.osp-hecon-hero-v3__icon {
display: block;
width: clamp(34px, 2.6vw, 46px);
height: clamp(34px, 2.6vw, 46px);
margin: 0 0 12px;
color: #9be8ff;
pointer-events: none;
transition: color .30s ease, transform .34s cubic-bezier(.2, .72, .2, 1);
}
.osp-hecon-hero-v3__icon svg {
display: block;
width: 100%;
height: 100%;
}
.osp-hecon-hero-v3__hex:hover .osp-hecon-hero-v3__icon,
.osp-hecon-hero-v3__hex:focus-within .osp-hecon-hero-v3__icon {
color: #d8f8ff;
transform: translateY(-3px) scale(1.08);
}
.osp-hecon-hero-v3__hex h3 {
max-width: 100%;
margin: 0 0 6px !important;
color: #fff;
font-size: clamp(14px, 1.0vw, 18px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -.015em;
text-transform: uppercase;
pointer-events: none;
transition: color .30s ease, transform .30s ease, letter-spacing .30s ease;
}
.osp-hecon-hero-v3__hex:hover h3,
.osp-hecon-hero-v3__hex:focus-within h3 {
color: #bcefff;
letter-spacing: .005em;
transform: translateY(-1px);
}
.osp-hecon-hero-v3__hex p {
max-width: 155px;
margin: 0 !important;
color: rgba(223, 244, 255, .88);
font-size: clamp(11px, .76vw, 13px);
line-height: 1.35;
pointer-events: none;
transition: color .30s ease, transform .30s ease;
}
.osp-hecon-hero-v3__hex:hover p,
.osp-hecon-hero-v3__hex:focus-within p {
color: #fff;
transform: translateY(-1px);
}
.osp-hecon-hero-v3__hex--initiative h3,
.osp-hecon-hero-v3__hex--request h3 {
font-size: clamp(13px, .9vw, 16px);
}
.osp-hecon-hero-v3__hex--about { grid-column: 3 / span 2; grid-row: 1; }
.osp-hecon-hero-v3__hex--positions { grid-column: 1 / span 2; grid-row: 2; }
.osp-hecon-hero-v3__hex--ad { grid-column: 3 / span 2; grid-row: 2; }
.osp-hecon-hero-v3__hex--initiative { grid-column: 5 / span 2; grid-row: 2; }
.osp-hecon-hero-v3__hex--request { grid-column: 2 / span 2; grid-row: 3; }
.osp-hecon-hero-v3__hex--contact { grid-column: 4 / span 2; grid-row: 3; }
.osp-hecon-hero-v3__decor {
position: absolute;
z-index: 1;
display: block;
width: var(--decor-size, calc(var(--hex-size) * .88));
aspect-ratio: 1.1547 / 1;
border: 1px solid rgba(75, 204, 245, .55);
background:
radial-gradient(circle at 50% 45%, rgba(38, 143, 187, .10), transparent 62%),
rgba(3, 27, 44, .22);
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
filter: drop-shadow(0 0 12px rgba(31, 174, 223, .10));
pointer-events: none;
}
.osp-hecon-hero-v3__decor--a {
top: -15%;
left: -13%;
--decor-size: calc(var(--hex-size) * .82);
opacity: .36;
}
.osp-hecon-hero-v3__decor--b {
top: -18%;
left: 20%;
--decor-size: calc(var(--hex-size) * .98);
opacity: .28;
}
.osp-hecon-hero-v3__decor--c {
top: -14%;
right: 8%;
--decor-size: calc(var(--hex-size) * .88);
opacity: .30;
}
.osp-hecon-hero-v3__decor--d {
top: 19%;
right: -16%;
--decor-size: calc(var(--hex-size) * 1.02);
opacity: .24;
}
.osp-hecon-hero-v3__decor--e {
right: -10%;
bottom: -4%;
--decor-size: calc(var(--hex-size) * .86);
opacity: .24;
}
.osp-hecon-hero-v3__copy,
.osp-hecon-hero-v3__hex {
animation: heconHeroV3In .62s both cubic-bezier(.2, .72, .2, 1);
}
.osp-hecon-hero-v3__hex--about { animation-delay: .10s; }
.osp-hecon-hero-v3__hex--positions { animation-delay: .16s; }
.osp-hecon-hero-v3__hex--ad { animation-delay: .22s; }
.osp-hecon-hero-v3__hex--initiative { animation-delay: .28s; }
.osp-hecon-hero-v3__hex--request { animation-delay: .34s; }
.osp-hecon-hero-v3__hex--contact { animation-delay: .40s; }
@keyframes heconHeroV3In {
from { opacity: 0; transform: translateY(14px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 1280px) {
.osp-hecon-hero-v3__layout > .wp-block-group__inner-container {
width: min(calc(100% - 44px), 1220px);
grid-template-columns: minmax(335px, .78fr) minmax(500px, 1.22fr);
gap: 20px;
}
.osp-hecon-hero-v3__copy {
max-width: 500px !important;
}
.osp-hecon-hero-v3__stage {
--hex-size: clamp(154px, 12.5vw, 194px);
--hex-gap-x: 14px;
--hex-gap-y: 12px;
}
.osp-hecon-hero-v3__title {
font-size: clamp(40px, 4vw, 58px);
}
}
@media (max-width: 980px) {
.osp-hecon-hero-v3 {
min-height: auto;
background-position: 64% center;
}
.osp-hecon-hero-v3__layout > .wp-block-group__inner-container {
min-height: 0;
grid-template-columns: 1fr;
gap: 42px;
width: min(calc(100% - 36px), 820px);
padding: 64px 0 58px;
}
.osp-hecon-hero-v3__copy {
max-width: 700px !important;
}
.osp-hecon-hero-v3__stage {
--hex-size: clamp(176px, 22vw, 218px);
--hex-gap-x: 14px;
--hex-gap-y: 12px;
justify-self: center;
}
}
@media (max-width: 700px) {
.osp-hecon-hero-v3 {
background-position: 72% center;
}
.osp-hecon-hero-v3__layout > .wp-block-group__inner-container {
width: min(calc(100% - 28px), 620px);
gap: 34px;
padding: 54px 0 46px;
}
.osp-hecon-hero-v3__title {
font-size: clamp(38px, 11vw, 52px);
}
.osp-hecon-hero-v3__lead {
font-size: 16px;
}
.osp-hecon-hero-v3__buttons,
.osp-hecon-hero-v3__buttons .wp-block-button,
.osp-hecon-hero-v3__buttons .wp-block-button__link {
width: 100%;
}
.osp-hecon-hero-v3__stage {
width: 100% !important;
max-width: 560px !important;
}
.osp-hecon-hero-v3__stage > .wp-block-group__inner-container {
width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: none;
gap: 12px;
}
.osp-hecon-hero-v3__hex,
.osp-hecon-hero-v3__hex--about,
.osp-hecon-hero-v3__hex--positions,
.osp-hecon-hero-v3__hex--ad,
.osp-hecon-hero-v3__hex--initiative,
.osp-hecon-hero-v3__hex--request,
.osp-hecon-hero-v3__hex--contact {
width: min(100%, 250px) !important;
grid-column: auto;
grid-row: auto;
justify-self: center;
}
.osp-hecon-hero-v3__decor {
display: none;
}
}
@media (max-width: 390px) {
.osp-hecon-hero-v3__stage > .wp-block-group__inner-container {
grid-template-columns: 1fr;
}
.osp-hecon-hero-v3__hex,
.osp-hecon-hero-v3__hex--about,
.osp-hecon-hero-v3__hex--positions,
.osp-hecon-hero-v3__hex--ad,
.osp-hecon-hero-v3__hex--initiative,
.osp-hecon-hero-v3__hex--request,
.osp-hecon-hero-v3__hex--contact {
width: min(100%, 310px) !important;
}
}
@media (prefers-reduced-motion: reduce) {
.osp-hecon-hero-v3__copy,
.osp-hecon-hero-v3__hex {
animation: none !important;
}
.osp-hecon-hero-v3__hex,
.osp-hecon-hero-v3__icon,
.osp-hecon-hero-v3__hex h3,
.osp-hecon-hero-v3__hex p {
transition-duration: .01ms !important;
}
.osp-hecon-hero-v3__hex:hover,
.osp-hecon-hero-v3__hex:focus-within,
.osp-hecon-hero-v3__hex:hover .osp-hecon-hero-v3__icon,
.osp-hecon-hero-v3__hex:focus-within .osp-hecon-hero-v3__icon {
transform: none !important;
}
} .osp-hecon-hero-v3 {
--hecon-hero-v3-bg: url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/hecon-hero-city-clean-3-1-1.jpg);
background-image:
linear-gradient(90deg, rgba(1, 9, 17, .96) 0%, rgba(2, 13, 24, .86) 28%, rgba(2, 16, 29, .52) 48%, rgba(2, 16, 29, .18) 70%, rgba(1, 10, 18, .32) 100%),
linear-gradient(180deg, rgba(1, 8, 15, .03) 0%, rgba(1, 9, 17, .02) 58%, rgba(1, 8, 15, .58) 100%),
var(--hecon-hero-v3-bg);
background-position: 58% center;
}
.osp-hecon-hero-v3__stage .osp-hecon-hero-v3__decor {
display: none !important;
}
.osp-hecon-hero-v3__decor-layer {
position: absolute;
z-index: 1;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.osp-hecon-hero-v3__ambient {
position: absolute;
display: block;
width: var(--ambient-size, 86px);
aspect-ratio: 1.1547 / 1;
border: var(--ambient-border, 1px) solid rgba(61, 197, 244, var(--ambient-alpha, .38));
background: rgba(4, 30, 48, var(--ambient-fill, .08));
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
filter: drop-shadow(0 0 12px rgba(22, 157, 210, .10));
opacity: var(--ambient-opacity, 1);
}
.osp-hecon-hero-v3__ambient--01 { top: 4%; left: 8%; --ambient-size: 78px; --ambient-alpha: .44; --ambient-fill: .04; }
.osp-hecon-hero-v3__ambient--02 { top: 10%; left: -1.5%; --ambient-size: 112px; --ambient-alpha: .46; --ambient-fill: .06; }
.osp-hecon-hero-v3__ambient--03 { top: 39%; left: 2.5%; --ambient-size: 74px; --ambient-alpha: .34; --ambient-fill: .05; }
.osp-hecon-hero-v3__ambient--04 { top: 7%; left: 50%; --ambient-size: 92px; --ambient-alpha: .52; --ambient-fill: .04; }
.osp-hecon-hero-v3__ambient--05 { top: 12%; right: 16%; --ambient-size: 82px; --ambient-alpha: .40; --ambient-fill: .04; }
.osp-hecon-hero-v3__ambient--06 { top: 2%; right: 2.5%; --ambient-size: 148px; --ambient-alpha: .28; --ambient-fill: .03; --ambient-border: 5px; }
.osp-hecon-hero-v3__ambient--07 { top: 31%; right: -1%; --ambient-size: 68px; --ambient-alpha: .48; --ambient-fill: .04; }
.osp-hecon-hero-v3__ambient--08 { top: 55%; right: 1.5%; --ambient-size: 92px; --ambient-alpha: .30; --ambient-fill: .05; }
.osp-hecon-hero-v3__ambient--09 { right: 18%; bottom: 7%; --ambient-size: 116px; --ambient-alpha: .22; --ambient-fill: .04; --ambient-border: 4px; }
.osp-hecon-hero-v3__ambient--10 { left: 47%; bottom: 5%; --ambient-size: 66px; --ambient-alpha: .36; --ambient-fill: .04; }
@media (max-width: 1280px) {
.osp-hecon-hero-v3 {
background-position: 62% center;
}
.osp-hecon-hero-v3__ambient--01 { left: 5%; }
.osp-hecon-hero-v3__ambient--04 { left: 47%; }
.osp-hecon-hero-v3__ambient--06 { right: -2%; }
.osp-hecon-hero-v3__ambient--09 { right: 10%; }
}
@media (max-width: 980px) {
.osp-hecon-hero-v3 {
background-position: 68% center;
}
.osp-hecon-hero-v3__ambient--02,
.osp-hecon-hero-v3__ambient--03,
.osp-hecon-hero-v3__ambient--06,
.osp-hecon-hero-v3__ambient--08,
.osp-hecon-hero-v3__ambient--09 {
display: none;
}
.osp-hecon-hero-v3__ambient--01 { top: 3%; left: 5%; }
.osp-hecon-hero-v3__ambient--04 { top: 28%; left: 76%; }
.osp-hecon-hero-v3__ambient--05 { top: 58%; right: 4%; }
.osp-hecon-hero-v3__ambient--07 { top: auto; right: auto; bottom: 8%; left: 7%; }
.osp-hecon-hero-v3__ambient--10 { right: 6%; bottom: 4%; left: auto; }
}
@media (max-width: 700px) {
.osp-hecon-hero-v3__decor-layer {
display: none;
}
} .osp-hecon-hero-v3 {
--hecon-hero-v3-bg: url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/hecon-hero-city-clean-3-1-1.jpg);
background-color: #03111d;
background-image:
linear-gradient(90deg, rgba(1, 9, 17, .94) 0%, rgba(2, 13, 24, .82) 27%, rgba(2, 16, 29, .44) 47%, rgba(2, 16, 29, .10) 70%, rgba(1, 10, 18, .22) 100%),
linear-gradient(180deg, rgba(1, 8, 15, .12) 0%, rgba(1, 9, 17, .02) 48%, rgba(1, 8, 15, .34) 100%),
var(--hecon-hero-v3-bg);
background-position: center center, center center, center bottom;
background-repeat: no-repeat;
background-size: 100% 100%, 100% 100%, 100% auto;
}
.osp-hecon-hero-v3::before {
width: 50%;
background: linear-gradient(90deg, rgba(1, 8, 15, .42) 0%, rgba(1, 8, 15, .13) 68%, rgba(1, 8, 15, 0) 100%);
}
.osp-hecon-hero-v3__ambient-layer {
position: absolute;
z-index: 1;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.osp-hecon-hero-v3__ambient {
position: absolute;
display: block;
width: var(--ambient-size, 86px);
height: auto;
overflow: visible;
color: rgba(55, 189, 239, var(--ambient-alpha, .46));
filter: drop-shadow(0 0 7px rgba(25, 166, 221, .13));
opacity: var(--ambient-opacity, 1);
}
.osp-hecon-hero-v3__ambient polygon {
fill: rgba(3, 29, 47, var(--ambient-fill, .025));
stroke: currentColor;
stroke-width: var(--ambient-stroke, 1.55);
vector-effect: non-scaling-stroke;
}
.osp-hecon-hero-v3__ambient-inner {
fill: none !important;
opacity: .62;
}
.osp-hecon-hero-v3__ambient--bold {
color: rgba(24, 126, 194, .48);
filter: drop-shadow(0 0 10px rgba(20, 125, 195, .10));
--ambient-stroke: 4.2;
--ambient-fill: .035;
}
.osp-hecon-hero-v3__ambient--01 { top: 4.0%; left: 8.4%; --ambient-size: 88px; --ambient-alpha: .54; }
.osp-hecon-hero-v3__ambient--02 { top: 10.5%; left: -1.3%; --ambient-size: 128px; --ambient-alpha: .54; --ambient-fill: .04; }
.osp-hecon-hero-v3__ambient--03 { top: 39%; left: 2.8%; --ambient-size: 82px; --ambient-alpha: .40; }
.osp-hecon-hero-v3__ambient--04 { top: 7.2%; left: 50.2%; --ambient-size: 102px; --ambient-alpha: .61; }
.osp-hecon-hero-v3__ambient--05 { top: 12.5%; right: 16.6%; --ambient-size: 92px; --ambient-alpha: .46; }
.osp-hecon-hero-v3__ambient--06 { top: 2.3%; right: 1.9%; --ambient-size: 178px; --ambient-opacity: .86; }
.osp-hecon-hero-v3__ambient--07 { top: 31%; right: -.9%; --ambient-size: 76px; --ambient-alpha: .56; }
.osp-hecon-hero-v3__ambient--08 { top: 55%; right: 1.5%; --ambient-size: 104px; --ambient-alpha: .35; }
.osp-hecon-hero-v3__ambient--09 { right: 18.0%; bottom: 6.3%; --ambient-size: 132px; --ambient-opacity: .72; }
.osp-hecon-hero-v3__ambient--10 { left: 47.2%; bottom: 5.0%; --ambient-size: 74px; --ambient-alpha: .44; }
@media (max-width: 1280px) {
.osp-hecon-hero-v3 {
background-position: center center, center center, center bottom;
background-size: 100% 100%, 100% 100%, 100% auto;
}
.osp-hecon-hero-v3__ambient--01 { left: 5.5%; }
.osp-hecon-hero-v3__ambient--04 { left: 46.5%; }
.osp-hecon-hero-v3__ambient--06 { right: -3%; }
.osp-hecon-hero-v3__ambient--09 { right: 9%; }
}
@media (max-width: 980px) {
.osp-hecon-hero-v3 {
background-position: center center, center center, 66% bottom;
background-size: 100% 100%, 100% 100%, auto 100%;
}
.osp-hecon-hero-v3__ambient--02,
.osp-hecon-hero-v3__ambient--03,
.osp-hecon-hero-v3__ambient--06,
.osp-hecon-hero-v3__ambient--08,
.osp-hecon-hero-v3__ambient--09 {
display: none;
}
.osp-hecon-hero-v3__ambient--01 { top: 3%; left: 5%; }
.osp-hecon-hero-v3__ambient--04 { top: 28%; left: 76%; }
.osp-hecon-hero-v3__ambient--05 { top: 58%; right: 4%; }
.osp-hecon-hero-v3__ambient--07 { top: auto; right: auto; bottom: 8%; left: 7%; }
.osp-hecon-hero-v3__ambient--10 { right: 6%; bottom: 4%; left: auto; }
}
@media (max-width: 700px) {
.osp-hecon-hero-v3__ambient-layer {
display: none;
}
} .osp-hecon-hero-v3 {
background-image:
linear-gradient(90deg, rgba(1, 16, 29, .91) 0%, rgba(1, 16, 29, .72) 34%, rgba(2, 22, 39, .30) 64%, rgba(2, 20, 35, .18) 100%),
linear-gradient(180deg, rgba(2, 16, 28, .16) 0%, rgba(1, 14, 25, .18) 72%, rgba(1, 14, 25, .55) 100%),
url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/hecon-hero-city-3-2.jpg) !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
.osp-hecon-home32-intro,
.osp-hecon-home32-workstyle,
.osp-hecon-home32-trust,
.osp-hecon-home32-cta {
margin: 0 !important;
padding: 0 !important;
}
.osp-hecon-home32-intro > .wp-block-group__inner-container,
.osp-hecon-home32-workstyle > .wp-block-group__inner-container,
.osp-hecon-home32-trust > .wp-block-group__inner-container,
.osp-hecon-home32-cta > .wp-block-group__inner-container {
max-width: none !important;
padding: 0 !important;
}
.osp-hecon-home32-kicker {
margin: 0 0 16px;
color: #1b5684;
font-size: 12px;
font-weight: 700;
letter-spacing: .18em;
line-height: 1.35;
text-transform: uppercase;
}
.osp-hecon-home32-kicker--light { color: #c9e8f7; }
.osp-hecon-home32-rule {
display: block;
width: 42px;
height: 2px;
margin: 22px 0 24px;
background: #00aeea;
}
.osp-hecon-home32-btn {
display: inline-flex;
align-items: center;
gap: 22px;
min-height: 46px;
padding: 0 23px;
border-radius: 2px;
font-size: 14px;
font-weight: 600;
line-height: 1;
text-decoration: none !important;
transition: transform .24s ease, box-shadow .24s ease, background-color .24s ease, color .24s ease;
}
.osp-hecon-home32-btn:hover { transform: translateY(-2px); }
.osp-hecon-home32-btn--dark { background: #07365b; color: #fff !important; }
.osp-hecon-home32-btn--dark:hover { background: #0a4b78; box-shadow: 0 10px 28px rgba(5, 53, 89, .16); }
.osp-hecon-home32-btn--light { background: #fff; color: #07365b !important; }
.osp-hecon-home32-btn--light:hover { box-shadow: 0 12px 34px rgba(0,0,0,.18); }
.osp-hecon-home32-intro { background: #f7fafc; color: #0a2f52; }
.osp-hecon-home32-intro__inner {
width: min(1440px, calc(100% - 80px));
margin: 0 auto;
display: grid;
grid-template-columns: minmax(300px, .92fr) minmax(620px, 1.55fr);
gap: clamp(48px, 6vw, 104px);
align-items: center;
padding: 72px 0 78px;
}
.osp-hecon-home32-intro__copy h2,
.osp-hecon-home32-workstyle__copy h2,
.osp-hecon-home32-cta__copy h2 {
margin: 0;
font-family: inherit;
font-weight: 700;
letter-spacing: -.025em;
}
.osp-hecon-home32-intro__copy h2 { color: #0b3357; font-size: clamp(36px, 3.3vw, 58px); line-height: 1.03; }
.osp-hecon-home32-intro__copy > p:not(.osp-hecon-home32-kicker) { max-width: 520px; margin: 0 0 28px; color: #294d6a; font-size: 17px; line-height: 1.58; }
.osp-hecon-home32-paths {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(24px, 2.7vw, 42px);
}
.osp-hecon-home32-path { min-width: 0; }
.osp-hecon-home32-photohex {
position: relative;
width: 100%;
aspect-ratio: 1.07 / 1;
margin-bottom: 22px;
overflow: hidden;
clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
background: #dce7ee;
box-shadow: inset 0 0 0 1px rgba(0, 174, 234, .3);
}
.osp-hecon-home32-photohex img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.04);
transition: transform .45s ease;
}
.osp-hecon-home32-path:hover .osp-hecon-home32-photohex img { transform: scale(1.09); }
.osp-hecon-home32-path h3 { margin: 0 0 10px; color: #092f51; font-size: 22px; line-height: 1.15; }
.osp-hecon-home32-path p { margin: 0 0 17px; color: #375874; font-size: 15px; line-height: 1.52; }
.osp-hecon-home32-path > a { display: inline-flex; gap: 16px; align-items: center; color: #0076bd; font-size: 14px; font-weight: 700; text-decoration: none !important; }
.osp-hecon-home32-path > a::before { content: ''; display: block; width: 28px; height: 2px; margin-right: -6px; background: #00aeea; }
.osp-hecon-home32-trust {
position: relative;
color: #fff;
background:
linear-gradient(90deg, rgba(3, 35, 60, .91), rgba(3, 35, 60, .77)),
url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/home-32-alpen.svg) center 48% / cover no-repeat;
}
.osp-hecon-home32-trust__inner {
width: min(1440px, calc(100% - 80px));
margin: 0 auto;
padding: 42px 0 48px;
}
.osp-hecon-home32-trust__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 26px;
}
.osp-hecon-home32-trust__item {
min-height: 150px;
padding: 8px 34px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border-left: 1px solid rgba(188, 221, 237, .35);
}
.osp-hecon-home32-trust__item:first-child { border-left: 0; }
.osp-hecon-home32-trust__icon {
width: 58px;
height: 52px;
margin-bottom: 14px;
display: grid;
place-items: center;
clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
background: rgba(6, 56, 88, .52);
outline: 1px solid rgba(106, 202, 245, .55);
color: #eefaff;
}
.osp-hecon-home32-trust__icon svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.osp-hecon-home32-trust__item strong { margin-bottom: 6px; font-size: clamp(18px, 1.7vw, 27px); line-height: 1.08; }
.osp-hecon-home32-trust__item span:last-child { color: #d9e8ef; font-size: 14px; line-height: 1.35; }
.osp-hecon-home32-workstyle { background: #fff; color: #0a2f52; }
.osp-hecon-home32-workstyle__inner {
width: min(1440px, calc(100% - 80px));
margin: 0 auto;
display: grid;
grid-template-columns: minmax(340px, 1.05fr) minmax(570px, 1.25fr);
gap: clamp(48px, 7vw, 108px);
align-items: center;
padding: 72px 0 78px;
}
.osp-hecon-home32-workstyle__copy h2 { color: #0b3357; font-size: clamp(34px, 3vw, 52px); line-height: 1.06; }
.osp-hecon-home32-workstyle__copy > p:not(.osp-hecon-home32-kicker) { max-width: 620px; margin: 0 0 28px; color: #365570; font-size: 16px; line-height: 1.62; }
.osp-hecon-home32-workstyle__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.osp-hecon-home32-step {
aspect-ratio: 1 / .93;
padding: 26px 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
background: linear-gradient(145deg, #f4f8fb, #eaf3f8);
color: #0b385d;
transition: transform .25s ease, filter .25s ease;
}
.osp-hecon-home32-step:hover { transform: translateY(-5px); filter: drop-shadow(0 11px 18px rgba(8, 55, 88, .12)); }
.osp-hecon-home32-step > span { width: 44px; height: 44px; margin-bottom: 13px; color: #008fe0; }
.osp-hecon-home32-step svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.osp-hecon-home32-step strong { margin-bottom: 7px; font-size: 19px; }
.osp-hecon-home32-step small { max-width: 135px; color: #547088; font-size: 12px; line-height: 1.42; }
.osp-hecon-home32-cta {
position: relative;
overflow: hidden;
color: #fff;
background:
linear-gradient(90deg, rgba(3, 34, 52, .82) 0%, rgba(3, 34, 52, .61) 43%, rgba(3, 34, 52, .22) 72%, rgba(3, 34, 52, .28) 100%),
url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/home-32-alpen.svg) center 54% / cover no-repeat;
}
.osp-hecon-home32-cta__inner {
position: relative;
width: min(1440px, calc(100% - 80px));
min-height: 455px;
margin: 0 auto;
display: flex;
align-items: center;
padding: 64px 0;
}
.osp-hecon-home32-cta__copy { position: relative; z-index: 4; max-width: 660px; }
.osp-hecon-home32-cta__copy h2 { color: #fff; font-size: clamp(42px, 4.4vw, 72px); line-height: .99; }
.osp-hecon-home32-cta__copy > p:not(.osp-hecon-home32-kicker) { max-width: 560px; margin: 24px 0 30px; color: #edf5f7; font-size: 17px; line-height: 1.55; }
.osp-hecon-home32-cta__badge {
position: absolute;
z-index: 3;
top: 50%;
right: 2%;
width: 250px;
aspect-ratio: 1.08 / 1;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
background: rgba(4, 48, 77, .78);
box-shadow: inset 0 0 0 1px rgba(111, 210, 250, .8);
font-size: 14px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
}
.osp-hecon-home32-cta__badge i { width: 38px; height: 2px; margin-top: 6px; background: #00b7ef; }
.osp-hecon-home32-cta__deco { position: absolute; z-index: 1; display: block; aspect-ratio: 1.15 / 1; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background: rgba(224,244,250,.13); }
.osp-hecon-home32-cta__deco--1 { width: 150px; right: 18%; top: 8%; }
.osp-hecon-home32-cta__deco--2 { width: 105px; right: 25%; bottom: 6%; }
.osp-hecon-home32-cta__deco--3 { width: 92px; right: 3%; bottom: -2%; }
@media (max-width: 1100px) {
.osp-hecon-home32-intro__inner,
.osp-hecon-home32-workstyle__inner { width: min(100% - 48px, 980px); grid-template-columns: 1fr; }
.osp-hecon-home32-paths { gap: 26px; }
.osp-hecon-home32-trust__inner,
.osp-hecon-home32-cta__inner { width: calc(100% - 48px); }
.osp-hecon-home32-cta__badge { width: 210px; right: 0; }
}
@media (max-width: 780px) {
.osp-hecon-home32-intro__inner,
.osp-hecon-home32-workstyle__inner,
.osp-hecon-home32-trust__inner,
.osp-hecon-home32-cta__inner { width: calc(100% - 32px); }
.osp-hecon-home32-intro__inner,
.osp-hecon-home32-workstyle__inner { padding: 52px 0 58px; }
.osp-hecon-home32-paths { grid-template-columns: 1fr; }
.osp-hecon-home32-path { display: grid; grid-template-columns: 126px 1fr; column-gap: 20px; align-items: center; }
.osp-hecon-home32-photohex { grid-row: 1 / span 3; margin: 0; }
.osp-hecon-home32-path h3 { margin-top: 0; }
.osp-hecon-home32-path > a { grid-column: 2; }
.osp-hecon-home32-trust__grid { grid-template-columns: repeat(2, 1fr); }
.osp-hecon-home32-trust__item:nth-child(3) { border-left: 0; border-top: 1px solid rgba(188,221,237,.35); padding-top: 24px; }
.osp-hecon-home32-trust__item:nth-child(4) { border-top: 1px solid rgba(188,221,237,.35); padding-top: 24px; }
.osp-hecon-home32-workstyle__steps { grid-template-columns: repeat(3, minmax(130px, 1fr)); overflow-x: auto; padding: 10px 0 18px; }
.osp-hecon-home32-cta__inner { min-height: 520px; align-items: flex-start; padding: 56px 0 220px; }
.osp-hecon-home32-cta__badge { top: auto; right: auto; bottom: 32px; left: 0; width: 185px; transform: none; }
.osp-hecon-home32-cta__deco--1 { right: 6%; top: 55%; }
}
@media (max-width: 520px) {
.osp-hecon-home32-intro__copy h2,
.osp-hecon-home32-workstyle__copy h2 { font-size: 34px; }
.osp-hecon-home32-path { grid-template-columns: 100px 1fr; }
.osp-hecon-home32-trust__grid { grid-template-columns: 1fr; }
.osp-hecon-home32-trust__item { border-left: 0; border-top: 1px solid rgba(188,221,237,.35); padding: 22px 10px; min-height: 130px; }
.osp-hecon-home32-trust__item:first-child { border-top: 0; }
.osp-hecon-home32-workstyle__steps { grid-template-columns: 230px 230px 230px; }
.osp-hecon-home32-cta__copy h2 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.osp-hecon-home32-photohex img,
.osp-hecon-home32-step,
.osp-hecon-home32-btn { transition: none !important; }
} .osp-hecon-lp-footer {
background: #03192a !important;
color: #dce9f0 !important;
border-top: 1px solid rgba(64, 187, 236, .18);
}
.osp-hecon-lp-footer__grid { max-width: 1440px !important; padding-top: 50px !important; padding-bottom: 34px !important; }
.osp-hecon-lp-footer h3,
.osp-hecon-lp-footer h4 { color: #fff !important; }
.osp-hecon-lp-footer a { color: #c8dde8 !important; text-decoration: none !important; }
.osp-hecon-lp-footer a:hover { color: #45c8f5 !important; }
.osp-hecon-lp-footer__legal { color: #7f9bac !important; border-top-color: rgba(255,255,255,.08) !important; } .osp-wpb-hecon {
--hecon-content-max: 1360px;
}
.osp-hecon-hero-v3__layout > .wp-block-group__inner-container {
width: min(calc(100% - 80px), 1520px);
grid-template-columns: minmax(340px, .78fr) minmax(560px, 1.22fr);
}
.osp-hecon-hero-v3__copy { max-width: 580px !important; }
.osp-hecon-hero-v3__title { max-width: 580px; }
.osp-hecon-hero-v3__lead { max-width: 560px; font-size: 18px; } .osp-hecon-hero-v3__ambient--01 { --ambient-alpha: .28; --ambient-fill: .005; --ambient-stroke: 1.15; opacity: .78; }
.osp-hecon-hero-v3__ambient--02 { --ambient-alpha: .48; --ambient-fill: .018; --ambient-stroke: 1.65; opacity: .88; }
.osp-hecon-hero-v3__ambient--03 { --ambient-alpha: .22; --ambient-fill: 0; --ambient-stroke: 1.05; opacity: .64; }
.osp-hecon-hero-v3__ambient--04 { --ambient-alpha: .52; --ambient-fill: .012; --ambient-stroke: 1.55; opacity: .90; }
.osp-hecon-hero-v3__ambient--05 { --ambient-alpha: .26; --ambient-fill: 0; --ambient-stroke: 1.10; opacity: .70; }
.osp-hecon-hero-v3__ambient--06 { --ambient-alpha: .44; --ambient-fill: .028; --ambient-stroke: 3.5; opacity: .82; }
.osp-hecon-hero-v3__ambient--07 { --ambient-alpha: .34; --ambient-fill: .006; --ambient-stroke: 1.25; opacity: .74; }
.osp-hecon-hero-v3__ambient--08 { --ambient-alpha: .18; --ambient-fill: 0; --ambient-stroke: 1; opacity: .52; }
.osp-hecon-hero-v3__ambient--09 { --ambient-alpha: .40; --ambient-fill: .020; --ambient-stroke: 3.1; opacity: .68; }
.osp-hecon-hero-v3__ambient--10 { --ambient-alpha: .30; --ambient-fill: .008; --ambient-stroke: 1.2; opacity: .72; }
.osp-hecon-home32-intro__inner,
.osp-hecon-home32-trust__inner,
.osp-hecon-home32-workstyle__inner,
.osp-hecon-home32-cta__inner,
.osp-hecon-home33-testimonial__inner {
width: min(var(--hecon-content-max), calc(100% - 80px));
}
.osp-hecon-home32-intro__inner {
grid-template-columns: minmax(300px, .78fr) minmax(600px, 1.45fr);
gap: clamp(44px, 5vw, 78px);
padding: 68px 0 72px;
}
.osp-hecon-home32-intro__copy { align-self: start; padding-top: 4px; }
.osp-hecon-home32-intro__copy > p:not(.osp-hecon-home32-kicker) { max-width: 480px; }
.osp-hecon-home32-paths { gap: clamp(22px, 2.2vw, 34px); align-items: start; }
.osp-hecon-home32-photohex { max-width: 250px; margin-inline: auto; margin-bottom: 18px; aspect-ratio: 1.08 / 1; }
.osp-hecon-home32-path h3 { font-size: 20px; }
.osp-hecon-home32-path p { max-width: 230px; margin-inline: auto; }
.osp-hecon-home32-path { text-align: left; }
.osp-hecon-home32-path > a { margin-top: 2px; }
.osp-hecon-home32-trust {
background:
linear-gradient(90deg, rgba(3, 35, 60, .90), rgba(3, 35, 60, .70)),
url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/home-33-trust.jpg) center 52% / cover no-repeat;
}
.osp-hecon-home32-trust__inner { padding: 38px 0 44px; }
.osp-hecon-home32-workstyle__inner {
grid-template-columns: minmax(360px, 1.05fr) minmax(520px, 1.15fr);
gap: clamp(42px, 5.5vw, 82px);
padding: 64px 0 70px;
}
.osp-hecon-home32-step { aspect-ratio: 1.08 / 1; padding: 24px 18px; }
.osp-hecon-home33-testimonial { margin: 0 !important; padding: 0 !important; background: #f6f9fb; color: #0a2f52; }
.osp-hecon-home33-testimonial > .wp-block-group__inner-container { max-width: none !important; padding: 0 !important; }
.osp-hecon-home33-testimonial__inner {
margin: 0 auto;
display: grid;
grid-template-columns: minmax(360px, .92fr) minmax(520px, 1.18fr);
gap: clamp(50px, 7vw, 110px);
align-items: center;
padding: 66px 0 72px;
}
.osp-hecon-home33-testimonial__copy h2 { margin: 0; color: #0b3357; font-weight: 700; letter-spacing: -.02em; }
.osp-hecon-home33-testimonial__copy blockquote { max-width: 590px; margin: 0 0 14px; color: #294d6a; font-size: 17px; line-height: 1.58; }
.osp-hecon-home33-testimonial__source { margin: 0; color: #668096; font-size: 13px; }
.osp-hecon-home33-testimonial__visual { position: relative; min-height: 310px; }
.osp-hecon-home33-testimonial__photo { position: absolute; top: 0; right: 16%; width: 58%; height: 100%; overflow: hidden; clip-path: polygon(14% 0,86% 0,100% 22%,100% 78%,86% 100%,14% 100%,0 78%,0 22%); background: #dbe7ee; }
.osp-hecon-home33-testimonial__photo img { width: 100%; height: 100%; object-fit: cover; }
.osp-hecon-home33-testimonial__quotehex { position: absolute; z-index: 2; right: 0; bottom: 6%; width: 215px; aspect-ratio: 1.06 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background: rgba(5, 54, 87, .94); color: #fff; text-align: center; font-size: 15px; line-height: 1.45; }
.osp-hecon-home33-testimonial__quotehex i { width: 34px; height: 2px; margin-top: 18px; background: #00b7ef; }
.osp-hecon-home33-testimonial__deco { position: absolute; display: block; aspect-ratio: 1.15/1; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background: rgba(29,103,145,.07); }
.osp-hecon-home33-testimonial__deco--1 { left: 1%; top: 8%; width: 92px; }
.osp-hecon-home33-testimonial__deco--2 { right: 1%; top: -8%; width: 72px; }
.osp-hecon-home32-cta {
background:
linear-gradient(90deg, rgba(3, 34, 52, .78) 0%, rgba(3, 34, 52, .54) 43%, rgba(3, 34, 52, .16) 72%, rgba(3, 34, 52, .22) 100%),
url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/home-33-mountain.jpg) center 52% / cover no-repeat;
}
.osp-hecon-home32-cta__inner { min-height: 470px; }
.osp-hecon-home32-cta__copy { max-width: 590px; }
@media (max-width: 1100px) {
.osp-hecon-home32-intro__inner,
.osp-hecon-home32-workstyle__inner,
.osp-hecon-home33-testimonial__inner { width: min(100% - 48px, 940px); grid-template-columns: 1fr; }
.osp-hecon-home33-testimonial__visual { min-height: 360px; }
}
@media (max-width: 780px) {
.osp-hecon-home32-intro__inner,
.osp-hecon-home32-workstyle__inner,
.osp-hecon-home32-trust__inner,
.osp-hecon-home32-cta__inner,
.osp-hecon-home33-testimonial__inner { width: calc(100% - 32px); }
.osp-hecon-home33-testimonial__inner { padding: 52px 0 58px; }
.osp-hecon-home33-testimonial__visual { min-height: 300px; }
.osp-hecon-home33-testimonial__photo { right: 10%; width: 72%; }
.osp-hecon-home33-testimonial__quotehex { width: 170px; padding: 22px; font-size: 13px; }
}  .osp-hecon-hero-v3.osp-hecon-draft1-hero {
min-height: clamp(680px, calc(100svh - 72px), 820px);
background-color: #031421 !important;
background-image:
linear-gradient(90deg, rgba(0, 13, 24, .91) 0%, rgba(0, 19, 34, .72) 31%, rgba(1, 27, 46, .26) 62%, rgba(1, 23, 40, .10) 100%),
linear-gradient(180deg, rgba(0, 16, 29, .08) 0%, rgba(0, 16, 29, .06) 60%, rgba(0, 13, 24, .42) 100%),
url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/draft1-hero-city-blue.jpg) !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.osp-hecon-hero-v3.osp-hecon-draft1-hero::before {
width: 46%;
background: linear-gradient(90deg, rgba(0, 11, 21, .34) 0%, rgba(0, 11, 21, .11) 70%, transparent 100%);
}
.osp-hecon-draft1-hero .osp-hecon-hero-v3__layout > .wp-block-group__inner-container {
width: min(calc(100% - 80px), 1520px);
min-height: clamp(680px, calc(100svh - 72px), 820px);
grid-template-columns: minmax(355px, .80fr) minmax(610px, 1.20fr);
gap: clamp(28px, 3.4vw, 62px);
padding: clamp(54px, 4.4vw, 76px) 0 clamp(44px, 3.7vw, 64px);
}
.osp-wpb-managed .osp-wpb-hecon.osp-hecon-draft1-hero .osp-hecon-hero-v3__title,
.editor-styles-wrapper .osp-wpb-hecon.osp-hecon-draft1-hero .osp-hecon-hero-v3__title {
max-width: 570px;
font-size: clamp(42px, 2.9vw, 54px) !important;
line-height: 1.03 !important;
letter-spacing: -.03em !important;
}
.osp-hecon-draft1-hero .osp-hecon-hero-v3__lead { max-width: 560px; font-size: 17px; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__stage {
--hex-size: clamp(184px, 11.1vw, 218px);
--hex-gap-x: clamp(14px, .9vw, 22px);
--hex-gap-y: clamp(12px, .8vw, 18px);
} .osp-wpb-managed .osp-wpb-hecon.osp-hecon-draft1-hero .osp-hecon-hero-v3__hex h3,
.editor-styles-wrapper .osp-wpb-hecon.osp-hecon-draft1-hero .osp-hecon-hero-v3__hex h3 {
font-size: 17px !important;
line-height: 1.08 !important;
letter-spacing: -.015em !important;
}
.osp-wpb-managed .osp-wpb-hecon.osp-hecon-draft1-hero .osp-hecon-hero-v3__hex--initiative h3,
.osp-wpb-managed .osp-wpb-hecon.osp-hecon-draft1-hero .osp-hecon-hero-v3__hex--request h3,
.editor-styles-wrapper .osp-wpb-hecon.osp-hecon-draft1-hero .osp-hecon-hero-v3__hex--initiative h3,
.editor-styles-wrapper .osp-wpb-hecon.osp-hecon-draft1-hero .osp-hecon-hero-v3__hex--request h3 {
font-size: 14px !important;
}
.osp-hecon-draft1-hero .osp-hecon-hero-v3__hex p { font-size: 12px !important; line-height: 1.35 !important; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__icon { width: 40px; height: 40px; margin-bottom: 10px; } .osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient { aspect-ratio: 1.1547 / 1; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--01 { opacity: .56; --ambient-alpha: .30; --ambient-fill: 0; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--02 { opacity: .78; --ambient-alpha: .46; --ambient-fill: .014; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--03 { opacity: .48; --ambient-alpha: .25; --ambient-fill: 0; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--04 { opacity: .76; --ambient-alpha: .52; --ambient-fill: .012; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--05 { opacity: .50; --ambient-alpha: .25; --ambient-fill: 0; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--06 { opacity: .64; --ambient-alpha: .42; --ambient-fill: .02; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--07 { opacity: .60; --ambient-alpha: .34; --ambient-fill: .004; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--08 { opacity: .36; --ambient-alpha: .18; --ambient-fill: 0; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--09 { opacity: .48; --ambient-alpha: .34; --ambient-fill: .018; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--10 { opacity: .52; --ambient-alpha: .27; --ambient-fill: .005; } .osp-hecon-draft1-positioning .osp-hecon-home32-intro__inner,
.osp-hecon-draft1-trust .osp-hecon-home32-trust__inner,
.osp-hecon-draft1-workstyle .osp-hecon-home32-workstyle__inner,
.osp-hecon-draft1-cta .osp-hecon-home32-cta__inner {
width: min(1360px, calc(100% - 80px));
}
.osp-hecon-draft1-positioning { background: #f7fafc; }
.osp-hecon-draft1-positioning .osp-hecon-home32-intro__inner {
grid-template-columns: minmax(300px, .76fr) minmax(680px, 1.48fr);
gap: clamp(50px, 5vw, 82px);
padding: 60px 0 64px;
}
.osp-hecon-draft1-positioning .osp-hecon-home32-intro__copy { max-width: 470px; }
.osp-wpb-managed .osp-hecon-draft1-positioning .osp-hecon-home32-intro__copy h2,
.editor-styles-wrapper .osp-hecon-draft1-positioning .osp-hecon-home32-intro__copy h2 {
font-size: clamp(34px, 2.35vw, 42px) !important;
line-height: 1.08 !important;
}
.osp-hecon-draft1-positioning .osp-hecon-home32-intro__copy > p:not(.osp-hecon-home32-kicker) {
max-width: 460px;
font-size: 16px;
line-height: 1.56;
}
.osp-hecon-draft1-positioning .osp-hecon-home32-paths { gap: clamp(28px, 2.5vw, 38px); }
.osp-hecon-draft1-positioning .osp-hecon-home32-path { min-width: 0; }
.osp-hecon-draft1-positioning .osp-hecon-home32-photohex {
width: min(100%, 230px);
max-width: 230px;
aspect-ratio: 1.1547 / 1;
margin: 0 0 18px;
}
.osp-hecon-draft1-positioning .osp-hecon-home32-photohex img { object-fit: cover; }
.osp-wpb-managed .osp-hecon-draft1-positioning .osp-hecon-home32-path h3,
.editor-styles-wrapper .osp-hecon-draft1-positioning .osp-hecon-home32-path h3 {
font-size: 19px !important;
line-height: 1.16 !important;
}
.osp-hecon-draft1-positioning .osp-hecon-home32-path p { max-width: 220px; margin-inline: 0; font-size: 14px; } .osp-hecon-draft1-trust {
background:
linear-gradient(90deg, rgba(2, 38, 64, .86), rgba(2, 38, 64, .72)),
url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/draft1-trust-alps-clean.jpg) center 52% / cover no-repeat !important;
}
.osp-hecon-draft1-trust .osp-hecon-home32-trust__inner { padding: 34px 0 40px; }
.osp-hecon-draft1-trust .osp-hecon-home32-trust__icon {
width: 60px;
height: auto;
aspect-ratio: 1.1547 / 1;
}
.osp-wpb-managed .osp-hecon-draft1-trust .osp-hecon-home32-trust__item strong,
.editor-styles-wrapper .osp-hecon-draft1-trust .osp-hecon-home32-trust__item strong {
font-size: clamp(18px, 1.4vw, 24px) !important;
} .osp-hecon-draft1-workstyle .osp-hecon-home32-workstyle__inner {
grid-template-columns: minmax(380px, 1.02fr) minmax(570px, 1.18fr);
gap: clamp(46px, 6vw, 92px);
padding: 54px 0 60px;
}
.osp-wpb-managed .osp-hecon-draft1-workstyle .osp-hecon-home32-workstyle__copy h2,
.editor-styles-wrapper .osp-hecon-draft1-workstyle .osp-hecon-home32-workstyle__copy h2 {
font-size: clamp(32px, 2.1vw, 38px) !important;
line-height: 1.09 !important;
}
.osp-hecon-draft1-workstyle .osp-hecon-home32-workstyle__steps { gap: 22px; }
.osp-hecon-draft1-workstyle .osp-hecon-home32-step {
width: 100%;
aspect-ratio: 1.1547 / 1;
padding: 24px 18px;
}
.osp-hecon-draft1-workstyle .osp-hecon-home32-step strong { font-size: 17px; }
.osp-hecon-draft1-workstyle .osp-hecon-home32-step small { font-size: 11px; } .osp-hecon-draft1-cta {
background:
linear-gradient(90deg, rgba(3, 34, 52, .80) 0%, rgba(3, 34, 52, .58) 42%, rgba(3, 34, 52, .16) 72%, rgba(3, 34, 52, .20) 100%),
url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/draft1-cta-alps-clean.jpg) center 50% / cover no-repeat !important;
}
.osp-hecon-draft1-cta .osp-hecon-home32-cta__inner { min-height: 430px; padding: 54px 0; }
.osp-wpb-managed .osp-hecon-draft1-cta .osp-hecon-home32-cta__copy h2,
.editor-styles-wrapper .osp-hecon-draft1-cta .osp-hecon-home32-cta__copy h2 {
font-size: clamp(40px, 3vw, 52px) !important;
line-height: 1.02 !important;
}
.osp-hecon-draft1-cta .osp-hecon-home32-cta__badge {
width: 230px;
aspect-ratio: 1.1547 / 1;
}
.osp-hecon-draft1-cta .osp-hecon-home32-cta__deco { aspect-ratio: 1.1547 / 1; }
@media (max-width: 1280px) {
.osp-hecon-draft1-hero .osp-hecon-hero-v3__layout > .wp-block-group__inner-container {
width: min(calc(100% - 48px), 1220px);
grid-template-columns: minmax(330px, .78fr) minmax(520px, 1.22fr);
}
.osp-hecon-draft1-hero .osp-hecon-hero-v3__stage { --hex-size: clamp(158px, 12vw, 188px); }
}
@media (max-width: 1100px) {
.osp-hecon-draft1-positioning .osp-hecon-home32-intro__inner,
.osp-hecon-draft1-workstyle .osp-hecon-home32-workstyle__inner {
width: min(100% - 48px, 940px);
grid-template-columns: 1fr;
}
}
@media (max-width: 980px) {
.osp-hecon-hero-v3.osp-hecon-draft1-hero { min-height: auto; background-position: 66% center !important; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__layout > .wp-block-group__inner-container {
min-height: 0;
grid-template-columns: 1fr;
width: min(calc(100% - 36px), 820px);
padding: 58px 0 52px;
}
}
@media (max-width: 780px) {
.osp-hecon-draft1-positioning .osp-hecon-home32-intro__inner,
.osp-hecon-draft1-trust .osp-hecon-home32-trust__inner,
.osp-hecon-draft1-workstyle .osp-hecon-home32-workstyle__inner,
.osp-hecon-draft1-cta .osp-hecon-home32-cta__inner { width: calc(100% - 32px); }
.osp-hecon-draft1-positioning .osp-hecon-home32-path { grid-template-columns: 108px 1fr; }
.osp-hecon-draft1-positioning .osp-hecon-home32-photohex { width: 108px; }
.osp-hecon-draft1-workstyle .osp-hecon-home32-workstyle__steps { grid-template-columns: 210px 210px 210px; }
.osp-hecon-draft1-cta .osp-hecon-home32-cta__badge { width: 190px; }
}  .osp-hecon-hero-v3.osp-hecon-draft1-hero {
background-image:
linear-gradient(90deg, rgba(0, 11, 21, .86) 0%, rgba(0, 18, 32, .58) 31%, rgba(0, 24, 42, .16) 60%, rgba(0, 20, 36, .06) 100%),
linear-gradient(180deg, rgba(0, 14, 26, .03) 0%, rgba(0, 14, 26, .02) 62%, rgba(0, 11, 21, .28) 100%),
url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/draft1-hero-city-blue-35.jpg) !important;
background-position: center 56% !important;
background-size: cover !important;
}
.osp-hecon-draft1-hero .osp-hecon-hero-v3__layout > .wp-block-group__inner-container {
width: min(calc(100% - 80px), 1540px);
grid-template-columns: minmax(350px, .76fr) minmax(650px, 1.24fr);
gap: clamp(30px, 3.1vw, 58px);
}
.osp-hecon-draft1-hero .osp-hecon-hero-v3__stage {
--hex-size: var(--osp-hero-hex-size, 242px);
--hex-gap-x: clamp(14px, .85vw, 21px);
--hex-gap-y: clamp(11px, .72vw, 17px);
}
.osp-wpb-managed .osp-wpb-hecon.osp-hecon-draft1-hero .osp-hecon-hero-v3__hex h3,
.editor-styles-wrapper .osp-wpb-hecon.osp-hecon-draft1-hero .osp-hecon-hero-v3__hex h3 {
font-size: var(--osp-hero-hex-title-size, 16px) !important;
}
.osp-wpb-managed .osp-wpb-hecon.osp-hecon-draft1-hero .osp-hecon-hero-v3__hex--initiative h3,
.osp-wpb-managed .osp-wpb-hecon.osp-hecon-draft1-hero .osp-hecon-hero-v3__hex--request h3,
.editor-styles-wrapper .osp-wpb-hecon.osp-hecon-draft1-hero .osp-hecon-hero-v3__hex--initiative h3,
.editor-styles-wrapper .osp-wpb-hecon.osp-hecon-draft1-hero .osp-hecon-hero-v3__hex--request h3 {
font-size: var(--osp-hero-hex-long-title-size, 13px) !important;
}
.osp-hecon-draft1-hero .osp-hecon-hero-v3__hex p {
font-size: var(--osp-hero-hex-subline-size, 12px) !important;
}
.osp-hecon-draft1-hero .osp-hecon-hero-v3__icon {
width: var(--osp-hero-hex-icon-size, 42px);
height: var(--osp-hero-hex-icon-size, 42px);
} .osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--01 { top: 5%; left: 4%; --ambient-size: 62px; opacity: .54; --ambient-alpha: .38; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--02 { top: 12%; left: -1.8%; --ambient-size: 94px; opacity: .76; --ambient-alpha: .46; --ambient-fill: .018; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--03 { top: 40%; left: 1.8%; --ambient-size: 60px; opacity: .46; --ambient-alpha: .29; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--04 { top: 7%; left: 50%; --ambient-size: 74px; opacity: .72; --ambient-alpha: .50; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--05 { top: 13%; right: 16%; --ambient-size: 64px; opacity: .50; --ambient-alpha: .30; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--06 { top: 1%; right: 1.5%; --ambient-size: 146px; opacity: .70; --ambient-alpha: .42; --ambient-stroke: 3.6; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--07 { top: 34%; right: -.5%; --ambient-size: 62px; opacity: .56; --ambient-alpha: .37; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--08 { top: 55%; right: 1.5%; --ambient-size: 82px; opacity: .34; --ambient-alpha: .20; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--09 { right: 16.5%; bottom: 4%; --ambient-size: 108px; opacity: .58; --ambient-alpha: .35; --ambient-stroke: 3.1; }
.osp-hecon-draft1-hero .osp-hecon-hero-v3__ambient--10 { left: 47%; bottom: 4%; --ambient-size: 60px; opacity: .48; --ambient-alpha: .31; } .osp-hecon-draft1-positioning .osp-hecon-home32-intro__inner {
grid-template-columns: minmax(300px, .82fr) minmax(650px, 1.38fr);
gap: clamp(46px, 4.5vw, 72px);
padding: 58px 0 62px;
}
.osp-hecon-draft1-positioning .osp-hecon-home32-paths {
gap: clamp(20px, 1.9vw, 30px);
justify-items: center;
}
.osp-hecon-draft1-positioning .osp-hecon-home32-path {
width: min(100%, 242px);
justify-self: center;
}
.osp-hecon-draft1-positioning .osp-hecon-home32-photohex {
width: 212px;
max-width: 212px;
margin: 0 auto 16px;
}
.osp-hecon-draft1-positioning .osp-hecon-home32-path h3,
.osp-hecon-draft1-positioning .osp-hecon-home32-path p,
.osp-hecon-draft1-positioning .osp-hecon-home32-path > a {
width: 188px;
margin-right: auto;
margin-left: auto;
}
.osp-wpb-managed .osp-hecon-draft1-positioning .osp-hecon-home32-path h3,
.editor-styles-wrapper .osp-hecon-draft1-positioning .osp-hecon-home32-path h3 {
margin-bottom: 8px !important;
font-size: 17px !important;
}
.osp-hecon-draft1-positioning .osp-hecon-home32-path p {
min-height: 58px;
margin-bottom: 12px;
font-size: 13px;
line-height: 1.42;
}
.osp-hecon-draft1-positioning .osp-hecon-home32-path > a {
gap: 12px;
font-size: 13px;
} .osp-hecon-draft1-trust {
background:
linear-gradient(90deg, rgba(2, 34, 59, .86), rgba(2, 34, 59, .72)),
url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/draft1-trust-alps-35.jpg) center 52% / cover no-repeat !important;
}
.osp-hecon-draft1-trust .osp-hecon-home32-trust__inner {
padding: 26px 0 32px;
}
.osp-hecon-draft1-trust .osp-hecon-home32-trust__grid {
margin-top: 18px;
}
.osp-hecon-draft1-trust .osp-hecon-home32-trust__item {
min-height: 118px;
padding: 4px 28px 0;
}
.osp-hecon-draft1-trust .osp-hecon-home32-trust__icon {
width: 56px;
margin-bottom: 8px;
aspect-ratio: 1.1547 / 1;
}
.osp-wpb-managed .osp-hecon-draft1-trust .osp-hecon-home32-trust__item strong,
.editor-styles-wrapper .osp-hecon-draft1-trust .osp-hecon-home32-trust__item strong {
margin-bottom: 3px;
font-size: clamp(17px, 1.2vw, 21px) !important;
}
.osp-hecon-draft1-trust .osp-hecon-home32-trust__item span:last-child {
font-size: 12px;
} .osp-hecon-draft1-cta {
background:
linear-gradient(90deg, rgba(3, 31, 49, .78) 0%, rgba(3, 31, 49, .52) 39%, rgba(3, 31, 49, .12) 72%, rgba(3, 31, 49, .17) 100%),
url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/draft1-cta-alps-35.jpg) center 54% / cover no-repeat !important;
}
.osp-hecon-draft1-cta .osp-hecon-home32-cta__inner {
min-height: 445px;
padding: 52px 0;
}
.osp-hecon-draft1-cta .osp-hecon-home32-cta__badge {
right: 6%;
width: 238px;
aspect-ratio: 1.1547 / 1;
background: rgba(4, 48, 77, .86);
}
.osp-hecon-draft1-cta .osp-hecon-home32-cta__deco {
aspect-ratio: 1.1547 / 1;
background: rgba(218, 241, 249, .15);
}
.osp-hecon-draft1-cta .osp-hecon-home32-cta__deco--1 { top: 6%; right: 22%; width: 140px; }
.osp-hecon-draft1-cta .osp-hecon-home32-cta__deco--2 { right: 28%; bottom: 8%; width: 96px; }
.osp-hecon-draft1-cta .osp-hecon-home32-cta__deco--3 { right: 2%; bottom: -5%; width: 110px; }
.osp-hecon-draft1-cta .osp-hecon-home32-cta__inner::before,
.osp-hecon-draft1-cta .osp-hecon-home32-cta__inner::after {
position: absolute;
z-index: 1;
content: '';
aspect-ratio: 1.1547 / 1;
clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
background: rgba(218, 241, 249, .12);
pointer-events: none;
}
.osp-hecon-draft1-cta .osp-hecon-home32-cta__inner::before { top: -7%; right: 1%; width: 84px; }
.osp-hecon-draft1-cta .osp-hecon-home32-cta__inner::after { right: 14%; bottom: -12%; width: 126px; }
@media (max-width: 1280px) {
.osp-hecon-draft1-hero .osp-hecon-hero-v3__stage {
--hex-size: min(var(--osp-hero-hex-size, 210px), 210px);
}
.osp-hecon-draft1-positioning .osp-hecon-home32-photohex { width: 196px; }
.osp-hecon-draft1-positioning .osp-hecon-home32-path h3,
.osp-hecon-draft1-positioning .osp-hecon-home32-path p,
.osp-hecon-draft1-positioning .osp-hecon-home32-path > a { width: 176px; }
}
@media (max-width: 780px) {
.osp-hecon-draft1-positioning .osp-hecon-home32-path { width: 100%; }
.osp-hecon-draft1-positioning .osp-hecon-home32-path h3,
.osp-hecon-draft1-positioning .osp-hecon-home32-path p,
.osp-hecon-draft1-positioning .osp-hecon-home32-path > a { width: auto; margin-left: 0; margin-right: 0; }
.osp-hecon-draft1-cta .osp-hecon-home32-cta__inner::before,
.osp-hecon-draft1-cta .osp-hecon-home32-cta__inner::after { display: none; }
}  .osp-hecon-draft1-trust {
min-height: 330px;
background:
linear-gradient(90deg, rgba(2, 35, 59, .72) 0%, rgba(2, 35, 59, .62) 48%, rgba(2, 35, 59, .58) 100%),
url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/draft1-trust-alps-352.jpg) center 50% / cover no-repeat !important;
}
.osp-hecon-draft1-trust .osp-hecon-home32-trust__inner {
width: min(1720px, calc(100% - 80px));
padding: 30px 0 38px;
}
.osp-hecon-draft1-trust .osp-hecon-home32-kicker {
margin-bottom: 0;
}
.osp-hecon-draft1-trust .osp-hecon-home32-trust__grid {
margin-top: 24px;
}
.osp-hecon-draft1-trust .osp-hecon-home32-trust__item {
min-height: 185px;
padding: 8px 28px 0;
border-left-color: rgba(168, 215, 237, .38);
}
.osp-hecon-draft1-trust .osp-hecon-home32-trust__icon {
position: relative;
width: 64px;
height: auto;
aspect-ratio: 1.154700538 / 1;
margin-bottom: 11px;
clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
background: rgba(5, 53, 84, .58);
outline: none;
filter: none;
isolation: isolate;
}
.osp-hecon-draft1-trust .osp-hecon-home32-trust__icon::before {
content: '';
position: absolute;
inset: 0;
z-index: -2;
clip-path: inherit;
background: rgba(75, 192, 238, .94);
}
.osp-hecon-draft1-trust .osp-hecon-home32-trust__icon::after {
content: '';
position: absolute;
inset: 1.5px;
z-index: -1;
clip-path: inherit;
background: rgba(4, 48, 77, .78);
}
.osp-hecon-draft1-trust .osp-hecon-home32-trust__icon svg {
width: 31px;
height: 31px;
} .osp-hecon-draft1-cta {
min-height: 505px;
background:
linear-gradient(90deg, rgba(2, 30, 48, .70) 0%, rgba(2, 30, 48, .44) 38%, rgba(2, 30, 48, .08) 70%, rgba(2, 30, 48, .12) 100%),
url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/draft1-cta-alps-352.jpg) center 50% / cover no-repeat !important;
}
.osp-hecon-draft1-cta .osp-hecon-home32-cta__inner {
width: min(1720px, calc(100% - 80px));
min-height: 505px;
padding: 54px 0;
}
.osp-hecon-draft1-cta .osp-hecon-home32-cta__badge {
right: 5.5%;
width: 250px;
height: auto;
aspect-ratio: 1.154700538 / 1;
clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
background: rgba(4, 48, 77, .88);
box-shadow: none;
filter: none;
isolation: isolate;
}
.osp-hecon-draft1-cta .osp-hecon-home32-cta__badge::before {
content: '';
position: absolute;
inset: 0;
z-index: -2;
clip-path: inherit;
background: rgba(50, 194, 242, .98);
}
.osp-hecon-draft1-cta .osp-hecon-home32-cta__badge::after {
content: '';
position: absolute;
inset: 1.5px;
z-index: -1;
clip-path: inherit;
background: rgba(4, 48, 77, .90);
}
.osp-hecon-draft1-cta .osp-hecon-home32-cta__deco,
.osp-hecon-draft1-cta .osp-hecon-home32-cta__inner::before,
.osp-hecon-draft1-cta .osp-hecon-home32-cta__inner::after {
aspect-ratio: 1.154700538 / 1;
clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
filter: none;
}
.osp-hecon-draft1-cta .osp-hecon-home32-cta__deco {
background: rgba(218, 241, 249, .14);
box-shadow: inset 0 0 0 1px rgba(177, 226, 247, .12);
}
.osp-hecon-draft1-cta .osp-hecon-home32-cta__deco--1 { top: 7%; right: 21%; width: 142px; opacity: .66; }
.osp-hecon-draft1-cta .osp-hecon-home32-cta__deco--2 { right: 26%; bottom: 4%; width: 100px; opacity: .53; }
.osp-hecon-draft1-cta .osp-hecon-home32-cta__deco--3 { right: 1.5%; bottom: -5%; width: 112px; opacity: .44; }
.osp-hecon-draft1-cta .osp-hecon-home32-cta__inner::before {
top: -6%;
right: .5%;
width: 88px;
background: rgba(218, 241, 249, .12);
opacity: .60;
}
.osp-hecon-draft1-cta .osp-hecon-home32-cta__inner::after {
right: 14%;
bottom: -13%;
width: 128px;
background: rgba(218, 241, 249, .11);
opacity: .50;
}
@media (max-width: 1100px) {
.osp-hecon-draft1-trust .osp-hecon-home32-trust__inner,
.osp-hecon-draft1-cta .osp-hecon-home32-cta__inner {
width: calc(100% - 48px);
}
}
@media (max-width: 780px) {
.osp-hecon-draft1-trust { min-height: 0; }
.osp-hecon-draft1-trust .osp-hecon-home32-trust__item { min-height: 140px; }
.osp-hecon-draft1-cta,
.osp-hecon-draft1-cta .osp-hecon-home32-cta__inner { min-height: 0; }
}
.osp-wpb-managed :where(.osp-hecon-about-hero, .osp-hecon-about-company, .osp-hecon-about-values, .osp-hecon-about-team, .osp-hecon-about-cta, .osp-hecon-about-footer),
.editor-styles-wrapper :where(.osp-hecon-about-hero, .osp-hecon-about-company, .osp-hecon-about-values, .osp-hecon-about-team, .osp-hecon-about-cta, .osp-hecon-about-footer) {
--about-navy: #062945;
--about-deep: #031a2c;
--about-cyan: #1cc5f3;
--about-text: #113553;
color: var(--about-text);
font-family: Lato, Arial, sans-serif;
}
.osp-wpb-managed :where(.osp-hecon-about-hero, .osp-hecon-about-company, .osp-hecon-about-values, .osp-hecon-about-team, .osp-hecon-about-cta, .osp-hecon-about-footer) > .wp-block-group__inner-container,
.editor-styles-wrapper :where(.osp-hecon-about-hero, .osp-hecon-about-company, .osp-hecon-about-values, .osp-hecon-about-team, .osp-hecon-about-cta, .osp-hecon-about-footer) > .wp-block-group__inner-container {
max-width: none !important;
padding: 0 !important;
}
.osp-hecon-about-kicker {
margin: 0 0 14px;
color: var(--about-text);
font-size: 12px;
font-weight: 700;
letter-spacing: .26em;
line-height: 1.2;
text-transform: uppercase;
}
.osp-hecon-about-kicker--light {
color: #fff;
}
.osp-hecon-about-btn {
display: inline-flex;
align-items: center;
gap: 26px;
min-height: 44px;
margin-top: 10px;
padding: 10px 20px;
border: 1px solid var(--about-cyan);
border-radius: 2px;
color: #078fc5;
font-size: 14px;
text-decoration: none;
transition: background-color 240ms ease-out, color 240ms ease-out, transform 240ms ease-out;
}
.osp-hecon-about-btn:hover,
.osp-hecon-about-btn:focus-visible {
background: var(--about-cyan);
color: #03243c;
text-decoration: none;
transform: translateY(-2px);
}
.osp-hecon-about-deco {
position: absolute;
z-index: 1;
overflow: visible;
pointer-events: none;
}
.osp-hecon-about-deco polygon {
fill: rgba(2, 48, 79, .12);
stroke: rgba(41, 184, 234, .34);
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
.osp-hecon-about-hero {
position: relative;
min-height: 455px;
overflow: hidden;
background:
linear-gradient(90deg, rgba(2, 25, 43, .88) 0%, rgba(2, 32, 54, .48) 47%, rgba(1, 27, 47, .20) 72%, rgba(1, 24, 42, .43) 100%),
linear-gradient(180deg, rgba(1, 24, 42, .12), rgba(1, 24, 42, .32)),
url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/about-hero-munich.jpg) center 47% / cover no-repeat;
color: #fff;
}
.osp-hecon-about-hero__inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 310px;
align-items: center;
width: min(1380px, calc(100% - 80px));
min-height: 455px;
margin: 0 auto;
padding: 42px 0;
}
.osp-hecon-about-hero__copy {
position: relative;
z-index: 3;
max-width: 590px;
}
.osp-wpb-managed .osp-hecon-about-hero h1,
.editor-styles-wrapper .osp-hecon-about-hero h1 {
margin: 0 0 22px;
color: #fff;
font-size: clamp(45px, 4vw, 62px) !important;
font-weight: 700 !important;
letter-spacing: -.035em !important;
line-height: .96 !important;
}
.osp-hecon-about-hero h1 span {
color: #42c9f4;
}
.osp-hecon-about-hero__copy > p:last-child {
max-width: 580px;
margin: 0;
color: #fff;
font-size: 18px;
line-height: 1.48;
}
.osp-hecon-about-hero__hex,
.osp-hecon-about-company__hex {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 245px;
aspect-ratio: 1.154700538 / 1;
justify-self: end;
clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
background: #35c9f5;
color: #fff;
font-size: 14px;
letter-spacing: .03em;
line-height: 1.45;
text-align: center;
text-transform: uppercase;
isolation: isolate;
filter: drop-shadow(0 0 13px rgba(31, 193, 244, .35));
}
.osp-hecon-about-hero__hex::before,
.osp-hecon-about-company__hex::before {
position: absolute;
z-index: -1;
inset: 2px;
clip-path: inherit;
background: linear-gradient(135deg, rgba(4, 41, 68, .96), rgba(5, 66, 102, .90));
content: '';
}
.osp-hecon-about-hero__hex i,
.osp-hecon-about-company__hex i {
display: block;
width: 38px;
height: 2px;
margin-top: 16px;
background: var(--about-cyan);
}
.osp-hecon-about-deco--hero-1 { top: 5%; left: -7%; width: 112px; }
.osp-hecon-about-deco--hero-2 { top: 43%; left: 35%; width: 82px; opacity: .55; }
.osp-hecon-about-deco--hero-3 { top: 7%; right: 14%; width: 108px; }
.osp-hecon-about-deco--hero-4 { right: -3%; bottom: 18%; width: 72px; opacity: .62; }
.osp-hecon-about-deco--hero-5 { right: 23%; bottom: 4%; width: 96px; opacity: .58; }
.osp-hecon-about-company {
overflow: hidden;
background: #fff;
}
.osp-hecon-about-company__inner {
display: grid;
grid-template-columns: minmax(480px, 1fr) minmax(620px, 1.08fr);
align-items: stretch;
width: min(1536px, 100%);
min-height: 470px;
margin: 0 auto;
}
.osp-hecon-about-company__copy {
align-self: center;
width: min(100% - 80px, 590px);
margin-left: auto;
padding: 46px 60px 48px 0;
}
.osp-wpb-managed .osp-hecon-about-company h2,
.editor-styles-wrapper .osp-hecon-about-company h2,
.osp-wpb-managed .osp-hecon-about-team h2,
.editor-styles-wrapper .osp-hecon-about-team h2 {
margin: 0 0 18px;
color: var(--about-text);
font-size: clamp(33px, 2.65vw, 44px) !important;
font-weight: 700 !important;
letter-spacing: -.025em !important;
line-height: 1.06 !important;
}
.osp-hecon-about-company__copy > p:not(.osp-hecon-about-kicker),
.osp-hecon-about-team__copy > p:not(.osp-hecon-about-kicker) {
margin: 0 0 15px;
color: var(--about-text);
font-size: 15px;
line-height: 1.48;
}
.osp-hecon-about-company__visual,
.osp-hecon-about-team__visual {
position: relative;
min-width: 0;
min-height: 100%;
margin: 0;
overflow: hidden;
clip-path: polygon(14% 0,100% 0,100% 100%,14% 100%,0 50%);
}
.osp-hecon-about-company__visual img,
.osp-hecon-about-team__visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
.osp-hecon-about-company__visual img {
object-position: 49% center;
}
.osp-hecon-about-company__brand {
position: absolute;
z-index: 2;
top: 34%;
left: 39%;
display: flex;
flex-direction: column;
align-items: center;
color: #1a4969;
text-transform: uppercase;
}
.osp-hecon-about-company__brand strong {
font-size: 32px;
letter-spacing: -.04em;
}
.osp-hecon-about-company__brand span {
margin-top: 12px;
font-size: 8px;
letter-spacing: .08em;
}
.osp-hecon-about-company__hex {
position: absolute;
top: 43%;
right: 4%;
width: 190px;
font-size: 13px;
}
.osp-hecon-about-deco--company-1 { right: 1%; top: -5%; width: 93px; }
.osp-hecon-about-deco--company-2 { left: 13%; bottom: 2%; width: 95px; opacity: .55; }
.osp-hecon-about-values {
position: relative;
overflow: hidden;
background:
linear-gradient(90deg, rgba(3, 35, 58, .96), rgba(3, 40, 66, .90)),
url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/draft1-trust-alps-352.jpg) center 50% / cover no-repeat;
color: #fff;
}
.osp-hecon-about-values__inner {
position: relative;
z-index: 2;
width: min(1380px, calc(100% - 80px));
margin: 0 auto;
padding: 40px 0 46px;
scroll-margin-top: 110px;
}
.osp-wpb-managed .osp-hecon-about-values h2,
.editor-styles-wrapper .osp-hecon-about-values h2 {
margin: 0 0 7px;
color: #fff;
font-size: clamp(32px, 2.5vw, 42px) !important;
font-weight: 700 !important;
letter-spacing: -.025em !important;
line-height: 1.08 !important;
}
.osp-hecon-about-values__lead {
margin: 0;
color: #fff;
font-size: 16px;
}
.osp-hecon-about-values__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 23px;
}
.osp-hecon-about-value {
min-width: 0;
padding: 0 clamp(30px, 4vw, 64px);
border-left: 1px solid rgba(178, 221, 239, .62);
text-align: center;
}
.osp-hecon-about-value:first-child {
padding-left: 0;
border-left: 0;
}
.osp-hecon-about-value__icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 82px;
aspect-ratio: 1.154700538 / 1;
margin: 0 auto 10px;
clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
background: var(--about-cyan);
color: #89dcf7;
isolation: isolate;
}
.osp-hecon-about-value__icon::before {
position: absolute;
z-index: -1;
inset: 2px;
clip-path: inherit;
background: rgba(3, 43, 70, .94);
content: '';
}
.osp-hecon-about-value__icon svg {
width: 43px;
height: 43px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.4;
}
.osp-wpb-managed .osp-hecon-about-value h3,
.editor-styles-wrapper .osp-hecon-about-value h3 {
margin: 0 0 9px;
color: #fff;
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
}
.osp-hecon-about-value p {
margin: 0;
color: #fff;
font-size: 14px;
line-height: 1.42;
}
.osp-hecon-about-deco--values-1 { top: 8%; right: -4%; width: 94px; }
.osp-hecon-about-deco--values-2 { right: 2%; bottom: 8%; width: 70px; opacity: .55; }
.osp-hecon-about-team {
overflow: hidden;
background: #fff;
}
.osp-hecon-about-team__inner {
display: grid;
grid-template-columns: minmax(470px, 1fr) minmax(650px, 1.12fr);
align-items: stretch;
width: min(1536px, 100%);
min-height: 390px;
margin: 0 auto;
}
.osp-hecon-about-team__copy {
align-self: center;
width: min(100% - 80px, 600px);
margin-left: auto;
padding: 45px 58px 47px 0;
}
.osp-hecon-about-team__visual img {
object-position: 40% center;
}
.osp-hecon-about-team__visual::after {
position: absolute;
inset: 0 0 0 74%;
background: linear-gradient(90deg, rgba(4, 39, 64, .26), rgba(3, 34, 57, .86));
content: '';
pointer-events: none;
}
.osp-hecon-about-team__visual figcaption {
position: absolute;
z-index: 2;
top: 50%;
right: 2.5%;
width: 21%;
color: #fff;
transform: translateY(-50%);
}
.osp-hecon-about-team__visual figcaption i {
display: block;
width: 38px;
height: 2px;
background: var(--about-cyan);
}
.osp-hecon-about-team__visual figcaption span {
display: block;
margin: 22px 0;
font-size: 16px;
letter-spacing: .025em;
line-height: 1.52;
text-transform: uppercase;
}
.osp-hecon-about-cta {
position: relative;
overflow: hidden;
background:
linear-gradient(90deg, rgba(3, 35, 58, .93), rgba(3, 38, 63, .72)),
url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/draft1-cta-alps-352.jpg) center 56% / cover no-repeat;
color: #fff;
}
.osp-hecon-about-cta__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 60px;
align-items: center;
width: min(1380px, calc(100% - 80px));
min-height: 218px;
margin: 0 auto;
padding: 34px 0;
}
.osp-wpb-managed .osp-hecon-about-cta h2,
.editor-styles-wrapper .osp-hecon-about-cta h2 {
margin: 0 0 10px;
color: #fff;
font-size: clamp(31px, 2.55vw, 42px) !important;
font-weight: 700 !important;
letter-spacing: -.025em !important;
line-height: 1.08 !important;
}
.osp-hecon-about-cta__inner > div > p:last-child {
margin: 0;
color: #fff;
font-size: 16px;
line-height: 1.45;
}
.osp-hecon-about-cta__button {
position: relative;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 40px;
min-width: 240px;
min-height: 52px;
padding: 12px 24px;
border: 1px solid #54cff6;
border-radius: 2px;
background: #10afe6;
color: #fff;
font-size: 15px;
text-decoration: none;
transition: background-color 240ms ease-out, transform 240ms ease-out;
}
.osp-hecon-about-cta__button:hover,
.osp-hecon-about-cta__button:focus-visible {
background: #25c4f5;
color: #fff;
text-decoration: none;
transform: translateY(-2px);
}
.osp-hecon-about-deco--cta-1 { top: 4%; left: -4%; width: 95px; }
.osp-hecon-about-deco--cta-2 { top: 6%; right: -2%; width: 118px; }
.osp-hecon-about-deco--cta-3 { right: 1.5%; bottom: -20%; width: 80px; opacity: .68; }
.osp-hecon-about-footer {
background: #031a2c;
color: #fff;
}
.osp-hecon-about-footer__inner {
display: grid;
grid-template-columns: 190px minmax(0, 1fr) 320px;
gap: 34px;
align-items: center;
width: min(1440px, calc(100% - 80px));
min-height: 122px;
margin: 0 auto;
padding: 24px 0;
}
.osp-hecon-about-footer__logo img {
display: block;
width: 160px;
height: auto;
}
.osp-hecon-about-footer nav {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(17px, 2.1vw, 34px);
}
.osp-hecon-about-footer nav a {
color: rgba(255, 255, 255, .92);
font-size: 12px;
text-decoration: none;
transition: color 180ms ease-out;
}
.osp-hecon-about-footer nav a:hover,
.osp-hecon-about-footer nav a:focus-visible {
color: var(--about-cyan);
text-decoration: none;
}
.osp-hecon-about-footer__claim {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 24px;
color: #fff;
text-transform: uppercase;
}
.osp-hecon-about-footer__claim span {
font-size: 9px;
letter-spacing: .15em;
line-height: 1.55;
}
.osp-hecon-about-footer__claim strong {
position: relative;
padding-left: 46px;
font-size: 12px;
font-weight: 600;
letter-spacing: .24em;
}
.osp-hecon-about-footer__claim strong::before {
position: absolute;
top: 50%;
left: 0;
width: 28px;
height: 36px;
background: repeating-linear-gradient(135deg, #24c7f4 0 5px, transparent 5px 9px);
clip-path: polygon(50% 0,100% 25%,82% 100%,18% 100%,0 25%);
content: '';
transform: translateY(-50%);
}
@media (max-width: 1120px) {
.osp-hecon-about-company__inner,
.osp-hecon-about-team__inner {
grid-template-columns: minmax(400px, .92fr) minmax(520px, 1.08fr);
}
.osp-hecon-about-company__copy,
.osp-hecon-about-team__copy {
padding-right: 42px;
}
.osp-hecon-about-company__hex { right: 2%; width: 164px; }
.osp-hecon-about-footer__inner { grid-template-columns: 160px minmax(0, 1fr); }
.osp-hecon-about-footer__claim { display: none; }
}
@media (max-width: 900px) {
.osp-hecon-about-hero__inner { grid-template-columns: 1fr 230px; }
.osp-hecon-about-hero__hex { width: 205px; }
.osp-hecon-about-company__inner,
.osp-hecon-about-team__inner { grid-template-columns: 1fr; }
.osp-hecon-about-company__copy,
.osp-hecon-about-team__copy {
width: min(100% - 48px, 760px);
margin: 0 auto;
padding: 46px 0;
}
.osp-hecon-about-company__visual,
.osp-hecon-about-team__visual {
min-height: 430px;
clip-path: none;
}
.osp-hecon-about-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 0; }
.osp-hecon-about-value:nth-child(3) { padding-left: 0; border-left: 0; }
.osp-hecon-about-cta__inner { grid-template-columns: 1fr; gap: 28px; }
.osp-hecon-about-cta__button { justify-self: start; }
.osp-hecon-about-footer__inner { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
.osp-hecon-about-footer nav { flex-wrap: wrap; justify-content: flex-start; }
}
@media (max-width: 640px) {
.osp-hecon-about-hero,
.osp-hecon-about-hero__inner { min-height: 650px; }
.osp-hecon-about-hero { background-position: 56% center; }
.osp-hecon-about-hero__inner,
.osp-hecon-about-values__inner,
.osp-hecon-about-cta__inner,
.osp-hecon-about-footer__inner { width: calc(100% - 32px); }
.osp-hecon-about-hero__inner { grid-template-columns: 1fr; align-content: center; gap: 36px; padding: 48px 0; }
.osp-wpb-managed .osp-hecon-about-hero h1,
.editor-styles-wrapper .osp-hecon-about-hero h1 { font-size: 42px !important; }
.osp-hecon-about-hero__copy > p:last-child { font-size: 16px; }
.osp-hecon-about-hero__hex { justify-self: start; width: 190px; font-size: 12px; }
.osp-wpb-managed .osp-hecon-about-company h2,
.editor-styles-wrapper .osp-hecon-about-company h2,
.osp-wpb-managed .osp-hecon-about-team h2,
.editor-styles-wrapper .osp-hecon-about-team h2 { font-size: 31px !important; }
.osp-hecon-about-company__visual { min-height: 390px; }
.osp-hecon-about-company__brand { top: 25%; left: 23%; }
.osp-hecon-about-company__hex { top: 48%; right: 4%; width: 150px; font-size: 11px; }
.osp-hecon-about-values__inner { padding: 42px 0; }
.osp-hecon-about-values__grid { grid-template-columns: 1fr; gap: 0; }
.osp-hecon-about-value,
.osp-hecon-about-value:first-child,
.osp-hecon-about-value:nth-child(3) { padding: 26px 0; border-top: 1px solid rgba(178, 221, 239, .48); border-left: 0; }
.osp-hecon-about-value:first-child { border-top: 0; }
.osp-hecon-about-team__visual { min-height: 470px; }
.osp-hecon-about-team__visual img { object-position: 38% center; }
.osp-hecon-about-team__visual::after { inset: 58% 0 0; background: linear-gradient(180deg, transparent, rgba(3, 34, 57, .92)); }
.osp-hecon-about-team__visual figcaption { top: auto; right: 24px; bottom: 24px; left: 24px; width: auto; transform: none; }
.osp-hecon-about-team__visual figcaption span { font-size: 15px; }
.osp-hecon-about-cta__inner { min-height: 290px; padding: 42px 0; }
.osp-hecon-about-cta__inner > div > p:last-child br { display: none; }
.osp-hecon-about-cta__button { width: 100%; }
.osp-hecon-about-footer nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.osp-hecon-about-deco--hero-3,
.osp-hecon-about-deco--hero-5,
.osp-hecon-about-deco--company-1,
.osp-hecon-about-deco--values-1 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.osp-hecon-about-btn,
.osp-hecon-about-cta__button { transition: none; }
} .osp-hecon-future-header,
.osp-hecon-future {
--future-navy: #041c31;
--future-blue: #075489;
--future-cyan: #8dc7dd;
--future-ink: #061b31;
font-family: Lato, Arial, sans-serif;
}
.osp-hecon-future-header,
.osp-hecon-future-header.wp-block-group,
.osp-hecon-future,
.osp-hecon-future.wp-block-group {
margin-block: 0 !important;
}
body.osp-wpb-template-future-hub #wrapper-navbar {
border-bottom: 1px solid rgba(141, 199, 221, .78);
box-shadow: 0 8px 28px rgba(2, 22, 38, .22);
}
body.osp-wpb-template-future-hub #main-nav {
min-height: 64px;
background: transparent !important;
background-color: transparent !important;
opacity: 1 !important;
}
body.osp-wpb-template-future-hub {
min-height: 100svh;
background:
linear-gradient(105deg, rgba(255, 255, 255, .2) 0%, rgba(229, 247, 255, .12) 38%, rgba(199, 234, 248, .08) 100%),
url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/hecon-bg-new.jpg) center top / cover no-repeat fixed;
}
body.osp-wpb-template-future-hub #page,
body.osp-wpb-template-future-hub #full-width-page-wrapper,
body.osp-wpb-template-future-hub #content,
body.osp-wpb-template-future-hub .content-area,
body.osp-wpb-template-future-hub #footer-block-wrapper {
background: transparent !important;
}
body.osp-wpb-template-future-hub #page,
body.osp-wpb-template-future-hub #full-width-page-wrapper,
body.osp-wpb-template-future-hub .osp-hecon-future {
min-height: 100svh;
}
.osp-hecon-future-header {
position: relative;
z-index: 30;
border-bottom: 1px solid rgba(6, 66, 105, .12);
background: rgba(255, 255, 255, .98);
box-shadow: 0 2px 20px rgba(3, 29, 49, .05);
}
.osp-hecon-future-header__inner {
display: grid;
grid-template-columns: 220px minmax(0, 1fr) 140px;
gap: 28px;
align-items: center;
width: min(1220px, calc(100% - 64px));
min-height: 74px;
margin: 0 auto;
}
.osp-hecon-future-header__logo {
display: inline-flex;
align-items: center;
justify-self: start;
}
.osp-hecon-future-header__logo img {
display: block;
width: 176px;
height: auto;
filter: brightness(0) saturate(100%) invert(11%) sepia(25%) saturate(2157%) hue-rotate(166deg) brightness(90%) contrast(103%);
}
.osp-hecon-future-header__nav {
display: flex;
align-items: stretch;
justify-content: center;
gap: clamp(20px, 2.6vw, 42px);
height: 74px;
}
.osp-hecon-future-header__nav a {
position: relative;
display: inline-flex;
align-items: center;
color: #07192d;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
text-decoration: none;
transition: color 180ms ease-out;
}
.osp-hecon-future-header__nav a::after {
position: absolute;
right: 0;
bottom: 10px;
left: 0;
height: 2px;
background: var(--future-cyan);
content: "";
opacity: 0;
transform: scaleX(.3);
transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.osp-hecon-future-header__nav a:hover,
.osp-hecon-future-header__nav a:focus-visible,
.osp-hecon-future-header__nav a.is-current { color: #8dc7dd; }
.osp-hecon-future-header__nav a:hover::after,
.osp-hecon-future-header__nav a:focus-visible::after,
.osp-hecon-future-header__nav a.is-current::after {
opacity: 1;
transform: scaleX(1);
}
.osp-hecon-future-header__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 20px;
}
.osp-hecon-future-header__actions a {
display: grid;
width: 25px;
height: 25px;
place-items: center;
color: var(--future-ink);
}
.osp-hecon-future-header__actions svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.osp-hecon-future-header__menu {
display: grid;
width: 33px;
gap: 6px;
}
.osp-hecon-future-header__menu i {
display: block;
width: 33px;
height: 3px;
border-radius: 3px;
background: var(--future-ink);
}
.osp-hecon-future {
overflow: hidden;
background:
linear-gradient(105deg, rgba(255, 255, 255, .2) 0%, rgba(229, 247, 255, .12) 38%, rgba(199, 234, 248, .08) 100%),
url(//www.hecon-gmbh.com/wp-content/osp-wp-builder/assets/images/hecon-bg-new.jpg) center top / cover no-repeat;
background-attachment: fixed, fixed;
color: #fff;
}
.osp-hecon-future__shell {
position: relative;
display: grid;
box-sizing: border-box;
min-height: 100svh;
padding: calc(64px + 30px) clamp(30px, 4.2vw, 64px) 30px;
align-items: safe center;
justify-items: center;
}
.osp-hecon-future__shell > .wp-block-group__inner-container,
.osp-hecon-future__panel > .wp-block-group__inner-container {
display: contents;
}
.osp-hecon-future__panel {
position: relative;
display: grid;
grid-template-columns: minmax(300px, var(--osp-future-left-content-max-width, 480px)) minmax(0, 1fr);
column-gap: var(--osp-future-content-column-gap, 60px);
row-gap: clamp(24px, 3.5vw, 60px);
align-items: center;
width: min(1360px, 100%);
min-height: min(720px, calc(100svh - 138px));
overflow: hidden;
padding: clamp(28px, 3.2vw, 52px);
border: 1px solid #8dc7dd;
border-radius: 18px;
background: rgba(6, 30, 49, .86);
box-shadow: 0 22px 50px rgba(4, 54, 80, .17), inset 0 0 70px rgba(141, 199, 221, .05);
isolation: isolate;
}
.osp-hecon-future__panel::before {
position: absolute;
inset: 0;
z-index: 0;
background-image:
linear-gradient(rgba(141, 199, 221, .024) 1px, transparent 1px),
linear-gradient(90deg, rgba(141, 199, 221, .024) 1px, transparent 1px);
background-size: 54px 54px;
content: "";
mask-image: linear-gradient(90deg, #000, transparent 70%);
}
.osp-hecon-future__copy {
position: relative;
z-index: 5;
width: min(100%, var(--osp-future-left-content-max-width, 480px));
max-width: var(--osp-future-left-content-max-width, 480px);
}
.osp-hecon-future__copy > .wp-block-group__inner-container,
.osp-hecon-future__visual > .wp-block-group__inner-container,
.osp-hecon-future__navgroup > .wp-block-group__inner-container {
width: 100%;
}
.osp-hecon-future__kicker,
.osp-hecon-future__claim {
margin: 0;
color: var(--osp-future-content-accent, #8dc7dd);
font-size: 12px;
font-weight: 600;
letter-spacing: .34em;
line-height: 1.5;
text-transform: uppercase;
}
.osp-wpb-managed .osp-hecon-future h1,
.editor-styles-wrapper .osp-hecon-future h1 {
margin: 22px 0 24px;
color: #fff;
font-family: Lato, Arial, sans-serif;
font-size: clamp(32px, 2.5vw, 40px) !important;
font-weight: 900 !important;
letter-spacing: -.04em !important;
line-height: 1.1 !important;
}
.osp-wpb-managed .osp-hecon-future h1.osp-hecon-future__core-title,
.editor-styles-wrapper .osp-hecon-future h1.osp-hecon-future__core-title {
position: relative;
top: 8px;
margin: 0 0 26px;
color: var(--osp-future-content-accent, #8dc7dd);
font-weight: 700 !important;
letter-spacing: .04em !important;
line-height: 1.12 !important;
}
.osp-hecon-future__rule {
display: block;
width: 55px;
height: 3px;
margin: 0 0 28px;
background: var(--osp-future-content-accent, #8dc7dd);
}
.osp-hecon-future__intro {
max-width: 100%;
margin: 0 0 35px;
color: rgba(255, 255, 255, .82);
font-size: clamp(16px, 1.2vw, 18.4px);
font-weight: 400;
line-height: 1.62;
}
.osp-hecon-future__intro--secondary { margin: 0; }
.osp-hecon-future__visual {
position: relative;
z-index: 4;
display: grid;
width: 100%;
min-width: 0;
align-self: center;
justify-items: center;
container-type: inline-size;
}
.osp-hecon-future__navgroup {
--future-hex-size: var(--osp-future-hex-size, 220px);
--future-hex-height: calc(var(--future-hex-size) * .8660254);
--future-step-x: calc(var(--future-hex-size) * .75 + 5.1962px);
--future-step-y: calc(var(--future-hex-size) * .4330127 + 3px);
width: calc(var(--future-hex-size) + var(--future-step-x) + var(--future-step-x) + var(--future-step-x) + var(--future-step-x));
}
.osp-hecon-future__slogan {
width: 100%;
margin: 0 0 18px;
color: var(--osp-future-content-accent, #8dc7dd);
font-size: 32px;
font-weight: 500;
letter-spacing: 0;
line-height: 1.1;
text-align: center;
}
.osp-hecon-future__honeycomb {
--future-fade-duration: var(--osp-future-fade-duration, 520ms);
--future-fade-pause: var(--osp-future-fade-pause, 120ms);
position: relative;
z-index: 4;
width: 100%;
height: calc(var(--future-hex-height) + var(--future-step-y) + var(--future-step-y) + var(--future-step-y));
}
.osp-hecon-future-card {
position: absolute;
display: block;
width: var(--future-hex-size);
aspect-ratio: 1.1547 / 1;
padding: 2px;
outline: 0;
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
text-decoration: none;
transition: filter 280ms ease-out, transform 220ms ease-out;
}
.osp-hecon-future-card__inner {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 25px 28px 18px;
clip-path: inherit;
text-align: center;
}
.osp-hecon-future-card svg {
width: 44px;
height: 44px;
margin-bottom: 7px;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.1;
}
.osp-hecon-future-card strong {
display: block;
font-size: 13px;
font-weight: 900;
letter-spacing: .01em;
line-height: 1.15;
}
.osp-hecon-future-card small {
display: block;
min-height: 30px;
margin-top: 8px;
font-size: 12px;
font-weight: 400;
letter-spacing: 0;
line-height: 1.35;
text-transform: none;
}
.osp-hecon-future-card b {
margin-top: 5px;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1;
transition: transform 180ms ease-out;
}
.osp-hecon-future-card:hover,
.osp-hecon-future-card:focus-visible {
z-index: 9;
text-decoration: none;
transform: translateY(-6px) scale(1.025);
}
.osp-hecon-future-card:hover b,
.osp-hecon-future-card:focus-visible b { transform: translateX(5px); }
.osp-hecon-future__hover-glow {
position: absolute;
z-index: 3;
display: block;
opacity: 0;
filter: blur(18px);
pointer-events: none;
transform: scale(1.16);
transition: opacity 220ms ease-out, transform 260ms ease-out;
}
.osp-hecon-future__hover-glow::before {
position: absolute;
inset: 4%;
background: var(--osp-future-hover-glow-color, #fff);
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
content: "";
opacity: .86;
}
.osp-hecon-future__hover-glow::after {
position: absolute;
inset: -5%;
background: var(--osp-future-hover-glow-color, #fff);
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
content: "";
filter: blur(12px);
opacity: .38;
}
.osp-hecon-future__hover-glow.is-active {
opacity: var(--osp-future-hover-glow-strength, .70);
transform: scale(1.2);
}
.osp-hecon-future-card--about { top: 0; left: 0; }
.osp-hecon-future-card--positions { top: var(--future-step-y); left: var(--future-step-x); }
.osp-hecon-future-card--applicants { top: calc(var(--future-step-y) + var(--future-step-y)); left: calc(var(--future-step-x) + var(--future-step-x)); }
.osp-hecon-future-card--potentialsearch { top: var(--future-step-y); left: calc(var(--future-step-x) + var(--future-step-x) + var(--future-step-x)); }
.osp-hecon-future-card--adservices { top: 0; left: calc(var(--future-step-x) + var(--future-step-x) + var(--future-step-x) + var(--future-step-x)); }
.osp-hecon-future-card--companies { top: calc(var(--future-step-y) + var(--future-step-y) + var(--future-step-y)); left: calc(var(--future-step-x) + var(--future-step-x) + var(--future-step-x)); }
.osp-hecon-future-card--contact { top: calc(var(--future-step-y) + var(--future-step-y) + (var(--osp-future-seventh-hexagon-gap, 0px) * .5)); left: calc(var(--future-step-x) + var(--future-step-x) + var(--future-step-x) + var(--future-step-x) + (var(--osp-future-seventh-hexagon-gap, 0px) * .8660254)); }
.osp-wpb-managed .osp-hecon-future-card {
animation: osp-hecon-future-card-in var(--future-fade-duration) cubic-bezier(.2, .72, .24, 1) var(--future-enter-delay, 0ms) backwards;
}
.osp-hecon-future-card--about { --future-enter-delay: 0ms; }
.osp-hecon-future-card--positions { --future-enter-delay: var(--future-fade-pause); }
.osp-hecon-future-card--applicants { --future-enter-delay: calc(var(--future-fade-pause) + var(--future-fade-pause)); }
.osp-hecon-future-card--potentialsearch { --future-enter-delay: calc(var(--future-fade-pause) + var(--future-fade-pause) + var(--future-fade-pause)); }
.osp-hecon-future-card--adservices { --future-enter-delay: calc(var(--future-fade-pause) + var(--future-fade-pause) + var(--future-fade-pause) + var(--future-fade-pause)); }
.osp-hecon-future-card--companies { --future-enter-delay: calc(var(--future-fade-pause) + var(--future-fade-pause) + var(--future-fade-pause) + var(--future-fade-pause) + var(--future-fade-pause)); }
.osp-hecon-future-card--contact { --future-enter-delay: calc(var(--future-fade-pause) + var(--future-fade-pause) + var(--future-fade-pause) + var(--future-fade-pause) + var(--future-fade-pause) + var(--future-fade-pause)); }
@keyframes osp-hecon-future-card-in {
from { opacity: 0; transform: translateY(18px) scale(.94); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.osp-hecon-future__decoration {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: none;
}
.osp-hecon-future__decoration i {
position: absolute;
width: 108px;
aspect-ratio: 1.1547 / 1;
background: rgba(141, 199, 221, .08);
clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%,25% 2px,calc(75% - 1px) 2px,calc(100% - 2px) 50%,calc(75% - 1px) calc(100% - 2px),25% calc(100% - 2px),2px 50%);
filter: drop-shadow(0 0 5px rgba(141, 199, 221, .25));
}
.osp-hecon-future__decoration .d1 { top: -18px; left: -28px; width: 118px; }
.osp-hecon-future__decoration .d2 { top: 110px; left: 34%; width: 90px; opacity: .34; }
.osp-hecon-future__decoration .d3 { top: 325px; left: 31%; width: 92px; opacity: .28; }
.osp-hecon-future__decoration .d4 { bottom: -25px; left: 27%; width: 125px; opacity: .38; }
.osp-hecon-future__decoration .d5 { top: 92px; right: 5%; width: 104px; opacity: .34; }
.osp-hecon-future__decoration .d6 { right: -25px; bottom: 105px; width: 112px; }
.osp-hecon-future__decoration .d7 { right: 28%; bottom: 18px; width: 88px; opacity: .23; }
.osp-hecon-future__decoration .d8 { left: 42%; bottom: -35px; width: 92px; opacity: .22; }
.osp-hecon-future__navgroup.is-compact { width: 100%; }
.osp-hecon-future.is-compact-layout .osp-hecon-future__panel {
grid-template-columns: 1fr;
gap: 44px;
min-height: auto;
}
.osp-hecon-future.is-compact-layout .osp-hecon-future__copy {
width: min(100%, var(--osp-future-left-content-max-width, 480px));
max-width: var(--osp-future-left-content-max-width, 480px);
}
.osp-hecon-future.is-compact-layout .osp-hecon-future__visual {
width: 100%;
justify-self: center;
}
.osp-hecon-future__navgroup.is-compact .osp-hecon-future__honeycomb {
display: grid;
width: min(100%, calc(var(--future-hex-size) + var(--future-hex-size) + max(0px, var(--osp-future-mobile-hexagon-column-gap, -16px))));
height: auto;
margin-inline: auto;
padding-bottom: clamp(72px, 10cqw, 150px);
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: max(0px, var(--osp-future-mobile-hexagon-column-gap, -16px));
row-gap: 14px;
}
.osp-hecon-future__navgroup.is-compact .osp-hecon-future-card,
.osp-hecon-future__navgroup.is-compact .osp-hecon-future-card--positions,
.osp-hecon-future__navgroup.is-compact .osp-hecon-future-card--applicants,
.osp-hecon-future__navgroup.is-compact .osp-hecon-future-card--companies,
.osp-hecon-future__navgroup.is-compact .osp-hecon-future-card--about,
.osp-hecon-future__navgroup.is-compact .osp-hecon-future-card--adservices,
.osp-hecon-future__navgroup.is-compact .osp-hecon-future-card--potentialsearch,
.osp-hecon-future__navgroup.is-compact .osp-hecon-future-card--contact {
position: relative;
inset: auto;
left: auto;
width: min(var(--future-hex-size), calc((100cqw - 56px) / 2));
}
.osp-hecon-future__navgroup.is-compact .osp-hecon-future-card:nth-child(even) {
transform: translate(min(0px, var(--osp-future-mobile-hexagon-column-gap, -16px)), 48%);
}
.osp-hecon-future__navgroup.is-compact .osp-hecon-future-card:nth-child(even):hover,
.osp-hecon-future__navgroup.is-compact .osp-hecon-future-card:nth-child(even):focus-visible {
transform: translate(min(0px, var(--osp-future-mobile-hexagon-column-gap, -16px)), calc(48% - 6px)) scale(1.025);
}
@media (max-width: 1280px) {
.osp-hecon-future__panel { grid-template-columns: 1fr; gap: 44px; min-height: auto; }
.osp-hecon-future__copy { max-width: 650px; }
.osp-hecon-future__visual { justify-self: center; }
}
@media (max-width: 1260px) {
.osp-hecon-future-header__inner { grid-template-columns: 185px minmax(0, 1fr) 120px; gap: 18px; }
.osp-hecon-future-header__logo img { width: 158px; }
.osp-hecon-future-header__nav { gap: 20px; }
.osp-hecon-future-card strong { font-size: 17px; }
.osp-hecon-future-card svg { width: 38px; height: 38px; }
}
@media (max-width: 1040px) {
.osp-hecon-future-header__inner { grid-template-columns: 1fr auto; }
.osp-hecon-future-header__nav { display: none; }
.osp-hecon-future__shell { padding: 34px; }
}
@media (max-width: 680px) {
.osp-hecon-future-header__inner { width: calc(100% - 32px); min-height: 66px; }
.osp-hecon-future-header__logo img { width: 142px; }
.osp-hecon-future-header__actions { gap: 13px; }
.osp-hecon-future-header__actions a { width: 22px; }
.osp-hecon-future-header__menu,
.osp-hecon-future-header__menu i { width: 28px; }
.osp-hecon-future__shell { min-height: 100svh; padding-right: 16px; padding-left: 16px; }
.osp-hecon-future__panel { gap: 42px; padding: 50px 22px 42px; border-radius: 14px; }
.osp-hecon-future__visual { width: 100%; justify-items: center; }
.osp-hecon-future__navgroup {
--future-hex-size: var(--osp-future-hex-size, 250px);
--future-hex-height: var(--osp-future-hex-height, 216.5064px);
--future-step-x: var(--osp-future-step-x, 192.6962px);
--future-step-y: var(--osp-future-step-y, 111.2532px);
width: 100%;
}
.osp-hecon-future__slogan { width: 100%; margin-bottom: 28px; }
.osp-wpb-managed .osp-hecon-future h1,
.editor-styles-wrapper .osp-hecon-future h1 { font-size: clamp(40px, 13vw, 55px) !important; }
.osp-hecon-future__kicker,
.osp-hecon-future__claim { font-size: 10px; letter-spacing: .25em; }
.osp-hecon-future__honeycomb {
display: grid;
width: min(100%, calc(var(--future-hex-size) + var(--future-hex-size) + max(0px, var(--osp-future-mobile-hexagon-column-gap, -16px))));
height: auto;
margin-inline: auto;
padding-bottom: clamp(72px, 24vw, 150px);
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: max(0px, var(--osp-future-mobile-hexagon-column-gap, -16px));
row-gap: 14px;
}
.osp-hecon-future-card,
.osp-hecon-future-card--positions,
.osp-hecon-future-card--applicants,
.osp-hecon-future-card--companies,
.osp-hecon-future-card--about,
.osp-hecon-future-card--adservices,
.osp-hecon-future-card--potentialsearch,
.osp-hecon-future-card--contact {
position: relative;
inset: auto;
left: auto;
width: min(var(--future-hex-size), calc((100vw - 78px) / 2));
}
.osp-hecon-future__navgroup.is-compact .osp-hecon-future-card,
.osp-hecon-future__navgroup.is-compact .osp-hecon-future-card--positions,
.osp-hecon-future__navgroup.is-compact .osp-hecon-future-card--applicants,
.osp-hecon-future__navgroup.is-compact .osp-hecon-future-card--companies,
.osp-hecon-future__navgroup.is-compact .osp-hecon-future-card--about,
.osp-hecon-future__navgroup.is-compact .osp-hecon-future-card--adservices,
.osp-hecon-future__navgroup.is-compact .osp-hecon-future-card--potentialsearch,
.osp-hecon-future__navgroup.is-compact .osp-hecon-future-card--contact {
width: min(var(--future-hex-size), 54cqw);
}
.osp-hecon-future-card:nth-child(even) { transform: translate(min(0px, var(--osp-future-mobile-hexagon-column-gap, -16px)), 48%); }
.osp-hecon-future-card:nth-child(even):hover,
.osp-hecon-future-card:nth-child(even):focus-visible { transform: translate(min(0px, var(--osp-future-mobile-hexagon-column-gap, -16px)), calc(48% - 6px)) scale(1.025); }
.osp-hecon-future-card__inner { padding: 18px 18px 13px; }
.osp-hecon-future-card svg { width: 34px; height: 34px; margin-bottom: 5px; }
.osp-hecon-future-card strong { font-size: clamp(15px, 4.6vw, 18px); }
.osp-hecon-future-card small { min-height: 27px; margin-top: 6px; font-size: 8px; }
.osp-hecon-future-card b { margin-top: 2px; font-size: 18px; }
.osp-hecon-future__decoration .d2,
.osp-hecon-future__decoration .d3,
.osp-hecon-future__decoration .d7 { display: none; }
}
@supports (-webkit-touch-callout: none) {
.osp-hecon-future {
background-attachment: scroll, scroll;
}
}
@media (max-width: 420px) {
.osp-hecon-future-header__actions a:first-child { display: none; }
.osp-hecon-future__panel { padding-inline: 17px; }
.osp-hecon-future-card__inner { padding-inline: 12px; }
.osp-hecon-future-card svg { width: 30px; height: 30px; }
.osp-hecon-future-card strong { font-size: 14px; }
.osp-hecon-future-card small { font-size: 7px; letter-spacing: .2em; }
}
body .big-menu {
top: 8px !important;
right: auto !important;
bottom: 24px !important;
left: 50% !important;
width: min(var(--osp-menu-overlay-width, calc(100vw - 32px)), calc(100vw - 32px)) !important;
height: auto !important;
max-height: calc(100dvh - 32px);
border: 1px solid rgba(141, 199, 221, .84);
border-radius: 22px;
background: rgba(7, 25, 35, .94) !important;
box-shadow: 0 24px 70px rgba(0, 12, 20, .42), inset 0 0 0 1px rgba(141, 199, 221, .05), inset 0 0 80px rgba(141, 199, 221, .035);
color: #fff;
overflow: auto;
overscroll-behavior: contain;
transform: translateX(-50%);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
body .big-menu > .container {
position: absolute;
z-index: 5;
top: 0;
right: 0;
left: 0;
width: 100%;
max-width: none;
height: 70px;
padding: 0;
pointer-events: none;
}
body .big-menu > .container .row {
position: static;
margin: 0;
}
body .big-menu > .container .col-auto {
position: absolute;
top: 10px;
right: clamp(42px, 4.8vw, 74px);
padding: 0;
pointer-events: auto;
}
body .big-menu .big-menu-icon {
width: 42px;
height: 42px;
margin: 0;
}
body .big-menu .big-menu-icon span { background: #fff !important; }
body .osp-hecon-menu-header {
position: absolute;
z-index: 4;
top: 0;
right: clamp(110px, 11vw, 156px);
left: clamp(46px, 8vw, 112px);
display: flex;
height: 70px;
align-items: center;
}
body .osp-hecon-menu-brand {
display: inline-flex;
align-items: center;
}
body .osp-hecon-menu-brand img {
display: block;
width: clamp(190px, 19vw, 265px);
height: auto;
filter: brightness(0) invert(1);
}
body .big-menu .menu-footer-menu-de-container {
position: absolute;
z-index: 3;
inset: 76px 24px 30px;
display: grid;
place-items: center;
overflow: auto;
}
body .big-menu #menu-footer-menu-de {
display: grid;
width: min(100%, 560px);
margin: 0;
padding: 0;
grid-template-columns: repeat(2, minmax(0, auto));
justify-content: center;
column-gap: 42px;
list-style: none;
text-align: center;
}
body .big-menu #menu-footer-menu-de > li {
position: relative;
margin: 0;
padding: 0;
}
body .big-menu #menu-footer-menu-de > li:not(:nth-last-child(-n+2)) { grid-column: 1 / -1; }
body .big-menu #menu-footer-menu-de > li > a {
position: relative;
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 8px 4px;
color: rgba(255, 255, 255, .94) !important;
font-family: Lato, Arial, sans-serif;
font-size: clamp(21px, 1.65vw, 27px);
font-weight: 400;
letter-spacing: 0;
line-height: 1.2;
text-decoration: none;
transition: color 160ms ease-out, transform 160ms ease-out;
}
body .big-menu #menu-footer-menu-de > li > a::after {
position: absolute;
right: 22%;
bottom: 2px;
left: 22%;
height: 1px;
background: rgba(141, 199, 221, .75);
content: "";
opacity: .34;
transform: scaleX(.55);
transition: opacity 160ms ease-out, transform 160ms ease-out;
}
body .big-menu #menu-footer-menu-de > li > a:hover,
body .big-menu #menu-footer-menu-de > li > a:focus-visible {
color: #8dc7dd !important;
transform: translateY(-1px);
}
body .big-menu #menu-footer-menu-de > li > a:hover::after,
body .big-menu #menu-footer-menu-de > li > a:focus-visible::after {
opacity: 1;
transform: scaleX(1);
}
body .big-menu #menu-footer-menu-de > li.osp-menu-current > a,
body .big-menu #menu-footer-menu-de > li.current-menu-item > a,
body .big-menu #menu-footer-menu-de > li.current_page_item > a {
color: #8dc7dd !important;
font-weight: 500;
}
body .big-menu #menu-footer-menu-de > li.osp-menu-current > a::after,
body .big-menu #menu-footer-menu-de > li.current-menu-item > a::after,
body .big-menu #menu-footer-menu-de > li.current_page_item > a::after {
opacity: 1;
transform: scaleX(1);
}
body .big-menu #menu-footer-menu-de > li:nth-last-child(-n+2) { margin-top: 34px; }
body .big-menu #menu-footer-menu-de > li:nth-last-child(-n+2) > a {
min-height: 36px;
color: rgba(255, 255, 255, .84) !important;
font-size: 16px;
}
body .big-menu #menu-footer-menu-de > li:nth-last-child(-n+2) > a::after { display: none; }
body .big-menu #menu-footer-menu-de > li:nth-last-child(2)::before {
position: absolute;
top: 17px;
left: 100%;
width: 1px;
height: 24px;
margin-left: 21px;
background: rgba(141, 199, 221, .48);
content: "";
}
@media (max-width: 680px) {
body .big-menu {
top: 4px !important;
right: auto !important;
bottom: 8px !important;
left: 50% !important;
width: 90vw !important;
max-width: 90vw !important;
max-height: calc(100dvh - 12px);
border-radius: 15px;
}
body .osp-hecon-menu-header {
right: 72px;
left: 22px;
height: 62px;
}
body .osp-hecon-menu-brand img { width: 142px; }
body .big-menu > .container .col-auto { top: 7px; right: 18px; }
body .big-menu .menu-footer-menu-de-container { inset: 64px 12px 18px; }
body .big-menu #menu-footer-menu-de > li > a {
min-height: 42px;
font-size: clamp(18px, 5.8vw, 23px);
}
body .big-menu #menu-footer-menu-de > li:nth-last-child(-n+2) { margin-top: 22px; }
body .big-menu #menu-footer-menu-de > li:nth-last-child(-n+2) > a { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.osp-hecon-future-card,
.osp-hecon-future-card b,
.osp-hecon-future-header__nav a,
.osp-hecon-future-header__nav a::after { transition: none; }
.osp-wpb-managed .osp-hecon-future-card { animation: none; }
}