/** * 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; /* Contain horizontal bleed WITHOUT becoming a scroll container. Must be `clip`, NOT `hidden`: on iOS Safari, `overflow-x: hidden` on body turns it into a scroll container and silently BREAKS every `position: sticky` descendant (e.g. the Story Highlights forced-scroll pin) — it works on desktop Chrome but not iOS. `clip` clips the same way but creates no scroll container, so sticky keeps working. (Same rule + reasoning as .body-container-wrapper.) */ 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 { display: flex; flex-wrap: wrap; 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: 0; 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; } @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 { /* Brand — legacy aliases; the brand colours are now driven by the Theme Settings "Brand colours" group (theme.colours.*). The full 50–950 tint scales below stay fixed; only each scale's BASE shade is theme-driven (see the per-scale "• base ← theme" lines). */ --white: #FFFFFF; --grey: #383f47; --cardBorderColour: #E4E4E4; --bodyColour: #141517; --ctaPrimaryColour: #a1bf24; /* CTA / Button (lime) */ --primaryColour: #13192d; /* dark navy text/base (= Foundation) */ /* ============================================================ Entelect Design System palette Source: Figma — Entelect Design System (node 2092:425) "• base" marks the default/base shade of each scale. ============================================================ */ /* Foundation (neutral) */ --foundation-50: #f5f7fa; --foundation-100: #edf0f5; --foundation-200: #dde2eb; --foundation-300: #bcc4d1; --foundation-400: #9da4b2; --foundation-500: #7b8194; --foundation-600: #555c70; --foundation-700: #3b4257; --foundation-800: #252c42; --foundation-900: #13192d; /* • base ← theme (Foundation dark) */ --foundation-950: #0d1220; /* ← theme (Canvas darkest) */ /* Signal (deep blue) */ --signal-50: #f8f9fa; --signal-100: #ebeef1; --signal-200: #dadfe5; --signal-300: #b4bfcb; --signal-400: #8f9fb1; --signal-500: #6f839a; --signal-600: #566d89; --signal-700: #385474; --signal-800: #1f3e62; --signal-900: #062951; /* • base ← theme (Signal deep blue) */ --signal-950: #052141; /* Azure (blue) */ --azure-50: #f3f9fc; --azure-100: #e8f3f9; --azure-200: #cae2f1; --azure-300: #a3cde7; --azure-400: #75b5da; --azure-500: #479cce; --azure-600: #1983c2; /* • base ← theme (Primary / Azure) */ --azure-700: #156fa5; --azure-800: #125c88; --azure-900: #0e486b; --azure-950: #0a344e; /* Neon Pulse (lime) — scale defines 50–600 + 950 */ --neon-pulse-50: #f7faed; --neon-pulse-100: #f1f5de; --neon-pulse-200: #e7efc8; --neon-pulse-300: #d9e5a7; --neon-pulse-400: #c7d97c; --neon-pulse-500: #b4cc50; /* ← theme (Accent / Lime) */ --neon-pulse-600: #a1bf24; /* • base ← theme (CTA / Button) */ --neon-pulse-950: #404c0e; /* Signal Teal (teal) */ --signal-teal-50: #f2f9fa; --signal-teal-100: #e6f4f5; --signal-teal-200: #bfe3e6; --signal-teal-300: #99d2d7; --signal-teal-400: #67bbc2; --signal-teal-500: #2ca1ab; --signal-teal-600: #018e9a; /* • base ← theme (Teal) */ --signal-teal-700: #017983; --signal-teal-800: #01636c; --signal-teal-900: #014e55; --signal-teal-950: #00393e; /* Codebase Green (green) */ --codebase-green-50: #f4f9f6; --codebase-green-100: #e9f3ec; --codebase-green-200: #cde4d4; --codebase-green-300: #a8d1b3; --codebase-green-400: #7db98e; --codebase-green-500: #51a268; --codebase-green-600: #268b42; /* • base ← theme (Green) */ --codebase-green-700: #207638; --codebase-green-800: #1b612e; --codebase-green-900: #154c24; --codebase-green-950: #0f381a; /* Semantic — Error (Figma) */ --error-50: #fff0ef; --error-100: #ffdfdb; --error-200: #ffc5c0; --error-300: #ff9e96; --error-400: #ff6b5e; --error-500: #f84233; --error-600: #e22618; /* • base */ --error-700: #ba1f14; --error-800: #961d14; --error-900: #7a1e17; --error-950: #3f0f0b; /* Semantic — Warning (Figma) */ --warning-50: #fff6ea; --warning-100: #ffeacf; --warning-200: #fed1a0; --warning-300: #fdb169; --warning-400: #fa8735; --warning-500: #f86816; --warning-600: #e74e0f; /* • base */ --warning-700: #ba390f; --warning-800: #8f2e13; --warning-900: #712813; --warning-950: #3b1409; /* Semantic tokens (Figma) */ --text-primary: var(--foundation-900); /* = Foundation (theme-driven) */ --text-accent: #b4cc50; /* ← theme (Text accent, lime tagline accent) */ --bg-secondary: var(--foundation-50); /* #f5f7fa */ --panel-primary: var(--white); /* #ffffff */ /* Dark-design hairline — opaque slate divider/border used on the dark canvas (e.g. the hero/logo-grid bordered logo grids). From Figma node 195:5526. */ --border-grid: #272e47; } /* ============================================================ Entelect Design System — elevation / shadow scale Source: Figma — Entelect Design System (node 2518:34130) Values converted to rem (1rem = 10px). Shadow colour = foundation-900 (#13192d). Usage: box-shadow: var(--shadow-md); ============================================================ */ :root { --shadow-xs: 0 0.1rem 0.2rem 0 rgba(19, 25, 45, 0.08); --shadow-sm: 0 0.2rem 0.4rem 0 rgba(19, 25, 45, 0.08); --shadow-md: 0 0.4rem 0.8rem 0 rgba(19, 25, 45, 0.1); --shadow-lg: 0 0.8rem 1.6rem -0.2rem rgba(19, 25, 45, 0.1); --shadow-xl: 0 1.2rem 2.4rem -0.4rem rgba(19, 25, 45, 0.12); --shadow-2xl: 0 0.6rem 1.2rem -0.3rem rgba(19, 25, 45, 0.08), 0 2.8rem 5.6rem -1.4rem rgba(19, 25, 45, 0.15); --shadow-3xl: 0 1.2rem 2.4rem -0.6rem rgba(19, 25, 45, 0.08), 0 5rem 10rem -2.5rem rgba(19, 25, 45, 0.15); } /* ============================================================ Entelect Design System — corner radius scale Source: Figma — Entelect Design System (node 2460:20668) Values converted to rem (1rem = 10px). Usage: border-radius: var(--radius-base); ============================================================ */ :root { --radius-none: 0; --radius-xs: 0.6rem; /* 6px */ --radius-sm: 0.8rem; /* 8px */ --radius-md: 1.2rem; /* 12px */ --radius-base: 1.6rem; /* 16px */ --radius-lg: 2rem; /* 20px */ --radius-xl: 2.4rem; /* 24px */ --radius-max: 999.9rem; /* pill / fully rounded (9999px) */ } a { text-decoration: none; color: var(--primaryColour); } .btn { outline: none; cursor: pointer; font-size: 1.4rem; text-wrap: nowrap; font-weight: 700; text-align: center; border-radius: 0.5rem; color: var(--white); display: inline-flex; text-decoration: none; padding: 2.2rem 3.5rem; transition: all 250ms ease; background-color: var(--ctaPrimaryColour); border: 0.2rem solid var(--ctaPrimaryColour); } .hs-button.primary.large { outline: none; cursor: pointer; font-size: 1.4rem; text-wrap: nowrap; font-weight: 700; text-align: center; border-radius: 0.5rem; color: var(--white); display: inline-flex; text-decoration: none; padding: 2.2rem 3.5rem; transition: all 250ms ease; background-color: var(--ctaPrimaryColour); border: 0.2rem solid var(--ctaPrimaryColour); box-shadow: 0.5rem 0.5rem 4rem 0 rgba(161, 191, 36, .3); } .hs-button.primary.large:hover { color: var(--primaryColour); border: 0.2rem solid transparent; background-color: var(--white); box-shadow: 0.5rem 0.5rem 4rem 0 rgba(161, 191, 36, .3); } .btn:hover { color: var(--primaryColour); border: 0.2rem solid transparent; background-color: var(--white); box-shadow: 0.5rem 0.5rem 4rem 0 rgba(161, 191, 36, .3); } .btn.outline { box-shadow: none; color: var(--primaryColour); background-color: var(--white); } .btn.outline:hover { color: var(--ctaPrimaryColour); background-color: var(--white); border: 0.2rem solid var(--ctaPrimaryColour); box-shadow: 0.5rem 0.5rem 4rem 0 rgba(161, 191, 36,.3); } .btn.filter { color: #1F4659; border-color: #141517; background-color: #fff; box-shadow: none; } .btn.filter.active { color: #fff; border-color: #00A9F3; background-color: #00A9F3; } .btn.filter:hover { color: #fff; border-color: #00A9F3; background-color: #00A9F3; box-shadow: none; } .btn.link { gap: 0.5rem; padding: 0; border: none; font-weight: 600; font-size: 1.4rem; align-items: center; position: relative; text-decoration: none; transition: all 0ms ease; background-color: transparent; color: var(--ctaPrimaryColour); } .btn.link:before { content: ""; width: 100%; display: block; bottom: -0.3rem; left: 0; position: absolute; height: 0.2rem; background-color: var(--ctaPrimaryColour); } .btn.link:after { content: ""; width: 1rem; height: 1rem; display: block; background-repeat: no-repeat; background-image: url('https://20155276.fs1.hubspotusercontent-na1.net/hubfs/20155276/Learn%20More%20Arrow.svg'); } .btn.no-link { cursor: auto; border: none; padding-left: 0; padding-right: 0; color: var(--primaryColour); background-color: transparent; } .btn#menu { width: 100%; padding: 0; height: 4rem; border: none; max-width: 4rem; background-color: transparent; } .btn.scroll { gap: 0.5rem; padding: 0; border: none; color: #141517; align-items: center; background-color: transparent; } .btn.pricing-btn { font-size: 1.4rem; letter-spacing: 0; text-align: center; line-height: 1.2rem; font-weight: 700; padding: 1rem 2.8rem; } /* Dark-design lime pill (Figma "Components/Button/Fill/Dark") — solid lime pill with dark navy label. Used on the dark Entelect canvas (hero, etc.). */ .btn.pill { color: var(--foundation-900); font-size: 1.6rem; font-weight: var(--fontWeightMedium); padding: 1.1rem 2.4rem; border-radius: var(--radius-max, 999.9rem); background-color: var(--neon-pulse-600); border-color: var(--neon-pulse-600); box-shadow: none; } .btn.pill:hover { color: var(--foundation-900); background-color: var(--neon-pulse-500); border-color: var(--neon-pulse-500); box-shadow: 0.4rem 0.4rem 4rem 0 rgba(180, 204, 80, 0.3); } /* Glass pill (Figma "Components/Button/Fill/Light" on the dark canvas) — translucent frosted pill with white label; the secondary CTA beside a lime pill (e.g. homepage hero "Who we are"). */ .btn.pill.ghost { color: var(--white); background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); } .btn.pill.ghost:hover { color: var(--white); background-color: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); box-shadow: none; } :root { --primaryFont: var(--font-primary); /* alias → Theme Settings "Fonts › Primary" (default DM Sans) */ --secondaryFont: var(--font-primary); /* alias → same primary family */ --fontWeightLight: 300; --fontWeightRegular: 400; --fontWeightMedium: 500; --fontWeightSemiBold: 600; --fontWeightBold: 700; } html { font-size: 62.5%; } h1, .h1 { margin: 0; font-size: 6rem; letter-spacing: 0; line-height: 6.5rem; margin-bottom: 2rem; font-family: var(--primaryFont); font-weight: var(--fontWeightSemiBold); } @media (max-width: 991px) { h1, .h1 { font-size: 4rem; line-height: 5rem; } } @media (max-width: 991px) { h1 br, .h1 br { display: none; } } .hs-landing-page h1 { font-size: 5rem; line-height: 6rem; } h2 { margin: 0; font-size: 4.5rem; letter-spacing: 0; line-height: 5.5rem; margin-bottom: 2rem; font-family: var(--primaryFont); font-weight: var(--fontWeightSemiBold); } @media (max-width: 768px) { h2 { font-size: 3.5rem; line-height: 4.5rem; } } h2:last-child { margin-bottom: 0; } h3 { margin: 0; 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: 0; } h4 { margin: 0; font-size: 2.5rem; letter-spacing: 0; line-height: 3rem; margin-bottom: 2rem; font-family: var(--primaryFont); font-weight: var(--fontWeightSemiBold); } h4:last-child { margin-bottom: 0; } h5 { margin: 0; font-size: 2.0rem; letter-spacing: 0; line-height: 3rem; margin-bottom: 2rem; font-family: var(--primaryFont); font-weight: var(--fontWeightSemiBold); } @media (max-width: 768px) { h5 { font-weight: var(--fontWeightMedium); } } h5:last-child { margin-bottom: 0; } ul { margin: 0; padding-left: 1.8rem; margin-bottom: 2rem; } ul:last-child { margin-bottom: 0 } p, li { margin: 0; font-size: 1.6rem; letter-spacing: 0; line-height: 2.5rem; margin-bottom: 2rem; font-family: var(--secondaryFont); font-weight: var(--fontWeightRegular); } p:last-child, li:last-child { margin-bottom: 0 } /* ============================================================ Entelect Design System — typography scale (responsive) Source: Figma — 2094:6273 (Desktop) / 2103:14494 (Tablet) / 2103:14884 (Mobile) px to rem (1rem = 10px). Desktop = base; Tablet overrides at max-width:1024px; Mobile overrides at max-width:768px. font-size + line-height are responsive; letter-spacing is held at the desktop value (per-breakpoint diffs are sub-pixel). Compose a text style with: font-family: var(--font-primary); font-weight: var(--fontWeightMedium); font-size: var(--text-2xl); line-height: var(--leading-2xl); letter-spacing: var(--tracking-2xl); Weights: light 300 / regular 400 / medium 500 / semibold 600 (in the :root at top). Tagline (uppercase accent): font-family: var(--primaryFont) (DM Sans); text-transform: uppercase; + the --tagline-* size scale. (All __tagline elements render DM Sans as of 2026-07-15.) NOTE: the site now loads + renders DM Sans (base.html), and --primaryFont/--secondaryFont point at --font-primary. The h1-h5 element styles above still use their own rem sizes — mapping those onto the --text-* scale is the only remaining (optional) migration step. ============================================================ */ :root { /* Primary family — driven by the Theme Settings "Fonts › Primary" field (default DM Sans). --primaryFont/--secondaryFont (above) both alias this, so one setting controls all typography. */ --font-primary: "DM Sans", sans-serif; /* Font size — Desktop */ --text-xs: 1.2rem; --text-sm: 1.4rem; --text-base: 1.6rem; --text-lg: 2rem; --text-xl: 2.4rem; --text-2xl: 3.2rem; --text-3xl: 3.6rem; --text-4xl: 4.8rem; --text-5xl: 6rem; --text-6xl: 8rem; --text-7xl: 10.4rem; /* Line height — Desktop */ --leading-xs: 1.6rem; --leading-sm: 2rem; --leading-base: 2.4rem; --leading-lg: 2.8rem; --leading-xl: 3.2rem; --leading-2xl: 3.8rem; --leading-3xl: 4.2rem; --leading-4xl: 5.2rem; --leading-5xl: 6.2rem; --leading-6xl: 8rem; --leading-7xl: 9.6rem; /* Letter spacing — static across breakpoints */ --tracking-xs: 0; --tracking-sm: 0; --tracking-base: 0; --tracking-lg: -0.05rem; --tracking-xl: -0.025rem; --tracking-2xl: -0.05rem; --tracking-3xl: 0; --tracking-4xl: 0.05rem; --tracking-5xl: 0.05rem; --tracking-6xl: 0.05rem; --tracking-7xl: 0; /* Tagline (Tomorrow) */ --tagline-2xs: 1rem; --tagline-xs: 1.2rem; --tagline-sm: 1.4rem; --tagline-base: 1.6rem; --tagline-lg: 2rem; --leading-tagline-2xs: 1.2rem; --leading-tagline-xs: 1.4rem; --leading-tagline-sm: 1.6rem; --leading-tagline-base: 2rem; --leading-tagline-lg: 2.4rem; --tracking-tagline-2xs: 0.075rem; --tracking-tagline-xs: 0.12rem; --tracking-tagline-sm: 0.14rem; --tracking-tagline-base: 0.16rem; --tracking-tagline-lg: 0.2rem; } /* Tablet — max-width: 1024px */ @media (max-width: 1024px) { :root { --text-xl: 2.2rem; --text-2xl: 2.8rem; --text-3xl: 3.2rem; --text-5xl: 4.8rem; --text-6xl: 6.4rem; --text-7xl: 8rem; --leading-xl: 2.8rem; --leading-2xl: 3.6rem; --leading-3xl: 3.6rem; --leading-5xl: 5.4rem; --leading-6xl: 6.4rem; --leading-7xl: 8rem; --tagline-lg: 1.8rem; } } /* Mobile — max-width: 768px */ @media (max-width: 768px) { :root { --text-lg: 1.8rem; --text-xl: 2rem; --text-2xl: 2.4rem; --text-3xl: 2.8rem; --text-5xl: 3.6rem; --text-6xl: 4.4rem; --text-7xl: 5.6rem; --leading-lg: 2.6rem; --leading-2xl: 3.2rem; --leading-3xl: 3.2rem; --leading-5xl: 4.2rem; --leading-6xl: 4.8rem; --leading-7xl: 5.6rem; --tagline-lg: 1.6rem; --tagline-base: 1.4rem; --leading-tagline-base: 1.6rem; } } .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: 0; } .form form fieldset.form-columns-2 .hs-form-field .input { margin-right: 0; margin-bottom: 0; } .form input[type="text"], .form input[type="email"], .form input[type="tel"] { width: 100% !important; height: 5.5rem; outline: none; display: block; border-radius: 0.4rem; padding: 0 1rem; border: 0.1rem solid #141517; } .form select { width: 100%; height: 5.5rem; outline: none; display: block; border-radius: 0.4rem; padding: 0 1rem; border: 0.1rem solid #141517; } .form textarea { width: 100% !important; min-height: 10rem; outline: none; display: block; padding: 2rem; margin: 0 !important; border-radius: 0.4rem; border: 0.1rem solid #141517; } .form .hs-fieldtype-file > label { display: flex; cursor: pointer; overflow: hidden; padding-left: 1rem; border-radius: 0.5rem; align-items: center; border: 0.2rem solid var(--ctaPrimaryColour); justify-content: space-between; } .form .hs-fieldtype-file > label:after { color: #fff; content: "Upload"; padding: 2.33rem 4.88rem; background-color: var(--ctaPrimaryColour); font-weight: var(--fontWeightBold); } .form .hs-fieldtype-file .input { display: none; } .form .hs-form-field { margin-bottom: 0rem; position: relative; } .form .hs-form-field .hs-error-msgs, .form .hs_error_rollup .hs-error-msgs { margin: 0; padding: 0; list-style: none; } /* Per-field errors float under their own input so they never shift the form's layout. */ .form .hs-form-field .hs-error-msgs { position: absolute; } /* The rollup is a sibling sitting immediately before .hs_submit. Absolute positioning collapsed it to zero height, so its message painted on top of the submit button and swallowed the click. It stays in flow and pushes the button down instead. */ .form .hs_error_rollup .hs-error-msgs { margin-bottom: 1.2rem; } .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: 0; } .form .legal-consent-container .hs-form-booleancheckbox-display { display: flex; align-items: center; justify-content: start; position: relative; /* flex-direction: row-reverse; justify-content: flex-end; */ } /* Visually hidden, NOT display:none — the input has to stay focusable and present in the accessibility tree. The box you see is the span:before below. position:relative on the label keeps this anchored here so focusing it doesn't jump the page. */ .form .legal-consent-container .hs-form-booleancheckbox-display input[type=checkbox] { position: absolute; width: 0.1rem; height: 0.1rem; margin: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .form .legal-consent-container .hs-form-booleancheckbox-display input[type=checkbox]:focus-visible + span:before { outline: 0.2rem solid #00A9F3; outline-offset: 0.2rem; } .form .legal-consent-container .hs-form-booleancheckbox-display span { gap: 1.2rem; margin: 0; display: flex; align-items: center; font-size: 1.5rem; color: #141517; letter-spacing: 0; line-height: 2.5rem; 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: 0.5rem; border: 0.1rem 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/entelect_corporate/images/check.svg); } .form.subscribe > h3 { font-size: 2rem; color: var(--white); text-transform: uppercase; } .form.subscribe input[type="email"] { background-color: transparent; border: 0.2rem solid var(--white); } .form.subscribe input[type="email"]::placeholder { color: var(--white); } .form.subscribe input[type="submit"] { border: none; outline: none; cursor: pointer; padding: 1rem 2rem; display: inline-flex; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; color: var(--primaryColour); background-color: var(--white); } .form.subscribe-cta-form form { display: flex; } .form.subscribe-cta-form form fieldset.form-columns-2 { gap: 1rem; grid-template-columns: 15ch 1fr; } .form.subscribe-cta-form form input[type=submit] { height: 4rem; outline: none; border: none; cursor: pointer; padding: 0 1.5rem; border-radius: 0; color: var(--white); background-color: var(--primaryColour); } .hs-search-field__bar.form form .hs-search-field__input { width: 100%; height: 5rem; max-width: 37rem; min-width: 37rem; font-size: 1.6rem; border-radius: 0.7rem; border: 0.2rem 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: 2rem; height: 2rem; top: 0; bottom: 0; right: 2.3rem; margin: auto 0; position: absolute; background: none; border: none; outline: none; padding: 0; display: flex; align-items: center; } .hs-search-field__bar.form form .search-icon svg { width: 100%; max-width: 2rem; } .form .hs_submit.hs-submit .actions { display: flex; justify-content: start; } .card { background: var(--white); border: 0.1rem solid var(--cardBorderColour); box-shadow: 0.5rem 0.5rem 2.5rem 0.4rem rgba(22,27,48,0.05); border-radius: 0.7rem; } .container { width: 100%; margin: 0 auto; padding: 0 2rem; max-width: var(--containerWidth); } .cta-container { gap: 1.5rem; 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: 144rem; --verticalSpacing: 8.0rem; --swiper-pagination-bottom: -3rem; --reveal-ease: cubic-bezier(0.38, 0.21, 0, 0.92); --reveal-duration: 0.6s; --reveal-shift: 4rem; } .no-scroll { overflow-y: hidden; } * { font-family: var(--primaryFont); } body { font-size: 1.6rem; /* Contain horizontal bleed via `clip` (NOT `hidden`) — `hidden` makes body a scroll container and breaks `position: sticky` on iOS Safari (e.g. Story Highlights forced-scroll). Mirrors normalise.css. */ overflow-x: clip; } /* ============================================================ SCROLL REVEAL — staggered fade + slide-up (entrance on load + on scroll into view). Matches the Entelect Framer prototype: each element starts faded out and shifted DOWN by --reveal-shift, then fades to 1 and slides up to 0, eased with --reveal-ease. A [data-reveal-group] cascades its [data-reveal] descendants in 40ms steps (the engine in scripts/main.js sets --reveal-delay). Above-the-fold groups (the hero) fire on load, so this is the entrance too. Per-element distance is tunable via --reveal-shift (Framer used 20–50px). Gated on html.reveal-ready (set in before first paint, and only while JS is live) so content is never hidden without a way to appear; reduced-motion shows everything instantly. See scripts/main.js + templates/layouts/base.html. ============================================================ */ html.reveal-ready [data-reveal] { opacity: 0; transform: translateY(var(--reveal-shift, 4rem)); } html.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: translateY(0); transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease); transition-delay: var(--reveal-delay, 0ms); } /* Slide-in-from-the-left variant — data-reveal="slide-left" slides an element in horizontally (translateX instead of the default translateY) while fading in; used for the stories-listing filter tabs (grouped → one-by-one). Placed BEFORE the reduced-motion query so that query resets the transform under reduced-motion (equal specificity, later rule wins for the start state). */ html.reveal-ready [data-reveal="slide-left"] { transform: translateX(calc(-1 * var(--reveal-shift, 4rem))); } html.reveal-ready [data-reveal="slide-left"].is-revealed { transform: translateX(0); } @media (prefers-reduced-motion: reduce) { html.reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; } } /* Fade-only reveal (no slide) — put data-reveal="fade" on any element to fade it in where it is. */ html.reveal-ready [data-reveal="fade"], html.reveal-ready [data-reveal="fade"].is-revealed { transform: none; } /* Slide-only reveal (no fade) — put data-reveal="slide" on an element to slide it up while staying fully opaque (used for buttons). */ html.reveal-ready [data-reveal="slide"] { opacity: 1; } /* Line-by-line reveal for [data-reveal-lines]: starts hidden (no flash of un-split text); the engine (scripts/main.js) splits it into .reveal-line clips, each holding a .reveal-line__inner that SLIDES UP from behind the clip (masked slide, no fade), staggered per line. padding/margin give descenders room inside the clip without changing line spacing. */ html.reveal-ready [data-reveal-lines] { opacity: 0; } html.reveal-ready [data-reveal-lines].is-split { opacity: 1; } .reveal-line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; } .reveal-line__inner { display: block; } html.reveal-ready .reveal-line__inner[data-reveal] { opacity: 1; transform: translateY(115%); } html.reveal-ready .reveal-line__inner[data-reveal].is-revealed { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.reveal-ready [data-reveal-lines] { opacity: 1; } html.reveal-ready .reveal-line__inner[data-reveal] { transform: none; } } /* Fade + slide variant ([data-reveal-lines="fade"], e.g. the hero body): each line slides up a little AND fades in (no clip), rather than the masked slide-up used for headings. */ [data-reveal-lines="fade"] .reveal-line { overflow: visible; padding-bottom: 0; margin-bottom: 0; } html.reveal-ready [data-reveal-lines="fade"] .reveal-line__inner[data-reveal] { opacity: 0; transform: translateY(1.5rem); } html.reveal-ready [data-reveal-lines="fade"] .reveal-line__inner[data-reveal].is-revealed { opacity: 1; transform: translateY(0); } /* ============================================================ ORBS — reusable decorative glow layer, anchored to a module section. Driven by the "Orbs" field group (CONTENT tab) that any module can include; rendered as the first child of the section (see SKILL.md "Orbs group"). The host section must be position:relative with its content above .orbs (e.g. .stats / .hero set their .container to z-index:1). NO overflow clip here — orbs intentionally BLEED beyond the module and overlap neighbouring sections/modules (one continuous ambient glow). For this to work the host section must also NOT set overflow:hidden (e.g. .hero delegates its background clipping to .hero__bg so .hero itself stays un-clipped). Horizontal bleed is contained by body{overflow-x:hidden}. Sits below content, never intercepts clicks. ============================================================ */ .orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* Each orb is a soft radial-gradient circle; side/top/size/colour are set per-instance in the module's scope_css (see module.html). Orbs gently float in place — transform-only so it's GPU-composited (no layout/paint per frame); each is desynced so they drift independently, and motion is disabled under prefers-reduced-motion. */ .orb { position: absolute; animation: orb-float 22s ease-in-out infinite; } /* Desync each orb (varied speed + negative start offset) so they don't move in lockstep */ .orb:nth-child(2n) { animation-duration: 26s; animation-delay: -7s; } .orb:nth-child(3n) { animation-duration: 30s; animation-delay: -14s; } .orb:nth-child(4n) { animation-duration: 24s; animation-delay: -3s; } @keyframes orb-float { 0% { transform: translate(0, 0); } 20% { transform: translate(3.2rem, -2.4rem); } 40% { transform: translate(-2.4rem, 2rem); } 60% { transform: translate(2rem, 3.2rem); } 80% { transform: translate(-3.2rem, -1.6rem); } 100% { transform: translate(0, 0); } } @media (prefers-reduced-motion: reduce) { .orb { animation: none; } } /* ── Shimmer grid ────────────────────────────────────────────────────────── A faint dot matrix with a soft spotlight that brightens the dots near the cursor (the Framer "shimmer grid": framer.university/resources/shimmer-grid-component-in-framer, as used on the prototype's stats section). Reusable on any position:relative host whose content sits above z-index 0. Place `
` as a direct child, OUTSIDE .container. Base dots are always visible; ::before is a brighter copy revealed only inside a radial spotlight at the cursor (--mx/--my set by scripts/main.js). Dot geometry matches Framer (0.6px dot on a 12px grid → 0.06rem / 1.2rem). */ .shimmer-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(color-mix(in srgb, var(--foundation-50) 6%, transparent) 0.06rem, transparent 0.14rem); background-size: 1.2rem 1.2rem; /* Fade the dots out at the top & bottom edges so the grid blends into the section. */ -webkit-mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent); mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent); } .shimmer-grid::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--foundation-50) 55%, transparent) 0.06rem, transparent 0.14rem); background-size: 1.2rem 1.2rem; /* Reveal the bright dots only within a soft spotlight centred on the cursor. */ -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), black, transparent 22rem); mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), black, transparent 22rem); opacity: 0; transition: opacity 0.45s ease; } .shimmer-grid.is-active::before { opacity: 1; } @media (prefers-reduced-motion: reduce) { .shimmer-grid::before { display: none; } } .menu-underlay { position: fixed; inset: 0; z-index: 1000; display: none; background-color: rgba(13, 18, 32, 0.6); } .mega-menu-container.menu-open .menu-underlay { display: block; } .mega-menu-container { --menu-bg: var(--signal-900); /* #062951 — overridable via the Background Colour field */ --menu-text: var(--white); --menu-text-dim: var(--foundation-300); --menu-hairline: rgba(255, 255, 255, 0.12); --menu-hover: rgba(255, 255, 255, 0.06); position: relative; z-index: 1000; background-color: var(--menu-bg); color: var(--menu-text); font-family: var(--font-primary); } /* ---------- Transparent-over-hero nav (dark "industries" pages only) ---------- The nav is fixed and transparent at the top of the page, gaining its background colour once scrolled (state class added by module.js). Scoped via :has() so the site's light pages keep their normal solid, in-flow bar. */ body:has(.home-page) .mega-menu-container, body:has(.industries-page) .mega-menu-container, body:has(.customer-story-page) .mega-menu-container, body:has(.customer-stories-page) .mega-menu-container, body:has(.what-we-do-page) .mega-menu-container, body:has(.leadership-page) .mega-menu-container, body:has(.about-page) .mega-menu-container, body:has(.capabilities-page) .mega-menu-container, body:has(.plain-page) .mega-menu-container, body:has(.thank-you-page) .mega-menu-container, body:has(.error-404-page) .mega-menu-container, body:has(.error-500-page) .mega-menu-container, body:has(.contact-page) .mega-menu-container { position: fixed; top: 0; left: 0; right: 0; background-color: transparent; transition: background-color 0.3s ease, transform 0.35s ease; } /* Scrim behind the fixed nav — a ::before that fades top→bottom to transparent (NO solid fill, NO hard bottom edge). It extends below the bar so the fade lands under the links, keeping the white text readable. Revealed once scrolled and hidden again while the nav slides away. Scoped to the dark single-canvas pages only; light pages keep their normal solid, in-flow bar. */ body:has(.home-page) .mega-menu-container::before, body:has(.industries-page) .mega-menu-container::before, body:has(.customer-story-page) .mega-menu-container::before, body:has(.customer-stories-page) .mega-menu-container::before, body:has(.what-we-do-page) .mega-menu-container::before, body:has(.leadership-page) .mega-menu-container::before, body:has(.about-page) .mega-menu-container::before, body:has(.capabilities-page) .mega-menu-container::before, body:has(.plain-page) .mega-menu-container::before, body:has(.thank-you-page) .mega-menu-container::before, body:has(.error-404-page) .mega-menu-container::before, body:has(.error-500-page) .mega-menu-container::before, body:has(.contact-page) .mega-menu-container::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 200%; background: linear-gradient(to bottom, var(--menu-bg) 0%, var(--menu-bg) 25%, transparent 100%); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: -1; } body:has(.home-page) .mega-menu-container.is-scrolled:not(.is-hidden)::before, body:has(.industries-page) .mega-menu-container.is-scrolled:not(.is-hidden)::before, body:has(.customer-story-page) .mega-menu-container.is-scrolled:not(.is-hidden)::before, body:has(.customer-stories-page) .mega-menu-container.is-scrolled:not(.is-hidden)::before, body:has(.what-we-do-page) .mega-menu-container.is-scrolled:not(.is-hidden)::before, body:has(.leadership-page) .mega-menu-container.is-scrolled:not(.is-hidden)::before, body:has(.about-page) .mega-menu-container.is-scrolled:not(.is-hidden)::before, body:has(.capabilities-page) .mega-menu-container.is-scrolled:not(.is-hidden)::before, body:has(.plain-page) .mega-menu-container.is-scrolled:not(.is-hidden)::before, body:has(.thank-you-page) .mega-menu-container.is-scrolled:not(.is-hidden)::before, body:has(.error-404-page) .mega-menu-container.is-scrolled:not(.is-hidden)::before, body:has(.error-500-page) .mega-menu-container.is-scrolled:not(.is-hidden)::before, body:has(.contact-page) .mega-menu-container.is-scrolled:not(.is-hidden)::before { opacity: 1; } /* Hide on scroll-down / show on scroll-up (headroom pattern). Dark fixed pages only — a light page's bar is in-flow and scrolls away naturally. */ body:has(.home-page) .mega-menu-container.is-hidden, body:has(.industries-page) .mega-menu-container.is-hidden, body:has(.customer-story-page) .mega-menu-container.is-hidden, body:has(.customer-stories-page) .mega-menu-container.is-hidden, body:has(.what-we-do-page) .mega-menu-container.is-hidden, body:has(.leadership-page) .mega-menu-container.is-hidden, body:has(.about-page) .mega-menu-container.is-hidden, body:has(.capabilities-page) .mega-menu-container.is-hidden, body:has(.plain-page) .mega-menu-container.is-hidden, body:has(.thank-you-page) .mega-menu-container.is-hidden, body:has(.error-404-page) .mega-menu-container.is-hidden, body:has(.error-500-page) .mega-menu-container.is-hidden, body:has(.contact-page) .mega-menu-container.is-hidden { transform: translateY(-100%); } /* An open dropdown / drawer needs a SOLID bar to connect with the panel below it (the scrolled state uses the gradient scrim above, not a solid fill). On light pages the bar is already solid navy via the base rule, so this is a no-op there. */ .mega-menu-container.has-open, .mega-menu-container.menu-open { background-color: var(--menu-bg) !important; } /* Reset global list/paragraph spacing that would leak into the menu */ .mega-menu-container ul, .mega-menu-container li { margin: 0; padding: 0; list-style: none; line-height: normal; } .mega-menu-container a { color: var(--menu-text); text-decoration: none; } .mega-menu-container .ico { flex-shrink: 0; display: block; } /* ---------- Nav bar ---------- */ /* .nav-bar is the positioned ancestor the full-width .dropdown anchors to (top:100%; left:0; width:100%). Do NOT add position:relative to .nav-item. */ .mega-menu-container .nav-bar { position: relative; padding: 1.6rem 0; } .mega-menu-container .nav-bar-inner { display: flex; align-items: center; gap: 2.4rem; height: 6.4rem; } .mega-menu-container .logo { display: inline-flex; align-items: center; flex-shrink: 0; } .mega-menu-container .logo img { display: block; width: auto; height: 3.2rem; } /* Breathing room between the logo and the nav links (matches the Figma logo block + gutter). Desktop only — reset in the drawer at ≤1024px below. */ .mega-menu-container .nav-bar-inner > .logo { margin-right: 5rem; } .mega-menu-container .nav-toggle { display: none; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin-left: auto; padding: 0; color: var(--menu-text); background: none; border: 0; cursor: pointer; } .mega-menu-container .nav-toggle .ico { width: 2.4rem; height: 2.4rem; } /* ---------- Nav links row ---------- */ .mega-menu-container .nav-links { flex: 1; display: flex; align-items: center; gap: 2.4rem; min-width: 0; } .mega-menu-container .drawer-head { display: none; } .mega-menu-container .links { flex: 1; display: flex; align-items: center; min-width: 0; } .mega-menu-container .nav-item { display: flex; align-items: center; } .mega-menu-container .nav-link { display: inline-flex; align-items: center; gap: 0.4rem; height: 6.4rem; padding: 0 1.2rem; font-family: inherit; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--fontWeightMedium); color: var(--menu-text); white-space: nowrap; background: none; border: 0; cursor: pointer; opacity: 1; transition: opacity 200ms ease; } .mega-menu-container .nav-link .ico-chevron { width: 2rem; height: 2rem; transition: transform 250ms ease; } .mega-menu-container .nav-link:hover { opacity: 1; } .mega-menu-container .nav-item.is-open > .nav-link .ico-chevron { transform: rotate(180deg); } /* ---------- CTA pill — right-aligned "Contact Us" (Figma 308:4453) ---------- .links is flex:1 inside .nav-links, so this sits at the far right of the bar. */ .mega-menu-container .nav-cta { display: inline-flex; align-items: center; gap: 0.6rem; flex: none; padding: 0.9rem 1rem 0.9rem 1.8rem; border-radius: var(--radius-max); background: var(--neon-pulse-600); color: var(--foundation-950); font-family: inherit; font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--fontWeightMedium); white-space: nowrap; transition: background-color 200ms ease; } .mega-menu-container .nav-cta:hover { background: var(--neon-pulse-500); opacity: 1; } .mega-menu-container .nav-cta .ico-arrow { width: 2rem; height: 2rem; flex: none; transition: transform 200ms ease; } .mega-menu-container .nav-cta:hover .ico-arrow { transform: translateX(0.3rem); } /* Mobile drawer: full-width pill below the links */ @media (max-width: 1024px) { .mega-menu-container .nav-cta { width: 100%; justify-content: center; margin-top: 2rem; padding: 1.4rem 2rem; } } /* Dim every nav-bar control except the open one while a dropdown is active */ .mega-menu-container.has-open .nav-link, .mega-menu-container.has-open .region-toggle { opacity: 0.5; } .mega-menu-container.has-open .nav-item.is-open > .nav-link, .mega-menu-container.has-open .nav-link:hover, .mega-menu-container.has-open .region-toggle:hover { opacity: 1; } /* ---------- Dropdown panel (full width) ---------- */ .mega-menu-container .dropdown { position: absolute; top: 100%; left: 0; width: 100%; z-index: 100; display: none; background-color: var(--menu-bg); box-shadow: var(--shadow-2xl); } /* Transparent hover bridge over the nav-bar's bottom padding so the cursor can travel from the nav link into the panel without the hover dropping. */ .mega-menu-container .dropdown::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 2rem; } .mega-menu-container .nav-item.is-open > .dropdown { display: block; } .mega-menu-container .dropdown-inner { padding-top: 4rem; padding-bottom: 8rem; } .mega-menu-container .dropdown-content { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6.4rem 2.4rem; } .mega-menu-container .copy-header { grid-column: 2 / span 10; display: flex; flex-direction: column; gap: 1.3rem; max-width: 40rem; } .mega-menu-container .copy-header .title { font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--fontWeightMedium); color: var(--menu-text); } .mega-menu-container .copy-header .description { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--fontWeightLight); color: var(--menu-text-dim); } /* ---------- Sections (level 2) + child column (level 3) ---------- */ .mega-menu-container .menus { position: relative; grid-column: 2 / span 10; display: flex; } .mega-menu-container .sections { flex: 0 0 50%; max-width: 50%; display: flex; flex-direction: column; } .mega-menu-container .section-link { display: flex; align-items: center; gap: 0.8rem; width: 100%; min-height: 7.2rem; padding: 0.6rem 0; font-family: inherit; font-size: var(--text-2xl); line-height: var(--leading-2xl); letter-spacing: var(--tracking-2xl); font-weight: var(--fontWeightLight); color: var(--menu-text); text-align: left; background: none; border: 0; cursor: pointer; opacity: 0.85; transition: opacity 200ms ease; } .mega-menu-container .section-link:hover { opacity: 1; } /* When a child-bearing section is active, dim the other sections */ .mega-menu-container .menus.has-active .section-link { opacity: 0.5; } .mega-menu-container .menus.has-active .section.is-active > .section-link, .mega-menu-container .menus.has-active .section-link:hover { opacity: 1; } .mega-menu-container .section-link .ico-chevron-right { width: 2.4rem; height: 2.4rem; } .mega-menu-container .section-link .ico-arrow { width: 2.4rem; height: 2.4rem; opacity: 0; transform: translateX(-0.4rem); transition: opacity 200ms ease, transform 200ms ease; } .mega-menu-container .section-link:hover .ico-arrow { opacity: 1; transform: translateX(0); } /* Child column (level 3) — revealed to the right of the sections list */ .mega-menu-container .section .children { position: absolute; top: 0; left: 50%; right: 0; display: none; max-height: 60vh; overflow-y: auto; padding-left: 2.4rem; } .mega-menu-container .section.is-active > .children { display: block; } .mega-menu-container .child-link { display: inline-flex; align-items: center; gap: 0.8rem; min-height: 5.2rem; padding: 0.4rem 0; font-size: 2rem; line-height: 2.6rem; font-weight: var(--fontWeightLight); color: var(--menu-text); opacity: 0.72; transition: opacity 200ms ease; } .mega-menu-container .child-link:hover { opacity: 1; } .mega-menu-container .child-link .ico-arrow { width: 2rem; height: 2rem; opacity: 0; transform: translateX(-0.4rem); transition: opacity 200ms ease, transform 200ms ease; } .mega-menu-container .child-link:hover .ico-arrow { opacity: 1; transform: translateX(0); } /* ---------- Region / country selector ---------- */ .mega-menu-container .region-selector { position: relative; flex-shrink: 0; margin-left: auto; } .mega-menu-container .region-toggle { display: inline-flex; align-items: center; gap: 0.4rem; height: 6.4rem; padding: 0 1.2rem; font-family: inherit; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--fontWeightMedium); color: var(--menu-text); background: none; border: 0; cursor: pointer; opacity: 1; transition: opacity 200ms ease; } .mega-menu-container .region-toggle:hover { opacity: 1; } .mega-menu-container .region-toggle .flag, .mega-menu-container .region-link .flag { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .mega-menu-container .region-toggle .flag img, .mega-menu-container .region-link .flag img { width: 100%; height: 100%; object-fit: cover; display: block; } .mega-menu-container .region-toggle .ico-chevron { width: 2rem; height: 2rem; transition: transform 250ms ease; } .mega-menu-container .region-selector.is-open .region-toggle .ico-chevron { transform: rotate(180deg); } .mega-menu-container .region-dropdown { position: absolute; top: 100%; right: 0; z-index: 100; display: none; min-width: 20rem; padding: 0.8rem 0; background-color: var(--menu-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-xl); } .mega-menu-container .region-selector.is-open .region-dropdown { display: block; } .mega-menu-container .region-link { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.6rem; font-size: var(--text-sm); color: var(--menu-text); opacity: 0.82; transition: opacity 200ms ease, background-color 200ms ease; } .mega-menu-container .region-link:hover { opacity: 1; background-color: var(--menu-hover); } /* ---------- Focus visibility (a11y) ---------- */ .mega-menu-container a:focus-visible, .mega-menu-container button:focus-visible { outline: 0.2rem solid var(--menu-text); outline-offset: 0.2rem; border-radius: 0.2rem; opacity: 1; } /* Label-only items (no link, no dropdown) are not interactive */ .mega-menu-container span.nav-link, .mega-menu-container span.section-link, .mega-menu-container span.child-link { cursor: default; } /* ============================================================ Tablet landscape and below — full-screen accordion drawer ============================================================ */ @media (max-width: 1024px) { .mega-menu-container .nav-toggle { display: inline-flex; } .mega-menu-container .nav-bar-inner > .logo { margin-right: 0; } .mega-menu-container .nav-links { position: fixed; inset: 0; z-index: 1001; width: 100%; height: 100dvh; flex-direction: column; align-items: stretch; gap: 0; padding: 2rem 2.4rem 4rem; overflow-y: auto; background-color: var(--menu-bg); visibility: hidden; transform: translateX(100%); transition: transform 280ms ease, visibility 280ms ease; } .mega-menu-container.menu-open .nav-links { visibility: visible; transform: translateX(0); } /* Sticky: .nav-links is the scrolling drawer and the head is a normal child of it, so on a long menu the close button scrolled away with the rest of the content. */ .mega-menu-container .drawer-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 6.4rem; margin-bottom: 1.6rem; background-color: var(--menu-bg); } .mega-menu-container .nav-close { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; padding: 0; color: var(--menu-text); background: none; border: 0; cursor: pointer; } .mega-menu-container .nav-close .ico { width: 2.4rem; height: 2.4rem; } .mega-menu-container .links { flex: none; flex-direction: column; align-items: stretch; width: 100%; } .mega-menu-container .nav-item { display: block; width: 100%; } .mega-menu-container .nav-link { display: flex; align-items: center; justify-content: space-between; width: 100%; height: auto; padding: 1.6rem 0; font-size: 1.8rem; line-height: 2.4rem; opacity: 1; } /* Accordion dimming on mobile */ .mega-menu-container.has-open .links .nav-link { opacity: 0.45; } .mega-menu-container.has-open .nav-item.is-open > .nav-link { opacity: 1; } /* Dropdown becomes an in-flow accordion panel that SLIDES open/closed — grid-rows 0fr→1fr animates to the real content height (no max-height magic number, no close-jank). visibility flips (immediate on open, delayed until the slide finishes on close) so collapsed nav links stay out of the tab order + a11y tree. */ .mega-menu-container .dropdown { position: static; width: auto; background: none; box-shadow: none; display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 300ms ease, visibility 0s linear 300ms; } .mega-menu-container .dropdown::before { display: none; } .mega-menu-container .nav-item.is-open > .dropdown { /* keep it a grid so grid-template-rows animates. ⚠️ the DESKTOP base rule `.nav-item.is-open > .dropdown { display:block }` (no media query → active here too, same 0,4,0 specificity) would otherwise win and make grid-template-rows inert = snap on open; re-declaring display:grid here (later in source + matching MQ) beats it. */ display: grid; grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 300ms ease, visibility 0s; } .mega-menu-container .dropdown-inner { max-width: none; overflow: hidden; /* clips the panel while the grid row collapses */ min-height: 0; padding: 0 0 0 1.6rem; } /* bottom padding only when open, so it doesn't leak past the 0fr collapse */ .mega-menu-container .nav-item.is-open > .dropdown .dropdown-inner { padding-bottom: 0.8rem; } .mega-menu-container .dropdown-content { display: block; } .mega-menu-container .copy-header { display: none; } .mega-menu-container .menus { position: static; display: block; } .mega-menu-container .sections { flex: none; max-width: none; width: 100%; } .mega-menu-container .section { width: 100%; } .mega-menu-container .section-link { justify-content: space-between; min-height: 0; padding: 1.2rem 0; font-size: 1.6rem; line-height: 2.2rem; letter-spacing: 0; opacity: 0.9; } /* Reuse the right-chevron as an accordion indicator on mobile */ .mega-menu-container .section-link .ico-chevron-right { width: 2rem; height: 2rem; transform: rotate(90deg); transition: transform 250ms ease; } .mega-menu-container .section.is-active > .section-link .ico-chevron-right { transform: rotate(-90deg); } /* Leaf-section arrow stays visible at rest on touch (no hover) */ .mega-menu-container .section-link .ico-arrow, .mega-menu-container .child-link .ico-arrow { display: none; } .mega-menu-container .section .children { position: static; max-height: none; /* reset the desktop level-3 column's max-height:60vh + overflow-y:auto */ overflow: visible; padding-left: 1.6rem; /* Same accordion slide as the dropdown (level-3 child links). */ display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 260ms ease, visibility 0s linear 260ms; } .mega-menu-container .section .children > ul { overflow: hidden; /* clips the child links while the row collapses */ min-height: 0; } .mega-menu-container .section.is-active > .children { display: grid; /* beat the desktop base's `display:block` (see the dropdown note above) */ grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 260ms ease, visibility 0s; } .mega-menu-container .child-link { min-height: 0; padding: 1rem 0; font-size: var(--text-sm); line-height: var(--leading-sm); opacity: 0.85; } /* Region selector pinned to the bottom of the drawer */ .mega-menu-container .region-selector { margin-left: 0; margin-top: 2.4rem; padding-top: 2.4rem; border-top: 0.1rem solid var(--menu-hairline); } .mega-menu-container .region-toggle { height: auto; padding: 0.8rem 0; gap: 0.8rem; } .mega-menu-container .region-dropdown { position: static; display: none; min-width: 0; padding: 0.8rem 0 0; background: none; box-shadow: none; border-radius: 0; } .mega-menu-container .region-selector.is-open .region-dropdown { display: block; } .mega-menu-container .region-link { padding: 1rem 0; } } @media (max-width: 375px) { .mega-menu-container .nav-links { padding: 1.6rem 2rem 4rem; } } /* Respect the device's Reduce Motion setting — the drawer + accordions snap open/closed instead of sliding (consistent with the rest of the theme's reduced-motion handling). ⚠️ must also target the .is-open/.is-active selectors: those re-declare `transition` at a higher specificity, so a bare `.dropdown`/`.children` override would lose when open. */ @media (prefers-reduced-motion: reduce) { .mega-menu-container .nav-links, .mega-menu-container .dropdown, .mega-menu-container .nav-item.is-open > .dropdown, .mega-menu-container .section .children, .mega-menu-container .section.is-active > .children, .mega-menu-container .section-link .ico-chevron-right { transition: none; } } .form-banner { /* padding-top: 12rem; padding-bottom: 12rem; */ } .form-banner .container { gap: 3rem; display: grid; grid-template-columns: 1fr minmax(auto, 57rem); } @media (max-width: 991px) { .form-banner .container { grid-template-columns: 1fr; } } .hs-landing-page .form-banner .form { padding: 5rem 3rem; border-radius: 0.7rem; border: 0.1rem solid #E4E4E4; background-color: #FFFFFF; box-shadow: 0.5rem 0.5rem 2.5rem 0.4rem rgba(22,27,48,0.05); } @media (max-width: 991px) { .hs-landing-page .form-banner .form h3 br { display: none; } } .content-banner { /* padding: var(--verticalSpacing) 0; padding: 10rem 0 15rem; */ } .content-banner .container { gap: 13rem; display: flex; align-items: center; } @media (max-width: 991px) { .content-banner .container { gap: 3rem; } } @media (max-width: 768px) { .content-banner .container { flex-direction: column-reverse; } } .content-banner .container.equal { gap: 3rem; } .content-banner .image { width: 100%; flex-grow: 1; flex-shrink: 0; padding-left: 6.5rem; max-width: 37rem; } @media (max-width: 991px) { .content-banner .image { padding-left: 0rem; } } .content-banner.reverse .image { padding-left: 0; padding-right: 6.5rem; } .content-banner .image img { width: 100%; } .content-banner .container.equal .image { flex-basis: 50%; max-width: 100%; flex-shrink: 1; } .content-banner .content { flex-grow: 1; flex-shrink: 1; } .content-banner .container.equal .content { flex-basis: 50%; flex-shrink: 1; } .content-banner .content .inner-content { max-width: 59rem; } @media (max-width: 991px) { .content-banner .content .inner-content br { display: none; } } .content-banner .content .inner-content *:last-child { margin-bottom: 0; } .content-banner .content .inner-content.split ul { column-count: 2; column-gap: 3rem; } .content-banner .content .cta-container { padding-top: 3.5rem; } .content-banner .content .inner-content .item-list { gap: 3rem; display: flex; flex-direction: column; } .content-banner .content .inner-content .item-list .list { gap: 1.5rem; display: flex; align-items: center; } .content-banner .content .inner-content .item-list .list .bullet { content: ""; height: 4.5rem; min-width: 0.4rem; max-width: 0.4rem; background-color: var(--primaryColour); } .content-banner .content .inner-content .item-list .list span { display: block; padding: 0.8rem 0; } .content-banner.reverse .container { flex-direction: row-reverse; } @media (max-width: 768px) { .content-banner.reverse .container { flex-direction: column-reverse; } } .content-banner.stacked .container { display: grid; justify-content: center; } .content-banner.stacked .container .image { grid-row: 1; display: flex; max-width: 100%; align-items: center; grid-column: 1 / -1; justify-content: center; } .content-banner.stacked .container .content { grid-row: 1; display: flex; grid-column: 1 / -1; flex-direction: column; justify-content: center; } .content-banner.stacked .container .content .inner-content { width: 100%; max-width: 80rem; text-align: center; } .content-banner.stacked .container .content .cta-container { justify-content: center; } .media-container { padding: var(--verticalSpacing) 0; } .media-container .container { gap: 3rem; display: grid; align-items: center; grid-template-columns: repeat(2, 1fr); } @media (max-width: 991px) { .media-container .container { grid-template-columns: repeat(1, 1fr); } } .media-container .media iframe { border-radius: .7rem; } .blog-preview { padding: var(--verticalSpacing) 0; } .blog-preview .container { gap: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); } @media (max-width: 991px) { .blog-preview .container { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .blog-preview .container { grid-template-columns: repeat(1, 1fr); } } .blog-preview .container .post { overflow: hidden; border-radius: .7rem; border: 0.1rem solid #E4E4E4; background-color: #FFFFFF; } .blog-preview .featured-image { margin-bottom: 2rem; } .blog-preview .featured-image img { width: 100%; object-fit: cover; } .blog-preview .post-content { padding: 0rem 2.5rem 2.5rem; } .blog-preview .post-content .tags { margin-bottom: 1rem; } .blog-preview .post-content .tags, .blog-preview .post-content .tags a { outline: none; font-size: 1.6rem; font-weight: 600; text-decoration: none; /* text-transform: uppercase; */ color: #00A9F3; } .blog-preview .post-content .meta { margin-bottom: 4rem; } .blog-preview .post-content .meta time { margin-bottom: 1rem; display: inline-block; } .blog-preview .post-content .meta .read-time { color: #a9a9a9; margin-bottom: 1rem; display: inline-block; } .blog-preview .post.style-2 { overflow: hidden; border-radius: 1rem; background-color: #fff; } .blog-preview .post.style-2 .post-content { padding: 0 3rem 3rem; } .blog-preview .post.style-2 .cta-container { justify-content: end; } .blog-preview .post.style-3 .featured-image { overflow: hidden; border-radius: 1rem; } .blog-preview .post.style-3 .btn { border: none; padding: 0; align-items: center; color: var(--primaryColour); background-color: transparent; } .blog-preview .post.style-3 .btn:after { content: ""; width: 2rem; height: 2rem; display: block; background-size: 2rem; transition: all 250ms ease; background-repeat: no-repeat; background-position-y: center; background-position-x: center; background-image: url('https://20155276.fs1.hubspotusercontent-na1.net/hubfs/20155276/chevron-forward-outline.svg'); } .slider { padding: var(--verticalSpacing) 0; } .slider.logos .container .swiper-pagination-bullets.swiper-pagination-horizontal { --swiper-pagination-bottom: -5rem; } .slider .container { position: relative; } .slider .container .rich-text { margin-bottom: 6.5rem; } .slider .slide-content { align-items: center; display: flex; gap: 13rem; } .slider .slide-content .featured-image { flex-grow: 1; flex-shrink: 0; max-width: 37rem; width: 100%; } .slider .slide-content .content { flex-grow: 0; flex-shrink: 1; } .slider .slide-content .content *:last-child{ margin-bottom: 0; } .slider .slide-content.reversed { flex-direction: row-reverse; } .slider.logos { } .slider.logos .slide-content .featured-image { display: flex; max-width: 100%; justify-content: center; } .call-to-action { } @media (max-width: 480px) { .call-to-action .container { padding: 0; } } .call-to-action .container .inner-wrapper { gap: 3rem; display: flex; min-height: 27.5rem; align-items: center; padding: 10rem 12rem; background-repeat: no-repeat; background-color: var(--grey); justify-content: space-between; background-position-y: top, bottom; background-position-x: left, right; background-image: url(https://20155276.fs1.hubspotusercontent-na1.net/hubfs/20155276/CTA%20-%20Pattern%20-%20Left.svg), url(https://20155276.fs1.hubspotusercontent-na1.net/hubfs/20155276/CTA%20-%20Pattern%20-%20Right.svg); } @media (max-width: 991px) { .call-to-action .container .inner-wrapper { padding: 11.5rem 3rem; } } @media (max-width: 480px) { .call-to-action .container .inner-wrapper { flex-direction: column; } } .call-to-action .container .inner-wrapper.style-2 { background-image: url(https://20155276.fs1.hubspotusercontent-na1.net/hubfs/20155276/CTA%20-%20Blue%20Pattern%20-%20Left.svg), url(https://20155276.fs1.hubspotusercontent-na1.net/hubfs/20155276/CTA%20-%20Blue%20Pattern%20-%20Right.svg); } .call-to-action.newsletter .container .inner-wrapper { padding: 0; align-items: stretch; } .call-to-action.newsletter .container .inner-wrapper .content { padding: 6rem 5rem; max-width: 74rem; } .call-to-action.newsletter .container .inner-wrapper .content.newsletter-sign-up { display: flex; max-width: 100%; align-items: center; justify-content: space-between; } .call-to-action.newsletter .container .inner-wrapper .featured-image img { width: 100%; height: 100%; display: block; object-fit: cover; } .call-to-action .content { width: 100%; max-width: 57rem; } @media (max-width: 480px) { .call-to-action .content { text-align: center; } } .call-to-action .form .hs-form-field { margin-bottom: 0; } .call-to-action .form input[type=email] { height: 6.5rem; width: 25.5rem; border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; border: 0.2rem solid var(--ctaPrimaryColour); background-color: #FFFFFF; } .call-to-action .form form input[type=submit] { width: 15.5rem; height: 6.5rem; font-weight: 700; font-size: 1.4rem; background-color: var(--ctaPrimaryColour); border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } .pricing { } .pricing .container { gap: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); } @media (max-width: 480px) { .pricing .container { grid-template-columns: repeat(1, 1fr); } } .pricing .price-column { display: flex; border-radius: .7rem; flex-direction: column; transition: transform 250ms ease; background-color: rgba(228,228,228,.6); } .pricing .price-column:hover { transform: translateY(-1rem); } .pricing .price-column .top { flex: 1; display: flex; background: #FFFFFF; padding-bottom: 4rem; flex-direction: column; border: 0.1rem solid #E4E4E4; border-radius: 0 0 0.7rem 0.7rem; background-position-y: bottom; background-position-x: right; background-repeat: no-repeat; background-size: 27rem; border-radius: .7rem; box-shadow: 0.5rem 0.5rem 2.5rem 0.4rem rgba(22,27,48,0.05); background-image: url('https://20155276.fs1.hubspotusercontent-na1.net/hubfs/20155276/CTA%20-%20Blue%20Pattern%20-%20Right.svg'); } .pricing .price-column header { color: #fff; font-weight: 600; font-size: 3.0rem; letter-spacing: 0; line-height: 3.5rem; padding: 2.5rem 4rem; background-color: #00A9F3; border-radius: 0.7rem 0.7rem 0 0; } @media (max-width: 991px) { .pricing .price-column header { padding: 2.5rem 3rem; } } .pricing .price-column article { flex: 1; margin-bottom: 4rem; } .pricing .price-column .cta-container { padding: 0 4rem; } @media (max-width: 991px) { .pricing .price-column .cta-container { padding: 0 2.7rem; } } .pricing .price-column .package-details { margin-bottom: 4rem; padding: 3.5rem 4rem 0; } @media (max-width: 991px) { .pricing .price-column .package-details { padding: 3.5rem 2.7rem 0; } } .pricing .price-column .pricing-container { padding: 0 4rem; } @media (max-width: 991px) { .pricing .price-column .pricing-container { padding: 0 2.7rem; } } .pricing .price-column .pricing-container .term { margin-bottom: 1rem; } .pricing .price-column .pricing-container .h1 { font-weight: 700; } .pricing .price-column .bottom { padding: 4rem; border-radius: 0.7rem; } @media (max-width: 991px) { .pricing .price-column .bottom { padding: 2.7rem; } } .pricing .price-column .features { gap: 3rem; display: flex; flex-direction: column; } .pricing .price-column .features span { gap: 1rem; display: flex; align-items: center; } .contact-form { } .contact-form .container { max-width: 83rem; } .blog-tags-container { margin-bottom: 7.5rem; } .blog-tags-container .container { display: flex; align-items: center; justify-content: space-between; } .blog-tags-container .tags { width: 100%; height: 5rem; display: flex; cursor: pointer; padding: 0 2.2rem; max-width: 27rem; border-radius: 0.7rem; position: relative; align-items: center; background-color: #00A9F3; justify-content: space-between; } .blog-tags-container .tags:after { content: ""; width: 2rem; height: 2rem; display: block; background-position: center; background-repeat: no-repeat; transition: transform 250ms ease; transform: rotate(-90deg) translateX(0.5rem); background-image: url(https://20155276.fs1.hubspotusercontent-na1.net/hubfs/20155276/Arrow%20Down%20-%20White.svg); } .blog-tags-container .tags.open:after { transform: rotate(90deg) translateX(0.2rem); } .blog-tags-container .tags #initial-tag { font-size: 1.6rem; color: var(--white); font-weight: var(--fontWeightBold); } .blog-tags-container .tags .list { left: 0; top: 4.8rem; width: 100%; /* display: flex; */ display: none; overflow: hidden; position: absolute; border-radius: 0.7rem; flex-direction: column; border: 0.1rem solid #E4E4E4; background-color: var(--white); } .blog-tags-container .tags.open .list { display: flex; } .blog-tags-container .tags .list a { font-size: 1.6rem; padding: 1.3rem 2rem; text-decoration: none; color: var(--bodyColour); } .blog-tags-container .tags .list a:hover { background-color: #E4E4E4; } .recent-blogs-container { margin-bottom: 0rem; } .recent-blogs-container.related { padding: 10rem; } .recent-blogs-container .rich-text { margin-bottom: 6.7rem; } .recent-blogs-container .posts { gap: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); } .recent-blogs-container .posts .post { display: flex; flex-direction: column; overflow: hidden; border-radius: 0.7rem; border: 0.1rem solid #E4E4E4; background-color: var(--white); } .recent-blogs-container .posts .post:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; } .recent-blogs-container .posts .post:nth-child(1) .featured-image { max-height: 49.7rem; } .recent-blogs-container .posts .post:nth-child(1) .body .summary-container { justify-content: space-between; } .recent-blogs-container .posts .post:nth-child(1) .body .summary { display: flex; } .recent-blogs-container .posts.grid .post:nth-child(1) .body .summary { display: none; } .recent-blogs-container .posts .post:nth-child(1) .body .post-footer { display: flex; align-items: end; justify-content: space-between; } .recent-blogs-container .posts.grid .post:nth-child(1) .body .post-footer { display: block; } .recent-blogs-container .posts .post:nth-child(1) .body .post-footer .written-author { margin-bottom: 0; } .recent-blogs-container .posts.grid .post:nth-child(1) .body .post-footer .written-author { margin-bottom: 2rem; } .recent-blogs-container .posts .post:nth-child(2) { grid-column: 3 / -1; } .recent-blogs-container .posts .post:nth-child(3) { grid-column: 3 / -1; } .recent-blogs-container .posts.grid .post:nth-child(1) { grid-column: unset; grid-row: unset; } .recent-blogs-container .posts.grid .post:nth-child(2) { grid-column: unset; } .recent-blogs-container .posts.grid .post:nth-child(3) { grid-column: unset; } .recent-blogs-container .posts .post .post-container { flex: 1; display: flex; flex-direction: column; } .recent-blogs-container .posts .post .featured-image { flex: 1; display: flex; overflow: hidden; max-height: 24rem; min-height: 24rem; align-items: center; justify-content: center; } .recent-blogs-container .posts .post .featured-image a { display: block; width: 100%; height: 100%; } .recent-blogs-container .posts .post .featured-image img { display: block; height: 100%; width: 100%; object-fit: cover; object-position: center; } .recent-blogs-container .posts .post .body { flex: 1; display: flex; padding: 2.5rem; flex-direction: column; } .recent-blogs-container .posts .post .body .tag { font-size: 1.6rem; color: #00A9F3; letter-spacing: 0; line-height: 1.6rem; font-weight: 600; display: inline-block; text-decoration: none; margin-bottom: 2rem; } .recent-blogs-container .posts .post .body .blog-post-title { color: #161B30; letter-spacing: 0; line-height: 3rem; font-weight: 700; } .recent-blogs-container .posts .post .body .blog-post-title a { color: inherit; text-decoration: none; } .recent-blogs-container .posts .post .body .summary-container { flex: 1; display: flex; flex-direction: column; justify-content: end; } .recent-blogs-container .posts .post .body .summary { display: none; font-size: 1.6rem; color: #161B30; letter-spacing: 0; line-height: 2.5rem; font-weight: 400; } .recent-blogs-container .posts .post .body .summary-container .author { font-size: 1.6rem; color: #161B30; letter-spacing: 0; line-height: 2.5rem; font-weight: 600; } .recent-blogs-container .pagination { display: flex; gap: 0.5rem; justify-content: center; align-items: center; padding-top: 9rem; } .recent-blogs-container .pagination .page-number { color: #141517; font-size: 1.6rem; letter-spacing: 0; text-align: center; line-height: 2.5rem; font-weight: 400; text-decoration: none; padding: 0.5rem 1rem; } .recent-blogs-container .pagination .page-number.active { color: #00A9F3; font-weight: 700; } .recent-blogs-container .pagination .previous-posts { margin-right: 1rem; } .recent-blogs-container .pagination .next-posts { margin-left: 1rem; } /* Testimonials slider — Entelect "Quote" design (Figma 195:5547): a dark glass card holding a single centred quote; becomes a 1-per-view slider when there's >1 testimonial. Field-driven bits (section bg, spacing, orb glows) live in the module's scope_css. */ .testimonial-slider { padding: var(--verticalSpacing) 0; color: var(--white); } .testimonial-slider__heading { margin-bottom: 6rem; text-align: center; } /* Glass card. overflow:hidden clips the orb glows to its rounded corners (per the design). */ .testimonial-slider__card { position: relative; overflow: hidden; border-radius: var(--radius-base); border: 0.1rem solid rgba(255, 255, 255, 0.08); background-color: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(2.5rem); backdrop-filter: blur(2.5rem); } /* Full-width variant (Width = "Full width"; Figma 196:2100): the card drops its chrome and breaks out to the full viewport width so the glows become the section background and the quote centres edge-to-edge. The dual calc(50% - 50vw) margins expand the card to the viewport edges from inside .container (no fixed 100vw, so no scrollbar overflow); overflow:hidden (from the base rule) keeps the glows clipped to the screen. The quote stays capped + centred so lines don't get too long. */ .testimonial-slider.full .testimonial-slider__card { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border: 0; border-radius: 0; background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .testimonial-slider.full .testimonial { max-width: 106rem; margin-inline: auto; } /* Full-variant background (Figma 196:2100): unlike the contained card's four corner glows, the full-width design has ONE soft glow weighted to the lower-left — an olive→green→teal brightening of the bottom-left corner that eases to a faint blue lower-right and fades up into the navy (the design's blurred blob + diagonal olive/green/blue colour-blend). The card's corner glows + noise are hidden for this variant and replaced by this layered radial-gradient on the bg layer. */ .testimonial-slider.full .ts-glow, .testimonial-slider.full .testimonial-slider__noise { display: none; } .testimonial-slider.full .testimonial-slider__bg { background: radial-gradient(100rem 78rem at 6% 122%, rgba(1, 142, 154, 0.50), transparent 58%), radial-gradient(74rem 62rem at 24% 120%, rgba(38, 139, 66, 0.38), transparent 56%), radial-gradient(58rem 50rem at -2% 104%, rgba(161, 191, 36, 0.22), transparent 52%), radial-gradient(120rem 84rem at 82% 128%, rgba(25, 131, 194, 0.20), transparent 64%); } /* BG layer — the design's four blurred glow ellipses (opacity baked into the SVGs) plus a noise overlay set to mix-blend-multiply (Figma "BG" group). Clipped by the card. */ .testimonial-slider__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .testimonial-slider .ts-glow { position: absolute; display: block; border-radius: 50%; } /* The design's four glows (Figma node colours: azure #1983C2 + teal #018E9A top-left, green #268B42 + teal #018E9A bottom-right) at ~50% opacity, anchored to the card corners. */ .testimonial-slider .ts-glow--tl-azure { left: -38rem; top: -58rem; width: 120rem; height: 120rem; background: radial-gradient(circle, rgba(25, 131, 194, 0.45) 0%, rgba(25, 131, 194, 0) 60%); } .testimonial-slider .ts-glow--tl-teal { left: -8rem; top: -30rem; width: 80rem; height: 80rem; background: radial-gradient(circle, rgba(1, 142, 154, 0.5) 0%, rgba(1, 142, 154, 0) 62%); } .testimonial-slider .ts-glow--br-green { right: -10rem; bottom: -34rem; width: 80rem; height: 80rem; background: radial-gradient(circle, rgba(38, 139, 66, 0.45) 0%, rgba(38, 139, 66, 0) 62%); } .testimonial-slider .ts-glow--br-teal { right: -42rem; bottom: -58rem; width: 120rem; height: 120rem; background: radial-gradient(circle, rgba(1, 142, 154, 0.45) 0%, rgba(1, 142, 154, 0) 60%); } .testimonial-slider__noise { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 0.18; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 16rem 16rem; } /* ⚠️ `min-width: 0` + an explicit width are LOAD-BEARING, not tidying. Swiper writes its measured size onto every slide as an INLINE width; with the default `min-width: auto` those inline widths then feed back as the container's automatic minimum size, so one bad measurement is latched and amplified instead of corrected. On the homepage that produced a 33,554,432px slider (Chrome's max layout unit — i.e. "unbounded"): the quote ran off the page on mobile, and on desktop `overflow: hidden` hid it while Swiper's internal size stayed garbage, so the arrows couldn't advance the slides. A definite width breaks the feedback loop and lets `update()` recover. */ /* ⚠️ clip-path trims a 1px sliver off the right edge, and it is load-bearing. With slidesPerView:1 and spaceBetween:0 the slide should exactly equal the container, but Swiper writes a ROUNDED pixel width while the 12-col grid resolves to a fractional one — measured 925px inside 925.344px. That 0.344px remainder puts the NEXT slide's leading edge inside the visible box on every load, a hairline of the following testimonial that reads as a faint vertical line on the dark canvas (client, 13 Aug: "one can see the next peeking through"). Present at 1200/1320/1440/1500/1536/ 1600/1680/1920 on the homepage, the only page whose slider holds more than one slide. ⚠️ Do NOT "fix" this by forcing the slide to width:100% — that removes the sliver at rest but Swiper keeps translating by its rounded value, so the offset ACCUMULATES with every navigation (measured 0.344px after one click, 0.688px after two, never resetting on loop). clip-path only affects painting, so every measurement Swiper takes is untouched and no drift is introduced. 1px is safely inside the slide's 16.6% horizontal padding, so no content is ever clipped. */ .testimonial-slider .testimonial-swiper { position: relative; z-index: 1; width: 100%; min-width: 0; clip-path: inset(0 1px 0 0); } .testimonial-slider .testimonial-swiper .swiper-slide { min-width: 0; } .testimonial-slider .swiper-slide { height: auto; display: flex; box-sizing: border-box; padding: 9rem 16.6666%; /* mirrors the design's 2/12 spacers each side + generous vertical */ } @media (max-width: 64rem) { /* 1024px */ .testimonial-slider .swiper-slide { padding: 7rem 8%; } } @media (max-width: 48rem) { /* 768px */ .testimonial-slider .swiper-slide { padding: 5rem 2.4rem; } } .testimonial { width: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6.4rem; } @media (max-width: 48rem) { .testimonial { gap: 4rem; } } .testimonial__mark { display: block; width: 6.2rem; height: auto; flex-shrink: 0; transform: rotate(180deg); /* matches the design's rotate-180 on the quote glyph */ } .testimonial__quote { margin: 0; font-style: italic; } .testimonial__quote p { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--fontWeightLight); font-style: italic; color: var(--foundation-200); } .testimonial__profile { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; } .testimonial__photo { width: 5.6rem; height: 5.6rem; flex-shrink: 0; overflow: hidden; border-radius: var(--radius-max); background-color: var(--white); border: 0.1rem solid rgba(255, 255, 255, 0.15); } .testimonial__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Optional avatar link (per-testimonial profile_link, e.g. LinkedIn): the fills the circle so the image sizing rules above still apply; subtle hover/focus cue signals it's clickable. */ .testimonial__photo-link { display: block; width: 100%; height: 100%; transition: opacity 0.2s ease; } .testimonial__photo-link:hover, .testimonial__photo-link:focus-visible { opacity: 0.82; } .testimonial__person { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .testimonial__name { font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--fontWeightMedium); color: var(--white); } .testimonial__role { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--foundation-400); } .testimonial-slider__pagination { position: relative; margin-top: 3.2rem; text-align: center; } .testimonial-slider .swiper-pagination-bullet { background-color: var(--foundation-400); opacity: 0.4; } .testimonial-slider .swiper-pagination-bullet-active { background-color: var(--signal-teal-600); opacity: 1; } /* Feature List — Entelect "Where we operate" design (Figma 195:5548): dark section, left two-tone headline + olive tagline, right a vertical list of icon feature cards. Two glow orbs behind (Orbs group). Field-driven bg/spacing/orbs live in the module's scope_css. */ .feature-list { position: relative; color: var(--white); } .feature-list .container { position: relative; z-index: 1; } .feature-list__inner { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2.4rem; align-items: start; } .feature-list__headline { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 2.4rem; position: sticky; top: 12rem; /* clears the fixed nav; sticks while the taller cards column scrolls past */ } .feature-list__tagline { margin: 0; font-family: var(--primaryFont); /* DM Sans (was --font-tagline / Tomorrow) */ font-weight: var(--fontWeightRegular); font-size: var(--tagline-sm); line-height: var(--leading-tagline-sm); letter-spacing: var(--tracking-tagline-sm); text-transform: uppercase; color: var(--text-accent); } .feature-list__heading h2, .feature-list__heading .h2, .feature-list__heading h1, .feature-list__heading p { margin: 0; font-size: var(--text-4xl); line-height: var(--leading-4xl); letter-spacing: var(--tracking-4xl); font-weight: var(--fontWeightMedium); color: var(--foundation-500); } .feature-list__heading strong { font-weight: var(--fontWeightMedium); color: var(--white); } /* Cards column */ .feature-list__cards { grid-column: 7 / span 5; display: flex; flex-direction: column; gap: 7.2rem; padding-top: 5.6rem; max-width: 52rem; /* matches the design's text measure so descriptions wrap the same */ } .feature-list__card-title, .feature-list__card-text { overflow-wrap: break-word; } .feature-list__card { display: flex; flex-direction: column; gap: 1.6rem; } .feature-list__icon { display: block; width: 3.2rem; height: 3.2rem; } .feature-list__icon img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; } .feature-list__copy { display: flex; flex-direction: column; gap: 0.4rem; } .feature-list__card-title { margin: 0; font-size: var(--text-lg); line-height: var(--leading-lg); letter-spacing: var(--tracking-lg); font-weight: var(--fontWeightMedium); color: var(--white); } .feature-list__card-text p { margin: 0; font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--fontWeightLight); color: var(--foundation-600); } /* Tablet landscape — stack headline above the cards */ @media (max-width: 64rem) { /* 1024px */ .feature-list__inner { display: flex; flex-direction: column; gap: 4.8rem; } .feature-list__headline { position: static; top: auto; } .feature-list__cards { padding-top: 0; gap: 5.6rem; max-width: none; /* full width once the layout stacks to one column */ } } @media (max-width: 48rem) { /* 768px */ .feature-list__cards { gap: 4.8rem; } /* --text-4xl never steps down (stays 48px) → too big on mobile; use the stepped --text-3xl (28px) */ .feature-list__heading h2, .feature-list__heading .h2, .feature-list__heading h1, .feature-list__heading p { font-size: var(--text-3xl); line-height: var(--leading-3xl); letter-spacing: var(--tracking-3xl); } } /* Customer Stories — Entelect design (Figma 195:5562): dark section, headline row (olive tagline + two-tone heading + white pill CTA), then a featured-wide card + two narrow cards, each a photo with a bottom gradient + brand logo, title and a "Read story" link. Orbs behind. Field-driven bg/spacing/orbs live in the module's scope_css. */ .customer-stories { position: relative; color: var(--white); } .customer-stories .container { position: relative; z-index: 1; } .customer-stories__inner { display: flex; flex-direction: column; gap: 8rem; } /* Headline row */ .customer-stories__head { display: flex; align-items: flex-end; gap: 2.4rem; } .customer-stories__headline { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2.4rem; } .customer-stories__tagline { margin: 0; font-family: var(--primaryFont); /* DM Sans (was --font-tagline / Tomorrow) */ font-weight: var(--fontWeightRegular); font-size: var(--tagline-sm); line-height: var(--leading-tagline-sm); letter-spacing: var(--tracking-tagline-sm); text-transform: uppercase; color: var(--text-accent); } .customer-stories__heading h2, .customer-stories__heading .h2, .customer-stories__heading p { margin: 0; font-size: var(--text-4xl); line-height: var(--leading-4xl); letter-spacing: var(--tracking-4xl); font-weight: var(--fontWeightMedium); color: var(--foundation-500); } .customer-stories__heading strong { font-weight: var(--fontWeightMedium); color: var(--white); } /* Pill CTA — translucent glass pill (white text + arrow) on the dark section, per the design */ .customer-stories__cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1.2rem 0.9rem 2rem; border-radius: var(--radius-max); background-color: rgba(255, 255, 255, 0.05); border: 0.1rem solid rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(2rem); backdrop-filter: blur(2rem); color: var(--white); font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--fontWeightMedium); white-space: nowrap; transition: background-color 0.2s ease; } .customer-stories__cta:hover { background-color: rgba(255, 255, 255, 0.1); } .customer-stories__cta .customer-stories__arrow { width: 1.2rem; height: 1.2rem; color: var(--white); } .customer-stories__cta:hover .customer-stories__arrow { transform: translateX(0.3rem); } /* Cards grid: featured (span 2) + two narrow (span 1) on a 4-track grid */ .customer-stories__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; align-items: start; } .customer-stories__card { grid-column: span 1; display: flex; flex-direction: column; gap: 2.4rem; } .customer-stories__card--featured { grid-column: span 2; } .customer-stories__media { position: relative; overflow: hidden; border-radius: 0.8rem; border: 0.1rem solid rgba(255, 255, 255, 0.1); aspect-ratio: 302 / 403; transition: box-shadow 0.3s ease, border-color 0.3s ease; } /* Hover glow — same teal border-glow as the expertise-cards cards, on the photo tile. */ .customer-stories__card:hover .customer-stories__media, .customer-stories__card:focus-within .customer-stories__media { border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 0 8rem rgba(1, 142, 154, 0.2); } .customer-stories__card--featured .customer-stories__media { aspect-ratio: 628 / 403; } .customer-stories__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.38, 0.21, 0, 0.92); } /* Photo zoom on hover (client request, "Related Stories") — clipped by .__media overflow:hidden. */ .customer-stories__card:hover .customer-stories__photo, .customer-stories__card:focus-within .customer-stories__photo { transform: scale(1.05); } @media (prefers-reduced-motion: reduce) { .customer-stories__photo { transition: none; } .customer-stories__card:hover .customer-stories__photo, .customer-stories__card:focus-within .customer-stories__photo { transform: none; } } .customer-stories__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: linear-gradient(to bottom, rgba(19, 25, 45, 0), rgba(19, 25, 45, 0.6)); pointer-events: none; } .customer-stories__logo { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; padding: 2rem; } /* Photo click-through. Visitors try the image before the text link (client, Revert 01) — the same feedback that produced .stories-listing__medialink on the index page, so this matches it. z-index 1 lifts it over the shade and the logo, both of which are decorative; the card’s hover states still fire because the anchor is inside the card. */ .customer-stories__medialink { position: absolute; inset: 0; z-index: 1; } .customer-stories__logo img { display: block; height: auto; /* width set inline per-logo (design dims); height follows the SVG aspect */ max-width: 100%; } .customer-stories__copy { display: flex; flex-direction: column; gap: 1.6rem; } .customer-stories__title { margin: 0; max-width: 35rem; font-size: var(--text-lg); line-height: var(--leading-lg); letter-spacing: var(--tracking-lg); font-weight: var(--fontWeightMedium); color: var(--white); } .customer-stories__link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--foundation-300); /* #bcc4d1 link label, per the design (arrow stays lime below) */ font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--fontWeightMedium); white-space: nowrap; } .customer-stories__link .customer-stories__arrow { width: 1.08rem; height: 1.08rem; color: #b4cc50; /* lime accent arrow, per the design */ transition: transform 0.2s ease; } .customer-stories__link:hover .customer-stories__arrow { transform: translateX(0.3rem); } .customer-stories__arrow { display: block; flex-shrink: 0; transition: transform 0.2s ease; } /* Tablet landscape — featured full width, two narrow cards side by side */ @media (max-width: 64rem) { /* 1024px */ .customer-stories__grid { grid-template-columns: repeat(2, 1fr); } .customer-stories__card--featured { grid-column: span 2; } .customer-stories__card--featured .customer-stories__media { aspect-ratio: 16 / 7; } } /* Mobile (Figma 195-5644): single-column stacked cards, smaller headline, and the pill CTA relocated to the bottom (full-width, centred). The head becomes display:contents so its children (headline + cta) join the inner flex column and can be reordered around the grid. */ @media (max-width: 48rem) { /* 768px */ .customer-stories__inner { gap: 4.8rem; } .customer-stories__head { display: contents; } .customer-stories__headline { flex: none; /* in the column it must not grow vertically */ width: 100%; /* display:contents drops the stretch — force full width so the heading wraps */ } .customer-stories__heading h2, .customer-stories__heading .h2, .customer-stories__heading p { font-size: var(--text-3xl); line-height: var(--leading-3xl); letter-spacing: var(--tracking-3xl); } .customer-stories__tagline { font-size: var(--tagline-xs); line-height: var(--leading-tagline-xs); letter-spacing: var(--tracking-tagline-xs); } .customer-stories__cta { order: 1; /* after the cards */ align-self: stretch; /* full width */ justify-content: center; padding: 1.2rem 2rem; } .customer-stories__grid { grid-template-columns: 1fr; gap: 4.8rem; /* match the column rhythm — cards shouldn't bunch tighter than the headline/CTA gaps */ order: 0; } .customer-stories__card, .customer-stories__card--featured { grid-column: span 1; } .customer-stories__media, .customer-stories__card--featured .customer-stories__media { aspect-ratio: 16 / 10; } } /* ── Equal layout variant (.customer-stories.equal) — Figma 196:2134 "Related Stories": four equal-width cards (no featured span-2), an all-white heading, and a mobile horizontal swipe carousel with a peeking next card. Without .equal the module keeps the featured-first industries layout (195:5562) unchanged. */ .customer-stories.equal .customer-stories__card, .customer-stories.equal .customer-stories__card--featured { grid-column: span 1; } .customer-stories.equal .customer-stories__media, .customer-stories.equal .customer-stories__card--featured .customer-stories__media { aspect-ratio: 302 / 403; } /* "Related Stories" heading is a single white colour (vs the featured default's grey + white-strong) */ .customer-stories.equal .customer-stories__heading h2, .customer-stories.equal .customer-stories__heading .h2, .customer-stories.equal .customer-stories__heading p { color: var(--white); } @media (max-width: 64rem) { /* 1024px — equal: 2×2 grid, no wide/letterbox featured card */ .customer-stories.equal .customer-stories__grid { grid-template-columns: repeat(2, 1fr); } .customer-stories.equal .customer-stories__card--featured { grid-column: span 1; } .customer-stories.equal .customer-stories__card--featured .customer-stories__media { aspect-ratio: 302 / 403; } } @media (max-width: 48rem) { /* 768px — equal: horizontal swipe carousel with a peeking next card (the featured/default layout keeps its single-column stack above). CSS scroll-snap, no JS. */ .customer-stories.equal .customer-stories__grid { display: flex; flex-wrap: nowrap; grid-template-columns: none; gap: 2.4rem; min-width: 0; margin: 0 -2rem; /* bleed to the section edges so the peek reaches the screen edge */ padding: 0 2rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 2rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .customer-stories.equal .customer-stories__grid::-webkit-scrollbar { display: none; } .customer-stories.equal .customer-stories__card, .customer-stories.equal .customer-stories__card--featured { flex: 0 0 auto; width: 82%; /* ~18% of the next card peeks at the right edge, per the design */ scroll-snap-align: start; } .customer-stories.equal .customer-stories__media, .customer-stories.equal .customer-stories__card--featured .customer-stories__media { aspect-ratio: 302 / 403; /* keep the portrait ratio while swiping (not the 16/10 stack ratio) */ } } /* Partners — Entelect "Key Partnerships & Alliances" design (Figma 195:5563): dark section, centred headline (olive tagline + two-tone heading + intro), then a bordered 6-col logo grid of preloaded white partner SVGs. Two corner orbs behind. Field-driven bg/spacing/orbs in scope_css. */ .partners { position: relative; color: var(--white); } .partners .container { position: relative; z-index: 1; } .partners__inner { display: flex; flex-direction: column; align-items: center; gap: 12rem; } .partners__headline { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; max-width: 72rem; text-align: center; } .partners__text { display: flex; flex-direction: column; gap: 2rem; } .partners__tagline { margin: 0; font-family: var(--primaryFont); /* DM Sans (was --font-tagline / Tomorrow) */ font-weight: var(--fontWeightRegular); font-size: var(--tagline-sm); line-height: var(--leading-tagline-sm); letter-spacing: var(--tracking-tagline-sm); text-transform: uppercase; color: var(--text-accent); } .partners__heading h2, .partners__heading .h2, .partners__heading p { margin: 0; font-size: var(--text-4xl); line-height: var(--leading-4xl); letter-spacing: var(--tracking-4xl); font-weight: var(--fontWeightMedium); color: var(--foundation-500); } .partners__heading strong { font-weight: var(--fontWeightMedium); color: var(--white); } .partners__intro p { margin: 0; font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--fontWeightLight); color: var(--foundation-600); } /* Logos — two layouts share the bordered .partners__grid frame; CSS toggles which shows at 48rem: • --placed (desktop/tablet): the position-based grid — the module renders ceil(logoCount / 6) × 6 cells (one row for a 6-logo set, two rows for ~7–12), placed by "position"; empty positions render blank framed cells (so a row can centre/space). Right/bottom separators cleared on the last column (:nth-child(6n)) and last row (:nth-last-child(-n+6)) — works for a 1- or 2-row frame alike. • --stacked (mobile ≤48rem): the logos in UPLOADED order, packed into 2 columns with auto rows — no blank cells. Holds only real logo cells, so its nth-child border math needs no blank bookkeeping. Cells stay transparent so the orbs bleed through. Logos fade in on scroll via [data-reveal]. */ .partners__grid { width: 100%; border: 0.1rem solid #272e47; border-radius: 0.8rem; overflow: hidden; } /* Desktop/tablet: the position-based 6×2 frame. grid-auto-rows sizes each implicit row. */ .partners__grid--placed { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(12rem, auto); } .partners__grid--placed .partners__cell:nth-child(6n) { border-right: 0; /* last column — the frame supplies the edge */ } .partners__grid--placed .partners__cell:nth-last-child(-n+6) { border-bottom: 0; /* last row (cells 7–12) — the frame supplies the edge */ } /* Mobile: logos in uploaded order, 2 columns, auto rows. Hidden until ≤48rem (shown in the media block below). Only real logo cells, so col-2 (:nth-child(2n)) and the last row (:nth-last-child(-n+2)) clear cleanly regardless of how many logos there are. */ .partners__grid--stacked { display: none; grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(10rem, auto); } .partners__grid--stacked .partners__cell:nth-child(2n) { border-right: 0; /* right column */ } .partners__grid--stacked .partners__cell:nth-last-child(-n+2) { border-bottom: 0; /* last row */ } /* ODD logo count: the last logo would otherwise sit alone with an empty slot beside it — span it across BOTH columns so it fills the row (its right border clears; the frame supplies the edge). */ .partners__grid--stacked .partners__cell:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; } /* …that spanning cell now forms its own final row, so the 2nd-to-last cell is no longer in the last row → restore its bottom separator (the -n+2 rule above had cleared it for the even case). */ .partners__grid--stacked:has(.partners__cell:last-child:nth-child(odd)) .partners__cell:nth-last-child(2) { border-bottom: 0.1rem solid #272e47; } .partners__cell { display: flex; align-items: center; justify-content: center; min-width: 0; /* let the logo's max-width:100% govern — stops wide wordmark SVGs from forcing the 1fr tracks past the viewport (grid min-width:auto blowout) */ padding: 2rem; border-right: 0.1rem solid #272e47; border-bottom: 0.1rem solid #272e47; } .partners__logo { display: block; width: var(--pw); /* intrinsic design width set inline */ max-width: 100%; max-height: 100%; } /* Cycling marquee variant (module.animate_logos) — mirrors the hero "Our customers" columns: N independent VERTICAL Swipers (one logo visible per column) cycling the logo set, advanced in sync by a master timer (inline module JS). The whole frame fades + slides in on scroll (data-reveal on the grid), then cycles. Opt-in, so the static industries grids are untouched. The partner SVGs are already white, so no brightness/invert filter (unlike the hero's black client logos). */ .partners__grid--cycling { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 12rem; } .partners__col { width: 100%; height: 12rem; min-width: 0; overflow: hidden; /* the vertical Swiper shows one slot; this clips the others */ border-right: 0.1rem solid #272e47; } .partners__grid--cycling .partners__col:nth-child(6n) { border-right: 0; /* last column — the frame supplies the edge */ } .partners__slot { display: flex; align-items: center; justify-content: center; height: 12rem; padding: 2rem; min-width: 0; } /* Tablet landscape — keep 6 columns (logos scale down via max-width); just tighten the vertical rhythm. */ @media (max-width: 64rem) { /* 1024px */ .partners__inner { gap: 8rem; } } /* Mobile (≤768px) — swap the position frame for the uploaded-order 2-column stack (auto rows). */ @media (max-width: 48rem) { /* 768px */ .partners__inner { gap: 6rem; } .partners__headline { gap: 1.2rem; } .partners__text { gap: 1.2rem; } .partners__heading h2, .partners__heading .h2, .partners__heading p { font-size: var(--text-3xl); line-height: var(--leading-3xl); letter-spacing: var(--tracking-3xl); } .partners__tagline { font-size: var(--tagline-xs); line-height: var(--leading-tagline-xs); letter-spacing: var(--tracking-tagline-xs); } .partners__grid--placed { display: none; } .partners__grid--stacked { display: grid; } .partners__cell { padding: 1.6rem; } /* Cycling variant: 6 → 3 columns (two rows of 3), like the hero customers on mobile. */ .partners__grid--cycling { grid-template-columns: repeat(3, 1fr); } .partners__grid--cycling .partners__col:nth-child(6n) { border-right: 0.1rem solid #272e47; /* undo the desktop last-col clear */ } .partners__grid--cycling .partners__col:nth-child(3n) { border-right: 0; /* 3-col: clear the 3rd + 6th */ } .partners__grid--cycling .partners__col:nth-child(-n+3) { border-bottom: 0.1rem solid #272e47; /* divider between the two rows */ } } .section-intro { } .section-intro .container { max-width: 76.8rem; } .timeline { } .timeline .thumbs { width: 100%; max-width: 97rem; } .timeline .thumbs .swiper-button-next, .timeline .thumbs .swiper-button-prev { top: unset; bottom: 2rem; margin-top: 0; } @media (max-width: 991px) { .timeline .thumbs .swiper-button-next, .timeline .thumbs .swiper-button-prev { display: none; } } .timeline .thumbs .swiper-button-next:after, .timeline .thumbs .swiper-button-prev:after { display: none; } .timeline .thumbs .swiper-button-next.swiper-button-disabled, .timeline .thumbs .swiper-button-prev.swiper-button-disabled { pointer-events: unset; cursor: pointer; opacity: 1; } .timeline .thumbs:after { content: ""; width: 100%; max-width: 80rem; height: 0.2rem; bottom: 4rem; left: 0; right: 0; margin: auto; display: block; position: absolute; background-color: #141517; } @media (max-width: 991px) { .timeline .thumbs:after { max-width: 64.5rem; } } .timeline .thumbs .swiper-slide { display: flex; align-items: center; flex-direction: column; justify-content: center; } .timeline .thumbs .swiper-slide .text { width: 100%; text-align: center; margin-bottom: 4rem; } @media (max-width: 991px) { .timeline .thumbs .swiper-slide .text { font-size: .888rem; } } .timeline .thumbs .swiper-slide:after { content: ""; display: block; width: 8rem; height: 8rem; max-width: 8rem; border-radius: 50%; background-color: #00A9F3; } @media (max-width: 991px) { .timeline .thumbs .swiper-slide:after { width: 3rem; height: 3rem; max-width: 3rem; top: -2.5rem; position: relative; } } .timeline .thumbs .swiper-slide.swiper-slide-thumb-active:after { background-color: #141517; } .timeline .content-slider .swiper-slide { padding: 6.5rem 10rem 3rem; } @media (max-width: 991px) { .timeline .content-slider .swiper-slide { padding: 6.5rem 2.5rem 3rem; } } .timeline .swiper-slide .card { display: flex; align-items: center; border-radius: 0.7rem; background-color: #FFFFFF; border: 0.1rem solid #E4E4E4; padding: 4rem 4rem 4rem 5.5rem; box-shadow: .5rem .5rem 2.5rem .4rem rgba(22,27,48,0.05); } @media (max-width: 480px) { .timeline .swiper-slide .card { gap: 3rem; flex-direction: column; padding: 3rem 3rem 3rem; } } .timeline .swiper-slide .card .featured-image { width: 100%; max-width: 36rem; overflow: hidden; border-radius: 0.7rem; } /* ========================================================================= STATS — "Industry depth" (Entelect dark design, Figma 195:5533) Dark section on the industries/banking canvas: a left-aligned two-tone headline + a 3-col (×2-row) grid of large light-weight stat figures. Section bg colour + spacing are field-driven inline (scope_css). ========================================================================= */ .stats { position: relative; color: var(--white); /* (Decorative glows now live in the global .orbs background layer.) */ } .stats .container { position: relative; z-index: 1; } .stats__inner { display: flex; flex-direction: column; gap: 12rem; } /* --- Headline (tagline + two-tone heading), constrained to ~5/12 cols --- */ .stats__headline { display: flex; flex-direction: column; gap: 2.4rem; max-width: 52rem; } .stats__tagline { margin: 0; font-family: var(--primaryFont); /* DM Sans (was --font-tagline / Tomorrow) */ font-weight: var(--fontWeightRegular); font-size: var(--tagline-sm); line-height: var(--leading-tagline-sm); letter-spacing: var(--tracking-tagline-sm); text-transform: uppercase; color: var(--text-accent); } .stats__heading { font-size: var(--text-4xl); line-height: var(--leading-4xl); font-weight: var(--fontWeightMedium); letter-spacing: var(--tracking-4xl); color: var(--foundation-400); } .stats__heading h1, .stats__heading h2, .stats__heading h3, .stats__heading p { margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; } /* Emphasised words render white (same medium weight, not bolder) */ .stats__heading strong, .stats__heading b { font-weight: inherit; color: var(--white); } /* Optional intro paragraph under the heading (used by the About "spread" instance) */ .stats__intro { margin-top: 2.4rem; font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--fontWeightLight); color: var(--foundation-300); } .stats__intro p:last-child { margin-bottom: 0; } /* --- Stats grid: 3 across, generous row gap --- */ .stats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.4rem; row-gap: 12rem; } .stats__stat { display: flex; flex-direction: column; gap: 1.6rem; } .stats__number { margin: 0; font-size: var(--text-6xl); line-height: var(--leading-6xl); font-weight: var(--fontWeightLight); letter-spacing: var(--tracking-6xl); color: var(--white); /* Equal digit widths so the figure doesn't jitter horizontally while counting up. */ font-variant-numeric: tabular-nums; } .stats__label { font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--fontWeightLight); color: var(--foundation-400); } .stats__label p { margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; color: inherit; } /* Optional detail list under a stat's label (see item.detail in the module). One step down in size and dimmer than the label, so it reads as a breakdown of the figure rather than competing with it. Bulleted or plain lists both work; list markers are dropped in favour of a hairline-free stack. */ .stats__detail { margin-top: 1.2rem; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--fontWeightLight); color: var(--foundation-500); } .stats__detail ul, .stats__detail ol { margin: 0; padding: 0; list-style: none; } .stats__detail li, .stats__detail p { margin: 0 0 0.4rem; font-size: inherit; line-height: inherit; font-weight: inherit; color: inherit; } .stats__detail li:last-child, .stats__detail p:last-child { margin-bottom: 0; } /* Inline emphasis inside a label (e.g. "Retail, Business and Corporate") */ .stats__label strong, .stats__label b { font-weight: var(--fontWeightMedium); color: var(--white); } /* --- Tablet landscape (≤1024px = 64rem; MQ rem uses the 16px root) --- Type sizes come from the responsive type tokens (they step down at 1024/768 automatically); only layout changes here. */ @media (max-width: 64rem) { .stats__inner { gap: 8rem; } .stats__headline { max-width: none; } .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8rem; } } /* --- Mobile (≤768px = 48rem; values per Figma 195:5615 @375) --- Tagline steps sm→xs, heading 4xl→3xl, label base→sm; the figure stays on --text-6xl (which auto-shrinks to 4.4rem at this breakpoint). Spacing in rem. */ @media (max-width: 48rem) { .stats__inner { gap: 6.4rem; } .stats__headline { gap: 1.2rem; } .stats__tagline { font-size: var(--tagline-xs); line-height: var(--leading-tagline-xs); letter-spacing: var(--tracking-tagline-xs); } .stats__heading { font-size: var(--text-3xl); line-height: var(--leading-3xl); letter-spacing: var(--tracking-3xl); /* Mobile design renders the whole heading white (no grey lead-in) */ color: var(--white); } .stats__grid { column-gap: 1.6rem; row-gap: 6.4rem; } .stats__stat { gap: 1.2rem; } .stats__label { font-size: var(--text-sm); line-height: var(--leading-sm); } } .cards-grid { } .cards-grid .rich-text-editor { grid-column: 1 / -1; margin-bottom: 0.5rem; } .cards-grid .card .cta-container { padding-top: 5rem; } .cards-grid .container { gap: 3rem; } .cards-grid.three-column .container { display: grid; grid-template-columns: repeat(3, 1fr); } @media (max-width: 991px) { .cards-grid.three-column .container { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .cards-grid.three-column .container { grid-template-columns: repeat(1, 1fr); } } .cards-grid.two-column .container { display: grid; grid-template-columns: repeat(2, 1fr); } @media (max-width: 480px) { .cards-grid.two-column .container { grid-template-columns: repeat(1, 1fr); } } .cards-grid.style-3 .container { row-gap: 6rem; } .cards-grid .card { display: flex; padding: 4rem 4rem; flex-direction: column; background-position-x: right; background-repeat: no-repeat; background-position-y: bottom; transition: background-color 250ms ease; } .cards-grid.style-2 .card { border: none; padding: 0rem 0; box-shadow: none; background-color: transparent; } .cards-grid .card:hover { background-color: #00A9F3; border: 0.1rem solid transparent; box-shadow: 0.5rem 0.5rem 2.5rem 0.4rem rgba(0,169,243,0.25); background-image: url('https://20155276.fs1.hubspotusercontent-na1.net/hubfs/20155276/Service%20-%20Blue%20-%20Pattern%20%281%29.svg'); } .cards-grid.style-2 .card:hover { border: none; box-shadow: none; background-image: none; background-color: transparent; } .cards-grid.style-3 .card { gap: 2.3rem; padding: 0; display: grid; box-shadow: none; border: none; background-color: transparent; grid-template-columns: 8rem 1fr; } .cards-grid.style-3 .card .card-body { margin-bottom: 0; } .cards-grid.style-3 .card:hover { background-image: none; } .cards-grid.style-3 .card:hover .card-body > * { color: inherit; } .cards-grid.style-4 .card { background-size: 26.0rem; background-image: url('https://20155276.fs1.hubspotusercontent-na1.net/hubfs/20155276/CTA%20-%20Blue%20Pattern%20-%20Right.svg'); } .cards-grid .card .icon { margin-bottom: 3.5rem; } .cards-grid .card .icon img.hover-icon { display: none; } .cards-grid .card:hover .icon img { display: none; } .cards-grid .card:hover .icon img.hover-icon { display: inline-block; } .cards-grid.style-2 .card .icon { margin-bottom: 4.5rem; } .cards-grid .card .card-body { flex: 1; /* margin-bottom: 8rem; */ } .cards-grid.style-2 .card .card-body { margin: 0; } .cards-grid .card:hover .card-body > * { color: var(--white); } .cards-grid.style-2 .card:hover .card-body > * { color: inherit; } .cards-grid .card:hover .btn.link { color: var(--white); } .cards-grid .card:hover .btn.link:before { background-color: var(--white); } .cards-grid .card:hover .btn.link:after { content: ""; width: 1rem; height: 1rem; display: block; background-repeat: no-repeat; background-image: url('https://20155276.fs1.hubspotusercontent-na1.net/hubfs/20155276/Learn%20More%20Arrow%20-%20White.svg'); } .icon-columns { } .icon-columns .container { display: grid; grid-template-columns: repeat(4, 1fr); } @media (max-width: 480px) { .icon-columns .container { gap: 3rem; grid-template-columns: repeat(2, 1fr); } } .icon-columns .column { display: flex; flex-direction: column; align-items: center; /* justify-content: center; */ } .icon-columns .column .icon { margin-bottom: 2.5rem; } .teams { } .teams .teams-filters { gap: 3rem; display: flex; margin-bottom: 6.5rem; justify-content: center; } @media (max-width: 991px) { .teams .teams-filters { overflow-x: scroll; justify-content: start; } } .teams .members { gap: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); } @media (max-width: 991px) { .teams .members { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .teams .members { grid-template-columns: repeat(1, 1fr); } } .teams .members .member { padding: 1.5rem; cursor: pointer; border-radius: 2rem; border: 0.1rem solid #f7f7f7; transition: background-color 250ms ease; } .teams .members .description { grid-column: 1 / -1; border-radius: 0.7rem; padding: 5.5rem 7rem; background-color: #E4E4E4; position: relative; } .teams .members .description .close { top: 2rem; right: 2rem; width: 3rem; height: 3rem; border: none; z-index: 1001; outline: none; cursor: pointer; position: absolute; background-color: transparent; background-image: url(https://20155276.fs1.hubspotusercontent-na1.net/hubfs/20155276/Close%20Button.svg); } .teams .members .member:hover, .teams .members .member.active { background-color: #E4E4E4; } .teams .members .member .member-image { height: 31.6rem; overflow: hidden; border-radius: 0.7rem; } .teams .members .member .member-image img { width: 100%; } .teams .members .member .member-info { display: flex; padding: 1.5rem 0.5rem; justify-content: space-between; } .teams .members .member .member-info span { display: block; } .teams .members .member .member-info .chevron { width: max-content; display: inline-block; margin-top: 1rem; transition: transform 250ms ease; } .teams .members .member.active .member-info .chevron { transform: rotate(180deg); } .teams .members .member .member-info .title { font-size: 2.2rem; color: #141517; letter-spacing: 0; font-weight: 700; margin-bottom: 0; } .blog-featured-image { padding-bottom: 11rem; } .blog-featured-image img { border-radius: 0.7rem; } .blog-post-content .container { display: grid; grid-template-columns: minmax(auto, 26.5rem) minmax(auto, 80rem) 1fr; } .blog-post-content .anchors ul { gap: 0.5rem; padding: 0; display: flex; align-items: start; flex-direction: column; } .blog-post-content .anchors ul a { gap: 1.2rem; display: inline-flex; align-items: center; opacity: 0.4; font-size: 1.4rem; color: #141517; letter-spacing: 0; line-height: 2.5rem; font-weight: 600; text-decoration: none; } .blog-post-content .anchors ul a:before { content: ''; width: 0.8rem; height: 0.8rem; display: block; border-radius: 50%; background-color: #141517; } .blog-post-content .anchors ul a:hover:before { content: ''; width: 1.2rem; height: 1.2rem; display: block; border-radius: 50%; background-color: #00A9F3; } .blog-post-content .anchors ul a:hover, .blog-post-content .anchors ul a.active { opacity: 1; font-size: 1.6rem; } .blog-post-content .categories { display: flex; margin-bottom: 1rem; } .blog-post-content .categories .category { font-size: 1.6rem; color: #00A9F3; letter-spacing: 0; line-height: 3.253rem; text-decoration: none; font-weight: var(--fontWeightSemiBold); } .blog-post-content .content { padding-bottom: 5rem; } .blog-post-content .content h1 { font-size: 5.2rem; color: #141517; margin-bottom: 1.5rem; letter-spacing: 0; line-height: 6.5rem; } .blog-post-content .blog-details { gap: 1rem; display: flex; align-items: center; margin-bottom: 6.5rem; } .blog-post-content .blog-details a, .blog-post-content .blog-details > span, .blog-post-content .blog-details time { color: #141517; font-size: 2.0rem; text-decoration: none; font-weight: var(--fontWeightSemiBold); } .blog-post-content .blog-share { display: flex; flex-direction: column; align-items: center; } .blog-post-content .blog-share .line { width: 0.2rem; height: 3.5rem; margin-top: 1.8rem; margin-bottom: 2rem; display: inline-flex; background-color: #00A9F3; } .blog-post-content .blog-share a { display: inline-flex; margin-bottom: 1.4rem; } .blog-post-content .blog-share a:last-child { margin-bottom: 0; } .blog-post-content .blog-summary { padding: 7rem; margin-top: 5rem; margin-bottom: 6.5rem; } /* ============================================================ Industries page — dark single canvas The whole page sits on one navy surface; modules are transparent. ============================================================ */ /* Contain the orbs' horizontal bleed site-wide (they cause sideways overflow on mobile). Applied to the global page wrapper — base.html's
that wraps every page's body — so it covers all current and future pages with no per-page CSS. Must be `clip`, NOT `hidden`: `hidden` makes this a scroll container and breaks every `position: sticky` (nav, filter tabs, story-impact, story-highlights); `clip` clips without creating one. X-only, so overflow-y stays visible → the orbs still bleed vertically across sections. (The nav + footer sit OUTSIDE this
, so they're unaffected; body{overflow-x:hidden} doesn't catch the bleed — it propagates to the viewport but the absolutely positioned orbs aren't clipped at body level.) */ .body-container-wrapper { overflow-x: clip; } .industries-page, .customer-story-page, .customer-stories-page, .what-we-do-page, .leadership-page, .about-page, .capabilities-page, .plain-page, .contact-page, .thank-you-page, .error-404-page, .error-500-page { background-color: var(--foundation-950); } /* Dark canvas: section module backgrounds are transparent so the page surface is CONTINUOUS and the orb glows bleed ACROSS section boundaries. Without this, each module paints its own opaque #0d1220 bg and the next section's box clips the previous section's orb bleed → hard cut-off. (Every section's own bg is #0d1220 = the canvas, so this is visually identical except the orbs now flow between sections.) !important overrides the field-driven background-color set in each module's scope_css. */ .customer-story-page section, .customer-stories-page section, .what-we-do-page section, .leadership-page section, .about-page section, .capabilities-page section, .plain-page section, .contact-page section, .thank-you-page section, .error-404-page section, .error-500-page section { background-color: transparent !important; } /* ============================================================ Hero — modules/hero.module (industry / banking landing hero) Full-bleed background photo fading into the navy canvas, a split headline (top-left) + copy & lime pill CTA (below-right), and a bordered "Our customers" logo grid. Figma 195:5507 / 195:5588. ============================================================ */ .hero { position: relative; color: var(--white); background-color: var(--foundation-950); /* No overflow:hidden here — so Orbs can bleed across sections. The background photo's oversize/pan is clipped by .hero__bg (below) instead. */ } /* Content sits above the background layer. Width + gutters come from the global .container. */ .hero .container { position: relative; z-index: 1; } /* --- Background photo + navy gradient fade --- */ .hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } /* Background zoom-out entrance: the whole bg layer starts scaled up (Framer bg = scale(1.1)) and settles to natural size as it fades in, driven by the [data-reveal] engine. Clipped by .hero__bg's overflow:hidden so it never spills into neighbouring sections; the showcase image keeps its own pan/scale transform (this scale is on the wrapper). Gated on html.reveal-ready so no-JS shows the bg normally. */ .hero__bg-inner { position: absolute; inset: 0; } html.reveal-ready .hero .hero__bg-inner[data-reveal] { transform: scale(1.2); transform-origin: center; } html.reveal-ready .hero .hero__bg-inner[data-reveal].is-revealed { transform: scale(1); } .hero__bg-img { position: absolute; top: -6rem; left: -6rem; width: calc(100% + 12rem); height: calc(100% + 12rem); max-width: none; /* override normalise's `img,svg,video { max-width:100% }` — it would cap the oversize back to 100% and left-shift the image (off-centre) */ max-height: none; object-fit: cover; object-position: center; /* flip + translate + scale (field-driven) are set inline via scope_css in module.html. The symmetric 6rem oversize + object-position:center means 0/0/100% sits dead-centre; the oversize gives translate room to pan without exposing an edge. */ } .hero__bg-gradient { position: absolute; inset: 0; /* Fade the photo out toward the bottom so it dissolves into the navy canvas and blends seamlessly into the section below — a stronger, smoother lower ramp that reaches solid --foundation-950 by ~88% (leaving a solid navy band at the hero's foot). */ background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--foundation-950) 55%, transparent) 50%, color-mix(in srgb, var(--foundation-950) 88%, transparent) 70%, var(--foundation-950) 88%); } /* --- Style 2 variant (Figma 308:4260): an abstract gradient background IMAGE (images/hero/style-2-bg.jpg — teal top-left, azure lower-right) + a dot-pattern overlay + a bottom fade into the canvas, and no "Our customers" logo strip. The .hero__bg colour is what shows BEFORE the art paints. --- */ /* ⚠️ FLAT NAVY, not a gradient. This used to carry teal/green/azure radial-gradients as a "load-time fallback", but .hero__bg-inner is a [data-reveal] element — it starts at opacity 0 and fades in — so those gradients were visible through it on every single load, reading as a momentary DIFFERENT background before the real art appeared (client, 13 Aug: "the abstract images on the What We Do header take a second to load, and in that second you can see a different gradient"). Matching the canvas colour makes the pre-paint state invisible. Note this is the SHARED style-2 default; .leadership-page / .about-page / the system pages each override it below with a fallback matched to their own art. */ .hero.style-2 .hero__bg { background: var(--foundation-950); } /* Leadership hero uses its own glow art (green lower-left, teal right, blue lower-centre); match the pre-load fallback so there's no colour flash before the image paints. */ .leadership-page .hero.style-2 .hero__bg { background: radial-gradient(40% 45% at 20% 46%, color-mix(in srgb, var(--codebase-green-600) 30%, transparent), transparent 62%), radial-gradient(42% 55% at 92% 46%, color-mix(in srgb, var(--signal-teal-600) 30%, transparent), transparent 60%), radial-gradient(45% 45% at 48% 82%, color-mix(in srgb, var(--azure-600) 28%, transparent), transparent 62%), radial-gradient(30% 35% at 4% 4%, color-mix(in srgb, var(--azure-600) 16%, transparent), transparent 60%); } /* The abstract gradient art fills the hero background. */ .hero.style-2 .hero__bg-art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; } /* Style-2 dots are now the reusable `.shimmer-grid` (identical to the stats module) — fine dot matrix + cursor spotlight — placed as a direct child of the section in module.html (see the "Shimmer grid" block near the top of this file). This replaced the old coarse `.hero__dots` overlay 2026-07-16; the background image stays dot-free. */ .hero.style-2 .hero__bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(to bottom, transparent, var(--foundation-950)); pointer-events: none; } .hero.style-2 .hero__customers { display: none; } /* --- Home variant (Figma 466:8387): looping background VIDEO colour-graded to the brand palette, shimmer-grid dots, dual pill CTAs, and a STATIC 6-across frosted logo grid. The video (or its poster fallback) cover-fills the hero; a mix-blend-mode:color gradient recolours it to the brand teal/azure/lime; the top fades from the canvas colour (so the nav area stays dark) and the bottom dissolves into --foundation-950 like the showcase. --- */ .hero.home .hero__video { position: absolute; /* TOP-anchored box, clipped below by .hero__bg. A taller box shifts the visible framing LOWER; a shorter one lifts the bright footage UP toward the vertical middle (behind the copy / customers) to match Figma 466:8387. Height is the single lever — tune to move it more/less. */ top: 0; bottom: auto; left: 0; right: 0; width: 100%; height: 95%; max-width: none; object-fit: cover; object-position: center top; } /* The poster still sits UNDER the video (same box, same class) and paints immediately — it is the hero's LCP image. The video covers it once it starts, so the swap is invisible. ⚠️ NO z-index on either — the grade / top-fade / bottom-gradient overlays that follow them in the DOM are all z-index:auto, so ANY positive z-index here lifts the video ABOVE them: the mix-blend-mode:color grade stops tinting the footage (raw green particles show through) and the bottom fade disappears. Paint order is entirely DOM order; leave it that way. */ /* ⚠️ `pointer-events: none` was REMOVED from the video (it lived here until 2026-08-12) and must not come back. WebKit's own media-controls container declares `pointer-events: inherit`, so it made the start-playback button non-interactive while still fully visible — the client's "a play button which we cannot tap". The chrome itself is now prevented at source by omitting the `autoplay` attribute (see module.html), which is the only reliable lever. A CSS block targeting ::-webkit-media-controls / -start-playback-button / -overlay-play-button was removed at the same time: it never did anything. Those pseudo-elements are not in WebKit's selector registry (the overlay one is a Blink construct that never applied to Safari), and because a selector list is non-forgiving, the invalid members dropped the entire rule. Modern WebKit controls are a closed UA shadow root with no author-styleable surface — do not try to style them. */ /* The video is not playing (not yet started, refused, stalled, or Reduce Motion) — hide it so the poster underneath stands in. `opacity` rather than display/visibility is deliberate: those two DO make WebKit treat the element as invisible and refuse playback, whereas opacity is never consulted by its visibility gate, so the video can still start while hidden and be revealed once it moves. */ .hero.home.hero--video-blocked video.hero__video { opacity: 0; } /* Brand colour-grade (mix-blend-mode:color re-tints the footage without crushing luminance). AZURE/BLUE-dominant to match the design — a teal edge + navy corners, and NO lime/green stops (the earlier neon-pulse + codebase-green stops threw a harsh green band over the footage). Reduced opacity so the blue footage still reads through as a tint, not a recolor. */ .hero.home .hero__video-grade { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color; /* Higher opacity + PURE azure→deep-navy stops (the old teal stop = signal-teal-600 #018e9a is a green-teal → it threw a green cast on the right; dropped it). mix-blend:color re-hues the footage toward blue, and the higher opacity overrides more of the placeholder's green particles. */ opacity: 0.9; background-image: linear-gradient(88deg, color-mix(in srgb, var(--azure-600) 72%, transparent) 0%, color-mix(in srgb, var(--azure-600) 80%, transparent) 55%, color-mix(in srgb, var(--signal-900) 82%, transparent) 100%); } /* Top fade — the video dissolves up into the hero's own background colour so the headline band + fixed nav sit on a calm dark field (the design masks the video below ~y=312). */ .hero.home .hero__video-top-fade { position: absolute; top: 0; left: 0; right: 0; height: 34%; pointer-events: none; background: linear-gradient(to bottom, #05091f 0%, rgba(5, 9, 31, 0.85) 40%, transparent 100%); } /* Bottom fade — reuse .hero__bg-gradient (446px ramp → foundation-950) sized like the design. */ .hero.home .hero__bg-gradient { top: auto; height: 44.6rem; } /* The static glass logo grid (replaces the .hero__logos slider on this variant): 6 columns, 1px gaps (the canvas showing through draws the separators), rounded clip, frosted cells. */ .hero.home .hero__logo-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.1rem; width: 100%; border-radius: 0.8rem; overflow: hidden; } .hero.home .hero__logo-cell { display: flex; align-items: center; justify-content: center; height: 12rem; padding: 2rem; min-width: 0; /* frosted-glass blocks: slightly transparent + blurred so the background video shows through blurry */ background-color: rgba(255, 255, 255, 0.05); backdrop-filter: blur(1.5rem); -webkit-backdrop-filter: blur(1.5rem); } /* Same per-logo sizing + white-silhouette treatment as the showcase slider. */ .hero.home .hero__grid-logo { max-width: 100%; max-height: 3.2rem; object-fit: contain; filter: brightness(0) invert(1); } /* Home dots: the design's "Pattern - Dots" sits at ~20% over the video — the shimmer grid's 6% base (tuned for flat navy) disappears against the bright footage, so boost it here. */ .hero.home .shimmer-grid { background-image: radial-gradient(color-mix(in srgb, var(--foundation-50) 20%, transparent) 0.06rem, transparent 0.14rem); /* ⚠️ Clear the dots ABOVE the "Our customers" block so the logo strip is never veiled by them (client 2026-08-04: "the dots overlay is on top of the logos — put the logos on top"). The global mask only starts fading at 82%, but the block starts at 71.7% and the marquee at 82.2%, so the strip sat in full dots. Worse, the glass cells' backdrop-filter SAMPLES this layer, compositing the dot texture into every panel — which is why raising z-index wouldn't have fixed it (the container is already z-index 1 above these dots at 0). Ending the layer at 70% keeps the dots over the video/headline, where the design wants them, and hands the strip a clean canvas. Only the home variant renders a shimmer-grid over a logo strip — the showcase (industry) hero has no dot layer at all, so this stays scoped here. */ -webkit-mask-image: linear-gradient(to bottom, transparent, black 18%, black 55%, transparent 70%); mask-image: linear-gradient(to bottom, transparent, black 18%, black 55%, transparent 70%); } /* Home headline spans WIDE (Figma 466:8398 = cols 1-10, not the showcase's 6) so "AI-Accelerated Engineering." fits on one line and the headline reads as the design's wide 3-line block instead of a cramped 4-line wrap. */ .hero.home .hero__headline-col { grid-column: 1 / span 10; } /* Three lines, BALANCED — "AI-Accelerated Engineering." / "Global Delivery." / "Personal Focus." The original build matched Figma 466:8398's literal wrap ("Global Delivery. Personal" / "Focus."), but the client overrode it in the homepage feedback: "Is there anyway we can shrink the width of this box so that focus does not sit by itself on the last line?" text-wrap:balance solves the orphan for ANY copy they later type (a hard width cap only worked for today's wording); browsers without balance keep the old wrap, which is just the design's own line-breaking. */ .hero.home .hero__headline { max-width: 100rem; } .hero.home .hero__headline, .hero.home .hero__headline h1, .hero.home .hero__headline .h1, .hero.home .hero__headline p { text-wrap: balance; } /* Home copy block sits LEFT, under the headline (Figma 466:8399: Body Copy = cols 1-6) — the showcase's right-column placement doesn't apply on this variant. */ .hero.home .hero__copy-col { grid-column: 1 / span 6; grid-row: 2; margin-top: 4.4rem; /* the design's 44px headline→copy gap */ } /* Home customers block: no frosted full-bleed bar (the design's glass lives on the grid CELLS instead), tighter head→grid rhythm. */ .hero.home .hero__customers { padding: 0; gap: 4rem; } /* No full-bleed bar on this variant — the glass lives on the grid CELLS instead (frosted blocks: slightly transparent + blurred, so the background video shows through blurry). */ .hero.home .hero__customers::before { content: none; } .hero.home .hero__customers-sub { color: var(--foundation-400); } /* Home hero mobile — full-cover video stays (no photo band), grid drops to 3 columns. */ @media (max-width: 61.9375rem) { /* 991px */ .hero.home .hero__bg { height: auto; bottom: 0; } /* Home hero mobile (Figma 378:4968): the video sits HIGH as a top band and fades out into the navy below, so the tagline / headline / copy / CTAs read on dark. */ .hero.home .hero__video { height: 66%; /* lift the footage into a top band (base is 95%) — single lever, tune to move it */ } .hero.home .hero__bg-gradient { top: auto; bottom: 0; height: 82%; background: linear-gradient(to top, var(--foundation-950) 0%, var(--foundation-950) 34%, transparent 100%); /* dissolve the video's lower edge into the navy canvas — deeper fade */ } /* CTAs fill the row side-by-side (Revert-01: full-width on mobile). */ .hero.home .hero__cta { flex-wrap: nowrap; gap: 1.2rem; } .hero.home .hero__cta .btn { flex: 1 1 0; justify-content: center; text-align: center; } .hero.home .hero__logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hero.home .hero__logo-cell { height: 9rem; padding: 1.6rem; } /* Match Figma 466:8485: the mobile home headline is larger (~44px = --text-6xl) than the general hero's 3.6rem override, so it wraps to 4 lines by clause (AI-Accelerated / Engineering. / Global Delivery. / Personal Focus.) rather than splitting mid-clause. Higher specificity than the base .hero__headline mobile rule. */ .hero.home .hero__headline { font-size: var(--text-6xl); line-height: var(--leading-6xl); font-weight: var(--fontWeightMedium); } } /* --- Content shell --- */ .hero__content { display: flex; flex-direction: column; gap: 8rem; } /* --- Intro: headline (row 1, left) + copy/CTA (row 2, right) --- */ .hero__intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2.4rem; align-items: start; } .hero__headline-col { grid-column: 1 / span 6; grid-row: 1; display: flex; flex-direction: column; gap: 3.2rem; } .hero__copy-col { grid-column: 8 / span 5; grid-row: 2; display: flex; flex-direction: column; gap: 3.2rem; padding-right: 4rem; } .hero__copy-top { display: flex; flex-direction: column; gap: 2.4rem; } .hero__tagline { margin: 0; font-family: var(--primaryFont); font-size: var(--tagline-base); line-height: var(--leading-tagline-base); letter-spacing: var(--tracking-tagline-base); font-weight: var(--fontWeightRegular); text-transform: uppercase; color: var(--neon-pulse-500); } .hero__headline { margin: 0; font-family: var(--primaryFont); font-size: var(--text-6xl); line-height: var(--leading-6xl); letter-spacing: var(--tracking-6xl); font-weight: var(--fontWeightRegular); color: var(--white); } .hero__accent { display: block; width: 4rem; height: 0.3rem; background-color: var(--neon-pulse-500); } .hero__body p { margin-bottom: 1.6rem; font-size: var(--text-base); line-height: var(--leading-base); color: var(--white); } .hero__body p:last-child { margin-bottom: 0; } .hero__cta { display: flex; align-items: center; gap: 1.6rem; /* Figma "Buttons" frame gap-16px (home variant renders two pills) */ flex-wrap: wrap; } /* --- "Our customers" --- */ .hero__customers { position: relative; display: flex; flex-direction: column; gap: 4rem; /* Vertical breathing room for the frosted bar (Framer wrapper padding 40px 0 → 4rem 0; NO horizontal padding — the global .container already aligns the content). */ padding: 4rem 0; } /* Full-bleed frosted-glass bar behind the WHOLE "Our customers" block (heading + subtitle + logo strip) — matches the Framer wrapper (DIV.framer-15c386c): the single element carrying backdrop-filter blur(10px) + rgba(0,0,0,.25), edge to edge. It's a ::before so the bar spans the viewport while the content stays aligned to .container (Framer heading left = container-aligned, NOT the viewport edge). z-index:-1 keeps it behind the in-flow children; the blur samples the hero photo (which paints earlier). Do NOT put overflow:hidden on .hero__customers — it would clip this full-bleed layer. */ .hero__customers::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); /* Fade the blurred bar in at its TOP and out at its bottom (the mask fades the blur + tint together), so neither edge reads as a hard line. ⚠️ The top ramp is the fix for the client's Revert-02 note — *"the original design had the bottom of the header image fade out into the background colour and logo lockup section. It is now a hard line."* The mask used to be opaque from 0%, so `rgba(0,0,0,.25)` + `blur(1rem)` switched on instantly across a photo that is still ~18% visible there (`.hero__bg-gradient` only reaches solid canvas at 88% of the hero) — a dead-straight edge at the top of `.hero__customers`. Ramping to opaque by 46% lets the photo keep dissolving THROUGH the heading and into the lockup; 46% is just above where the logo strip starts (measured 49% desktop / 38–52% mobile across the 4 industry pages), so the white logo silhouettes keep the bar's full contrast behind them. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 46%, black 68%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 46%, black 68%, transparent 100%); z-index: -1; pointer-events: none; } .hero__customers-head { display: flex; flex-direction: column; gap: 1.2rem; } .hero__customers-title { margin: 0; font-family: var(--primaryFont); font-size: var(--text-3xl); line-height: var(--leading-3xl); font-weight: var(--fontWeightMedium); color: var(--white); } .hero__customers-sub { margin: 0; font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--fontWeightLight); color: var(--foundation-300); } /* The logos are 6 vertical Swiper columns inside a bordered, transparent rounded frame (Figma 195:5523): a full outer border + per-column dividers (both #272e47, same as the sibling `partners` grid) frame the row; border-radius + overflow:hidden clip the corners. The frosted bar lives on the parent .hero__customers, so this frame stays transparent. */ .hero__logos { display: grid; grid-template-columns: repeat(var(--ncols, 6), 1fr); grid-auto-rows: 12rem; border: 0.1rem solid var(--border-grid); border-radius: 0.8rem; overflow: hidden; } /* Each of the 6 columns is an independent VERTICAL Swiper (one logo visible at a time, cycling). border-right draws the separators between columns; overflow clips the slide. */ .hero__logo-col { width: 100%; min-width: 0; /* grid item: kill the min-content floor so a wide logo can't blow the track out */ height: 12rem; overflow: hidden; border-right: 0.1rem solid var(--border-grid); } .hero__logo-col:last-child { border-right: 0; } /* Slide = one slot; the vertical Swiper sizes it to the column height. */ .hero__logo { display: flex; align-items: center; justify-content: center; height: 12rem; padding: 2rem; } /* Logos are tightly-cropped marks with an intrinsic px size (= their Figma bounding box; the grid row is a constant 12rem so 1 unit ≈ 1px), rendered at their natural relative sizes and capped so none dominates. */ .hero__logo img { /* Size is driven PER-LOGO by the image field's own width/height (set on HubSpot via the image size controls) — NOT a forced uniform height, which made wide logos (Shoprite) dominate and compact ones (MTN) look tiny. The definite width/height ATTRS the module renders keep the img from collapsing to 0 as a flex item in the vertical slide (a viewBox-only SVG has no intrinsic size). max-* are only safety caps; object-fit preserves aspect if a set box mismatches. */ max-width: 100%; max-height: 3.2rem; object-fit: contain; /* Client logos ship as their brand artwork (mostly solid black, some colour); force them to a uniform white silhouette for the dark hero. Already-white logos are unaffected. */ filter: brightness(0) invert(1); } /* ============================================================ HERO — LOGO MARQUEE (logo_layout = marquee-1 | marquee-2) Figma 876:2795 "NEW LOGO LOCKUP DESIGN". Logo strips glide sideways in a seamless loop: the homepage runs TWO strips in opposite directions (top left→right, bottom right→left), each industry page runs ONE strip right→left. Opt-in via the module's `logo_layout` field — the original grid/columns layout is untouched and stays the default, so this is a one-flag revert. Pure CSS transform animation: no Swiper, no timers, count-agnostic. ⚠️ Widths are EXPLICIT, never `max-content`. The logos carry width="500" attrs, and WebKit sizes a max-content flex container from that intrinsic width rather than the cell's flex-basis — each set measured 9 × (500+32) = 4786px instead of 9 × 140px, leaving a ~3.5k void that pushed every logo off-screen. Chrome caps it via max-width:100%, iOS Safari does NOT, so desktop looked perfect while the phone showed an empty strip. Deriving the width from the cell count (--marquee-set-cells, emitted per row in the module's scope_css) removes the intrinsic-size dependency and behaves identically in both engines. ============================================================ */ .hero__marquee { display: flex; flex-direction: column; gap: 0.1rem; /* canvas showing through = the divider between the two strips */ min-width: 0; /* flex-item guard — the wide track must not set a min-content floor */ /* (dual-layout marquees: the mobile variant is hidden here and swapped in by the 991px media query further down; pages with a single layout render neither modifier class) */ /* Cell width lives HERE (not in the module's scope_css) so the mobile override below can win — a scoped