/* v20260303 */ /** * Swiper 12.0.2 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2025 Vladimir Kharlampidi * * Released under the MIT License * * Released on: September 18, 2025 */ :root{--swiper-theme-color:#007aff}:host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1}.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:initial;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.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{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,#00000080,#0000)}}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid #0000;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode{.swiper-wrapper:after{content:"";left:0;pointer-events:none;position:absolute;top:0}}.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{height:var(--swiper-virtual-size);width:1px}}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{align-items:center;color:var(--swiper-navigation-color,var(--swiper-theme-color));cursor:pointer;display:flex;height:var(--swiper-navigation-size);justify-content:center;position:absolute;width:var(--swiper-navigation-size);z-index:10;&.swiper-button-disabled{cursor:auto;opacity:.35;pointer-events:none}&.swiper-button-hidden{cursor:auto;opacity:0;pointer-events:none}.swiper-navigation-disabled &{display:none!important}svg{height:100%;object-fit:contain;transform-origin:center;width:100%;fill:currentColor;pointer-events:none}}.swiper-button-lock{display:none}.swiper-button-next,.swiper-button-prev{margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto;.swiper-navigation-icon{transform:rotate(180deg)}}.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}.swiper-horizontal{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{margin-left:0;margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev,&~.swiper-button-next,.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{.swiper-navigation-icon{transform:rotate(180deg)}}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{.swiper-navigation-icon{transform:rotate(0deg)}}}.swiper-vertical{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{left:var(--swiper-navigation-top-offset,50%);margin-left:calc(0px - var(--swiper-navigation-size)/2);margin-top:0;right:auto}.swiper-button-prev,~.swiper-button-prev{bottom:auto;top:var(--swiper-navigation-sides-offset,4px);.swiper-navigation-icon{transform:rotate(-90deg)}}.swiper-button-next,~.swiper-button-next{bottom:var(--swiper-navigation-sides-offset,4px);top:auto;.swiper-navigation-icon{transform:rotate(90deg)}}}.swiper-pagination{position:absolute;text-align:center;transform:translateZ(0);transition:opacity .3s;z-index:10;&.swiper-pagination-hidden{opacity:0}&.swiper-pagination-disabled,.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);left:0;top:var(--swiper-pagination-top,auto);width:100%}.swiper-pagination-bullets-dynamic{font-size:0;overflow:hidden;.swiper-pagination-bullet{position:relative;transform:scale(.33)}.swiper-pagination-bullet-active,.swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullet-active-next-next{transform:scale(.33)}}.swiper-pagination-bullet{background:var(--swiper-pagination-bullet-inactive-color,#000);border-radius:var(--swiper-pagination-bullet-border-radius,50%);display:inline-block;height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));opacity:var(--swiper-pagination-bullet-inactive-opacity,.2);width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));button&{appearance:none;border:none;box-shadow:none;margin:0;padding:0}.swiper-pagination-clickable &{cursor:pointer}&:only-child{display:none!important}}.swiper-pagination-bullet-active{background:var(--swiper-pagination-color,var(--swiper-theme-color));opacity:var(--swiper-pagination-bullet-opacity,1)}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{left:var(--swiper-pagination-left,auto);right:var(--swiper-pagination-right,8px);top:50%;transform:translate3d(0,-50%,0);.swiper-pagination-bullet{display:block;margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0}&.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px;.swiper-pagination-bullet{display:inline-block;transition:transform .2s,top .2s}}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets{.swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}&.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap;.swiper-pagination-bullet{transition:transform .2s,left .2s}}}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:transform .2s,right .2s}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,#00000040);position:absolute;.swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));height:100%;left:0;position:absolute;top:0;transform:scale(0);transform-origin:left top;width:100%}.swiper-rtl & .swiper-pagination-progressbar-fill{transform-origin:right top}&.swiper-pagination-horizontal,&.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-horizontal>&,.swiper-vertical>&.swiper-pagination-progressbar-opposite{height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0;width:100%}&.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,&.swiper-pagination-vertical,.swiper-horizontal>&.swiper-pagination-progressbar-opposite,.swiper-vertical>&{height:100%;left:0;top:0;width:var(--swiper-pagination-progressbar-size,4px)}}.swiper-pagination-lock{display:none}.swiper-scrollbar{background:var(--swiper-scrollbar-bg-color,#0000001a);border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;&.swiper-scrollbar-disabled,.swiper-scrollbar-disabled>&{display:none!important}&.swiper-scrollbar-horizontal,.swiper-horizontal>&{bottom:var(--swiper-scrollbar-bottom,4px);height:var(--swiper-scrollbar-size,4px);left:var(--swiper-scrollbar-sides-offset,1%);position:absolute;top:var(--swiper-scrollbar-top,auto);width:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);z-index:50}&.swiper-scrollbar-vertical,.swiper-vertical>&{height:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);left:var(--swiper-scrollbar-left,auto);position:absolute;right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);width:var(--swiper-scrollbar-size,4px);z-index:50}}.swiper-scrollbar-drag{background:var(--swiper-scrollbar-drag-bg-color,#00000080);border-radius:var(--swiper-scrollbar-border-radius,10px);height:100%;left:0;position:relative;top:0;width:100%}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{align-items:center;display:flex;height:100%;justify-content:center;text-align:center;width:100%;>canvas,>img,>svg{max-height:100%;max-width:100%;object-fit:contain}}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{left:0;opacity:0;pointer-events:none;position:absolute;top:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{margin:0 auto;transition-timing-function:ease-out}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-direction:column;flex-wrap:wrap}.swiper-fade{&.swiper-free-mode{.swiper-slide{transition-timing-function:ease-out}}.swiper-slide{pointer-events:none;transition-property:opacity;.swiper-slide{pointer-events:none}}.swiper-slide-active{pointer-events:auto;& .swiper-slide-active{pointer-events:auto}}}.swiper.swiper-cube{overflow:visible}.swiper-cube{.swiper-slide{backface-visibility:hidden;height:100%;pointer-events:none;transform-origin:0 0;visibility:hidden;width:100%;z-index:1;.swiper-slide{pointer-events:none}}&.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}.swiper-slide-active,.swiper-slide-next,.swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube-shadow{bottom:0;height:100%;left:0;opacity:.6;position:absolute;width:100%;z-index:0;&:before{background:#000;bottom:0;content:"";filter:blur(50px);left:0;position:absolute;right:0;top:0}}}.swiper-cube{.swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}}.swiper-cube{.swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-slide-shadow-cube.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper.swiper-flip{overflow:visible}.swiper-flip{.swiper-slide{backface-visibility:hidden;pointer-events:none;z-index:1;.swiper-slide{pointer-events:none}}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}}.swiper-flip{.swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-slide-shadow-flip.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper-creative{.swiper-slide{backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}}.swiper.swiper-cards{overflow:visible}.swiper-cards{.swiper-slide{backface-visibility:hidden;overflow:hidden;transform-origin:center bottom}} /** * tom-select.css (v2.5.1) * Copyright (c) contributors * * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this * file except in compliance with the License. You may obtain a copy of the License at: * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF * ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. * */ .ts-control { gap: 1rem; height: 100%; padding: 0; width: 100%; position: relative; z-index: 2; box-sizing: border-box; box-shadow: none; border-radius: 0px; display: flex; flex-wrap: wrap; } .ts-wrapper.multi.has-items .ts-control { /* padding: calc(8px - 2px - 0px) 8px calc(8px - 2px - 3px - 0px); */ } .full .ts-control { background-color: transparent; } .disabled .ts-control, .disabled .ts-control * { cursor: default !important; } .focus .ts-control { box-shadow: none; } .ts-control > * { vertical-align: baseline; display: inline-block; } .ts-wrapper.multi .ts-control > div { cursor: pointer; margin: 0 3px 3px 0; padding: 2px 6px; background: #f2f2f2; color: #303030; border: 0px solid #d0d0d0; overflow: auto; } .ts-wrapper.multi .ts-control > div.active { background: #e8e8e8; color: #303030; border: 0px solid #cacaca; } .ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active { color: rgb(124.5, 124.5, 124.5); background: white; border: 0px solid white; } .ts-control > input { flex: 1 1 auto; min-width: 7rem; display: inline-block !important; padding: 0 !important; min-height: 0 !important; max-height: none !important; max-width: 100% !important; margin: 0 !important; text-indent: 0 !important; border: 0 none !important; background: none !important; line-height: inherit !important; -webkit-user-select: auto !important; -moz-user-select: auto !important; -ms-user-select: auto !important; user-select: auto !important; box-shadow: none !important; } .ts-control > input::placeholder { color: rgba(0, 0, 0, 0.45); font-size: 1.6rem; font-weight: 300; font-family: var(--secondaryFont); } .ts-wrapper.has-items .ts-control > input::placeholder { color: transparent; } .ts-control > input::-ms-clear { display: none; } .ts-control > input:focus { outline: none !important; } .has-items .ts-control > input { margin: 0px 4px !important; } .ts-control.rtl { text-align: right; } .ts-control.rtl.single .ts-control:after { left: 15px; right: auto; } .ts-control.rtl .ts-control > input { margin: 0px 4px 0px -2px !important; } .disabled .ts-control { opacity: 0.5; background-color: #fafafa; } .input-hidden .ts-control > input { opacity: 0; position: absolute; left: -10000px; } .ts-dropdown { position: absolute; top: 100%; left: 0; width: 100%; z-index: 10; border: 1px solid #d0d0d0; background: #fff; margin: 0.25rem 0 0; border-top: 0 none; box-sizing: border-box; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border-radius: 0 0 3px 3px; } .ts-dropdown [data-selectable] { cursor: pointer; overflow: hidden; } .ts-dropdown [data-selectable] .highlight { background: rgba(125, 168, 208, 0.2); border-radius: 1px; } .ts-dropdown .option, .ts-dropdown .optgroup-header, .ts-dropdown .no-results, .ts-dropdown .create { padding: 5px 8px; } .ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option { cursor: inherit; opacity: 0.5; } .ts-dropdown [data-selectable].option { opacity: 1; cursor: pointer; } .ts-dropdown .optgroup:first-child .optgroup-header { border-top: 0 none; } .ts-dropdown .optgroup-header { color: #303030; background: #fff; cursor: default; } .ts-dropdown .active { background-color: #f5fafd; color: #495c68; } .ts-dropdown .active.create { color: #495c68; } .ts-dropdown .create { color: rgba(48, 48, 48, 0.5); } .ts-dropdown .spinner { display: inline-block; width: 30px; height: 30px; margin: 5px 8px; } .ts-dropdown .spinner::after { content: " "; display: block; width: 24px; height: 24px; margin: 3px; border-radius: 50%; border: 5px solid #d0d0d0; border-color: #d0d0d0 transparent #d0d0d0 transparent; animation: lds-dual-ring 1.2s linear infinite; } @keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .ts-dropdown-content { overflow: hidden auto; max-height: 200px; scroll-behavior: smooth; } .ts-wrapper.plugin-drag_drop .ts-dragging { color: transparent !important; } .ts-wrapper.plugin-drag_drop .ts-dragging > * { visibility: hidden !important; } .plugin-checkbox_options:not(.rtl) .option input { margin-right: 0.5rem; } .plugin-checkbox_options.rtl .option input { margin-left: 0.5rem; } /* stylelint-disable function-name-case */ .plugin-clear_button { --ts-pr-clear-button: 1em; } .plugin-clear_button .clear-button { opacity: 0; position: absolute; top: 50%; transform: translateY(-50%); right: calc(8px - 6px); margin-right: 0 !important; background: transparent !important; transition: opacity 0.5s; cursor: pointer; } .plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button { right: max(var(--ts-pr-caret), 8px); } .plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button { opacity: 1; } .ts-wrapper .dropdown-header { position: relative; padding: 10px 8px; border-bottom: 1px solid #d0d0d0; background: color-mix(#fff, #d0d0d0, 85%); border-radius: 3px 3px 0 0; } .ts-wrapper .dropdown-header-close { position: absolute; right: 8px; top: 50%; color: #303030; opacity: 0.4; margin-top: -12px; line-height: 20px; font-size: 20px !important; } .ts-wrapper .dropdown-header-close:hover { color: black; } .plugin-dropdown_input.focus.dropdown-active .ts-control { box-shadow: none; border: 1px solid #d0d0d0; } .plugin-dropdown_input .dropdown-input { border: 1px solid #d0d0d0; border-width: 0 0 1px; display: block; padding: 8px 8px; box-shadow: none; width: 100%; background: transparent; } .plugin-dropdown_input .items-placeholder { border: 0 none !important; box-shadow: none !important; width: 100%; } .plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder { display: none !important; } .ts-wrapper.plugin-input_autogrow.has-items .ts-control > input { min-width: 0; } .ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input { flex: none; min-width: 4px; } .ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder { color: transparent; } .ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder { color: transparent; } .ts-dropdown.plugin-optgroup_columns .ts-dropdown-content { display: flex; } .ts-dropdown.plugin-optgroup_columns .optgroup { border-right: 1px solid #f2f2f2; border-top: 0 none; flex-grow: 1; flex-basis: 0; min-width: 0; } .ts-dropdown.plugin-optgroup_columns .optgroup:last-child { border-right: 0 none; } .ts-dropdown.plugin-optgroup_columns .optgroup::before { display: none; } .ts-dropdown.plugin-optgroup_columns .optgroup-header { border-top: 0 none; } .ts-wrapper.plugin-remove_button .item { display: inline-flex; align-items: center; } .ts-wrapper.plugin-remove_button .item .remove { color: inherit; text-decoration: none; vertical-align: middle; display: inline-block; padding: 0 6px; border-radius: 0 2px 2px 0; box-sizing: border-box; } .ts-wrapper.plugin-remove_button .item .remove:hover { background: rgba(0, 0, 0, 0.05); } .ts-wrapper.plugin-remove_button.disabled .item .remove:hover { background: none; } .ts-wrapper.plugin-remove_button .remove-single { position: absolute; right: 0; top: 0; font-size: 23px; } .ts-wrapper.plugin-remove_button:not(.rtl) .item { padding-right: 0 !important; } .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove { border-left: 1px solid #d0d0d0; margin-left: 6px; } .ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove { border-left-color: #cacaca; } .ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove { border-left-color: white; } .ts-wrapper.plugin-remove_button.rtl .item { padding-left: 0 !important; } .ts-wrapper.plugin-remove_button.rtl .item .remove { border-right: 1px solid #d0d0d0; margin-right: 6px; } .ts-wrapper.plugin-remove_button.rtl .item.active .remove { border-right-color: #cacaca; } .ts-wrapper.plugin-remove_button.rtl.disabled .item .remove { border-right-color: white; } :root { --ts-pr-clear-button: 0px; --ts-pr-caret: 0px; --ts-pr-min: .75rem; } .ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input { cursor: pointer; } /* .ts-control:not(.rtl) { padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)); } .ts-control.rtl { padding-left: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)); } */ .ts-wrapper { color: #000; font-weight: 300; font-size: 1.6rem; position: relative; font-family: var(--secondaryFont); } .ts-dropdown, .ts-control, .ts-control input { color: #303030; font-family: inherit; font-size: 13px; line-height: 18px; } .ts-control, .ts-wrapper.single.input-active .ts-control { background: transparent; cursor: text; } .ts-hidden-accessible { border: 0 !important; clip: rect(0 0 0 0) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 0px !important; height: 0px !important; white-space: nowrap !important; } .ts-dropdown .optgroup-header { color: #000; font-weight: 700; font-size: 1.6rem; padding-top: 1.5rem; padding-bottom: 1.5rem; font-family: var(--secondaryFont); /* info: These styles are on the tom-select.css file */ } .ts-dropdown .active { } .ts-dropdown [data-selectable] .highlight { background-color: rgba(245, 130, 32, .2); } .ts-dropdown [data-selectable].option { font-weight: 300; font-size: 1.6rem; color: #000; padding: 1.2rem 1.5rem; font-family: var(--secondaryFont); } .ts-dropdown [data-selectable].option.active { color: #fff; background-color: rgba(245, 130, 32, 1); } .ts-wrapper { height: 4rem; } .ts-wrapper:after { display: flex; align-items: center; justify-content: center; right: 0rem; top: 0; bottom: 0; z-index: 1; margin: auto; width: 1.5rem; height: 1.5rem; color: #000000; position: absolute; transform: rotate(180deg); transition: transform 250ms ease; content: url(https://26284765.fs1.hubspotusercontent-eu1.net/hubfs/26284765/raw_assets/public/3cube-theme/images/caret.svg); } .ts-wrapper.dropdown-active:after { transform: rotate(0deg); } .ts-wrapper.multi .ts-control > div.item, .ts-wrapper.single .ts-control > div.item { display: inline-flex; align-items: center; margin: 0px; overflow: hidden; padding: 0 .6rem; font-weight: 300; max-height: 3rem; min-height: 3rem; font-size: 1.6rem; border-radius: .4rem; min-width: fit-content; color: var(--primaryColour); font-family: var(--secondaryFont); border: 1px solid var(--primaryColour); background-color: rgba(245, 130, 32, 0.10); } .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove { margin: 0; border: none; } .ts-dropdown-content { max-height: 43rem; } .area input { height: 100%; font-size: 1.6rem; font-weight: 300; font-family: var(--secondaryFont); } .area input::placeholder { color: rgba(0, 0, 0, 0.45); } .area .has-items input::placeholder { color: transparent; } .area .ts-control { min-height: 100%; gap: 0.6rem; padding: 0.4rem 0; border: none; border-radius: 0; flex-wrap: nowrap; padding-right: 2rem; background-color: transparent; } /*! 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; overflow-x: hidden; } /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { padding: 0; width: 100%; border: none; height: .1rem; outline: none; margin: 2rem 0; box-sizing: content-box; background-color: #979797; } /** * 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, .strong, .bold { font-family: inherit; font-weight: var(--fontWeightBold); } /** * 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: 63%; line-height: 0; position: relative; vertical-align: baseline; font-family: var(--secondaryFont); } 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%; } span { font-weight: inherit; font-family: inherit; } /* 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: 0px; width: 100%; } /* Desktop layout */ @media (min-width: 768px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100)); } .row-fluid .span2 { width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100)); } .row-fluid .span3 { width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100)); } .row-fluid .span4 { width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100)); } .row-fluid .span5 { width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100)); } .row-fluid .span6 { width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100)); } .row-fluid .span7 { width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100)); } .row-fluid .span8 { width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100)); } .row-fluid .span9 { width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100)); } .row-fluid .span10 { width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100)); } .row-fluid .span11 { width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100)); } } .content-wrapper { margin: 0 auto; padding: 0 1rem; } @media screen and (min-width: 1380px) { .content-wrapper { padding: 0; } } .dnd-section > .row-fluid { margin: 0 auto; } .dnd-section .dnd-column { padding: 0 0rem; } @media (max-width: 768px) { .dnd-section .dnd-column { padding: 0; } } :root { --white: #FFFFFF; --grey: #D1D3D4; --cardBorderColour: #E4E4E4; --bodyColour: #141517; --ctaPrimaryColour: #F58220; --primaryColour: #F58220; --secondaryColour: #e1e5ea; } a { text-decoration: none; color: var(--primaryColour); } .btn { outline: none; cursor: pointer; text-wrap: nowrap; font-weight: 600; text-align: center; border-radius: 0px; color: var(--white); display: inline-flex; text-decoration: none; padding: 1rem 5rem; align-items: center; letter-spacing: .21rem; justify-content: center; transition: all 250ms ease; border: 2px solid var(--primaryColour); background-color: var(--ctaPrimaryColour); font-size: 1.4rem; background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat; background-size: 0% 100%; background-position: center; } .hs-button.primary.large { outline: none; cursor: pointer; text-wrap: nowrap; font-weight: 600; text-align: center; border-radius: 0px; color: var(--white); display: inline-flex; text-decoration: none; padding: 1rem 5rem; align-items: center; letter-spacing: .21rem; justify-content: center; transition: all 250ms ease; border: 2px solid var(--primaryColour); background-color: var(--ctaPrimaryColour); font-size: 1.4rem; text-transform: uppercase; } .hs-button.primary.large:hover { color: var(--primaryColour); background-color: var(--white); border: 2px solid var(--primaryColour); } .btn:hover { color: var(--primaryColour); border: 2px solid var(--primaryColour); background-size: 100% 100%; } .btn.outline { color: #000000; box-shadow: none; background-color: transparent; border: 2px solid var(--primaryColour); background-image: linear-gradient(var(--primaryColour), var(--primaryColour)); } .btn.outline:hover { color: var(--white); border: 2px solid var(--primaryColour); background-size: 100% 100%; } .btn.white-outline { border-color: var(--white); } .btn.white-outline:hover { border-color: var(--white); } .btn.outline.white { color: var(--white); border-color: var(--white); } .btn.outline.white:hover { color: var(--white); border-color: var(--white); background-color: var(--primaryColour); } .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: 5px; padding: 0px; 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: -3px; left: 0; position: absolute; height: 2px; background-color: var(--ctaPrimaryColour); } .btn.link:after { content: ""; width: 10px; height: 10px; 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: 0px; padding-right: 0px; color: var(--primaryColour); background-color: transparent; } .btn#menu { width: 100%; padding: 0px; height: 40px; border: none; max-width: 40px; background-color: transparent; } .btn.scroll { gap: 5px; padding: 0px; border: none; color: #141517; align-items: center; background-color: transparent; } .btn.pricing-btn { font-size: 14px; letter-spacing: 0; text-align: center; line-height: 12px; font-weight: 700; padding: 1rem 2.8rem; } .btn.listing-btn { width: 100%; color: #fff; text-transform: uppercase; padding: 1.4rem 5rem; border: 0.2rem solid var(--primaryColour); background-color: var(--primaryColour); position: static; background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat; background-size: 0% 100%; background-position: center; } .btn.listing-btn::after { content: ''; position: absolute; inset: 0; z-index: 0; } .card:hover .btn.listing-btn { color: var(--primaryColour); border-color: var(--primaryColour); background-size: 100% 100%; } .btn.listing-btn:hover { color: var(--primaryColour); border-color: var(--primaryColour); background-size: 100% 100%; } .card .btn { width: 100%; text-transform: uppercase; } .btn.cta { color: #000; padding: 1rem 4rem; background-color: #fff; } .btn.cta:hover { color: #fff; border-color: #fff; background-color: transparent; } .btn.blog-btn { width: 100%; color: #000000; background-color: #fff; text-transform: uppercase; } .btn.blog-btn:hover { color: #fff; background-color: var(--primaryColour); } :root { --primaryFont: "Exo 2", sans-serif; --secondaryFont: "Roboto", sans-serif; --fontWeightThin: 300; --fontWeightRegular: 400; --fontWeightMedium: 500; --fontWeightSemiBold: 600; --fontWeightBold: 700; } html { font-size: 62.5%; } h1, .h1 { margin: 0px; font-size: 6.5rem; letter-spacing: 0px; line-height: 7.5rem; margin-bottom: 2rem; font-family: var(--primaryFont); font-weight: var(--fontWeightSemiBold); } @media (max-width: 76.8rem) { h1, .h1 { font-size: 3.5rem; line-height: 4rem; } } @media (max-width: 1100px) { h1 br, .h1 br { display: none; } } h1 span, .h1 span { font-family: inherit; } .hs-landing-page h1 { } h2, .h2{ margin: 0px; font-size: 4.5rem; letter-spacing: 0px; line-height: 5.5rem; margin-bottom: 2rem; font-family: var(--primaryFont); font-weight: var(--fontWeightSemiBold); } @media (max-width: 768px) { h2, .h2 { font-size: 3rem; line-height: 3.5rem; } } h2:last-child, .h2:last-child { margin-bottom: 0px; } h3, .h3 { margin: 0px; font-size: 3.5rem; line-height: 4.5rem; margin-bottom: 2rem; letter-spacing: 0rem; font-family: var(--primaryFont); font-weight: var(--fontWeightSemiBold); } @media (max-width: 768px) { h3, .h3 { font-size: 2.5rem; line-height: 3rem; } } h3:last-child, .h3:last-child { margin-bottom: 0px; } h4, .h4 { margin: 0px; font-size: 3rem; letter-spacing: 0px; line-height: 4rem; margin-bottom: 2rem; font-family: var(--primaryFont); font-weight: var(--fontWeightSemiBold); } @media (max-width: 768px) { h4, .h4 { font-size: 2rem; line-height: 2.5rem; } } h4:last-child, .h4:last-child { margin-bottom: 0px; } h5, .h5 { margin: 0px; font-size: 2.5rem; letter-spacing: 0px; line-height: 3.5rem; margin-bottom: 2rem; font-family: var(--primaryFont); font-weight: var(--fontWeightSemiBold); } @media (max-width: 768px) { h5, .h5 { font-size: 1.8rem; line-height: 2.3rem; } } h5:last-child, .h5:last-child { margin-bottom: 0px; } h6, .h6 { margin: 0px; font-size: 2rem; letter-spacing: 0px; line-height: 2.5rem; margin-bottom: 2rem; font-family: var(--primaryFont); font-weight: var(--fontWeightSemiBold); } @media (max-width: 768px) { h6, .h6 { font-weight: var(--fontWeightMedium); } } h6:last-child, .h6:last-child { margin-bottom: 0px; } ul { margin: 0px; padding-left: 1.8rem; margin-bottom: 2rem; } ul:last-child { margin-bottom: 0 } p, li { margin: 0px; font-size: 1.6rem; letter-spacing: 0px; line-height: 2.5rem; margin-bottom: 2rem; font-family: var(--secondaryFont); font-weight: var(--fontWeightThin); } p span, li span, p a { font-weight: inherit; font-family: inherit; } p:last-child, li:last-child { margin-bottom: 0 } .form form { position: relative; } form .form-group { border-bottom: 1px solid #D1D3D4; } /* Tom Select — wrapper border */ form .form-group.has-items, form .form-group:has(.ts-wrapper.has-items) { border-bottom: 1px solid var(--primaryColour); } /* JS-driven .has-value orange border — WRAPPER-based patterns ONLY (the custom .form-group and custom-select widgets, where the border lives on the wrapper). HubSpot .hs-form-field fields carry their border on the input/select/textarea element itself (grey default → orange via the element's own .has-value rules below). A border on the .hs-form-field wrapper would (a) double it up on a single field and (b) span a single line across BOTH the country select + number on the phone field — so it is deliberately excluded here. */ form .form-group.has-value, .custom-select-wrapper.has-value { border-bottom: 1px solid var(--primaryColour); } /* HubSpot .hs-form-field: orange border on the ELEMENT itself when IT has a value. Element- driven (not wrapper-driven), so the phone's country select and number field never turn each other orange. Scoped under .hs-form-field so it out-specifies the typed base rules (e.g. ".form input[type='text']", which would otherwise reset the colour back to grey). */ .form .hs-form-field input.has-value, .form .hs-form-field textarea.has-value, .form .hs-form-field select.has-value { border-bottom-color: var(--primaryColour); } /* When input sits inside a .form-group, border is on wrapper — remove it from element */ form .form-group input, form .form-group textarea { border-bottom: none; } /* Fallback: inputs/textareas NOT inside a .form-group or .hs-form-field get border directly */ .form input.has-value, .form textarea.has-value { border-bottom-color: var(--primaryColour); } .form select.has-value { color: #000; border-bottom-color: var(--primaryColour); } .form form fieldset .input { margin: 0 !important; } .form form fieldset.form-columns-1 { display: grid; max-width: 100%; padding: 0; border: none; margin-left: 0; margin-right: 0; margin-bottom: 3rem; grid-template-columns: repeat(1, 1fr); } .form form fieldset.form-columns-1:last-of-type { margin-bottom: 5.8rem; } .form form fieldset.form-columns-2 { gap: 3rem; display: grid; max-width: 100%; border: none; padding: 0; margin-left: 0; margin-right: 0; margin-bottom: 3rem; grid-template-columns: repeat(2, 1fr); } @media (max-width: 480px) { .form form fieldset.form-columns-2 { grid-template-columns: repeat(1, 1fr); } } .form form fieldset.form-columns-2 .hs-form-field { width: 100%; float: none; margin-bottom: 0px; } .form form fieldset.form-columns-2 .hs-form-field .input { margin-right: 0px; margin-bottom: 0px; } .form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="number"] { color: #000; width: 100% !important; height: 5.5rem; outline: none; display: block; border-radius: 0; padding: 0 1rem; font-weight: 300; border: none; border-bottom: 0.1rem solid var(--grey); font-family: var(--secondaryFont); } .form select { color: grey; border: none; outline: none; height: 5.5rem; display: block; padding: 0 1rem; cursor: pointer; border-radius: 0; font-weight: 300; appearance: none; width: 100% !important; font-family: var(--secondaryFont); border-bottom: 0.1rem solid var(--grey); } .form .hs-fieldtype-select > .input { position: relative; } .form .hs-fieldtype-select > .input:after { top: 50%; content: ""; right: 1rem; width: 1.5rem; height: .9rem; position: absolute; pointer-events: none; background-position: center; background-repeat: no-repeat; transform: translateY(-50%) rotate(180deg); background-image: url(https://26284765.fs1.hubspotusercontent-eu1.net/hubfs/26284765/raw_assets/public/3cube-theme/images/caret.svg); } /* The caret overlay above sits 1–2.5rem from the right edge, but .form select only reserves 1rem of right padding, so long options (e.g. "How did you hear about 3Cube?") ran underneath it. Reserve room for the caret and truncate cleanly instead of colliding. Scoped to HubSpot dropdown fields so the List-with-us country select (its own padding) is untouched. */ .form .hs-fieldtype-select select { padding-right: 3rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .form textarea { color: #000; width: 100% !important; outline: none; display: block; padding: 1rem; margin: 0 !important; border-radius: 0rem; border: none; font-weight: 300; border-bottom: 0.1rem solid var(--grey); } /* International phone field (HubSpot) — the country-code share one .hs-fieldtype-intl-phone wrapper, so their bottom borders butted together into a single continuous line. Lay them out as two separate fields with a gap so each keeps its own underline. */ .form .hs-fieldtype-intl-phone { display: flex; gap: 3rem; align-items: stretch; border-bottom: none; } .form .hs-fieldtype-intl-phone select { flex: 0 0 auto; width: 15rem !important; padding-right: 2.6rem; background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 1.2rem; /* the country and the number . Fix: force a flex/gap layout so each part is its own field with its own underline, each following the grey→orange rule based on its OWN value. Colours are pinned with !important because HubSpot's stylesheet and the source-order-fragile global rules were overriding them. The orange rule sits at specificity (0,2,1) — BELOW the (0,3,1) red `.input-error` rule in module.html — so an invalid field still shows red even when it has a value. Scoped to .contact-form so other .form modules keep their own behaviour. */ /* Wrappers never draw the underline — the element inside does. (Custom-select widgets are the exception below: they have no inner , so the wrapper owns the line.) */ .contact-form .form-group, .contact-form .hs-form-field, .contact-form .hs-form-field .input, .contact-form .hs-fieldtype-intl-phone, .contact-form .hs-fieldtype-intl-phone .input { border-bottom: none !important; } /* Base: every field element gets ONE grey underline (and no stray HubSpot box border). */ .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form input[type="number"], .contact-form select, .contact-form textarea { border: none !important; border-bottom: 0.1rem solid var(--grey) !important; } /* Filled: the same element turns orange once it has a value. Declared AFTER the grey base (same 0,2,1 specificity so it wins on source order) yet below `.input-error` (0,3,1) so errors win. */ .contact-form input.has-value, .contact-form select.has-value, .contact-form textarea.has-value { border-bottom-color: var(--primaryColour) !important; } /* Custom-select widgets own the line on the wrapper (no inner ): grey by default, orange once a value is chosen (the global form-border JS toggles .has-value on the wrapper). */ .contact-form .custom-select-wrapper, .contact-form .custom-multiselect-trigger { border-bottom: 0.1rem solid var(--grey) !important; } .contact-form .custom-select-wrapper.has-value { border-bottom-color: var(--primaryColour) !important; } /* HubSpot international phone: split the shared country into two separate fields with a gap, so their underlines never merge into one line. */ .contact-form .hs-fieldtype-intl-phone { display: flex !important; gap: 3rem; align-items: stretch; } .contact-form .hs-fieldtype-intl-phone select { flex: 0 0 auto; width: 15rem !important; } .contact-form .hs-fieldtype-intl-phone input[type="tel"] { flex: 1 1 auto; width: auto !important; } .contact-form textarea { min-height: 11rem; } .form .hs-fieldtype-file > label { display: flex; cursor: pointer; overflow: hidden; border-radius: 0; padding-left: 1rem; align-items: center; border: 1px solid var(--grey); justify-content: space-between; } .form .hs-fieldtype-file > label:after { color: #fff; font-weight: 600; font-size: 1.4rem; content: "Attach"; letter-spacing: 0.21rem; padding: 1.2rem 4.88rem; text-transform: uppercase; background-color: var(--primaryColour); } .form .hs-fieldtype-file > label span { color: var(--grey); font-weight: 300; font-size: 1.6rem; font-family: var(--secondaryFont); } .form .hs-fieldtype-file > label span:after { } .form .hs-fieldtype-file .input { display: none; } .form .hs-form-field { margin-bottom: 0rem; position: relative; } .form .hs-form-field.hs-fieldtype-file { max-width: 37rem; } .form .hs-form-field .hs-error-msgs { margin: 0px; padding: 0px; list-style: none; position: absolute; } .form .hs_error_rollup .hs-error-msgs { margin: 0px; padding: 0px; list-style: none; position: relative; } .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: 3rem; display: flex; flex-wrap: wrap; } .form .legal-consent-container > div { width: fit-content; } .form .legal-consent-container > div.hs-richtext p { margin-bottom: 0; font-size: 1.4rem; } .form .legal-consent-container .field.hs-form-field { margin-bottom: 0; } .form .hs-richtext, .form .hs-richtext p { font-size: 1.5rem; color: #000; letter-spacing: 0; line-height: 2.5rem; font-weight: 300; } .form .inputs-list { list-style: none; padding: 0px; } .form .legal-consent-container .hs-form-booleancheckbox-display { display: flex; align-items: center; justify-content: start; /* flex-direction: row-reverse; justify-content: flex-end; */ } .form input[type=checkbox] { display: none; } .form input[type=checkbox] + span { gap: 1rem; margin: 0px; display: flex; align-items: center; font-size: 1.6rem; color: var(--grey); letter-spacing: 0; line-height: 2.5rem; font-weight: 300; font-family: var(--secondaryFont); } .form input[type=checkbox] + span:before { content: ''; width: 1.9rem; min-width: 1.9rem; height: 1.9rem; display: block; border-radius: 0px; border: 2px solid #D1D3D4; } .form input[type=checkbox]:checked + span { color: #000; } .form input[type=checkbox]:checked + span:before { background-color: var(--primaryColour); } .form.subscribe > h3 { font-size: 20px; color: var(--white); text-transform: uppercase; } .form.subscribe input[type="email"] { background-color: transparent; border: 2px solid var(--white); } .form.subscribe input[type="email"]::placeholder { color: var(--white); } .form.subscribe input[type="submit"] { border: none; outline: none; cursor: pointer; padding: 10px 20px; display: inline-flex; font-size: 12px; 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: 10px; grid-template-columns: 15ch 1fr; } .form.subscribe-cta-form form input[type=submit] { height: 40px; outline: none; border: none; cursor: pointer; padding: 0 15px; border-radius: 0px; color: var(--white); background-color: var(--primaryColour); } .hs-search-field__bar.form form .hs-search-field__input { width: 100%; max-width: 27rem; min-width: 27rem; font-size: 1.6rem; border-width: .2rem; padding-left: 2.2rem; font-family: var(--secondaryFont); } .hs-search-field__bar.form form .hs-search-field__input::placeholder { color: rgba(0, 0, 0, 0.45); font-weight: 300; font-family: var(--secondaryFont); } .hs-search-field__bar.form form .search-icon { width: 20px; height: 20px; top: 0px; bottom: 0px; right: 23px; margin: auto 0; position: absolute; background: none; border: none; outline: none; padding: 0px; display: flex; align-items: center; } .hs-search-field__bar.form form .search-icon svg { width: 100%; max-width: 20px; } .form .hs_submit.hs-submit .actions { display: flex; justify-content: start; } .custom-select-wrapper select { display: none; } .custom-select-wrapper { width: 100%; max-width: 27rem; } @media (max-width: 991px) { .custom-select-wrapper { max-width: 100%; } } .custom-select-wrapper .custom-select { position: relative; width: 100%; cursor: pointer; user-select: none; } .custom-select-wrapper .custom-select .custom-select-trigger { border-bottom: none; padding: 1.6rem 2.2rem; font-size: 1.6rem; font-weight: 300; position: relative; background-color: #fff; font-family: var(--secondaryFont); } .custom-select-wrapper .custom-select .custom-select-trigger::after { display: flex; align-items: center; justify-content: center; right: 2.2rem; top: 0; bottom: 0; margin: auto; width: 1.5rem; height: 1.5rem; color: #000000; position: absolute; transform: rotate(180deg); transition: transform 250ms ease; content: url(https://26284765.fs1.hubspotusercontent-eu1.net/hubfs/26284765/raw_assets/public/3cube-theme/images/caret.svg); } .custom-select-wrapper .custom-select.open .custom-select-trigger::after { transform: rotate(0deg); } .custom-select-wrapper .custom-select .custom-options { display: flex; flex-direction: column; position: absolute; top: calc(100% + 5px); left: 0; right: 0; background-color: #fff; border-radius: 0px; box-shadow: 6px 9px 30px 0px #00000012; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: 0.2s ease; z-index: 10; } .custom-select-wrapper .custom-select.open .custom-options { opacity: 1; visibility: visible; transform: translateY(0); } .custom-select-wrapper .custom-select .custom-options .custom-option { font-weight: 300; display: block; font-size: 1.5rem; padding: .8rem 1rem; font-family: var(--secondaryFont); } .custom-select-wrapper .custom-select .custom-options .custom-option:hover { background: #f0f0f0; } .custom-multiselect-wrapper select { display: none; } .custom-multiselect { width: 100%; height: 100%; cursor: pointer; user-select: none; position: relative; } .custom-multiselect-trigger { gap: 6px; background: #fff; padding: 0; font-size: 1.6rem; position: relative; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; height: 100%; max-height: 5.5rem; font-weight: 300; font-family: var(--secondaryFont); border-bottom: 1px solid #D1D3D4; } .custom-multiselect-trigger::after { transform: rotate(180deg) translateY(-13%); content: url(https://26284765.fs1.hubspotusercontent-eu1.net/hubfs/26284765/raw_assets/public/3cube-theme/images/caret.svg); position: absolute; right: 0; font-size: 1.2rem; color: #000; } .custom-multiselect .custom-options { position: absolute; top: calc(100% + 5px); left: 0; right: 0; opacity: 0; visibility: hidden; transition: 0.2s ease; z-index: 10; overflow: hidden; background-color: #fff; transform: translateY(-10px); box-shadow: 6px 9px 30px 0px #00000012; } .custom-multiselect.open .custom-options { opacity: 1; visibility: visible; transform: translateY(0); } .custom-multiselect .custom-options .custom-search { height: auto; max-width: 95%; font-size: 1.4rem; padding: .6rem .8rem; border-radius: .4rem; border: .1rem solid #ddd; margin: 1.5rem auto .5rem; width: calc(100% - 1.6rem); } .options-list { max-height: 160px; overflow-y: auto; } .custom-option { display: block; font-size: 1.5rem; padding: .8rem 1rem; } .custom-option.selected::before { content: "✔"; margin-right: 8px; color: green; } .custom-option:hover { background: #f0f0f0; } .selected-badge { border-radius: .4rem; padding: .2rem .6rem; font-size: 1.4rem; color: #fff; background-color: var(--primaryColour); } .card { display: flex; border-radius: 0px; position: relative; flex-direction: column; background: var(--white); border: none; box-shadow: 6px 9px 30px 0 rgba(0, 0, 0, 0.07); transition: background-color 250ms ease, box-shadow 250ms ease, border-color 250ms ease, transform 250ms ease; } /* Only show the pointer cursor on cards / posts that actually have a clickable CTA link */ .card:has(.cta-container a[href]:not([href=""])), .post:has(.cta-container a[href]:not([href=""])) { cursor: pointer; } .card:hover { border-color: #D1D3D4; box-shadow: 0 6px 20px 0 rgba(0,0,0,0.12); } .card .header-slider .swiper-slide { overflow: hidden; } .card .header-slider .swiper-slide img { transition: transform 400ms ease; transform-origin: center center; } .card:hover .header-slider .swiper-slide img { transform: scale(1.05); } .card .arrows .swiper-button-prev, .card .arrows .swiper-button-next { height: 73px; transition: background-color 250ms ease; } .card:hover .arrows .swiper-button-prev, .card:hover .arrows .swiper-button-next { background-color: rgba(0,0,0,0.4); } .card:hover .cta-container .btn { color: var(--primaryColour); border: 2px solid var(--primaryColour); background-size: 100% 100%; } /* Blog posts use .btn.outline — match its native :hover (white text, orange fill) */ .post:hover .cta-container .btn { color: var(--white); border: 2px solid var(--primaryColour); background-size: 100% 100%; } /* Parks/development cards: move entire slide (image + card) together on hover */ .swiper-slide:has(.card) { transition: transform 250ms ease, box-shadow 250ms ease; } .swiper-slide:has(.card):hover { transform: none; } .swiper-slide:has(.card):hover .card { transform: none; } .container { width: 100%; margin: 0 auto; padding: 0 2rem; max-width: var(--containerWidth); } .cta-container { gap: 15px; display: flex; align-items: center; } .cta-container.right { justify-content: end; } .cta-container.center { justify-content: center; } .cta-container.space-between { justify-content: space-between; } .cta-container.align-center { align-items: center; } .cta-container.full { width: 100%; } .swiper-pagination-bullet { opacity: 1; width: 3rem; height: .3rem; border-radius: 0; background-color: #C8C8C8; transition: width 250ms ease; } .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 9.2rem; height: .3rem; background-color: var(--primaryColour); } .swiper-pagination-bullets.swiper-pagination-horizontal { display: flex; padding-top: 7.5rem; justify-content: center; } .tag { gap: .62rem; font-weight: 400; font-size: 1.2rem; line-height: normal; align-items: center; display: inline-flex; padding: .4rem 1.5rem; border-radius: .453rem; justify-content: center; color: var(--primaryColour); font-family: var(--secondaryFont); border: 1px solid var(--primaryColour); background-color: rgba(245, 130, 32, 0.1); } .fs { font-size: 1.6rem; } .fs.x-small { font-size: 1.2rem; } .vcard { } .vcard:before { content: ''; display: inline-block; width: 2rem; height: 2rem; background-image: url(https://26284765.fs1.hubspotusercontent-eu1.net/hubfs/26284765/raw_assets/public/3cube-theme/images/cloud-download-outline.svg); background-repeat: no-repeat; background-size: contain; } /* The button's own supplies the "Save Contact" label (a CSS :after label here duplicated it — the only .vcard usage is property.module, whose markup has the span). */ :root { --containerWidth: 121rem; --verticalSpacing: 80px; --swiper-pagination-bottom: -3rem; --tabletLarge: 110rem; --tabletSmall: 76.8rem; --mobileLarge: 48rem; --mobileSmall: 32rem; } hr { border: none; border-top: none; height: 1px; margin: 1.3rem 0; background-color: #979797; } .no-scroll { overflow-y: hidden; } .notification { position: fixed; top: -100px; left: 50%; transform: translateX(-50%); background-color: #fff; padding: 1rem 2rem; border-radius: 0.4rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); font-size: 1.4rem; color: #000; z-index: 1002; width: 30rem; text-align: center; transition: top 0.3s ease; } .notification.show { top: 1rem; } * { font-family: var(--primaryFont); } body::before { left: -9999999rem; position: absolute; content: url(https://26284765.fs1.hubspotusercontent-eu1.net/hubfs/26284765/close-icon.svg); } body { font-size: 1.6rem; } .card .card-body article h3 { font-size: 2.5rem; line-height: 3rem; margin-bottom: 1rem; } .menu-underlay { position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; z-index: 1000; display: none; background-color: rgba(0,0,0,0.7); } .mega-menu-container { top: 0; left: 0; width: 100%; position: fixed; padding: 3rem 0; z-index: 9991; background-color: transparent; color: var(--primaryColour); transition: background-color 200ms ease; } @media (max-width: 1100px) { .mega-menu-container { padding: 2rem 0; } } .mega-menu-container.scrolled, .mega-menu-container.active { background-color: #FFFFFF; } @media (max-width: var(--tabletLarge)) { } .mega-menu-container .container { gap: 4.5rem; display: flex; position: relative; align-items: center; justify-content: space-between; } @media (max-width: var(--tabletLarge)) { .mega-menu-container { } } .mega-menu-container .container .logo img, .mega-menu-container .container .logo.dark img { transform: scale(1.2); transform-origin: left center; } .mega-menu-container.scrolled .container .logo, .mega-menu-container.active .container .logo { display: none; } .mega-menu-container .container .logo.dark { display: none; } .mega-menu-container.scrolled .container .logo.dark, .mega-menu-container.active .container .logo.dark { display: block; } .mega-menu-container .container:after { left: 0; right: 0; content: ""; height: 1px; margin: auto; bottom: -1rem; z-index: 1000; position: absolute; width: calc(100% - 4rem); background-color: var(--white); display: none; } @media (max-width: 1100px) { .mega-menu-container .container:after { display: none; } } .mega-menu-container.scrolled .container:after, .mega-menu-container.active .container:after { background-color: #979797; } .mega-menu-container .container #menu { display: none; } @media (max-width: 1100px) { .mega-menu-container .container #menu { display: flex; align-items: center; justify-content: center; height: 3rem; max-width: 3rem; } } .mega-menu-container .container #menu:after { width: 100%; content: url("https://26284765.fs1.hubspotusercontent-eu1.net/hubfs/26284765/raw_assets/public/3cube-theme/images/menu.svg"); } .mega-menu-container.scrolled .container #menu:after, .mega-menu-container.active .container #menu:after { content: url("https://26284765.fs1.hubspotusercontent-eu1.net/hubfs/26284765/raw_assets/public/3cube-theme/images/menu-dark.svg"); } .mega-menu-container .container #menu svg { fill: var(--primaryColour); } .mega-menu-container ul.menu-items { flex: 1; gap: 0; margin: 0px; padding: 0px; display: flex; align-items: center; list-style: none; justify-content: end; position: relative; z-index: 999; /* transform: translateY(17px); */ } @media (max-width: 1100px) { .mega-menu-container ul.menu-items { top: -17px; right: -100%; height: 100dvh; max-height: 100dvh; overflow: scroll; width: 85vw; position: fixed; justify-content: start; flex-direction: column; background-color: #fff; z-index: 1000; transition: right 250ms ease; box-shadow: 0 0 50px 2px rgba(0, 0, 0, .1); } .mega-menu-container ul.menu-items.open { right: 0; top: 0; } } .mega-menu-container ul.menu-items .logo { display: none; } @media (max-width: 1100px) { .mega-menu-container ul.menu-items .logo { display: block; } } .mega-menu-container.landing-page ul.menu-items { display: none; } .mega-menu-container.landing-page #menu { display: none; } .mega-menu-container ul li { cursor: pointer; margin-bottom: 0px; } @media (max-width: 1100px) { .mega-menu-container ul li.menu-item { width: 100%; display: flex; flex-wrap: wrap; margin-bottom: 0px; border-bottom: 1px solid #ededed; } } .mega-menu-container ul li.menu-item.cta { margin-left: 1.5rem; } @media (max-width: 1100px) { .mega-menu-container ul li.menu-item.cta { margin-left: 0rem; padding: 0 3rem; padding-top: 3rem; border: none; } } .mega-menu-container ul li.menu-item.children .expand { display: none; } @media (max-width: 1100px) { .mega-menu-container ul li.menu-item.children .expand { width: 100%; display: flex; max-width: 56px; align-items: center; justify-content: center; background-position: center; background-repeat: no-repeat; border-left: 1px solid #ededed; background-image: url('https://20155276.fs1.hubspotusercontent-na1.net/hubfs/20155276/drop-down-arrow.svg'); } .mega-menu-container ul li.menu-item.children.show-submenu .expand { border-left: none; transform: rotate(180deg); border-right: 1px solid #ededed; } } .mega-menu-container.simple ul > li.show-submenu { position: relative; } .mega-menu-container ul li.menu-item.cta > a { color: #fff; border-radius: 0px; padding: 1rem 2rem; letter-spacing: .21rem; overflow: hidden; background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat; background-size: 0% 100%; background-position: center; transition: all 250ms ease; border: .2rem solid transparent; font-family: var(--primaryFont); background-color: var(--primaryColour); } @media (max-width: 1100px) { .mega-menu-container ul li.menu-item.cta > a { width: 100%; text-align: center; justify-content: center; } } .mega-menu-container ul li.menu-item.cta > a:hover, .mega-menu-container.scrolled ul li.menu-item.cta > a:hover, .mega-menu-container.active ul li.menu-item.cta > a:hover { color: var(--primaryColour); border: 2px solid var(--primaryColour); background-size: 100% 100%; } .mega-menu-container ul li.menu-item:not(.cta) > a.active { color: var(--primaryColour); font-weight: 700; } .mega-menu-container ul li.menu-item > a { font-size: 1.4rem; padding: 0 0px; padding-left: 1.4rem; padding-right: 1.4rem; padding-bottom: 2rem; transform: translateY(1rem); text-decoration: none; color: var(--white); font-family: var(--secondaryFont); font-weight: var(--fontWeightRegular); transition: color 200ms ease; } .mega-menu-container ul li.menu-item:not(.cta) > a:hover, .mega-menu-container.scrolled ul li.menu-item:not(.cta) > a:hover, .mega-menu-container.active ul li.menu-item:not(.cta) > a:hover { color: var(--primaryColour); } @media (max-width: 1100px) { /* Whole-row tap target on mobile: fill the flex row so tapping anywhere in a nav item's section selects it, not just the text. (.children rows already fill via the rule below; this covers plain links and non-link parents.) */ .mega-menu-container ul li.menu-item > a, .mega-menu-container ul li.menu-item > span { display: flex; flex: 1; width: 100%; padding: 2rem; color: #000000; transform: none; } } .mega-menu-container.scrolled ul li.menu-item > a, .mega-menu-container.active ul li.menu-item > a, .mega-menu-container.scrolled ul li.menu-item.children > a { color: #000; } .mega-menu-container.scrolled ul li.menu-item > a.active, .mega-menu-container.active ul li.menu-item > a.active { color: var(--primaryColour); } .mega-menu-container.scrolled ul li.menu-item.cta > a, .mega-menu-container.active ul li.menu-item.cta > a { color: #fff; } .mega-menu-container ul li.menu-item.children { } .mega-menu-container ul li.menu-item.children > a { gap: 5px; cursor: pointer; display: inline-flex; /* padding-bottom: 4rem; */ text-decoration: none; /* transform: translateY(2rem); */ /* color: var(--white); */ font-family: var(--secondaryFont); } @media (max-width: 1100px) { .mega-menu-container ul li.menu-item.children > a { flex: 1; width: 100%; padding-bottom: 20px; transform: translateY(0rem); } } .mega-menu-container.active ul li.menu-item.children > a { color: #000; } .mega-menu-container ul li.menu-item.children > a:after { transition: transform 250ms ease; content: url(https://26284765.fs1.hubspotusercontent-eu1.net/hubfs/26284765/chevron.svg); } @media (max-width: 1100px) { .mega-menu-container ul li.menu-item.children > a:after { display: none; } } .mega-menu-container ul li.menu-item.children.show-submenu > a:after { transform: rotate(180deg); } .mega-menu-container ul li.menu-item { } .mega-menu-container ul li.menu-item.children .sub-menu { gap: 3rem; right: 0px; z-index: 1000; display: none; border-radius: 0; min-width: 83.5rem; position: absolute; padding: 3rem 3.5rem; background-color: #fff; width: calc(100% - 4rem); border: 1px solid #ededed; transform: translateY(1.5rem); grid-template-columns: 23.5rem 1fr; box-shadow: 0 0 5rem .2rem rgba(0,0,0,0.1); } @media (max-width: 1100px) { .mega-menu-container ul li.menu-item.children .sub-menu { display: none; flex-direction: column; gap: 4rem; position: fixed; min-width: unset; width: 100%; top: 0px; right: -100%; grid-template-columns: 1fr; transition: left 250ms ease; } } .mega-menu-container ul li.menu-item.children.show-submenu .sub-menu { left: 0; right: 0; gap: 0px; margin: auto; display: grid; overflow: hidden; padding: 0rem 0rem; } @media (max-width: 1100px) { .mega-menu-container ul li.menu-item.children.show-submenu .sub-menu { top: 0px; right: 0px; height: auto; padding: 20px; display: flex; overflow-y: scroll; position: relative; min-width: 100%; box-shadow: none; border-radius: 0px; transform: translateY(0px); border-bottom: none; } } .mega-menu-container ul li.menu-item.children.show-submenu .sub-menu .column { width: 100%; padding: 0rem; border-right: 1px solid #efefef; } .mega-menu-container ul li.menu-item.children.show-submenu .sub-menu .column:last-child { border-right: 0px solid #efefef; } .mega-menu-container ul li.menu-item.children .sub-menu .menu-overview { display: flex; flex-direction: column; align-items: start; } .mega-menu-container ul li.menu-item.children .sub-menu .close { display: none; font-size: 35px; position: absolute; top: 11px; right: 20px; color: #140047; } @media (max-width: 1100px) { .mega-menu-container ul li.menu-item.children .sub-menu .close { display: block; } } .mega-menu-container ul li.menu-item.children .sub-menu .menu-overview h3 { } .mega-menu-container ul li.menu-item.children .sub-menu .menu-overview p { flex: 1; } .mega-menu-container ul li.menu-item.children .sub-menu .menu-overview .cta.arrow { font-size: 16px; color: #140047; letter-spacing: 0; text-align: center; font-weight: 500; padding: 10px 22px; } .mega-menu-container ul li.menu-item.children .sub-menu .menu-overview .cta.arrow:hover { border-color: #bf90f7; } .mega-menu-container ul li.menu-item.children.show-submenu .sub-menu .title-container { margin-bottom: 3rem; } .mega-menu-container ul li.menu-item.children.show-submenu .sub-menu .title-container .title { font-size: 2rem; font-weight: var(--fontWeightSemiBold); } .mega-menu-container ul li.menu-item.children .sub-menu .sub-menu-items { gap: 2.5rem; row-gap: 2rem; display: flex; flex-direction: column; } @media (max-width: 1100px) { .mega-menu-container ul li.menu-item.children .sub-menu .sub-menu-items { display: flex; flex-direction: column; } } .mega-menu-container ul li.menu-item.children .sub-menu .sub-menu-items > a { padding: 0; gap: 1.5rem; display: flex; align-items: start; text-decoration: none; font-family: var(--secondaryFont); } .mega-menu-container ul li.menu-item.children .sub-menu .sub-menu-items a .icon { width: 100%; max-width: 1.565rem; } .mega-menu-container ul li.menu-item.children .sub-menu .sub-menu-items a .label { padding: 0px; display: block; color: #000; font-size: 1.4rem; letter-spacing: 0; line-height: 1.8rem; margin-bottom: 1rem; font-family: var(--secondaryFont); font-weight: var(--fontWeightThin); } .mega-menu-container ul li.menu-item.children .sub-menu .sub-menu-items a:hover .label { color: var(--primaryColour); } .mega-menu-container ul li.menu-item.children .sub-menu .sub-menu-items a .label:last-child { margin-bottom: 0px; } .mega-menu-container ul li.menu-item.children .sub-menu .sub-menu-items a .description { display: block; font-size: 1.4rem; color: #140047; letter-spacing: 0; line-height: 2rem; font-weight: 200; padding: 0px; text-transform: none; } .mega-menu-container.simple ul li.menu-item.children.show-submenu .sub-menu { left: 50%; right: 50%; width: 100%; display: flex; margin: 0 auto; padding: 0.5rem; min-width: auto; max-width: none; width: max-content; overflow: visible; border-radius: 1.2rem; border: none; box-shadow: 0 0.4rem 2.4rem rgba(0,0,0,0.12); transform: translateX(-50%) translateY(0.8rem); } @media (max-width: 991px) { .mega-menu-container.simple ul li.menu-item.children.show-submenu .sub-menu { left: 0; right: 0; transform: none; min-width: 100%; max-width: 100%; padding: 1.5rem; } } .mega-menu-container.simple ul li.menu-item.children.show-submenu .sub-menu:before { top: -0.6rem; left: 0; right: 0; content: ""; margin: auto; width: 1.2rem; height: 1.2rem; position: absolute; background-color: white; border-radius: 0.2rem; transform: rotate(45deg); } .mega-menu-container.simple ul li.menu-item.children.show-submenu .sub-menu .sub-menu-items { gap: 0px; width: 100%; display: flex; flex-direction: column; } @media (max-width: 991px) { .mega-menu-container.simple ul li.menu-item.children.show-submenu .sub-menu .sub-menu-items { gap: 1rem; } } .mega-menu-container.simple ul li.menu-item.children.show-submenu .sub-menu .sub-menu-items a { display: flex; align-items: center; gap: 1.2rem; padding: 1rem 1.4rem; border: none; border-radius: 0.8rem; transition: background-color 150ms ease; } @media (max-width: 991px) { .mega-menu-container.simple ul li.menu-item.children.show-submenu .sub-menu .sub-menu-items a { padding: 1.2rem 1rem; } } .mega-menu-container.simple ul li.menu-item.children.show-submenu .sub-menu .sub-menu-items a svg { width: 100%; min-width: 2.2rem; max-width: 2.2rem; } .mega-menu-container.simple ul li.menu-item.children.show-submenu .sub-menu .sub-menu-items a svg path { fill: #5F6368; } .mega-menu-container.simple ul li.menu-item.children.show-submenu .sub-menu .sub-menu-items a:hover { background-color: rgba(245, 130, 32, .07); } .mega-menu-container.simple ul li.menu-item.children.show-submenu .sub-menu .sub-menu-items a:hover svg path { fill: var(--primaryColour); } .mega-menu-container.simple ul li.menu-item.children.show-submenu .sub-menu .sub-menu-items a .label { margin-bottom: 0px; font-size: 1.5rem; font-weight: var(--fontWeightRegular, 400); } .form-banner { /* padding-top: 12rem; padding-bottom: 12rem; */ } .form-banner .container { gap: 30px; display: grid; grid-template-columns: 1fr minmax(auto, 570px); } @media (max-width: 991px) { .form-banner .container { grid-template-columns: 1fr; } } .hs-landing-page .form-banner .form { padding: 5rem 3rem; border-radius: 7px; border: 1px solid #E4E4E4; background-color: #FFFFFF; box-shadow: 5px 5px 25px 4px 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) 0px; padding: 100px 0px 150px; */ } .content-banner .container { gap: 5.5rem; display: flex; align-items: center; } @media (max-width: 991px) { .content-banner .container { gap: 3rem; flex-direction: column-reverse; } } .content-banner .container.equal { gap: 30px; } .content-banner .image { width: 100%; flex-grow: 1; flex-shrink: 0; padding-left: 0; max-width: 50rem; } @media (max-width: 991px) { .content-banner .image { max-width: 100%; padding-left: 0rem; } } .content-banner.reverse .image { padding-left: 0px; padding-right: 0rem; } @media (max-width: 480px) { .content-banner.reverse .image { padding-right: 0rem; } } .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: 100%; } @media (max-width: 1100px) { .content-banner .content .inner-content br { display: none; } } .content-banner .content .inner-content *:last-child { margin-bottom: 0px; } .content-banner .content .inner-content.split ul { column-count: 2; column-gap: 30px; } .content-banner .content .cta-container { padding-top: 35px; } @media (max-width: 768px) { .content-banner .content .cta-container { flex-direction: column; } } @media (max-width: 768px) { .content-banner .content .cta-container a { width: 100%; } } .content-banner .content .inner-content .item-list { gap: 30px; display: flex; flex-direction: column; } .content-banner .content .inner-content .item-list .list { gap: 15px; display: flex; align-items: center; } .content-banner .content .inner-content .item-list .list .bullet { content: ""; height: 45px; min-width: 4px; max-width: 4px; background-color: var(--primaryColour); } .content-banner .content .inner-content .item-list .list span { display: block; padding: 8px 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: 800px; text-align: center; } .content-banner.stacked .container .content .cta-container { justify-content: center; } /* Split Layout */ .content-banner.split, .content-banner.split-reverse { padding-top: 0; padding-bottom: 0; } .content-banner.split .container { gap: 0; padding: 0; max-width: 100%; min-height: 55rem; align-items: stretch; } .content-banner.split .image { flex: 0 0 50%; max-width: 50%; overflow: hidden; display: flex; padding: 0; } .content-banner.split .image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; transform-origin: center center; } .content-banner.split .image:hover img { transform: scale(1.05); } .content-banner.split .content { flex: 0 0 50%; display: flex; align-items: center; padding: 6rem 7rem; background-color: #242424; background-image: linear-gradient(152deg, rgba(36, 36, 36, 0.00) 11.07%, #242424 62.89%), url('https://26284765.fs1.hubspotusercontent-eu1.net/hubfs/26284765/pattern-updated2.svg'); background-repeat: no-repeat; background-size: auto; background-position: top left; } .content-banner.split .content .inner-content { max-width: 50rem; } @media (max-width: 991px) { .content-banner.split .container { min-height: auto; flex-direction: column; } .content-banner.split .image { flex: 0 0 40rem; max-width: 100%; width: 100%; } .content-banner.split .content { flex: unset; width: 100%; padding: 5rem 4rem; } } @media (max-width: 768px) { .content-banner.split .image { flex: 0 0 28rem; } .content-banner.split .content { padding: 4rem 2.5rem; } } /* Split Reverse Layout */ .content-banner.split-reverse .container { gap: 0; padding: 0; max-width: 100%; min-height: 55rem; align-items: stretch; flex-direction: row-reverse; } .content-banner.split-reverse .image { flex: 0 0 50%; max-width: 50%; overflow: hidden; display: flex; padding: 0; } .content-banner.split-reverse .image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; transform-origin: center center; } .content-banner.split-reverse .image:hover img { transform: scale(1.05); } .content-banner.split-reverse .content { flex: 0 0 50%; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 6rem 8rem; background-color: #242424; background-image: linear-gradient(332deg, rgba(36, 36, 36, 0.00) 11.07%, #242424 62.89%), url('https://26284765.fs1.hubspotusercontent-eu1.net/hubfs/26284765/pattern-updated2.svg'); background-repeat: no-repeat; background-size: auto; background-position: bottom right; } .content-banner.split-reverse .content .inner-content, .content-banner.split-reverse .content .cta-container { width: 100%; max-width: 50rem; } @media (max-width: 991px) { .content-banner.split-reverse .container { min-height: auto; flex-direction: column; } .content-banner.split-reverse .image { flex: 0 0 40rem; max-width: 100%; width: 100%; } .content-banner.split-reverse .content { flex: unset; width: 100%; padding: 5rem 4rem; } } @media (max-width: 768px) { .content-banner.split-reverse .image { flex: 0 0 28rem; } .content-banner.split-reverse .content { padding: 4rem 2.5rem; } } .media-container { padding: var(--verticalSpacing) 0px; } .media-container .container { gap: 30px; 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) 0px; } .blog-preview .container { gap: 30px; 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: 1px 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: 10px; display: inline-block; } .blog-preview .post-content .meta .read-time { color: #a9a9a9; margin-bottom: 10px; display: inline-block; } .blog-preview .post.style-2 { overflow: hidden; border-radius: 10px; background-color: #fff; } .blog-preview .post.style-2 .post-content { padding: 0 30px 30px; } .blog-preview .post.style-2 .cta-container { justify-content: end; } .blog-preview .post.style-3 .featured-image { overflow: hidden; border-radius: 10px; } .blog-preview .post.style-3 .btn { border: none; padding: 0px; align-items: center; color: var(--primaryColour); background-color: transparent; } .blog-preview .post.style-3 .btn:after { content: ""; width: 20px; height: 20px; display: block; background-size: 20px; 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 { } .slider.logos .container .swiper-pagination-bullets.swiper-pagination-horizontal { --swiper-pagination-bottom: -50px; } .slider .container { position: relative; } .slider .container .rich-text { margin-bottom: 6.5rem; } .slider .slide-content { gap: 8rem; display: grid; align-items: center; grid-template-rows: 1fr 1fr; grid-template-columns: repeat(6, 1fr); } @media (max-width: 768px) { .slider .slide-content { gap: 4rem; grid-template-columns: repeat(3, 1fr); } } .slider .slide-content .logo { width: 100%; display: flex; justify-content: center; } .slider .slide-content .content { flex-grow: 0; flex-shrink: 1; } .slider .slide-content .content *:last-child{ margin-bottom: 0px; } .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.full-width .container { max-width: 256rem; padding: 0; } .call-to-action.full-width .container .content { margin-left: calc((100% - var(--containerWidth)) / 2); } .call-to-action .container .inner-wrapper { display: grid; position: relative; overflow: hidden; min-height: 30rem; align-items: center; background-color: #242424; grid-template-columns: 1fr; } .call-to-action .container .inner-wrapper::before { top: 0; left: 0; right: 0; bottom: 0; z-index: 1; content: ""; position: absolute; background: linear-gradient(100deg, #242424 54.07%, rgba(36, 36, 36, 0.00) 86.4%); } .call-to-action.subscribe .container .inner-wrapper::before { display: none; } .call-to-action .featured-image { top: 0; right: 0; z-index: 0; width: 60%; height: 100%; position: absolute; background-size: cover; background-position: center; background-repeat: no-repeat; } @media (max-width: 991px) { .call-to-action .featured-image { width: 100%; opacity: 0.4; } .call-to-action .container .inner-wrapper::before { background: linear-gradient(100deg, #242424 45%, rgba(36, 36, 36, 0.5) 100%); } } .call-to-action .content { position: relative; z-index: 2; max-width: 70rem; padding: 3.7rem 8.8rem 5rem; } /* Tablet */ @media (max-width: 1100px) { .call-to-action .content { padding: 4rem 4rem 4.5rem; max-width: 100%; } .call-to-action.full-width .container .content { margin-left: 0; } } /* Mobile */ @media (max-width: 768px) { .call-to-action .container .inner-wrapper { min-height: auto; } .call-to-action .content { padding: 4rem 2.5rem 4.5rem; } .call-to-action .content .btn { width: 100%; text-align: center; } .call-to-action.full-width .container .content { margin-left: 0; } } .call-to-action .content .rich-text { margin-bottom: 3.3rem; } .call-to-action .content .rich-text:last-child { margin-bottom: 0; } .call-to-action .featured-image img { width: 100%; height: 100%; object-fit: cover; } .call-to-action.subscribe .container .inner-wrapper { grid-template-columns: 64rem 1fr; } .call-to-action.newsletter .container .inner-wrapper { padding: 0px; align-items: stretch; } .call-to-action.newsletter .container .inner-wrapper .content { padding: 60px 50px; max-width: 740px; } .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 .form form { display: grid; grid-template-columns: 30rem 17rem; } .call-to-action .form .hs-form-field { margin-bottom: 0px; } .call-to-action .form input[type=email] { color: #fff; width: 100%; height: 4rem; max-width: 30rem; padding: 0 1.5rem; border: 2px solid #FFFFFF; border-right: none; background-color: transparent; } .call-to-action .form input[type=email]::placeholder { color: #fff; } .call-to-action .form form input[type=submit] { padding: 0; color: #000; width: 17rem; height: 4rem; font-weight: 700; font-size: 1.4rem; border-color: #fff; background-color: #fff; } .call-to-action .form form input[type=submit]:hover { border-color: #fff; } .pricing { } .pricing .container { gap: 30px; 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: 40px; flex-direction: column; border: 1px solid #E4E4E4; border-radius: 0 0 7px 7px; background-position-y: bottom; background-position-x: right; background-repeat: no-repeat; background-size: 270px; border-radius: .7rem; box-shadow: 5px 5px 25px 4px 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: 35px; padding: 2.5rem 4rem; background-color: #00A9F3; border-radius: 7px 7px 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: 30px; display: flex; flex-direction: column; } .pricing .price-column .features span { gap: 10px; display: flex; align-items: center; } .contact-form { } .contact-form .container { max-width: 83rem; } .blog-tags-container { padding-top: 7rem; padding-bottom: 7rem; background-color: #ffffff; } .blog-tags-container .container { display: flex; align-items: center; justify-content: space-between; } .blog-tags-container .tags { width: 100%; display: flex; height: 5.5rem; cursor: pointer; border-radius: 0; max-width: 27rem; padding: 0 2.2rem; position: relative; align-items: center; background-color: #fff; border: 2px solid #D1D3D4; 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(180deg); transform-origin: center; background-image: url(https://26284765.fs1.hubspotusercontent-eu1.net/hubfs/26284765/raw_assets/public/3cube-theme/images/caret.svg); } .blog-tags-container .tags.open:after { transform: rotate(0deg); } .blog-tags-container .tags #initial-tag { font-size: 1.6rem; color: #000000; font-weight: 300; font-family: var(--secondaryFont); } .blog-tags-container .tags .list { left: 0px; top: 48px; width: 100%; /* display: flex; */ display: none; overflow: hidden; position: absolute; border-radius: 0px; flex-direction: column; border: 1px 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: 13px 20px; font-weight: 300; text-decoration: none; color: #000; border: none; border-radius: 0; justify-content: flex-start; background-color: transparent; } .blog-tags-container .tags .list a:hover { color: #fff; background-color: var(--primaryColour); } .recent-blogs-container.featured { padding-top: 7rem; margin-bottom: 0rem; padding-bottom: 7rem; background-color: rgba(209, 211, 212, .3); } .recent-blogs-container { padding-top: 0; margin-bottom: 0rem; padding-bottom: 8rem; background-color: #ffffff; } .recent-blogs-container.related { padding: 10rem; padding-top: 0; } .recent-blogs-container .rich-text { margin-bottom: 4.5rem; } .recent-blogs-container.featured .posts { gap: 0rem; display: grid; grid-template-columns: repeat(1, 1fr); } .recent-blogs-container .posts { gap: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); } .recent-blogs-container .posts .post { display: flex; overflow: hidden; border-radius: 0px; flex-direction: column; background-color: var(--white); box-shadow: 6px 9px 30px 0 rgba(0, 0, 0, 0.07); } /* .recent-blogs-container .posts .post:nth-child(1) .featured-image { max-height: 497px; } */ /* .recent-blogs-container .posts .post:nth-child(1) .body .summary-container { justify-content: space-between; } */ .recent-blogs-container .posts.grid .post .body .post-footer { display: block; } .recent-blogs-container .posts.grid .post .body .post-footer .cta-container { margin-bottom: 0; } .recent-blogs-container .posts.grid .post .body .post-footer .cta-container .btn { width: 100%; } .recent-blogs-container .posts .post .post-container { flex: 1; display: flex; flex-direction: column; } .recent-blogs-container.featured .posts .post .post-container { display: grid; grid-template-columns: minmax(auto, 57rem) 1fr; } .recent-blogs-container .posts .post .featured-image { display: flex; overflow: hidden; max-height: 20.9rem; align-items: center; justify-content: center; } .recent-blogs-container.featured .posts .post .featured-image { height: 100%; max-height: unset; } .recent-blogs-container .posts .post .featured-image a { width: 100%; height: 100%; display: block; } .recent-blogs-container .posts .post .featured-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform 400ms ease; } .recent-blogs-container .posts .post:hover .featured-image img { transform: scale(1.05); } .recent-blogs-container .posts .post .body { flex: 1; display: flex; padding: 2.5rem; flex-direction: column; } .recent-blogs-container .posts .post .body .body-header { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 2rem; justify-content: space-between; gap: 1rem; } .recent-blogs-container .posts .post .body .body-header .tag { gap: 0.5rem; display: flex; flex-wrap: wrap; } .recent-blogs-container .posts .post .body .body-header .tag a { margin-right: 0.5rem; } .recent-blogs-container .posts .post .body .body-header .date { gap: 1rem; display: flex; font-size: 1.4rem; justify-content: space-between; font-family: var(--secondaryFont); } .recent-blogs-container .posts .post .body .written-author { display: none; } .recent-blogs-container.featured .posts .post .body .body-header { display: flex; align-items: center; margin-bottom: 2rem; justify-content: space-between; } .recent-blogs-container.featured .posts .post .body .body-header .date { gap: 1rem; display: flex; align-items: center; } .recent-blogs-container .posts .post .body .cta-container { margin-bottom: 2rem; } .recent-blogs-container .posts .post .body .blog-post-title { flex: 1; color: #000; letter-spacing: 0; font-weight: 600; margin-bottom: 3rem; line-height: 3rem; font-size: 2.5rem; } .recent-blogs-container.featured .posts .post .body .blog-post-title { flex: unset; margin-bottom: 2rem; } .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; justify-content: end; flex-direction: column; padding-bottom: 3.8rem; } .recent-blogs-container.related .posts .post .body .summary-container { padding-bottom: 0rem; } .recent-blogs-container.featured .posts .post .body .summary-container { justify-content: start; } .recent-blogs-container .posts .post .body .summary { display: none; font-size: 1.6rem; color: #161B30; letter-spacing: 0; line-height: 25px; font-weight: 400; } .recent-blogs-container.featured .posts .post .body .summary { display: block; } .recent-blogs-container .posts .post .body .summary-container .author { font-size: 1.6rem; color: #161B30; letter-spacing: 0; line-height: 25px; font-weight: 600; } .recent-blogs-container .pagination { display: flex; gap: 5px; justify-content: center; align-items: center; padding-top: 9rem; } .recent-blogs-container .pagination .page-number { color: #141517; font-size: 16px; letter-spacing: 0; text-align: center; line-height: 25px; font-weight: 400; text-decoration: none; padding: 5px 10px; } .recent-blogs-container .pagination .page-number.active { color: #00A9F3; font-weight: 700; } .recent-blogs-container .pagination .previous-posts { margin-right: 10px; } .recent-blogs-container .pagination .next-posts { margin-left: 10px; } /* Blog Listing Mobile Responsive */ @media (max-width: 991px) { .blog-tags-container { padding: 3rem 0; } .blog-tags-container .container { flex-direction: column; gap: 2rem; } .blog-tags-container .tags { width: 100%; max-width: 100%; } .blog-tags-container .tags .list { display: none; width: 100%; z-index: 10; } .blog-tags-container .tags.open .list { display: flex; } .blog-tags-container .tags #initial-tag { font-size: 1.4rem; } .blog-tags-container .tags:after { right: 1.5rem; } .blog-search { width: 100%; } .blog-search .hs-search-field__bar { max-width: 100%; } .hs-search-field__bar.form form .hs-search-field__input { max-width: 100%; } .recent-blogs-container.featured { padding-top: 4rem; padding-bottom: 4rem; } .recent-blogs-container { padding-top: 4rem; padding-bottom: 4rem; } .recent-blogs-container .rich-text { margin-bottom: 3rem; } .recent-blogs-container.featured .posts, .recent-blogs-container .posts { grid-template-columns: repeat(2, 1fr); gap: 2rem; } /* Related-blogs: the desktop 10rem inset padding squeezes the cards on mobile — drop it and let the inner .container provide responsive side padding. Scoped to .related only. */ .recent-blogs-container.related { padding: 0 0 4rem; } .recent-blogs-container.featured .posts .post .post-container { grid-template-columns: 1fr; } .recent-blogs-container .posts .post .featured-image { max-height: 18rem; } .recent-blogs-container .posts .post .body { padding: 2rem; } .recent-blogs-container .posts .post .body .blog-post-title a { font-size: 1.6rem; } .recent-blogs-container .posts .post .body .summary { font-size: 1.4rem; } .recent-blogs-container .pagination { padding-top: 4rem; flex-wrap: wrap; } .recent-blogs-container .pagination .page-number { font-size: 1.4rem; padding: 5px 8px; } } @media (max-width: 576px) { .blog-tags-container { padding: 2rem 0; } .blog-tags-container .tags { height: 4.5rem; padding: 0 1.5rem; } .blog-tags-container .tags #initial-tag { font-size: 1.3rem; } .recent-blogs-container.featured, .recent-blogs-container { padding-top: 3rem; padding-bottom: 3rem; } .recent-blogs-container.featured .posts, .recent-blogs-container .posts { grid-template-columns: 1fr; gap: 1.5rem; } .recent-blogs-container .posts .post .featured-image { max-height: 20rem; } .recent-blogs-container .posts .post .body { padding: 2rem; } .recent-blogs-container .posts .post .body .body-header { flex-direction: column; align-items: flex-start; gap: 2rem; } .recent-blogs-container .posts .post .body .blog-post-title a { font-size: 2.5rem; } .recent-blogs-container .posts .post .body .summary { font-size: 1.3rem; line-height: 1.5; } .recent-blogs-container .posts .post .body .post-footer { flex-direction: column; gap: 1rem; } .recent-blogs-container .pagination { padding-top: 3rem; gap: 0.5rem; } .recent-blogs-container .pagination .page-number { font-size: 1.2rem; padding: 4px 6px; } } .testimonial-slider { padding: 0px; /* Coverflow lays all slides in a wide row; the swiper root is class "swiper-container" (not "swiper") so the global .swiper{overflow:hidden} never applies and the row spilled onto the page, causing horizontal scroll. Clip the full-width section so the 3D side slides still peek to the viewport edge but never scroll the page. */ overflow-x: clip; } .testimonial-slider .rich-text { margin-bottom: 6.5rem; } .testimonial-slider .container { max-width: 1010px; } .testimonial-slider .swiper-slide { display: flex; height: 450px; visibility: hidden; border-radius: 0px; flex-direction: column; padding: 6rem 5rem; justify-content: center; border: 1px solid #d1d3d4; background-color: #D1D3D4; } .testimonial-slider .swiper-slide.swiper-slide-active { background-color: #FFFFFF; } /* Desktop: the Figma active card is 970×500; side cards are 0.85-scaled (825×425) and tucked behind via the coverflow config in the module. Give the slide the active-card size here; Swiper's scale transform shrinks the neighbours. Mobile (<=991) keeps Swiper's default full-width slide. */ @media (min-width: 992px) { .testimonial-slider .swiper-slide { width: 97rem; height: auto; min-height: 50rem; max-width: 100%; } } @media (max-width: 991px) { .testimonial-slider .swiper-slide { height: auto; padding: 3rem 3rem; } } .testimonial-slider .swiper-slide:before { } .testimonial-slider .swiper-slide[style*="background-image"] { border: none; box-shadow: none; min-height: 545px; background-size: cover; background-position: center; background-repeat: no-repeat; } .testimonial-slider .swiper-slide[style*="background-image"]:before { display: none; } .testimonial-slider .swiper-slide article { flex: 1; margin-bottom: 5rem; } .testimonial-slider .swiper-slide article p { line-height: 4rem !important; font-size: 2.5rem !important; color: #000; font-family: var(--primaryFont); } @media (max-width: 991px) { .testimonial-slider .swiper-slide article p { font-size: 2rem !important; line-height: 3rem !important; } } .testimonial-slider .swiper-slide .footer { gap: 2rem; display: flex; align-items: end; min-height: 13.5rem; background-position-y: center; background-position-x: right; background-repeat: no-repeat; background-size: 20rem 13.5rem; background-image: url("https://26284765.fs1.hubspotusercontent-eu1.net/hubfs/26284765/quote.svg"); } .testimonial-slider .swiper-slide .avatar { border-radius: 50%; display: block; width: 60px; height: 60px; object-fit: cover; } .testimonial-slider .swiper-slide .details { display: flex; justify-content: center; flex-direction: column; } /* Company — Figma: primary orange, NeoTech (primary font) Bold, ~2.5rem */ .testimonial-slider .swiper-slide .details .h5 { margin-bottom: 0.6rem; font-size: 2.5rem; line-height: 1.1; color: var(--primaryColour); font-family: var(--primaryFont); font-weight: var(--fontWeightBold); } /* Name Surname — Figma: #1a1c1e, Roboto (secondary font) Bold, ~2rem */ .testimonial-slider .swiper-slide .details .h6 { color: #1a1c1e; font-size: 2rem; line-height: 1.2; margin-bottom: 0.4rem; font-family: var(--secondaryFont); font-weight: var(--fontWeightBold); } /* Job Title — Figma: #5d6472, Roboto (secondary font) Regular, ~1.6rem */ .testimonial-slider .swiper-slide .details p { color: #5d6472; font-size: 1.6rem; line-height: 1.3; margin-bottom: 0; font-family: var(--secondaryFont); font-weight: var(--fontWeightRegular); } /* Mobile: scale the detail lines down (the explicit desktop sizes above out-specify the base .h5/.h6 mobile reductions, so restore a compact size on small screens). */ @media (max-width: 991px) { .testimonial-slider .swiper-slide .details .h5 { font-size: 2rem; } .testimonial-slider .swiper-slide .details .h6 { font-size: 1.7rem; } .testimonial-slider .swiper-slide .details p { font-size: 1.4rem; } } .testimonial-slider .swiper-slide.swiper-slide-prev, .testimonial-slider .swiper-slide.swiper-slide-active, .testimonial-slider .swiper-slide.swiper-slide-next { visibility: visible; } .testimonial-slider .slider-navigation { display: flex; justify-content: center; margin-top: 7rem; } .testimonial-slider .swiper-button-next, .testimonial-slider .swiper-button-prev { position: relative; top: auto; left: auto; right: auto; width: 5rem; height: 5rem; background-color: #fff; border: none; display: flex; align-items: center; justify-content: center; } .testimonial-slider .swiper-button-next { margin-left: 1rem; } .testimonial-slider .swiper-button-prev { transform: rotate(180deg); } .testimonial-slider .swiper-button-next svg, .testimonial-slider .swiper-button-prev svg { fill: none; width: 2.2rem; height: auto; } .testimonial-slider .swiper-button-next { margin-left: 1rem; } .testimonial-slider .swiper-container { padding-bottom: 1rem; } .testimonial-slider .container.swiper-container { display: flex; flex-direction: column; align-items: center; } .section-intro { } .section-intro .container { /* max-width: 768px; */ } .breadcrumbs { width: 100%; max-width: var(--containerWidth); padding: 5rem 4.2rem 0; font-family: var(--secondaryFont); font-size: 1.1rem; line-height: 1; display: flex; align-items: center; gap: 0.58rem; } .breadcrumbs a, .breadcrumbs span { color: rgba(0, 0, 0, 0.45); text-decoration: none; transition: opacity 0.2s ease; line-height: 1; font-family: var(--secondaryFont); font-size: 1.1rem; } .breadcrumbs a:hover { opacity: 0.7; } .breadcrumbs .current { color: var(--primaryColour); font-weight: 500; } .timeline { } .timeline .thumbs { width: 100%; max-width: 970px; } .timeline .thumbs .swiper-button-next, .timeline .thumbs .swiper-button-prev { top: unset; bottom: 20px; margin-top: 0px; } @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: 800px; height: 2px; bottom: 40px; left: 0px; right: 0px; 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: 7px; background-color: #FFFFFF; border: 1px 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: 360px; overflow: hidden; border-radius: 7px; } .stats { } .stats .container { display: grid; grid-template-columns: repeat(2, 1fr); } @media (max-width: 480px) { .stats .container { gap: 3rem; display: grid; grid-template-columns: repeat(1, 1fr); } } .stats .bx-wrapper { max-width: unset !important; margin-bottom: 0px; box-shadow: none; border: none; background: none; } .stats .column { flex: 1 1 25%; } .stats .column h3 { font-weight: 700; font-size: 3.5rem; margin-bottom: .5rem; } .stats .column .body { gap: 5px; display: flex; align-items: start; } .stats .column .body img { margin-top: 5px; } .stats .column .body p { font-size: 1.4rem; font-weight: 600; margin-bottom: 0px; } .stats .container.style-2 { gap: 12.5rem; display: grid; grid-template-columns: repeat(2, 1fr); } @media (max-width: 480px) { .stats .container.style-2 { gap: 3rem; grid-template-columns: repeat(1, 1fr); } } .stats .container.style-2 .columns-container { gap: 6.5rem; display: grid; grid-template-columns: repeat(2, 1fr); } @media (max-width: 480px) { .stats .container.style-2 .columns-container { gap: 3rem; } } .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: 60px; } .cards-grid .card { display: flex; padding: 4rem 3.9rem; flex-direction: column; background-position-x: right; background-repeat: no-repeat; background-position-y: bottom; background-image: linear-gradient(126.84deg, rgba(255, 255, 255, 0) 41.62%, #FFFFFF 89.25%), url("https://26284765.fs1.hubspotusercontent-eu1.net/hubfs/26284765/Card%20BG%20Pattern.svg"); } .cards-grid.style-2 .card { border: none; padding: 0rem 0; box-shadow: none; background-color: transparent; } .cards-grid .card:hover { background-image: none; border: none; background-color: var(--primaryColour); box-shadow: 6px 9px 30px 0 rgba(0, 0, 0, 0.07); } .cards-grid.style-2 .card:hover { border: none; box-shadow: none; background-image: none; background-color: transparent; } .cards-grid.style-3 .card { gap: 23px; padding: 0px; display: grid; box-shadow: none; border: none; background-color: transparent; grid-template-columns: 80px 1fr; } .cards-grid.style-3 .card .card-body { margin-bottom: 0px; } .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: 5.6rem; } .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: 45px; } .cards-grid .card .card-body { flex: 1; /* margin-bottom: 80px; */ } .cards-grid .card .card-body > p.h1 { margin-bottom: 7rem; color: var(--primaryColour); } .cards-grid.style-2 .card .card-body { margin: 0px; } .cards-grid .card:hover .card-body > * { color: var(--white); } .cards-grid.style-2 .card:hover .card-body > * { color: inherit; } .cards-grid .card:hover .card-body > p.h1 { color: var(--white); } .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: 10px; height: 10px; 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 .container { gap: .5rem; row-gap: 3rem; display: grid; max-width: calc(32rem * 4); grid-template-columns: repeat(4, minmax(auto, 1fr)); } @media (max-width: 991px) { .teams .container { grid-template-columns: repeat(2, minmax(auto, 1fr)); } } @media (max-width: 480px) { .teams .container { grid-template-columns: repeat(1, minmax(auto, 1fr)); } } .teams .member { height: 50rem; position: relative; background-color: #fff; background-size: cover; background-position: top; background-repeat: no-repeat; box-shadow: 6px 9px 30px 0px #00000012; } .teams .member .details { left: 0; bottom: 0; width: 100%; padding: 2.5rem; overflow: hidden; position: absolute; background-color: rgba(0,0,0,.85); transition: height 250ms ease; height: calc(16.6rem + 2.5rem); } .teams .member .details .tag { margin-bottom: 1.4rem; } .teams .member .details .name { color: var(--white); line-height: normal; margin-bottom: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(2rem, 2.5rem, 2.3rem); } .teams .member .details .jobtitle { color: var(--white); margin-bottom: .2rem; } .teams .member .details .ppra { color: #979797; margin-bottom: 0; } .teams .member .details .contact { gap: .6rem; display: none; padding-top: 2.5rem; grid-template-columns: repeat(3, 1fr); } .teams .member .details .contact .option { gap: .5rem; width: 100%; display: flex; color: #000; font-size: 1rem; font-weight: 300; padding: 1rem; align-items: center; justify-content: center; flex-direction: column; border-radius: .372rem; /* background-color: rgba(209, 211, 212, .2); */ background-color: #fff; } .teams .member .details .contact .option span { white-space: nowrap; } .teams .member .details .cta-container { grid-row: 2; min-width: 100%; grid-column: 1 / -1; padding-top: 1.3rem; } .teams .member .details .cta-container .btn { width: 100%; padding-left: 0; padding-right: 0; font-size: 1.18rem; } .teams .member .details .cta-container .btn.outline { color: var(--white); } .teams .member .details .cta-container .btn.outline:hover { color: var(--primaryColour); } .teams .member:hover .details { height: 31rem; } .teams .member:hover .details .contact { display: grid; } .blog-featured-image { height: 42rem; overflow: hidden; margin-top: 11rem; margin-bottom: 7.4rem; } .blog-featured-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0px; object-position: center; } .blog-post-content .container { display: grid; padding-bottom: 7rem; grid-template-columns: minmax(auto, 87rem) 1fr; } .blog-post-content .container .content .cta-container { padding-top: 7rem; } .blog-post-back-cta { padding: 2rem 0 7rem; } .blog-post-content .anchors ul { gap: 5px; padding: 0; display: flex; align-items: start; flex-direction: column; } .blog-post-content .anchors ul a { gap: 12px; 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: 8px; height: 8px; display: block; border-radius: 50%; background-color: #141517; } .blog-post-content .anchors ul a:hover:before { content: ''; width: 12px; height: 12px; 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: 10px; } .blog-post-content .categories .category { color: #00A9F3; font-size: 1.6rem; letter-spacing: 0; line-height: 3.253rem; text-decoration: none; font-weight: var(--fontWeightSemiBold); } /* .blog-post-content .content { padding-bottom: 50px; } */ .blog-post-content .content > h1 { margin-bottom: 3rem; } .blog-post-content .blog-details { gap: 10px; display: flex; margin-bottom: 3rem; padding-bottom: 3rem; flex-direction: column; border-bottom: .1rem solid #979797; } .blog-post-content .blog-details a, .blog-post-content .blog-details > span, .blog-post-content .blog-details time, .recent-blogs-container .posts .post .body time { color: #141517; font-size: 2.0rem; text-decoration: none; font-weight: var(--fontWeightSemiBold); } .blog-post-content .blog-details time { gap: 1rem; display: flex; color: #000000; font-weight: 400; font-size: 1.4rem; align-items: center; margin-bottom: 3.7rem; font-family: var(--secondaryFont); } .recent-blogs-container .posts .post .body time { gap: 1rem; display: flex; color: #000000; font-weight: 400; font-size: 1.4rem; align-items: center; margin-bottom: 0rem; font-family: var(--secondaryFont); } .blog-post-content .blog-details .author { gap: 3rem; display: flex; align-items: center; } .blog-post-content .blog-details .avatar { width: 7rem; height: 7rem; /* Flex row: without this the author-name column squeezes the avatar narrower than tall, so border-radius:50% clips it into an oval. Lock the box square. */ flex-shrink: 0; } .blog-post-content .blog-details .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .blog-post-content .blog-details a[rel='author'] { width: 100%; font-size: 3rem; font-weight: var(--fontWeightSemiBold); } .blog-post-content .blog-details .author .contacts { gap: 1.2rem; display: flex; flex-wrap: wrap; } .blog-post-content .blog-details .author .contacts .contact { align-items: center; display: inline-flex; border-radius: .5rem; padding: 1.1rem 1.4rem; justify-content: center; background-color: rgba(209, 211, 212, .2); } .blog-post-content .content ul { padding-left: 2rem; margin-bottom: 5rem; } .blog-post-content .content ul li { margin-bottom: 1rem; } .blog-post-content .content ul li::marker { color: var(--primaryColour); } .blog-post-content .content ul li:last-child { margin-bottom: 0rem; } .blog-post-content .content p img { margin-bottom: 3rem; } .blog-post-content .content blockquote { margin: 0 0 5rem; background-color: #fff; padding: 6.2rem 5rem 20rem; background-position-y: 90%; background-position-x: 92%; border: .1rem solid #D1D3D4; background-repeat: no-repeat; background-image: url(https://26284765.fs1.hubspotusercontent-eu1.net/hubfs/26284765/raw_assets/public/3cube-theme/images/quotes.svg); } .blog-post-content .content .container { padding: 0; } .blog-post-content .call-to-action .content { padding: 4rem; } .blog-post-content .call-to-action .content .cta-container { padding: 0; } .blog-post-content .call-to-action .inner-wrapper { grid-template-columns: 1fr minmax(auto, 28.5rem); } .blog-post-content .blog-share { display: flex; flex-direction: column; align-items: center; position: sticky; top: 14rem; align-self: flex-start; } .blog-post-content .blog-share > span { font-weight: 600; } .blog-post-content .blog-share .line { width: 0.2rem; height: 3.5rem; margin-top: 1.8rem; margin-bottom: 2rem; display: inline-flex; background-color: var(--primaryColour); } .blog-post-content .blog-share a { display: inline-flex; margin-bottom: 1.4rem; } .blog-post-content .blog-share a:last-child { margin-bottom: 0px; } .blog-post-content .blog-share a svg path { transition: fill 0.2s ease, stroke 0.2s ease; } .blog-post-content .blog-share a:hover svg path[stroke="#000"] { stroke: var(--primaryColour); } .blog-post-content .blog-share a:hover svg path[fill="#000"] { fill: var(--primaryColour); } .blog-post-content .blog-summary { padding: 70px; margin-top: 50px; margin-bottom: 65px; } .contact-details { } .contact-details .container { display: grid; grid-template-columns: 1fr minmax(auto, 770px); } @media (max-width: 991px) { .contact-details .container { gap: 3rem; grid-template-columns: 1fr; } } .contact-details .details .rich-text { margin-bottom: 3.5rem; } .contact-details .map { display: flex; width: 100%; height: 350px; } .contact-details .map iframe { width: 100%; height: 100%; } .contact-details .contact-info { gap: 2.5rem; display: flex; flex-direction: column; } .contact-details .contact-info .row { gap: 1.8rem; display: flex; } .contact-details .contact-info a {} .tabs { gap: 0.4rem; display: flex; width: fit-content; margin: 0 auto 6rem; padding: 0.4rem; background-color: #EDEEEF; border-radius: 0.2rem; } @media (max-width: 768px) { .tabs { gap: 0.4rem; } } .tabs .tab { border: none; outline: none; cursor: pointer; padding: 1rem 7rem; font-weight: 600; font-size: 1.4rem; letter-spacing: 0.05em; text-transform: uppercase; background-color: transparent; border-radius: 0.1rem; color: #888; transition: all 200ms ease; } .tabs .tab:hover { color: #555; } .tabs .tab.active { color: #fff; background-color: var(--primaryColour); box-shadow: 0 2px 6px rgba(0,0,0,0.15); } .tab-content { display: none; } .tab-content.active { display: block; } footer.footer { padding: var(--verticalSpacing) 0; background-color: rgba(209, 211, 212, .3); padding-bottom: 2rem; } footer.footer .column .title { margin-bottom: 3.5rem; } footer.footer .column .title div { color: #000; margin-bottom: 0px; font-size: 2rem; letter-spacing: 0px; line-height: 2.5rem; font-family: var(--primaryFont); font-weight: var(--fontWeightBold); } footer.footer .column .socials { gap: 2rem; display: flex; flex-wrap: wrap; margin-bottom: 4.5rem; } @media (max-width: 991px) { footer.footer .column .socials { display: none; } } footer.footer .column .socials .social-link { width: 2.6rem; height: 2.6rem; overflow: hidden; border-radius: 4px; display: inline-flex; align-items: center; border-radius: 50%; justify-content: center; background-color: transparent; } footer.footer .column .socials .social-link svg { max-height: 24px; fill: #00A9F3; } footer.footer .column .socials .social-link:hover img { filter: brightness(0) saturate(100%) invert(55%) sepia(72%) saturate(1692%) hue-rotate(360deg) brightness(101%) contrast(93%); } footer.footer .menu ul { padding: 0px; list-style: none; } footer.footer .menu ul a { color: #000; text-decoration: none; font-family: var(--secondaryFont); font-weight: var(--fontWeightRegular); transition: color 0.2s ease; } footer.footer a:hover, footer.footer .menu ul a:hover, footer.footer .column .rich-text a:hover, footer.footer .column.accreditation a:hover { color: var(--primaryColour); } footer.footer .menu ul a[target="_self"] { gap: 1rem; display: flex; align-items: center; } footer.footer .logo { margin-bottom: 10rem; } @media (max-width: 991px) { footer.footer .logo { margin-bottom: 6rem; } } footer.footer .container:first-child { margin-bottom: 4rem; } footer.footer.style-1 .container { display: grid; grid-template-columns: minmax(auto, 30rem) repeat(4, 1fr); } @media (max-width: 991px) { footer.footer.style-1 .container { gap: 3rem; grid-template-columns: repeat(2, 1fr); } } @media (max-width: 991px) { footer.footer.style-1 .container .column:first-child { grid-column: 1 / -1; } } footer.footer.style-1 .container .column.social { display: none; } @media (max-width: 991px) { footer.footer.style-1 .container .column.social { display: block; } footer.footer.style-1 .container .column.social .socials { display: flex; } } footer.footer .column.accreditation { grid-column: 2 / -1; } @media (max-width: 991px) { footer.footer .column.accreditation { grid-column: 1 / -1; } } footer.footer .column.accreditation .row { gap: 3rem; display: flex; flex-wrap: wrap; align-items: center; padding-bottom: 2rem; border-bottom: 1px solid #979797; } footer.footer .column.accreditation .row a { color: #000; font-family: var(--secondaryFont); font-weight: var(--fontWeightThin); } footer.footer .column.accreditation .row p { margin: 0; font-family: var(--secondaryFont); } @media (max-width: 991px) { footer.footer .column.accreditation .row p { min-width: 100%; } } footer.footer .column.accreditation.disclaimers .row { gap: 9.4rem; border: none; padding-top: 2rem; padding-bottom: 0rem; } @media (max-width: 991px) { footer.footer .column.accreditation.disclaimers .row { gap: 1.5rem; display: flex; align-items: start; flex-direction: column; } } #svgNumber { font-family: var(--secondaryFont); font-weight: 400; /* Inherit the nav link colour (white on the transparent hero, dark when scrolled) instead of a fixed grey, so the favourites count reads correctly in the header. */ color: inherit; fill: currentColor; } #svgNumber a:hover { color: var(--primaryColour); } a:hover #svgNumber { color: var(--primaryColour); fill: var(--primaryColour); } /* Favourites nav item: heart + count that inherit the nav link colour (so the .menu-item > a colour rules above drive white-on-hero / dark-when-scrolled / primary-on-hover automatically). Icon-only on desktop; the "Favourites" label appears on mobile so it reads as a hamburger row. */ .mega-menu-container ul li.menu-item.favourites > a { display: flex; align-items: center; gap: 0.6rem; } .mega-menu-container ul li.menu-item.favourites .favourites-icon { width: 2rem; height: 2rem; flex-shrink: 0; } .mega-menu-container ul li.menu-item.favourites .favourites-label { display: none; } @media (max-width: 1100px) { .mega-menu-container ul li.menu-item.favourites .favourites-label { display: inline; } } /* Desktop only: push the CTA button to the far right (order:1) so the Favourites heart, which is the last order:0 item, sits just before it — i.e. next to Resources. On mobile this rule is off, so the natural DOM order is kept and Favourites remains the last hamburger item. */ @media (min-width: 1101px) { .mega-menu-container ul li.menu-item.cta { order: 1; } } .mega-menu-container.simple ul li.menu-item.children.show-submenu .sub-menu .sub-menu-items a:hover svg text { color: var(--primaryColour); } #hsresults.hs-search-results__listing li { margin-bottom: 5rem; } #hsresults.hs-search-results__title { font-size: 2rem; font-weight: 600; } .systems-page--search-results { padding-top: 10rem; padding-bottom: 10rem; } .header-slider { overflow: hidden; height: 26rem; max-height: 26rem; } .header-slider .swiper.swiper-horizontal { padding: 0; } .header-slider .swiper-wrapper .swiper-slide { padding: 0; display: flex; height: 26rem; } .header-slider .swiper-slide img { width: 100%; height: 100%; display: block; object-fit: cover; } .header-slider .slider-controls { top: 0; left: 0; bottom: 0; width: 100%; margin: auto; position: absolute; z-index: 1; } .header-slider .slider-controls .arrows { display: flex; width: 100%; height: 100%; align-items: center; padding: 0 0rem; justify-content: space-between; } .header-slider .slider-controls .swiper-button-prev { transform: rotate(180deg); } .header-slider .slider-controls .swiper-button-prev, .header-slider .slider-controls .swiper-button-next { top: unset; left: unset; right: unset; bottom: unset; position: relative; } .header-slider .slider-controls .swiper-button-prev svg, .header-slider .slider-controls .swiper-button-next svg { /* display: none; */ fill: none; } .header-slider .slider-controls .swiper-button-prev { left: unset; right: unset; } .card-body { flex: 1; display: flex; flex-direction: column; } .card-body header { padding: 3rem 3rem 1.5rem; display: flex; position: relative; align-items: center; justify-content: space-between; } .card-body header .flyout { padding: 0; width: 3rem; height: 100%; border: none; outline: none; cursor: pointer; position: relative; z-index: 1; background-position: center; background-repeat: no-repeat; background-color: transparent; background-image: url("https://26284765.fs1.hubspotusercontent-eu1.net/hubfs/26284765/card-actions.svg"); } .card-body header .flyout:hover, .card-body header .flyout.active { filter: brightness(0) saturate(100%) invert(55%) sepia(72%) saturate(1692%) hue-rotate(360deg) brightness(101%) contrast(93%); } .card-body header .actions { top: 3rem; z-index: 3; gap: 1.5rem; right: 3rem; width: 100%; padding: 2rem; display: none; max-width: 22rem; position: absolute; flex-direction: column; background-color: #fff; box-shadow: 6px 9px 30px 0px #00000012; } .card-body header .actions.open { display: flex; } .card-body header .actions button, .card-body header .actions a { gap: 1rem; padding: 0; border: none; outline: none; display: flex; color: #000000; cursor: pointer; font-size: 1.6rem; align-items: center; background-color: transparent; font-family: var(--secondaryFont); font-weight: var(--fontWeightThin); } .card-body header .actions a:hover, .card-body header .actions a:hover svg path, .card-body header .actions button:hover, .card-body header .actions button:hover svg path{ fill: var(--primaryColour); color: var(--primaryColour); } .card-body header .actions .cta-container { padding: 0; padding-bottom: 1.5rem; } .card-body header .actions .cta-container button { width: 1.3rem; height: 1.3rem; padding: 0px; border: none; outline: none; cursor: pointer; background-position: center; background-repeat: no-repeat; background-color: transparent; } .card-body header .tags { display: flex; align-items: center; gap: 1rem; } .card-body header .tag { font-weight: 400; font-size: 1.2rem; align-items: center; display: inline-flex; padding: .4rem 1.5rem; border-radius: .453rem; justify-content: center; color: var(--primaryColour); font-family: var(--secondaryFont); border: 1px solid var(--primaryColour); background-color: rgba(245, 130, 32, 0.1); } .card-body header .tags .tag:nth-child(2) { background-color: #fff; } .card-body article { flex: 1; display: flex; padding: 0 3rem; margin-bottom: 0; flex-direction: column; } .card-body article .location { flex: 0; font-size: 1.6rem; font-style: normal; font-weight: 300; line-height: 2.5rem; letter-spacing: 0.1rem; text-transform: none; margin-bottom: 2rem; color: #000; font-family: var(--secondaryFont); } .card-body article h3 { flex: 1; margin-bottom: 1.5rem; } .card-body article .property-details-wrapper { padding-top: 0; } .property-details-wrapper .property-details { display: flex; padding: 2rem 2.2rem; overflow: hidden; align-items: center; position: relative; border-radius: 0rem; border-left: 3px solid var(--primaryColour); background-color: rgba(209, 211, 212, .12); } .property-details-wrapper .property-details .pricing-details span { font-size: 1.6rem; font-style: normal; font-weight: 400; line-height: 1.6rem; letter-spacing: 0.05rem; text-transform: none; color: #000; font-family: var(--secondaryFont); } .property-details-wrapper .property-details .price { white-space: nowrap; color: var(--primaryColour); font-size: 3rem; font-style: normal; font-weight: 600; line-height: 4rem; margin-top: 0.2rem; } .property-details-wrapper .property-details .price.price-on-application { font-size: 2.5rem; line-height: 3rem; } .property-details-wrapper .property-details .pricing-details { flex: 1; } .property-details-wrapper .property-details .pricing-details .pricing-details-top { width: 100%; display: flex; justify-content: space-between; align-items: center; } .property-details-wrapper .property-details .size { gap: .5rem; display: flex; align-items: center; position: relative; top: unset; right: unset; color: #000; font-size: 1.6rem; font-style: normal; font-weight: 400; line-height: 2.3068rem; font-family: var(--secondaryFont); } .property-details-wrapper .property-details .size svg { min-width: 1.5rem; } .property-details-wrapper .property-details .size svg path { fill: #000; } .property-details-wrapper .description { padding-top: 2.5rem; } .card-body .cta-container { padding: 1.3rem 3rem 1.3rem; }