/* 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-image: none; 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); } /* ────────────────────────────────────────────────────────────────────────────── Tom Select inside the modals (property alerts sign-up) The alert form is a HubSpot form rendered by scripts/main.js, so it sits outside property-listings.module and can't inherit that module's scoped .ts-* styling. These rules make the upgraded dropdowns read like the theme's own .form select (5.5rem tall, grey underline, secondary font) with the site search form's dropdown treatment. Scoped to .modal-container so no other Tom Select changes. ────────────────────────────────────────────────────────────────────────────── */ /* Tom Select keeps the original and the number 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; } /* On mobile every section puts 2rem between its heading and the content below it; this one was the other section still opening up (6.5rem under "What our clients say"). Desktop keeps the 6.5rem. */ @media (max-width: 480px) { .testimonial-slider .rich-text { margin-bottom: 2rem; } } .testimonial-slider .container { max-width: 1010px; } /* Figma "What our clients say" card: quote top-left, attribution footer pinned bottom-left (justify-content:space-between). No hardcoded height — the desktop cards share a single height driven by the CONTENT: the flex row stretches every card to the tallest testimonial (align-items defaults to stretch, and desktop runs WITHOUT Swiper autoHeight). Equal heights are what let the coverflow side cards (0.85 scale) sit vertically centred and peek without any card overhanging another. Mobile is one card at a time with autoHeight, so there each card sizes to its own quote. */ .testimonial-slider .swiper-slide { display: flex; border-radius: 0px; flex-direction: column; padding: 6rem 5rem; visibility: hidden; justify-content: space-between; border: 1px solid #d1d3d4; background-color: #D1D3D4; } /* Active card is white; the peeking side cards stay grey (Figma). */ .testimonial-slider .swiper-slide.swiper-slide-active { background-color: #FFFFFF; } @media (min-width: 992px) { .testimonial-slider .swiper-slide { width: 97rem; height: auto; max-width: 100%; } } @media (max-width: 991px) { .testimonial-slider .swiper-slide { 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; } /* The 545px floor above is a desktop art-direction figure. On a phone it forces every slide to at least that height before any text, and because the slides sit in a flex row they all take the height of the LONGEST quote on top of it — measured 987px on an iPhone 14 for a 250px block of text. Let each slide size to its own content at this width. */ @media (max-width: 991px) { .testimonial-slider .swiper-slide[style*="background-image"] { min-height: 0; } /* article { flex: 1 } stretches the quote box to fill whatever height the row settles on, which is what produced a 740px box around 250px of copy. */ .testimonial-slider .swiper-slide article { flex: 0 0 auto; } /* The footer only holds the name and role here. */ .testimonial-slider .swiper-slide .footer { min-height: 0; } } .testimonial-slider .swiper-slide[style*="background-image"]:before { display: none; } /* Natural height (not flex:1) so the attribution footer flows directly under the quote instead of being pushed to the card bottom. With the desktop slide top-aligned (justify-content:flex-start), a short quote sits at the top with its footer right below and the spare height as room beneath — the Figma look. Mobile overrides this to flex:0 0 auto in its own block above. */ .testimonial-slider .swiper-slide article { flex: 0 1 auto; margin-bottom: 5rem; } /* The editor's inline font-size/justify are stripped from the quote in the module markup, so these no longer need !important to take effect. Figma "What our clients say": 25px / 40px line-height, NeoTech (primary font) Medium, black. */ .testimonial-slider .swiper-slide article p { line-height: 4rem; font-size: 2.5rem; color: #000; font-family: var(--primaryFont); font-weight: var(--fontWeightMedium); } @media (max-width: 991px) { .testimonial-slider .swiper-slide article p { font-size: 2rem; line-height: 3rem; } } .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: 3rem; } .testimonial-slider .swiper-button-prev { transform: rotate(180deg); } /* Mobile: tighten the space ABOVE the row (7rem is too much on a phone); the gap between the arrows is the blueprint 5.8rem at every size, set on .swiper-button-next above. */ @media (max-width: 768px) { .testimonial-slider .slider-navigation { margin-top: 3rem; } } .testimonial-slider .swiper-button-next svg, .testimonial-slider .swiper-button-prev svg { fill: none; width: 2.2rem; height: auto; } .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); } /* Hover expansion is for pointers only. On a touch screen :hover sticks after a tap, which opened the panel but left no way to close it again — there the .open class below does the work. */ @media (hover: hover) { .teams .member:hover .details { height: 31rem; } .teams .member:hover .details .contact { display: grid; } } .teams .member.open .details { height: 31rem; } .teams .member.open .details .contact { display: grid; } /* The chevron that opens the panel on small screens (markup in the team_card macro). */ .teams .member .details .details-toggle { display: none; } @media (max-width: 991px) { .teams .member .details .details-toggle { top: 2.2rem; right: 2rem; width: 3.4rem; height: 3.4rem; padding: 0; border: none; z-index: 2; cursor: pointer; position: absolute; align-items: center; display: inline-flex; color: var(--white); justify-content: center; background-color: transparent; } .teams .member .details .details-toggle svg { transition: transform 250ms ease; } .teams .member.open .details .details-toggle svg { transform: rotate(180deg); } } .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; } /* Three items now share the wide first column — the intro (categories, title, author), the summary module and the article body — while the share rail keeps the narrow second column and spans the rows so it can stay sticky. Without explicit placement the auto-flow dropped the summary into column 2, beside the intro. */ .blog-post-content .container > .post-intro, .blog-post-content .container > .blog-summary-module, .blog-post-content .container > .content { grid-column: 1; } .blog-post-content .container > .blog-share { grid-column: 2; grid-row: 1 / -1; } /* blog-summary renders its own .container; nested in this one it would apply a second max-width and gutter, so flatten it and let the column set the width. */ .blog-post-content .container > .blog-summary-module > .container { max-width: none; padding: 0; } .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); } /* Shown by templates/broker.html when ?id= matches no contact (deleted broker, stale link). The mega-menu header is position:fixed with nothing offsetting the body, so this first-and-only section clears it itself — same reason .error-pages pads 26.5rem. */ .broker-not-found { padding: 26.5rem 0 16rem; text-align: center; } @media (max-width: 991px) { .broker-not-found { padding: 17rem 0 8rem; } } .broker-not-found p { margin: 3rem auto 0; max-width: 56rem; } .broker-not-found .cta-container { margin-top: 5rem; justify-content: center; } @media (max-width: 480px) { .broker-not-found .cta-container { flex-direction: column; align-items: center; } } 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; } } /* Push the CTA button last (order:1) so the Favourites heart — the last order:0 item — sits just before it: next to Resources on desktop, above the CONTACT button in the mobile drawer. This used to be desktop-only, which left Favourites underneath the CTA on a phone. */ .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); } /* Favourite toggle in the card flyout: swap the outline heart for the filled one when the listing is saved. The .active class is applied by the global favourites handler in main.js. */ .card-body header .actions .favorite-listing .icon-filled { display: none; } .card-body header .actions .favorite-listing.active .icon-outline { display: none; } .card-body header .actions .favorite-listing.active .icon-filled { display: block; } .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; }