/** * Swiper 11.1.14 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2024 Vladimir Kharlampidi * * Released under the MIT License * * Released on: September 12, 2024 */ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} /*! normalize.css v8.0.1 | 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. */ *, *:before, *:after { box-sizing: border-box; } html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; /* `clip` instead of `hidden` so body is not a scrolling context — needed for `position: sticky` to work on descendants. */ overflow-x: clip; } /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { box-sizing: content-box; height: 0; } /** * 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 ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: 700; } /** * 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: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 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 */ } /** * Remove the inheritance of text transform in Edge and Firefox. * 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; } /** * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * 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 and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } svg { display: block; } img, svg, video { vertical-align: middle; max-width: 100%; } /* CSS variables */ :root { --column-gap: 2.13%; --column-width-multiplier: 8.333; } /* Mobile layout */ .row-fluid { width: 100%; } .row-fluid .span1, .row-fluid .span2, .row-fluid .span3, .row-fluid .span4, .row-fluid .span5, .row-fluid .span6, .row-fluid .span7, .row-fluid .span8, .row-fluid .span9, .row-fluid .span10, .row-fluid .span11, .row-fluid .span12{ min-height: 0px; width: 100%; } /* Desktop layout */ @media (min-width: 768px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100)); } .row-fluid .span2 { width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100)); } .row-fluid .span3 { width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100)); } .row-fluid .span4 { width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100)); } .row-fluid .span5 { width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100)); } .row-fluid .span6 { width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100)); } .row-fluid .span7 { width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100)); } .row-fluid .span8 { width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100)); } .row-fluid .span9 { width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100)); } .row-fluid .span10 { width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100)); } .row-fluid .span11 { width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100)); } } .content-wrapper { margin: 0 auto; padding: 0 1rem; } .row-fluid-wrapper { position: relative; } @media screen and (min-width: 1380px) { .content-wrapper { padding: 0; } } .dnd-section > .row-fluid { margin: 0 auto; } .dnd-section .dnd-column { padding: 0 0rem; } @media (max-width: 768px) { .dnd-section .dnd-column { padding: 0; } } :root { --white: #FFFFFF; --grey: #383f47; --cardBorderColour: #E4E4E4; --bodyColour: #141517; --ctaPrimaryColour: #062951; --primaryColour: #062951; --secondaryColour: #e1e5ea; } /* ============================================= GLOBAL ============================================= */ a { text-decoration: none; color: var(--primaryColour); } /* ============================================= BASE BUTTONS ============================================= */ .btn, .hs-button.primary.large { outline: none; cursor: pointer; font-size: 1.6rem; text-wrap: nowrap; font-weight: 500; text-align: center; border-radius: 99999px; color: var(--white); display: inline-flex; align-items: center; text-decoration: none; padding: 12px 20px; transition: all 250ms ease; background: var(--ctaPrimaryColour); border: 2px solid var(--ctaPrimaryColour); height: 48px; background-color: #062951; color: var(--white); border-color: #062951; transform: translateY(0); box-shadow: none; } .btn:hover, .hs-button.primary.large:hover { background-color: #1F3E62; color: var(--white); border-color: #1F3E62; transform: translateY(-2px); box-shadow: 0 2px 0px #13192D; } .btn:active, .hs-button.primary.large:active { background-color: #062951; border-color: #062951; transform: translateY(0); box-shadow: none; } .btn.inverted { outline: none; cursor: pointer; font-size: 1.6rem; text-wrap: nowrap; font-weight: 500; text-align: center; border-radius: 99999px; color: var(--white); display: inline-flex; align-items: center; text-decoration: none; padding: 12px 20px; transition: all 250ms ease; background: var(--ctaPrimaryColour); border: 2px solid var(--ctaPrimaryColour); height: 48px; background-color: var(--white); color: #062951; border-color: var(--white); transform: translateY(0); box-shadow: none; } .btn.inverted:hover { background-color: var(--white); color: #062951; border-color: var(--white); transform: translateY(-2px); box-shadow: 0 2px 0px #8F9FB1; } .btn.inverted:active { background-color: #EBEEF1; border-color: #EBEEF1; transform: translateY(0); box-shadow: none; } @media (max-width: 768px) { .btn.inverted { height: auto; text-wrap: wrap; } } .btn.light { outline: none; cursor: pointer; font-size: 1.6rem; text-wrap: nowrap; font-weight: 500; text-align: center; border-radius: 99999px; color: var(--white); display: inline-flex; align-items: center; text-decoration: none; padding: 12px 20px; transition: all 250ms ease; background: var(--ctaPrimaryColour); border: 2px solid var(--ctaPrimaryColour); height: 48px; color: var(--primaryColour); background-color: var(--white); border-color: var(--white); } .btn.light:hover { color: var(--primaryColour); border-color: var(--primaryColour); background: var(--white); color: var(--white); background-color: var(--primaryColour); border-color:var(--primaryColour); } /* ============================================= OUTLINE BUTTON ============================================= */ .btn.outline { color: #062951; background: transparent; border: 2px solid #062951; transform: translateY(0); box-shadow: none; } .btn.outline:hover { color: #062951; background: transparent; border-color: #062951; transform: translateY(-2px); box-shadow: 0 2px 0px #13192D; } .btn.outline:active { transform: translateY(0); box-shadow: none; } .btn.outline.inverted { color: var(--white); background: transparent; border: 2px solid var(--white); transform: translateY(0); box-shadow: none; } .btn.outline.inverted:hover { color: var(--white); background: transparent; border-color: var(--white); transform: translateY(-2px); box-shadow: 0 2px 0px #8F9FB1; } .btn.outline.inverted:active { transform: translateY(0); box-shadow: none; } /* ============================================= LINK BUTTONS ============================================= */ .btn.link { gap: 5px; padding: 0; border: none; font-weight: 600; font-size: 1.4rem; background: none; color: var(--ctaPrimaryColour); align-items: center; position: relative; } .btn.link:before { content: ""; position: absolute; bottom: -3px; left: 0; width: 100%; height: 2px; background: var(--ctaPrimaryColour); } .btn.link:after { content: ""; width: 10px; height: 10px; background: url('https://20155276.fs1.hubspotusercontent-na1.net/hubfs/20155276/Learn%20More%20Arrow.svg') no-repeat; } /* ============================================= DISABLED / NO LINK BUTTONS ============================================= */ .btn.no-link { cursor: default; border: none; background: none; color: var(--primaryColour); padding: 0; } /* ============================================= MENU BUTTON ============================================= */ .btn#menu { width: 40px; height: 40px; padding: 0; border: none; background: none; } /* ============================================= SCROLL BUTTON ============================================= */ .btn.scroll { gap: 5px; padding: 0; border: none; background: transparent; color: #141517; align-items: center; } @media (max-width: 768px) { .btn { font-size: 1.4rem; } } :root { --primaryFont: DM Sans; --secondaryFont: DM Sans; --primaryFontColor: #161b30; --fontWeightRegular: 300; --fontWeightMedium: 500; --fontWeightSemiBold: 600; --fontWeightBold: 700; /* Font Sizes - Desktop */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 28px; /* The "small" text block (.small) is a named variant in the Figma design system, and its heading is Figma's text-2xl token: 32px / 38px / -0.5px. The theme's own --text-2xl above is 28px / 36px — drifted from the design system, but seven other components were built and signed off against 28px (role slider slide titles, icon CTA headings, values cards, thank-you card titles, testimonial pull quotes, perks power-up card titles), several with their own line-heights that 32px would crowd. So the design value lives here, on the variant the design actually specifies, instead of being forced through --text-2xl. */ --text-heading-small: 32px; --text-3xl: 36px; --text-4xl: 48px; --text-5xl: 60px; --text-6xl: 80px; --text-7xl: 104px; /* Line Heights - Desktop */ --leading-xs: 16px; --leading-sm: 20px; --leading-base: 24px; --leading-lg: 28px; --leading-xl: 32px; --leading-2xl: 36px; --leading-heading-small: 38px; --leading-3xl: 40px; --leading-4xl: 52px; --leading-5xl: 62px; --leading-6xl: 80px; --leading-7xl: 96px; /* Tagline Font Sizes - Desktop */ --tagline-2xs: 10px; --tagline-xs: 12px; --tagline-sm: 14px; --tagline-base: 16px; --tagline-lg: 20px; /* Tagline Line Heights - Desktop */ --leading-tagline-2xs: 12px; --leading-tagline-xs: 14px; --leading-tagline-sm: 16px; --leading-tagline-base: 20px; --leading-tagline-lg: 24px; } /* Tablet - Font Sizes & Line Heights */ @media (max-width: 1440px) { :root { --text-xl: 22px; --text-3xl: 32px; --text-4xl: 40px; --text-5xl: 48px; --text-6xl: 64px; --text-7xl: 80px; --leading-xl: 28px; --leading-3xl: 36px; --leading-4xl: 44px; --leading-6xl: 64px; --leading-7xl: 80px; /* Tagline - Tablet */ --tagline-lg: 18px; } } /* Mobile - Font Sizes & Line Heights */ @media (max-width: 768px) { :root { --text-xl: 20px; --text-2xl: 24px; --text-heading-small: 24px; --text-3xl: 28px; --text-4xl: 32px; --text-5xl: 36px; --text-6xl: 44px; --text-7xl: 56px; --leading-xl: 24px; --leading-2xl: 32px; --leading-heading-small: 32px; --leading-3xl: 32px; --leading-4xl: 36px; --leading-6xl: 42px; --leading-7xl: 56px; /* Tagline - Mobile */ --tagline-sm: 12px; --tagline-base: 14px; --tagline-lg: 16px; --leading-tagline-base: 16px; } } /* Typography Utility Classes */ .text-xs { font-size: var(--text-xs); line-height: var(--leading-xs); } .text-sm { font-size: var(--text-sm); line-height: var(--leading-sm); } .text-base { font-size: var(--text-base); line-height: var(--leading-base); } .text-lg { font-size: var(--text-lg); line-height: var(--leading-lg); } .text-xl { font-size: var(--text-xl); line-height: var(--leading-xl); } .text-2xl { font-size: var(--text-2xl); line-height: var(--leading-2xl); } .text-3xl { font-size: var(--text-3xl); line-height: var(--leading-3xl); } .text-4xl { font-size: var(--text-4xl); line-height: var(--leading-4xl); } .text-5xl { font-size: var(--text-5xl); line-height: var(--leading-5xl); } .text-6xl { font-size: var(--text-6xl); line-height: var(--leading-6xl); } .text-7xl { font-size: var(--text-7xl); line-height: var(--leading-7xl); } /* Rich Text Element Overrides */ .text-xs p, .text-xs li, .text-xs span { font-size: var(--text-xs); line-height: var(--leading-xs); } .text-sm p, .text-sm li, .text-sm span { font-size: var(--text-sm); line-height: var(--leading-sm); } .text-base p, .text-base li, .text-base span { font-size: var(--text-base); line-height: var(--leading-base); } .text-lg p, .text-lg li, .text-lg span { font-size: var(--text-lg); line-height: var(--leading-lg); } .text-xl p, .text-xl li, .text-xl span { font-size: var(--text-xl); line-height: var(--leading-xl); } .text-2xl p, .text-2xl li, .text-2xl span { font-size: var(--text-2xl); line-height: var(--leading-2xl); } .text-3xl p, .text-3xl li, .text-3xl span { font-size: var(--text-3xl); line-height: var(--leading-3xl); } .text-4xl p, .text-4xl li, .text-4xl span { font-size: var(--text-4xl); line-height: var(--leading-4xl); } .text-5xl p, .text-5xl li, .text-5xl span { font-size: var(--text-5xl); line-height: var(--leading-5xl); } .text-6xl p, .text-6xl li, .text-6xl span { font-size: var(--text-6xl); line-height: var(--leading-6xl); } .text-7xl p, .text-7xl li, .text-7xl span { font-size: var(--text-7xl); line-height: var(--leading-7xl); } /* Tagline Utility Classes */ .tagline-2xs { font-size: var(--tagline-2xs); line-height: var(--leading-tagline-2xs); } .tagline-xs { font-size: var(--tagline-xs); line-height: var(--leading-tagline-xs); } .tagline-sm { font-size: var(--tagline-sm); line-height: var(--leading-tagline-sm); } .tagline-base { font-size: var(--tagline-base); line-height: var(--leading-tagline-base); } .tagline-lg { font-size: var(--tagline-lg); line-height: var(--leading-tagline-lg); } /* Tagline Rich Text Element Overrides */ .tagline-2xs p, .tagline-2xs li, .tagline-2xs span { font-size: var(--tagline-2xs); line-height: var(--leading-tagline-2xs); } .tagline-xs p, .tagline-xs li, .tagline-xs span { font-size: var(--tagline-xs); line-height: var(--leading-tagline-xs); } .tagline-sm p, .tagline-sm li, .tagline-sm span { font-size: var(--tagline-sm); line-height: var(--leading-tagline-sm); } .tagline-base p, .tagline-base li, .tagline-base span { font-size: var(--tagline-base); line-height: var(--leading-tagline-base); } .tagline-lg p, .tagline-lg li, .tagline-lg span { font-size: var(--tagline-lg); line-height: var(--leading-tagline-lg); } html { font-size: 62.5%; } body { color: var(--primaryFontColor); } h1, .h1 { margin: 0px; margin-bottom: 20px; font-size: 104px; font-style: normal; font-weight: 500; line-height: 96px; letter-spacing: 0; } @media (max-width: 768px) { h1, .h1 { font-size: 4rem; line-height: 5rem; } } @media (max-width: 768px) { h1 br, .h1 br { display: none; } } @media (max-width: 768px) { h2 { font-size: 3.5rem; line-height: 4.5rem; } } h2:last-child { margin-bottom: 0px; } h3 { margin: 0px; font-size: 3rem; letter-spacing: 0rem; line-height: 1.25; margin-bottom: 2rem; font-family: var(--primaryFont); font-weight: var(--fontWeightSemiBold); } h3:last-child { margin-bottom: 0px; } h4 { margin: 0px; font-size: 2.5rem; letter-spacing: 0px; line-height: 3rem; margin-bottom: 2rem; font-family: var(--primaryFont); font-weight: var(--fontWeightSemiBold); } h4:last-child { margin-bottom: 0px; } h5 { margin: 0px; font-size: 2.0rem; letter-spacing: 0px; line-height: 3rem; margin-bottom: 20px; font-family: var(--primaryFont); font-weight: var(--fontWeightSemiBold); } @media (max-width: 768px) { h5 { font-weight: var(--fontWeightMedium); } } h5:last-child { margin-bottom: 0px; } ul { margin: 0px; padding-left: 18px; margin-bottom: 20px; } ul:last-child { margin-bottom: 0 } p, li { margin: 0px; font-size: 1.6rem; letter-spacing: 0px; line-height: 2.5rem; margin-bottom: 2rem; font-family: var(--secondaryFont); font-weight: var(--fontWeightRegular); } p:last-child, li:last-child { margin-bottom: 0 } .eyebrow { margin-bottom: 12px; color: #A1BF24; font-size: 12px; font-style: normal; font-weight: 400; line-height: 14px; letter-spacing: 1.2px; text-transform: uppercase; font-family: Tomorrow; } h2 { font-size: 2.8rem; font-style: normal; font-weight: 500; line-height: 3.6rem; margin: 0; } /* ================================ Content Header Size Variants ================================ */ /* Large Size */ .large .eyebrow { font-size: var(--tagline-lg); line-height: var(--leading-tagline-lg); letter-spacing: 2px; margin-bottom: 32px; } .large h1, .large h2, .large h3, .large h4, .large h5, .large h6, .large .main-heading h1, .large .main-heading h2, .large .main-heading h3, .large .main-heading h4, .large .main-heading h5, .large .main-heading h6 { font-size: var(--text-6xl); line-height: var(--leading-6xl); font-weight: 400; letter-spacing: 0.5px; } .large p, .large li, .large .content-text p, .large .content-text li { font-size: var(--text-lg); line-height: var(--leading-lg); } /* Normal Size */ .normal .eyebrow { font-size: var(--tagline-base); line-height: var(--leading-tagline-base); letter-spacing: 1.6px; margin-bottom: 24px; } .normal h1, .normal h2, .normal h3, .normal h4, .normal h5, .normal h6, .normal .main-heading h1, .normal .main-heading h2, .normal .main-heading h3, .normal .main-heading h4, .normal .main-heading h5, .normal .main-heading h6 { font-size: var(--text-4xl); line-height: var(--leading-4xl); font-weight: 400; letter-spacing: 0.5px; } .normal p, .normal li, .normal .content-text p, .normal .content-text li { font-size: var(--text-lg); line-height: var(--leading-lg); } /* Small Size */ .small .eyebrow { font-size: var(--tagline-xs); line-height: var(--leading-tagline-xs); letter-spacing: 1.2px; margin-bottom: 16px; } .small h1, .small h2, .small h3, .small h4, .small h5, .small h6, .small .main-heading h1, .small .main-heading h2, .small .main-heading h3, .small .main-heading h4, .small .main-heading h5, .small .main-heading h6 { font-size: var(--text-heading-small); line-height: var(--leading-heading-small); font-weight: 500; letter-spacing: -0.5px; } .small p, .small li, .small .content-text p, .small .content-text li { font-size: var(--text-base); line-height: var(--leading-base); } .form form { position: relative; } .form form fieldset .input { margin: 0 !important; } .form form fieldset.form-columns-1 { display: grid; max-width: 100%; margin-bottom: 3rem; grid-template-columns: repeat(1, 1fr); } .form form fieldset.form-columns-2 { gap: 3rem; display: grid; max-width: 100%; margin-bottom: 3rem; grid-template-columns: repeat(2, 1fr); } @media (max-width: 480px) { .form form fieldset.form-columns-2 { grid-template-columns: repeat(1, 1fr); } } .form form fieldset.form-columns-2 .hs-form-field { width: 100%; float: none; margin-bottom: 0px; } .form form fieldset.form-columns-2 .hs-form-field .input { margin-right: 0px; margin-bottom: 0px; } .form input[type="text"], .form input[type="email"], .form input[type="tel"] { width: 100% !important; height: 4.8rem; outline: none; display: block; border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.20); background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(5px); padding: 12px 16px; align-items: center; color: rgba(255, 255, 255, 0.80); } .form input[type="text"]::placeholder, .form input[type="email"]::placeholder, .form input[type="tel"]::placeholder { color: rgba(255, 255, 255, 0.80); } .form.dark input[type="submit"] { color: var(--primaryColour); background-color: var(--white); border-color: var(--white); } .form.dark input[type="submit"]:hover { color: var(--primaryColour); background-color: var(--white); border-color: var(--white); background: var(--Button-Fill-Light-bg-hover, #FFF); box-shadow: 0 2px 0 0 var(--Colour-Signal-400, #8F9FB1); } .form.subscribe .hs_submit.hs-submit .actions { justify-content: center; margin-top: 24px; } .form select { width: 100% !important; height: 5.5rem; outline: none; display: block; border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.20); background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(5px); padding: 12px 16px; align-items: center; color: rgba(255, 255, 255, 0.80); } .form textarea { width: 100% !important; height: 5.5rem; outline: none; display: block; border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.20); background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(5px); padding: 12px 16px; align-items: center; color: rgba(255, 255, 255, 0.80); } .form .hs-fieldtype-file > label { display: flex; cursor: pointer; overflow: hidden; padding-left: 1rem; border-radius: 5px; align-items: center; border: 2px solid #787CFE; justify-content: space-between; } .form .hs-fieldtype-file > label:after { color: #fff; content: "Upload"; padding: 2.33rem 4.88rem; background-color: #787CFE; font-weight: var(--fontWeightBold); } .form .hs-fieldtype-file .input { display: none; } .form .hs-form-field { margin-bottom: 1rem; position: relative; } .form .hs-form-field .hs-error-msgs, .form .hs_error_rollup .hs-error-msgs { margin: 0px; padding: 0px; list-style: none; position: block; } .form .hs_error_rollup .hs-error-msgs li label, .form .hs-form-field .hs-error-msgs li label.hs-error-msg { color: red; font-size: 1.3rem; } .form .legal-consent-container { gap: 3.5rem; display: flex; flex-direction: column; } .form .hs-richtext, .form .hs-richtext p { font-size: 1.5rem; color: #141517; letter-spacing: 0; line-height: 2.5rem; font-weight: 400; } .form .inputs-list { list-style: none; padding: 0px; } .form .legal-consent-container .hs-form-booleancheckbox-display { display: flex; align-items: center; justify-content: start; /* flex-direction: row-reverse; justify-content: flex-end; */ } .form .legal-consent-container .hs-form-booleancheckbox-display input[type=checkbox] { display: none; } .form .legal-consent-container .hs-form-booleancheckbox-display span { gap: 1.2rem; margin: 0px; display: flex; align-items: center; font-size: 1.5rem; color: #141517; letter-spacing: 0; line-height: 25px; font-weight: 700; } .form .legal-consent-container .hs-form-booleancheckbox-display span:before { content: ''; width: 2.3rem; min-width: 2.3rem; height: 2.3rem; display: block; border-radius: 5px; border: 1px solid #00A9F3; } .form .legal-consent-container .hs-form-booleancheckbox-display input[type=checkbox]:checked + span:before { background-position: center; background-repeat: no-repeat; background-image: url(https://144479753.fs1.hubspotusercontent-eu1.net/hubfs/144479753/raw_assets/public/MO%20Entelect/images/check.svg); } .hs-search-field__bar.form form .hs-search-field__input { width: 100%; height: 50px; max-width: 370px; min-width: 370px; font-size: 1.6rem; border-radius: 7px; border: 2px solid #141517; } .hs-search-field__bar.form form .hs-search-field__input::placeholder { color: #000; font-weight: 700; } .hs-search-field__bar.form form .search-icon { width: 20px; height: 20px; top: 0px; bottom: 0px; right: 23px; margin: auto 0; position: absolute; background: none; border: none; outline: none; padding: 0px; display: flex; align-items: center; } .hs-search-field__bar.form form .search-icon svg { width: 100%; max-width: 20px; } .form .hs_submit.hs-submit .actions { display: flex; justify-content: start; } .form .submitted-message { color: var(--white); } /* ------------------------------------------------------------------ * * HubSpot Forms — new renderer (FormsNext / hsfc) * * * * The new form widget is wrapped in .hs_cos_wrapper_type_form and * * rendered into [data-hsfc-id="Renderer"]. It is themed via a * * documented set of --hsf-* custom properties; override those at the * * renderer scope so the form's own base stylesheet picks them up * * via var() lookups (no specificity wars). * * ------------------------------------------------------------------ */ .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] { /* Layout / spacing — matches Figma 24px column gap, 24px row gap */ --hsf-row__vertical-spacing: 2.4rem; --hsf-row__horizontal-spacing: 2.4rem; --hsf-module__vertical-spacing: 0.8rem; /* Step background — strip HubSpot's default card; the host module/page provides bg */ --hsf-background__background-color: transparent; --hsf-background__border-style: none; --hsf-background__border-width: 0; --hsf-background__border-radius: 0; --hsf-background__padding: 0; /* Headings & rich text inside the form */ --hsf-heading__font-family: var(--primaryFont); --hsf-heading__color: #13192D; --hsf-richtext__font-family: var(--primaryFont); --hsf-richtext__color: #555C70; --hsf-richtext__font-size: 1.6rem; /* Field labels — text-secondary, medium 14px */ --hsf-field-label__font-family: var(--primaryFont); --hsf-field-label__color: #555C70; --hsf-field-label__font-size: 1.4rem; --hsf-field-description__font-family: var(--primaryFont); --hsf-field-description__color: #7B8194; --hsf-field-footer__font-family: var(--primaryFont); --hsf-field-footer__color: #7B8194; /* Text / email / phone / dropdown inputs — solid white pill */ --hsf-field-input__font-family: var(--primaryFont); --hsf-field-input__font-size: 1.6rem; --hsf-field-input__color: #13192D; --hsf-field-input__placeholder-color: #7B8194; --hsf-field-input__background-color: #FFFFFF; --hsf-field-input__border-color: #BCC4D1; --hsf-field-input__border-style: solid; --hsf-field-input__border-width: 1px; --hsf-field-input__border-radius: 999px; --hsf-field-input__padding: 1.2rem 1.6rem; /* Textareas — same fill, soft 16px corners (NOT pill) */ --hsf-field-textarea__font-family: var(--primaryFont); --hsf-field-textarea__font-size: 1.6rem; --hsf-field-textarea__color: #13192D; --hsf-field-textarea__placeholder-color: #7B8194; --hsf-field-textarea__background-color: #FFFFFF; --hsf-field-textarea__border-color: #BCC4D1; --hsf-field-textarea__border-style: solid; --hsf-field-textarea__border-width: 1px; --hsf-field-textarea__border-radius: 16px; --hsf-field-textarea__padding: 1.2rem 1.6rem; /* Checkboxes & radios — white fill, light border, CTA tick/dot */ --hsf-field-checkbox__background-color: #FFFFFF; --hsf-field-checkbox__border-color: #BCC4D1; --hsf-field-checkbox__border-width: 1px; --hsf-field-checkbox__color: #062951; --hsf-field-checkbox__padding: 0; --hsf-field-radio__background-color: #FFFFFF; --hsf-field-radio__border-color: #BCC4D1; --hsf-field-radio__border-width: 1px; --hsf-field-radio__color: #062951; --hsf-field-radio__padding: 0; /* Dropdown popover */ --hsf-field-dropdown-options__border-radius: 12px; /* Buttons — dark navy fill, pill, white text */ --hsf-button__font-family: var(--primaryFont); --hsf-button__font-size: 1.6rem; --hsf-button__font-weight: 500; --hsf-button__color: #FFFFFF; --hsf-button__background-color: #062951; --hsf-button__border-color: #062951; --hsf-button__border-style: solid; --hsf-button__border-width: 1px; --hsf-button__border-radius: 999px; --hsf-button__padding: 1.2rem 2.4rem; --hsf-button--hover__background-color: #13192D; --hsf-button--hover__color: #FFFFFF; --hsf-button--hover__border-color: #13192D; /* Progress bar */ --hsf-progressbar-progressLine__background-color: #062951; --hsf-progressbar-trackLine__background-color: #E1E5EA; --hsf-progressbar-text__font-family: var(--primaryFont); --hsf-progressbar-text__color: #13192D; /* Alerts */ --hsf-erroralert__font-family: var(--primaryFont); --hsf-erroralert__color: #E22618; --hsf-infoalert__font-family: var(--primaryFont); --hsf-infoalert__color: #555C70; /* Required-indicator asterisk — red per Figma */ --hsf-field-label-requiredindicator__color: #E22618; } /* Give radios / checkboxes an explicit hit-target so they don't collapse under appearance:none, and keep them perfectly circular / square. */ .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-RadioInput, .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-CheckboxInput { box-sizing: border-box; width: 2rem; height: 2rem; } /* Dropdown popover list */ .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-DropdownOptions { background-color: #FFFFFF; border-color: #BCC4D1; box-shadow: 0 4px 12px rgba(19, 25, 45, 0.08); } .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem { color: #13192D; } /* Dropdown caret (drawn with border tricks, not theming vars) */ .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-DropdownInput__Caret > span, .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-PhoneInput__FlagAndCaret__Caret { border-top-color: #13192D; } /* File input — match the input text colour */ .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-FileInput { color: #13192D; } /* Style the native "choose file" button to match the form buttons. Kept as separate rules (not a comma group) so an unrecognised pseudo in one browser can't invalidate the whole selector. */ .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-FileInput::file-selector-button { background-color: var(--hsf-button__background-color, #062951); border: var(--hsf-button__border-width, 1px) var(--hsf-button__border-style, solid) var(--hsf-button__border-color, #062951); border-radius: var(--hsf-button__border-radius, 999px); color: var(--hsf-button__color, #FFFFFF); cursor: pointer; font-family: var(--hsf-button__font-family, var(--primaryFont)); font-size: var(--hsf-button__font-size, 1.6rem); font-weight: var(--hsf-button__font-weight, 500); margin-right: 1.2rem; padding: var(--hsf-button__padding, 1.2rem 2.4rem); transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; } .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-FileInput::-webkit-file-upload-button { background-color: var(--hsf-button__background-color, #062951); border: var(--hsf-button__border-width, 1px) var(--hsf-button__border-style, solid) var(--hsf-button__border-color, #062951); border-radius: var(--hsf-button__border-radius, 999px); color: var(--hsf-button__color, #FFFFFF); cursor: pointer; font-family: var(--hsf-button__font-family, var(--primaryFont)); font-size: var(--hsf-button__font-size, 1.6rem); font-weight: var(--hsf-button__font-weight, 500); margin-right: 1.2rem; padding: var(--hsf-button__padding, 1.2rem 2.4rem); transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; } .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-FileInput:hover::file-selector-button { background-color: var(--hsf-button--hover__background-color, #13192D); border-color: var(--hsf-button--hover__border-color, #13192D); color: var(--hsf-button--hover__color, #FFFFFF); } .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-FileInput:hover::-webkit-file-upload-button { background-color: var(--hsf-button--hover__background-color, #13192D); border-color: var(--hsf-button--hover__border-color, #13192D); color: var(--hsf-button--hover__color, #FFFFFF); } /* Multi-step nav spacing */ .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-NavigationRow__Buttons { margin-top: 2.4rem; } @media (max-width: px) { .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-Row { display: flex; flex-direction: column; gap: var(--hsf-row__vertical-spacing); } .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-NavigationRow__Buttons { flex-direction: column; } .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-NavigationRow__Buttons > * { width: 100%; } } /* Module variants — Subscribe Section wraps the widget in `.form.subscribe`, centre the submit button there to match the legacy variant. */ .form.subscribe .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-NavigationRow__Buttons { justify-content: center; } /* Dark-context override — Subscribe Section (`.form.dark`) and any other wrapper that opts into a dark surface need white-on-translucent inputs. */ .form.dark .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] { --hsf-heading__color: #FFFFFF; --hsf-richtext__color: rgba(255, 255, 255, 0.80); --hsf-field-label__color: rgba(255, 255, 255, 0.90); --hsf-field-description__color: rgba(255, 255, 255, 0.60); --hsf-field-footer__color: rgba(255, 255, 255, 0.60); --hsf-field-input__color: rgba(255, 255, 255, 0.90); --hsf-field-input__placeholder-color: rgba(255, 255, 255, 0.60); --hsf-field-input__background-color: rgba(255, 255, 255, 0.15); --hsf-field-input__border-color: rgba(255, 255, 255, 0.30); --hsf-field-textarea__color: rgba(255, 255, 255, 0.90); --hsf-field-textarea__placeholder-color: rgba(255, 255, 255, 0.60); --hsf-field-textarea__background-color: rgba(255, 255, 255, 0.15); --hsf-field-textarea__border-color: rgba(255, 255, 255, 0.30); --hsf-button__background-color: #FFFFFF; --hsf-button__color: #062951; --hsf-button__border-color: #FFFFFF; --hsf-button--hover__background-color: rgba(255, 255, 255, 0.85); --hsf-button--hover__color: #062951; --hsf-button--hover__border-color: rgba(255, 255, 255, 0.85); --hsf-progressbar-progressLine__background-color: #FFFFFF; --hsf-progressbar-trackLine__background-color: rgba(255, 255, 255, 0.20); --hsf-progressbar-text__color: #FFFFFF; } .card { background: var(--white); border: 1px solid var(--cardBorderColour); box-shadow: 5px 5px 25px 4px rgba(22, 27, 48, 0.05); border-radius: 7px; } .container { width: 100%; margin: 0 auto; padding: 0 8rem; max-width: var(--containerWidth); } @media (max-width: 1440px) { .container { padding: 0 4rem; } } @media (max-width: 768px) { .container { padding: 0 1.6rem; } } .cta-container { gap: 15px; display: flex; align-items: center; } .cta-container.right { justify-content: end; } .cta-container.center { justify-content: center; } .cta-container.space-between { justify-content: space-between; } :root { --containerWidth: 1920px; --verticalSpacing: 80px; --swiper-pagination-bottom: -3rem; } .no-scroll { overflow-y: hidden; } html { /* Use `clip` rather than `hidden` so html does NOT become a scrolling context — this is what allows `position: sticky` to work for descendants (e.g. .header-and-cards__left). */ overflow-x: clip; } * { font-family: var(--primaryFont); } *.eyebrow * { font-family: Tomorrow; } body { font-size: 1.6rem; } .menu-underlay { position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; z-index: 1000; display: none; background-color: rgba(0,0,0,0.7); } .content-header .content-text { margin-top: 24px; } /* Scroll fade-in animation */ .fade-in-element { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .fade-in-element.fade-in-active { opacity: 1; transform: translateY(0); } /* Scroll fade-in animation for text, one word at a time. It used to be one letter at a time, which cost more than it looked. Each letter was its own inline-block, so the browser could not shape or kern across them and the text measured wider than the same words set normally: on /stagnation one heading took 176px against 132px unsplit at 1440, gaining a line it should not have had. That page also carried 876 letter spans in a 2121-node document, each running its own pair of transitions, and with a flat 0.03s per letter its longest heading did not finish revealing for 5.88 seconds. Per word, the delays are written by scripts/main.js as finished seconds in --fade-delay, scaled so the whole block lands inside its reveal budget however long the text is. --fade-speed lets a module scale that; 1 is normal. */ .fade-in-letters-element { display: block; } .fade-word { display: inline-block; white-space: nowrap; } .fade-in-letters-element .fade-word { opacity: 0; transform: translateY(20px); transition: opacity 0.35s ease-out, transform 0.35s ease-out; transition-delay: calc(var(--fade-delay, 0s) * var(--fade-speed, 1)); } .fade-in-letters-element.fade-in-letters-active .fade-word { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .fade-in-element, .fade-in-letters-element .fade-word { transform: none; transition-delay: 0s; transition-duration: 0.01s; } } /* Navigation and footer (with Home's Space Invaders section). Both modules are on every page, so their styles are compiled in here rather than loading as two more render-blocking files. They come last, where their own files used to cascade: straight after this stylesheet. HubSpot only rebuilds the compiled stylesheet when this file itself changes, so every edit to these partials needs an edit here too. Partials last changed: 8 Oct 2026 (Glassdoor logo field). */ /* Navigation module styles (modules/Navigation.module). The navigation is on every page, so its styles are compiled into main.css instead of loading as a render-blocking file of their own; the module's module.css is empty on purpose. Included at the end of main.css, where its own file used to cascade. */ /* =========================================================== NAVIGATION MODULE Transparent fixed nav with dark/light mode switching =========================================================== */ /* ---------------------------------------------------------- BASE LAYOUT ---------------------------------------------------------- */ .navigation { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; background: transparent; padding: 0; } /* Sitewide: transparent nav over each page's hero, white bar once scrolled past it. `.nav-solid` is toggled on by the hero's IntersectionObserver in module.js (first themed section in #main-content; pages without one stay transparent). Over the hero the nav falls back to `.navigation { background: transparent }`; below it this white bar shows and the detector's own-bg short-circuit picks the dark logo. Role pages keep Job Detail's standing white rule (uniform white). */ #site-navigation { transition: background-color 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease; } body.nav-solid #site-navigation { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: hsla(0, 0%, 100%, .9); } .nav-container { display: flex; align-items: center; justify-content: space-between; min-height: 80px; } /* ---------------------------------------------------------- LOGO ---------------------------------------------------------- */ .nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .nav-logo img { height: 32px; } .navigation .nav-logo__light, .navigation .nav-logo__dark { display: none; } .navigation.nav-dark .nav-logo__light { display: block; } .navigation.nav-light .nav-logo__dark { display: block; } /* ---------------------------------------------------------- RIGHT-SIDE ACTIONS ---------------------------------------------------------- */ .nav-actions { display: flex; align-items: center; gap: 2rem; } /* ---------------------------------------------------------- EXPANDING SEARCH ---------------------------------------------------------- */ .nav-search { position: relative; display: flex; align-items: center; flex-direction: row-reverse; gap: 0; } .nav-search__form { overflow: hidden; width: 0; opacity: 0; transition: width 0.3s ease, opacity 0.2s ease; } .nav-search.open .nav-search__form { width: clamp(160px, 20vw, 240px); opacity: 1; } .nav-search__input { width: 100%; padding: 0.5rem 1rem; border-radius: 9999px; font-size: 1.4rem; outline: none; transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease; } .nav-search__input::placeholder { transition: color 0.3s ease; } .nav-search__btn { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; flex-shrink: 0; } .nav-search__btn svg { width: 22px; height: 22px; fill: none; transition: stroke 0.4s ease; } /* ---------------------------------------------------------- MENU BUTTON ---------------------------------------------------------- */ .nav-menu-btn { transition: all 0.4s ease; } /* =========================================================== DARK MODE (white text — for dark section backgrounds) =========================================================== */ .navigation.nav-dark .nav-search__btn svg { stroke: #fff; } .navigation.nav-dark .nav-search__input { border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.1); color: #fff; } .navigation.nav-dark .nav-search__input::placeholder { color: rgba(255, 255, 255, 0.5); } .navigation.nav-dark .nav-menu-btn { color: var(--white, #fff); background: transparent; border-color: var(--white, #fff); } .navigation.nav-dark .nav-menu-btn:hover { color: var(--white, #fff); background: transparent; border-color: var(--white, #fff); transform: translateY(-2px); box-shadow: 0 2px 0px rgba(143, 159, 177, 0.6); } .navigation.nav-dark .nav-menu-btn:active { transform: translateY(0); box-shadow: none; } /* =========================================================== LIGHT MODE (dark text — for light section backgrounds) =========================================================== */ .navigation.nav-light .nav-search__btn svg { stroke: #062951; } .navigation.nav-light .nav-search__input { border: 1px solid rgba(6, 41, 81, 0.2); background: rgba(6, 41, 81, 0.06); color: #062951; } .navigation.nav-light .nav-search__input::placeholder { color: rgba(6, 41, 81, 0.4); } .navigation.nav-light .nav-menu-btn { color: #062951; background: transparent; border-color: #062951; } .navigation.nav-light .nav-menu-btn:hover { color: #062951; background: transparent; border-color: #062951; transform: translateY(-2px); box-shadow: 0 2px 0px #13192d; } .navigation.nav-light .nav-menu-btn:active { transform: translateY(0); box-shadow: none; } /* =========================================================== FULL-SCREEN OVERLAY =========================================================== */ .nav-overlay { position: fixed; inset: 0; z-index: 2001; background: #fff; color: var(--primaryColour, #0f1524); display: flex; flex-direction: column; overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease, visibility 0.4s ease; } .nav-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; } /* ---------------------------------------------------------- OVERLAY HEADER ---------------------------------------------------------- */ .nav-overlay__header { flex-shrink: 0; } .nav-overlay__header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 80px; } .nav-overlay__header .nav-logo img { height: 32px; display: block; } .nav-overlay .nav-search__btn svg { stroke: #062951; } .nav-overlay .nav-search__input { border: 1px solid rgba(6, 41, 81, 0.2); background: rgba(6, 41, 81, 0.06); color: #062951; } .nav-overlay .nav-search__input::placeholder { color: rgba(6, 41, 81, 0.4); } .nav-close-btn { transition: all 0.4s ease; } /* ---------------------------------------------------------- OVERLAY BODY + 2-COLUMN GRID ---------------------------------------------------------- */ .nav-overlay__body { flex: 1; padding: 8rem 0; } .nav-overlay__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; min-height: 100%; } /* ---------------------------------------------------------- COLUMN 1: Main Menu ---------------------------------------------------------- */ .nav-overlay__menu { display: flex; flex-direction: column; } .nav-overlay__list { list-style: none; margin: 0; padding: 0; } .nav-overlay__item { position: relative; border-left: 3px solid transparent; transition: border-color 0.2s ease; } .nav-overlay__item-row { display: flex; align-items: center; gap: 0.5rem; transition: transform 0.2s ease; } .nav-overlay__link { display: block; padding: 1rem 0 1rem 1.2rem; color: var(--Text-text-tertiary, #9da4b2); font-family: var(--primaryFont); font-size: var(--text-3xl); font-weight: 300; line-height: var(--leading-3xl); letter-spacing: 0; text-decoration: none; transition: color 0.2s ease; cursor: pointer; } .nav-overlay__link:hover { color: var(--primaryColour, #0f1524); } .nav-overlay__item:hover > .nav-overlay__item-row { transform: translateX(4px); } .nav-overlay__item:hover .nav-overlay__link { color: var(--primaryColour, #0f1524); } .nav-overlay__item.active { border-left-color: #a1bf24; } .nav-overlay__item.active .nav-overlay__link { color: var(--primaryColour, #0f1524); } /* Chevron (desktop only) */ .nav-overlay__chevron { display: flex; align-items: center; flex-shrink: 0; transition: transform 0.2s ease; } .nav-overlay__item:hover .nav-overlay__chevron { transform: translateX(4px); } .nav-overlay__chevron svg { width: 24px; height: 24px; } /* Mobile toggle (hidden on desktop) */ .nav-overlay__toggle { display: none; } /* Sublist: hidden by default, floats out on desktop hover */ .nav-overlay__sublist { display: none; list-style: none; margin: 0; padding: 0; } @media (min-width: 769px) { .nav-overlay__list { width: max-content; } .nav-overlay__item.has-children:hover .nav-overlay__sublist { display: block; position: absolute; top: 0; left: 100%; padding-left: 4rem; white-space: nowrap; } } /* CTAs */ .nav-overlay__ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; } .nav-overlay__sublink { display: block; padding: 1rem 0; color: var(--Text-text-tertiary, #9da4b2); font-family: var(--primaryFont); font-size: var(--text-2xl); font-weight: 300; line-height: var(--leading-2xl); letter-spacing: -0.5px; text-decoration: none; transition: color 0.2s ease; cursor: pointer; } .nav-overlay__sublink:hover { color: var(--primaryColour, #0f1524); } .nav-overlay__sublist-item { border-left: 3px solid transparent; padding-left: 1.2rem; } .nav-overlay__sublist-item.active { border-left-color: #a1bf24; } .nav-overlay__sublist-item.active .nav-overlay__sublink { color: var(--primaryColour, #0f1524); } /* ---------------------------------------------------------- COLUMN 2: Blog ---------------------------------------------------------- */ .nav-overlay__blog { display: flex; flex-direction: column; gap: 1.6rem; } .nav-overlay__blog-label { color: var(--Text-text-secondary, #555c70); font-family: var(--primaryFont); font-size: var(--text-base); font-weight: 400; line-height: var(--leading-base); letter-spacing: 0; } .nav-overlay__blog-card { display: flex; flex-direction: column; } .nav-overlay__blog-image-link { display: block; text-decoration: none; border-radius: 12px; overflow: hidden; } .nav-overlay__blog-image { position: relative; aspect-ratio: 4 / 3; background-size: cover !important; background-position: center !important; } .nav-overlay__blog-image.has-overlay { background-blend-mode: overlay, multiply, saturation, normal; } .nav-overlay__blog-card-content { position: absolute; inset: 0; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; } .nav-overlay__blog-tag { display: inline-block; padding: 4px 12px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(4px); border-radius: 4px; color: #fff; font-family: var(--primaryFont); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; width: fit-content; } .nav-overlay__blog-title { margin: 0; overflow: hidden; color: var(--Text-text-primary-inverted, #fff); text-overflow: ellipsis; font-family: var(--primaryFont); font-size: var(--text-lg); font-weight: 500; line-height: var(--leading-lg); letter-spacing: -0.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* ---------------------------------------------------------- OVERLAY FOOTER ---------------------------------------------------------- */ .nav-overlay__footer { flex-shrink: 0; border-top: 1px solid rgba(15, 21, 36, 0.08); } .nav-overlay__footer-inner { display: flex; align-items: center; justify-content: space-between; padding: 3.2rem 0 4.8rem; } /* Glassdoor rating: text, CSS stars and Glassdoor's SVG logo (or the Logo field's image, at the same 16px height), laid out like the 302x96 badge picture it replaced. The stars are one star shape repeated by a mask (24px apart); the gradient under the mask fills them to the rating (4.5 fills 90%) and leaves the rest at 25%. */ .nav-overlay__glassdoor { align-items: flex-start; display: flex; flex-direction: column; } .nav-overlay__glassdoor-rating { align-items: center; display: flex; gap: 0.8rem; } .nav-overlay__glassdoor-score { color: #13192d; font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-lg); } .nav-overlay__glassdoor-stars { background: linear-gradient(90deg, #a1bf24 calc(var(--glassdoor-rating, 5) * 20%), rgba(161, 191, 36, 0.25) 0); height: 2.28rem; -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 25.263 24%22%3E%3Cpath d=%22M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z%22/%3E%3C/svg%3E') 0 0 / 2.4rem 2.28rem repeat-x; mask: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 25.263 24%22%3E%3Cpath d=%22M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z%22/%3E%3C/svg%3E') 0 0 / 2.4rem 2.28rem repeat-x; width: 11.88rem; } .nav-overlay__glassdoor-recommend { color: #555c70; font-size: var(--text-sm); line-height: var(--leading-sm); margin-top: 0.4rem; } .nav-overlay__glassdoor-logo { display: block; height: 1.6rem; margin-top: 2.6rem; width: auto; } .nav-overlay__social { display: flex; align-items: center; gap: 1.6rem; } .nav-overlay__social-link { display: flex; align-items: center; justify-content: center; transition: opacity 0.2s ease; border-radius: 50%; background: #f5f7fa; } .nav-overlay__social-link img { width: 25px; height: 25px; display: block; opacity: 0.4; transition: opacity 0.2s ease; padding: 5px; } .nav-overlay__social-link:hover img { opacity: 1; } /* =========================================================== ENTRANCE ANIMATION (staggered) =========================================================== */ .nav-overlay.open .nav-overlay__item { animation: overlayItemIn 0.4s ease forwards; opacity: 0; transform: translateY(12px); } .nav-overlay.open .nav-overlay__item:nth-child(1) { animation-delay: 0.05s; } .nav-overlay.open .nav-overlay__item:nth-child(2) { animation-delay: 0.1s; } .nav-overlay.open .nav-overlay__item:nth-child(3) { animation-delay: 0.15s; } .nav-overlay.open .nav-overlay__item:nth-child(4) { animation-delay: 0.2s; } .nav-overlay.open .nav-overlay__item:nth-child(5) { animation-delay: 0.25s; } .nav-overlay.open .nav-overlay__item:nth-child(6) { animation-delay: 0.3s; } .nav-overlay.open .nav-overlay__item:nth-child(7) { animation-delay: 0.35s; } .nav-overlay.open .nav-overlay__item:nth-child(8) { animation-delay: 0.4s; } .nav-overlay.open .nav-overlay__blog { animation: overlayItemIn 0.5s ease 0.2s forwards; opacity: 0; transform: translateY(12px); } @keyframes overlayItemIn { to { opacity: 1; transform: translateY(0); } } /* =========================================================== RESPONSIVE =========================================================== */ /* Tablet: desktop layout without blog column */ @media (max-width: 1440px) { .nav-overlay__grid { grid-template-columns: 1fr; } .nav-overlay__blog { display: none; } } /* Mobile: accordion layout */ @media (max-width: 768px) { .nav-overlay__chevron { display: none; } .nav-overlay__toggle { display: flex; background: none; border: none; cursor: pointer; color: rgba(15, 21, 36, 0.35); padding: 1rem 0 1rem 1rem; align-items: center; transition: color 0.2s ease; } .nav-overlay__toggle:hover { color: var(--primaryColour, #0f1524); } .nav-overlay__toggle svg { transition: transform 0.3s ease; } .nav-overlay__toggle.open svg { transform: rotate(180deg); } .nav-overlay__sublist { list-style: none; margin: 0; padding: 0 0 1.2rem 0; display: none; border-left: 2px solid rgba(15, 21, 36, 0.08); } .nav-overlay__sublist.open { display: block; } .nav-overlay__sublist .nav-overlay__sublink { padding: 0.6rem 1rem 0.6rem 2rem; } .nav-overlay__item { border-left: none; border-bottom: 1px solid rgba(15, 21, 36, 0.08); margin-bottom: 0; } .nav-overlay__item:last-child { border-bottom: none; } .nav-overlay__link { padding-left: 0; } .nav-overlay__footer-inner { flex-direction: column; gap: 2rem; align-items: flex-start; } } @media (max-width: 768px) { .nav-container { min-height: 64px; } .navigation > .container { padding: 0 1.6rem; } .nav-overlay__header-inner { min-height: 64px; } .nav-overlay__body { padding: 3.2rem 0 4rem; } .nav-overlay__item { margin-left: -1.6rem; padding-left: 1.6rem; border-left: 3px solid transparent; border-bottom: none; } .nav-overlay__link { padding: 1.4rem 0; font-size: var(--text-2xl); line-height: var(--leading-2xl); } .nav-overlay__sublist .nav-overlay__sublink { font-size: var(--text-xl); line-height: var(--leading-xl); } .nav-overlay__toggle { padding: 1.4rem 0 1.4rem 1rem; } .nav-menu-btn, .nav-close-btn { font-size: 1.4rem; padding: 8px 16px; height: 40px; } } @media (max-width: 480px) { .nav-actions { gap: 1.2rem; } .nav-menu-btn, .nav-close-btn { font-size: 1.2rem; padding: 6px 14px; height: 36px; } } /* Page Footer module styles (modules/Page Footer.module). The footer is on every page, so its styles are compiled into main.css instead of loading as a render-blocking file of their own; the module's module.css is empty on purpose. Included at the end of main.css, after the navigation styles. */ .footer { background: #13192d; padding: 64px 0 32px; color: #ffffff; font-family: "Inter", sans-serif; /* The footer is pulled up so its own top notch interlocks with the bottom edge of the section above it. That pull-up must equal the notch BAND DEPTH exactly, or a sliver of the (transparent) page background shows through as a white line along the seam. scripts/notch-mask.js writes the computed band depth to --edge-top inline, and it is width-dependent (the design steps the cut 12 → 16 → 20 across the breakpoints), so a fixed value cannot be right at every width. The old hardcoded -14px predates the notch rebuild and was 5.9px short at desktop, which is the "white gap along the edge" on the role pages. The 14px fallback only applies if the script has not run yet. */ margin-top: calc(-1 * var(--edge-top, 14px)); position: relative; } .footer .container { /* max-width: 1280px; */ /* margin: 0 auto; padding: 0 20px; */ } .space-invaders, .space-invaders * { cursor: url("https://144479753.fs1.hubspotusercontent-eu1.net/hubfs/144479753/Website/Coin.svg") 0 0, auto; } .space-invaders { height: 100vh; /* Pulled up 2px so its top edge sits behind the footer, which covers the thin line that shows along this seam on some displays. The footer is position: relative and this section is static, so the footer paints over the overlap. 2px rather than 1 because the reports are from high-density screens, where a sub-pixel seam can straddle two device pixels. */ margin-top: -2px; } /* The background image draws once the section nears the screen: the script in the module's module.html adds .is-near after the page's first paint, and the inline style holds the URL in --si-img. */ .space-invaders.is-near .invader-background { background-image: var(--si-img); } .space-invaders .container { min-height:100vh; display: flex; justify-content: center; align-items: center; } .space-invaders .gradient { background: linear-gradient(180deg, rgba(13, 15, 25, 0) 0%, #0d0f19 80%); } .space-invaders .container .insert-wrapper { display: flex; flex-direction: column; gap: 7rem; align-items: center; } .space-invaders .container .insert-wrapper .coin-slot { transition: all 0.2s ease-in-out; } .space-invaders .container .insert-wrapper .coin-slot--tablet-mobile { display: none; } .space-invaders .container .insert-wrapper .coin-slot--desktop { display: block; } .space-invaders .container .insert-wrapper .coin-slot:hover { transform: scale(1.15); } /* visually-hidden helper */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #si-game { scroll-margin-top: 0px; } .coin-slot-btn { background: transparent; border: 0; padding: 0; cursor: inherit; /* keep your custom cursor */ } .space-invaders__game { width: 100%; max-width: 100%; padding: 0; background: #0d0f19; } .space-invaders__game .container { /* min-height: unset; */ } /* when shown */ .space-invaders.is-playing .space-invaders__game { display: block; } .space-invaders__iframe { width: 100%; min-height: 600px; border: 0; display: block; opacity: 0; transition: opacity 1.4s ease-in-out; } .space-invaders.is-playing .space-invaders__iframe { opacity: 100; } /* optional: once game is showing, you might want normal cursor over the iframe */ .space-invaders.is-playing .space-invaders__iframe { cursor: auto; } .footer .content { display: flex; flex-direction: column; gap: 60px; } /* LOGO */ /* .footer .logo img { width: 48px; height: auto; } */ /* TOP GRID */ .footer .grid-container { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* LEFT – Newsletter */ .footer-form-header h2, .footer-form-header span, .footer-form-header p { color: #ffffff; margin-bottom: unset; } .footer-form .form { margin-top: 20px; } .footer-form .form form { display: flex; gap: 16px; } .footer-form .form .hs_email.hs-form-field { min-width: 320px; max-width: 411px; width: 100%; } .footer input[type="email"], .footer input[type="text"] { border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); width: 100%; padding: 8px 16px; color: #fff; font-size: 16px; font-style: normal; font-weight: 300; line-height: 24px; letter-spacing: 0; } .footer .hs-button.primary.large { background: #ffffff; color: #0f1524; border: 2px solid #fff; } .footer .hs-button.primary.large:hover { background: transparent; color: #fff; border: 2px solid #fff; } /* RIGHT – Quick Links columns */ .links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .links-grid .column_title { font-size: 12px; font-weight: 500; color: #ffffff99; margin-bottom: 40px; } .links-grid ul { list-style: none; padding: 0; margin: 0; } .links-grid li { margin-bottom: 16px; } .links-grid a { color: #ffffffcc; font-size: 16px; transition: 0.2s; } .links-grid a:hover { color: #ffffff; } /* BOTTOM LINKS */ .bottom-links { margin-top: 30px; padding-top: 40px; border-top: 1px solid #2b354d; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; justify-content: space-between; align-items: center; } /* SOCIAL ICONS */ .socials a img { width: 26px; height: 26px; margin-right: 20px; opacity: 0.8; transition: 0.2s; } .socials a img:hover { opacity: 1; } /* LEGAL LINKS */ .legal-footer { display: flex; justify-content: space-between; } .legal-footer .legal-links a { font-size: 14px; color: #ffffffcc; margin-right: 30px; line-height: 24px; } .legal-footer .legal-links a:hover { color: #ffffff; } .copyright { font-size: 14px; color: #ffffff99; } /* ============================= */ /* RESPONSIVE */ /* ============================= */ @media (max-width: 1440px) { .space-invaders .container .insert-wrapper .coin-slot--desktop { display: none; } .space-invaders .container .insert-wrapper .coin-slot--tablet-mobile { display: block; } .coin-slot-btn { /* margin-left: -80px; */ padding-right: 80px; } .footer .grid-container { grid-template-columns: 1fr; gap: 40px; } .bottom-links { flex-direction: column; align-items: flex-start; gap: 20px; } .legal-footer { text-align: left; } .links-grid { order: -1; border-bottom: 1px solid #2b354d; padding-bottom: 30px; gap: 48px; } .bottom-links { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 768px) { .links-grid { grid-template-columns: 1fr; padding-bottom: 30px; } .links-grid .column_title { margin-bottom: 32px; } .footer-form .form form { flex-direction: column; } .footer .hs-button.primary.large { width: 100%; } .bottom-links { gap: 48px; padding-top: 48px; margin-top: 48px; } .legal-footer, .legal-links { display: flex; flex-direction: column; } .legal-footer { gap: 48px; } .legal-links { gap: 16px; } }