/* @override https://vahterusv2.test/assets/css/global.css http://159.223.2.73/assets/css/global.css */ /* ----------------------------------------------------------- Project: Vahterus Version: 2.0 Created: March 1, 2025 Modified: October 24, 2025 [Table of contents] 1. Reset 2. Web fonts 3. Custom Properties 4. Typography 5. Utility styles 6. Structure & design 7. Animations ----------------------------------------------------------- */ /* ----------------------------------------------------------- RESET ----------------------------------------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } article, aside, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; } ins { background-color: #ff9; color: #000; text-decoration: none; } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; } /* Remove built-in form typography styles */ input, button, textarea, select { font: inherit; } /* tables still need cellspacing="0" in the markup */ table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } /* Set html font-size to 10px so: 1rem = 10px */ html { font-size: 62.5%; } /* Set basic typography settings for body */ body { -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; font-feature-settings: "kern"; -webkit-font-feature-settings: "kern"; -moz-font-feature-settings: "kern"; -moz-font-feature-settings: "kern=1"; scroll-behavior: smooth; } /* ----------------------------------------------------------- WEB FONTS ----------------------------------------------------------- */ @font-face { font-family: "AktivGroteskEx_W_Rg"; font-display: swap; src: url("../fonts/AktivGroteskEx_W_Rg.eot"); /* IE9 Compat Modes */ src: url("../fonts/AktivGroteskEx_W_Rg.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/AktivGroteskEx_W_Rg.woff") format("woff"), /* Pretty Modern Browsers */ url("../fonts/AktivGroteskEx_W_Rg.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: normal; font-style: normal; } @font-face { font-family: "AktivGroteskEx_W_Bd"; font-display: swap; src: url("../fonts/AktivGroteskEx_W_Bd.eot"); /* IE9 Compat Modes */ src: url("../fonts/AktivGroteskEx_W_Bd.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/AktivGroteskEx_W_Bd.woff") format("woff"), /* Pretty Modern Browsers */ url("../fonts/AktivGroteskEx_W_Bd.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: normal; font-style: normal; } @font-face { font-family: "AktivGroteskEx_W_It"; font-display: swap; src: url("../fonts/AktivGroteskEx_W_It.eot"); /* IE9 Compat Modes */ src: url("../fonts/AktivGroteskEx_W_It.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/AktivGroteskEx_W_It.woff") format("woff"), /* Pretty Modern Browsers */ url("../fonts/AktivGroteskEx_W_It.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: normal; font-style: normal; } @font-face { font-family: "AktivGroteskEx_W_BdIt"; font-display: swap; src: url("../fonts/AktivGroteskEx_W_BdIt.eot"); /* IE9 Compat Modes */ src: url("../fonts/AktivGroteskEx_W_BdIt.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/AktivGroteskEx_W_BdIt.woff") format("woff"), /* Pretty Modern Browsers */ url("../fonts/AktivGroteskEx_W_BdIt.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: normal; font-style: normal; } /* ----------------------------------------------------------- CUSTOM PROPERTIES ----------------------------------------------------------- */ :root { /* Colors - Main */ --color-black: #000000; --color-white: #ffffff; --color-grey: #97999B; --color-vahterus-blue: #00006E; /* Colors - Neutral */ --color-neutral-grey-25: #F7F9FB; --color-neutral-grey-50: #F0F2F5; --color-neutral-grey-100: #DEDFE2; --color-neutral-grey-200: #CACACA; --color-neutral-grey-400: #AFB0B1; --color-neutral-grey-600: #97999B; --color-neutral-grey-800: #323232; /* Colors - Signal */ --color-signal-error: #E61E13; /* Colors - Text */ --color-text-secondary: #97999B; --color-text-disabled: #97999B; --color-text-error: #E61E13; /* Colors - Interaction */ --color-interaction-disabled: #F7F9FB; /* Colors - Stroke */ --color-stroke-divider: #CACACA; --color-stroke-container: #DEDFE2; /* Typography */ --font-size-base-text: 160%; /* Set HTML font-size where 160% = 16px */ --line-height-default: 2.375; /* Set base line-height for body text */ --font-family-default: "AktivGroteskEx_W_Rg", Arial, sans-serif; --font-family-headers: "AktivGroteskEx_W_Bd", Arial, sans-serif; /* Font sizes */ --font-size-xxs: 10px; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-2xl: 24px; --font-size-super: 80px; --font-size-hero: 50px; --font-size-h1: 40px; --font-size-h2: 21px; --font-size-h3: 16px; /* Spacers */ --spacer-1: 1rem; --spacer-2: 2rem; --spacer-3: 4rem; --spacer-4: 5.5rem; --spacer-5: 11rem; --spacer-6: 22rem; /* Global padding */ --gp-sides: 6rem; --gp-top: ; --gp-btm: ; } /* ----------------------------------------------------------- TYPOGRAPHY ----------------------------------------------------------- */ body { font-size: var(--font-size-base-text); line-height: var(--line-height-default); font-family: var(--font-family-default); color: var(--color-black); background-color: var(--color-white); hanging-punctuation: first allow-end last; } body.blue { color: var(--color-white); background-color: var(--color-vahterus-blue); } /* Set text selection color */ /*::selection { }*/ /* WebKit/Blink Browsers */ /*::-moz-selection { }*/ /* Gecko Browsers */ /* HEADINGS -------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6 { font-family: var(--font-family-headers); font-weight: normal; color: var(--color-black); text-rendering: optimizeLegibility; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; } .blue h1, .blue h2, .blue h3, .blue h4, .blue h5, .blue h6 { color: var(--color-white); } h1 { font-size: var(--font-size-h1); line-height: 1.28; } h2 { font-size: var(--font-size-h2); line-height: 1.8; } h3 { font-size: var(--font-size-h3); line-height: 2.375; } h4 { font-size: var(--font-size-h3); line-height: 2.375; } /* TEXT ELEMENTS -------------------------------------------------------------- */ p { margin: 0 0 2.375em; /* overflow-wrap: break-word; hyphens: auto; */ } a:hover, a:active { outline: none; } a, a:active, a:visited { text-decoration: underline; color: var(--color-black); } a:hover { color: var(--color-black); } .blue a, .blue a:active, .blue a:visited { color: var(--color-white); } .blue a:hover { color: var(--color-white); } blockquote { } strong { font-weight: normal; font-family: var(--font-family-headers); } em,dfn { font-style: normal; font-family: "AktivGroteskEx_W_It"; } dfn { font-weight: normal; } sup, sub { line-height: 0; font-size: 0.75em; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } abbr, acronym { } address { } del { } pre,code { white-space: pre; } pre,code,tt { } pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } /* BUTTONS & CALL-TO-ACTIONS -------------------------------------------------------------- */ /* Different CTA's styles: .cta = global CTA styles .cta-button = button .cta-border = similar to button but transparent .cta-underline = underlined CTA .cta--white == white colorway .cta--black == black colorway */ a.cta { text-decoration: none; transition: 0.15s ease-in-out; } a.cta:hover { text-decoration: none; } a.cta-button { border: 1px solid var(--color-black); padding: 1rem 6.9rem; display: inline-block; color: var(--color-white); background-color: var(--color-black); } a.cta-button:hover { color: var(--color-black); background-color: var(--color-white); } a.cta-button.cta--white { color: var(--color-black); background-color: var(--color-white); } a.cta-button.cta--white:hover { color: var(--color-white); background-color: var(--color-black); } a.cta-border { border: 1px solid var(--color-black); padding: 1rem 6.9rem; display: inline-block; color: var(--color-black); } a.cta-border:hover { color: var(--color-black); background-color: var(--color-white); } a.cta-border.cta--white { border: 1px solid var(--color-white); color: var(--color-white); } a.cta-border.cta--white:hover { border: 1px solid var(--color-black); background-color: var(--color-black); } a.cta-underline { font-family: "AktivGroteskEx_W_Bd"; color: var(--color-black); border-bottom: 2px solid var(--color-black); padding-bottom: 0.7rem; } a.cta-underline:hover { } a.cta-underline.cta--white { color: var(--color-white); border-bottom: 2px solid var(--color-white); } a.cta-underline.cta--white:hover { } .hero-img .cta-underline { padding-bottom: 0; } /* .cta-txt { font-family: var(--font-family-headers); font-size: var(--font-size-h3); } .cta-txt:hover { } .cta-primary { border: 1px solid; padding: 1rem 6.9rem; display: inline-block; } .cta-primary--frame { background-color: transparent; } .cta-underline { font-family: "AktivGroteskEx_W_Bd"; text-decoration: none; border-bottom: 2px solid #000; padding-bottom: 0.7rem; } .cta-underline:hover { color: var(--color-black); } .hero-img .cta-underline { padding-bottom: 0; } a.cta--white { color: var(--color-white); border-color: var(--color-white); } a.cta--white:hover { color: var(--color-white); border-color: var(--color-white); } a.cta--black { color: var(--color-black); border-color: var(--color-black); } a.cta--black:hover { color: var(--color-black); border-color: var(--color-black); } .blue a.cta--black { color: var(--color-white); border-color: var(--color-white); } .blue a.cta--black:hover { color: var(--color-white); border-color: var(--color-white); } .cta-primary--frame.cta--white { } .cta-primary--frame.cta--white:hover { border-color: var(--color-black); background-color: var(--color-black); } .cta-primary--frame.cta--black { } .cta-primary--frame.cta--black:hover { border-color: var(--color-black); background-color: var(--color-white); } */ /* .cta-primary--black { border-color: var(--color-black); color: var(--color-white); background-color: var(--color-black); } .cta-primary--black:hover { border-color: var(--color-black); color: var(--color-black); background-color: var(--color-white); } .blue .cta-primary--black { border-color: var(--color-white); color: var(--color-black); background-color: var(--color-white); } .blue .cta-primary--black:hover { border-color: var(--color-black); color: var(--color-white); background-color: var(--color-black); } .cta-primary--white { border-color: var(--color-black); color: var(--color-black); background-color: var(--color-white); } .cta-primary--white:hover { border-color: var(--color-black); color: var(--color-white); background-color: var(--color-black); } .cta-primary--frame.cta-primary--black { color: var(--color-black); } .cta-primary--frame.cta-primary--white { border-color: var(--color-white); color: var(--color-white); } .cta-primary--frame.cta-primary--white:hover{ border-color: var(--color-black); } .cta-underline { background: transparent; font-family: "AktivGroteskEx_W_Bd"; text-decoration: none; border-bottom: 2px solid #000; padding-bottom: 0; } .cta-underline:hover { background: transparent; font-family: "AktivGroteskEx_W_Bd"; } .cta-underline.cta-primary--white, .cta-underline--white { color: var(--color-white); border-color: var(--color-white); } .cta-underline.cta-primary--black { color: var(--color-black); border-color: var(--color-black); } */ .btn { } .btn:hover { } /* LISTS -------------------------------------------------------------- */ li ul, li ol { margin: 0 1.5em; } ul, ol { margin: 0 0 2.375em 1.2rem; } ul { list-style-type: "– "; } ol { list-style-type: decimal; } dl { margin: 0 0 1.5em 0; } dl dt { font-weight: normal; } dd { margin-left: 1.5em;} nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { display: inline; } /* TABLES -------------------------------------------------------------- */ table { width: 100%; } th { } th,td { } tr.even td { } tfoot { } caption { } /* FORMS -------------------------------------------------------------- */ /* align checkboxes, radios, text inputs with their label */ input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; } label, input[type=button], input[type=submit], button { cursor: pointer; -webkit-appearance: none; } label { font-weight: normal; } fieldset { } legend { font-weight: normal; } input { -webkit-appearance: none; } textarea { } textarea { } textarea:focus { } select { } select:focus { } /* Change Autocomplete styles in Chrome*/ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { -webkit-text-fill-color: #ffffff; -webkit-box-shadow: none; font-family: var(--font-family-default); } /* Resetting all form styles */ .scope-form form { font-family: var(--font-family-default) !important; } .scope-form label { font-family: var(--font-family-headers) !important; font-weight: normal !important; margin: 0 0 3.2rem 0 !important; } .scope-form input { background: none !important; border-radius: 0 !important; padding: 2.2rem !important; font-family: var(--font-family-default) !important; } .scope-form input::placeholder { font-size: 1em !important; font-family: var(--font-family-default) !important; } .scope-form textarea { background: none !important; border-radius: 0 !important; padding: 2.2rem !important; font-family: var(--font-family-default) !important; } .scope-form textarea::placeholder { font-size: 1em !important; font-family: var(--font-family-default) !important; } .scope-form select { background: none !important; border-radius: 0 !important; padding: 2.2rem !important; font-family: var(--font-family-default) !important; } .scope-form select::placeholder { font-size: 1em !important; font-family: var(--font-family-default) !important; } .scope-form select:hover { cursor: pointer; } .scope-form button[type=submit] { font-size: 1em !important; font-family: var(--font-family-headers) !important; border-radius: 0 !important; line-height: 1 !important; padding: 2.2rem 12rem !important; margin: 7.6rem 0 0 0 !important; transition: 0.25s cubic-bezier(0.55, 0, 0.45, 1); } .scope-form button[type=submit]:hover { transition: 0.15s cubic-bezier(0.55, 0, 0.45, 1); cursor: pointer; } /* Resetting Freeform layout styles */ .scope-form .freeform-row { margin: 0 0 3rem 0 !important; } .scope-form .freeform-row > div { padding: 0 !important; } .scope-form .freeform-col-6:first-of-type { padding-right: 1rem !important; } .scope-form .freeform-col-6:last-of-type { padding-left: 1rem !important; } /* Form styles: Default white page */ .scope-form label { color: var(--color-black) !important; } .scope-form label::after { color: var(--color-black) !important; } .scope-form input { border-color: var(--color-black) !important; color: var(--color-black) !important; } .scope-form input::placeholder { color: var(--color-black) !important; } .scope-form textarea { border-color: var(--color-black) !important; color: var(--color-black) !important; } .scope-form textarea::placeholder { color: var(--color-black) !important; } .scope-form select { border-color: var(--color-black) !important; color: var(--color-black) !important; background: transparent url("../img/arrow-down-black.svg") no-repeat calc(100% - 2.4rem) 2.4rem !important; } .scope-form select::placeholder { color: var(--color-black) !important; } .scope-form button { border-color: var(--color-black) !important; background: var(--color-black) !important; color: var(--color-white) !important; } .scope-form button:hover { border-color: var(--color-black) !important; background: transparent !important; color: var(--color-black) !important; } /* Form styles: Blue page */ .blue .scope-form label { color: var(--color-white) !important; } .blue .scope-form label::after { color: var(--color-white) !important; } .blue .scope-form input { border-color: var(--color-white) !important; color: var(--color-white) !important; } .blue .scope-form input::placeholder { color: var(--color-white) !important; } .blue .scope-form textarea { border-color: var(--color-white) !important; color: var(--color-white) !important; } .blue .scope-form textarea::placeholder { color: var(--color-white) !important; } .blue .scope-form select { border-color: var(--color-white) !important; color: var(--color-white) !important; background: transparent url("../img/arrow-down-white.svg") no-repeat calc(100% - 2.4rem) 2.4rem !important; } .blue .scope-form select::placeholder { color: var(--color-white) !important; } .blue .scope-form button { border-color: var(--color-white) !important; background: var(--color-white) !important; color: var(--color-vahterus-blue) !important; } .blue .scope-form button:hover { border-color: var(--color-white) !important; background: transparent !important; color: var(--color-white) !important; } /* Footer Newsletter form */ #newsletter-form { } #newsletter-form .input-wrap { border: 1px solid var(--color-black); padding: 0 0 0 3.2rem; display: flex; max-width: 46rem; } #newsletter-form input { border: none; background: none; outline: none; padding: 0; margin: 0; line-height: 58px; width: 100%; } #newsletter-form button { border: none; background: none; outline: none; width: 5.8rem; height: 5.8rem; padding: 0; margin: 0; background-image: url(../img/arrow-right-black.svg); background-repeat: no-repeat; background-position: center center; } .blue #newsletter-form .input-wrap { border: 1px solid var(--color-white); } .blue #newsletter-form button { background-image: url(../img/arrow-right-white.svg); } .blue #newsletter-form input { color: var(--color-white); } /* ----------------------------------------------------------- UTILITY STYLES ----------------------------------------------------------- */ .bg-video, .bg-cover { background-position: center center; background-repeat: no-repeat; background-size: cover; } .bg-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .center-vertically { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .text-center { text-align: center; } .text-right { text-align: right; } /* ----------------------------------------------------------- STRUCTURE ----------------------------------------------------------- */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; } body { height: 100%; text-align: center; } body.main-nav-open, body.lang-nav-open { height: 100vh; overflow: hidden; } .page-wrapper { width: 100%; min-height: 100%; _height: 100%; margin: auto; position: relative; text-align: left; overflow: hidden; } .page-hero, .page-content, .page-footer { width: 100%; position: relative; } /* GLOBAL PADDING -------------------------------------------------------------- */ .page-header, .page-hero, .content-block, .page-footer { } .page-content { padding-top: 11rem; } .home .page-content { padding-top: 0; } /* FLEXBOX AND GRID -------------------------------------------------------------- */ .flex-wrapper { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; } .flex-wrapper .flex-item { } .flex-2 > .span-1 { flex-basis: 50%; } .flex-2 > .span-2 { flex-basis: 100%; } .flex-3 > .span-1 { flex-basis: 33.33%; } .flex-3 > .span-2 { flex-basis: 66.66%; } .flex-3 > .span-3 { flex-basis: 100%; } .flex-4 > .span-1 { flex-basis: 25%; } .flex-4 > .span-2 { flex-basis: 50%; } .flex-4 > .span-3 { flex-basis: 75%; } .flex-4 > .span-3 { flex-basis: 100%; } .grid-wrapper { display: grid; justify-content: space-between; } .grid-wrapper.grid-2 { grid-template-columns: repeat(2, 1fr); grid-gap: 10rem var(--gp-sides); } .grid-wrapper.grid-3 { grid-template-columns: repeat(3, 1fr); grid-gap: 10rem var(--gp-sides); } .grid-wrapper.grid-4 { grid-template-columns: repeat(4, 1fr); grid-gap: 10rem var(--gp-sides); } .grid-wrapper.grid-5 { grid-template-columns: repeat(5, 1fr); grid-gap: 10rem var(--gp-sides); } /* MASTHEAD -------------------------------------------------------------- */ .page-header { padding-left: var(--gp-sides); padding-right: var(--gp-sides); border-bottom: 1px solid var(--color-black); } .page-header .wrap { height: 11rem; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; margin: 0 auto; } .page-header .logo-wrap { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; } .page-header .logo { max-width: 25rem; height: auto; } .page-header .logo img { width: auto; height: 18px; } .blue .page-header { border-bottom: 1px solid var(--color-white); } .burger { display: inline-block; width: 3.8rem; height: 3.8rem; position: relative; margin-right: 4.3rem; } .burger:hover { cursor: pointer; } .burger span { background-color: var(--color-black); width: 26px; height: 3px; position: absolute; left: 0; transition: 0.2s ease; } .burger span:nth-of-type(1) { top: 11px; } .burger span:nth-of-type(2) { top: 18px; } .burger span:nth-of-type(3) { top: 25px; } .blue .burger span { background-color: var(--color-white); } .burger:hover span:nth-of-type(1) { top: 10px; } .burger:hover span:nth-of-type(3) { top: 26px; } .burger.open span { } /* .burger.open span:nth-of-type(1) { top: 18px; transform: rotate(45deg); } .burger.open span:nth-of-type(2) { opacity: 0; } .burger.open span:nth-of-type(3) { top: 18px; transform: rotate(135deg); } */ /* Search */ .search-wrap { height: 0; overflow: hidden; position: absolute; z-index: 100; width: 100%; background-color: var(--color-white); } .search-wrap.open { height: auto; } .search-results-found .search-wrap { position: relative; } .search-results-found .page-content, .search-results-found .page-footer { height: 0; } .search-wrap .search-input { min-height: 6rem; border-bottom: 1px solid #000; padding-left: var(--gp-sides); padding-right: var(--gp-sides); } .search-wrap #site-search { -webkit-appearance: none; appearance: none; } .search-wrap #site-search input { border: none; height: 6rem; width: 100%; padding: 0; margin: 0; outline: none; -webkit-appearance: none; appearance: none; } #site-search input::-webkit-search-button { display: none; } #site-search input[type=search]::-ms-clear { display: none; width : 0; height: 0; } #site-search input[type=search]::-ms-reveal { display: none; width : 0; height: 0; } #site-search input[type="search"]::-webkit-search-decoration, #site-search input[type="search"]::-webkit-search-cancel-button, #site-search input[type="search"]::-webkit-search-results-button, #site-search input[type="search"]::-webkit-search-results-decoration { display: none; } #search-results { padding: 0 var(--gp-sides); } #search-results::after { content: ""; position: absolute; width: 100%; height: 1px; background-color: #000; left: 0; bottom: 0; } #search-results .search-hit { padding: var(--spacer-4) calc(var(--gp-sides) * 2); line-height: 2; } #search-results .search-hit:first-of-type { padding-top: calc(var(--spacer-4) * 2.2); } #search-results .search-hit:last-of-type { padding-bottom: calc(var(--spacer-4) * 4.4); } #search-results .search-hit h3 { font-size: 16px; } #search-results .search-hit h3 a { text-decoration: none; } #search-results .search-hit h3 a:hover { text-decoration: underline; } #search-results .snippet { margin: 0; } #search-results .snippet mark { background: none !important; font-style: normal; font-family: "AktivGroteskEx_W_Rg"; font-weight: normal; } #search-results .url { margin: 0; } #search-results .searching { padding: calc(var(--spacer-4) * 2.2) calc(var(--gp-sides) * 2) calc(var(--spacer-4) * 4.4) calc(var(--gp-sides) * 2); line-height: 2; } .blue .search-wrap { background-color: var(--color-vahterus-blue); } .blue .search-wrap .search-input { border-color: var(--color-white); } .blue .search-wrap input { background-color: var(--color-vahterus-blue); color: var(--color-white); } .blue #search-results .snippet mark { color: var(--color-white); } /* NAVIGATION -------------------------------------------------------------- */ .top-nav { } .top-nav a { text-decoration: none; margin-right: 2.9rem; } .top-nav a:hover { font-family: "AktivGroteskEx_W_Bd"; color: var(--color-black); } .top-nav a.lang-nav-toggle { margin-right: 0; } .top-nav a.lang-nav-toggle.open { font-family: "AktivGroteskEx_W_Bd"; } .top-nav a.active { text-decoration: none; font-family: "AktivGroteskEx_W_Bd"; } .button-x { display: block; width: 3.8rem; height: 3.8rem; background-image: url(../img/close-black.svg); background-repeat: no-repeat; background-position: center center; right: calc(var(--gp-sides) - 8px); top: 4.2rem; position: absolute; } .main-nav .back { display: block; width: 3.8rem; height: 3.8rem; background-image: url(../img/arrow-left-black.svg); background-repeat: no-repeat; background-position: center center; left: var(--gp-sides); top: 4.2rem; position: absolute; } .blue .button-x { background-image: url(../img/close-white.svg); } .blue .main-nav .back { background-image: url(../img/arrow-left-white.svg); } .main-nav { position: absolute; z-index: 100; pointer-events: none; opacity: 0; left: -100%; width: 0; transition: 0.25s ease; } .main-nav.open { pointer-events: auto; opacity: 1; left: 0; width: 50%; transition: 0.25s ease; } .main-nav .wrap { min-height: calc(100vh - 11rem); height: auto; width: 100%; position: relative; background-color: var(--color-white); overflow: hidden; overflow-y: scroll; padding-top: 11rem; -ms-overflow-style: none; /* Internet Explorer 10+ */scrollbar-width: none; /* Firefox, Safari 18.2+, Chromium 121+ */ } .main-nav .wrap::-webkit-scrollbar { display: none; } .main-nav-overlay { width: 100%; height: calc(100svh - 11rem); position: absolute; background-color: var(--color-black); z-index: 100; right: -100%; top: 0; opacity: 0; } .main-nav-overlay:hover { cursor: pointer; } .open .main-nav-overlay { animation: overlayOpacity 0.2s forwards; animation-delay: 0.2s; } .home .open .main-nav-overlay { animation: homeOverlayOpacity 0.2s forwards; animation-delay: 0.2s; } .lang-nav { position: absolute; z-index: 100; pointer-events: none; opacity: 0; right: -100%; width: 0; transition: 0.25s ease; } .lang-nav.open { pointer-events: auto; opacity: 1; right: 0; width: 50%; transition: 0.25s ease; } .lang-nav .wrap { min-height: calc(100vh - 11rem); height: auto; width: 100%; position: relative; background-color: var(--color-white); overflow: hidden; } .lang-nav-overlay { width: 100%; height: calc(100svh - 11rem); position: absolute; background-color: var(--color-black); z-index: 100; left: -100%; top: 0; opacity: 0; } .lang-nav-overlay:hover { cursor: pointer; } .open .lang-nav-overlay { animation: overlayOpacity 0.2s forwards; animation-delay: 0.2s; } .home .open .lang-nav-overlay { animation: homeOverlayOpacity 0.2s forwards; animation-delay: 0.2s; } .lang-nav ul { list-style: none; margin: 11rem 0 0 0; } .lang-nav ul li { padding-left: var(--gp-sides); padding-right: var(--gp-sides); margin-bottom: 2rem; } .lang-nav ul a { text-decoration: none; display: inline-block; } .lang-nav ul a:hover { text-decoration: none; font-family: "AktivGroteskEx_W_Bd"; color: var(--color-black); } .lang-nav ul .active a { text-decoration: none; font-family: "AktivGroteskEx_W_Bd"; } @keyframes overlayOpacity { from { opacity: 0; } to { opacity: 5%; } } @keyframes homeOverlayOpacity { from { opacity: 0; } to { opacity: 10%; } } /* Slider nav version .main-nav ul.root { margin-top: 11rem; } .main-nav ul { list-style: none; margin: 0; } .main-nav ul li { padding-left: var(--gp-sides); padding-right: var(--gp-sides); margin-bottom: 2rem; } .main-nav ul a { text-decoration: none; display: inline-block; } .main-nav ul a:hover { text-decoration: none; font-family: "AktivGroteskEx_W_Bd"; color: var(--color-black); } .main-nav ul a.active { text-decoration: none; font-family: "AktivGroteskEx_W_Bd"; } .main-nav .wrap ul { position: absolute; top: 0; width: 100%; transition: left 0.25s ease; } .main-nav .wrap ul ul { left: 100%; display: none; pointer-events: none; } .main-nav .wrap ul ul ul { z-index: 10; } .main-nav .wrap ul .show { display: block; pointer-events: auto; } .main-nav .wrap .level-1 { left: 0%; } .main-nav .wrap .level-2 { left: -100%; } .main-nav .wrap .level-3 { left: -200%; } .main-nav .wrap .level-4 { left: -300%; } .main-nav ul.root { margin-top: 11rem; } */ .main-nav ul { list-style: none; margin: 0; } .main-nav ul li { padding-left: var(--gp-sides); padding-right: var(--gp-sides); margin-bottom: 2rem; } .main-nav ul li:last-of-type { margin-bottom: 0; } .main-nav ul a { text-decoration: none; display: inline-block; } .main-nav ul a:hover { text-decoration: none; font-family: "AktivGroteskEx_W_Bd"; color: var(--color-black); } .main-nav ul a.active { text-decoration: none; font-family: "AktivGroteskEx_W_Bd"; } .main-nav .wrap ul { } .main-nav .wrap ul ul { } .main-nav .wrap ul ul ul { } .main-nav .wrap .open > ul { padding-top: 2rem; } .main-nav ul li.back-button { margin-bottom: 0; } .main-nav ul li .back { position: absolute; top: -66px; display: inline-block; width: 3.8rem; height: 3.8rem; position: absolute; background-image: url(../img/arrow-left-black.svg); background-repeat: no-repeat; background-position: 0 center; transition: background-position 0.25s ease; } .main-nav ul li .back:hover { cursor: pointer; background-position: 2px center; transition: background-position 0.25s ease; } .main-nav .next { display: inline-block; width: 3.8rem; height: 3.8rem; position: absolute; right: calc(var(--gp-sides) - 1.2rem); background-image: url(../img/arrow-right-black.svg); background-repeat: no-repeat; background-position: center center; transition: right 0.25s ease; } .main-nav .next:hover { cursor: pointer; /* right: calc(var(--gp-sides) - 1.4rem); */ transition: right 0.25s ease; } .main-nav .open > .next { transition: right 0.25s ease; transform: rotate(90deg); } .blue .main-nav .next { background-image: url(../img/arrow-right-white.svg); } .blue .main-nav { } .blue .main-nav .wrap { background-color: var(--color-vahterus-blue); border-right: 1px solid var(--color-white); } .blue .main-nav ul a { } .blue .main-nav ul a:hover { color: var(--color-white); } .blue .main-nav ul a.active { } .mobile-secondary { margin-top: 50rem !important; } /* Animated accordion base */ .main-nav ul ul { display: block; overflow: hidden; max-height: 0; opacity: 0; /* prevents painting artifacts */ visibility: hidden; /* removes from hit-testing/paint */ pointer-events: none; /* prevents clicks on hidden layer */ transition: max-height 0.3s ease, opacity 0.2s ease, visibility 0s linear 0.3s; /* delay visibility until after close */ } /* Open state */ .main-nav li.open > ul { max-height: 100vh; opacity: 1; visibility: visible; pointer-events: auto; transition: max-height 0.3s ease, opacity 0.2s ease, visibility 0s; /* visible immediately */ } /* Pagination */ .pagination { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; padding-top: 15.5rem; } .pagination a { text-decoration: none; } .pagination-numbers a, .pagination-numbers span { padding: 1rem 2rem; margin: 0 1.25rem; } .pagination-numbers *:first-child { margin-left: 0; } .pagination-numbers *:last-child { margin-right: 0; } .pagination a:hover, .pagination .current { font-family: "AktivGroteskEx_W_Bd"; color: var(--color-black); } .pagination .disabled { opacity: 0.25; } .pagination .next, .pagination .prev { display: inline-block; padding: 0 2rem; background-repeat: no-repeat; background-size: 12px; background-position: center center; } .pagination .next:hover, .pagination .prev:hover { background-size: 14px; transition: background-size 0.1s ease; } .pagination .next:active, .pagination .prev:active { background-size: 12px; transition: background-size 0.1s ease; } .pagination .prev { margin-left: -2rem; background-image: url(../img/arrow-left-black.svg); } .pagination .next { margin-right: -2rem; background-image: url(../img/arrow-right-black.svg); } /* Double header styles */ .page-header--double { } .page-header--double .wrap { height: 6rem; justify-content: space-between; } .double-nav { padding-left: var(--gp-sides); padding-right: var(--gp-sides); border-bottom: 1px solid var(--color-black); } .double-nav .wrap { height: 6rem; line-height: 6rem; } .double-nav a { text-decoration: none; margin-right: 2.9rem; } .double-nav a:hover { text-decoration: none; font-family: "AktivGroteskEx_W_Bd"; color: var(--color-black); } .double-nav a.active { text-decoration: none; font-family: "AktivGroteskEx_W_Bd"; } .blue .double-nav { border-bottom: 1px solid var(--color-white); } .blue .double-nav a:hover { color: var(--color-white); } /* Breadcrumps */ .nav-breadcrump { padding-left: var(--gp-sides); padding-right: var(--gp-sides); padding-bottom: 11rem; max-width: calc(106rem + var(--gp-sides) * 2); margin: 0 auto; } .nav-breadcrump li { display: inline; } .nav-breadcrump li a { text-decoration: none; } .nav-breadcrump li a:hover { text-decoration: underline; color: var(--color-black); } .nav-breadcrump span { padding: 0 0.4rem; } .nav-breadcrump .current { font-family: var(--font-family-headers); } /* HERO -------------------------------------------------------------- */ /* CONTENT ELEMENTS -------------------------------------------------------------- */ .content-block { max-width: calc(106rem + var(--gp-sides) * 2); margin: 0 auto; padding-left: var(--gp-sides); padding-right: var(--gp-sides); padding-bottom: var(--spacer-5); } .content-block:last-of-type { padding-bottom: var(--spacer-6); } .hero-block { } .hero-block:last-of-type { } .hero-block + .content-block { padding-top: var(--spacer-5); } .cols { display: grid; justify-content: space-between; } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } .cols-2.cols-img--left .col--img { order: -1; } /* Hero img */ .hero-img { position: relative; width: 100%; } .hero-img h1 { font-size: var(--font-size-hero); } .hero-img .txt-center h1 { font-size: var(--font-size-super); } .hero-img .wrap-txt { position: absolute; width: 100%; aspect-ratio: 16 / 9; top: 0; padding: var(--gp-sides); display: inline-grid; align-items: center; } .hero-img .wrap-txt .txt-content { } .hero-img .wrap-txt .cta { margin-top: 3.6rem; display: inline-block; } .hero-img .wrap-txt .cta-primary { margin-top: 4.2rem; display: inline-block; } .hero-img .wrap-img { } .hero-img .wrap-img img { width: 100%; height: auto; } .hero-img .txt-right { text-align: right; } .hero-img .txt-center { text-align: center; } .hero-img .txt-color-light, .hero-img .txt-color-light h1 { color: var(--color-white); } .hero-img .wrap-cta { padding: 2.8rem var(--gp-sides); } .hero-img .wrap-cta a { } .hero-img .wrap-cta a:hover { color: var(--color-black); font-family: "AktivGroteskEx_W_Bd"; } /* Double hero img */ .double-hero-img { position: relative; width: 100%; } .double-hero-img .cols { position: relative; width: 100%; } .double-hero-img .cols-2 { grid-gap: 0; } .double-hero-img .cols .col .wrap-img { position: relative; overflow: hidden; aspect-ratio: 8 / 9; background-repeat: no-repeat; background-position: center; background-size: cover; } /* .double-hero-img .cols .col .wrap-img img { position: absolute; top: 0; left: 50%; height: 100%; width: auto; transform: translateX(-50%); object-fit: cover; } */ .double-hero-img .wrap-cta { padding: 2.8rem var(--gp-sides); } .double-hero-img .wrap-cta a { } .double-hero-img .wrap-cta a:hover { color: var(--color-black); font-family: "AktivGroteskEx_W_Bd"; } .double-hero-img .col--right .wrap-cta { padding-left: 0; } /* Hero text */ .hero-text { padding: calc(var(--gp-sides) * 2.5) calc(var(--gp-sides) * 4) calc(var(--gp-sides) * 2.5) var(--gp-sides); } .hero-text:has(.cta) { padding-bottom: calc(var(--gp-sides) * 2.5 + 1.2rem); } .hero-text .txt-content { } .hero-text .txt-content p { font-size: var(--font-size-hero); line-height: 1.28; margin-bottom: 1.1em; } .hero-text .txt-content p:last-of-type { margin-bottom: 0; } .hero-text .cta { margin-top: 5.5rem; } /* Hero image - text */ .hero-img-text { background-color: var(--color-vahterus-blue); } .hero-img-text .col--txt { color: var(--color-white); padding: calc(var(--gp-sides) * 2) calc(var(--gp-sides) * 2) calc(var(--gp-sides) * 2) var(--gp-sides); position: relative; display: flex; align-items: center; } .hero-img-text .col--txt .wrap-txt { } .hero-img-text .col--txt p { font-size: var(--font-size-h1); line-height: 1.35; margin-bottom: 1.1em; } .hero-img-text .col--img { overflow: hidden; } .hero-img-text .wrap-img { position: relative; overflow: hidden; aspect-ratio: 8 / 9; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } /* .hero-img-text .wrap-img img { position: absolute; top: 0; left: 50%; height: 100%; width: auto; transform: translateX(-50%); object-fit: cover; } */ /* Article header */ .article-header { padding-bottom: 0; } .article-header h1 { margin-bottom: 1em; } /* Text block */ .text-block { } .text-block h1 { margin-bottom: 2.8em; } .text-block h2 { margin-bottom: 2.4em; } .text-block .wrap *:last-child { margin-bottom: 0; } .text-block .table { margin-bottom: 2.375em; } /* Two colum block */ .two-col-block { } .two-col-block header { } .two-col-block header h2 { font-size: var(--font-size-h3); margin-bottom: 12rem; } .two-col-block .cols { grid-gap: var(--spacer-5) 6rem; } .two-col-block .col { } .two-col-block .col h3 { font-size: 1em; margin-bottom: 4.2rem; } .two-col-block .col *:last-child { margin-bottom: 0; } .two-col-block a[href^="mailto:"] { text-decoration: none; } .two-col-block a[href^="mailto:"]:hover { text-decoration: underline; } .toggle-cols { padding-bottom: 0; } .toggle-cols header { position: relative; } .toggle-cols header h2 { font-size: var(--font-size-h4); margin-bottom: 6.5rem; } .toggle-cols header:hover { cursor: pointer; } .toggle-cols header::after, .toggle-cols header::before { content: ""; position: absolute; width: 14px; height: 1px; background-color: #fff; right: 0; transform: rotate(50deg); top: 13px; right: 9px; } .toggle-cols header::before { transform: rotate(-50deg); right: 0; } .toggle-cols.open header::after, .toggle-cols.open header::before { transform: rotate(-50deg); right: 9px; } .toggle-cols.open header::before { transform: rotate(50deg); right: 0; } .toggle-cols .wrap-cols { height: 0; opacity: 0; overflow: hidden; transition: 0.2s cubic-bezier(0.83, 0, 0.17, 1); } .toggle-cols.open .wrap-cols { height: 100%; opacity: 1; transition: 0.2s cubic-bezier(0.83, 0, 0.17, 1); } .toggle-cols .cols { padding-top: 5.5rem; padding-bottom: var(--spacer-5); } /* Image block */ .img-block { } .img-block picture + p { margin-top: var(--spacer-3); margin-bottom: 0; font-family: "AktivGroteskEx_W_It"; } /* Entry promotion block */ .entry-promo { display: grid; justify-content: space-between; grid-template-columns: repeat(2, 1fr); grid-gap: 0 7rem; align-content: end; } .entry-promo .img-wrap { } .entry-promo .txt-wrap { align-self: end; padding-right: 50px; } .entry-promo .txt-wrap h3 { padding: 0; margin-bottom: 50px; } /* FAQ block */ .faq-block { } .faq-block header { padding-bottom: var(--spacer-5); } .faq-block .faq-qa { border-bottom: 1px solid #000; } .faq-block .faq-qa .question { font-family: var(--font-family-headers); line-height: 1.5; padding: 27px 50px 27px 0; position: relative; border-top: 1px solid #000; } .faq-block .faq-qa .question:hover { cursor: pointer; } .faq-block .faq-qa .question::before, .faq-block .faq-qa .question::after { content: ""; position: absolute; width: 10px; height: 1px; background-color: #000; right: 8px; top: 38px; transform: rotate(-45deg); } .faq-block .faq-qa .question::after { transform: rotate(45deg); right: 15px; } .faq-block .faq-qa .question.open::after { transform: rotate(-45deg); } .faq-block .faq-qa .question.open::before { transform: rotate(45deg); } .faq-block .faq-qa .answer { visibility: hidden; opacity: 0; height: 0; overflow: hidden; transition: 0.25s cubic-bezier(0.55, 0, 0.45, 1); padding-right: 60px; } .faq-block .faq-qa .answer.open { visibility: visible; opacity: 1; height: auto; min-height: 10px; transition: 0.25s cubic-bezier(0.55, 0, 0.45, 1); } .faq-block .faq-qa .answer .inner { padding-bottom: 27px; } .faq-block .faq-qa .answer *:last-child { margin-bottom: 0; } /* Job list */ .job-list { } .job-list header { padding-bottom: var(--spacer-5); } .job-list .wrap { } .job-list .positions-list { margin: 0; padding: 0; border-top: 1px solid #000; } .job-list .positions-list li { margin: 0; padding: 27px 200px 27px 0; display: block; border-bottom: 1px solid #000; line-height: 1.5; } .job-list .positions-list li span { font-family: var(--font-family-headers); } .job-list .positions-list li a { border: 1px solid #000; padding: 0 44px; float: right; line-height: 38px; margin-top: -9px; margin-right: -200px; text-decoration: none; } .job-list .positions-list li a:hover { border: 1px solid #000; text-decoration: none; background-color: #000; color: #fff; } /* Fairs list */ .fairs-list { } .fairs-list .fair { border-bottom: 1px solid rgba(0, 0, 0, .2); margin-top: var(--spacer-4); } .fairs-list .fair:last-of-type { border-bottom: none; } .fairs-list .fair h3 { margin-bottom: var(--spacer-4); } .fairs-list .fair h3 a { text-decoration: none; } .fairs-list .fair p { margin-bottom: calc(var(--spacer-4) - 2px); } /* News list */ .news-list { } .news-list .news { border-bottom: 1px solid rgba(0, 0, 0, .2); margin-top: var(--spacer-4); } .news-list .news:nth-of-type(10n), .news-list .news:last-of-type { border-bottom: none; } .news-list .news h3 { margin-bottom: var(--spacer-4); } .news-list .news h3 a { text-decoration: none; } .news-list .news p { margin-bottom: calc(var(--spacer-4) - 2px); } /* Articles list */ .articles-list { } .articles-list .article { border-bottom: 1px solid var(--color-black); margin-top: var(--spacer-5); padding-bottom: 6.7rem; } .articles-list .article:first-of-type { margin-top: var(--spacer-4); } .articles-list .article-category a { text-decoration: none; text-transform: uppercase; } .articles-list .article:last-of-type { border-bottom: none; } .articles-list .article h3 { margin-bottom: var(--spacer-4); font-size: var(--font-size-h2); } .articles-list .article h3 a { text-decoration: none; } .articles-list .article p { margin-bottom: calc(var(--spacer-4) - 2px); } .articles-list--thumb .article { display: grid; justify-content: space-between; grid-template-columns: calc(100% - 28rem - 6rem) 28rem; } .articles-list--thumb .article .deck { } /* Cases list */ .cases-filters { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; padding-bottom: 2.5rem; } .cases-filter-wrap { width: 30%; } .cases-filter-wrap label { font-family: "AktivGroteskEx_W_Bd"; font-weight: normal; margin-bottom: 3rem; display: block; line-height: 1; } .cases-filter-wrap select { margin-bottom: 6rem; appearance: none; -webkit-appearance: none; width: 100%; font-family: "AktivGroteskEx_W_Rg"; font-size: 16px !important; padding: 1rem 1rem 1rem 2.3rem; background-color: transparent; border: 1px solid var(--color-black); border-radius: 0; color: var(--color-black); cursor: pointer; position: relative; outline: none; } .cases-filter-wrap .custom-select { position: relative; } .cases-filter-wrap .custom-select::after, .cases-filter-wrap .custom-select::before { position: absolute; content: ""; right: 2rem; top: 3.1rem; pointer-events: none; width: 1.4rem; height: 0.1rem; background-color: var(--color-black); } .cases-filter-wrap .custom-select::after { transform: rotate(50deg); right: 2.85rem; } .cases-filter-wrap .custom-select::before { transform: rotate(-50deg); } .cases-filter-clear { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; text-align: right; } .cases-filter-clear .custom-btn-wrap { padding-top: 2.7rem; width: 100%; } .cases-filter-clear a { color: var(--color-black); text-decoration: none; border-bottom: 1px solid var(--color-black); padding: 0 0; } .cases-filter-clear a:hover { } .cases-list { } .cases-list .case { border-bottom: 1px solid rgba(0, 0, 0, .2); margin-top: var(--spacer-4); display: grid; justify-content: space-between; grid-template-columns: calc(100% - 28rem - 6rem) 28rem; } .cases-list .case .deck { } .cases-list .case:last-of-type { border-bottom: none; } .cases-list .case h3 { margin-bottom: var(--spacer-3); font-size: var(--font-size-h2); } .cases-list .case h3 a { text-decoration: none; } .cases-list .case p:has(.cta) { margin-bottom: calc(var(--spacer-4) - 2px); } /* Cross-post entries */ .cross-post { padding-top: calc(var(--spacer-5) - 1rem); } .cross-post header { padding-bottom: calc(var(--spacer-5)); } .cross-post header h3 { font-size: var(--font-size-h2); } .cross-post .wrap { } .cross-post .entries-list { grid-gap: 0 11rem; } .cross-post .list-item { } .cross-post .list-item h4 { margin-bottom: 3.4rem; font-size: var(--font-size-h2); line-height: 1.8; } .cross-post .list-item h4 a { text-decoration: none; } .cross-post .list-item .wrap-img { margin-bottom: 10.2rem; } /* Image comparison */ .img-comp-block { } .img-comparison-wrap { position: relative; margin-bottom: 4rem; } .img-comparison-wrap .img-before { position: relative; top: 0; z-index: 2; } .img-comparison-wrap .img-after { position: absolute; top: 0; z-index: 1; } .img-comparison-wrap .shown { z-index: 10; } .img-comp-toggle { } .img-comp-toggle a { display: block; border: 1px solid var(--color-black); color: var(--color-black); text-decoration: none; text-align: center; line-height: 40px; } .img-comp-toggle a.clicked { border: 1px solid var(--color-black); background-color: var(--color-black); color: var(--color-white); } .img-comp-toggle a:hover { color: var(--color-black); text-decoration: none; } .img-comp-toggle a.clicked:hover { border: 1px solid var(--color-black); background-color: var(--color-black); color: var(--color-white); } /* SketchFab 3D embed */ .embed-block { position: relative; } .embed-block > div { display: block; width: 100%; height: 0; position: relative; padding-top: 62.5%; } .embed-block iframe { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; } .embed-block .no-cookies { display: none; width: 100%; height: 0; position: relative; padding-top: 62.5%; background-color: #ddd; } .embed-block .no-cookies div { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; margin: 0; text-align: center; padding: 0 4%; } .embed-block .no-cookies div p:last-of-type { margin: 0; } /* Show no-cookies content if sketchfab iframe has been blocked by CookieBot */ .sketchfab-embed-wrapper:has(.cookieconsent-optin-preferences) { display: none; } .sketchfab-embed-wrapper:has(.cookieconsent-optin-preferences) + .no-cookies { display: block; } /* FOOTER -------------------------------------------------------------- */ .page-footer { border-top: 1px solid var(--color-black); } .blue .page-footer { border-top: 1px solid var(--color-white); } .page-footer .cols { } .page-footer .cols-3 { grid-template-columns: 50% repeat(2, 1fr); } .page-footer .cols-4 { grid-template-columns: 50% repeat(3, 1fr); } .page-footer .cols .col { padding: var(--spacer-5) var(--gp-sides); border-right: 1px solid rgba(0, 0, 0, .2); } .blue .page-footer .cols .col { border-right: 1px solid rgba(255, 255, 255, .2); } .page-footer .cols .col:last-of-type { border-right: none; } .footer-nav { } .footer-nav ul { list-style: none; margin: 0; padding: 0; } .footer-nav ul a { text-decoration: none; } .page-footer .small-print { border-top: 1px solid var(--color-black); padding-left: var(--gp-sides); padding-right: var(--gp-sides); } .page-footer .small-print .wrap { height: 11rem; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; margin: 0 auto; } .page-footer .small-print span { font-family: var(--font-family-headers); } .page-footer .small-print a { text-decoration: none; } .blue .page-footer .small-print { border-top: 1px solid var(--color-white); } /* MEDIA QUERIES -------------------------------------------------------------- */ @media only screen and (max-width : 1280px) { /* Navigation */ .main-nav.open { width: 60%; } } @media only screen and (max-width : 1024px) { :root { /* Global padding */ --gp-sides: 4rem; } /* Navigation */ .main-nav.open { width: 70%; } } @media only screen and (max-width : 960px) { :root { /* Font sizes */ --font-size-2xl: 24px; --font-size-super: 50px; --font-size-hero: 40px; --font-size-h1: 28px; --font-size-h2: 21px; --font-size-h3: 16px; /* Global padding */ --gp-sides: 2rem; } .page-content { padding-top: 9rem; } .nav-breadcrump { padding-bottom: 9rem; } /* Masthead */ .burger { margin-right: 2rem; } /* Navigation */ .main-nav.open { width: 80%; } /* Hero text */ .hero-text { padding: calc(var(--gp-sides) * 4) calc(var(--gp-sides) * 2) calc(var(--gp-sides) * 4) var(--gp-sides); } .hero-text:has(.cta) { padding-bottom: calc(var(--gp-sides) * 4 + 1.2rem); } .hero-text .txt-content p { font-size: var(--font-size-h1); } /* Footer */ .page-footer .cols-3 { grid-template-columns: 40% repeat(2, 1fr); } .page-footer .cols-4 { grid-template-columns: 40% repeat(3, 1fr); } .page-footer .cols .col { padding: var(--spacer-4) var(--gp-sides); } } @media only screen and (max-width : 880px) { .cols-2 { grid-template-columns: repeat(1, 1fr); } /* Double hero img */ .double-hero-img .cols-2 { grid-gap: 0 0; } .double-hero-img .cols .col .wrap-img { position: relative; overflow: hidden; aspect-ratio: 9 / 16; } .double-hero-img .col--right .wrap-cta { padding-left: var(--gp-sides); } /* Hero image - text */ .hero-img-text .col--txt { padding: calc(var(--gp-sides) * 2) calc(var(--gp-sides) * 2) calc(var(--gp-sides) * 2) var(--gp-sides); } .hero-img-text .wrap-img { position: relative; overflow: hidden; aspect-ratio: 9 / 16; } .hero-img-text .wrap-img img { position: absolute; top: 0; left: 50%; height: 100%; width: auto; transform: translateX(-50%); object-fit: cover; } } @media only screen and (max-width : 780px) { /* Masthead */ .page-header .wrap { height: 8rem; } .page-header .logo { max-width: 20rem; } .burger { margin-right: 1rem; } /* Navigation */ .main-nav.open { width: 100%; } .main-nav .wrap { min-height: calc(100vh - 8rem); min-height: calc(100dvh - 8rem); } /* Cases list */ .cases-filter-wrap { width: 48%; } /* Footer */ .page-footer .cols-3 { grid-template-columns: repeat(1, 1fr); } .page-footer .cols-4 { grid-template-columns: repeat(1, 1fr); } .page-footer .cols .col { padding: var(--spacer-4) var(--gp-sides); border-top: 1px solid rgba(0, 0, 0, .2); border-right: none; } .blue .page-footer .cols .col { border-right: 1px solid rgba(255, 255, 255, .2); } } @media only screen and (max-width : 680px) { :root { /* Font sizes */ --font-size-base-text: 140%; /* Set HTML font-size where 160% = 16px */ --font-size-2xl: 20px; --font-size-super: 40px; --font-size-hero: 36px; --font-size-h1: 24px; --font-size-h2: 18px; } .page-content { padding-top: 6rem; } .nav-breadcrump { padding-bottom: 6rem; } .cta-primary { padding: 0.5rem 3.5rem; } /* Masthead */ .page-header .wrap { height: 6rem; } .page-header .logo { max-width: 12rem; } .burger { width: 1.6rem; margin-right: 2rem; } .burger span { width: 16px; height: 2px; } .burger span:nth-of-type(1) { top: 13px; } .burger span:nth-of-type(2) { top: 18px; } .burger span:nth-of-type(3) { top: 23px; } .burger:hover span:nth-of-type(1) { top: 12px; } .burger:hover span:nth-of-type(3) { top: 24px; } .burger.open span:nth-of-type(1) { top: 18px; transform: rotate(45deg); } .burger.open span:nth-of-type(2) { opacity: 0; } .burger.open span:nth-of-type(3) { top: 18px; transform: rotate(135deg); } .top-nav { display: none; } /* Navigation */ .main-nav .wrap { min-height: calc(100vh - 6rem); min-height: calc(100dvh - 6rem); } .main-nav ul.root { margin-top: 6rem; } .main-nav ul li { margin-bottom: 0.7rem; } .main-nav .next { right: calc(var(--gp-sides) - 1.7rem); background-size: 12px 12px; } .main-nav .next:hover { right: calc(var(--gp-sides) - 1.8rem); } .button-x { right: calc(var(--gp-sides) - 1.6rem); top: 1.5rem; background-size: 10px 10px; } .main-nav .back { left: var(--gp-sides); top: -44px !important; background-size: 12px 12px; } /* Hero img */ .hero-img .wrap-txt { aspect-ratio: 9 / 16; padding: 2rem; } .hero-img .wrap-txt .cta { margin-top: 3rem; } /* Hero text */ .hero-text { padding: calc(var(--gp-sides) * 4) var(--gp-sides) calc(var(--gp-sides) * 4) var(--gp-sides); } .hero-text:has(.cta) { padding-bottom: calc(var(--gp-sides) * 4 + 1.2rem); } /* Cases list */ .cases-filter-wrap { width: 100%; } .cases-list .case { margin-top: var(--spacer-4); display: grid; justify-content: space-between; grid-template-columns: 100%; } } /* ----------------------------------------------------------- ANIMATIONS ----------------------------------------------------------- */ @view-transition { navigation: auto; } /* 60fps scrolling: http://www.thecssninja.com/javascript/pointer-events-60fps ----------------------------------------------------------- */ .disable-hover, .disable-hover * { pointer-events: none !important; } /* Remove all animations and transitions for people who prefer not to see them. ----------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }