/* This website is using Bootstrap 5! https://getbootstrap.com/docs/5.3/getting-started/introduction/ */ /* Text Colors */ .text-default { color: var(--body-text)!important; } .text-primary { color: var(--primary)!important; } .text-light { color: var(--light)!important; } .text-accent { color: var(--accent)!important; } .text-secondary { color: var(--secondary)!important; } .text-dark { color: var(--dark)!important; } .text-white, .text-white a { color: #fff!important; } .text-inherit { color: inherit!important; } /* Font Styles */ .font--cursive { } .fs-60 { font-size: 60px; } .fs-09em { } @media (min-width: 1200px) { .fs-09em { font-size: 0.9em; } } /* Images ============================================================================= */ img { max-width: 100%; width: auto; height: auto;} img.cover { object-fit: cover; font-family: 'object-fit:cover; '; width: 100%; height: 100%; } img.content { float: left; margin: 5px 15px 15px 0; padding: 5px; } svg[class*="icon-"] { height: 32px; width: 32px; display: inline-block; fill: currentColor; } /* Fade image in after lazyloaded */ .lazyload, .lazyloading { opacity: 0; } .lazyloaded { opacity: 1; transition: opacity 300ms; } .clip-image { --breadth: 600px; --size: 100px; --radius: 24px; --area: atan2(var(--size), var(--breadth) / 2); clip-path: shape(from 0 0, line to calc(100% - var(--size) - var(--radius)) 0, curve to calc(100% - var(--size) + var(--radius) * sin(var(--area))) calc(var(--radius) * cos(var(--area))) with calc(100% - var(--size)) 0, line to calc(100% - var(--radius) * sin(var(--area))) calc(50% - var(--radius) * cos(var(--area))), curve to calc(100% - var(--radius) * sin(var(--area))) calc(50% + var(--radius) * cos(var(--area))) with 100% 50%, line to calc(100% - var(--size) + var(--radius) * sin(var(--area))) calc(100% - var(--radius) * cos(var(--area))), curve to calc(100% - var(--size) - var(--radius)) 100% with calc(100% - var(--size)) 100%, line to 0 100%); -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%); } @media (max-width: 575px) { .clip-image { clip-path: none; -webkit-mask-image: none; mask-image: none; border-radius: var(--border-radius);} } /* Backgrounds ============================================================================= */ .bg-primary { background-color: var(--primary)!important; } .bg-secondary { background-color: var(--secondary)!important; } .bg-light { background-color: var(--bg-light)!important; } .bg-dark { background: var(--dark)!important; --body-text: #fff; color: var(--body-text); } .bg-gray { background: var(--gray)!important; } .bg-gray-alt { background: var(--gray-alt)!important; } .bg-gray-md { background: var(--gray-md)!important; } .bg-gray-dark { background: var(--gray-dark)!important; --body-text: #fff; color: var(--body-text); } .bg-gray-darker { background: var(--gray-darker)!important; --body-text: #fff; color: var(--body-text); } .bg-gradient { background-color: var(--dark); --bs-gradient: var(--gradient-diagonal); color: #fff; } .bg-image { background-color: rgba(var(--dark-rgb), 0.75); background-repeat: no-repeat; background-position: center; background-size: cover; background-blend-mode: darken; --body-text: #fff; } [class*='bg-'] form input { color: #000; } @media (min-width:992px) { .bg-image { background-color: rgba(var(--dark-rgb), 0.9); background-attachment: fixed; } } /* Breadcrumbs ============================================================================= */ .breadcrumb a { font-weight: 400!important; } .breadcrumb-item.active, .breadcrumb-item.active a {color: var(--accent); font-weight: 600!important; } .breadcrumb-item+.breadcrumb-item::before {font-weight: 400!important;} /* Banners - Reuseable Repeating Styles specific to this websites' design ============================================================================= */ .banner, .banner-md, .banner-lg { padding: 86px 0; } @media (min-width: 992px) { .banner-md { padding: 120px 0; } .banner-lg { padding: 143px 0; } } @media (max-width: 767px) { .banner-md { padding: 60px 0; } .banner-lg { padding: 100px 0; } } /* Social Media Icons ============================================================================= */ .social { display: inline-flex; a {color: var(--dark);background: transparent;height: 24px;width: 24px;font-size: 18px;display: flex; align-items: center; justify-content: center; transition:0.4s; padding: 10px;} a ~ a { margin-left: 5px; } a:is(:hover,:focus-visible) {background-color: var(--primary);color: #fff; border-radius: var(--border-radius); transform: translateY(-2px) scale(1.06); ;} } /* List Styles ============================================================================= */ /* Inline list with Pipes or Dots */ .list-inline, .list-inline--pipes, .list-inline--dots { list-style: none; padding: 0; margin: 0; } .list-inline li, .list-inline--pipes li, .list-inline--dots li { display: inline-block; } .list-inline--pipes li:nth-child(1n+2)::before { content: '|'; margin: 0 8px; } .list-inline--dots li:nth-child(1n+2)::before { content: '•'; margin: 0 8px; } /* Numbered List with styled numbers */ ol.bubble { --size: 58px; text-align: left; counter-reset: counter; list-style: none; padding-left: 0; margin-bottom:40px; display: flex; flex-direction: column; gap: var(--size); li { counter-increment: counter; position: relative; padding-left: calc(var(--size) * 1.25); } li::before { content: counter(counter); font-family: var(--secondary-font); color: inherit; font-size: calc(var(--size) / 2); position: absolute; left: 0; line-height:0; display: flex; align-items: center; justify-content: center; width: var(--size); height: var(--size); top: 0; border:2px solid var(--accent); border-radius: 50%; text-align: center; } li > h4, ol.bubble li > h3 { margin-top: calc(var(--size) * .14); } li > p:last-of-type { margin: 0; } } ol.bubble--sm { --size: 35px; } @media (max-width:575px) { ol.bubble { --size: 35px; } } /* List with Checks instead of bullets */ .checks {list-style: none;padding: 0;margin: 32px 0;padding-left: 0; li {position: relative;padding-left: 48px;margin-bottom: 8px;} li::before {color: var(--dark);content: '\f00c';font-size: 24px;line-height: 1;font-family: var(--font-awesome);font-style: normal;font-weight: 400;-webkit-font-smoothing: antialiased;position: absolute;top: 0;left: 0;} } .checks--white li::before {color: #fff !important;} .checks--cols { display: flex; flex-wrap: wrap; margin-bottom: 15px; } .checks--cols li { flex: 0 1 235px; } /* List with small icons instead of bullets */ .icons { list-style: none; padding: 0; margin: 10px 0 20px; display: inline-block; li { position: relative; padding-left: 55px; margin: 0 0 35px; font-size: 20px; text-align: left; } li .icon { position: absolute; left: 0; top: 2px; } } /* List with Primary colored Dots */ .dots { list-style: none; padding: 0; padding-left: 35px; margin: 5px 0 25px; li { padding-left: 20px; position: relative; margin: 0 0 .3em; } li::before { content: ""; height: 5px; width: 5px; border-radius: 50%; background: var(--primary); position: absolute; top: .5em; left: 0; transform: translateY(33.3%); } ul { list-style: none; margin: 10px 0; } ul > li { margin: 5px 0; } ul > li::before { background: transparent; border: 2px solid var(--primary); } } /* Icon List */ .icon-list { display: flex; gap: var(--gap); flex-wrap: wrap; justify-content: center; list-style: none; padding: 0; text-align: center; } .icon-list__item { flex: 0 0 300px; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: var(--gap); border-radius: var(--border-radius-sm); border: 1px solid var(--secondary); padding: 32px; align-items: center; height: 100%; } .icon-list__icon { height: 78px; width: 78px; border-radius: 50%; background: rgba(var(--primary-rgb), .1); display: flex; align-items: center; justify-content: center; } .icon-list__icon svg { width: 36px; height: 36px; fill: var(--primary); } .icon-list__icon i { font-size: 26px; color: var(--primary); } .icon-list__heading { color: var(--body-text); font: 700 min(1.25rem,20px)/1.3 var(--primary-font); letter-spacing: -0.4px; margin: 0; } @media (min-width: 1400px) { .icon-list__item { flex: 0 0 490px; } } #seller-process .icon-list__item .btn { margin-top: auto; } /* Image List */ .image-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; } .image-list__item { flex: 1 0 271px; padding: 0 15px; margin: 0 0 30px; } .image-list__img { position: relative; margin: 0; height: 0; padding-top: 75%; overflow: hidden; } .image-list__img img { position: absolute; top: 0; left: 0; transition: 0.8s; } .image-list__item a:hover img { transform: scale(1.08); transition: 0.8s; } .image-list__title { position: relative; font-size: 20px; font-weight: 400; margin: 0; color: #fff; background: var(--primary); margin: 0; padding: 10px 20px; } .image-list__title::after { content: '\f105'; font-family: var(--font-awesome); font-style: normal; font-weight: 300; -webkit-font-smoothing: antialiased; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } @media (min-width:992px) { .image-list { margin: 0 -15px; } .image-list__item { flex: 0 0 25%; } .image-list--col-2 { max-width: 900px; margin: 0 auto; .image-list__item { padding: 0 25px; margin: 0 auto 50px; flex: 0 0 50%; } } .image-list--col-3 { margin: 0 -25px; .image-list__item { padding: 0 25px; margin: 0 auto 50px; flex: 0 0 33.33%; } } } /* Boxes */ .boxes { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: var(--gap); } .box-item {display: flex;padding: 24px 20px;flex-direction: column;align-items: center;gap: var(--gap);flex: 1 0 0;max-width: calc(100vw - 30px);align-self: stretch;background-color: var(--bg-light);border: 1px solid var(--secondary);border-radius: var(--border-radius-sm);} .item__icon { width: 72px; height: 72px; aspect-ratio: 1/1;} .item__description {color: var(--body-text);} .boxes--g-lg { gap: 60px; } .boxes--shadow { box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.05); } .box-item--full { flex-basis: 100%; } .box-item:has(.box-item__list) { padding: 32px; gap: 48px; } .box-item__header-w-icon { display: flex; align-items: center; margin: 0; color: inherit; font: 700 min(1.25rem, 20px)/1.3 var(--primary-font); letter-spacing: -0.4px; text-align: start; justify-content: flex-start; width: 100%; gap: 12px; } .box-item__header-icon { width: 24px; height: 24px; color: var(--secondary); fill: var(--secondary); } .box-item__list { list-style: none; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 33px; margin: 0; } .box-item__list-item { margin: 0; } .box-item__list-item > a { color: inherit; } .box-item__list-item > a:hover { color: var(--secondary); } .boxes--white .box-item { background-color: #fff; border-color: #fff; } .boxes i {font-size:52px; } .boxes h3 { margin-top: 1rem; font-weight: 700; } @media (max-width: 991.98px) { .boxes {flex-direction: column; } } /* PM Results */ .results__wrapper { position: relative; display: flex; align-items: center; min-height: 983px; padding: 90px 180px; overflow: visible; } .results__content { background-color: var(--primary); border-radius: 24px; padding: 36px; flex: 0 0 602px; position: absolute; top: 50%; left: 180px; transform: translateY(-50%); width: 100%; max-width: 602px; z-index: 2; color:#fff; } .results__wrapper img { width: 1104px; height: 983px; object-fit: cover; margin-left: auto; display: block; border-radius: 24px; } .results__content h2 { margin: 1rem 0 0; font-size: 32px; } .results__content p { font-size: 18px; } .results__content ul { margin: 45px 0px; padding-left: 0px; } .results__content ul li { text-align: left; padding-left: 50px; font-size: 18px; } .results__content ul li::before { color:#fff; } @media (max-width: 1499px) { .results__wrapper { padding: 85px 100px; } .results__content { left: 100px; } } @media (max-width: 1199.98px) { .results__wrapper { display: block; min-height: unset; padding: 40px; } .results__content { position: relative; top: auto; left: auto; transform: none; max-width: 100%; margin: 0px 0px 30px; } .results__content ul li::before { top: 2px; } .results__wrapper img { width: 100%; height: auto; } } @media (max-width: 767.98px) { .results__content { padding: 32px 24px; } } @media (max-width: 575px) { .results__wrapper { padding: 36px 0px; text-align: center; } .results__content header { text-align: center; } } /* Market Homewatch Services */ #homewatch .boxes.text-center .checks { display: inline-block; text-align: left; } @media (min-width: 1200px){ #homewatch .row img { max-height: 400px; } } @media (min-width: 992px) { #homewatch .col-lg-3 .boxes, #homewatch .col-lg-3 .box-item { height: 100%; } } /* Real Estate Pages */ #buyer-inspection { background: var(--light); .box-item { background: #fff; flex: 1 0 calc(33.333% - var(--gap)); max-width: calc(33.333% - var(--gap)); align-items: start;} .box-item .dots { margin: 0; padding: 0;} .box-item p { margin: 0; } } @media (max-width: 1199px) { #buyer-inspection .box-item { flex: 1 0 100%; max-width: 100%; } } @media (min-width: 1200px){ #buyer-representation img { border-radius: 0 24px 24px 0; } } .closing-faq h3 { font-size: clamp(18px, 1.8vw, 24px); } .closing-cta { border: 1px solid var(--secondary); background: var(--light); } #investment-properties #sub-nav, #exchange-1031 #sub-nav{ display: none;} .investor-boxes .boxes { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: var(--gap); } .investor-boxes .box-item { flex: 0 0 calc((100% - 3 * var(--gap)) / 4); max-width: calc((100% - 3 * var(--gap)) / 4); } @media (max-width: 1199.98px) { .investor-boxes .box-item { flex: 0 0 calc((100% - var(--gap)) / 2); max-width: calc((100% - var(--gap)) / 2); } } @media (max-width: 991.98px) { .investor-boxes .box-item { flex: 0 0 100%; max-width: 100%; } } .req-item { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; } .req-item h4 { flex: 0 0 auto; width: 220px; margin: 0; font-weight: 600; } .req-item p { flex: 1; margin: 0; } /* Affix */ .affix { position: fixed !important; top: 0; left: 0; width: 100%; z-index: 9999; } /* Box Shadows */ .shadow-sm { -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } a.shadow-sm:hover, .shadow-md { -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); -ms-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); -o-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } /* video wrapper */ :is(.video-wrapper, .fr-video) { position: relative; display: block; height: 0; padding: 0; overflow: hidden; padding-bottom: 56.25%; } :is(.video-wrapper, .fr-video) iframe { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } /* Video Wrapper Overlay */ .video-wrapper { background-color: var(--dark); border-radius: var(--border-radius); } .video-wrapper.play::after, .video-wrapper.play::before, .video-wrapper.play .video-thumbnail, .video-wrapper.play .video-title { visibility: hidden; opacity: 0; z-index: -9; transition: 0.3s; margin: 0 !important; } .video-wrapper .video-thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-repeat: no-repeat; background-size: cover; background-position: center; } .video-wrapper .video-thumbnail::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(var(--dark-rgb), .6); z-index: 1; } .video-wrapper::before { content: ""; position: absolute; top: 50%; left: 50%; z-index: 9; transform: translate(-50%, -50%); width: 68px; height: 68px; border: 3px solid #fff; border-radius: 50%; transition: 0.3s; } .video-wrapper::after { content: ""; position: absolute; top: 50%; left: 50%; z-index: 9; transform: translate(-33%, -50%); height: 0; border-style: solid; border-width: 15px 0 15px 25px; border-color: transparent transparent transparent #ffffff; z-index: 999; } .video-wrapper:hover::before { background: var(--accent); cursor: pointer; transition: 0.3s; } .video-wrapper:hover { cursor: pointer; } .video-wrapper .video-title { position: absolute; z-index: 9; color: #fff; text-align: center; top: 58%; left: 15px; right: 15px; font-size: 24px; font-weight: 600; max-width: 450px; margin: 0 auto; } .video-wrapper:focus-visible { outline: none; box-shadow: 0 0 2px 2px rgba(var(--primary-rgb), .7); } @media (max-width:500px) { .video-wrapper .video-title { font-size: 16px; } /* .video-wrapper::before, .video-wrapper::after { top: 40% } .video-wrapper .video-title{ top: 50% } */ } /* Misc */ .box { padding: 15px; border: solid 1px var(--dark); } .no-outline:focus { outline: none; } button::-moz-focus-inner { border: 0; } address [class*='street-address'] { list-style: none; padding: 0; display: block; } .banner-replace { display: none; } .mapboxgl-marker svg g[fill*='#3FB1CE'] { fill: var(--primary)!important; } .form-direction:after { content: 'to the right'; } .form-direction-l:after { content: 'to the left'; } .modal { backdrop-filter: blur(6px); } .border-radius { border-radius: var(--border-radius); overflow: hidden; } .border-radius--sm { border-radius: var(--border-radius-sm); } .border-radius--lg { border-radius: var(--border-radius-lg); } .left-img-borderRad { border-radius: 0 24px 24px 0px; overflow: hidden; } .right-img-borderRad { border-radius: 24px 0px 0px 24px; overflow: hidden; } @media (max-width: 768px) { .side-scroll { flex-direction: row; flex-wrap: nowrap!important; justify-content: start!important; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-left: 0; padding-right: 5vw; align-items: stretch; gap: 30px; } .side-scroll::-webkit-scrollbar { display: none; } .side-scroll > * { flex: 0 0 80%!important; width: 400px; height: auto; } } @media (max-width: 500px){ .side-scroll { padding-left: 0; padding-right: 5vw; } /* .side-scroll > *{ flex-shrink: 1; } */ } @media (min-width:1300px) { .container { max-width: 1285px; } } @media (max-width: 991px) { .form-direction:after, .form-direction-l:after { content: 'below'; } .left-img-borderRad { border-radius: 24px; overflow: hidden; } .right-img-borderRad { border-radius: 24px; overflow: hidden; } } /* clear / height */ div.clear, div.clr { clear: both; display: block; } .height-xs { height: 1rem; } .height-sm { height: 1.25rem; } .height-md { height: 1.5rem; } .height-lg { height: 1.75rem; } .height-xl { height: 2.25rem; } /* Launch Menu ============================================================================= */ .launch-menu .launch-menu__deck { overflow: hidden; } .launch-menu .launch-menu__panel { display: none; position: absolute; inset: 0; width: 100%; overflow: hidden; background: #fff; transform: translate3d(100%, 0, 0); pointer-events: none; z-index: 1; transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1); } .launch-menu .launch-menu__panel.is-active, .launch-menu .launch-menu__panel.is-behind, .launch-menu .launch-menu__panel.is-entering { display: flex; flex-direction: column; } .launch-menu .launch-menu__panel.is-entering { transform: translate3d(100%, 0, 0); z-index: 2; } .launch-menu .launch-menu__panel.is-active { transform: translate3d(0, 0, 0); pointer-events: auto; z-index: 2; } .launch-menu .launch-menu__panel.is-behind { transform: translate3d(-28%, 0, 0); z-index: 0; } .launch-menu .launch-menu__panel.is-active .launch-menu__list { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .launch-menu.is-resetting .launch-menu__panel { transition: none; } @media (prefers-reduced-motion: reduce) { .launch-menu .launch-menu__panel { transition: none; } .launch-menu-mask { backdrop-filter: none; } } /* ========================================================================== #Footer ============================================================================= */ .footer {background: var(--dark) linear-gradient(101deg, var(--dark) 0%, var(--primary) 100%);color: #fff;overflow: hidden;} .footer-top { border-bottom: 1px solid rgba(255,255,255,0.2); width: 100%; padding: 80px 0 60px; } .footer-top .container-fluid { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--gap); text-align: center; } .footer-top__link-container { } .footer-top__links { justify-content: flex-end; display: inline-flex; flex-wrap: wrap; gap: var(--gap); width: 100%; } .footer h3 { margin: 25px 0; color: var(--gray); font-family: var(--primary-font); font-size: min(1.5rem, 24px); text-transform: capitalize; } .footer a { color: inherit; } .footer a:hover, .footer a:focus-visible {color: var(--light);} .footer__logo {} .footer__logo img { filter: brightness(0) invert(1); } .footer-bottom { padding: 63px 0 76px; } .footer-bottom__header { margin: 0 0 24px; font-size: 20px; font-weight: 700; line-height: 1.3; } .footer__icon { margin-bottom: min(1em, 16px); } .footer__icon svg { width: 24px; height: 24px; fill: currentColor; } .footer__address .street-address { display: block; } .footer__phone {} .footer .list-unstyled li { margin: 20px 0; } .footer__social { } .footer__social a:hover { background-color: transparent; box-shadow: none; } .footer__affil { margin: 20px -5px 0; } .footer__affil img, .footer__affil svg { padding: 5px; max-height: 60px; } .footer__affil svg { height: 60px; width: 60px; } .footer__disclaimer { background-color: var(--dark);align-items: center;justify-content: space-between;padding: 40px 0; } @media (min-width:992px) { .footer-contact .col:has(.footer__address) { flex: 0 0 300px; } .footer-contact .col:has(.footer__phone) { flex: 0 0 484px; } .footer-disclaimer__links { justify-content: space-between; text-align: right; } } @media (min-width:1230px) { .footer-top .container-fluid { justify-content: space-between; } } @media (max-width: 991px) { .footer { text-align: center; } .footer__links { margin-top: 50px; } .footer__social { padding-left: 0; padding-bottom: 20px; } } .footer__analysis .amp__form .ion-amp-form { } /* Footer CTA ============================================================================= */ .footer-cta { padding: 35px 0; } .footer-cta h3 { font-size: 60px; margin: 0; } .footer-cta__text { text-align: right; } svg[class*="icon-"].footer-cta__underline { height: 65px; width: 286px; color: var(--primary); fill: currentColor; display: inline-block; } @media (max-width: 991px) { .footer-cta__text { text-align: center; } } /* ========================================================================== Forms ============================================================================= */ .form-container {background-color: var(--bg-light);border-radius:var(--border-radius-sm);position: relative;padding: clamp(24px, 2.5vw, 48px);color: var(--body-text);} [class*='form-container'] { h2, .form-container__header, .form-container__lead {color: inherit;font-size: min(1.5rem, 24px);font-family: var(--secondary-font);font-weight: bold;text-transform: none;text-align: center;margin: 0 0 28px;} .ion-form {display: flex;flex-direction: column;gap: 20px 18px;} .ion-form-group { margin-bottom: 0; } .ion-form-group ::-webkit-input-placeholder, .form-container .ion-form-group select:invalid { color: var(--body-text); font-size: 16px; text-transform: uppercase; letter-spacing: .1em; } .ion-form-group select { padding-left: 5px; border: 0; background: #fff;appearance:none;-webkit-appearance: none;border-radius: var(--border-radius-sm); border: 1px solid var(--border-alt)!important; } .ion-form-group-break h3 { color: inherit; font-size: 14px; margin: 0; text-transform: uppercase; font-weight: bold; padding-top: 1em; } :is(.ion-form-group-radio, .ion-form-group-checkbox) label, .ion-form-group legend { display: block; color: inherit; } :is(.ion-form-group-radio, .ion-form-group-checkbox) label:not(:first-child) { width: 50%; display: inline-block; } :is(.ion-form-group-radio, .ion-form-group-checkbox) input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } :is(.ion-form-group-radio, .ion-form-group-checkbox) span { display: flex; padding-left: 30px; padding-right: 15px; position: relative; font-size: 15px; } :is(.ion-form-group-radio, .ion-form-group-checkbox) span::before { content: ''; position: absolute; left: 0; top: 2px; height: 20px; width: 20px; background: #fff; border-radius: var(--border-radius-sm); display: block; transition: 0.3s; } :is(.ion-form-group-radio, .ion-form-group-checkbox) span::after { content: '\f00c'; color: var(--primary); opacity: 0; position: absolute; left: 3px; top: 2px; font-family: var(--font-awesome); font-style: normal; font-weight: 600; line-height: 23px; -webkit-font-smoothing: antialiased; transition: 0.3s; } :is(.ion-form-group-radio, .ion-form-group-checkbox) input:hover span::after { opacity: .4; transition: 0.3s; } :is(.ion-form-group-radio, .ion-form-group-checkbox) input:checked ~ span::after { opacity: 1; transition: 0.3s; } iframe { margin: -10px 0 10px; } form > div:last-of-type > div { margin-right: auto; } .ion-form-group select { appearance:none;-webkit-appearance: none; } .ion-form-group :is(input,textarea, select) {font-size: min(1rem, 16px);border: 1px solid var(--border-alt)!important;height: 44px;padding: 10px 20px 0!important;border-radius: var(--border-radius-sm)!important;background: #fff;color: var(--primary);} .ion-form-group textarea {height: 100px;padding-top: 12px!important;} button {width: 143px;height: 52px;line-height: 1em;border-radius: var(--border-radius-sm);color: #fff;background: var(--primary);border-color: var(--primary);text-transform: uppercase;padding: 12px 24px;letter-spacing: .025em;font-family: var(--primary-font);display: flex;justify-content: center;align-items: center;gap: 12px;} button:hover { color: var(--primary); border-color: var(--primary) } @media (min-width:992px) and (max-width: 1827px) { h2, .form-container__header, .form-container__lead { text-align: start; } } } @media (min-width:992px) { .form-container {max-width: 100%;width: 515px;margin-left: auto;} } /* Form Container Stacked on small screens */ @media (min-width:600px) and (max-width: 991px) { .form-container form { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0; gap: 20px; form .ion-form-group { flex-basis: calc(50% - 20px); flex-grow: 1; margin: 0; } form .ion-form-group:is(.ion-form-group-textarea, .ion-form-group-break, .ion-form-group-checkbox, .ion-form-group-radio), form > div:last-of-type { flex-basis: 100%; } form > div:last-of-type > div { margin-left: auto; } } } /* Form Container Stacked */ @media (min-width:992px) { .form-container--stacked { width: auto; form { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 0; gap: 20px; } .ion-form { flex-direction: row; } .ion-form-group { flex-basis: calc(50% - 20px); flex-grow: 1; margin: 0; } .ion-form-group:is(.ion-form-group-textarea, .ion-form-group-break, .ion-form-group-checkbox, .ion-form-group-radio), form > div:not(.ion-form-group):last-of-type { flex-basis: 100%; } .ion-form-group.ion-form-group-textarea { margin-bottom: 5px; } form > div:not(.ion-form-group):last-of-type { padding: 0 10px; } form > div:not(.ion-form-group):last-of-type > div { margin-left: auto; } } } /* Floating Form Labels */ [class*='form-container'] .ion-form .ion-form-group { position: relative; } [class*='form-container'] .ion-form .ion-form-group:not(.ion-form-group-checkbox,.ion-form-group-radio) label {font-weight: 400;margin: 0;position: absolute;font-size: 1em;top: 0;left: 0;z-index: 2;height: 100%;padding: 15px;overflow: hidden;line-height: 1;text-align: start;text-overflow: ellipsis;white-space: nowrap;pointer-events: none;border: var(--bs-border-width) solid transparent;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;} [class*='form-container'] .ion-form-group ::-webkit-input-placeholder, [class*='form-container'] .ion-form-group select:invalid, [class*='form-container'] .ion-form-group label:not(.float-label) + select:not(:focus), [class*='form-container'] .ion-form-group ::placeholder { color: transparent!important; } [class*='form-container'] .ion-form .ion-form-group:not(.ion-form-group-checkbox, .ion-form-group-radio):has(input:focus, textarea:focus, select:focus) label, .form-container .float-label {-webkit-transform: translateY(-.05em) scale(.5);transform: translateY(-.05em) scale(.5);opacity: .7;} [class*='form-container'] .ion-form-group-dropdown:has(.float-label) select:not(:focus), .float-label + select { color: var(--body-text)!important; } [class*='form-container'] .ion-form-group-dropdown label {top: -2px!important;left: -1px!important;} .float-label {-webkit-transform: translateY(-.05em) scale(.5);transform: translateY(-.05em) scale(.5);opacity: .7;} @media (min-width: 992px) and (max-width: 1199px), (max-width: 475px) { [class*='form-container'] .ion-form .ion-form-group:not(.ion-form-group-checkbox,.ion-form-group-radio) label { font-size: 14px; } } /* Form Inline ================================================== */ .form-container-inline { justify-content: center; } .form-container-inline > div { width: 100%; max-width: 100%; overflow: hidden; } .form-container-inline form {position: relative;overflow: hidden;display: flex;flex-wrap: wrap;flex-direction:row!important;justify-content: center;align-items: center;gap: 24px;} .form-container-inline .ion-form-group {flex: 1 1 auto;margin: 0;} .form-container-inline .ion-form-group :is(::-webkit-input-placeholder, select:invalid) { color: var(--gray-darker); text-transform: lowercase; } @media (min-width: 501px) { .form-container-inline form { justify-content: flex-start; } .form-container-inline .ion-form-group {} .form-container-inline--last-grow .ion-form-group:last-of-type { flex: 2 0 100%!important; min-width: 344px; } } .form-container-inline--hide-labels label { position: absolute; left: 110vw; top: -110vh; visibility: hidden; opacity: 0; } .form-container-inline--block form { margin: 0; gap: 8px; } .form-container-inline--block input { border-radius: 0!important; height: 32px; } .form-container-inline--block .ion-form-group { padding: 0; } .form-container-inline--block button {flex: 0 1 391px;margin: 0;border-radius: 0;} /* Form Swap ================================================== */ .form-swap { text-align: left; } .form-swap p {color: inherit;font-size: min(1.25rem, 20px);font-weight: 400;line-height: 1.8;} .form-swap a { color: inherit; } .form-swap .is-required:after { display: inline-block; content: '*'; color: #f00; margin-left: .5em; } .form-swap .nav {font-size: 1em;margin: 20px 0 32px;display: flex;flex-wrap: wrap;justify-content: flex-start;gap: 5px clamp(5px, 0.5vw, 10px);} .form-swap .nav li {} .form-swap .nav a {position: relative;display: block;padding: 0 0 0 28px; color: inherit;} .form-swap .nav a::before {content: '';position: absolute;left: 0;top: 50%;transform: translateY(-50%);height: 20px;width: 20px;background: #fff;border-radius: 4px;display: block;transition: 0.3s;} .form-swap .nav a::after {content: "\f00c";color: #fff;font-size: 12px;position: absolute;left: 5px;top: 50%;transform: translateY(-50%);opacity: 0;font-family: var(--font-awesome);font-style: normal;font-weight: 400;line-height: 1;transition: 0.3s;} .form-swap .nav a.active::before {background-color: var(--dark);} .form-swap .nav a:hover::after { opacity: .5; transition: 0.3s; } .form-swap .nav a.active::after { opacity: 1; } /* ========================================================================== Accordion ============================================================================= */ .launch-accordion { margin: 0; list-style: none; padding: 0; } .launch-accordion > li {margin-bottom: 24px;border: 1px solid var(--light);border-radius: 8px;background-color: #fff;color: var(--dark); transition: 0.3s;} .launch-accordion > li.active {background-color: var(--primary);color: #fff;} .launch-accordion > li > h3 { margin: 0; } .launch-accordion > li > h3 > button { position: relative; display: block; width: 100%; text-align: left; font-size: min(1.125rem, 18px); font-weight: 700; color: inherit; margin: 0; padding: 19px 60px 19px 24px; border: 0; background: transparent; font-family: inherit; cursor: pointer; } .launch-accordion > li > h3 > button::after { content: ''; background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%226%22%20viewBox%3D%220%200%2012%206%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6%206L0%200H12L6%206Z%22%20fill%3D%22%23222222%22%2F%3E%3C%2Fsvg%3E') no-repeat center center; position: absolute; top: 50%; right: 24px; transform: translateY(-50%) rotate(0deg); color: var(--secondary); font-family: var(--font-awesome); width: 24px; height: 24px; transition: all 0.6s; } .launch-accordion > li > h3 > button:hover::after { transform: translateY(-50%) rotate(-90deg); } .launch-accordion > li.active > h3 > button::after {transform: translateY(-50%) rotate(-180deg);filter: invert(1);} .launch-accordion > li > h3 > button:hover { color: var(--accent); } .launch-accordion>li:is(.active, :focus-within)>h3>button:hover { color: inherit; transition: all 0.3s; } .launch-accordion > li > div {border-color: transparent;padding: 4px 28px 28px;display: none;} .launch-accordion > li > div p { margin: 20px 0; } .launch-accordion > li > div ul { list-style: disc; margin: 20px 0; } .launch-accordion > li > div ul li { margin: 0 0 10px; } .launch-accordion .launch-accordion__body .btn { color: var(--dark)!important; background: #fff; border: 1px solid #fff; } .launch-accordion .launch-accordion__body .btn:is(:hover, :focus-visible) { color: #fff!important; background: var(--primary)!important; } .launch-accordion .launch-accordion__body .btn:is(:hover, :focus-visible)::before { background: var(--primary); } .launch-accordion > li > div a:not(.btn) { font-weight: 600; color: #fff; text-decoration: underline;} .launch-accordion > li > div a:not(.btn):is(:hover, :focus, :focus-visible) { color: var(--gray); text-decoration: none;} .launch-accordion > li > div *:last-child { margin-bottom: 0; } .launch-accordion > li > div *:first-child { margin-top: 0; } /* keep a visible focus ring on the button for keyboard users */ .launch-accordion > li > h3 > button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .launch-accordion.no-margin > li.active + li > h3 > button, .launch-accordion.no-margin > li:hover + li > h3 > button { border-color: #ecebeb; border-top: 0; } .launch-accordion.faqs { text-align: left; } .launch-accordion.faqs h3 > button {padding: 28px 65px 28px 75px;} .launch-accordion.faqs h3 > button::before {content: 'Q:';color: var(--dark);font-size: min(1.75rem, 30px);position: absolute;top: 45%;left: 30px;transform: translateY(-50%);} .launch-accordion > li.active h3 > button::before, .launch-accordion.faqs > li.active div[itemprop="text"]::before { color: #fff; } .launch-accordion.faqs > li > div:not([itemprop="acceptedAnswer"])::before, .launch-accordion.faqs > li div[itemprop="text"]::before {content: 'A: ';color: #fff;font-size: min(1.25rem, 20px);} .launch-accordion > li.active > h3 > button { color: #fff!important; } .launch-acc.launch-accordion--faqs .btn { display: flex; align-items: center; justify-content: center; width: fit-content; } @media (min-width: 768px) { .launch-accordion > li > h3 > button { font-size: 18px; } } /* FAQ Search Input Box */ #faq-search__input { width: 85%; height: 60px; padding: 0 24px; margin-bottom: 28px; } .faq-section__title { font-size: clamp(20px, 3vw ,28px); color: var(--primary); margin: 3rem 0 2rem;} #home-faq .launch-accordion, #faqs .launch-accordion, #pm-faq .launch-accordion, #re-faq .launch-accordion { max-width: 800px; margin: 60px auto; } /* ========================================================================== Multi-Item Carousel ============================================================================= */ .multi-item-carousel { --shown-items: 1; --shown-percent: calc(100% / var(--shown-items)); --shown-percent-prev: calc(-100% / var(--shown-items)); --gap: 30px; margin-right: calc(var(--gap) * -1); } .multi-item-carousel .carousel-item { justify-content: space-between; padding-right: var(--gap); } .multi-item-carousel .carousel-item > * { transition: 0.6s; } .multi-item-carousel .carousel-item.active, .multi-item-carousel .carousel-item-next, .multi-item-carousel .carousel-item-prev, .carousel-item--get-height { display: grid; gap: var(--gap); grid-template-columns: repeat(var(--shown-items), 1fr); visibility: visible; } .multi-item-carousel .carousel-item-next:not(.carousel-item-start), .multi-item-carousel .active.carousel-item-end { -webkit-transform: translateX(var(--shown-percent)); transform: translateX(var(--shown-percent)); } .multi-item-carousel .carousel-item-prev:not(.carousel-item-end), .multi-item-carousel .active.carousel-item-start { -webkit-transform: translateX(var(--shown-percent-prev)); transform: translateX(var(--shown-percent-prev)); } .multi-item-carousel :is(.carousel-item-prev:not(.carousel-item-end), .active.carousel-item-start)> *:first-child { opacity: 0!important; } .multi-item-carousel :is(.carousel-item-start:not(.active),.carousel-item-end:not(.active))> *:first-child::before { opacity: 1!important; } .multi-item-carousel .carousel-item.active:not(.carousel-item-start, .carousel-item-end)> *:first-child::before { opacity: 1!important; } .multi-item-carousel [class*='lazy'] { opacity: 1; } /* Carousel controls */ /* For both single and multi-item carousels */ .carousel-controls {position: relative;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);width: 128px;height: 52px;} .carousel-controls [class*='carousel-control-'] {bottom: auto;background-color: rgba(255, 255, 255, 0.4);color: var(--dark);fill: var(--dark);width: 52px;height: 52px;border: 0;border-radius: 50%;-webkit-transition: 0.4s;transition: 0.4s;opacity: 1;} .carousel-controls [class*='carousel-control-']:hover {background-color: rgba(255, 255, 255, 1);} .carousel-controls svg { width: 24px; height: 24px; fill: currentColor; } /* Carousel indiv=cators */ /* For both single and multi-item carousels */ .carousel:has(.carousel-indicators) { padding-bottom: 36px;} .carousel-indicators {height: 12px;margin: 0 auto;bottom: 32px;} .carousel-indicators button {border: 0!important;height: 12px!important;width: 12px!important;border-radius: 50%;opacity: 0.4!important;} .carousel-indicators button:is(.active, :hover, :focus) { opacity: 1!important; } /* ========================================================================== Image Styles ============================================================================= */ .rounded-image {top: 0;left: 0;width: 100%;height: 100%;z-index: 1;} .rounded-image .rounded__image { width: 100%; height: 100%; object-fit: cover; border-radius: var(--border-radius); } /* ========================================================================== Areas ============================================================================= */ #areas { padding: 120px 0 48px; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 0; } #areas .areas__header { margin-bottom: 1.5rem; } #areas header { margin-bottom: 60px; } #areas header h3 { color: var(--text-dark); margin-bottom: 14px; } #areas .display-1__sm { color: rgba(var(--text-dark-rgb), 0.6); } .areas-container { min-height: 506px; overflow: hidden; border-radius: var(--border-radius); position: relative; background-color: var(--bg-md); display: flex; align-items: center; justify-content:center; } .areas-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.4; } .areas { list-style: none; display: flex; flex-wrap: wrap; padding: 50px 30px; margin: 0; gap: 12px; justify-content: center; color: var(--text-dark); font-size: 20px; position: relative; } .areas li { flex: 0 0 auto; } .areas h3 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; } .areas li > a, .areas li > span, .areas li > h3 { display: block; text-align: center; min-width: 180px; padding: 16px 24px; border-radius: 8px; background-color: #fff; color: var(--text-dark); font-size: 20px; font-weight: 500; line-height: normal; white-space: nowrap; transition: background-color 0.3s, color 0.3s; } .areas li:hover > a { background-color:var(--primary); color:#fff; } .areas a { color: inherit; } .areas a:hover, .areas a:focus-visible { color: var(--primary); } @media (min-width: 1200px){ .areas { max-width: 1300px; margin: 0 auto; padding: 120px; } } @media (max-width: 767px){ #areas { padding: 60px 0; } #areas .areas-container > span { width: 100%; } .areas { display: grid; grid-template-columns: 1fr 1fr; padding: 50px 15px; } .areas li > a, .areas li > span, .areas li > h3 { font-size: 16px; min-width: 0; } } @media (max-width: 375px) { .areas { flex-direction: column; align-items: stretch; justify-content: flex-start; } .areas li { display: block; width: 100%; } .areas li > a, .areas li > span, .areas li > h3 { display: flex; justify-content: center; height: 100%; width: 100%; white-space: normal; } } /* ========================================================================== Home Page ============================================================================= */ /* Home Stats ============================================================================= */ #stats { text-align: center; padding-left: 4vw; padding-right: 4vw;} .stats { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 40px 84px; } .stats__number { font-family: var(--secondary-font); font-size: 64px; font-weight: 800; line-height: 1; color:var(--primary); font-variant-numeric: tabular-nums;} .stats__description { font-size: 18px; display: block; margin: 24px 0 0; } .stats__number { display: inline-flex; align-items: center; } .stats__star { color: gold; font-size: 0.6em; margin-left: 8px; } @media (max-width: 1080px) { .stats { gap: 40px 0; } .stats__item { flex: 0 0 50%; box-sizing: border-box; padding: 0 20px; } } @media (max-width: 767px) { #stats { padding-top: 40px;} } @media (max-width: 575px) { .stats__number { font-size: 36px} .stats__description { font-size: 14px; margin-top: 5px; } } @media (max-width: 368px) { .stats__number { font-size: 32px} .stats__item { padding: 0 10px;} } .stats-inline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em; } .stats-inline li { display: flex; align-items: center; gap: 0.5em; } .stats-inline li:not(:last-child)::after { content: "•"; } @media (max-width: 768px){ .stats-inline { flex-direction: column; align-items: center; } .stats-inline li::after { display: none; } } /* Home Welcome ============================================================================= */ #home-welcome ul li { margin-bottom:8px; font-size: 16px; font-weight: 500; display: flex; } #home-welcome ul li i { color:var(--body-text); font-size: 24px; margin-right: 12px; } .home-welcome__sub { margin: min(2rem, 32px) 0; color: var(--body-text); font-size: var(--default-fs); font-weight: 700; } .home-welcome__btn-list { margin-top: 23px; } @media (max-width: 599px) { #home-welcome { } } /* Home CTAs ============================================================================= */ .ctas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); justify-content: center; gap: calc(2 * var(--gap)) var(--gap); font-size: var(--default-fs); } .ctas .cta {background: var(--light);position: relative;display: grid;grid-template-rows: subgrid;grid-row: span 3;padding: 0;width: 100%;color: var(--body-text);text-align: center;transition: 0.3s ease-out;border: 1px solid var(--secondary);border-radius: var(--border-radius);overflow:hidden; gap: 1.5rem; } .ctas .cta a { font-size: 16px; font-weight: 700; line-height: 150%; } .ctas .cta-content { display: grid; grid-template-rows: subgrid; grid-row: span 3; padding: 36px clamp(20px, 21px, 3vw) 0; } .ctas .cta-header {display: flex;justify-content: start;align-items: center;gap: 13px;margin-bottom: 9px;} .ctas .cta__title {color: var(--primary);font-size: min(1.75rem, 26px);font-weight: 700;text-transform: none;margin: 0;display: flex;align-items: center;justify-content: center;} .ctas .cta__description { margin: 0; } .ctas .cta__image { display: block; width: 100%; height: auto; object-fit: cover; margin-top: 52px; padding: 0; } /* 2x2 */ @media (max-width: 1399px) { .ctas { grid-template-columns: repeat(2, 1fr); } } /* 1 column */ @media (max-width: 767px) { .ctas { grid-template-columns: 1fr; } } /* Services ============================================================================= */ .services { display: flex; flex-direction: column; align-items: stretch; gap: var(--gap); padding: 3rem 0 1rem; flex-wrap: wrap; justify-content: center; } .service-item {display: flex; min-height: 400px; min-width: 300px; width:100%;flex-direction: column;justify-content: flex-end;align-items: flex-start;border-radius: var(--border-radius);position: relative;flex: 1;text-decoration: none;color: inherit;overflow: hidden;transition: all 0.3s ease;cursor: pointer;container: service-item / inline-size; flex: 1 1 calc(20% - var(--gap)); } .service-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .service-image .service__image { width: 100%; height: 100%; object-fit: cover; border-radius: var(--border-radius); } .service-content { position: relative; z-index: 3; width: 100%; padding: 40px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 36px; flex: 1; background: rgba(var(--light-rgb), 0.9); transition: all 0.3s ease; } .service__title { color: var(--primary); font: 700 min(1.25rem,28px)/1.3 var(--primary-font); margin: 0; align-self: stretch; position: relative;transition: all 0.3s ease; } .service__description { color: var(--gray-dark); font: 400 min(1rem,16px)/1.5 var(--primary-font); margin: 0; align-self: stretch; transition: all 0.3s ease; } .service__description p {margin: 0;} .service__link { display: flex; height: auto; min-height: 30px; padding: 13px 20px; justify-content: center; align-items: center; gap: 10px; border-radius: 8px; background-color: var(--primary); color: #fff; text-decoration: none; cursor: pointer; transition: 0.3s; margin: 0 auto; } .service__link:hover { background-color: #fff; color: var(--primary); } @media (min-width: 1700px) { .service-item { flex: 1 1 calc(20% - var(--gap)); max-width: calc(20% - var(--gap)); } .services.cluster .service-item:first-child:not(:hover) .service__title { transform: translateY(12cqw); } } @media (min-width: 1200px) { .service-item { max-width: 20%; } .service-content { position: absolute; inset: 0; } .services.cluster .service-item:first-child .service__link { min-height:0; height: 0; padding: 0; } .services.cluster .service-item .service__link { background-color: transparent!important; font-size: 0; } .services { flex-direction: row; } .service__title {transform: translateY(25cqw);} .service__description, .service__link { opacity: 0; transform: translateY(20px); height: 0; } .services.cluster .service-item:first-child:not(:hover) .service__title { transform: translateY(18cqw); } .service-content { background: linear-gradient(180deg, rgba(var(--light-rgb), 0) 0%, rgba(var(--light-rgb), 0.9) 100%); transition: all 0.3s ease; } .service-item:is(:hover, :focus-within, :focus-visible) .service-content { background: rgba(196, 219, 247, 0.9); } .service-item:is(:hover, :focus-within, :focus-visible) :is(.service__title, .service__description, .service__link) { opacity: 1; transform: translateY(0); } .service-item:is(:hover, :focus-within, :focus-visible) :is(.service__description, .service__link) { height: auto; transition-delay: 0.3s; } } @media (min-width: 1200px) and (max-width: 1699px) { .service-item { flex: 1 1 calc(33.333% - var(--gap)); max-width: calc(33.333% - var(--gap)); } } @media (min-width: 768px) and (max-width: 1199px) { .services { flex-direction: row; } .service-item { flex: 1 1 calc(50% - var(--gap)); max-width: calc(50% - var(--gap)); min-width: 0; } } @media (max-width: 767px) { #services-banner .container-fluid { padding-left: 0; padding-right: 0; } #services-banner header { padding-left: max(3vw, 15px); padding-right: max(3vw, 15px); } .services { flex-direction: row; flex-wrap: nowrap; justify-content: start; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-left: 5vw; padding-right: 5vw; align-items: stretch; } .services::-webkit-scrollbar { display: none; } .service-item { flex: 0 0 400px; width: 400px; height: auto; } .service-content { justify-content: flex-start; } .service-content .service__link { margin-top: auto; } } @media (max-width: 500px){ .services { padding-left: 5vw; padding-right: 5vw; } .service-item { flex-shrink: 1; } } /* Property Type Services ============================================================================= */ @media (min-width: 1200px){ .services.property-type .service-item { flex: 1 1 calc(33% - var(--gap)); } } @media (max-width: 1199px) { #service-type-banner .container-fluid:has(.services) { padding-left:0;padding-right:0; } .services.property-type .service-item { width: 400px; } .services.property-type .service-item { min-height: 430px; } .services.property-type .service__title { min-height: 2.6em; } .services.property-type .service-content { justify-content: flex-start; } .services.property-type .service__link { margin-top: auto; } } /* Real Estate Services ============================================================================= */ @media (min-width: 1700px) { #re-services .service-item {min-height: 515px; } } @media (min-width: 1200px) { #re-services { .service-content { padding: 40px 36px; } .service-item:is(:hover, :focus-within, :focus-visible) .service-content { justify-content: flex-start;} .service-item:is(:hover, :focus-within, :focus-visible) .service__description { height: auto; transition-delay: 0.2s; } .service-item:is(:hover, :focus-within, :focus-visible) .service__link { font-size: inherit; min-height: 30px; padding: 13px 20px; background-color: var(--primary) !important; transition-delay: 0.4s, 0.4s, 0s;} .service-item:is(:hover, :focus-within, :focus-visible) .service__link:hover { background-color: #fff !important; } .service__link { transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease; text-align: center;} } } @media (max-width: 767px) { #re-services .service-content .service__link { text-align:center; } } @media (max-width: 575px) { #re-services .service-content { padding: 32px; } } /* Home CTA Banner ============================================================================= */ #cta-banner { } .cta-banner {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;gap: 0;padding: min(10vw, 56px) min(10vw, 58px);color: var(--dark);text-align: center;background-color: var(--light);background-attachment: scroll;border: 1px solid var(--secondary);border-radius: var(--border-radius);} .cta-banner__header { color: var(--primary); font-size: min(2rem, 36px); font-weight: 800; line-height: normal; letter-spacing: -0.72px; margin: 0 0 20px; } .cta-banner p { margin-bottom: 20px; } .cta-banner a { color:var(--dark); font-weight: 500; } .cta-banner a:hover {color: var(--primary); } @media (min-width: 1700px) { .cta-banner { justify-content: center; } } #cta { .cta-primary { background: var(--primary);} .cta-primary h2, p { color: #fff;} .cta-primary .tel {color: #fff; font-weight: 700;} } /* Calc Banner ============================================================================= */ #calculator-banner { padding: clamp(60px, 8vw, 110px) 0; container: calc-container / inline-size; .calculator-container { background-color: var(--gray); color: var(--dark); position: relative; padding: 44px 36px; border-radius: var(--border-radius); } .calc-instructions { text-align: center; color: inherit; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; } .calc-instructions__heading { font-size: min(1rem, 16px); font-weight: bold; color: inherit; text-transform: capitalize; margin: 0; display: inline; } .calc-instructions__toggle { display: inline-flex !important; gap: 8px; margin: 0; padding: 0; justify-content: center; align-items: center; } .custom-switch__label, .form-check-label { padding: 0; font-size: min(1rem, 16px); } .form-check-input.custom-control-input { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28115,115,115, 1%29'/%3e%3c/svg%3e"); width: 31px; height: 16px; } .text-danger { display: none; } .calc-instructions .form-switch .form-check-input:checked { background-color: var(--primary); } .calc-instructions__steps {padding: 2rem 0;width: 100%;line-height: 1.25;} .calc-instructions__steps > ol { list-style: none; counter-reset: counter; display: grid; grid-template-columns: 1fr; gap: 24px; padding: 0; } .calc-instructions__steps > ol li { counter-increment: counter; } .calc-instructions__steps > ol li::before {content: counter(counter);color: var(--gray-dark);font: 500 20px / 1 var(--primary-font);width: 30px;height: 32px;display: flex;align-items: center;justify-content: center;background-color: #fff;aspect-ratio: 15/16;margin-bottom: 1rem; } .calc-form { text-align: left; padding: 0; letter-spacing: normal; } .calc-form .form-group input:not(.form-check-input), .calc-form .form-group select, .calc-form .form-group textarea { background: #fff; } .carousel-item { background-color: transparent; padding: 0; box-shadow: none; } .calc-form__heading {margin: 24px 0 20px;padding: 0 0 20px;color:var(--dark);font-family: var(--primary-font);font-size: 14px;font-weight: 400;letter-spacing: inherit;line-height: 2rem;text-transform: none;border-bottom: 1px solid rgba(255, 255, 255, 0.1);position: relative;z-index: 1;text-transform: uppercase;} .calc-form__sub { color: inherit; font-family: var(--secondary-font); font-size: min(2rem, 32px); font-weight: 400; letter-spacing: normal; text-transform: capitalize; margin: 0 0 36px; } .calc-form__container { margin: 0 0 36px; gap: 24px; } .calc-form__advanced-toggle { color: var(--dark); } .calc-form .form-check { margin: 0; } .calc-form .is-required:not(.form-group-radio) label::after, .calc-form .is-required legend::after { color: #fff; } .calc-form .form-group label, .calc-form .form-group legend { display: inline; } .form-group { flex: 1 1 330px; padding: 0; margin: 0; } .calc-form__container:has(> .form-group:nth-of-type(4):last-of-type) > .form-group { flex: 1 1 450px; } .calc-form__container .info-btn {margin-left:12px; } /* .carousel-item:nth-of-type(2) .form-group:not(:has(.form-text)) { display: inline-flex; flex-direction: column; justify-content: flex-end; } */ .form-check-input:checked { background-color: var(--primary); border-color: var(--primary);} .input-group { border-radius: 12px; overflow: hidden;} .input-group-text { color: var(--body-text); font-size: 16px; min-width: auto; background-color: #fff; padding: 0 10px 0 22px; } .carousel-item:last-child .form-control { padding: 15px 22px; background-color: #fff; border-radius: 12px; } .input-group-prepend + .form-control { padding-left: 0; } .form-text { color: var(--dark) !important; } .calc-form__btn { height: 42px; border: 1px solid var(--primary); background-color: var(--primary); color: #fff; line-height: 1; border-radius: 0; text-transform: capitalize; display: inline-flex; justify-content: center; align-items: center; transition: 0.4s; border-radius: 100px; } .calc-form__btn:hover { background-color: #fff; color: var(--primary)!important;} &.section .calc-instructions { padding: 0 32px; } &.section .calc-instructions__steps > ol { grid-template-columns: repeat(auto-fit, minmax(345px, 1fr)); } &.section .form-group { flex-basis: 222px; } @media (min-width: 992px) { .calc-instructions__steps > ol { grid-template-columns: repeat(auto-fit, 48%); } .calc-instructions { position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; } } @media (max-width: 575px) { &.section .calc-instructions__steps > ol { grid-template-columns: 1fr; } &.section .calc-instructions { padding: 0; } } } .calc-form-body { transition: 0.1s; } .calc-results__table thead th { } /* Calc Results */ #calculator-banner .calc-results { width: 100%; height: 100%; overflow-y: scroll; .calc-results__heading { color: var(--dark); text-transform: capitalize; font-size: min(3rem, 48px); margin: 0 0 min(3rem, 48px); } .calc-results__value { font-size: var(--default-fs); color: var(--dark)!important; } .calc-results__amount { font-size: min(1.5rem, 24px); } .calc-results__table { border-radius: 0; overflow-x: scroll; } .calc-results__table th { vertical-align: top; color: #000!important; } .jqplot-axis:has(.jqplot-yaxis-label) { padding-left: 75px; } } @media (min-width: 576px) { #calculator-banner .calc-instructions { justify-content: flex-end; padding: 0 36px; } #calculator-banner .calc-form__heading { margin-top: 0; } } @media (min-width: 992px) { .calculator-container:has(.calc-instructions__steps:not(.collapse:not(.show))) .calc-form-body { margin-top: 320px; } #calculator-banner .calc-results__plot { padding: 0; } } @media (min-width: 1400px) { #calculator-banner .container-fluid { display: flex; justify-content: space-between; align-items: center; gap: 25px; } #calculator-banner .calculator-container { flex: 0 0 788px; overflow: hidden; } } @media (max-width: 1100px) { .calc-results__table td:first-child { background: var(--dark); } } @media (min-width: 992px){ .calculator-container:has(.calc-instructions__steps:not(.collapse:not(.show))) #mortgage-calculator .calc-form-body { margin-top: 200px; } } .calc-hero { margin-top: var(--header-height); } @media (max-width: 1464px){ .calc-hero {margin-top: 140px; } } @media (max-width: 991px){ .calc-hero {padding-top: 0!important; } } .calc-form__controls { margin-top: 1rem; } /* ROI Calc ============================================================================= */ #roi-calc-boxes ol.bubble { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; } @media (max-width: 767px) { #roi-calc-boxes ol.bubble { grid-template-columns: 1fr; } } /* Mortgage Calc ============================================================================= */ #mortgage-calculator { .calc-instructions__sub { color: #fff; } .calc-instructions { align-items: start; } } @media (min-width: 992px) { #calculator-banner #mortgage-calculator .calc-instructions { position: static; transform: none; left: auto; padding: 0; margin-bottom: 1rem; } #calculator-banner #mortgage-calculator .calc-form-body { margin-top: 0; } } /* Analysis Banners ============================================================================= */ .analysis-content { position: relative;color: #fff;padding: 85px 25px 0;} .analysis-content svg { height: 22px; width: 22px; margin-right: 6px; } .analysis-container {width: 100%;max-width: 710px;margin: 0 auto; position: relative;z-index: 2;} .analysis-banner { .amp__form { margin-left: auto!important; margin-right: auto!important; } } .analysis-banner--1 { /* Below is all child classes nested within analysis-banner--1 modifier */ .analysis-content::before { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary); } .amp__form { margin: 0!important; } @media (min-width: 1200px) { & {display: flex;flex-wrap: wrap;align-items: center;} .analysis-content {flex: 0 0 70%; align-self: stretch;height: 100%;padding: min(9.7vw, 194px) min(12.5vw, 250px);padding-left: min(9vw, 180px);} .analysis-content::before { width: 100%; background-color: var(--primary); background-image: linear-gradient(304deg, var(--primary) 30.64%, var(--alt) 98.17%); --breadth: 600px; --size: 225px; --radius: 36px; --area: atan2(var(--size),var(--breadth)/2); clip-path: shape(from 0 0, line to calc(100% - var(--size) - var(--radius)) 0, curve to calc(100% - var(--size) + var(--radius)*sin(var(--area))) calc(var(--radius)*cos(var(--area))) with calc(100% - var(--size)) 0, line to calc(100% - var(--radius)*sin(var(--area))) calc(50% - var(--radius)*cos(var(--area))), curve to calc(100% - var(--radius)*sin(var(--area))) calc(50% + var(--radius)*cos(var(--area))) with 100% 50%, line to calc(100% - var(--size) + var(--radius)*sin(var(--area))) calc(100% - var(--radius)*cos(var(--area))), curve to calc(100% - var(--size) - var(--radius)) 100% with calc(100% - var(--size)) 100%, line to 0 100% ); } .analysis__header { font-size: min(2.5rem, 40px)!important; } .analysis-image {position: absolute;right: 0;z-index: -2;width:54vw; max-height: 612px; overflow: hidden;} } @media (min-width: 1600px) { .analysis-content {flex: 0 0 60%; padding-left: min(11.5vw, 230px);} } @media (max-width: 1199px) { .analysis-content::before { width: 100vw; height: calc(100% + 132px); left: 50%; z-index: 1; transform: translateX(-50%); background-image: linear-gradient(204deg, var(--primary) 30.64%, var(--secondary) 98.17%); --size: 100px; --radius: 32px; --breadth: 800px; --area: atan2(var(--size), var(--breadth) / 2); clip-path: shape( from 0 0, line to 100% 0, line to 100% calc(100% - var(--size) - var(--radius)), curve to calc(100% - var(--radius)*cos(var(--area))) calc(100% - var(--size) + var(--radius)*sin(var(--area))) with 100% calc(100% - var(--size)), line to calc(50% + var(--radius)*cos(var(--area))) calc(100% - var(--radius)*sin(var(--area))), curve to calc(50% - var(--radius)*cos(var(--area))) calc(100% - var(--radius)*sin(var(--area))) with 50% 100%, line to calc(var(--radius)*cos(var(--area))) calc(100% - var(--size) + var(--radius)*sin(var(--area))), curve to 0 calc(100% - var(--size) - var(--radius)) with 0 calc(100% - var(--size)), line to 0 0 ); } } @media (max-width: 599px) { .analysis-content::before { height: calc(100% + 82px); --size: 50px; --radius: 24px; --breadth: 400px; } } } @media (max-width: 768px){ .analysis-content ul li { text-align: left; display: flex; } } .analysis-banner--2 { /* Below is all child classes nested within analysis-banner--2 modifier */ position: relative; top: -241px; margin-bottom: -121px; .bg-image { background-blend-mode: normal; } .bg-image::before { content: ''; width: 100%; height: 100%; top: 0; left: 0; position: absolute; background: linear-gradient(90deg, rgba(var(--dark-rgb), 0.60) 0%, var(--primary) 100%) ; } .analysis-content {padding: min(10vw, 116px) min(10vw, 64px);} .analysis__header { text-transform: none; } @media (min-width: 1200px) { .analysis-content {display: flex;flex-wrap: wrap;justify-content:flex-end;align-items: center;} .analysis-container { margin-right: 0; } .analysis__header { font-size: min(3rem, 48px)!important; } } } .analysis-banner--3 { /* Below is all child classes nested within analysis-banner--3 modifier */ .analysis-content { width: min(95%, 1006px); margin: clamp(-200px, -10.5vw, -75px) auto 0; position: relative; z-index: 2; text-align: center; padding: 64px min(8vw, 64px); border-radius: var(--border-radius-sm); } @media (max-width: 767px) { #analysisCarousel { aspect-ratio: 1/1; } .analysisCarousel-container, & .carousel-item { height: 100%; } } } @media (max-width: 1199px) { #analysis-banner .analysis-container {text-align: center;} .analysis-banner--1 { .amp__form { margin: 0 auto !important; } } } @media (max-width: 767px) { .analysis-banner--3 .analysis-image { min-height: 420px; } .analysis-banner--3 .analysis-image img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; } } @media (max-width: 575px) { .analysis-banner--3 { margin-top: 4.5rem; } } /* Analysis Report Page */ #rental-analysis .body-container { padding-bottom: 0;} #analysis { padding: 32px; border-radius: var(--border-radius); background-color: var(--bg-light); } #analysis h3 { margin: 0 0 15px; } #analysis .amp__form .ion-amp-form { flex-wrap: wrap; gap: 15px; background-color: transparent; } #analysis .amp__form .ion-amp-form .ion-form-group input { padding: 32px!important; } #analysis .amp__form .ion-amp-form .ion-form-group::before { top: 50%; left: 10px; transform: translateY(-50%); } #analysis .amp__form .ion-amp-form .ion-btn { flex: 1 1 100%; } @media (max-width: 1850px){ #analysis .amp__form .ion-amp-form .ion-form-group input { padding-bottom: 45px; } } @media (min-width: 992px) and (max-width: 1257px){ #analysis .amp__form .ion-amp-form .ion-form-group input { padding-bottom: 70px; } } @media (max-width: 991px){ #analysis .amp__form .ion-amp-form .ion-form-group input { padding-left: 45px; } } @media (max-width: 600px){ #analysis .amp__form .ion-amp-form .ion-form-group input { padding-bottom: 45px!important; } } @media (max-width: 399px){ #analysis .amp__form .ion-amp-form .ion-form-group input { padding-bottom: 70px!important; } } /* AMP ============================================================================= */ .amp__form { container: amp__form / inline-size; } .amp__form .ion-amp-form { display: flex; flex-wrap: wrap;justify-content: center;width: min(100%, 749px); gap: var(--gap); } .amp__form .ion-amp-form .ion-form-group {flex: 0 0 100%;width: 100%;margin-bottom: 0;position:relative;} .amp__form .ion-amp-form .ion-form-group label { display: none; } .amp__form .ion-amp-form .ion-form-group input { border-radius: var(--border-radius)!important;padding-left: 48px!important;} .amp__form .ion-amp-form .ion-form-group::before {content: '';position: absolute;top: 50%;left: 16px;width: 21px;height: 21px;background-image: url('/images/search-icon.svg');background-repeat: no-repeat;z-index: 1;transform: translateY(-50%);} .amp__form .ion-amp-form .ion-btn { font-size: 15px; } @container amp__form (min-width: 551px) { .amp__form .ion-amp-form { flex-wrap: nowrap; gap: 0; background-color: #fff; padding: 5px 4px 5px 16px; } .amp__form .ion-amp-form .ion-form-group { flex: auto; width: auto; } .amp__form .ion-amp-form .ion-form-group input { padding-left: 42px!important; } .amp__form .ion-amp-form .ion-form-group::before { } } @container amp__form (max-width: 1280px) { .amp__form .ion-amp-form { flex-wrap: nowrap; gap: 0; background-color: #fff; padding: 5px; } .amp__form .ion-amp-form .ion-form-group input {font-size: 14px;} } @container amp__form (max-width: 525px) { .amp__form .ion-amp-form .ion-form-group input {padding: 48px 7px calc(2em + 16px)!important;min-width: auto!important;text-align:center;} .amp__form .ion-amp-form .ion-form-group input::placeholder { white-space: pre-line; } .amp__form .ion-amp-form .ion-form-group::before { top: 16px; left: 50%; transform: translateX(-50%); } .amp__form .ion-btn { border-color: #fff!important; } } @container amp__form (282px <= width < 470px) { .amp__form .ion-amp-form .ion-form-group input {height: 5em!important;} } @container amp__form (max-width: 281px) { .amp__form .ion-amp-form .ion-form-group input {height: 7em!important;padding-top:48px!important;} } @media (max-width: 792px) { .amp__form .ion-amp-form { flex-wrap: wrap; text-align: center; gap: var(--gap);} .amp__form .ion-amp-form { flex-wrap: wrap; gap: var(--gap); background-color: transparent; } .amp__form .ion-amp-form .ion-form-group { flex: 0 0 100%; width: 100%; background-color: #fff; border-radius: var(--border-radius); } .amp__form .ion-amp-form .ion-btn { background-color: #fff; border: 1px solid #fff; color: var(--dark); border-radius: calc(var(--border-radius)); } } /* Home Meet ============================================================================= */ #manage-property { } #manage-property .item__num {color:var(--accent);font-size:80px;font-weight:bold;margin-bottom:10px;} #manage-property h3 {margin-top:0;color:var(--body-text);font-size:20px;} @media (max-width: 1199px) { #manage-property .boxes { display: flex; flex-wrap: wrap; gap: 24px; } #manage-property .box-item { flex: 0 0 calc(50% - 12px); } } /* Home Testimonials ============================================================================= */ #testimonials-banner { } #testimonialCarousel {width: min(100%, 1006px);margin: 60px auto 40px;padding: 84px 0;background: var(--dark) var(--gradient-diagonal-reverse);color: #fff;border-radius: var(--border-radius);overflow: hidden;} .testimonials__quote { fill: #fff; opacity: 0.2; } .testimonials__quote svg { width: 69px; height: 56px; aspect-ratio: 69/56; } .testimonials-container { width: min(65%, 650px); margin: 0 auto; padding: 25px 0 0; } .blockquote {display: flex;flex-direction: column;align-items: flex-start;gap: 6px;font-weight: 400;line-height: 1.5;} .blockquote__rating { color: var(--yellow); margin: 0 auto; } .blockquote-footer { color: #fff; font-family: var(--primary-font); font-size: min(1.25rem, 22px); font-style: normal; font-weight: 500; line-height: normal; margin: 0 auto; } .blockquote-footer::before { display: none; } @media (min-width: 768px) { .testimonial-controls { position: absolute; width: calc(100% - 30px); top: 50%; transform: translate(-50%, -50%); } .blockquote { font-size: min(1.5rem, 24px); } } .unwrap-testimonials .blockquote { margin: 50px 0; padding: 40px 0 15px 30px; border-left: 10px solid var(--gray); } .unwrap-testimonials .blockquote__rating { margin-left: 0; } #reviews-cta .form-container { margin:0; } #testimonials-banner .reviewmgr-stream { min-height: 285px; } @media (max-width: 852px) { #testimonials-banner .reviewmgr-stream { min-height: 700px; } } @media (max-width: 575px) { #testimonials-banner .reviewmgr-stream { min-height: 740px; } #testimonials-banner { padding-bottom: 20px } } @media (max-width: 399px) { #testimonials-banner .reviewmgr-stream { min-height: 880px; } } @media (max-width: 340px) { #testimonials-banner .reviewmgr-stream { min-height: 1050px; } } /* Home FAQs ============================================================================= */ /* Home Calc ============================================================================= */ /* Home Guarantees ============================================================================= */ #guarantees-banner { padding: 100px 0; } #home-guarantees { padding-bottom:400px;} body.guarantees-body #secondary-banner { justify-content: center; } .guarantees { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; justify-content: center; margin: 45px 0; font-size: var(--default-fs); font-weight: 400; line-height: 1.5; text-align: left; } .guarantee { background-color: #fff; border-radius: var(--border-radius); border: 1px solid var(--secondary); padding: 48px 44px; } .guarantee__title { color: var(--primary); font: 700 28px/1.3 var(--primary-font); letter-spacing: -0.56px; margin: 0 0 28px; } .guarantee__item p { margin: 0; } @media (min-width: 1611px){ #guarantees .guarantees { grid-template-columns: repeat(8, 1fr); } #guarantees .guarantee { grid-column: span 2;} #guarantees .guarantee:nth-last-child(2) { grid-column: 3 / span 2;} #guarantees .guarantee:last-child { grid-column: 5 / span 2;} } @media (max-width:1610px) { .guarantees { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { body.guarantees-body #secondary-banner { min-height: calc(var(--header-height) + 562px); } .container-fluid:has(.guarantees) { padding: 0; } .container-fluid:has(.guarantees) header { padding: 0 3vw; } .guarantees { display: flex; justify-content: start; overflow-x: scroll; padding: 0 3vw; } .guarantees .guarantee { flex: 0 0 300px; } .guarantees::-webkit-scrollbar { display: none; } } /* Home FAQs ============================================================================= */ @media (max-width: 500px){ #home-faq .btn-list .btn { width: 100%; max-width: 300px; } } /* ========================================================================== Guarantees Page ============================================================================= */ @media (min-width:1493px) { #guarantees .guarantee { flex: 1; } } #guarantees-page{ .guarantees { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); } .guarantee { display: flex; flex-direction: column; align-items: stretch; padding:32px; background: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); } .guarantee__title {margin: 0; padding-bottom: 1rem; } .guarantee p { margin:0; } @media (max-width: 768px) { .guarantees { grid-template-columns: 1fr; } .guarantee { aspect-ratio: auto; } } } /* Home Local Expertise ============================================================================= */ #local-expertise {position: relative; } #local-expertise .analysis-content {margin-top:-300px;} /* Home Blog ============================================================================= */ #home-blog { background: var(--gray);} #home-blog header:not(.post-header) { margin-bottom: 84px; text-align: center; } @media (min-width: 1500px) { #home-blog header:not(.post-header) { display: flex; flex-wrap: wrap; justify-content: space-between; text-align: start; gap: var(--gap); align-items: center; } .home-blog__header { flex: 0 0 376px; } .home-blog__header .display-1 { margin-bottom: 0; } .home-blog__content { flex: 0 1 895px; max-width: 65%; display: inline-flex; gap: 36px; } .home-blog__content p { flex: 0 1 634px; margin: 0; } } /* Inline Blog Post List ============================================================================= */ #blog-inline { display: grid; grid-template-columns: minmax(0, 1fr); } #blog-inline .blog-post {background: none;border: 0;padding-bottom: 36px;text-align: left;gap: 36px;} #blog-inline .blog-post .post-featured { padding-top: 58.79%; } #blog-inline .blog-post .post-title {font-size: 24px;color: var(--primary);font-family: var(--secondary-font);font-weight: 700;text-transform: none;margin: 44px 0 20px;} #blog-inline .blog-post .post-title a {color: inherit;} #blog-inline .blog-post .post-header { padding: 0; margin: 0 0 10px; } #blog-inline .blog-post .post-date { margin-top: 30px; text-transform: uppercase; color: var(--primary); font-family: var(--secondary-font); font-size: 18px; letter-spacing: .05em; } #blog-inline .blog-post .post-body { padding: 0; margin: 0; } #blog-inline .blog-post .post-body .post-content {font-size: var(--default-fs);letter-spacing: .05em;line-height: 1.66;} #blog-inline .blog-post .post-featured__video { transform: scale(1.15); } #blog-inline .blog-post .post-featured__video-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 60px; z-index: 2; transition: .5s; font-family: 'Font Awesome 6 Brands'; } #blog-inline .blog-post .post-featured:hover .post-featured__video { transform: scale(1.2); } #blog-inline .blog-post .post-featured:hover .post-featured__video-icon { color: #fff; transition: .5s; } #blog-inline .read-more {text-transform: capitalize;letter-spacing: normal;font-family: var(--secondary-font);text-align: left;justify-content: flex-start;color: var(--body-text)!important;} #blog-inline .read-more i { align-self: center; padding-left: 5px; } #blog-inline .read-more:hover { color: var(--accent)!important; } @media (min-width:1200px) { #blog-inline .blog-post .post-image { flex: 1 0 50%; } #blog-inline .blog-post--main .post-featured { box-shadow: 0px 10px 68px 0px rgba(0, 0, 0, 0.15); } #blog-inline .blog-post--side .post-featured { padding-top: 64.47%; } #blog-inline .blog-post--side .post-image { flex-grow: 0; } #blog-inline .blog-post--side .post-header {display: flex;flex-direction: column;gap: 0;} #blog-inline .blog-post--side .post-title {margin: 0;} #blog-inline .blog-post--side .post-body {} #blog-inline .blog-post--side .post-date { margin-top: 15px; margin-bottom: 0; } #blog-inline .blog-post--side .post-content { display: none; } #blog-inline .blog-post--side .read-more {} } @media (min-width:1200px) and (max-width:1400px) { #blog-inline .blog-post--side .post-title { font-size: 24px; } } @media (max-width:1199px) { #blog-inline .read-more--all { text-align: center; display: block; } }@media (min-width:992px) { #blog-inline {grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--side-count, 1), auto) 1fr; column-gap: 3rem; } #blog-inline .blog-post--main { grid-column: 1; grid-row: 1 / -1; align-self: start; } #blog-inline .blog-post--side { grid-column: 2; display: flex; align-items: center; } #blog-inline .blog-post .post-image { flex: 1 0 50%; } #blog-inline .blog-post--main .post-featured { box-shadow: 0px 10px 68px 0px rgba(0, 0, 0, 0.15); } #blog-inline .blog-post--side .post-featured { padding-top: 64.47%; } #blog-inline .blog-post--side .post-image { flex-grow: 0; } #blog-inline .blog-post--side .post-header { display: flex; flex-direction: column; gap: 0; } #blog-inline .blog-post--side .post-title { margin: 0; } #blog-inline .blog-post--side .post-date { margin-top: 15px; margin-bottom: 0; } #blog-inline .blog-post--side .post-content { display: none; } } @media (max-width: 991px){ #home-blog .container-fluid { padding:0;} #home-blog header { padding: 0 3vw; } #blog-inline { position: relative; display: flex; flex-wrap: nowrap; overflow-x: scroll; justify-content: start; gap: 24px; padding: 0 min(3vw, 20px); contain: inline-size; } #blog-inline::-webkit-scrollbar { display: none; } #blog-inline .blog-post { flex: 0 0 80%; background-color: #fff; border-radius: var(--border-radius);} #blog-inline .blog-post .post-body { padding: 0 1.2rem;} #blog-inline .blog-post .post-featured { border-radius: 12px 12px 0 0;} } @media (max-width: 991px){ #blog-inline .blog-post .post-title { font-size:20px; } } /* ========================================================================== Secondary/Inner Pages ============================================================================= */ .body-container { padding-top: 70px; padding-bottom: 70px; } .no-pb .body-container { padding-bottom: 0; } /* Split CTAs */ .side-content { } .side-content .ctas { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .side-content .ctas .cta { padding-left: 30px; padding-right: 30px; } .side-content .ctas .cta-content {padding: 32px 0; } .side-content .ctas .cta__title { font-size: 20px; } .side-content .ctas .cta__image, .side-content .ctas .cta__image img {display:none; } @media (max-width: 1500px){ .side-content .ctas .cta-content { padding: 20px 0; } } @media (min-width: 992px) { .side-content .ctas { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } @media (min-width: 992px) and (max-width: 1199px){ .side-content .ctas .cta { font-size: 18px; } } /* ===== Property Management Overview ===== */ #pm-process svg {height: 16px; width: 16px; color: var(--primary); margin: 0 4px 4px; } #pm-process a { font-weight: 600; } #pm-stats { text-align: center; margin-bottom: 3rem; .stats { justify-content: space-between; gap: 32px;} .stats__number { display: block; font-size: 42px; font-variant-numeric: tabular-nums; line-height: 1.2; } } @media (max-width: 1080px) { #pm-stats .stats { display: flex; flex-wrap: wrap; } #pm-stats .stats__item { flex: 0 0 calc(50% - 16px); } } @media (max-width: 991px) { #pm-stats .stats__item, #pm-stats .stats__item:last-child { flex: 1; } } @media (max-width: 575px) { #pm-stats { .stats { justify-content: space-between; gap: 20px;} .stats__number { font-size: 34px} } } @media (max-width: 768px) {} .pm-benefits { background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%); padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1rem, 4vw, 3.5rem); } .pm-benefits__inner { position: relative; max-width: 1180px; margin: 0 auto; display: flex; align-items: center; } .pm-benefits__media { width: 62%; border-radius: var(--border-radius); overflow: hidden;} .pm-benefits__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.4; } .pm-benefits__card { position: relative; z-index: 2; width: 46%; margin-left: -8%; background: #fff; border-radius: var(--border-radius); padding: clamp(1.75rem, 3vw, 2.75rem); box-shadow: var(--box-shadow); } .pm-benefits__title { margin: 0 0 1.75rem; font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; } .pm-benefits__list { list-style: none; margin: 0 0 2rem; padding: 0; } .pm-benefits__list li { position: relative; padding-left: 2.25rem; margin-bottom: 0.85rem; font-size: 1.0625rem; color: var(--pm-text); } .pm-benefits__list li::before { content: ""; position: absolute; left: 0; top: 0.05em; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center / 0.85rem no-repeat; } @media (max-width: 768px) { .pm-benefits__inner { flex-direction: column; } .pm-benefits__media { width: 100%; } .pm-benefits__card { width: 92%; margin-left: 0; margin-top: -3rem; } } /* ----- Media placeholder ----- */ .service-oversight__media { display:grid; place-items:center; height:100%; min-height:clamp(24rem, 50vw, 44rem); background-color:var(--gray-md); border-radius:var(--nhw-border-radius-lg); color:var(--gray-darker); } .service-oversight__img { width:100%; height:100%; object-fit:cover; border-radius:var(--nhw-border-radius-lg); } .service-oversight__media-label { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--secondary-font); font-size:max(1rem, 16px); } .service-oversight__media-icon::before { content:"\f03e"; font-family:var(--font-awesome); font-weight:900; font-size:1.5em; } /* ----- Pill list ----- */ .pill-list { list-style:none; margin:0 0 clamp(1.75rem, 4vw, 2.5rem); padding:0; display:flex; flex-direction:column; gap:clamp(.85rem, 1.5vw, 1.15rem); } .pill { display:flex; align-items:center; gap:1rem; padding:clamp(1rem, 2vw, 1.25rem) clamp(1.2rem, 2.5vw, 1.6rem); background-color:#fff; border-radius:100px; box-shadow:var(--box-shadow-sm); transition:transform .3s ease, box-shadow .3s ease; } .pill__icon { display:grid; place-items:center; flex:0 0 auto; width:clamp(2.5rem, 4vw, 3rem); height:clamp(2.5rem, 4vw, 3rem); border-radius:50%; background-color:rgba(var(--primary-rgb), .1); color:var(--primary); font-size:max(1.1rem, 18px); } .pill__icon::before { font-family:var(--font-awesome); font-weight:900; } .pill__text { font-family:var(--secondary-font); font-weight:600; color:var(--text-dark); } /* ----- Closing note ----- */ .service-oversight__note { max-width:min(62rem, 95vw); margin-top:clamp(2.5rem, 5vw, 4rem); color:var(--body-text); } .service-oversight__note p + p { margin-top:1rem; } /* ----- Responsive ----- */ @media (max-width:991px) { .service-oversight__media { min-height:clamp(18rem, 55vw, 26rem); } #service-oversight .row.gy-5 { --bs-gutter-y: 0; } #service-oversight .row { margin-bottom: 3rem; } #service-oversight .pill-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 0; } #service-oversight .col-lg-6:first-child .pill-list { margin-bottom: 1rem; } } @media (max-width: 499px) { .pill__text { font-size: 15px; font-weight: 400; } } /* ========================================================================== Owners Page ============================================================================= */ #owner-cta { background: linear-gradient(180deg, #fff 0%, var(--light) 100%); } #owner-cta > .container-fluid > h2 { position: relative; margin-bottom: clamp(40px, 4.5vw, 62px); font-size: clamp(32px, 4vw, 40px); font-weight: 600; } #owner-cta [class*="col-"]::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--secondary); transform: scaleY(0); transform-origin: top; transition: transform 0.35s ease; } #owner-cta .row { --bs-gutter-x: 0; flex-wrap: wrap; justify-content: center; gap: var(--gap); } #owner-cta [class*="col-"] { gap: 14px; position: relative; display: flex; flex-direction: column; align-items: center; flex: 1 1 calc((100% - 2 * var(--gap)) / 3); max-width: calc((100% - 2 * var(--gap)) / 3); width: auto; margin: 0; padding: clamp(36px, 3.5vw, 48px) clamp(20px, 2vw, 32px); background: #fff; border: 1px solid rgba(var(--primary-rgb), 0.08); border-radius: var(--border-radius); box-shadow: var(--box-shadow); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } #owner-cta [class*="col-"] h3 { margin: 0; color: var(--primary); font-size: clamp(18px, 1.8vw, 24px); } #owner-cta [class*="col-"] p { margin: 0; color: var(--body-text); } #owner-cta [class*="col-"] > div:last-child { margin-top: auto; width: 100%; padding-top: 8px; } #owner-cta [class*="col-"] .btn { width: 100%; --btn-bg: #fff; --btn-color: var(--primary); --btn-hover: var(--primary-rgb); border-color: var(--primary); } #owner-cta [class*="col-"] .btn::after { content: '\2192'; font-size: 1.15em; line-height: 1; transition: transform 0.3s ease; } #owner-cta [class*="col-"] .btn:is(:hover, :focus-visible)::after { transform: translateX(4px); } #owner-cta [class*="col-"]:hover, #owner-cta [class*="col-"]:focus-within { transform: translateY(-6px); box-shadow: 8px 12px 28px rgba(var(--primary-rgb), 0.14); } #owner-cta [class*="col-"]:hover::after, #owner-cta [class*="col-"]:focus-within::after { transform: scaleY(1); } @media (min-width: 1201px){ #owner-cta .row { flex-wrap: nowrap;} } @media (max-width: 1200px){ #owner-cta [class*="col-"] { flex: 1 1 calc((100% - 2 * var(--gap)) / 2); max-width: calc((100% - 2 * var(--gap)) / 2); } } @media (max-width: 991px) { #owner-cta [class*="col-"] { flex-basis: calc((100% - var(--gap)) / 2); max-width: calc((100% - var(--gap)) / 2); } } @media (max-width: 767px) { #owner-cta [class*="col-"] { flex-basis: 100%; max-width: 100%; } } .owner-boxes .box-item { justify-content: space-between; text-align: center; background-color: var(--gray); border-color: var(--gray); box-shadow: var(--box-shadow); } .owner-boxes .box-item .btn { margin-top: auto; } @media (max-width: 1199.98px) and (min-width: 992px) { .owner-boxes .box-item { flex: 0 0 calc(50% - (var(--gap) / 2)); } } #owner-guides .list-box__title::after {display:none; } #owner-guides .list-box__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; transition: 0.3s ease-out; transform-origin: left center; } #owner-guides .list-box:hover .list-box__link { transform: scale(1.058); } .resource-cards { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; padding: 0 2rem; margin: 0; } .resource-card { flex: 0 0 100%; background: #fff; border: 1px solid transparent; border-radius: var(--border-radius); transition: 0.4s; text-align: center;} .resource-card:hover { background: #fff; border-color: var(--dark); box-shadow: var(--box-shadow); } .resource-card__link { display: flex; flex-direction: column; gap: 1rem; height: 100%; padding: 32px 24px; color: inherit !important; } .resource-card__title { font-size: 24px; font-weight: 600; line-height: 1.2; margin:0; } .resource-card__text { margin: 0; padding-bottom: 1rem; color: var(--body-text); } .resource-card__btn { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: auto; } .resource-card__icon { width: 24px; height: 24px; flex-shrink: 0; } .resource-card__icon svg { width: 24px; height: 24px; } @media (min-width: 992px) { .resource-card { flex: 0 0 calc(50% - 12px); } } @media (min-width: 1200px) { .resource-card { flex: 0 0 calc(25% - 18px); } } @media (max-width: 575px) { .resource-cards { padding: 0; } } .comparison { overflow-x: auto; } .comparison__table { width: 100%; border-collapse: collapse; font-size: 1rem; } .comparison__table th, .comparison__table td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--border-color); text-align: center; } .comparison__table thead th { background: var(--primary); color: #fff; font-weight: 600; } .comparison__table tbody th[scope="row"] { font-weight: 600; background: var(--light); } /* Highlight the Professional Management column */ .comparison__table th:last-child, .comparison__table td:last-child { background: var(--light); font-weight: 600; } .comparison__table thead th:last-child { background: var(--secondary); color: var(--text-dark); } .comparison__table tbody tr:last-child th, .comparison__table tbody tr:last-child td { border-bottom: none; } /* Home Calc ============================================================================= */ #home-calculators { padding: 60px 0px; } #home-calculators header { margin-bottom: 60px; } .home-calc__wrapper { display: flex; justify-content: center; gap: 24px; } .home-calc__card { position: relative; flex: 0 1 342px; min-height: 364px; background-color: var(--light); border-radius: var(--nhw-border-radius); color: var(--body-text); padding: 36px; transition: 0.4s; overflow: hidden; z-index: 0; } .home-calc__card > svg { position: absolute; top: 0px; right: 0px; opacity: 0.05; z-index: -1; } .home-calc__card .rent-sell__icon { width: 171px; height: 206px; } .home-calc__card .roi__icon { width: 159px; height: 199px; } .home-calc__card .vacancy__icon { width: 171px; height: 187px; } .home-calc__content { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; height: 100%; } .home-calc__content span { font-size: 14px; text-transform: uppercase; } .home-calc__inner h3 { margin: 0px 0px 30px; } .home-calc__inner svg { position: relative; right: -6px; width: 24px; height: 24px; fill: var(--dark); } .home-calc__inner .btn { text-transform: none; } .home-calc__inner .btn:hover svg { fill: var(--text-light); } .home-calc__card:hover { background-color: var(--accent); } .home-calc__card:hover, .home-calc__card:hover h3 { color: #fff; } @media (max-width: 992px) { .home-calc__wrapper { flex-direction: column; } } /* ========================================================================== Tenants Page ============================================================================= */ /* Tenant CTA - "How Can We Help?" cards */ #tenant-cta { background: linear-gradient(180deg, #fff 0%, var(--light) 100%); } #tenant-cta > .container-fluid > h2 { position: relative; margin-bottom: clamp(40px, 4.5vw, 62px); font-size: clamp(32px, 4vw, 40px); font-weight: 600; } #tenant-cta [class*="col-"]::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--secondary); transform: scaleY(0); transform-origin: top; transition: transform 0.35s ease; } #tenant-cta .row { --bs-gutter-x: 0; flex-wrap: wrap; justify-content: center; gap: var(--gap); } #tenant-cta [class*="col-"] { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; flex: 1 1 calc((100% - 2 * var(--gap)) / 3); max-width: calc((100% - 2 * var(--gap)) / 3); width: auto; margin: 0; padding: clamp(36px, 3.5vw, 48px) clamp(20px, 2vw, 32px); background: #fff; border: 1px solid rgba(var(--primary-rgb), 0.08); border-radius: var(--border-radius); box-shadow: var(--box-shadow); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } #tenant-cta [class*="col-"] h3 { margin: 0; color: var(--primary); font-size: clamp(18px, 1.8vw, 24px); } #tenant-cta [class*="col-"] p { margin: 0; color: var(--body-text); } #tenant-cta [class*="col-"] > div:last-child { margin-top: auto; width: 100%; padding-top: 8px; } #tenant-cta [class*="col-"] .btn { width: 100%; --btn-bg: #fff; --btn-color: var(--primary); --btn-hover: var(--primary-rgb); border-color: var(--primary); } #tenant-cta [class*="col-"] .btn::after { content: '\2192'; font-size: 1.15em; line-height: 1; transition: transform 0.3s ease; } #tenant-cta [class*="col-"] .btn:is(:hover, :focus-visible)::after { transform: translateX(4px); } #tenant-cta [class*="col-"]:hover, #tenant-cta [class*="col-"]:focus-within { transform: translateY(-6px); box-shadow: 8px 12px 28px rgba(var(--primary-rgb), 0.14); } #tenant-cta [class*="col-"]:hover::after, #tenant-cta [class*="col-"]:focus-within::after { transform: scaleY(1); } @media (max-width: 991.98px) { #tenant-cta [class*="col-"] { flex-basis: calc((100% - var(--gap)) / 2); max-width: calc((100% - var(--gap)) / 2); } } @media (max-width: 767.988px) { #tenant-cta [class*="col-"] { flex-basis: 100%; max-width: 100%; } } /* Current Tenants - Quick Access cards */ #current-tenants .box-item { border-color: var(--primary);} #current-tenants .box-item--full { padding: clamp(40px, 5vw, 84px) clamp(24px, 6.5vw, 124px); } #current-tenants .box-item--full > header { text-align: center; margin-bottom: 32px; } #current-tenants .box-item--full > header h2 { margin: 0; } #current-tenants .boxes--white .box-item { justify-content: flex-start; gap: 16px; padding: clamp(28px, 3vw, 40px) clamp(20px, 2vw, 28px); text-align: center; border-radius: var(--border-radius); } #current-tenants .box-item .icon { width: 32px; height: 32px; color: var(--primary); fill: var(--primary); flex: 0 0 auto; padding: 18px; box-sizing: content-box; background: var(--light); border-radius: 50%; } #current-tenants .box-item h3 { margin: 4px 0 0; font-size: clamp(18px, 1.6vw, 22px); } #current-tenants .box-item p { margin: 0; color: var(--body-text); } #current-tenants .box-item > div:last-child { margin-top: auto; width: 100%; padding-top: 8px; } #current-tenants .box-item .btn { width: 100%; } @media (max-width: 991.98px) { #current-tenants .boxes--white { flex-direction: row; } #current-tenants .boxes--white .box-item { flex: 1 1 calc(50% - var(--gap)); } } @media (max-width: 575.98px) { #current-tenants .boxes--white .box-item { flex: 1 1 100%; } } #resources .box { position: relative; overflow: hidden; padding: 36px; border-radius:10px; } .resources-carousel .carousel-item a { min-height: 182px; background: var(--primary); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 32px 24px; font-size: 20px; font-weight: 600;border-radius:10px; } .resources-carousel .carousel-item a:hover { background: var(--secondary); } .resources-carousel .carousel-item a:hover svg { fill: var(--secondary); } .resources-carousel .carousel-item svg { height: 35px; width: 35px; fill: #fff; } .resources-carousel .carousel-item a div {font-size:16px;font-weight:400;} .resources-carousel-nav { position: absolute; right: 30px; top: -45px; display: flex; width: 60px; justify-content: space-between; } .resources-carousel-nav .carousel-control-next, .resources-carousel-nav .carousel-control-prev { position: static; height: 24px; width: 24px; color: var(--dark); opacity: 1; } .resources-carousel-nav .carousel-control-next:hover, .resources-carousel-nav .carousel-control-prev:hover { opacity: .7; } #resources .btn {height:auto;} @media (max-width: 1500px){ .resources-carousel-nav.d-xxl-none { display: flex!important;} } /* Box List */ .list-boxes { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; padding: 0; margin: 0; } .list-box { background: var(--light); color: var(--body-text); position: relative; flex: 0 0 100%; min-height: 182px; transition: 0.3s ease-out; border: 1px solid transparent; transition: 0.4s; border-radius: 12px; } .list-box:hover { background: #fff; border-color: var(--dark); box-shadow: var(--box-shadow); } .list-box__container { color: inherit!important; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 32px 24px; } .list-box__icon { width: 36px; height: 36px; } .list-box__title { display: flex; justify-content: space-between; align-items: flex-end; font-size: min(1.25rem, 20px); font-weight: 600; line-height: 1.2; } .list-box__title::after { content: '\e09f'; font-family: var(--font-awesome); font-size: 1.275rem; font-style: normal; font-weight: 500; -webkit-font-smoothing: antialiased; transition: 0.4s; transform: scale(0); transform-origin: center; } .list-box:hover .list-box__title::after { transform: scale(1); } .list-box__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin-top:12px} .list-box__link .read-more__icon { height: 14px; width: 14px; } @media (min-width: 768px) { .list-box { flex: 0 0 calc(33% - 17px); } } /* Lists with Divider */ .list-dividers { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; } .list-dividers__item { border-top: 1px solid var(--dark); } .list-divider-link { display: inline-flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; gap: 24px; font-size: min(1rem, 16px); width: 100%; height: 100%; padding: 24px 16px; color: var(--inherit); transition: 0.4s; align-items: center;} .list-divider-link:hover { background-color: var(--light); color: var(--inherit); } .list-divider-link__title { font-size: min(1.25rem, 20px); } .list-divider-link__btn { display: inline-flex; gap: 12px; align-items: center; background: var(--light); border-radius: 8px; padding: 12px 20px;} .list-divider-link:is(:hover, :focus-visible) .list-divider-link__btn { background: #fff; } .list-dividers__icon { width: 16px; height: 16px; fill: var(--dark); } @media (max-width: 767px) { .list-divider-link { flex-direction: column; align-items: flex-start; gap: 16px; } } @media (max-width: 620px) { .list-divider-link__title { font-size: 16px; } } /* Rental Requirements */ @media (min-width: 1400px){ #general-requirements img { max-height: 350px; } } /* ========================================================================== About Page ============================================================================= */ #about-header { } #about-header header > *:not(:last-child) { margin: 0 0 36px; } #about-header .display-1 { text-transform: none; font-size: 36px; } #about-header .display-1__sm { color: #888; } @media (max-width: 500px){ #about-header .display-1 { font-size: 24px; } } /* Mission & Vision */ #mission-vision .container-fluid { display: flex; justify-content: space-between; } #mission-vision .container-fluid > div { border-radius: 24px; } .mission-vision-item { background: var(--dark); padding: 36px; color: #fff; display: flex; align-items: start; justify-content: center; flex-direction: column; } .mission-vision-item h3 { color: inherit; color: #FFF; font-size: 36px; font-weight: 800; line-height: 56px; margin: 0 0 36px; } .mission-vision-image { overflow: hidden; } @media (min-width: 1200px){ .mission-vision-item { flex: 0 1 24%; } .mission-vision-image { flex: 0 1 50%; } } @media (max-width: 1199px){ #mission-vision .container-fluid { flex-direction: column; justify-content: center; gap: 36px; } .mission-vision-image { max-height: 450px; } } /* Core Values */ .core-values__container { display: grid; justify-content: center; gap: 66px clamp(24px, 3vw, 48px); padding: 48px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .core-values__item { display: flex; gap: 24px; } .core-values__item h3 { margin: 0 0 20px; color: var(--text-dark); font-size: 24px; font-weight: 700; line-height: 140%; } .core-values__item p { margin: 0; } .core-values__icon { flex-shrink: 0; height: 78px; width: 78px; border-radius: 50%; border: 1px solid var(--secondary); display: flex; align-items: center; justify-content: center; } .core-values__icon svg { height: 32px; width: 32px; } @media (min-width: 476px){ .core-values__container { grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); } } @media (max-width: 475px){ #core-values { text-align: center; } .core-values__item { flex-direction: column; align-items: center; max-width: 100%; } } /* Team */ .team { margin: 84px 0 100px; display: flex; justify-content: center; gap: 72px 5vw; flex-wrap: wrap; } .team-member { text-align: center; color: var(--text-dark); } .team-member { flex: 0 1 calc(33% - 5vw); min-width: 0;} .team-member__name { font-size: 22px; color: var(--body-text); line-height: 1.5; margin: 0; font-weight: 700; } .team-member__title { color: var(--body-text); text-align: center; font-size: 14px; font-weight: 400; line-height: 150%; text-transform: uppercase; } .team-member__title::after { content: ''; height: 1px; width: 100%; margin: 16px 0; display: block; background: rgba(17, 17, 17, 0.10);; } .team-member__image { position: relative; width: 100%; height: 100%; overflow: hidden; } .team-member__image img:not(.team-member__logo) { position: absolute; top: 0; left: 0; height: 100%; width: 100%; -o-object-position: top; object-position: top; transition: 0.3s; } .team-member__image:has(.team-member__logo) { background-color: var(--gray); } .team-member__logo { position: absolute; width: 50%; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 0; object-fit: contain; object-position: center; transition: 0.3s; } .team-member__bio { display: none; font-size: 16px; } .team-member__content p { margin-bottom: 20px; } .team-member__contact { margin: 15px 0 0; padding: 0; list-style: none; } .team-member__contact-item { margin: 0; } .team-member__contact-item a:not(:hover) { color: var(--text-dark); } .team-member__contact a[href^="mailto:"] { display: flex; justify-content: center; max-width: 100%; } .team-member__contact a[href^="mailto:"] i { flex: 0 0 auto; padding-top: 4px; } .team-member__contact-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .team-member__contact-item i { color: var(--primary); padding-right: 8px; } .team-member__btn { border: none; padding: 5px 20px; color: #fff; background: var(--gray-dark); border: 1px solid var(--gray-dark); font-size: 15px; border-radius: 20px; margin-top: 12px; outline: none!important; transition: .5s; } .team-member__btn:hover { background: #fff; color: var(--gray-dark); } .team-member:not(.bio-popup) .team-member__contact { box-shadow: none; width: 100%; padding: 0; margin: 10px 0 0; display: flex; gap: 0 20px; justify-content: center; flex-direction: column; } .team-member .team-member__contact i { padding-right: 8px; } .team-member:not(.bio-popup) .team-member__image { margin-bottom: 25px; padding-top: 100%; height: 0; border-radius: 50%; } .team-member:not(.bio-popup) .team-member__image img:not(.team-member__logo) { border-radius: 50%; } .team-member:not(.bio-popup):has([data-bs-toggle]) .team-member__image:hover { cursor: pointer; } .team-member:not(.bio-popup):has([data-bs-toggle]) .team-member__image::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%; border-radius: 50%; } .team-member:not(.bio-popup) .team-member__image:hover .circle-img::after { opacity: 1; } @media (max-width: 1440px){ .team-member__contact a[href^="mailto:"] { font-size: 14px; } } @media (max-width: 1199px){ .team-member { flex: 0 1 calc(50% - 5vw); max-width: 400px; } } @media (max-width: 768px){ .team-member { flex: 1 1 100%; max-width: 400px; } } /* Bio Popups */ #bioModal .modal-content { border-radius: 16px; } #bioModal .modal-close { position: relative; padding: 24px 16px; box-shadow: 0px 2px 12px 0px rgba(33, 61, 113, 0.25); } #bioModal .btn-close { border: none; outline: none; } #bioModal .modal-close button { position: relative; top: 0; right: 0; width: 34px; height: 24px; font-size: 16px; font-weight: 400; line-height: 150%; color: var(--dark); background: none!important; opacity: 1; transition: .5s; } #bioModal .modal-close button:hover { color: var(--dark)!important; } #bioModal .modal-body { padding: 0; } #bioModal button { position: absolute; right: 10px; top: 5px; z-index: 99; width: 30px; height: 30px; line-height: 30px; text-align: center; padding: 0; } .bio-popup { display: flex; padding: 0; animation-name: none; opacity: 1; overflow: hidden; animation: none!important; } .bio-popup .team-member__bio, .bio-popup .team-member__bio > *:not(.team-member__contact) { display: block; } .bio-popup .team-member__btn { display: none; } .bio-popup .team-member__image { margin: 0; animation: none!important; } .bio-popup .team-member__image .circle-img { position: relative; width: 100%; height: 100%; padding: 0; border-radius: 0; } .bio-popup .team-member__image img { border-radius: 0; } .bio-popup .team-member__name { font-size: 24px; } .bio-popup .team-member__title { color: var(--gray-dark); margin-bottom: 24px; } .bio-popup .team-member__bio { text-align: left; } .bio-popup .team-member__contact { display: none; } .bio-popup .team-member__contact:has(a) { display: flex; } .bio-popup .team-member__contact { flex-direction: column; position: absolute; align-items: center; justify-content: center; gap: 0 20px; z-index: 3; } .bio-popup .team-member__contact::before { display: none; } @media (min-width: 992px) { #bioModal .modal-xl { --bs-modal-width: 90vw; max-width: var(--bs-modal-width); } #bioModal .modal-content { height: 564px; flex-direction: row; max-height: 80vh; } .bio-popup { height: 100%; } .bio-popup .team-member__content { text-align: left; overflow: scroll; padding: 72px 60px 100px; flex: 1 1 auto; } .bio-popup .team-member__image { width: 33.33%; flex: 0 0 33.33%; } .bio-popup .team-member__title { text-align: left; } .bio-popup .team-member__title::after { margin-left: 0; } .team-member__contact { bottom: 40px; left: 40px; width: calc(33.33% - 80px); padding: 16px 24px; background: #fff; border-radius: 10000px; box-shadow: 0px 2px 12px 0px rgba(33, 61, 113, 0.25); } } @media (min-width: 1200px) { #bioModal .modal-xl { --bs-modal-width: 1024px; } } @media (max-width: 991px) { .team { grid-gap: 55px 5vw; } #bioModal { --bs-modal-margin: 24px; } #bioModal .modal-body { overflow: scroll; position: unset; } #bioModal .modal-close { text-align: right; } .bio-popup { flex-direction: column; position: unset; } .bio-popup .team-member__image { width: 300px; max-width: 100%; margin: 30px auto 0; padding: 0 15px; } .bio-popup .team-member__image .circle-img { padding-top: 100%; height: 0; width: 100%; border-radius: 50%; overflow: hidden; } .bio-popup .team-member__content { padding: 32px 32px 100px; } .bio-popup .team-member__contact { bottom: 0; left: 0; right: 0; padding: 16px 24px; background: #fff; box-shadow: 0px 2px 12px 0px rgba(33, 61, 113, 0.25); flex-direction: row; gap: 0 20px; flex-wrap: wrap; } } /* ========================================================================== Blog Page ============================================================================= */ .blog-header { margin-bottom: 50px; h1 a { color: var(--body-text); } h1 a:hover { color: var(--primary); } .breadcrumb { background: none; padding: 15px 0; margin: 0; position: relative; font-size: 15px; transform: translateY(-60px); font-family: var(--secondary-font); letter-spacing: .05em; } } /* Main Template */ .blog-container { .main-panel { } .side-panel { float: none; width: unset; } .index { display: block; margin: 30px 0; text-transform: uppercase; font-weight: bold; } } @media (min-width:992px) { .blog-header h1 { font-size: 42px; } .blog-container { display: flex; justify-content: space-between; align-items: flex-start; .main-panel { flex: 1 1 auto; margin-right: 105px; } .side-panel { flex: 0 0 350px; margin-right: auto; } } } /* Search */ #tipue_search_content { max-width: 100% !important; padding: 0 !important; padding: 0!important; max-width: 100%!important; font-weight: 400; .tipue_search_content_title { font-size: 24px; font-weight: 400; color: var(--primary); line-height: 1.15; } .tipue_search_content_title ~ .tipue_search_content_title { margin-top: 50px; } .tipue_search_content_url a { color: var(--primary)!important; font-size: 16px!important; font-weight: 400!important; } .tipue_search_content_text { font-weight: 400 !important; } } #tipue_search_input { background: var(--gray); padding: 10px; border-radius: 15px 0 0 15px; flex: 1 1 auto; border: 0; font-size: 16px; color: #000; } #tipue_search_input::-webkit-input-placeholder { } .tipue_search_group { display: flex; height: 30px; width: 100%; } .tipue_search_button { color: #fff; background: var(--primary); border: 1px solid var(--primary); border-radius: 0 15px 15px 0; flex: 0 0 37px; padding: 0 5px 0 0; transition: 0.4s; outline: none!important; } .tipue_search_button:hover { background: #fff; color: var(--primary); transition: 0.4s; } /* Side Panel ============================================================================= */ .blog-container .side-panel { background: #fff;border-radius: 0;border: 1px solid #000;padding: 40px;box-shadow: var(--box-shadow); } .panel-item { margin: 0 0 45px; } .panel__header { font-size: 15px; text-transform: uppercase; padding-bottom: 15px; margin: 0 0 20px; border-bottom: 1px solid #cccccc; letter-spacing: .1em; } .panel-item ul { list-style: none; padding: 0; margin: 0; } .panel-item a { } .panel-item a:hover { } .panel-item .social a:hover { color: #fff; } /* Blog Search */ .panel-item .tipue_search_group { display: flex; } .panel-item .tipue_search_group input { flex: 1 1 auto; background: #fff !important; padding: 10px !important; } .panel-item .tipue_search_group button { flex: 0 0 46px; } /* Recent */ .blog-recent-posts { } .recent-post-item { margin-bottom: 25px; } .recent-post__link { display: flex; justify-content: space-between; } .recent-post__thumbnail { position: relative; flex: 0 0 127px; height: 85px; overflow: hidden; margin-right: 20px; background: var(--dark); } .recent-post__thumbnail img { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; transition: 0.7s; } .recent-post__video { color: #fff; text-align: center; line-height: 85px; font-size: 50px; transition: 0.7s; } .recent-post__default { max-height: 60%; width: auto; height: auto; max-width: 80%; top: 50%!important; left: 50%!important; transform: translate(-50%, -50%); transition: 0.7s; filter: brightness(0) invert(1); } .recent-post__details { font-size: 14px; line-height: 1.2; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; font-family: var(--secondary-font); letter-spacing: .05em; } .recent-post__title { margin: 0 0 3px; } .recent-post__date { color: var(--gray-dark); font-size: 0.9em; margin-bottom: 0; } /* Recent - Hover Effects */ .recent-post__link:hover .recent-post__thumbnail { img, .recent-post__video { transform: scale(1.1); transition: 0.7s; } .recent-post__default { transform: translate(-50%, -50%) scale(1.1); transition: 0.7s; } } /* Categories */ .blog-category-list li { font-size: 15px; display: block; padding: 0px 10px; margin: 0 0 5px; } .blog-category-list li::before { content: '- '; } .blog-category-list li a { } /* Tags */ .blog-tag-list li { font-size: 14px; display: inline-block; padding: 8px 10px 7px; line-height: 1; margin-left: 1px; margin-bottom: 5px; border-radius: 3px; background: var(--primary); transition: 0.3s; border-bottom: 2px solid rgba(0,0,0,0.1); } .blog-tag-list li a { color: #fff; } .blog-tag-list li:hover { box-shadow: 1px 1px 5px rgba(0,0,0,0.35); transform: scale(1.01); transition: 0.3s; background: var(--primary); } /* Authors */ .blog-author-list { display: flex; flex-wrap: wrap; text-align: center; justify-content: space-around; } .blog-author-list li { flex: 0 0 80px; } .blog-author-list .author-image { height: 100px; width: 100px; margin: 0 auto 5px; border-radius: 50%; border: 3px solid var(--primary); background: #fff; padding: 5px; position: relative; overflow: hidden; } .blog-author-list .author-image img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: 0.7s; border: 5px solid #fff; border-radius: 50%; } .blog-author-list .author-image img:is([src*='favicon'], [src*='logo']) { filter: brightness(0); } .blog-author-list .author-name { font-size: 12px; letter-spacing: 0.025em; line-height: 1.1em; text-transform: none; } .blog-author-list li a:hover .author-image img { transition: 0.7s; max-width: 80%; transform: translate(-50%,-50%) scale(1.1); } /* Post ============================================================================= */ .blog-post { background: #fff; border: 0; } .blog-post .post-featured {position: relative;display: block;width: 100%;height: 0;padding-top: 56.25%;overflow: hidden;background: var(--primary);border-radius:var(--border-radius);} .blog-post .post-featured img, .blog-post .post-featured iframe { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; transition: 0.7s linear; } .blog-post .post-featured img.default { max-width: 70%; height: auto; width: auto; margin: 0 auto; top: 50%; left: 50%; transform: translate(-50%, -50%); filter: brightness(0) invert(1); } .blog-post .post-featured img:not(.default) { transform: scale(1); } .blog-post a.post-featured:hover img:not(.default) { transform: scale(1.025); transition: 0.7s ease; } .blog-post .post-header { padding: 30px 0 0; text-transform: lowercase; border: 0; margin: 0; } .blog-post .post-header .post-title { font-size: 32px; font-family: var(--primary-font); font-weight: 600; margin: 0 0 5px; padding: 0; border: 0; text-transform: none; color: var(--body-text); } .blog-post .post-header .post-date { font-size: 14px; color: var(--gray-dark); text-transform: uppercase; line-height: 1.1; margin-bottom: 25px; } .blog-post .post-body { padding: 5px 0 0; font-size: 18px; margin: 0; line-height: 1.66; } .blog-post .post-body h2 { font-size: 30px; margin: 35px 0 15px; } .blog-post .post-body h3 { font-size: 24px; letter-spacing: .05em; } .blog-post .post-body h4 {font-size: 20px;letter-spacing: normal;} .blog-post .post-footer { padding: 20px 0 35px; } .blog-post .post-footer h4 { font-size: 15px; text-transform: uppercase; margin: 0 0 20px; letter-spacing: .1em; } .blog-post .post-footer-share { text-align: right; } .blog-post .read-more {font-size: 18px;margin-top: 20px;display: flex;gap: 12px;align-items: center;justify-content: flex-start;font-weight: 500;text-align: right;letter-spacing: .1em;} .blog-post .read-more::after {font-size: .9em;} /* Post Author */ .blog-post .post-footer-author { margin-top: 30px; padding-top: 30px; border-top: 1px solid #ccc; } .blog-post .post-footer-author .author-image { position: relative; height: 130px; width: 130px; overflow: hidden; margin: 0 auto 30px; border-radius: 50%; border: 3px solid var(--primary); background: #fff; } .blog-post .post-footer-author .author-image img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; z-index: 1; border: 5px solid #fff; border-radius: 50%; } .blog-post .post-footer-author a:hover .author-image img { transition: 0.7s; max-width: 80%; transform: translate(-50%,-50%) scale(1.1); } .blog-post .post-footer-author .author-details { text-align: center; } .blog-post .post-footer-author .author-details .author-name { font-size: 18px; color: var(--body-text); text-transform: uppercase; margin: 0; } .blog-post .post-footer-author .author-details .author-title { font-size: 14px; color: var(--body-text); line-height: 1.1; text-transform: uppercase; margin-bottom: 15px; } .blog-post .post-footer-author .author-details .author-bio { display: none; } .blog-post .post-footer-author .author-details .author-bio, .author-bio-preview { font-size: 15px; color: var(--body-text); line-height: 1.1; } .blog-post .post-footer-author .author-details .author-bio > *:last-child { display: inline; } .blog-post .post-footer-author .author-details .author-bio-toggle { font-size: 13px; display: inline; color: var(--body-text); text-transform: uppercase; } @media (min-width:576px) { .blog-post .post-footer-author .author-image { float: left; margin: 5px 30px 10px 0; } .blog-post .post-footer-author .author-details { text-align: left; } } @media (max-width:575px) { .blog-post .post-header .post-title { font-size: 24px; } } /* Post List ============================================================================= */ .blog-post-list { } .blog-post-list .blog-post { margin-bottom: 30px; } .blog-post-list .post-body { padding: 0 0 35px; font-size: 18px; color: var(--body-text); line-height: 1.5; } .blog-post-list .blog-post .post-featured .default svg { position: absolute; top: 50%; left: 50%; max-width: 70%; transform: translate(-50%, -50%); } .blog-post-list .blog-post .post-featured .default #logo-text * { fill: #fff; } /* Split Blog Post List */ /* @media (min-width:768px) { .blog-post-list .blog-post { display: flex; } .blog-post-list .post-image { flex: 0 1 40%; min-width: 40%; padding: 30px 0 30px 30px; } .blog-post-list .post-featured { height: 100%; padding: 0; } .blog-post-list .post-content { flex: 1 1 auto; } .blog-post-list .post-body { padding-bottom: 30px; } } */ /* Blog Components — shared across Blog Content sites (v1.3) Reads each site's own variables (--primary, --secondary, --gray, --dark, --primary-font, --secondary-font, --border-color, --box-shadow) so it matches brand automatically. Install once per site, after its own CSS. */ .post-body { --blog-box-bg: var(--gray, #f3f3f3); --blog-box-text: #212529; --blog-accent: var(--primary, #333); --blog-accent-2: var(--secondary, var(--primary, #555)); --blog-heading-font: var(--secondary-font, inherit); --blog-muted: #c7cbd1; } /* Dark-themed sites keep these boxes' text dark even on a white global body */ .post-body :where(.blog-callout, .blog-toc, .blog-quote, .blog-cta) :where(p, span, ul, ol, li, h3, h4, strong, em, b, i) { color: var(--blog-box-text); } .blog-post .post-body { h2 { font-family: var(--blog-heading-font); font-size: 30px; text-transform: none !important; margin: 45px 0 15px; color: var(--dark, var(--blog-box-text)); } h3 { font-family: var(--blog-heading-font); font-size: 22px; text-transform: none !important; letter-spacing: .03em; margin: 30px 0 12px; } ul, ol { padding-left: 22px; } li { margin-bottom: 8px; } } /* Table of contents / jump nav */ .post-body .blog-toc { margin: 0 0 40px; color: var(--blog-box-text); } .post-body .blog-toc__title { font-family: var(--blog-heading-font); font-size: 20px; font-weight: 700; margin: 0 0 12px; color: var(--blog-box-text); } .post-body .blog-toc__list { list-style: decimal; margin: 0; padding-left: 20px; } .post-body .blog-toc__list li { margin-bottom: 8px; } .post-body .blog-toc__list a { color: var(--blog-box-text) !important; text-decoration: none; } .post-body .blog-toc__list a:hover, .post-body .blog-toc__list a:focus { color: var(--blog-accent); text-decoration: underline; } /* Circle-badge numbered list — e.g.
    ; resets also override a site's own ol.bubble */ .blog-post .post-body { ol.bubble { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0 !important; counter-reset: bubble-counter; li { counter-increment: bubble-counter; position: relative; font: inherit; text-transform: none; letter-spacing: normal; display: flex; gap: 10px; background: #fff; border: 1px solid var(--border-color, var(--blog-box-bg)); border-radius: 3px; padding: 8px 18px 8px 12px; margin: 0; color: var(--blog-box-text); } li::before { content: counter(bubble-counter); position: static; top: auto; left: auto; font-family: inherit; line-height: 1; text-align: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--blog-accent); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-top: 0; } li a { color: inherit; text-decoration: none; word-break: normal; overflow-wrap: anywhere; } li:is(:hover, :focus) { background-color: var(--blog-box-bg); transform: translateY(-5px); transition: .3s; box-shadow: var(--box-shadow, 0 4px 10px rgba(0,0,0,.12)); } li:is(:hover, :focus) a { text-decoration: none; } } } /* Key Takeaways + Stat callouts */ .post-body .blog-callout { background: var(--blog-box-bg); color: var(--blog-box-text); border-radius: 4px; padding: 28px clamp(20px, 3vw, 36px); margin: 0 0 40px; } .post-body .blog-callout--takeaways { border-left: 4px solid var(--blog-accent); } .post-body .blog-callout__title { font-family: var(--blog-heading-font); font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 12px; color: var(--blog-box-text); } .post-body .blog-callout__list { margin: 0; padding-left: 20px; } .post-body .blog-callout__list li { margin-bottom: 8px; } .post-body .blog-callout--stat { text-align: center; } .post-body .blog-callout__number { display: block; font-family: var(--blog-heading-font); font-size: 46px; font-weight: 700; line-height: 1; color: var(--blog-accent); } .post-body .blog-callout__description { display: block; font-size: 16px; margin-top: 8px; } /* Pull-quote */ .post-body .blog-quote { background: var(--blog-box-bg); color: var(--blog-box-text); border-left: 4px solid var(--blog-accent); border-radius: 4px; padding: 32px clamp(20px, 3vw, 44px); margin: 0 0 40px; font-size: 19px; font-style: italic; line-height: 1.5; } .post-body .blog-quote__footer { display: block; margin-top: 16px; font-family: var(--primary-font, inherit); font-size: 15px; font-style: normal; font-weight: 700; color: var(--blog-accent); } /* Hardcoded HTML/CSS bar chart (never depends on JS or an image loading) */ .post-body .blog-chart { margin: 0 0 40px; } .post-body .blog-chart__row { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .post-body .blog-chart__label { flex: 0 0 170px; font-size: 15px; } .post-body .blog-chart__track { flex: 1 1 auto; height: 28px; background: var(--blog-box-bg); border-radius: 3px; overflow: hidden; } .post-body .blog-chart__bar { height: 100%; background: var(--blog-accent); border-radius: 3px 0 0 3px; } .post-body .blog-chart__value { flex: 0 0 9.5em; text-align: right; font-size: 15px; font-weight: 700; } @media (max-width: 600px) { .post-body .blog-chart__row { flex-wrap: wrap; gap: 6px 12px; } .post-body .blog-chart__label { flex: 1 1 100%; } .post-body .blog-chart__value { flex: 0 0 auto; } } /* Bar chart, emphasis variant — add blog-chart--emphasis, then blog-chart__row--highlight on the row that matters */ .post-body .blog-chart--emphasis .blog-chart__bar { background: var(--blog-muted); } .post-body .blog-chart--emphasis .blog-chart__row--highlight .blog-chart__bar { background: var(--blog-accent); } .post-body .blog-chart--emphasis .blog-chart__row--highlight :is(.blog-chart__label, .blog-chart__value) { font-weight: 700; } /* Column chart — ordered periods (quarters, years); each bar's height is its % of the tallest value */ .post-body .blog-columns { display: flex; margin: 0 0 40px; } .post-body .blog-columns__col { flex: 1 1 0; min-width: 0; text-align: center; } .post-body .blog-columns__plot { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 200px; box-sizing: border-box; padding-top: 28px; border-bottom: 1px solid var(--border-color, #dcdfe3); } .post-body .blog-columns__value { font-size: 14px; font-weight: 700; line-height: 1.2; margin-bottom: 6px; white-space: nowrap; } .post-body .blog-columns__bar { flex: none; width: 24px; background: var(--blog-accent); border-radius: 4px 4px 0 0; } .post-body .blog-columns__label { display: block; margin-top: 8px; font-size: 14px; line-height: 1.3; } /* Share of a whole — the part that matters vs. the rest */ .post-body .blog-share { margin: 0 0 40px; } .post-body .blog-share__bar { display: flex; gap: 2px; height: 24px; } .post-body .blog-share__part { background: var(--blog-accent); border-radius: 4px 0 0 4px; } .post-body .blog-share__part--rest { background: var(--blog-muted); border-radius: 0 4px 4px 0; } .post-body .blog-share__legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; font-size: 15px; } .post-body .blog-share__key { display: inline-flex; align-items: center; gap: 8px; } .post-body .blog-share__key::before { content: ''; flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--blog-accent); } .post-body .blog-share__key--rest::before { background: var(--blog-muted); } /* Value vs. benchmark — one figure on a scale, with a reference line */ .post-body .blog-meter { margin: 0 0 40px; } .post-body .blog-meter__head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; font-size: 15px; } .post-body .blog-meter__value { font-weight: 700; white-space: nowrap; } .post-body .blog-meter__track { position: relative; height: 16px; background: var(--blog-box-bg); border-radius: 4px; } .post-body .blog-meter__fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--blog-accent); border-radius: 4px; } .post-body .blog-meter__marker { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--blog-box-text); } .post-body .blog-meter__marker span { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; } .post-body .blog-meter__scale { display: flex; justify-content: space-between; margin-top: 34px; font-size: 13px; } /* Donut / pie — part-to-whole, 2–4 ordered parts, darkest = first slice; add blog-donut--pie for a full pie. Very dark or very light brand colors need their own ramp: override --blog-d1 to --blog-d4 in the site's CSS */ .post-body .blog-donut { --blog-d1: color-mix(in srgb, var(--blog-accent) 50%, #000); --blog-d2: color-mix(in srgb, var(--blog-accent) 75%, #000); --blog-d3: var(--blog-accent); --blog-d4: color-mix(in srgb, var(--blog-accent) 70%, #fff); display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; margin: 0 0 40px; } .post-body .blog-donut__ring { position: relative; flex: none; width: 180px; height: 180px; border-radius: 50%; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 30px), #000 calc(100% - 29px)); mask: radial-gradient(farthest-side, transparent calc(100% - 30px), #000 calc(100% - 29px)); } .post-body .blog-donut__wrap { position: relative; flex: none; } .post-body .blog-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 13px; line-height: 1.3; padding: 0 44px; } .post-body .blog-donut__center strong { font-size: 26px; line-height: 1.1; } .post-body .blog-donut--pie .blog-donut__ring { -webkit-mask: none; mask: none; } .post-body .blog-donut--pie .blog-donut__center { display: none; } .post-body .blog-donut__legend { display: grid; gap: 10px; font-size: 15px; } .post-body .blog-donut__key { display: flex; align-items: center; gap: 10px; } .post-body .blog-donut__key::before { content: ''; flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--blog-d1); } .post-body .blog-donut__key--2::before { background: var(--blog-d2); } .post-body .blog-donut__key--3::before { background: var(--blog-d3); } .post-body .blog-donut__key--4::before { background: var(--blog-d4); } /* Featured stat + quote (hero callout) */ .post-body .blog-stat-feature { text-align: center; background: #fff; border: 1px solid var(--border-color, var(--blog-box-bg)); border-left: 4px solid var(--blog-accent); border-radius: 4px; padding: 32px clamp(20px, 3vw, 44px); margin: 0 0 40px; } .post-body .blog-stat-feature__number { display: block; font-family: var(--blog-heading-font); font-size: 56px; font-weight: 700; line-height: 1; color: var(--blog-accent); } .post-body .blog-stat-feature__label { display: block; margin-top: 10px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--blog-box-text); } .post-body .blog-stat-feature__quote { display: block; margin-top: 20px; font-style: italic; font-size: 18px; line-height: 1.5; color: var(--blog-box-text); } /* Stat grid — 4 columns; add blog-stat-grid--3 for 3 columns (e.g. 6 or 9 stats) */ .post-body .blog-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 40px; } .post-body .blog-stat-grid__item { background: var(--blog-box-bg); border-radius: 4px; padding: 22px 16px; text-align: center; } .post-body .blog-stat-grid__number { display: block; font-family: var(--blog-heading-font); font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--blog-accent); } .post-body .blog-stat-grid__label { display: block; margin-top: 6px; font-size: 14px; line-height: 1.3; color: var(--blog-box-text); } .post-body .blog-stat-grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 700px) { .post-body .blog-stat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .post-body .blog-stat-grid { grid-template-columns: 1fr; } } /* Additional Resources + CTA */ .post-body .blog-related__list { margin: 0 0 40px; padding-left: 20px; } .post-body .blog-related__list li { margin-bottom: 8px; } .post-body .blog-cta { background: var(--blog-box-bg); color: var(--blog-box-text); border-left: 4px solid var(--blog-accent); border-radius: 4px; padding: 28px clamp(20px, 3vw, 36px); margin: 40px 0; font-size: inherit; } .post-body .blog-cta > h3 { font-family: var(--blog-heading-font); margin: 0 0 10px; color: var(--blog-box-text); } .post-body .blog-cta > p { margin: 0 0 20px; } .post-body .blog-cta > p a { color: var(--blog-accent); } /* FAQ accordion — works with