:root { --text-size-600: clamp(1.5rem, 1.9936708861rem + -0.4746835443vw, 1.875rem); --text-size-500: clamp(0.9375rem, 0.897943038rem + 0.1582278481vw, 1.0625rem); --text-size-400: clamp(0.8125rem, 0.7848101266rem + 0.1107594937vw, 0.9rem); --text-size-btn: clamp(0.875rem, 0.835443038rem + 0.1582278481vw, 1rem); --text-size-btn-small: clamp(0.6875rem, 0.6518987342rem + 0.1424050633vw, 0.8rem); --heading-size-300: clamp(1.1875rem, 1.0886075949rem + 0.3955696203vw, 1.5rem); --heading-size-400: clamp(1.5rem, 1.3417721519rem + 0.6329113924vw, 2rem); --heading-size-500: clamp(2rem, 1.5253164557rem + 1.8987341772vw, 3.5rem); --heading-size-600: clamp(2.5rem, 1.3924050633rem + 4.4303797468vw, 6rem); --font-family-base: "TT Commons Pro", sans-serif; --font-family-italic: "Adonis Italic", sans-serif; --color-brand-white: #FFFFFF; --color-grey-600: #666666; --color-grey-900: #141414; --color-brand-black: #000000; --color-opacity-light-10: #FFFFFF19; --color-opacity-dark-5: #0000000C; --color-opacity-dark-10: #00000019; --color-brand-lightergrey: #ECECE9; --color-brand-lightgrey: #D9DAD3; --color-brand-sand: #B8B298; --color-ui-error: #BD1B0F; --color-ui-success: #219653; --color-text-primary: var(--color-brand-black); --color-text-invert: var(--color-brand-white); --color-text-error: var(--color-ui-error); --color-text-success: var(--color-ui-success); --color-text-cover: var(--color-brand-white); --color-surface-primary: var(--color-brand-white); --color-surface-secondary: var(--color-brand-lightergrey); --color-surface-brand-primary: var(--color-brand-lightgrey); --color-surface-brand-secondary: var(--color-brand-sand); --color-surface-invert-primary: var(--color-brand-black); --color-surface-invert-secondary: var(--color-grey-900); --color-surface-opacity-dark: var(--color-opacity-dark-5); --color-surface-opacity-light: var(--color-opacity-light-10); --color-border-primary: var(--color-brand-lightgrey); --color-border-secondary: var(--color-brand-black); --color-border-brand: var(--color-brand-lightgrey); --color-border-error: var(--color-ui-error); --color-border-invert-primary: var(--color-opacity-light-10); --color-border-invert-secondary: var(--color-brand-white); --color-link: var(--color-text-primary); --color-form-text: var(--color-text-primary); --color-form-border: var(--color-border-primary); --color-form-background: rgba(255, 255, 255, 0); --color-form-focus: var(--color-border-secondary); --color-form-error: var(--color-text-error); /* @link https://utopia.fyi/space/calculator/?c=375,16,1.2,2560,38.33,1.25,5,2,1920&s=0.75|0.625|0.5|0.375|0.25|0.125,1.5|2|3|4|5|7.5,s-3xl|s-2xl|4xl-2xl|3xs-s&g=s,l,xl,12 */ --space-6xs: clamp(0.125rem, 0.0928rem + 0.1373vw, 0.3125rem); --space-5xs: clamp(0.25rem, 0.1856rem + 0.2746vw, 0.625rem); --space-4xs: clamp(0.375rem, 0.2892rem + 0.3661vw, 0.875rem); --space-3xs: clamp(0.5rem, 0.382rem + 0.5034vw, 1.1875rem); --space-2xs: clamp(0.625rem, 0.4748rem + 0.6407vw, 1.5rem); --space-xs: clamp(0.75rem, 0.5676rem + 0.778vw, 1.8125rem); --space-s: clamp(1rem, 0.764rem + 1.0069vw, 2.375rem); --space-m: clamp(1.5rem, 1.146rem + 1.5103vw, 3.5625rem); --space-l: clamp(2rem, 1.5173rem + 2.0595vw, 4.8125rem); --space-xl: clamp(3rem, 2.2813rem + 3.0664vw, 7.1875rem); --space-2xl: clamp(4rem, 3.0453rem + 4.0732vw, 9.5625rem); --space-3xl: clamp(5rem, 3.7986rem + 5.1259vw, 12rem); --space-4xl: clamp(7.5rem, 5.7087rem + 7.643vw, 17.9375rem); /* One-up pairs */ --space-6xs-5xs: clamp(0.125rem, 0.0392rem + 0.3661vw, 0.625rem); --space-5xs-4xs: clamp(0.25rem, 0.1427rem + 0.4577vw, 0.875rem); --space-4xs-3xs: clamp(0.375rem, 0.2356rem + 0.595vw, 1.1875rem); --space-3xs-2xs: clamp(0.5rem, 0.3284rem + 0.7323vw, 1.5rem); --space-2xs-xs: clamp(0.625rem, 0.4212rem + 0.8696vw, 1.8125rem); --space-xs-s: clamp(0.75rem, 0.4711rem + 1.1899vw, 2.375rem); --space-s-m: clamp(1rem, 0.5602rem + 1.8764vw, 3.5625rem); --space-m-l: clamp(1.5rem, 0.9315rem + 2.4256vw, 4.8125rem); --space-l-xl: clamp(2rem, 1.1097rem + 3.7986vw, 7.1875rem); --space-xl-2xl: clamp(3rem, 1.8737rem + 4.8055vw, 9.5625rem); --space-2xl-3xl: clamp(4rem, 2.627rem + 5.8581vw, 12rem); --space-3xl-4xl: clamp(5rem, 2.7796rem + 9.4737vw, 17.9375rem); /* Custom pairs */ --space-s-3xl: clamp(1rem, -0.8879rem + 8.0549vw, 12rem); --space-s-2xl: clamp(1rem, -0.4695rem + 6.27vw, 9.5625rem); --space-4xl-2xl: clamp(7.5rem, 7.146rem + 1.5103vw, 9.5625rem); --space-3xs-s: clamp(0.5rem, 0.1782rem + 1.373vw, 2.375rem); --side-padding: var(--space-s-2xl); --side-padding-small: var(--space-s); --space-default: var(--space-3xl-4xl); --gutter: var(--space-s); --text-margin: 1.3em; --max-width-container: 104rem; --max-width-10-col: calc(var(--max-width-container) * 0.83076923); --max-width-5-col: calc(var(--max-width-container) * 0.405649); --max-width-4-col: calc(var(--max-width-container) * 0.31041667); --max-width-2-col: calc(var(--max-width-container) * 0.1661538); --width-oversize: clamp(min(50rem, 100%), 100%, 116rem); --width-wide: clamp(min(50rem, 100%), 100%, var(--max-width-container)); --width-medium: clamp(min(40rem, 100%), 83.076923%, var(--max-width-10-col)); --width-regular: clamp(min(40rem, 100%), 40.5649%, var(--max-width-5-col)); --width-regular-small: clamp(min(30rem, 100%), 31.041667%, var(--max-width-4-col)); --width-small: clamp(min(20rem, 100%), 16.61538%, var(--max-width-2-col)); --header-height: 3.5rem; } @media only screen and (min-width: 70rem) { :root { --header-height: 4.1875rem; } } /* Example how to add a font-face. Other than woff2 and woff are not necessary. @font-face { font-display: swap; font-family: font-name; font-style: normal; font-weight: 400; src: url(../fonts/font-name.woff2) format("woff2"), url(../fonts/font-name.woff) format("woff"), // Modern Browsers } */ /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 60%; font-weight: 400; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.6em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } :focus { outline: thin dotted; } :focus:not(:focus-visible) { outline: none; } html, body { height: 100%; } html { box-sizing: border-box; background: var(--color-surface-primary); scroll-behavior: smooth; scroll-padding-top: var(--header-height); } @media (max-width: 70rem) { html.main-menu-open { overflow: hidden; } } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; padding: 0; } .site-wrapper { display: flex; flex-direction: column; height: inherit; } .site-wrapper__main-content { flex: 1 0 auto; } .site-wrapper__footer { flex-shrink: 0; } img { height: auto; max-width: 100%; } .full-width { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .absolute-link::after { content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .protected-mail:after { content: attr(data-first) "@" attr(data-last); } .has-kicker p:first-child { text-transform: uppercase; } .has-kicker p:first-child + h2 { margin-top: var(--space-3xs); } .overflow-hidden { overflow: hidden; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-y: scroll; font-size: 16px; } body { font-size: var(--text-size-500); line-height: 1.4; font-family: var(--font-family-base); font-weight: 450; color: var(--color-text-primary); } body i, body em { font-family: var(--font-family-italic); font-weight: 400; } a { color: var(--color-link); text-decoration: underline; } a:hover { text-decoration: none; } a:focus { outline: 0; } a:focus-visible { outline: 0.0625rem dashed currentColor; outline-offset: 0.0625rem; text-decoration: none; } b, strong { font-weight: 700; } ul, ol, table, div[data-hs-responsive-table=true], p { margin: var(--text-margin) 0 0; } ul:first-child, ol:first-child, table:first-child, div[data-hs-responsive-table=true]:first-child, p:first-child { margin-top: 0; } h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { margin: 2rem 0 0 0; } h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, .h1:first-child, .h2:first-child, .h3:first-child, .h4:first-child, .h5:first-child { margin-top: 0; } h1 a, h2 a, h3 a, h4 a, h5 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a { text-decoration: none; } h1, .h1 { font-size: var(--heading-size-600); line-height: 0.9; font-weight: 300; } @media (max-width: 48rem) { h1, .h1 { line-height: 1; } } h2, .h2 { font-size: var(--heading-size-500); line-height: 1; font-weight: 300; } h2 + p, .h2 + p { margin-top: 1em; } h3, .h3 { font-size: var(--heading-size-400); line-height: 1.2; font-weight: 300; } h4, .h4 { font-size: var(--heading-size-300); line-height: 1.3; font-weight: 300; } blockquote { margin: 0; font-family: var(--font-family-italic); font-size: var(--heading-size-400); line-height: 1.2; font-weight: 300; font-weight: 400; } * + blockquote, blockquote + * { margin-top: var(--space-l); } .btn, .btn.hsbtn, .hs-button, button, input[type=button], input[type=reset], input[type=submit] { position: relative; display: inline-block; cursor: pointer; padding: 1.25em 2em; font-size: var(--text-size-btn); line-height: 1; font-weight: 450; text-transform: uppercase; text-decoration: none; text-align: center; color: var(--color-text-invert); background-color: var(--color-surface-invert-primary); border-radius: 0; border: 0.0625rem solid var(--color-surface-invert-primary); transition: background-color 300ms cubic-bezier(0.62, 0, 0.38, 1), color 300ms cubic-bezier(0.62, 0, 0.38, 1); } .btn::before, .btn.hsbtn::before, .hs-button::before, button::before, input[type=button]::before, input[type=reset]::before, input[type=submit]::before { content: ""; position: absolute; top: 50%; left: calc(0.5625em + 0.375rem); display: block; width: 0.375rem; height: 0.375rem; transform: translateY(-50%) scale(0); background: currentColor; transition: transform 300ms cubic-bezier(0.62, 0, 0.38, 1); } .btn:hover, .btn:focus-visible, .btn.hsbtn:hover, .btn.hsbtn:focus-visible, .hs-button:hover, .hs-button:focus-visible, button:hover, button:focus-visible, input[type=button]:hover, input[type=button]:focus-visible, input[type=reset]:hover, input[type=reset]:focus-visible, input[type=submit]:hover, input[type=submit]:focus-visible { color: var(--color-text-invert); text-decoration: none; background-color: var(--color-surface-invert-primary); } .btn:hover::before, .btn:focus-visible::before, .btn.hsbtn:hover::before, .btn.hsbtn:focus-visible::before, .hs-button:hover::before, .hs-button:focus-visible::before, button:hover::before, button:focus-visible::before, input[type=button]:hover::before, input[type=button]:focus-visible::before, input[type=reset]:hover::before, input[type=reset]:focus-visible::before, input[type=submit]:hover::before, input[type=submit]:focus-visible::before { transform: translateY(-50%) scale(1); } .btn:focus, .btn.hsbtn:focus, .hs-button:focus, button:focus, input[type=button]:focus, input[type=reset]:focus, input[type=submit]:focus { outline: 0; } .btn:focus-visible, .btn.hsbtn:focus-visible, .hs-button:focus-visible, button:focus-visible, input[type=button]:focus-visible, input[type=reset]:focus-visible, input[type=submit]:focus-visible { outline-offset: 0.0625rem; outline: 0.125rem solid var(--color-text-primary); } .btn--secondary, .btn--secondary.hsbtn-secondary { color: var(--color-text-primary); border-color: var(--color-border-secondary); background-color: rgba(255, 255, 255, 0); } .btn--small, .btn--secondary.hsbtn-small { display: block; padding: var(--space-6xs) 0 0 1.625em; font-size: var(--text-size-btn-small); letter-spacing: 0.05em; line-height: 1; font-weight: 450; text-transform: uppercase; text-align: right; color: var(--color-text-primary); background-color: rgba(255, 255, 255, 0); border-color: var(--color-text-primary); border-left: 0; border-right: 0; border-bottom: 0; } .btn--small::before, .btn--secondary.hsbtn-small::before { left: 0; width: 0.625em; height: 0.625em; } .btn--small:hover, .btn--small:focus-visible, .btn--secondary.hsbtn-small:hover, .btn--secondary.hsbtn-small:focus-visible { color: var(--color-text-primary); background-color: rgba(255, 255, 255, 0); } .btn--small:focus-visible, .btn--secondary.hsbtn-small:focus-visible { border-top-color: rgba(0, 0, 0, 0); } .reset-button { min-width: 1px; padding: 0; border-radius: 0; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; border: 0; background: rgba(255, 255, 255, 0); } .reset-button::before { all: unset; } input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], input[type=number], input[type=tel], input[type=range], input[type=date], input[type=month], input[type=week], input[type=time], input[type=datetime], input[type=datetime-local], input[type=color], textarea, select { width: 100% !important; padding: 0.29em 0 0.76em; font-size: var(--text-size-500); line-height: 1.4; font-family: var(--font-family-base); font-weight: 450; color: var(--color-form-text); border-radius: 0; border: 0; border-bottom: 0.0625rem solid var(--color-form-border); background: var(--color-form-background); } input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=password]:focus, input[type=search]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=range]:focus, input[type=date]:focus, input[type=month]:focus, input[type=week]:focus, input[type=time]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=color]:focus, textarea:focus, select:focus { outline: 0; } input[type=text]:focus-visible, input[type=email]:focus-visible, input[type=url]:focus-visible, input[type=password]:focus-visible, input[type=search]:focus-visible, input[type=number]:focus-visible, input[type=tel]:focus-visible, input[type=range]:focus-visible, input[type=date]:focus-visible, input[type=month]:focus-visible, input[type=week]:focus-visible, input[type=time]:focus-visible, input[type=datetime]:focus-visible, input[type=datetime-local]:focus-visible, input[type=color]:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--color-form-focus); outline: 0; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-repeat: no-repeat; background-position: right var(--space-xs) center; /* stylelint-disable-next-line */ background-image: url('data:image/svg+xml,'); } textarea { resize: vertical; min-height: 5rem; } input[type=checkbox], input[type=radio] { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; content: ""; flex: 0 0 calc(1em + 0.125rem); width: calc(1em + 0.125rem) !important; height: calc(1em + 0.125rem) !important; margin: 0 0 0 0.0625rem; padding: 0; background: var(--color-form-background); border: 0; border-radius: 0.125rem; box-shadow: 0 0 0 0.0625rem var(--color-form-focus); transition: box-shadow 150ms ease; } input[type=checkbox]:checked, input[type=radio]:checked { box-shadow: 0 0 0 0.0625rem var(--color-form-focus); } input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { box-shadow: 0 0 0 0.0625rem var(--color-form-boder); outline: none; } input[type=checkbox]:checked { background: var(--color-form-background) no-repeat center; /* stylelint-disable-next-line */ background-image: url('data:image/svg+xml,'); background-size: 0.59em; } input[type=radio] { border-radius: 50%; } input[type=radio]:checked { background: var(--color-form-text); border: 0.1875rem solid var(--color-brand-white); } .hs-fieldtype-checkbox .input, .hs-fieldtype-booleancheckbox .input { margin-top: 0.3rem; } .hs-fieldtype-checkbox span:not(.hs-form-required)::after, .hs-fieldtype-booleancheckbox span:not(.hs-form-required)::after { border-radius: 0; } .hs-form, .systems-page .form-container { font-size: var(--text-size-400); line-height: 1.4; font-weight: 450; } .hs-form .hs-form-field, .systems-page .form-container .hs-form-field { margin: 0 0 var(--space-m) 0; } .hs-form .hs-form-field label, .systems-page .form-container .hs-form-field label { margin-bottom: var(--space-5xs); display: block; font-size: var(--text-size-500); line-height: 1.4; font-family: var(--font-family-base); font-weight: 450; } .hs-form .hs-form-field textarea, .systems-page .form-container .hs-form-field textarea { vertical-align: top; } .hs-form .hs-form-field .input ul.inputs-list, .systems-page .form-container .hs-form-field .input ul.inputs-list { margin: 0; padding: 0; list-style: none; margin: var(--space-xs) 0 0.6rem 0; } .hs-form .hs-form-field .input ul.inputs-list li, .systems-page .form-container .hs-form-field .input ul.inputs-list li { margin-right: 2rem; margin-bottom: 0.5rem; } .hs-form .hs-form-field .input ul.inputs-list li label, .systems-page .form-container .hs-form-field .input ul.inputs-list li label { cursor: pointer; display: inline-flex; align-items: center; margin: 0; gap: var(--space-3xs); font-size: var(--text-size-500); line-height: 1.4; font-family: var(--font-family-base); font-weight: 450; } .hs-form .hs-form-field .input ul.inputs-list span, .systems-page .form-container .hs-form-field .input ul.inputs-list span { font-size: 1em; } .hs-form .legal-consent-container, .systems-page .form-container .legal-consent-container { margin-bottom: var(--space-m); } .hs-form .hs-error-msgs, .systems-page .form-container .hs-error-msgs { margin: 0; padding: 0; list-style: none; margin: var(--space-3xs) 0 2rem 0; } .hs-form .hs-error-msgs label, .systems-page .form-container .hs-error-msgs label { color: var(--color-form-error); } .hs-form .legal-consent-container .hs-form-booleancheckbox-display > span, .systems-page .form-container .legal-consent-container .hs-form-booleancheckbox-display > span { margin: 0; } body .body-wrapper .hs-form fieldset, body .body-wrapper .systems-page .form-container fieldset, .systems-page body .body-wrapper .form-container fieldset { width: 100%; max-width: 100%; } body .body-wrapper .hs-form fieldset .input, body .body-wrapper .systems-page .form-container fieldset .input, .systems-page body .body-wrapper .form-container fieldset .input { margin-right: 0; } body .body-wrapper .hs-form fieldset .hs-form-field, body .body-wrapper .systems-page .form-container fieldset .hs-form-field, .systems-page body .body-wrapper .form-container fieldset .hs-form-field { width: 100%; } @media (min-width: 37.501rem) { body .body-wrapper .hs-form fieldset.form-columns-2 .hs-form-field, body .body-wrapper .systems-page .form-container fieldset.form-columns-2 .hs-form-field, .systems-page body .body-wrapper .form-container fieldset.form-columns-2 .hs-form-field { width: calc(50% - 0.75rem); margin-right: 1.5rem; } body .body-wrapper .hs-form fieldset.form-columns-2 .hs-form-field:last-child, body .body-wrapper .systems-page .form-container fieldset.form-columns-2 .hs-form-field:last-child, .systems-page body .body-wrapper .form-container fieldset.form-columns-2 .hs-form-field:last-child { margin-right: 0; } body .body-wrapper .hs-form fieldset.form-columns-3 .hs-form-field, body .body-wrapper .systems-page .form-container fieldset.form-columns-3 .hs-form-field, .systems-page body .body-wrapper .form-container fieldset.form-columns-3 .hs-form-field { width: calc(33.3% - 0.35rem); margin-right: 0.5rem; } body .body-wrapper .hs-form fieldset.form-columns-3 .hs-form-field:last-child, body .body-wrapper .systems-page .form-container fieldset.form-columns-3 .hs-form-field:last-child, .systems-page body .body-wrapper .form-container fieldset.form-columns-3 .hs-form-field:last-child { margin-right: 0; } } table { border-collapse: collapse; width: 100%; border: 0 !important; } td, th { border: 0; border-top: 1px solid var(--color-border-primary); padding: var(--space-3xs) 0 !important; } td + td, td + th, th + td, th + th { padding-left: var(--space-3xs) !important; } td img { display: block; margin: auto; } .content-wrapper, .container, .dnd-section > .row-fluid { width: var(--width-wide); margin-left: auto; margin-right: auto; } .width-oversize { width: var(--width-oversize); } .width-wide { width: var(--width-wide); } .width-medium { width: var(--width-medium); } .width-regular { width: var(--width-regular); } .width-regular-small { width: var(--width-regular-small); } .width-small { width: var(--width-small); } .mx-auto { margin-left: auto; margin-right: auto; } .content-row, .dnd-section { margin-top: var(--space-default); margin-bottom: var(--space-default); } .dnd-section .dnd-row:not(:first-child) { margin-top: var(--gutter); } .dnd-section .dnd-row:not(:first-child) .reset-multiple-row-top { margin-top: calc(var(--gutter) * -1); } @media (max-width: 48rem) { .dnd-section .dnd-column:not(:first-child) { margin-top: var(--gutter); } } .dnd-section:first-child .dnd-row:first-child .reset-multiple-row-top { border-top: 0; margin-top: calc(var(--space-default) * -1); } .dnd-section:last-child .dnd-row:last-child .reset-multiple-row-top { border-bottom: 0; margin-bottom: calc(var(--space-default) * -1); } * + .hs-web-interactive-inline { margin-top: var(--space-l); } p:first-child:empty + .hs-web-interactive-inline { margin-top: 0; } .hs-web-interactive-inline + .hs-web-interactive-inline, .hs-web-interactive-inline + p:empty + .hs-web-interactive-inline, .hs-web-interactive-inline + p:empty + p:empty + .hs-web-interactive-inline { margin-top: var(--space-s); } .hs-web-interactive-inline + p:empty { display: none; } .dnd-section .dnd-row:not(:first-child) { margin-top: var(--gutter); } @media (max-width: 48rem) { .dnd-section .dnd-column:not(:first-child) { margin-top: var(--gutter); } } div[class*=background-color].dnd-section { padding-top: var(--space-default); padding-bottom: var(--space-default); } div[class*=background-color].dnd-section:first-child { margin-top: 0; } div[class*=background-color].dnd-section:last-child { margin-bottom: 0; } div[class*=background-color].dnd-section + div[class*=background-color].dnd-section { margin-top: calc(var(--space-default) * -1); } div[class*=background-color].dnd-column { padding: var(--gutter); } @media (min-width: 48.001rem) { div[class*=background-color].dnd-column { padding: var(--gutter); } } .side-padding { padding-left: var(--side-padding); padding-right: var(--side-padding); } .side-padding--small { padding-left: var(--side-padding-small); padding-right: var(--side-padding-small); } .has-background { padding-top: var(--space-default); padding-bottom: var(--space-default); } /* Responsive Grid */ @media (min-width: 48.001rem) { .row-fluid-wrapper > .row-fluid { display: flex; gap: var(--gutter); } } .row-fluid { width: 100%; *zoom: 1; } @media (min-width: 48.001rem) { .row-fluid [class*=span] { display: block; width: 100%; min-height: 1px; box-sizing: border-box; } .row-fluid .span12 { width: 100%; } .row-fluid .span11 { width: calc(91.6666666667% - var(--gutter) * (12 / 11 - 1) / (12 / 11)); } .row-fluid .span10 { width: calc(83.3333333333% - var(--gutter) * (12 / 10 - 1) / (12 / 10)); } .row-fluid .span9 { width: calc(75% - var(--gutter) * (12 / 9 - 1) / (12 / 9)); } .row-fluid .span8 { width: calc(66.6666666667% - var(--gutter) * (12 / 8 - 1) / (12 / 8)); } .row-fluid .span7 { width: calc(58.3333333333% - var(--gutter) * (12 / 7 - 1) / (12 / 7)); } .row-fluid .span6 { width: calc(50% - var(--gutter) * (12 / 6 - 1) / (12 / 6)); } .row-fluid .span5 { width: calc(41.6666666667% - var(--gutter) * (12 / 5 - 1) / (12 / 5)); } .row-fluid .span4 { width: calc(33.3333333333% - var(--gutter) * (12 / 4 - 1) / (12 / 4)); } .row-fluid .span3 { width: calc(25% - var(--gutter) * (12 / 3 - 1) / (12 / 3)); } .row-fluid .span2 { width: calc(16.6666666667% - var(--gutter) * (12 / 2 - 1) / (12 / 2)); } .row-fluid .span1 { width: calc(8.3333333333% - var(--gutter) * (12 / 1 - 1) / (12 / 1)); } } .container-fluid { *zoom: 1; } .container-fluid:before, .container-fluid:after { display: table; content: ""; } .container-fluid:after { clear: both; } /* Clearfix */ .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both; } /* Visibilty Classes */ .hide { display: none; } .show { display: block; } .invisible { visibility: hidden; } .hidden { display: none; visibility: hidden; } /* Responsive Visibilty Classes */ .visible-phone { display: none !important; } .visible-tablet { display: none !important; } .hidden-desktop { display: none !important; } @media (max-width: 48rem) { .visible-phone { display: inherit !important; } .hidden-phone { display: none !important; } .hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important; } } @media (min-width: 48rem) and (max-width: 65rem) { .visible-tablet { display: inherit !important; } .hidden-tablet { display: none !important; } .hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important; } } .error-page { margin-top: var(--space-default); margin-bottom: var(--space-default); } .error-page img { vertical-align: top; } .error-page__paragraph { margin: 2em 0 2.1em; } .error-page__paragraph:last-child { margin-bottom: 0; } .error-page { text-align: center; } .systems-page { margin-top: var(--space-default); margin-bottom: var(--space-default); } .systems-page .form-container { max-width: none; } .systems-page.container { width: var(--width-medium); } .systems-page .subscribe-options { margin-bottom: var(--text-margin); } .systems-page .item, .systems-page .subscribe-options { margin-top: var(--text-margin); } .systems-page .item p, .systems-page .subscribe-options p { margin: 0; } .systems-page .backup-unsubscribe #email-prefs-form { margin: var(--text-margin) auto; } .systems-page .backup-unsubscribe #email-prefs-form .email-edit.hs-input { margin: 1rem 0; } .span12.dnd-column > div > div > .span12.dnd-module > .hs_cos_wrapper_type_module.widget-type-rich_text, .span12.dnd-column > div > div > .span12.dnd-module > .hs_cos_wrapper_type_module.widget-type-header, .span12.dnd-column > div > div > .span12.dnd-module > .hs_cos_wrapper_type_module > .normal-text-width { margin: auto; width: var(--width-regular); } .span12.dnd-column > div > div > .span12.dnd-module > .hs_cos_wrapper_type_module > hr { width: 100% !important; border-color: var(--color-border-primary) !important; } /** * Containers */ #CookieBanner { position: fixed; z-index: 2147483645; min-height: 100vh; min-width: 100vw; left: 0; right: 0; top: 0; bottom: 0; margin: 0 auto; pointer-events: none; display: none; } #CookieBanner.is-visible-cookie-banner { display: flex; align-items: center; justify-content: center; } #CookieBanner, #CookieBanner * { box-sizing: border-box; text-underline-offset: 0.125em; outline-offset: 3px; } #CookieBannerOverlay { background: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; position: fixed; left: 0; right: 0; top: 0; bottom: 0; pointer-events: auto; z-index: 10; } .is-visible-cookie-banner #CookieBannerOverlay { animation: cookieBannerFadeIn 0.25s ease-in-out; animation-fill-mode: forwards; } .is-closing-cookie-banner #CookieBannerOverlay { animation: cookieBannerFadeOut 0.25s ease-in-out; animation-fill-mode: forwards; pointer-events: none; } @media (prefers-reduced-motion: reduce) { #CookieBanner * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } #CookieBannerNotice { padding: var(--space-l, 4rem) var(--space-l, 4rem) 4rem var(--space-l, 4rem); overflow: auto; max-height: 100vh; max-height: calc(100vh - var(--side-padding)); width: 100%; width: calc(100% - var(--side-padding)); max-width: 55rem; background: var(--color-surface-primary, #FFF); color: var(--color-text-primary, #000); margin: 0 auto; z-index: 500; pointer-events: auto; } @media (min-width: 48.001rem) { #CookieBannerNotice { padding: var(--space-s, 2rem); } } .is-visible-cookie-banner #CookieBannerNotice { animation: cookieBannerSlideIn 0.25s ease-in-out; animation-fill-mode: forwards; } .is-closing-cookie-banner #CookieBannerNotice { animation: cookieBannerSlideOut 0.25s ease-in-out; animation-fill-mode: forwards; pointer-events: none; } @media (min-width: 48.001rem) { #CookieBannerNotice { padding: 48px; max-width: 49rem; } } #CookieBanner .cookiebanner__logo { background: url(https://145218866.fs1.hubspotusercontent-eu1.net/hubfs/145218866/taigaconcept-2025-theme-assets/Example%20images/taiga-logo-cookiebot.svg) no-repeat 0%; background-size: contain; height: 2rem; width: 100%; margin-bottom: var(--space-s, 2rem); } /** * Utils */ @keyframes cookieBannerFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes cookieBannerFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes cookieBannerSlideIn { 0% { opacity: 0; transform: translateY(96px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes cookieBannerSlideOut { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(96px); } } #CookieBanner button > * { pointer-events: none; } #CookieBanner ul, #CookieBanner li { list-style: none; margin: 0; padding: 0; text-indent: 0; } #CookieBanner .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } /** * Content */ #CookieBannerTitle { font-size: var(--heading-size-400); line-height: 1.2; font-weight: 300; } #CookieBanner .cookiebanner__main__inner { max-width: 1080px; margin: 0 auto; } /** * Buttons */ #CookieBanner .cookiebanner__buttons { margin-top: var(--space-l, 4rem); } #CookieBanner .cookiebanner__buttons ul { align-items: center; display: flex; gap: var(--space-xs); } @media (max-width: 48rem) { #CookieBanner .cookiebanner__buttons ul { flex-direction: column; } #CookieBanner .cookiebanner__buttons ul li, #CookieBanner .cookiebanner__buttons ul button { width: 100%; } } #CookieBanner .cookiebanner__buttons li:last-of-type { width: auto; margin-bottom: 0; } #CookieBanner .cookiebanner__buttons__accept { --color-btn-background: var(--color-bright-yellow); --color-btn-border: var(--color-bright-yellow); --color-btn-text: var(--color-black); } #CookieBanner .cookiebanner__buttons__accept:hover, #CookieBanner .cookiebanner__buttons__accept:focus { --color-btn-background: var(--color-light-blue); --color-btn-border: var(--color-light-blue); --color-btn-text: var(--color-black); } #CookieBanner .cookiebanner__buttons__details { min-width: 1px; padding: 0; border-radius: 0; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; border: 0; background: rgba(255, 255, 255, 0); color: var(--color-text-primary, #000); } #CookieBanner .cookiebanner__buttons__details::before { all: unset; } #CookieBanner .cookiebanner__buttons__details:hover, #CookieBanner .cookiebanner__buttons__details:focus, #CookieBanner .cookiebanner__buttons__details:active { text-decoration: underline; } #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection { width: 100%; } /** * Details */ #CookieBanner .cookiebanner__details { margin-top: 24px; display: none; } #CookieBanner.is-details-open .cookiebanner__details { display: block; } #CookieBanner .cookiebanner__details__inner { max-width: 1080px; margin: 0 auto; } /** * Preferences */ #CookieBanner .cookiebanner__details__preferences { display: flex; flex-direction: column; margin-top: 16px; } @media (min-width: 48.001rem) { #CookieBanner .cookiebanner__details__preferences { margin-top: 24px; } } #CookieBanner .cookiebanner__details__preferences__options { display: flex; flex-wrap: wrap; justify-content: center; padding: 0; margin: 0; border: 0; min-width: 0; } @media (min-width: 48.001rem) { #CookieBanner .cookiebanner__preference__heading { display: flex; align-items: center; } } #CookieBanner .cookiebanner__preference { border-radius: var(--radius-brand, 0rem); background: var(--color-surface-secondary, #ECECE9); padding: var(--space-2xs); width: 100%; margin-bottom: var(--space-3xs); } #CookieBanner .cookiebanner__preference::last-of-type { margin-bottom: 0; } /* Hide the input */ #CookieBanner .cookiebanner__preference input { position: absolute; opacity: 0; width: 0; height: 0; overflow: hidden; } #CookieBanner .cookiebanner__preference__label { display: flex; align-items: center; flex-grow: 1; flex-direction: column; gap: var(--space-xs); } @media (min-width: 48.001rem) { #CookieBanner .cookiebanner__preference__label { flex-direction: row; } } #CookieBanner .cookiebanner__preference input:focus + .cookiebanner__preference__label, #CookieBanner .cookiebanner__preference__label:hover { text-decoration: underline; cursor: pointer; } #CookieBanner .cookiebanner__preference__ui { flex-shrink: 0; display: flex; align-items: center; width: 6rem; height: 2.5rem; background: var(--color-grey-300, #B3B3B3); border-radius: 6.25rem; transition: all 0.2s ease-in-out; cursor: pointer; } #CookieBanner .cookiebanner__preference__text { display: block; } #CookieBanner .cookiebanner__preference__title { display: block; margin: 0; text-transform: uppercase; } #CookieBanner .cookiebanner__preference__description { margin-top: 0; margin-bottom: 0; } #CookieBanner .cookiebanner__preference__toggle { min-width: 1px; padding: 0; border-radius: 0; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; border: 0; background: rgba(255, 255, 255, 0); color: var(--color-text-secondary, #666); flex-shrink: 0; margin-left: var(--space-xs); text-transform: unset; } #CookieBanner .cookiebanner__preference__toggle::before { all: unset; } @media (max-width: 48rem) { #CookieBanner .cookiebanner__preference__toggle { width: 100%; margin-left: 0; } } #CookieBanner .cookiebanner__preference__toggle:hover, #CookieBanner .cookiebanner__preference__toggle:focus, #CookieBanner .cookiebanner__preference__toggle:active { text-decoration: underline; } #CookieBanner .cookiebanner__preference__more { display: none; margin-top: var(--space-xs); } #CookieBanner .cookiebanner__preference__more__description { margin: 0; } #CookieBanner .cookiebanner__preference__more__list { margin-top: var(--space-xs); width: 100%; overflow: auto; } #CookieBanner .cookiebanner__preference__more__list table { width: 100%; } #CookieBanner .cookiebanner__preference__more__list tbody .CybotCookiebotDialogDetailBodyContentCookieTypeTableEmpty { border-top: 0; } #CookieBanner .cookiebanner__preference__more__list a { text-decoration: underline; color: inherit; } #CookieBanner .cookiebanner__preference__more__list th, #CookieBanner .cookiebanner__preference__more__list td { vertical-align: baseline; min-width: 11rem; text-align: left; padding: var(--space-3xs); background: transparent; word-break: break-word; } #CookieBanner .cookiebanner__preference__more.is-open { display: block; } #CookieBanner .cookiebanner__preference__ui__handle { display: flex; margin-left: 0.5rem; justify-content: center; align-items: center; width: 1.5rem; height: 1.5rem; background: var(--color-surface-primary, #FFF); border-radius: 65%; transition: all 0.2s ease-in-out; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); } #CookieBanner .cookiebanner__preference input:checked + label .cookiebanner__preference__ui { background: var(--color-text-brand, #000); } #CookieBanner .cookiebanner__preference input:checked + label .cookiebanner__preference__ui__handle { margin-left: 65%; background: var(--color-surface-primary, #FFF); } /** * Updated */ #CookieBanner .cookiebanner__details__updated { margin-top: 24px; text-align: center; } #CookieBanner .cookiebanner__details__updated p { font-size: 15px; } .site-header { position: fixed; z-index: 300; left: 0; top: 0; width: 100%; border-bottom: 0.0625rem solid var(--color-border-primary); } .site-header--theme-light.headroom--top:not(.has-nav-open) { border-bottom: 0; } .site-header--theme-light.headroom--top:not(.has-nav-open) .main-menu__ul--top, .site-header--theme-light.headroom--top:not(.has-nav-open) .site-header__logo { --color-text-primary: var(--color-brand-white); color: var(--color-text-primary); } .site-header--theme-light.headroom--top:not(.has-nav-open) .nav-toggle::before, .site-header--theme-light.headroom--top:not(.has-nav-open) .nav-toggle::after { border-color: var(--color-brand-white); } .site-header.headroom--not-top { position: fixed; background-color: var(--color-surface-primary); } @media (min-width: 70.001rem) { html:not(.is-sub-nav-opened) .site-header.headroom--not-top.headroom--unpinned { transform: translateY(-100%); } } @media (max-width: 70rem) { .site-header.headroom--not-top { transform: translateY(-100%); } } .site-header.headroom--pinned.headroom--not-top { transform: translateY(0); } .site-header.headroom--pinned { transition: background-color 250ms cubic-bezier(0.4, 0, 1, 1), transform 250ms cubic-bezier(0.4, 0, 1, 1); } .site-header a, .site-header .mimic-link { text-decoration: none; font-weight: inherit; color: inherit; } .site-header__container { display: flex; justify-content: space-between; align-items: center; } .site-header__logo svg { height: 1.5rem; width: auto; vertical-align: top; } @media (min-width: 70.001rem) { .site-header__navigation { width: 70%; } } @media (min-width: 70.001rem) { .site-header__container { height: var(--header-height); } } @media (max-width: 70rem) { .site-header { padding: 0; overflow: hidden; } .site-header__logo svg { height: 1.25rem; } .main-menu-open .site-header { background: var(--color-surface-primary, #FFF); height: 100%; } .site-header__container { flex-direction: column; align-items: flex-start; justify-content: center; } .site-header__heading { align-items: center; display: flex; height: var(--header-height); justify-content: space-between; padding: var(--space-xs) var(--space-s); width: 100%; } .site-header__navigation { border-top: 1px solid var(--color-border-primary, #D9DAD3); display: none; position: relative; width: 100%; } .main-menu-open .site-header__navigation { display: block; flex: 0 0 100%; } .main-menu-open .site-header__navigation .main-menu { transform: translateY(0); opacity: 1; } .site-header__navigation .main-menu { transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform: translateY(-0.75rem); opacity: 0; } } .nav-toggle { min-width: 1px; padding: 0; border-radius: 0; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; border: 0; background: rgba(255, 255, 255, 0); display: none; font-size: 0; } .nav-toggle::before { all: unset; } .nav-toggle:hover, .nav-toggle:focus { background: transparent; outline: 0; } @media (max-width: 70rem) { .nav-toggle { position: relative; display: block; width: 1.5rem; height: 0.5rem; transition: none; } .nav-toggle:before, .nav-toggle:after { content: ""; display: block; width: 100%; height: 0.125rem; border-top: 0.125rem solid var(--color-border-secondary); transition: all 300ms; } .main-menu-open .nav-toggle { border-top: 0; } .main-menu-open .nav-toggle:before, .main-menu-open .nav-toggle:after { position: absolute; top: 0; left: 0; } .main-menu-open .nav-toggle:before { transform: rotate(45deg); } .main-menu-open .nav-toggle:after { transform: rotate(-45deg); } } .site-footer { border-top: 0.0625rem solid var(--color-border-primary); background: var(--color-surface-secondary); padding-top: var(--space-s); padding-bottom: var(--space-s); } .site-footer__wrapper, .site-footer__navigations, .site-footer__copyright { display: flex; gap: var(--space-s); } .site-footer__content { display: flex; flex-direction: column; justify-content: space-between; } .site-footer__menus { width: 100%; } .site-footer__col--tagline { font-size: 1rem; font-weight: 300; } .site-footer__navigations > * { flex: 1; } .site-footer__navigations ul { margin: 0; padding: 0; list-style: none; margin-top: var(--space-3xs); } .site-footer__navigations p { text-transform: uppercase; } .site-footer__navigations p + p { margin-top: var(--space-3xs); } .site-footer__copyright { margin-top: var(--space-l); } .site-footer__copyright > * { flex: 1; } .site-footer__copyright p { margin-top: 0; } @media (min-width: 65.001rem) { .site-footer__content { flex: 0 0 25%; } .site-footer__content .site-footer__col--content { max-width: 14.375rem; width: 100%; } .site-footer .site-footer__col--navigation:last-of-type, .site-footer .meom-copyright { text-align: right; } } @media (max-width: 65rem) { .site-footer__wrapper, .site-footer__navigations { flex-direction: column; } .site-footer__copyright { display: flex; flex-wrap: wrap; margin-top: var(--space-2xl); row-gap: var(--space-2xl); } .site-footer__copyright > * { flex: auto; } .site-footer__copyright .hs_cos_wrapper { flex: 0 0 max-content; } .site-footer__copyright .hs_cos_wrapper + p:empty { display: none; } .site-footer__copyright p:first-child { flex: 0 0 50%; order: 3; } .site-footer__copyright .meom-copyright { order: 4; text-align: end; } .site-footer__navigations { gap: var(--space-xl); } .site-footer__menus { margin-top: var(--space-2xl); } .site-footer__content { flex-direction: column-reverse; } .site-footer__col--content { margin-top: var(--space-l); } } .main-menu .hs-item-has-children__sub-toggle svg, .main-menu .hs-item-has-children__sub-sub-toggle svg, .main-menu .hs-item-has-children__sub-toggle span, .main-menu .hs-item-has-children__sub-sub-toggle span { pointer-events: none; } .main-menu .hs-menu-item a[href="#"] { pointer-events: none; } .main-menu .hs-menu-item a[hidden] { display: none; } .main-menu .hs-menu-item a:focus { outline: none; } .main-menu .hs-menu-item button { min-width: 1px; padding: 0; border-radius: 0; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; border: 0; background: rgba(255, 255, 255, 0); } .main-menu .hs-menu-item button::before { all: unset; } .main-menu .hs-menu-item button:focus { outline: none; } .main-menu__mega .main-menu__ul--mega .hs-menu-item.hs-menu-depth-3 .hs-item-has-children__sub-sub-toggle { padding: var(--space-6xs) 0; } .main-menu__mega .main-menu__ul--mega .hs-menu-item.hs-menu-depth-3 .hs-item-has-children__sub-sub-toggle svg { display: none; } .main-menu__mega .main-menu__ul--mega .hs-menu-item.hs-menu-depth-3 .hs-menu-item__icon { margin: 0; } .main-menu__mega .main-menu__ul--mega .hs-menu-item.hs-menu-depth-3 .hs-menu-item__icon img { height: 3em; -o-object-fit: contain; object-fit: contain; vertical-align: top; width: auto; } .main-menu__mega .hs-menu-item { border-bottom: 1px solid var(--color-border-primary, #D9DAD3); } .main-menu__mega .hs-menu-item .hs-item-has-children__sub-toggle, .main-menu__mega .hs-menu-item .hs-item-has-children__sub-sub-toggle { align-items: center; color: var(--color-text-primary); display: flex; justify-content: space-between; padding: var(--space-2xs) 0; text-transform: none; width: 100%; } .main-menu__mega .hs-menu-item .menu-link { padding: var(--space-2xs) 0; width: 100%; } .main-menu__mega .hs-menu-item:first-child.hs-menu-item--big { font-size: var(--heading-size-300); line-height: 1.3; font-weight: 300; border-bottom: 0; } .main-menu__mega .hs-menu-item.hs-menu-item--no-link p { padding-top: var(--space-s); text-transform: uppercase; } .main-menu ul { margin: 0; padding: 0; list-style: none; } .main-menu .hs-menu-item a { position: relative; display: inline-block; vertical-align: top; } .main-menu button.close-menu { min-width: 1px; padding: 0; border-radius: 0; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; border: 0; background: rgba(255, 255, 255, 0); position: absolute; right: var(--space-xs); top: var(--space-xs); transition: opacity 400ms cubic-bezier(0.62, 0, 0.38, 1), visibility 400ms cubic-bezier(0.62, 0, 0.38, 1); z-index: 100; } .main-menu button.close-menu::before { all: unset; } .main-menu button.close-menu svg { pointer-events: none; vertical-align: text-bottom; } .main-menu button.close-menu:focus { outline: thin dotted var(--color-border-secondary); } @media (min-width: 70.001rem) { .main-menu { width: 100%; } .main-menu__ul--top { display: flex; justify-content: space-between; width: 100%; } .main-menu__ul--top .hs-menu-item .menu-link, .main-menu__ul--top .hs-menu-item .hs-item-has-children__sub-toggle { font-size: var(--text-size-400); line-height: 1.4; font-weight: 450; text-transform: uppercase; color: var(--color-text-primary); cursor: pointer; height: -webkit-fit-available; line-height: 1; padding: var(--space-5xs) var(--space-5xs) var(--space-5xs) calc(var(--space-5xs) * 2 + 0.875rem); position: relative; transition: background-color 300ms cubic-bezier(0.62, 0, 0.38, 1), color 300ms cubic-bezier(0.62, 0, 0.38, 1); width: auto; } .main-menu__ul--top .hs-menu-item .menu-link::before { content: ""; position: absolute; top: 50%; left: var(--space-5xs); display: block; width: 0.375rem; height: 0.375rem; transform: translateY(-50%) scale(0); background: currentColor; transition: transform 300ms cubic-bezier(0.62, 0, 0.38, 1); } .main-menu__ul--top .hs-menu-item .menu-link:hover, .main-menu__ul--top .hs-menu-item .menu-link:focus-within { outline: none; } .main-menu__ul--top .hs-menu-item .menu-link:hover::before, .main-menu__ul--top .hs-menu-item .menu-link:focus-within::before { transform: translateY(-50%) scale(1); } .main-menu__ul--top .hs-menu-item .menu-link .hs-item-has-children::before, .main-menu__ul--top .hs-menu-item .menu-link .hs-item-has-children::after { content: ""; background-color: currentColor; position: absolute; transition: all 300ms cubic-bezier(0.62, 0, 0.38, 1); } .main-menu__ul--top .hs-menu-item .menu-link .hs-item-has-children::before { height: 0.0625rem; left: var(--space-5xs); top: 50%; width: 0; transform: translate(-50%, -50%); } .main-menu__ul--top .hs-menu-item .menu-link .hs-item-has-children::after { width: 0.0625rem; left: var(--space-5xs); top: 50%; height: 0; transform: translate(-50%, -50%); } .main-menu__ul--top .hs-menu-item .menu-link .hs-item-has-children:hover, .main-menu__ul--top .hs-menu-item .menu-link .hs-item-has-children:focus-within { outline: none; } .main-menu__ul--top .hs-menu-item .menu-link .hs-item-has-children:hover::before, .main-menu__ul--top .hs-menu-item .menu-link .hs-item-has-children:focus-within::before { width: 0.75rem; } .main-menu__ul--top .hs-menu-item .menu-link .hs-item-has-children:hover::after, .main-menu__ul--top .hs-menu-item .menu-link .hs-item-has-children:focus-within::after { height: 0.75rem; } .main-menu__ul--top .hs-menu-item.hs-item-has-children .menu-link::before, .main-menu__ul--top .hs-menu-item.hs-item-has-children .menu-link::after { content: ""; background-color: currentColor; position: absolute; transition: all 300ms cubic-bezier(0.62, 0, 0.38, 1); } .main-menu__ul--top .hs-menu-item.hs-item-has-children .menu-link::before { height: 0.0625rem; left: var(--space-5xs); top: 50%; width: 0; transform: translate(-50%, -50%); } .main-menu__ul--top .hs-menu-item.hs-item-has-children .menu-link::after { width: 0.0625rem; left: var(--space-5xs); top: 50%; height: 0; transform: translate(-50%, -50%); } .main-menu__ul--top .hs-menu-item.hs-item-has-children .menu-link:hover, .main-menu__ul--top .hs-menu-item.hs-item-has-children .menu-link:focus-within { outline: none; } .main-menu__ul--top .hs-menu-item.hs-item-has-children .menu-link:hover::before, .main-menu__ul--top .hs-menu-item.hs-item-has-children .menu-link:focus-within::before { width: 0.75rem; } .main-menu__ul--top .hs-menu-item.hs-item-has-children .menu-link:hover::after, .main-menu__ul--top .hs-menu-item.hs-item-has-children .menu-link:focus-within::after { height: 0.75rem; } .main-menu__mega { align-items: flex-start; height: 100vh; left: -100%; position: fixed; top: 0; } .main-menu__mega.is-open { left: 0; } .main-menu__mega.is-open .main-menu__overlay { background: rgba(0, 0, 0, 0.5); height: 100vh; left: 0; opacity: 1; position: absolute; top: 0; width: 100vw; z-index: -1; } .main-menu__mega .main-menu__overlay { opacity: 0; transition: opacity 400ms cubic-bezier(0.62, 0, 0.38, 1); } .main-menu__mega .main-menu__logo { margin: 0; height: 4.6875rem; } .main-menu__mega .logo { height: 1.5rem; margin: var(--space-xs) 0; width: auto; } .main-menu__mega .hs-menu-item:not(.hs-menu-depth-4) { opacity: 0.5; transition: all 0.3s ease-out; } .main-menu__mega .hs-menu-item:not(.hs-menu-item--no-link):hover, .main-menu__mega .hs-menu-item:not(.hs-menu-item--no-link):focus-within, .main-menu__mega .hs-menu-item:not(.hs-menu-item--no-link).has-open-sub-nav { border-color: var(--color-border-secondary); opacity: 1; } .main-menu__mega .hs-menu-item.hs-menu-item--big { height: 4.6875rem; } .main-menu__mega .hs-menu-item > .sub-menu { display: none; } .main-menu .main-menu__ul--mega { display: flex; flex-direction: row; width: auto; } .main-menu .main-menu__ul--mega .has-open-child > .close-menu { opacity: 0; visibility: hidden; } .main-menu__first { background: var(--color-surface-secondary, #ECECE9); border-right: 1px solid var(--color-border-primary, #D9DAD3); display: flex; flex-direction: column; height: 100vh; padding: 0 var(--space-xs) var(--space-s); width: 18.667vw; z-index: 99; } .main-menu .sub-sub-menus { box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px 4px 6px -2px rgba(31, 41, 55, 0.05), 0px 0px 1px 1px rgba(31, 41, 55, 0.1); background: var(--color-surface-primary, #FFF); height: 100vh; opacity: 0; padding: 0; position: relative; top: 0; transform: translateX(-100%); transition: transform 400ms cubic-bezier(0.62, 0, 0.38, 1), opacity 400ms 100ms cubic-bezier(0.62, 0, 0.38, 1); visibility: hidden; width: 0; z-index: 98; } .main-menu .sub-sub-menus.is-opened { opacity: 1; padding: 0 var(--space-xs) var(--space-xs); transform: translateX(0); transition: transform 400ms cubic-bezier(0.62, 0, 0.38, 1), opacity 400ms 0ms cubic-bezier(0.62, 0, 0.38, 1); visibility: visible; width: 25vw; } .main-menu .sub-sub-menus.sub-sub-menus--3 { z-index: 97; } .main-menu .sub-sub-menus.sub-sub-menus--4 { padding: 0; z-index: 96; } .main-menu .sub-sub-menus.sub-sub-menus--4.is-opened { width: calc(100vw - (66.667vw + (var(--space-xs)))); } .main-menu .sub-menu { display: flex; flex-direction: column; height: 100%; opacity: 0; transition: opacity 400ms cubic-bezier(0.62, 0, 0.38, 1); } .main-menu .sub-menu.is-opened { opacity: 1; } .main-menu .sub-menu.menu-lift { padding: 0; transform: translateX(0); width: calc(100vw - (66.667vw + (var(--space-xs)))); } .main-menu .sub-menu .hs-menu-depth-3:not(.hs-menu-item--big) .hs-item-has-children__sub-sub-toggle { display: none; } .main-menu .sub-menu .hs-menu-depth-3:not(.hs-menu-item--big) .menu-link { display: flex; justify-content: space-between; align-items: center; padding: var(--space-6xs) 0; } .main-menu .sub-menu .hs-menu-depth-4 { border-bottom: 0; } .main-menu .sub-menu__button { margin-top: auto; } .main-menu .menu-lift__image { aspect-ratio: 1/1; margin: 0; max-height: 50vh; overflow: hidden; width: 100%; } .main-menu .menu-lift__image img { height: 100%; -o-object-fit: cover; object-fit: cover; vertical-align: top; width: 100%; } .main-menu .menu-lift__content { border-top: 1px solid var(--color-border-primary, #D9DAD3); padding: var(--space-xs) var(--space-s); } .main-menu .menu-lift__type { font-size: var(--text-size-500); line-height: 1.4; font-family: var(--font-family-base); font-weight: 450; text-transform: uppercase; } .main-menu .menu-lift__title { margin-bottom: var(--space-xs); margin-top: var(--space-5xs); } .main-menu .menu-lift__meta { font-size: var(--text-size-400); line-height: 1.4; font-weight: 450; display: flex; gap: var(--space-2xs); } .main-menu .menu-lift__meta p { display: flex; flex-direction: column; gap: var(--space-6xs); margin-top: 0; } .main-menu .menu-lift__meta-name { font-size: var(--text-size-400); line-height: 1.4; font-weight: 450; text-transform: uppercase; } .main-menu .menu-lift__desc { font-size: var(--text-size-400); line-height: 1.4; font-weight: 450; margin-top: var(--space-s); } .main-menu .menu-lift__buttons { display: flex; gap: var(--space-3xs); margin-top: var(--space-s); } .main-menu button.sub-menu__toggle-previous { display: none; } } @media (max-width: 70rem) { .main-menu { display: flex; flex-direction: column-reverse; justify-content: space-between; height: calc(100vh - var(--header-height) - var(--space-xs)); } .main-menu__ul--top > li { display: none; } .main-menu__mega .hs-menu-item { font-size: var(--heading-size-300); line-height: 1.3; font-weight: 300; } .main-menu__mega .hs-menu-item .hs-item-has-children__sub-toggle, .main-menu__mega .hs-menu-item .hs-item-has-children__sub-sub-toggle, .main-menu__mega .hs-menu-item .menu-link { padding: var(--space-s) 0; } .main-menu__mega .hs-menu-item.hs-menu-item--big { text-decoration: underline; } .main-menu__mega .hs-menu-item.hs-menu-item--no-link p { font-size: var(--text-size-500); line-height: 1.4; font-family: var(--font-family-base); font-weight: 450; padding-top: var(--space-m); } .main-menu__mega .main-menu__ul--mega .hs-menu-item.hs-menu-depth-3 .hs-menu-item__icon img { height: 2.5rem; } .main-menu__logo, .main-menu .close-menu { display: none; } .main-menu .main-menu__first-ul { padding: 0 var(--space-xs); } .main-menu .hs-menu-children-wrapper.open-menu-list { margin-top: 1rem; } .main-menu .hs-menu-children-wrapper .hs-menu-item { margin: 0; } .main-menu .sub-menu { background: var(--color-surface-primary); display: flex; flex-direction: column; height: calc(100vh - var(--header-height) - var(--space-s)); height: calc(100svh - var(--header-height) - var(--space-s)); margin: 0; overflow: hidden; overflow-y: auto; padding: 0 var(--space-s); position: absolute; right: 0; top: 0; transform: translateX(100%); transition: transform 400ms cubic-bezier(0.62, 0, 0.38, 1), visibility 400ms cubic-bezier(0.62, 0, 0.38, 1), z-index 0ms 400ms linear; visibility: hidden; width: 100%; z-index: 29; } .main-menu .sub-menu.is-opened { transform: translateX(0); visibility: visible; z-index: 30; } .main-menu .hs-menu-item--big { align-items: center; display: flex; justify-content: space-between; } .main-menu .hs-menu-item--big .menu-link { width: auto; } .main-menu .hs-menu-depth-3.hs-item-has-children .hs-item-has-children__sub-sub-toggle, .main-menu .hs-menu-depth-3.hs-item-has-children .menu-lift { display: none; } .main-menu .hs-menu-depth-3.hs-item-has-children .menu-link { align-items: center; color: var(--color-text-primary); display: flex; justify-content: space-between; padding: var(--space-2xs) 0; text-transform: none; width: 100%; } .main-menu .sub-menu__button { margin-top: auto; } .main-menu .sub-menu__button a { width: 100%; } .main-menu button.sub-menu__toggle-previous { min-width: 1px; padding: 0; border-radius: 0; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; border: 0; background: rgba(255, 255, 255, 0); font-size: var(--text-size-500); line-height: 1.4; font-family: var(--font-family-base); font-weight: 450; color: var(--color-text-primary); padding: var(--space-s) 0; text-decoration: underline; text-transform: none; } .main-menu button.sub-menu__toggle-previous::before { all: unset; } .main-menu .sub-sub-menus { display: none; } } .language-menu { font-size: var(--text-size-500); line-height: 1.4; font-family: var(--font-family-base); font-weight: 450; position: relative; } .language-menu .language-menu-children-wrapper { margin: 0; padding: 0; list-style: none; background: var(--color-surface-primary); display: block; } .language-menu .language-menu-children-wrapper .language-menu-item { line-height: 0; } .language-menu .language-menu-children-wrapper .language-menu-item button { width: 100%; padding-top: var(--space-5xs); padding-bottom: var(--space-5xs); padding-left: 1em; color: inherit; font-size: var(--text-size-500); line-height: 1.4; font-family: var(--font-family-base); font-weight: 450; text-transform: none; text-align: left; background: rgba(255, 255, 255, 0); border: 0; } .language-menu .language-menu-children-wrapper .language-menu-item button::before { left: 0; } .language-menu .language-menu-children-wrapper .language-menu-item .menu-link { color: var(--color-brand-black); padding: 0; } .language-menu .language-menu-children-wrapper .language-menu-item.active { display: none; } .language-menu .language-menu__menu-link--main { padding-left: calc(var(--space-5xs) * 2 + 0.875rem); } .language-menu .language-menu__menu-link--main::before { content: ""; position: absolute; top: 50%; left: var(--space-5xs); display: block; width: 0.375rem; height: 0.375rem; transform: translateY(-50%) scale(0); background: currentColor; transition: transform 300ms cubic-bezier(0.62, 0, 0.38, 1); } .language-menu .language-menu__menu-link--main:hover::before, .language-menu .language-menu__menu-link--main:focus-within::before { transform: translateY(-50%) scale(1); } .language-menu__menu-link { min-width: 1px; padding: 0; border-radius: 0; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; border: 0; background: rgba(255, 255, 255, 0); font-size: var(--text-size-400); line-height: 1.4; font-weight: 450; text-transform: uppercase; align-items: center; color: inherit; display: flex; gap: 0.375rem; justify-content: flex-start; } .language-menu__menu-link::before { all: unset; } .language-menu__menu-link--main { padding: var(--space-xs) 0; } .language-menu__menu-link--sub { padding: 0; width: 100%; padding-top: var(--space-5xs); padding-bottom: var(--space-5xs); padding-left: 1em; color: inherit; font-size: var(--text-size-500); line-height: 1.4; font-family: var(--font-family-base); font-weight: 450; text-transform: none; text-align: left; background: rgba(255, 255, 255, 0); border: 0; } .language-menu__menu-link--sub::before { left: 0; } .language-menu__menu-link:hover, .language-menu__menu-link:focus-within { background-color: transparent; color: inherit; } .language-menu__menu-link svg, .language-menu__menu-link span { pointer-events: none; } @media (min-width: 70.001rem) { .language-menu .js-language-menu-children-wrapper-holder { position: absolute; z-index: 30; overflow: hidden; visibility: hidden; display: grid; grid-template-rows: 0fr; /* Initially hidden */ width: 100%; transition: grid-template-rows 0.3s ease-in-out; } .language-menu .js-language-menu-children-wrapper-holder.is-opened { grid-template-rows: 1fr; visibility: visible; } .language-menu .js-language-menu-children-wrapper-holder.is-opened .language-menu-children-wrapper { padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-3xs); border: 0.0625rem solid var(--color-border-secondary); border-top: 0; background: var(--color-surface-primary); } .language-menu .language-menu-children-wrapper { margin: 0; padding: 0; list-style: none; padding: 0 var(--space-xs) 0 var(--space-3xs); background: var(--color-border-secondary); border: 0.0625rem solid var(--color-border-secondary); border-bottom: 0; border-top: 0; overflow: hidden; transition: all 0.3s ease-in-out; } .is-opened .language-menu .language-menu-children-wrapper { padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-3xs); border: 0.0625rem solid var(--color-border-secondary); border-top: 0; background: var(--color-surface-primary); } } @media (max-width: 70rem) { .language-menu { position: relative; text-align: center; } .language-menu .globe, .language-menu .language-menu__menu-link--main { display: none; } .language-menu .language-menu-children-wrapper { border: 0; padding: var(--space-xs); position: relative; visibility: visible; } .language-menu .language-menu-item { display: flex; gap: var(--space-2xs); } .language-menu .language-menu-item .language-menu__menu-link { font-size: var(--heading-size-300); line-height: 1.3; font-weight: 300; text-transform: none; } } .site-hero { margin-top: var(--header-height); padding-bottom: var(--space-s); border-bottom: 1px solid var(--color-border-primary, #D9DAD3); } .site-hero__image { position: relative; margin: 0; } .site-hero__image img, .site-hero__image video { vertical-align: top; -o-object-fit: cover; object-fit: cover; } .site-hero__image video { width: 100%; } @media (max-width: 48rem) { .site-hero__image--desktop { display: none; } } @media (min-width: 48.001rem) { .site-hero__image--mobile { display: none; } } .site-hero__content { position: relative; z-index: 2; padding-top: var(--space-4xl); } .site-hero__content h1 + * { margin-top: var(--space-l); } @media (max-width: 48rem) { .site-hero__content h1 + * { margin-top: var(--space-4xl); } } .site-hero__content #hs_cos_wrapper_hero_content { display: flex; flex-flow: wrap; -moz-column-gap: var(--gutter); column-gap: var(--gutter); } .site-hero__content #hs_cos_wrapper_hero_content > * { flex: 0 0 100%; } .site-hero__content #hs_cos_wrapper_hero_content > .hs-web-interactive-inline { flex: 1 1 auto; } .site-hero__content p:empty { margin-top: calc(var(--space-xl) - var(--space-xs)); } .site-hero__content * + .hs-web-interactive-inline { margin-top: var(--space-xs); } @media (max-width: 48rem) { .site-hero--image-side { padding: 0; } } .site-hero--image-side .site-hero__wrapper { display: flex; flex-direction: column-reverse; gap: var(--space-xl); } @media (min-width: 48.001rem) { .site-hero--image-side .site-hero__wrapper { display: flex; flex-direction: row; align-items: flex-end; gap: var(--space-2xl); } } @media (min-width: 48.001rem) { .site-hero--image-side .site-hero__image { flex: 0 0 61%; margin-right: calc(var(--side-padding-small) * -1); } .site-hero--image-side .site-hero__image img, .site-hero--image-side .site-hero__image video { aspect-ratio: 4/3; } } @media (max-width: 48rem) { .site-hero--image-side .site-hero__image img, .site-hero--image-side .site-hero__image video { aspect-ratio: 1; } } @media (min-width: 48.001rem) { .site-hero--image-side .site-hero__content { flex-grow: 1; } } @media (max-width: 48rem) { .site-hero--image-side .site-hero__content { padding: 0 var(--side-padding-small) var(--space-s); } .site-hero--image-side .site-hero__content h1 + * { margin-top: var(--gutter); } } .site-hero--image-background { --color-text-primary: var(--color-text-cover); position: relative; display: flex; align-items: flex-end; min-height: 100vh; min-height: 100svh; margin-top: 0; border-bottom: 0; color: var(--color-text-primary); } .site-hero--image-background .site-hero__content { width: clamp(min(40rem, 100%), 41.541%, 48.1875rem); } .site-hero--image-background .site-hero__image, .site-hero--image-background .site-hero__image img, .site-hero--image-background .site-hero__image video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .site-hero--image-background .site-hero__image::before, .site-hero--image-background .site-hero__image::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .site-hero--image-background .site-hero__image::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 18.16%); } @media (max-width: 48rem) { .site-hero--image-background .site-hero__image::before { display: none; } } .site-hero--image-background .site-hero__image::after { opacity: 0.4; background: linear-gradient(251deg, rgba(0, 0, 0, 0.4) 47%, var(--color-surface-invert-primary, rgba(0, 0, 0, 0.4)) 93.44%); } .site-hero--image-none .site-hero__content { width: clamp(min(50rem, 100%), 52.4289%, 60.8175rem); } .site-hero--blog-hero { margin-bottom: var(--space-3xl); } .site-hero--blog-hero .site-hero__wrapper { -moz-column-gap: var(--space-l); column-gap: var(--space-l); } @media (min-width: 48.001rem) { .site-hero--blog-hero .site-hero__image { flex: 0 0 58.3%; } } .site-hero--blog-hero h1 { font-size: var(--heading-size-500); line-height: 1; font-weight: 300; } .site-hero--blog-hero h1 + * { margin-top: var(--space-s); } .site-hero--blog-hero .site-hero__top-meta, .site-hero--blog-hero .site-hero__bottom-meta, .site-hero--blog-hero .site-hero__bottom-meta-category { display: flex; flex-flow: wrap; gap: 1em; } .site-hero--blog-hero .site-hero__top-meta { -moz-column-gap: var(--space-s); column-gap: var(--space-s); font-size: var(--text-size-500); line-height: 1.4; font-family: var(--font-family-base); font-weight: 450; } .site-hero--blog-hero .site-hero__bottom-meta { -moz-column-gap: var(--space-5xs); column-gap: var(--space-5xs); font-size: var(--text-size-400); line-height: 1.4; font-weight: 450; text-transform: uppercase; } .site-hero--blog-hero .site-hero__bottom-meta > * + * { display: inline-flex; align-items: center; -moz-column-gap: var(--space-5xs); column-gap: var(--space-5xs); } .site-hero--blog-hero .site-hero__bottom-meta > * + *::before { content: ""; display: block; height: 1.23em; width: 0.0625rem; background: var(--color-border-primary); } .site-hero--blog-hero .site-hero__bottom-meta a { text-decoration: none; } .site-hero--blog-hero .site-hero__bottom-meta a:hover { text-decoration: underline; } .site-hero--project .site-hero__content { font-size: var(--text-size-600); line-height: 1.4; font-weight: 450; } .site-hero--project .site-hero__content > * + * { margin-top: var(--space-s); } .site-hero--project .site-hero__project-meta { font-size: var(--text-size-400); line-height: 1.4; font-weight: 450; text-transform: uppercase; display: flex; align-items: center; flex-flow: wrap; gap: var(--space-3xs); } .site-hero--project .site-hero__project-meta > *:not(:first-child) { display: inline-flex; align-items: center; -moz-column-gap: var(--space-3xs); column-gap: var(--space-3xs); } .site-hero--project .site-hero__project-meta > *:not(:first-child)::before { content: ""; display: block; height: 1.23em; width: 0.0625rem; background: var(--color-border-primary); } .archive-post-listing { margin-bottom: var(--space-2xl); } .archive-filters { display: grid; grid-template-columns: 1fr; gap: var(--gutter); margin-top: var(--space-3xl); margin-bottom: var(--space-l); } @media (min-width: 37.501rem) { .archive-filters { grid-template-columns: 1fr 1fr; } .archive-filters__title { grid-column: 1/span 2; } } .archive-filters__title { font-size: var(--heading-size-300); line-height: 1.3; font-weight: 300; } .archive-filters__select { position: relative; } .archive-filters__select-btn { min-width: 1px; padding: 0; border-radius: 0; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; border: 0; background: rgba(255, 255, 255, 0); display: flex; gap: var(--space-xs); justify-content: space-between; width: 100%; padding: var(--space-5xs) var(--space-5xs) var(--space-5xs) 0; color: var(--color-text-primary); font-size: var(--text-size-500); line-height: 1.4; font-family: var(--font-family-base); font-weight: 450; text-transform: none; border-bottom: 0.0625rem solid var(--color-border-secondary); } .archive-filters__select-btn::before { all: unset; } .archive-filters__select-btn:hover, .archive-filters__select-btn:focus-visible { color: var(--color-text-primary); background: rgba(255, 255, 255, 0); } .archive-filters__select-btn::after { content: ""; width: 1.4em; height: 1.4em; background: no-repeat center; background-image: url('data:image/svg+xml,'); background-size: contain; } .archive-filters__select-btn .archive-filters__select-btn__placeholder { opacity: 0.5; } .archive-filters__select-btn > * { pointer-events: none; } .archive-filters__select-btn > .is-hidden { display: none; } .archive-filters__tag-list { margin: 0; padding: 0; list-style: none; display: block; padding: 0 var(--space-xs) 0 var(--space-3xs); background: var(--color-border-secondary); border: 0.0625rem solid var(--color-border-secondary); border-bottom: 0; border-top: 0; overflow: hidden; transition: all 0.3s ease-in-out; } .is-open .archive-filters__tag-list { padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-3xs); border: 0.0625rem solid var(--color-border-secondary); border-top: 0; background: var(--color-surface-primary); } .archive-filters__tag-list button { width: 100%; padding-top: var(--space-5xs); padding-bottom: var(--space-5xs); padding-left: 1em; color: inherit; font-size: var(--text-size-500); line-height: 1.4; font-family: var(--font-family-base); font-weight: 450; text-transform: none; text-align: left; background: rgba(255, 255, 255, 0); border: 0; } .archive-filters__tag-list button::before { left: 0; } .archive-filters .js-filters-tag-list-holder { position: absolute; z-index: 30; overflow: hidden; visibility: hidden; display: grid; grid-template-rows: 0fr; /* Initially hidden */ width: 100%; transition: grid-template-rows 0.3s ease-in-out; } .archive-filters .js-filters-tag-list-holder.is-open { grid-template-rows: 1fr; visibility: visible; } @media (min-width: 65.001rem) { .archive-filters--blog { display: block; width: calc(41.6666666667% - var(--gutter) * 0.6666666667); } } .posts-load { margin-top: var(--space-2xl); } .event-archive-title { margin: var(--space-2xl) 0 var(--space-l); } .event-archive-title:first-child { margin-top: var(--space-3xl); } .posts-pagination { margin: var(--space-l) auto var(--space-3xl); text-align: center; } .archive-load-more { position: relative; display: block; width: 100%; } .archive-load-more--disabled { display: none; } .archive-load-more.loading .archive-load-more__spinner { opacity: 1; } .archive-load-more.loading .archive-load-more__text { opacity: 0; } .archive-load-more__text, .archive-load-more__spinner { transition: opacity 150ms ease-in; } .archive-load-more__spinner { top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); display: block; width: 5rem; height: 0.8125rem; opacity: 0; } .archive-load-more__spinner span { position: absolute; top: 0; width: 0.8125rem; height: 0.8125rem; border-radius: 50%; background: currentColor; animation-timing-function: cubic-bezier(0, 1, 1, 0); } .archive-load-more__spinner span:nth-child(1) { left: 0.5rem; animation: lds-ellipsis1 0.6s infinite; } .archive-load-more__spinner span:nth-child(2) { left: 0.5rem; animation: lds-ellipsis2 0.6s infinite; } .archive-load-more__spinner span:nth-child(3) { left: 2rem; animation: lds-ellipsis2 0.6s infinite; } .archive-load-more__spinner span:nth-child(4) { left: 3.5rem; animation: lds-ellipsis3 0.6s infinite; } @keyframes lds-ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes lds-ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes lds-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } } .posts-list { display: grid; row-gap: var(--space-l); -moz-column-gap: var(--gutter); column-gap: var(--gutter); } @media (min-width: 37.501rem) { .posts-list { display: grid; align-items: flex-start; grid-template-columns: 1fr 1fr; } } @media (min-width: 65.001rem) { .posts-list { display: flex; flex-flow: wrap; } .posts-list .post-item { flex: 0 0 calc(29.1666666667% - var(--gutter) * 0.6666666667); } .posts-list .post-item:nth-child(9n-8), .posts-list .post-item:nth-child(9n-4), .posts-list .post-item:nth-child(9n) { flex: 0 0 calc(41.6666666667% - var(--gutter) * 0.6666666667); } .posts-list .post-item:nth-child(9n-8) .post-item__image img, .posts-list .post-item:nth-child(9n-4) .post-item__image img, .posts-list .post-item:nth-child(9n) .post-item__image img { aspect-ratio: 42.0625/28.5; } } * + .posts-list, * + .posts-list-bottom { margin-top: var(--space-l); } .post-item { position: relative; } .post-item::before { content: ""; position: absolute; bottom: 0; right: 0; display: block; width: 0.375rem; height: 0.375rem; transform: scale(0); background: currentColor; transition: transform 300ms cubic-bezier(0.62, 0, 0.38, 1); } .post-item:hover::before, .post-item:focus-within::before { transform: scale(1); } .post-item__title { font-size: var(--heading-size-300); line-height: 1.3; font-weight: 300; } .post-item__image { margin: 0; } .post-item__image + * { margin-top: var(--space-xs); } .post-item__image img { width: 100%; aspect-ratio: 28.875/28.5; -o-object-fit: cover; object-fit: cover; vertical-align: top; } .post-item__image img[src=""] { display: none; } .post-item__meta { display: flex; align-items: center; gap: var(--space-5xs); margin-top: var(--space-xs); padding-right: 1rem; font-size: var(--text-size-400); line-height: 1.4; font-weight: 450; text-transform: uppercase; } .post-item__meta > .post-item__meta-project + * { display: inline-flex; align-items: center; -moz-column-gap: var(--space-5xs); column-gap: var(--space-5xs); } .post-item__meta > .post-item__meta-project + *::before { content: ""; display: block; height: 1.23em; width: 0.0625rem; background: var(--color-border-primary); } .post-item__meta-date { display: inline-flex; gap: var(--space-5xs); align-items: center; } .post-item__meta-date::before { content: ""; display: block; width: 2rem; height: 0.0625rem; background: var(--color-border-primary); } .post-item#empty-base-item { display: none; } .posts-list--simple { gap: var(--space-2xl); } * + .posts-list--simple { margin-top: var(--space-2xl); } .posts-list--simple .posts-list-separator { height: 0.0625rem; background-color: var(--color-border-primary); } .posts-list--simple .posts-list__small-wrapper { display: flex; flex-direction: column; gap: var(--space-l); } .posts-list--simple .posts-list__small-wrapper .post-item__image { display: none; } .posts-list--simple .post-item { display: flex; flex-direction: column; } .posts-list--simple .post-item__image { order: 3; margin: var(--space-xs) 0; } .posts-list--simple .post-item__title { order: 2; margin: 0; } .posts-list--simple .post-item__meta { order: 1; margin: 0 0 var(--space-5xs); } @media (min-width: 37.501rem) { .posts-list--simple { display: grid; align-items: stretch; grid-template-columns: 1fr 1fr; gap: var(--space-l); } .posts-list--simple .post-item:first-child .post-item__image { order: 1; margin-top: 0; } .posts-list--simple .post-item:first-child .post-item__image img { aspect-ratio: 48/27.125; } .posts-list--simple .post-item:first-child__title { order: 3; } .posts-list--simple .post-item:first-child__meta { order: 2; } .posts-list--simple .posts-list__small-wrapper { gap: var(--space-xs); justify-content: space-between; } .posts-list--simple .posts-list__small-wrapper .post-item { flex: 0 1 auto; } } @media (min-width: 65.001rem) { .posts-list--simple { gap: var(--space-2xl); } } .popup-form { align-items: flex-start; height: 100vh; opacity: 0; position: fixed; right: 0; top: 0; transform: translateX(100%); transition: transform 400ms cubic-bezier(0.62, 0, 0.38, 1), opacity 400ms 0ms cubic-bezier(0.62, 0, 0.38, 1), visibility 0ms 400ms cubic-bezier(0.62, 0, 0.38, 1), width 0ms 400ms cubic-bezier(0.62, 0, 0.38, 1); visibility: hidden; width: 0; z-index: 310; } .popup-form.is-opened { opacity: 1; transform: translateX(0); transition: transform 400ms cubic-bezier(0.62, 0, 0.38, 1), opacity 400ms 0ms cubic-bezier(0.62, 0, 0.38, 1); visibility: visible; width: 100vw; } @media (min-width: 48.001rem) { .popup-form.is-opened { width: 33vw; } } .popup-form__wrapper { background: var(--color-surface-secondary, #ECECE9); border-right: 1px solid var(--color-border-primary, #D9DAD3); display: flex; flex-direction: column; gap: var(--gutter); height: 100%; overflow: auto; padding: var(--space-s); } @media (max-width: 48rem) { .popup-form__wrapper { padding-bottom: var(--space-4xl); } } .popup-form__overlay { background: rgba(0, 0, 0, 0.5); height: 100vh; transform: translateX(-100%); opacity: 0; position: fixed; top: 0; width: 100vw; z-index: -1; transition: opacity 400ms 0ms cubic-bezier(0.62, 0, 0.38, 1); } .is-opened .popup-form__overlay { opacity: 1; } .popup-form__close { min-width: 1px; padding: 0; border-radius: 0; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; border: 0; background: rgba(255, 255, 255, 0); display: block; height: 2rem; margin-left: auto; } .popup-form__close::before { all: unset; } .popup-form__close svg { pointer-events: none; } .popup-form__close:hover, .popup-form__close:focus-visible { background-color: transparent; } .popup-form__text h2 { font-size: var(--heading-size-300); line-height: 1.3; font-weight: 300; } .blog-post { --module-margin: var(--space-2xl); margin-bottom: var(--space-default); } .blog-post--event { --module-margin: var(--space-default); } #hs_cos_wrapper_post_ingress { display: block; width: var(--width-regular); margin: 0 auto var(--space-2xl); font-size: var(--heading-size-300); line-height: 1.3; font-weight: 300; } #hs_cos_wrapper_post_ingress:empty { display: none; } @media (min-width: 65.001rem) { #hs_cos_wrapper_post_ingress { margin-left: 8.47%; } } #hs_cos_wrapper_post_body > h2, #hs_cos_wrapper_post_body > header h2 { font-size: var(--heading-size-400); line-height: 1.2; font-weight: 300; } #hs_cos_wrapper_post_body > h3 { font-size: var(--heading-size-300); line-height: 1.3; font-weight: 300; } #hs_cos_wrapper_post_body > header { margin-top: var(--text-margin); } #hs_cos_wrapper_post_body > *:not(:has(.is-custom-module)) { width: var(--width-regular); margin-left: auto; margin-right: auto; } @media (min-width: 65.001rem) { #hs_cos_wrapper_post_body > *:not(:has(.is-custom-module)) { margin-right: 8.47%; } } #hs_cos_wrapper_post_body > * + div { margin-top: var(--text-margin); } #hs_cos_wrapper_post_body > * + .hs_cos_wrapper:has(.is-custom-module), #hs_cos_wrapper_post_body > .hs_cos_wrapper:has(.is-custom-module) + *, #hs_cos_wrapper_post_body > * + .hs-module:has(.is-custom-module), #hs_cos_wrapper_post_body > .hs-module:has(.is-custom-module) + *, #hs_cos_wrapper_post_body > * + blockquote, #hs_cos_wrapper_post_body > blockquote + * { margin-top: var(--module-margin); } .social-share { margin: 0; padding: 0; list-style: none; display: flex; flex-flow: wrap; } .social-share__item { margin: 0 1.3rem 0 0; } .social-share__item:last-child { margin-right: 0; } .social-share__item--label { flex: 0 0 100%; margin: 0 0 1rem; font-size: var(--heading-size-300); line-height: 1.3; font-weight: 300; } .social-share a { color: var(--color-text-primary); } .social-share a:hover, .social-share a:focus { text-decoration: none; } .product-hero { margin-top: var(--header-height); padding-bottom: var(--space-s); border-bottom: 1px solid var(--color-border-primary); } .product-hero__wrapper { display: flex; gap: var(--space-l); } .product-hero__slider { overflow: hidden; position: relative; flex: 1; } .product-hero__slider-image { aspect-ratio: 75.6875/49.75; margin: 0; } .product-hero__slider-image img { height: 100%; -o-object-fit: cover; object-fit: cover; vertical-align: top; width: 100%; } .product-hero__content { display: flex; flex-direction: column; gap: var(--gutter); justify-content: baseline; margin-top: var(--space-l); } .product-hero__content-title { margin-bottom: auto; } .product-hero__content-desc { margin-top: var(--space-3xs); } .product-hero__content .btn { width: -moz-fit-content; width: fit-content; } .product-hero__meta { font-size: var(--text-size-btn); line-height: 1; font-weight: 450; text-transform: uppercase; display: flex; flex-wrap: wrap; gap: var(--space-3xs); } .product-hero__meta span { font-weight: 700; margin-left: var(--space-5xs); text-transform: none; } .product-hero__meta p { margin-top: 0; } .product-hero__meta p:not(:first-child) { align-items: center; display: flex; } .product-hero__meta p:not(:first-child)::before { background: var(--color-surface-invert-primary); content: ""; display: block; height: 0.5rem; margin-right: var(--space-3xs); width: 0.5rem; } .product-hero .swiper-wrapper { transition-timing-function: cubic-bezier(0.66, 0.02, 0.38, 1); } .product-hero .swiper-navigation { display: flex; justify-content: space-between; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: calc(100% - var(--space-3xs) * 2); z-index: 123; } .product-hero .swiper-navigation button { min-width: 1px; padding: 0; border-radius: 0; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; border: 0; background: rgba(255, 255, 255, 0); color: var(--color-border-secondary); padding: var(--space-3xs); } .product-hero .swiper-navigation button::before { all: unset; } .product-hero .swiper-navigation button::after { font-size: 1rem; } .swiper-button-prev .product-hero .swiper-navigation button { transform: rotate(90deg); } .product-hero .swiper-navigation button:hover, .product-hero .swiper-navigation button:focus { color: var(--color-border-primary); } .product-hero .swiper-pagination { bottom: var(--space-s); display: flex; gap: 0.5rem; left: 50%; transform: translateX(-50%); } .product-hero .swiper-pagination-bullet { background: transparent; outline: 1px solid transparent; outline-offset: -1px; border-radius: 0; height: 3rem; opacity: 1; position: relative; width: 3rem; transition: all 0.3s ease-out; } .product-hero .swiper-pagination-bullet::before { content: ""; background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; transition: all 0.3s ease-out; } .product-hero .swiper-pagination-bullet::after { background: var(--color-surface-primary); content: ""; height: 0.5rem; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 300ms cubic-bezier(0.62, 0, 0.38, 1); width: 0.5rem; } .product-hero .swiper-pagination-bullet.swiper-pagination-bullet-active, .product-hero .swiper-pagination-bullet:hover { outline-color: var(--color-surface-primary); } .product-hero .swiper-pagination-bullet.swiper-pagination-bullet-active::before, .product-hero .swiper-pagination-bullet:hover::before { opacity: 1; } .product-hero .swiper-pagination-bullet.swiper-pagination-bullet-active::after, .product-hero .swiper-pagination-bullet:hover::after { transform: translate(-50%, -50%) scale(1); } .product-hero .swiper-pagination img { height: 100%; -o-object-fit: cover; object-fit: cover; } @media (min-width: 48.001rem) { .product-hero { padding-right: var(--space-2xl); } .product-hero__content { flex: 0 0 27.75%; } } @media (max-width: 48rem) { .product-hero__wrapper { flex-direction: column; } .product-hero__content { padding: 0 var(--side-padding); } .product-hero .swiper-pagination-bullet { height: 2rem; width: 2rem; } .product-hero .swiper-pagination-bullet::after { height: 0.4rem; width: 0.4rem; } } .info-module { display: grid; gap: var(--space-xl); } @media (min-width: 37.501rem) { .info-module { display: flex; justify-content: space-between; gap: var(--space-m); } .info-module__side { flex: 0 0 32.3%; } .info-module__content { flex-grow: 1; } } @media (min-width: 48.001rem) { .info-module__content { flex: 0 0 49.8%; } } .info-module__side h2 { margin-bottom: var(--space-l); } @media (min-width: 37.501rem) { .info-module__side h2 { margin-bottom: var(--space-m); } } .info-module__info-title { margin-top: var(--space-s); font-size: var(--text-size-400); line-height: 1.4; font-weight: 450; text-transform: uppercase; } .info-module__info-list { margin: 0; padding: 0; list-style: none; margin-top: var(--space-6xs); } .info-module__info-text { margin-top: var(--space-6xs); } .info-module__info-text p { margin: 0; } .info-module__info-text--small { margin: 0; font-size: var(--text-size-400); line-height: 1.4; font-weight: 450; } .info-module__content h3 + * { margin-top: 0.9em; } .info-module__content * + h3 { margin-top: var(--space-l); } .product-item { position: relative; } .product-item__image { margin: 0; pointer-events: none; } .product-item__image img { aspect-ratio: 1/1; height: 90vw; -o-object-fit: cover; object-fit: cover; vertical-align: top; width: auto; } @media (min-width: 48.001rem) { .product-item__image img { height: 31vw; width: 100%; } .product-item--size-3-2 .product-item__image img { aspect-ratio: 3/2; } .product-item--size-2-3 .product-item__image img { aspect-ratio: 2/3; } } .product-item__title { align-items: center; display: flex; gap: var(--space-5xs); } .product-item__title::after { content: ""; display: block; width: 0.375rem; height: 0.375rem; transform: scale(0); background: currentColor; transition: transform 300ms cubic-bezier(0.62, 0, 0.38, 1); } .product-item__title:hover::after, .product-item__title:focus-within::after { transform: scale(1); } .product-item__meta { display: flex; -moz-column-gap: var(--space-5xs); column-gap: var(--space-5xs); font-size: var(--text-size-400); line-height: 1.4; font-weight: 450; text-transform: uppercase; } .product-item__meta > * + * { display: inline-flex; align-items: center; -moz-column-gap: var(--space-5xs); column-gap: var(--space-5xs); } .product-item__meta > * + *::before { content: ""; display: block; height: 1.23em; width: 0.0625rem; background: var(--color-border-primary); } :focus { outline: thin dotted; } .screen-reader-text, .sr-only { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; overflow: hidden; } .screen-reader-text:focus, .sr-only:focus { background-color: var(--color-link); clip: auto !important; color: white; display: block; font-size: 0.8em; font-weight: bold; height: auto; padding: 0.75rem; left: 0.5rem; top: 0.5rem; text-decoration: none; width: auto; z-index: 100000; } /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { outline: 0; } .hs-inline-edit script[type="mce-no/type"] { display: block; background: red; color: #fff; font-size: 1rem; font-family: "Lucida Console"; padding: 1rem; } .hs-inline-edit script[type="mce-no/type"]:before { content: "Hubspot render koodi, editoi muokataksesi lomaketta"; display: block; margin: 0 0 1rem; font-family: sans-serif; font-size: 0.8rem; font-weight: bold; text-transform: uppercase; } .hs-tools-menu.hs-collapsed { bottom: 10px !important; top: auto !important; }