/* GLOBAL */
/* ==== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');
html {
scroll-behavior: smooth;
}
body {
overflow-x: hidden;
}
#savecontent {
margin-top: -2px;
}
.anchor {
scroll-margin-top: 150px;
}
strong,
.font-weight-bold {
font-weight: bold;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: inherit;
font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
letter-spacing: -0.01em;
}
h1,
.h1 {
font-size: clamp(35px, 4.4vw, 46px);
}
h1.mega,
.h1.mega {
font-size: clamp(36px, 4.7vw, 70px);
}
h1.ultra,
.h1.ultra {
font-size: clamp(37px, 5.3vw, 95px);
}
h2,
.h2 {
font-size: clamp(32px, 4vw, 42px);
}
h3,
.h3 {
font-size: clamp(29px, 3.6vw, 37px);
}
h4,
.h4 {
font-size: clamp(26px, 3.2vw, 32px);
}
h5,
.h5 {
font-size: clamp(23px, 2.8vw, 27px);
}
h6,
.h6 {
font-size: clamp(20px, 2.4vw, 22px);
}
body {
font-size: clamp(15px, 2vw, 18px);
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.btn {
white-space: normal;
}
a:hover img,
a.bg-img:hover a.bg-image:hover {
opacity: .85;
}
#savecontent img {
max-width: 100% !important;
height: auto !important;
}
.rightfloat {
float: right;
margin: 0 0 .5rem 1rem;
width: 40%;
}
@media (max-width: 767px) {
.rightfloat {
float: none;
margin: 0 0 1rem 0;
width: 100%;
}
}
.btn-primary, .btn-info {
color: white !important;
}
.round {
border-radius: 12px;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
background-color: rgba(0, 0, 0, 0.9);
padding: 1rem;
background-size: 20px;
}
@media(min-width: 1600px) {
.container {
max-width: 1300px;
}
}
@media(min-width: 1600px) {
.container.container-wide {
width: 1500px !important;
max-width: 1500px !important;
}
}
.product-image {
background-size: cover !important;
min-height: auto !important;
padding-bottom: 75%;
}
#savecontent form label {
font-weight: bold;
}
#savecontent form .checkbox-group label,
#savecontent form .radio-group label {
font-weight: normal;
}
.formbuilder-required {
color: red;
}
.text-right.addToCart {
text-align: left !important;
}
.blog-detail-page {
background: var(--light);
}
.blog-detail-page .blog {
border-radius: 12px;
padding: 1.5rem;
background: white;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}
.blog-detail-page .blog h4 {
margin-top: 1rem;
}
form li p {
margin-bottom: 0;
}
form label {
font-weight: bold;
}
form .checkbox-group label,
form .radio-group label {
font-weight: normal;
}
.formbuilder-checkbox,
.formbuilder-radio {
margin-bottom: 4px;
}
/* ============================================================
GRADIENT UTILITIES — subtle tonal gradients on the BS4 colors
============================================================ */
.primary-gradient {
background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 78%, white) 0%, var(--primary) 50%, color-mix(in srgb, var(--primary) 70%, black) 100%);
color: #fff;
}
.success-gradient {
background: linear-gradient(135deg, color-mix(in srgb, var(--success) 90%, white) 0%, var(--success) 55%, color-mix(in srgb, var(--success) 88%, black) 100%);
color: #fff;
}
.danger-gradient {
background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 90%, white) 0%, var(--danger) 55%, color-mix(in srgb, var(--danger) 88%, black) 100%);
color: #fff;
}
.info-gradient {
background: linear-gradient(135deg, color-mix(in srgb, var(--info) 90%, white) 0%, var(--info) 55%, color-mix(in srgb, var(--info) 88%, black) 100%);
color: #fff;
}
.light-gradient {
background: linear-gradient(180deg, #ffffff 0%, var(--light, #f3f4f6) 100%);
}
.primary-success-gradient {
background: radial-gradient(ellipse 45% 80% at 18% 28%, color-mix(in srgb, var(--success) 70%, transparent) 0%, transparent 65%), radial-gradient(ellipse 50% 90% at 82% 78%, color-mix(in srgb, var(--success) 60%, transparent) 0%, transparent 65%), color-mix(in srgb, var(--primary) 90%, black);
color: #fff;
}
/* ============================================================
POLISHED BUTTONS — subtle hover lift + brand-color glow
============================================================ */
.btn-primary,
.btn-primary-alt,
.btn-info,
.btn-success,
.btn-danger {
font-weight: 700;
letter-spacing: .25px;
transition: box-shadow .2s ease, filter .2s ease;
}
.btn-primary {
box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}
.btn-primary:hover {
box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 45%, transparent);
filter: brightness(1.08);
}
.btn-primary-alt {
box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-alt) 35%, transparent);
}
.btn-primary-alt:hover {
box-shadow: 0 8px 20px color-mix(in srgb, var(--primary-alt) 50%, transparent);
filter: brightness(1.05);
}
.btn-info {
box-shadow: 0 4px 12px color-mix(in srgb, var(--info) 30%, transparent);
}
.btn-info:hover {
box-shadow: 0 8px 20px color-mix(in srgb, var(--info) 45%, transparent);
filter: brightness(1.08);
}
.btn-success {
box-shadow: 0 4px 12px color-mix(in srgb, var(--success) 30%, transparent);
}
.btn-success:hover {
box-shadow: 0 8px 20px color-mix(in srgb, var(--success) 45%, transparent);
filter: brightness(1.08);
}
.btn-danger {
box-shadow: 0 4px 12px color-mix(in srgb, var(--danger) 30%, transparent);
}
.btn-danger:hover {
box-shadow: 0 8px 20px color-mix(in srgb, var(--danger) 45%, transparent);
filter: brightness(1.08);
}
.btn-primary:active,
.btn-primary-alt:active,
.btn-info:active,
.btn-success:active,
.btn-danger:active {
filter: brightness(.96);
}
/* ============================================================
HOME PROS DENVER — HOMEPAGE
============================================================ */
/* Hero ===== */
#oms_hp_hero {
background: var(--primary, #0b4178);
}
#oms_hp_hero .hp-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(11, 65, 120, .92), rgba(11, 65, 120, .65)), url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1800&q=80') center/cover no-repeat;
z-index: 0;
}
#oms_hp_hero .hp-slogan-em {
font-style: italic;
color: var(--primary-alt);
}
#oms_hp_hero .hp-trust-row {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
#oms_hp_hero .hp-trust {
display: inline-flex;
align-items: center;
font-size: .9rem;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .22);
padding: .35rem .85rem;
border-radius: 999px;
color: #fff;
white-space: nowrap;
backdrop-filter: blur(6px);
}
#oms_hp_hero .hp-trust i {
color: var(--primary-alt);
}
/* Eyebrow ===== */
.hp-eyebrow {
text-transform: uppercase;
letter-spacing: 2px;
font-size: .85rem;
font-weight: 700;
margin-bottom: .5rem;
}
/* Neighbors — recently serviced line ===== */
#oms_hp_neighbors .hp-recent {
font-size: .95rem;
line-height: 1.7;
display: inline-block;
padding: .75rem 1.25rem;
background: var(--light, #f8f9fa);
border-radius: 999px;
}
/* Specialized Divisions credentials pills ===== */
.hp-credentials {
gap: .75rem;
}
.hp-credential-pill {
display: inline-flex;
align-items: center;
background: #fff;
border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
padding: .55rem 1.1rem;
border-radius: 999px;
font-size: .95rem;
color: #495057;
}
/* Division Cards ===== */
.hp-division-card {
display: block !important;
position: relative;
overflow: hidden;
text-decoration: none !important;
color: inherit !important;
border-top: 5px solid;
transition: box-shadow .25s ease;
}
.hp-division-card.hp-fire {
border-top-color: var(--danger);
}
.hp-division-card.hp-sprink {
border-top-color: var(--success);
}
#oms_hp_divisions a.hp-division-card,
#oms_hp_divisions a.hp-division-card:hover,
#oms_hp_divisions a.hp-division-card:focus,
#oms_hp_divisions a.hp-division-card:active {
background: #fff !important;
background-color: #fff !important;
}
.hp-division-card.hp-fire:hover {
box-shadow: 0 .8rem 1.8rem color-mix(in srgb, var(--danger) 35%, transparent) !important;
}
.hp-division-card.hp-sprink:hover {
box-shadow: 0 .8rem 1.8rem color-mix(in srgb, var(--success) 35%, transparent) !important;
}
.hp-division-card .hp-division-tag {
position: absolute;
top: -2px;
right: 1.5rem;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: .35rem .85rem;
border-radius: 0 0 8px 8px;
transition: color .25s ease;
}
.hp-division-card:hover .hp-division-tag {
color: var(--primary-alt) !important;
}
.hp-division-card .hp-arrow {
font-weight: 700;
}
.hp-division-card .hp-arrow i {
margin-left: .5rem;
transition: transform .25s ease;
}
.hp-division-card:hover .hp-arrow i {
transform: translateX(5px);
}
.hp-division-card.hp-fire .hp-arrow {
color: var(--danger);
}
.hp-division-card.hp-sprink .hp-arrow {
color: var(--success);
}
.hp-division-card .hp-mascot {
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .18));
transition: transform .35s ease;
}
@media(min-width: 576px) and (max-width:991px) {
.hp-division-card .hp-mascot {
margin-top: 20px
}
}
.hp-division-card.hp-fire:hover .hp-mascot {
transform: scale(1.07) rotate(-4deg);
}
.hp-division-card.hp-sprink:hover .hp-mascot {
transform: scale(1.07) rotate(4deg);
}
@media (min-width: 992px) {
.hp-division-card .hp-mascot {
max-height: 280px !important;
}
}
/* Division card responsive sizing — only get fancy at xl */
@media (min-width: 1200px) {
.hp-division-card h3.h4-xl {
font-size: clamp(26px, 3.2vw, 32px);
}
}
/* Why-card icon circle (used in cred band default size) ===== */
.hp-icon-circle {
width: 56px;
height: 56px;
font-size: 1.4rem;
}
/* Why-card — floating medallion treatment ===== */
#oms_hp_why .col-md-6.col-lg-4 {
margin-bottom: 3rem;
}
.hp-why-card {
position: relative;
padding: 44px 1.5rem 1.5rem;
border-top: 4px solid var(--info);
}
.hp-why-card .hp-icon-circle {
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%);
width: 64px;
height: 64px;
font-size: 1.5rem;
border: 3px solid #fff;
z-index: 2;
}
.hp-icon-circle {
border: 3px solid #fff;
box-shadow: 0 6px 14px rgba(0, 0, 0, .15);
}
/* Credibility band ===== */
#oms_hp_hero .hp-cred-band {
position: relative;
z-index: 2;
background-color: rgba(255, 255, 255, 0.775) !important;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 2px solid white;
}
#oms_hp_hero .hp-cred-tile {
padding: .25rem 0;
}
@media (min-width: 768px) {
#oms_hp_hero .hp-cred-tile + .hp-cred-tile {
border-left: 1px solid #e9ecef;
}
}
/* ============================================================
HOME PROS DENVER — ABOUT PAGE
============================================================ */
/* About hero ===== */
#oms_hp_about_hero {
background: var(--primary, #0b4178);
}
#oms_hp_about_hero .hp-about-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(11, 65, 120, .92), rgba(11, 65, 120, .7)), url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1800&q=80') center/cover no-repeat;
z-index: 0;
}
/* Who-we-are mascot ===== */
#oms_hp_about_who .hp-about-mascot {
max-height: 420px;
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .15));
}
/* Specialization cards ===== */
.hp-spec-card {
transition: box-shadow .25s ease;
}
.hp-spec-card:hover {
box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .1) !important;
}
.hp-spec-icon {
width: 48px;
height: 48px;
font-size: 1.15rem;
}
/* Promise items ===== */
.hp-promise-item h6 {
font-size: 1.05rem;
}
.hp-promise-divider {
border: 0;
border-top: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
opacity: .7;
margin-left: 2rem;
margin-right: 2rem;
}
@media (min-width: 992px) {
.hp-promise-divider {
margin-left: 4rem;
margin-right: 4rem;
}
}
/* Mission statement card ===== */
.hp-mission-card {
background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 85%, white) 0%, var(--primary) 55%, color-mix(in srgb, var(--primary) 78%, black) 100%);
border-top: 4px solid var(--primary-alt);
box-shadow: 0 .75rem 2rem color-mix(in srgb, var(--primary) 25%, transparent);
padding: 3rem 2rem;
}
#oms_hp_about_mission .hp-mission-quote {
font-size: 2.6rem;
display: block;
margin-bottom: .5rem;
opacity: .95;
}
#oms_hp_about_mission .hp-mission-text {
font-size: clamp(20px, 2.4vw, 28px);
line-height: 1.55;
color: #fff;
font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
letter-spacing: -0.01em;
}
/* At-a-Glance items ===== */
.hp-glance-item {
font-size: .95rem;
}
/* ============================================================
HOME PROS DENVER — FIREPLACE SERVICES PAGE
============================================================ */
/* Fire hero ===== */
#oms_hp_fire_hero {
background: var(--primary, #0b4178);
}
#oms_hp_fire_hero .hp-fire-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(11, 65, 120, .92), rgba(11, 65, 120, .7)), url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1800&q=80') center/cover no-repeat;
z-index: 0;
}
/* Red mascot ===== */
#oms_hp_fire_neighbors .hp-fire-mascot {
max-height: 420px;
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .15));
}
/* Fire logo on restoration section ===== */
#oms_hp_fire_restoration .hp-fire-logo {
max-width: 340px;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .12));
}
/* Service items (white cards) ===== */
.hp-service-item {
transition: box-shadow .25s ease;
}
#oms_hp_fire_services .hp-service-item:hover {
box-shadow: 0 .6rem 1.4rem color-mix(in srgb, var(--danger) 18%, transparent) !important;
}
/* Problem items (compact rows) ===== */
.hp-problem-item {
font-size: .95rem;
}
/* Fireplace Safety card ===== */
.hp-fire-safety-card {
background: color-mix(in srgb, var(--danger) 5%, white);
border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
border-top: 4px solid var(--danger);
}
/* Pricing cards (fireplace) ===== */
.hp-pricing-card {
position: relative;
background: color-mix(in srgb, #000 4%, white);
border: 1px solid color-mix(in srgb, #000 15%, transparent);
border-top: 4px solid #adb5bd;
}
.hp-pricing-card-member {
background: color-mix(in srgb, var(--danger) 4%, white);
border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
border-top: 4px solid var(--danger);
}
.hp-pricing-card-flat {
border-top: 1px solid color-mix(in srgb, #000 15%, transparent);
}
.hp-pricing-badge {
position: absolute;
top: 0;
right: 1.5rem;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: .35rem .85rem;
border-radius: 0 0 8px 8px;
}
.hp-safety-icon {
font-size: 3rem;
display: block;
margin-bottom: .75rem;
}
/* ============================================================
HOME PROS DENVER — SPRINKLER SERVICES PAGE
============================================================ */
/* Sprink hero ===== */
#oms_hp_sprink_hero {
background: var(--primary, #0b4178);
}
#oms_hp_sprink_hero .hp-sprink-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(11, 65, 120, .92), rgba(11, 65, 120, .7)), url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1800&q=80') center/cover no-repeat;
z-index: 0;
}
/* Sprinkler logo on expertise section ===== */
#oms_hp_sprink_expertise .hp-sprink-logo {
max-width: 340px;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .12));
}
/* Green mascot ===== */
#oms_hp_sprink_neighbors .hp-sprink-mascot {
max-height: 420px;
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .15));
}
/* Service items — success-tinted hover ===== */
#oms_hp_sprink_services .hp-service-item:hover {
box-shadow: 0 .6rem 1.4rem color-mix(in srgb, var(--success) 18%, transparent) !important;
}
/* Sprinkler closing callout card ===== */
.hp-sprink-callout-card {
background: color-mix(in srgb, var(--success) 5%, white);
border: 1px solid color-mix(in srgb, var(--success) 20%, transparent);
border-top: 4px solid var(--success);
}
/* Member pricing card — success-tinted on sprinkler page */
#oms_hp_sprink_pricing .hp-pricing-card-member {
background: color-mix(in srgb, var(--success) 4%, white);
border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
border-top: 4px solid var(--success);
}
/* ============================================================
HOME PROS DENVER — BLOG PAGE
============================================================ */
/* Blog hero ===== */
#oms_hp_blog_hero {
background: var(--primary, #0b4178);
}
#oms_hp_blog_hero .hp-blog-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(11, 65, 120, .92), rgba(11, 65, 120, .7)), url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1800&q=80') center/cover no-repeat;
z-index: 0;
}
/* ============================================================
HOME PROS DENVER — CONTACT PAGE
============================================================ */
/* Contact hero ===== */
#oms_hp_contact_hero {
background: var(--primary, #0b4178);
}
#oms_hp_contact_hero .hp-contact-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(11, 65, 120, .92), rgba(11, 65, 120, .7)), url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1800&q=80') center/cover no-repeat;
z-index: 0;
}
/* Contact info list — anchor color reset on hover */
#oms_hp_contact_body .hp-contact-list a:hover {
color: var(--primary) !important;
text-decoration: none;
}
/* Contact form — first 4 text fields half-width on sm+ (First/Last Name, Email, Phone) */
@media (min-width: 576px) {
.hp-contact-form form {
display: flex;
flex-wrap: wrap;
column-gap: 1rem;
}
.hp-contact-form form > .form-group {
width: 100%;
}
.hp-contact-form form > .form-group-1,
.hp-contact-form form > .form-group-2,
.hp-contact-form form > .form-group-3,
.hp-contact-form form > .form-group-4 {
width: calc(50% - .5rem);
}
}
/* PAGE SPECIFIC */
/* FOOTER */