:root { /* Brand: primary #025BB6 · accent #D27C29 · gray #7A7A7A */ --primary: #165bb6; --primary-d: #124e9c; --navy: #103f74; --navy-2: #155cad; --blue: #165bb6; --blue-bright: #2f86d6; --aqua: #7fbcf0; --ink: #2b2f36; --slate: #7a7a7a; --mist: #f3f7fb; --line: #e2e9f0; --white: #ffffff; --cta: #d27c29; --cta-dark: #b8661c; --gold: #f2b033; --r-sm: 10px; --r-md: 16px; --r-lg: 26px; --shadow-sm: 0 4px 18px rgba(11, 42, 74, .08); --shadow-md: 0 18px 48px rgba(11, 42, 74, .16); --shadow-lg: 0 30px 80px rgba(11, 42, 74, .28); --maxw: 1200px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; font-family: 'Open Sans', system-ui, sans-serif; color: var(--ink); background: var(--white); line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: 'Oswald', Impact, sans-serif; font-weight: 600; line-height: 1.06; margin: 0; letter-spacing: .4px; } h2 { text-transform: uppercase; letter-spacing: 1px; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); } .eyebrow.light { color: var(--aqua); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: 'Open Sans'; font-weight: 600; font-size: .95rem; letter-spacing: .02em; padding: 16px 30px; border-radius: 999px; cursor: pointer; border: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; white-space: nowrap; } .btn svg { width: 18px; height: 18px; } .btn-cta { background: var(--cta); color: #fff; box-shadow: 0 10px 26px rgba(244, 121, 31, .38); } .btn-cta:hover { background: var(--cta-dark); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(244, 121, 31, .46); } .btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); backdrop-filter: blur(6px); } .btn-ghost:hover { background: rgba(255, 255, 255, .22); transform: translateY(-2px); } .nav-cta .btn-ghost { background: #fff; color: var(--navy); border-color: var(--line); } .nav-cta .btn-ghost:hover { background: var(--mist); border-color: var(--blue); color: var(--blue); transform: translateY(-2px); } .btn-navy { background: var(--navy); color: #fff; } .btn-navy:hover { background: var(--navy-2); transform: translateY(-2px); box-shadow: var(--shadow-md); } :focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; } .hero :focus-visible, .offerband :focus-visible, .options :focus-visible, .final :focus-visible, footer :focus-visible { outline-color: var(--aqua); } /* HubSpot wraps every global partial in its own div. A sticky element can only travel within its parent, and that wrapper is exactly as tall as the header, so .topstick had nowhere to stick and scrolled straight off. Taking the wrapper out of the layout box tree makes .topstick a child of again, which is what the rule below was written for. Scoped to the header so the footer and quote-form wrappers are untouched. */ [data-global-resource-path$="partials/header.html"] { display: contents; } .topstick { position: sticky; top: 0; z-index: 9999; } .topbar { background: var(--navy); color: #dbe7f4; font-size: .82rem; } .topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap; } .topbar .loc { display: flex; align-items: center; gap: .5rem; letter-spacing: .02em; } .topbar .phones { display: flex; align-items: center; gap: 18px; } .topbar .phones a { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: #fff; transition: color .2s ease; } .topbar .phones a:hover, .topbar .phones a:focus-visible { color: var(--aqua); } .topbar .phones span.lbl { color: #9fb6cf; font-weight: 500; } .topbar svg { width: 14px; height: 14px; opacity: .85; } .ticker { background: linear-gradient( 90deg, var(--cta), var(--cta-dark) ); color: #fff; text-align: center; font-size: .85rem; font-weight: 600; letter-spacing: .02em; padding: 8px 16px; } .ticker strong { font-weight: 700; } header.nav { position: relative; z-index: 90; background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .3s ease; } header.nav.scrolled { box-shadow: var(--shadow-sm); } .nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; padding-bottom: 14px; } .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .brand img { height: 46px; width: auto; } .brand .bt { font-family: 'Oswald'; font-weight: 700; font-size: 1.35rem; color: var(--navy); line-height: 1; } .brand .bt small { display: block; font-family: 'Open Sans'; font-weight: 500; font-size: .58rem; letter-spacing: .28em; color: var(--blue); text-transform: uppercase; margin-top: 3px; } .navlinks { display: flex; align-items: center; gap: 30px; } .navlinks a { font-size: .9rem; font-weight: 500; color: var(--ink); position: relative; transition: color .2s ease; } .navlinks a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--blue); transition: width .25s ease; } .navlinks a:hover, .navlinks a:focus-visible { color: var(--blue); } .navlinks a:hover::after, .navlinks a:focus-visible::after { width: 100%; } .navlinks .navitem { position: relative; display: flex; align-items: center; } .navlinks .navitem > a { display: inline-flex; align-items: center; gap: 4px; } .navlinks .navitem > a .caret { width: 14px; height: 14px; transition: transform .2s ease; } .navlinks .navitem:hover > a .caret, .navlinks .navitem:focus-within > a .caret { transform: rotate(180deg); } .dropdown { position: absolute; top: calc(100% + 16px); left: 0; min-width: 440px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; z-index: 200; } .navlinks .navitem:hover .dropdown, .navlinks .navitem:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; } .dropdown a { font-size: .84rem; font-weight: 500; color: var(--ink); padding: 9px 12px; border-radius: 8px; white-space: nowrap; } .dropdown a::after { content: none !important; } .dropdown a:hover, .dropdown a:focus-visible { background: #eef5fc; color: var(--blue); } .nav-cta { display: flex; align-items: center; gap: 14px; } .nav-cta .btn { padding: 12px 24px; font-size: .88rem; } .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; } .menu-toggle svg { width: 28px; height: 28px; color: var(--navy); } section { padding: 92px 0; } .sec-head { max-width: 720px; margin-bottom: 54px; } .sec-head.center { margin-left: auto; margin-right: auto; text-align: center; } .sec-head .eyebrow { margin-bottom: 16px; display: block; } .sec-head h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); color: var(--navy); margin-bottom: 18px; } .sec-head p { color: #5a5a5a; font-size: 1.05rem; max-width: 68ch; } .sec-head.center p { margin-left: auto; margin-right: auto; } footer { background: #0c2c4f; color: #a8c2dd; font-size: .88rem; padding: 64px 0 28px; } .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.5fr 1.15fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .1); } .foot-brand .bt { display: block; height: 58px; width: auto; } .foot-contactline { display: flex; align-items: flex-start; gap: 9px; color: #9db4cc; line-height: 1.5; margin-bottom: 10px; font-size: .9rem; word-break: break-word; } .foot-contactline svg { width: 16px; height: 16px; color: var(--aqua); flex-shrink: 0; margin-top: 3px; } .foot-contactline a { color: #9db4cc; transition: color .2s ease; } .foot-contactline a:hover, .foot-contactline a:focus-visible { color: var(--aqua); } .foot-social { display: flex; gap: 10px; margin-top: 16px; } .foot-social a { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center; color: #9db4cc; transition: background .2s ease, color .2s ease; flex-shrink: 0; } .foot-social a:hover, .foot-social a:focus-visible { background: var(--aqua); color: var(--navy); } .foot-social svg { width: 17px; height: 17px; } .foot-brand p { margin-top: 16px; margin-bottom: 26px; max-width: 280px; line-height: 1.6; } .foot-col h4 { color: #fff; font-family: 'Open Sans'; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 18px; font-weight: 600; } .foot-col a { display: block; color: #9db4cc; padding: 5px 0; transition: color .2s ease; } .foot-col a:hover, .foot-col a:focus-visible { color: var(--aqua); } .foot-phone { display: flex; align-items: center; gap: 9px; color: #fff; font-weight: 600; margin-bottom: 10px; } .foot-phone svg { width: 16px; height: 16px; color: var(--aqua); } .foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; flex-wrap: wrap; gap: 12px; font-size: .8rem; color: #94afc7; } .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity: 1; transform: none; } .topstick { position: sticky; top: 0; z-index: 9999; width: 100%; } .topbar, .ticker, header.nav { position: relative; } header.nav { z-index: 90; } @media (max-width: 1000px) { .navlinks { display: none; } .menu-toggle { display: block; } /* Mobile navigation */ .navlinks.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; z-index: 200; background: #fff; flex-direction: column; gap: 0; padding: 10px 24px 20px; box-shadow: var(--shadow-md); border-bottom: 1px solid var(--line); } .navlinks.open a { padding: 14px 0; border-bottom: 1px solid var(--line); width: 100%; min-height: 44px; display: flex; align-items: center; } .navlinks.open .navitem { flex-direction: column; align-items: stretch; width: 100%; } .navlinks.open .navitem > a .caret { display: none; } .navlinks.open .dropdown { position: static; opacity: 1; visibility: visible; transform: none; display: flex; flex-direction: column; min-width: 0; border: none; box-shadow: none; border-radius: 0; padding: 0 0 0 16px; gap: 0; } .navlinks.open .dropdown a { font-size: .86rem; padding: 12px 0; border-bottom: 1px solid var(--line); min-height: 44px; display: flex; align-items: center; white-space: normal; border-radius: 0; } .brand img { height: 38px; } } @media (max-width: 768px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 640px) { .wrap { padding: 0 16px; } section { padding: 56px 0; } /* Topbar */ .topbar .loc { display: none; } .topbar .wrap { flex-wrap: nowrap; justify-content: flex-end; } .topbar .phones { gap: 12px; } .topbar .phones a { min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; } /* Ticker */ .ticker { font-size: .8rem; padding: 8px 12px; } /* Navigation */ .brand img { height: 34px; } .nav-cta .btn { padding: 10px 18px; font-size: .82rem; } .menu-toggle { padding: 8px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } /* Footer */ .foot-grid { grid-template-columns: 1fr; gap: 28px; } .foot-bottom { flex-direction: column; align-items: flex-start; gap: 8px; } } @media (max-width: 380px) { .wrap { padding: 0 14px; } .topbar .phones { flex-direction: column; gap: 4px; align-items: flex-end; } .topbar .phones a { font-size: .75rem; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; transition: none; } } /* ========================================================= HUBSPOT FORM (moved out of partials/quote-form.html so the service, careers and warranty form sections share it instead of triplicating it) ========================================================= */ /* Restyle the default HubSpot form to match the .form-card design. Every field stacks full-width, one per row — HubSpot's own default form CSS floats and 50%-widths any field inside a form-columns-2 fieldset (scoped to this form's render-instance ID, which beats a plain class selector), so float/width need !important here to win. */ .form-card fieldset.form-columns-2, .form-card fieldset.form-columns-1, careers and warranty form sections share it instead of triplicating it) ========================================================= */ /* Restyle the default HubSpot form to match the .catalog-form design. Every field stacks full-width, so float/width need !important here to win. */ .catalog-form fieldset.form-columns-2, .catalog-form fieldset.form-columns-1 { margin: 0 0 14px; max-width: none; }.form-card .hs-form-field, .catalog-form .hs-form-field { margin-bottom: 14px; }.form-card fieldset.form-columns-2 .hs-form-field, .catalog-form fieldset.form-columns-2 .hs-form-field { width: 50% !important; }.form-card .hs-form-field label, .catalog-form .hs-form-field label { color: var(--navy); display: block; font-family: "Open Sans"; font-size: .78rem; font-weight: 600; letter-spacing: .02em; margin-bottom: 6px; }.form-card .hs-form-field .hs-form-required, .catalog-form .hs-form-field .hs-form-required { color: var(--cta); }.form-card .hs-input, .catalog-form .hs-input { background: #fbfdff; border: 1.5px solid var(--line); border-radius: var(--r-sm); box-sizing: border-box; color: var(--ink); font-family: "Open Sans"; font-size: .92rem; min-height: 48px; padding: 13px 15px; transition: .2s; width: 100%; }.form-card select.hs-input, .catalog-form select.hs-input { background-image: none; }.form-card .hs-input:focus, .catalog-form .hs-input:focus { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(22, 91, 182, .15); outline: 2px solid var(--blue); outline-offset: 0; }.form-card .hs-input.error, .catalog-form .hs-input.error { border-color: #d64545; }.form-card .hs-error-msgs, .catalog-form .hs-error-msgs { list-style: none; margin: 6px 0 0; padding: 0; }.form-card .hs-error-msgs label, .catalog-form .hs-error-msgs label { color: #d64545; font-family: "Open Sans"; font-size: .78rem; font-weight: 500; }.form-card .legal-consent-container, .catalog-form .legal-consent-container { color: #5e6e80; font-size: .72rem; line-height: 1.5; margin-top: 14px; text-align: center; }.form-card .hs_submit .actions, .catalog-form .hs_submit .actions { margin-top: 6px; }.form-card input[type="submit"], .form-card .hs-button, .catalog-form input[type="submit"], .catalog-form .hs-button { align-items: center; background: var(--cta); border: none; border-radius: 999px; box-shadow: 0 10px 26px rgba(244, 121, 31, .38); color: #fff; cursor: pointer; display: inline-flex; font-family: "Open Sans"; font-size: .95rem; font-weight: 600; justify-content: center; letter-spacing: .02em; padding: 16px 30px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; white-space: nowrap; width: 100%; }.form-card input[type="submit"]:hover, .form-card .hs-button:hover, .catalog-form input[type="submit"]:hover, .catalog-form .hs-button:hover { background: var(--cta-dark); box-shadow: 0 16px 34px rgba(244, 121, 31, .46); transform: translateY(-2px); }.form-card .submitted-message, .catalog-form .submitted-message { color: var(--navy); font-family: "Open Sans"; font-size: 1.05rem; line-height: 1.5; padding: 20px 0; text-align: center; } /* ========================================================= CTA BAND (was duplicated across ~46 per-page stylesheets; defined here so new pages do not add another copy) ========================================================= */ .ctaband { background: linear-gradient( 135deg, var(--navy), var(--navy-2) 55%, var(--primary) ); color: #fff; text-align: center; padding: 92px 0; } .ctaband .eyebrow { color: var(--aqua); } .ctaband h2 { font-size: clamp(2rem, 4vw, 3rem); color: #fff; margin-bottom: 16px; } .ctaband p { color: #e7f0fa; max-width: 60ch; margin: 0 auto 28px; font-size: 1.05rem; } .ctaband .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } /* Catalog download form inside a CTA band */ .ctaband .catalog-form { max-width: 640px; margin: 0 auto; text-align: left; } .ctaband .catalog-form .hs-form-field label { color: #e7f0fa; } /* HubSpot renders 3-field rows as fieldset.form-columns-3, which the rules above never covered — the fields collapsed onto each other. */ .form-card fieldset.form-columns-3, .catalog-form fieldset.form-columns-3 { margin: 0 0 14px; max-width: none; } .form-card fieldset.form-columns-3 .hs-form-field, .catalog-form fieldset.form-columns-3 .hs-form-field { width: 33.333% !important; padding-right: 10px; box-sizing: border-box; } .form-card fieldset.form-columns-3 .hs-form-field:last-child, .catalog-form fieldset.form-columns-3 .hs-form-field:last-child { padding-right: 0; } /* Catalog band: wide enough for three fields side by side, stacking on narrow screens */ .ctaband .catalog-form { max-width: 900px; margin: 0 auto; text-align: left; } .ctaband .catalog-form .hs-form-field > label { color: #e7f0fa; } .ctaband .catalog-form .hs_submit .actions { text-align: center; } @media (max-width: 720px) { .catalog-form fieldset.form-columns-3 .hs-form-field, .catalog-form fieldset.form-columns-2 .hs-form-field { width: 100% !important; padding-right: 0; } } /* ---------- Quote-form partial: baseline ---------- partials/quote-form.html is a global partial on every page, but its entire style block (.final, .final-bg, .final-copy, .form-card and friends) lived only in the per-page stylesheets -- 18 rules, none of them here. Any template loading global.css alone rendered the CTA with no dark background, no grid, no card, and an unsized .assure svg, leaving white text on white. Per-page stylesheets load after this file, so their copies still win and the existing 50 pages are unchanged. */ .final { position: relative; overflow: hidden; background: linear-gradient(120deg, #103f74, var(--primary)); color: #fff; } .final-bg { position: absolute; inset: 0; z-index: 0; } .final-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; } .final .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; } .final-copy { min-width: 0; } .final-copy .eyebrow { color: var(--aqua); } .final-copy h2 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); color: #fff; margin: 14px 0 18px; } .final-copy p { color: #e7f0fa; font-size: 1.05rem; font-weight: 400; margin-bottom: 28px; max-width: 58ch; } .final-copy .assure { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; } .final-copy .assure li { display: flex; align-items: center; gap: 12px; font-size: .96rem; color: #e4eefb; } .final-copy .assure svg { width: 20px; height: 20px; color: var(--aqua); flex-shrink: 0; } .form-card { min-width: 0; background: #fff; border-radius: var(--r-lg); padding: 38px 34px; box-shadow: var(--shadow-lg); color: var(--ink); } .form-card h3 { font-size: 1.8rem; color: var(--navy); margin-bottom: 6px; } .form-card .fc-sub { font-size: .9rem; color: var(--slate); margin-bottom: 24px; } .form-card .btn { width: 100%; margin-top: 6px; } .form-card .privacy { font-size: .72rem; color: #5e6e80; margin-top: 14px; line-height: 1.5; text-align: center; } @media (max-width: 1000px) { .final .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; } } @media (max-width: 640px) { .form-card { padding: 28px 22px; } } /* Centred call-to-action under a section's content. The theme had no such utility -- .sec-head.center only centres headings. */ .sec-cta { display: flex; justify-content: center; margin-top: 44px; } @media (max-width: 700px) { .sec-cta { margin-top: 32px; } .sec-cta .btn { width: 100%; } } /* ---------- Award marquee ---------- The badge set is rendered twice in the markup and the track shifts -50%, so the loop has no visible seam. Pauses on hover and on focus-within so a keyboard user can reach anything inside it. */ .awardstrip { background: var(--white); padding: 44px 0 52px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .awardstrip .lab { display: block; text-align: center; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); font-weight: 600; margin-bottom: 30px; } .award-viewport { overflow: hidden; /* fade the edges so badges enter and leave rather than being cut off */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .award-track { display: flex; align-items: center; gap: 64px; width: max-content; animation: award-scroll 55s linear infinite; } .awardstrip:hover .award-track, .awardstrip:focus-within .award-track { animation-play-state: paused; } .award-track img { height: 150px; width: auto; flex-shrink: 0; object-fit: contain; } /* Three copies in the markup; shifting exactly one copy width keeps two copies covering the viewport at all times, so there is never a gap on the right. */ @keyframes award-scroll { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } } @media (max-width: 700px) { .awardstrip { padding: 34px 0 40px; } .award-track { gap: 40px; animation-duration: 38s; } .award-track img { height: 105px; } } /* Motion is decorative here -- hold the track still and let it wrap instead. */ @media (prefers-reduced-motion: reduce) { .award-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 28px; } .award-viewport { -webkit-mask-image: none; mask-image: none; } }