used to be ; they are now
*/
.hts-alert-title {
font-family: Karla, sans-serif;
color: inherit;
margin: 0;
}
/* ---------- Home hero: responsive ![]()
(srcset + WebP) -------------------
The slides used a CSS background image; they now contain a that
fills .banner-bg the same way background-size: cover did. */
#home-banner.slider-banner {
position: relative;
z-index: 0; /* keeps slick's slide z-indexes (998/999) inside the banner */
}
#home-banner.slider-banner .banner-slider .banner-slide .banner-bg .hts-hero-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center center;
}
/* White slide titles sit on a bright sky photo; a soft shadow keeps them readable */
#home-banner.slider-banner .banner-slider .banner-slide .banner-title h2 {
text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
/* Pause / play control for the auto-advancing slideshow (WCAG 2.2.2) */
.hts-banner-pause {
position: absolute;
right: 16px;
bottom: 16px;
z-index: 1000;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 2px solid rgba(255, 255, 255, .85);
border-radius: 50%;
background: rgba(0, 0, 0, .45);
color: #fff;
font-size: 14px;
line-height: 1;
cursor: pointer;
transition: background-color .2s ease;
}
.hts-banner-pause:hover,
.hts-banner-pause:focus {
background: rgba(0, 0, 0, .7);
}
.hts-banner-pause:focus-visible {
outline: 3px solid #fff !important;
outline-offset: 2px;
}
.hts-banner-pause .fa-play,
.hts-banner-pause[aria-pressed="true"] .fa-pause {
display: none;
}
.hts-banner-pause[aria-pressed="true"] .fa-play {
display: inline-block;
}
/* Stop the slow background drift when paused or when the visitor prefers less motion */
#home-banner.is-paused .banner-slider .banner-bg {
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
#home-banner .banner-slider .banner-bg {
transform: none !important;
}
}
/* ---------- Breadcrumbs (Views/Shared/_Breadcrumbs.cshtml) ----------------
Default: a slim bar under the header (pages without a title banner, e.g. Privacy).
Pages that start with the teal .page-title-wrap banner get the trail overlaid
at the banner's top-left instead (see the :has() rules below). */
.hts-breadcrumbs {
background: var(--hts-surface, #f6f8fa);
border-bottom: 1px solid var(--hts-border-soft, #e5e7e9);
font: 400 13px/1.4 Karla, sans-serif;
}
.hts-breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
margin: 0;
padding: 10px 0;
color: var(--hts-text, #4a4f55);
}
.hts-breadcrumbs__list li {
display: inline-flex;
align-items: center;
margin: 0;
}
.hts-breadcrumbs__list li + li::before {
content: "\203A";
content: "\203A" / "";
margin: 0 8px;
font-size: 16px;
line-height: 1;
color: var(--hts-muted, #6b7178);
}
.hts-breadcrumbs__list a {
color: #0b6f8e;
text-decoration: underline;
text-underline-offset: 2px;
}
.hts-breadcrumbs__list a:hover,
.hts-breadcrumbs__list a:focus {
color: var(--hts-ink, #272725);
}
.hts-breadcrumbs__list [aria-current="page"] {
color: var(--hts-ink, #272725);
font-weight: 700;
}
/* Below 992px the template's header is fixed (56px tall) and covers the top of the page */
@media (max-width: 991.98px) {
.hts-breadcrumbs {
margin-top: 56px;
}
}
/* Touch devices at 992px+ also get the fixed header (RD Navbar adds this class) */
html.rd-navbar-fixed-linked .hts-breadcrumbs {
margin-top: 56px;
}
/* Overlay variant: a small pill on the title banner. Takes no space in the flow. */
html body .hts-breadcrumbs:has(~ .page-title-wrap) {
position: relative;
z-index: 3;
height: 0;
margin: 0;
background: none;
border: 0;
}
html body .hts-breadcrumbs:has(~ .page-title-wrap) .container {
position: absolute;
top: 16px;
left: 0;
right: 0;
}
@media (max-width: 991.98px) {
html body .hts-breadcrumbs:has(~ .page-title-wrap) .container {
top: 66px;
}
}
html.rd-navbar-fixed-linked body .hts-breadcrumbs:has(~ .page-title-wrap) .container {
top: 66px;
}
.hts-breadcrumbs:has(~ .page-title-wrap) .hts-breadcrumbs__list {
display: inline-flex;
padding: 6px 14px;
border-radius: 999px;
background: rgba(0, 40, 52, .65); /* keeps white text >= 4.5:1 on the mint/teal banner */
color: #fff;
}
.hts-breadcrumbs:has(~ .page-title-wrap) .hts-breadcrumbs__list a,
.hts-breadcrumbs:has(~ .page-title-wrap) .hts-breadcrumbs__list a:hover,
.hts-breadcrumbs:has(~ .page-title-wrap) .hts-breadcrumbs__list a:focus,
.hts-breadcrumbs:has(~ .page-title-wrap) .hts-breadcrumbs__list [aria-current="page"] {
color: #fff;
}
.hts-breadcrumbs:has(~ .page-title-wrap) .hts-breadcrumbs__list li + li::before {
color: rgba(255, 255, 255, .85);
}
.hts-breadcrumbs:has(~ .page-title-wrap) .hts-breadcrumbs__list a:focus-visible {
outline: 2px solid #fff !important;
outline-offset: 2px;
}
/* Fixed header at 992px+ (touch devices): the template puts the banner title only
66px from the top, which is where the trail sits, so move the title down a little. */
@media (min-width: 992px) {
html.rd-navbar-fixed-linked .hts-breadcrumbs ~ .page-title-wrap .page-title {
margin-top: 44px !important;
}
}
/* ---------- Homepage: About "at a glance" facts --------------------------- */
.hts-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 14px;
max-width: 1000px;
margin: 32px auto 0;
padding: 0;
text-align: center;
}
.hts-facts__item {
background: #fff;
border: 1px solid var(--hts-border-soft, #e5e7e9);
border-radius: 12px;
padding: 16px 14px;
}
.hts-facts dt {
font: 700 12px/1.3 Karla, sans-serif;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--hts-muted, #6b7178);
margin: 0 0 6px;
}
.hts-facts dd {
font: 700 17px/1.35 Karla, sans-serif;
color: var(--hts-ink, #272725);
margin: 0;
}
@media (max-width: 575px) {
.hts-facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 24px;
}
.hts-facts__item {
padding: 12px 10px;
}
.hts-facts__item:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.hts-facts dd {
font-size: 15px;
}
}
/* ---------- Homepage: "Get started" section ------------------------------- */
.hts-get-started .hts-start__title {
font: 700 30px/1.25 Karla, sans-serif !important;
letter-spacing: 0 !important;
color: var(--hts-ink, #272725);
margin: 0 0 10px !important;
}
.hts-start__lead {
font-size: 16px;
line-height: 1.6;
color: var(--hts-text, #4a4f55);
margin: 0 0 22px;
}
.hts-start__options {
list-style: none;
margin: 0 0 22px;
padding: 0;
}
.hts-start__options li + li {
margin-top: 12px;
}
.hts-start__option {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: #fff;
border: 1px solid var(--hts-border-soft, #e5e7e9);
border-radius: 12px;
color: var(--hts-text, #4a4f55) !important;
text-decoration: none !important;
transition: border-color .2s ease, box-shadow .2s ease;
}
.hts-start__option:hover,
.hts-start__option:focus {
border-color: var(--hts-primary, #1298c1);
box-shadow: 0 8px 20px rgba(18, 152, 193, .12);
}
.hts-start__option:focus-visible {
outline: 3px solid #2b6cb0;
outline-offset: 2px;
}
/* GTM click triggers read the id/data-* on the link; let clicks on the inner spans fall through */
.hts-start__option * {
pointer-events: none;
}
.hts-start__icon {
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 50%;
background: #e3f3f8;
color: var(--hts-primary-dark, #0e7fa2);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 19px;
}
.hts-start__text {
flex: 1 1 auto;
display: block;
font-size: 14.5px;
line-height: 1.5;
}
.hts-start__text strong {
display: block;
font: 700 17px/1.35 Karla, sans-serif;
color: var(--hts-ink, #272725);
margin-bottom: 2px;
}
.hts-start__chevron {
flex: 0 0 auto;
font-size: 13px;
color: var(--hts-primary-dark, #0e7fa2);
}
.hts-start__call {
padding: 18px 20px;
background: #fff;
border: 1px dashed var(--hts-border, #d5dbe0);
border-radius: 12px;
}
.hts-start__call-title {
font: 700 16px/1.4 Karla, sans-serif;
color: var(--hts-ink, #272725);
margin: 0 0 8px;
}
.hts-start__call-title .fa {
color: var(--hts-primary-dark, #0e7fa2);
margin-right: 6px;
}
.hts-start__call ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 15px;
line-height: 1.7;
color: var(--hts-text, #4a4f55);
}
.hts-start__call a {
color: var(--hts-primary-dark, #0e7fa2);
font-weight: 700;
text-decoration: underline;
}
.hts-start__hours {
font-size: 13.5px;
line-height: 1.5;
color: var(--hts-muted, #6b7178);
margin: 8px 0 0;
}
/* Compact version of the contact form card */
.hts-get-started .hts-card {
padding: 32px;
}
.hts-get-started .hts-form-header {
margin-bottom: 20px;
}
.hts-get-started .hts-form-header .hts-title {
font-size: 24px !important;
}
.hts-get-started .hts-form textarea,
.hts-get-started .hts-form textarea.form-control {
min-height: 110px;
}
.hts-get-started .hts-trust {
margin: 4px 0 20px;
}
/* The CARF badge is wrapped in (WebP), so size the flex item instead of the img */
.hts-trust picture {
flex: 0 0 48px;
line-height: 0;
}
@media (max-width: 991px) {
.hts-get-started .hts-start {
margin-bottom: 8px;
}
}
@media (max-width: 767px) {
.hts-get-started .hts-card { padding: 24px 18px; }
.hts-get-started .hts-start__title { font-size: 26px !important; }
}
/* ---------- Homepage: FAQ ------------------------------------------------- */
.hts-faq {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 30px;
}
.hts-faq__item {
background: #fff;
border: 1px solid var(--hts-border-soft, #e5e7e9);
border-radius: 12px;
padding: 22px 24px;
}
.hts-faq__q {
font: 700 19px/1.35 Karla, sans-serif !important;
letter-spacing: 0 !important;
color: var(--hts-ink, #272725);
margin: 0 0 10px !important;
}
.hts-faq__a {
font-size: 16px;
line-height: 1.65;
color: var(--hts-text, #4a4f55);
margin: 0;
}
.hts-faq-cta {
margin-top: 30px;
}
@media (max-width: 991px) {
.hts-faq { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
.hts-faq__item { padding: 18px; }
.hts-faq__q { font-size: 18px !important; }
}