/*-------------------------------------------------------------- ⚠️ DO NOT REMOVE This file exists for WordPress + GitHub Updater. Runtime CSS is loaded from /battleplantheme-site/dist/. ---------------------------------------------------------------- Theme Name: Battle Plan Web Design Theme URI: https://battleplanwebdesign.com/ Author: Glendon Guttenfelder Author URI: https://battleplanwebdesign.com Description: The Battle Plan Web Design Theme Version: 2026.37.0 Text Domain: battleplan Github Theme URI: https://github.com/battleplanweb/battleplantheme */ @charset "utf-8"; /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # CSS Variables # Base - Typography - Links # Components - Fancy Lists - Icons & Social Media - Media - Captions - Coupon - SVG - Chat Modules # Mobile Styles /*-------------------------------------------------------------- # CSS Variables --------------------------------------------- */ :root { --font-primary: Helvetica, Arial, Verdana, sans-serif; --font-secondary: var(--font-primary); --font-tertiary: var(--font-secondary); --font-text: "Open Sans", sans-serif; --white: rgba(255, 255, 255, 1); --lightest-grey: rgba(225, 225, 225, 1); --light-grey: rgba(200, 200, 200, 1); --medium-grey: rgba(130, 130, 130, 1); --dark-grey: rgba(60, 60, 60, 1); --darkest-grey: rgba(30, 30, 30, 1); --black: rgba(0, 0, 0, 1); --white-lowest: rgba(255, 255, 255, 0.1); --white-low: rgba(255, 255, 255, 0.25); --white-med-low: rgba(255, 255, 255, 0.37); --white-med: rgba(255, 255, 255, 0.5); --white-med-high: rgba(255, 255, 255, 0.62); --white-high: rgba(255, 255, 255, 0.75); --white-highest: rgba(255, 255, 255, 0.9); --black-lowest: rgba(0, 0, 0, 0.1); --black-low: rgba(0, 0, 0, 0.25); --black-med-low: rgba(0, 0, 0, 0.37); --black-med: rgba(0, 0, 0, 0.5); --black-med-high: rgba(0, 0, 0, 0.62); --black-high: rgba(0, 0, 0, 0.75); --black-highest: rgba(0, 0, 0, 0.9); --accent-color: var(--black); --accent-border: 1px solid var(--black); --accent-background: var(--white-high); --warning: rgba(255, 0, 0, 1); --anon-icon: var(--accent-color); --anon-icon-bg: var(--accent-background); --text-color: var(--dark-grey); --link-color: var(--text-color); --link-hover-color: var(--text-color); --link-bg: transparent; --link-hover-bg: transparent; --link-decoration: none; --link-hover-decoration: none; --font-base-5: 6.25%; --font-base-4: calc(var(--font-base-5) * 0.80); --font-base-3: calc(var(--font-base-4) * 1.00); --font-base-2: calc(var(--font-base-3) * 0.95); --font-base-1: calc(var(--font-base-2) * 0.95); --font-size-h1: 48rem; --font-size-h2: calc(var(--font-size-h1) - 6rem); --font-size-h3: calc(var(--font-size-h2) - 6rem); --font-size-h4: calc(var(--font-size-h3) - 6rem); --font-size-h5: calc(var(--font-size-h4) - 6rem); --font-size-h6: calc(var(--font-size-h5) - 3rem); --font-size-title: 32px; --input-color: var(--medium-grey); --input-background: var(--white-highest); --input-padding: 3px 7px; --input-font-size: 85%; --input-font-weight: normal; --input-border: none; --input-border-top: var(--input-border); --input-border-right: var(--input-border); --input-border-bottom: var(--input-border); --input-border-left: var(--input-border); --input-outline: none; --input-box-shadow: none; --input-border-radius: 0; --input-text-shadow: none; --input-filter: none; --input-backdrop-filter: none; --input-transform: none; --input-color-focus: var(--input-color); --input-background-focus: var(--input-background); --input-font-size-focus: var(--input-font-size); --input-font-weight-focus: var(--input-font-weight); --input-border-focus: var(--input-border); --input-border-top-focus: var(--input-border-focus); --input-border-right-focus: var(--input-border-focus); --input-border-bottom-focus: var(--input-border-focus); --input-border-left-focus: var(--input-border-focus); --input-outline-focus: var(--input-outline); --input-box-shadow-focus: var(--input-box-shadow); --input-border-radius-focus: var(--input-border-radius); --input-text-shadow-focus: var(--input-text-shadow); --input-filter-focus: var(--input-filter); --input-backdrop-filter-focus: none; --input-transform-focus: var(--input-transform); --input-color-alt: var(--input-color); --input-background-alt: var(--input-background); --input-padding-alt: var(--input-padding); --input-font-size-alt: var(--input-font-size); --input-font-weight-alt: var(--input-font-weight); --input-border-alt: var(--input-border); --input-border-top-alt: var(--input-border-alt); --input-border-right-alt: var(--input-border-alt); --input-border-bottom-alt: var(--input-border-alt); --input-border-left-alt: var(--input-border-alt); --input-outline-alt: var(--input-outline); --input-box-shadow-alt: var(--input-box-shadow); --input-border-radius-alt: var(--input-border-radius); --input-text-shadow-alt: var(--input-text-shadow); --input-filter-alt: var(--input-filter); --input-backdrop-filter-alt: var(--input-backdrop-filter); --input-transform-alt: var(--input-transform); --input-color-focus-alt: var(--input-color-alt); --input-background-focus-alt: var(--input-background-alt); --input-font-size-focus-alt: var(--input-font-size-alt); --input-font-weight-focus-alt: var(--input-font-weight-alt); --input-border-focus-alt: var(--input-border-alt); --input-border-top-focus-alt: var(--input-border-focus-alt); --input-border-right-focus-alt: var(--input-border-focus-alt); --input-border-bottom-focus-alt: var(--input-border-focus-alt); --input-border-left-focus-alt: var(--input-border-focus-alt); --input-outline-focus-alt: var(--input-outline-alt); --input-box-shadow-focus-alt: var(--input-box-shadow-alt); --input-border-radius-focus-alt: var(--input-border-radius-alt); --input-text-shadow-focus-alt: var(--input-text-shadow-alt); --input-filter-focus-alt: var(--input-filter-alt); --input-backdrop-filter-focus-alt: var(--input-backdrop-filter-alt); --input-transform-focus-alt: var(--input-transform-alt); --input-color-alt2: var(--input-color); --input-background-alt2: var(--input-background); --input-padding-alt2: var(--input-padding); --input-font-size-alt2: var(--input-font-size); --input-font-weight-alt2: var(--input-font-weight); --input-border-alt2: var(--input-border); --input-border-top-alt2: var(--input-border-alt2); --input-border-right-alt2: var(--input-border-alt2); --input-border-bottom-alt2: var(--input-border-alt2); --input-border-left-alt2: var(--input-border-alt2); --input-outline-alt2: var(--input-outline); --input-box-shadow-alt2: var(--input-box-shadow); --input-border-radius-alt2: var(--input-border-radius); --input-text-shadow-alt2: var(--input-text-shadow); --input-filter-alt2: var(--input-filter); --input-backdrop-filter-alt2: var(--input-backdrop-filter); --input-transform-alt2: var(--input-transform); --input-color-focus-alt2: var(--input-color-alt); --input-background-focus-alt2: var(--input-background-alt); --input-font-size-focus-alt2: var(--input-font-size-alt); --input-font-weight-focus-alt2: var(--input-font-weight-alt); --input-border-focus-alt2: var(--input-border-alt); --input-border-top-focus-alt2: var(--input-border-focus-alt2); --input-border-right-focus-alt2: var(--input-border-focus-alt2); --input-border-bottom-focus-alt2: var(--input-border-focus-alt2); --input-border-left-focus-alt2: var(--input-border-focus-alt2); --input-outline-focus-alt2: var(--input-outline-alt); --input-box-shadow-focus-alt2: var(--input-box-shadow-alt); --input-border-radius-focus-alt2: var(--input-border-radius-alt); --input-text-shadow-focus-alt2: var(--input-text-shadow-alt); --input-filter-focus-alt2: var(--input-filter-alt); --input-backdrop-filter-focus-alt2: var(--input-backdrop-filter-alt); --input-transform-focus-alt2: var(--input-transform-alt); --button-color: var(--black-med); --button-background: var(--black-low); --button-font-family: var(--font-secondary); --button-font-weight: normal; --button-font-size: 1.2em; --button-border: none; --button-border-top: var(--button-border); --button-border-right: var(--button-border); /* don't change */ --button-border-bottom: var(--button-border); --button-border-left: var(--button-border); --button-padding: 0.3em 1em; --button-box-shadow: none; --button-border-radius: 0; --button-transform: none; --button-text-shadow: none; --button-outline: none; --button-filter: none; --button-text-transform: capitalize; --button-font-variant: none; --button-letter-spacing: 0; --button-transition: all var(--main-trans-speed) var(--main-trans-easing); --button-color-hover: var(--button-color); --button-background-hover: var(--button-background); --button-font-family-hover: var(--button-font-family); --button-font-weight-hover: var(--button-font-weight); --button-font-size-hover: var(--button-font-size); --button-border-hover: var(--button-border); --button-border-top-hover: var(--button-border-hover); /* don't change */ --button-border-right-hover: var(--button-border-hover); --button-border-bottom-hover: var(--button-border-hover); --button-border-left-hover: var(--button-border-hover); --button-padding-hover: var(--button-padding); --button-box-shadow-hover: var(--button-box-shadow); --button-border-radius-hover: var(--button-border-radius); --button-transform-hover: var(--button-transform); --button-text-shadow-hover: var(--button-text-shadow); --button-outline-hover: var(--button-outline); --button-filter-hover: var(--button-filter); --button-text-transform-hover: var(--button-text-transform); --button-font-variant-hover: var(--button-font-variant); --button-letter-spacing-hover: var(--button-letter-spacing); --button-transition-hover: var(--button-transition); --button-color-alt: var(--button-color); --button-background-alt: var(--button-background); --button-font-family-alt: var(--button-font-family); --button-font-weight-alt: var(--button-font-weight); --button-font-size-alt: var(--button-font-size); --button-border-alt: var(--button-border); --button-border-top-alt: var(--button-border-alt); /* don't change */ --button-border-right-alt: var(--button-border-alt); --button-border-bottom-alt: var(--button-border-alt); --button-border-left-alt: var(--button-border-alt); --button-padding-alt: var(--button-padding); --button-box-shadow-alt: var(--button-box-shadow); --button-border-radius-alt: var(--button-border-radius); --button-transform-alt: var(--button-transform); --button-text-shadow-alt: var(--button-text-shadow); --button-outline-alt: var(--button-outline); --button-filter-alt: var(--button-filter); --button-text-transform-alt: var(--button-text-transform); --button-font-variant-alt: var(--button-font-variant); --button-letter-spacing-alt: var(--button-letter-spacing); --button-transition-alt: var(--button-transition); --button-color-hover-alt: var(--button-color-alt); --button-background-hover-alt: var(--button-background-alt); --button-font-family-hover-alt: var(--button-font-family-alt); --button-font-weight-hover-alt: var(--button-font-weight-alt); --button-font-size-hover-alt: var(--button-font-size-alt); --button-border-hover-alt: var(--button-border-alt); --button-border-top-hover-alt: var(--button-border-hover-alt); /* don't change */ --button-border-right-hover-alt: var(--button-border-hover-alt); --button-border-bottom-hover-alt: var(--button-border-hover-alt); --button-border-left-hover-alt: var(--button-border-hover-alt); --button-padding-hover-alt: var(--button-padding-alt); --button-box-shadow-hover-alt: var(--button-box-shadow-alt); --button-border-radius-hover-alt: var(--button-border-radius-alt); --button-transform-hover-alt: var(--button-transform-alt); --button-text-shadow-hover-alt: var(--button-text-shadow-alt); --button-outline-hover-alt: var(--button-outline-alt); --button-filter-hover-alt: var(--button-filter-alt); --button-text-transform-hover-alt: var(--button-text-transform-alt); --button-font-variant-hover-alt: var(--button-font-variant-alt); --button-letter-spacing-hover-alt: var(--button-letter-spacing-alt); --button-transition-hover-alt: var(--button-transition-alt); --button-color-alt2: var(--button-color); --button-background-alt2: var(--button-background); --button-font-family-alt2: var(--button-font-family); --button-font-weight-alt2: var(--button-font-weight); --button-font-size-alt2: var(--button-font-size); --button-border-alt2: var(--button-border); --button-border-top-alt2: var(--button-border-alt2); /* don't change */ --button-border-right-alt2: var(--button-border-alt2); --button-border-bottom-alt2: var(--button-border-alt2); --button-border-left-alt2: var(--button-border-alt2); --button-padding-alt2: var(--button-padding); --button-box-shadow-alt2: var(--button-box-shadow); --button-border-radius-alt2: var(--button-border-radius); --button-transform-alt2: var(--button-transform); --button-text-shadow-alt2: var(--button-text-shadow); --button-outline-alt2: var(--button-outline); --button-filter-alt2: var(--button-filter); --button-text-transform-alt2: var(--button-text-transform); --button-font-variant-alt2: var(--button-font-variant); --button-letter-spacing-alt2: var(--button-letter-spacing); --button-transition-alt2: var(--button-transition); --button-color-hover-alt2: var(--button-color-alt2); --button-background-hover-alt2: var(--button-background-alt2); --button-font-family-hover-alt2: var(--button-font-family-alt2); --button-font-weight-hover-alt2: var(--button-font-weight-alt2); --button-font-size-hover-alt2: var(--button-font-size-alt2); --button-border-hover-alt2: var(--button-border-alt2); --button-border-top-hover-alt2: var(--button-border-hover-alt2); /* don't change */ --button-border-right-hover-alt2: var(--button-border-hover-alt2); --button-border-bottom-hover-alt2: var(--button-border-hover-alt2); --button-border-left-hover-alt2: var(--button-border-hover-alt2); --button-padding-hover-alt2: var(--button-padding-alt2); --button-box-shadow-hover-alt2: var(--button-box-shadow-alt2); --button-border-radius-hover-alt2: var(--button-border-radius-alt2); --button-transform-hover-alt2: var(--button-transform-alt2); --button-text-shadow-hover-alt2: var(--button-text-shadow-alt2); --button-outline-hover-alt2: var(--button-outline-alt2); --button-filter-hover-alt2: var(--button-filter-alt2); --button-text-transform-hover-alt2: var(--button-text-transform-alt2); --button-font-variant-hover-alt2: var(--button-font-variant-alt2); --button-letter-spacing-hover-alt2: var(--button-letter-spacing-alt2); --button-transition-hover-alt2: var(--button-transition-alt2); --contact-spinner-color: var(--button-background); --break-out-width: 100%; --break-out-max-width: 960px; --break-out-background: var(--black-lowest); --break-out-border-top: 2px solid var(--black); --break-out-border-bottom: 2px solid var(--black); --break-out-border-right: none; --break-out-border-left: none; --break-out-padding: 1.5em 2.5em; --break-out-margin: 2.5em auto; --break-out-box-shadow: none; --break-out-border-radius: 0; --break-out-outline: none; --break-out-filter: none; --break-out-transition: all var(--main-trans-speed) var(--main-trans-easing); --locked-color: var(--black); --locked-background: var(--white); --locked-border: none; --modal-color: var(--locked-color); --modal-background: var(--locked-background); --modal-border: var(--locked-border); --close-btn-color: var(--button-color); --close-btn-background: var(--button-background); --close-btn-border: var(--button-border); --close-btn-color-hover: var(--button-color-hover); --close-btn-background-hover: var(--button-background-hover); --close-btn-border-hover: var(--button-border-hover); --font-size-text: 18px; --font-size-big: 132%; --font-size-small: 77%; --font-size-icon: 40px; --main-trans-speed: 0.2s; --main-trans-easing: ease; --measure-base: 1.5em; --measure-small: 1.0em; --measure-large: 2.5em; --bullet-spacing: 0.7em; --sidebar-width: 356px; --google-guaranteed-green: rgba(0, 161, 79, 1); --paypal-yellow: rgba(255, 196, 57, 1); --google-review-border: 5px solid var(--light-grey); --google-review-bg: var(--white); --google-star-color: rgba(251, 188, 4, 1); --google-star-stroke: rgba(0, 0, 0, 0.3); --google-star-shadow: rgba(70, 70, 70, 0.6); --google-value-text: var(--text-color); --google-total-text: var(--text-color); } /*-------------------------------------------------------------- # Base --------------------------------------------------------------*/ /* Admin logged in styles --------------------------------------------- */ .logged-in #wpadminbar { position: fixed !important; z-index: 999999999999!important; min-width: unset!important; width: 40px!important; height: 40px!important; top: unset!important; bottom: 10px!important; left: 3px!important; background: url('https://secure.gravatar.com/avatar/5578915c21eaa269936f4e9aacb6771b') no-repeat!important; background-size: contain!important; } .logged-in #wp-toolbar { display: none; } .bot-trap{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Typography --------------------------------------------- */ html { -webkit-text-size-adjust: none; text-size-adjust: none; font-size: var(--font-base-5); box-sizing: border-box; margin-top: 0; } body { font-family: var(--font-text); color: var(--text-color); font-size: var(--font-size-text); font-weight: normal; line-height: 1.5; text-underline-position: under; max-width: unset !important; margin: 0; word-spacing: 0.1em; background: var(--black); } *, *::before, *::after { box-sizing: inherit; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); font-weight: normal; line-height: 1.3; color: var(--black); text-transform: capitalize; text-align: center; margin: 0; } h1 { font-size: var(--font-size-h1); } h2, h1 > span.h1-small { font-size: var(--font-size-h2); } h3, h2 > span.h2-small { font-size: var(--font-size-h3); } h4, h3 > span.h3-small{ font-size: var(--font-size-h4); } h5 { font-size: var(--font-size-h5); } h6 { font-size: var(--font-size-h6); } .widget-title { font-size: var(--font-size-title); } h1 > a, h1 > a:hover, h1 > a.tab-focus, h1 > a:visited, h1 > span:not(.h1-small), h2 > a, h2 > a:hover, h2 > a.tab-focus, h2 > a:visited, h2 > span:not(.h2-small), h3 > a, h3 > a:hover, h3 > a.tab-focus, h3 > a:visited, h3 > span:not(.h3-small), h4 > a, h4 > a:hover, h4 > a.tab-focus, h4 > a:visited, h4 > span, h5 > a, h5 > a:hover, h5 > a.tab-focus, h5 > a:visited, h5 > span, h6 > a, h6 > a:hover, h6 > a.tab-focus, h6 > a:visited, h6 > span, a > span, .phone-number a.phone-link, .phone-number a.phone-link:hover, .phone-number a.phone-link.tab-focus, b, strong, i:not(.fa), em, span:not(.page-numbers):not(.icon):not(.unique):not(.h1-small):not(.h2-small):not(.h3-small) { font-family: inherit; color: inherit !important; text-align: inherit; font-size: inherit; font-weight: inherit; transition: inherit; } b, strong { font-weight: bold; } em, i { font-style: italic; } a.skip-link, a.skip-link:hover, a.skip-link:active, a.skip-link.tab-focus { background: var(--white); color: var(--black); padding: var(--measure-small) var(--measure-small); text-align: center; } .col-inner > h2 + h3 { margin-top: -20px /* Random Post - brings

sub-title a little closer to the

title, overcoming the grid-gap */ } .technical-difficulties { font-family: var(--font-text); font-size: var(--font-size-small); color: var(--black); border-top: 2px solid var(--black); border-bottom: 2px solid var(--black); background: var(--white); padding: 12px 0; text-align: center; } /* Links --------------------------------------------- */ a, a:visited { color: var(--link-color); background-color: var(--link-bg); cursor: pointer; transition: all var(--main-trans-speed) var(--main-trans-easing); } a:hover, a:active, a.tab-focus { color: var(--link-hover-color); background-color: var(--link-hover-bg); } a[tooltip] { position: relative; display: inline-block; } a[tooltip]::after { content: attr(tooltip); position: absolute; display: block; visibility: hidden; background: var(--black-highest); color: var(--white); text-align: center; padding: 6px; margin-top: 3px; border-radius: 6px; z-index: 1; width: 150px; margin-left: -75px; font-size: var(--font-size-small); line-height: 1.3; font-weight: normal; } a[tooltip]:hover::after { visibility: visible; } .phone-number a.phone-link, .phone-number a.phone-link:hover, .phone-number a.phone-link.tab-focus, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, h1 a.tab-focus, h2 a.tab-focus, h3 a.tab-focus, h4 a.tab-focus, h5 a.tab-focus, h6 a.tab-focus { text-decoration: none; } /* "Click Here To Finance" added above or below a financing widget */ .link-text { display: inline-block; width: 100%; text-align: center; font-size: 80%; margin: 8px auto; } a.graphic-icon { display: grid; grid-template-columns: auto 1fr; align-items: center; justify-items: start; gap: 10px; } a.graphic-icon span { text-align: left; } .row-of-buttons, ul.tabs { display: flex; justify-content: center; flex-wrap: wrap; } .row-of-buttons .block-button, ul.tabs li { margin: 0.25em 1%; } .paypal-form { max-width: 500px; margin: 0 auto; } .paypal-form form p { margin-top: var(--measure-base); margin-bottom: var(--measure-base); } .paypal-form form p:last-of-type { margin-bottom: 2em; } .paypal-dollar { display: inline-block; width: 15px; } input.paypal-amount { width: calc(100% - 15px); } .bp-service-areas { position: fixed; font-size: 14px; left: 0; bottom: -40px; display: block; width: 100%; height: 30px; } /* Fancy Lists --------------------------------------------- */ ul.bullet, ul.bullet-list, ul.fancy-list { list-style-type: none; padding-left: 0; } ul.bullet, ul.bullet-list { margin-left: 40px; } ul.fancy-list li { display: flex; align-items: center; } ul.fancy-list b, ul.fancy-list strong { color: inherit; font-weight: bold; min-width: 160px; max-width: 160px; margin-right: 15px; } ul.bullet li::before, ul.bullet-list li::before, ul.fancy-list li::before { content: '●'; color: inherit; font-weight: bold; display: inline-block; text-align: center; } ul.fancy-list li::before { margin-right: 12px; font-size: 150%; } ul.bullet li::before, ul.bullet-list li::before { margin-right: 0; text-indent: -40px; } ul.bullet-list li b, ul.bullet-list li strong { display: inline; } ul.bullet-list b::after, ul.bullet-list strong::after { content: "\A"; white-space: pre; } ul.bullet-check li::before { content: '✔'; } ul.bullet-square li::before { content: '■'; } ul.bullet-diamond li::before { content: '♦'; } ul.bullet-warning li::before { content: '⚠️'; } ul.bullet-image li::before, ul.bullet-svg li::before { content: ''; background-image: url('/wp-content/uploads/site-icon-80x80.webp'); background-size: contain; background-repeat: no-repeat; background-position: center; width: 30px; height: 30px; margin: 0 10px 0 -40px; transform: translateY(20%); } ul.bullet-svg li::before { width: 20px; height: 20px; margin: 0 10px 0 -30px; background: none; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,\\\") no-repeat center; mask: url("data:image/svg+xml;utf8,\\\") no-repeat center; mask-size: contain; } ul.bullet-list.bullet-image li::before { transform: translateY(50%); } ul.fancy-list.bullet-image li::before { transform: translateY(0%); } .areas-we-serve > li { list-style-type: none; font-weight: bold; } .areas-we-serve li ul { font-size: 85%; padding-left: 0; margin-left: 10px; list-style-type: none; font-weight: normal; height: 0; display: none; } .areas-we-serve li.open > ul { display: block; height: auto; } .areas-we-serve li ul li::before { content: "»"; margin-right: 5px; } .areas-we-serve > li:has(> ul) { cursor: pointer; } /* Icons & Social Media --------------------------------------------- */ a.icon-btn { position: relative; display: inline-block; color: var(--button-color); margin-left: 6px; margin-right: 6px; font-size: var(--font-size-icon); height: var(--font-size-icon); aspect-ratio: 1/1; text-decoration: none; } a.icon-btn:hover, a.icon-btn:active, a.icon-btn.tab-focus { color: var(--button-color-hover); text-decoration: none; } a.icon-btn.scroll-top { display: block; margin-left: 0; margin-right: 0; font-size: unset; height: unset; } .icon { position: relative; display: inline-block; background: none; border: none; margin: 0; z-index: 200; } a.icon-btn .icon { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; aspect-ratio: 1/1; transform: scale(0.6); } a.icon-btn .icon-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: var(--button-border); border-radius: var(--button-border-radius); background: var(--button-background); box-shadow: var(--button-box-shadow); z-index: 100; transform: var(--button-transform); transition: all var(--main-trans-speed) var(--main-trans-easing); } a.icon-btn:hover .icon-bg, a.icon-btn:active .icon-bg, a.icon-btn.tab-focus .icon-bg { background: var(--button-background-hover); box-shadow: var(--button-box-shadow-hover); transform: var(--button-transform-hover); transition: all var(--main-trans-speed) var(--main-trans-easing); } .social-box { line-height: 1; text-align: center; } .icon-box { font-size: calc(var(--font-size-icon) * 0.75); /*height: calc(var(--font-size-icon) * 1.3); 8/13/25 -- causing boxes to be oval instead of round */ aspect-ratio: 1/1; margin: 0 auto; } .icon-box .icon { display: flex; justify-content: center; align-items: center; /*height: 100%;*/ height: auto /* changed to make icons on "why choose us" perfectly round */; aspect-ratio: 1/1; color: var(--button-color); background: var(--button-background); border: var(--button-border); padding: 0.4em; box-shadow: var(--button-box-shadow); border-radius: var(--button-border-radius); text-shadow: var(--button-text-shadow); outline: var(--button-outline); filter: var(--button-filter); } a.social-btn { position: relative; display: inline-block; } a.social-btn img { margin: 0 6px; } #mobile-menu-bar .mm-bar-btn:not(.mm-bar-activate), .carousel-control-next-icon, .carousel-control-prev-icon, .fancy-icon, .icon-btn, .icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 0 !important; } .icon-svg { width: 1.15em; height: 1.15em; display: block; /* avoid inline baseline gap */ fill: currentColor; } #masthead .icon-svg.icon-phone { font-size: 80%; } .icon-txt-before { margin-right: 14px; } .icon-txt-after { margin-left: 14px; } /* Animation --------------------------------------------- */ .animation-queued { opacity: 0; } .animation-complete:not(.animate) { opacity: 1 !important; animation-name: unset !important; } .wordSplit, .charSplit { opacity: 0; } /* Media --------------------------------------------- */ .align-left, .thumb-left .section .align-right, .thumb-right .section .switch-thumb .align-left, .thumb-right .section .switch-thumb .align-right { float: left; margin: var(--measure-base) var(--measure-base) var(--measure-small) 0; } .align-right, .thumb-right .section .align-left, .thumb-left .section .switch-thumb .align-left, .thumb-left .section .switch-thumb .align-right { float: right; margin: var(--measure-base) 0 var(--measure-small) var(--measure-base); } p + .align-left, p + .thumb-left .section .align-right, p + .thumb-right .section .switch-thumb .align-left, p + .thumb-right .section .switch-thumb .align-right, p + .align-right, p + .thumb-right .section .align-left, p + .thumb-left .section .switch-thumb .align-left, p + .thumb-left .section .switch-thumb .align-right { margin-top: 0; } .align-right img, .align-left img { float: none; } .align-center { float: none; margin: 2em auto; } .attachment-post-thumbnail { margin: var(--measure-base) auto; } .align-left.size-half-f, .align-right.size-half-f, .align-left.size-half-s, .align-right.size-half-s { max-width: calc(50% - var(--measure-base)); } .align-left.size-third-f, .align-right.size-third-f, .align-left.size-third-s, .align-right.size-third-s { max-width: 33%; } .align-left.size-quarter-f, .align-right.size-quarter-f, .align-left.size-quarter-s, .align-right.size-quarter-s { max-width: 25%; } .size-quarter-s img, .size-third-s img, .size-half-s img, .size-full-s img, .size-quarter-f img, .size-third-f img, .size-half-f img, .size-full-f img, .img-testimonials img { max-width: 100% !important; width: auto !important; margin: 0 auto !important; } .size-quarter-s iframe, .size-third-s iframe, .size-half-s iframe, .size-full-s iframe, .size-quarter-f iframe, .size-third-f iframe, .size-half-f iframe, .size-full-f iframe { margin: 0 auto !important; } .inset-shadow img { width: 100% !important; } .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } .custom-logo-link { display: inline-block; } img.noFX, .noFX img, .follow_us_on_fb iframe { border: none !important; background: none !important; box-shadow: none !important; outline: none !important; filter: none !important; } .inset-shadow { position: relative; } .inset-shadow::after { content: ''; position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 0 10px 0 var(--black-highest); overflow: hidden; border: 0; margin: 0; padding: 0; pointer-events: none; } ul.side-by-side { display: flex; flex-flow: row wrap; list-style: none; padding: 0; gap: 2em; } ul.side-by-side li { margin: 0 !important; padding: 0; } ul.side-by-side img { box-sizing: content-box; } img.img-404 { filter: sepia(0) contrast(1) hue-rotate(0deg) drop-shadow(-1px -1px 0 var(--black-low)) drop-shadow(1px 1px 0 var(--white-med)); border: none !important; background: 0 0 !important; box-shadow: none !important; outline: 0 !important; transform: translateX(4.5%); } /* Captions --------------------------------------------- */ .wp-caption { margin-bottom: var(--measure-base); max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-bottom: 0; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { display: inline-block; width: 100%; font-size: 90%; text-align: center; margin: 8px 0; } /* Coupon --------------------------------------------- */ .block.coupon { display: grid; /* added 2/6/24 for Matthews Heating & Air */ align-content: center; /* added 2/6/24 for Matthews Heating & Air */ } .coupon { background: var(--white); border: 2px dashed var(--black); } .coupon .coupon-inner { background: transparent; padding: var(--measure-base); } .coupon h2.action, .coupon h2.discount, .coupon h2.service, .coupon p.disclaimer { text-align: center; } .coupon h2.action { font-size: 150%; } .coupon h2.discount { font-size: 300%; } .coupon h2.service { font-size: 175%; } .coupon p.disclaimer { font-size: 80%; } /* Are We Open Banner --------------------------------------------- */ .currently-open-banner { position: absolute; width: auto; min-width: 200px; top: 0; transform: translateX(110vw) rotate(-100deg); background: var(--accent-background); font-family: var(--font-text); font-weight: bold; text-transform: uppercase; color: var(--accent-color); font-size: 20px; line-height: 1.2; padding: 9px 22px 12px 18px; z-index: 999999989; pointer-events: none; white-space: nowrap; } .currently-open-banner p { text-align: right; } .screen-mobile .currently-open-banner { display: none; } .currently-open-banner.reveal-open { transform: translate(10px, 5px) rotate(20deg); transition: all 1s cubic-bezier(0.175, 0.885, 0.320, 1.275); } .currently-open-banner.small-screen.reveal-open { transform: translate(0, 0) rotate(-10deg); transition: all 1s cubic-bezier(0.175, 0.885, 0.320, 1.275); } .currently-open-banner::before { content: ""; position: absolute; top: 50%; margin-top: -15px; left: -29px; border: solid 15px transparent; border-right-color: var(--accent-background); } .currently-open-banner.small-screen::before { border-right-color: transparent; border-left-color: var(--accent-background); left: unset; right: -29px; } #mobile-menu-bar.currently-open .call-btn { background: var(--accent-background); font-weight: bold; } #mobile-menu-bar.currently-open .call-btn, #mobile-menu-bar.currently-open .mm-bar-btn.call-btn .icon { color: var(--accent-color); } /* Random Posts (thumb-only) --------------------------------------------- */ .thumb-only { display: flex; flex-wrap: wrap; gap: var(--measure-base) 3%; } #secondary .thumb-only { gap: 0.5em; } .thumb-only .col, .thumb-only.thumb-col-1 .col { flex: 1 0 50%; } .thumb-only.thumb-col-2 .col { flex: 1 0 33%; } .thumb-only.thumb-col-3 .col { flex: 1 0 25%; } .thumb-only.thumb-col-4 .col { flex: 1 0 20%; } /* SVG --------------------------------------------- */ #include-svg { display: none; } /* Chat Modules --------------------------------------------- */ iframe#podium-prompt, iframe#podium-bubble, iframe#podium-modal, iframe#tenant-sitechat-frame, chat-widget .lc_text-widget, chat-widget .lc_text-widget--btn, #xapp-widget .xapp-chat-button, #xapp-widget .widget-container { border: none !important; box-shadow: none !important; outline: none !important; filter: none !important; transform: translateY(-45px) !important; z-index: 999999996 !important; } /* 503 - error page --------------------------------------------- */ html.error503 { font-size: var(--font-base-1); } html.error503 body { background: var(--white) !important; } html.error503 body, html.error503 h1, html.error503 h2, html.error503 h3 { font-family: var(--font-text) !important; color: var(--text-color) !important; text-shadow: none !important; text-align: center !important; } /* Query Monitor --------------------------------------------- */ body.screen-desktop.administrator #query-monitor-main { display: block; width: 25% !important; position: fixed; top: 0; } /*-------------------------------------------------------------- # Mobile Styles --------------------------------------------------------------*/ /* Desktops & Tablets */ @media only screen and (min-width: 577px) { a.phone-link, a.phone-link:hover, a.phone-link:active, a.phone-link.tab-focus { color: inherit; text-decoration: none; cursor: default; background: transparent; border: none; } } /* 4: Large Tablets (landscape) */ @media (max-width: 1280px) { html::before { content: ' '; display: block; background-position: center; background-size: cover; height: 100vh; width: 100vw; top: 0; bottom: 0; left: 0; right: 0; position: fixed; z-index: -10; } html { font-size: var(--font-base-4); } .loader { top: calc(50% - 42px) !important; } } /* 3: Small Tablets (landscape) */ @media (max-width: 1024px) { html { font-size: var(--font-base-3); margin-top: 42px /* compensate for mobile menu bar */ /* changed from 45 to 42 9/30/24 while working on R & S Gutters */ } .screen-mobile h1, .screen-mobile h2, .screen-mobile h3, .screen-mobile h4, .screen-mobile h5, .screen-mobile h6 { text-align: center; } body { font-size: calc(var(--font-size-text) - 1px); } } /* 2: Phones (landscape) + Tablets (portrait) */ @media (max-width: 860px) { html { font-size: var(--font-base-2); } } /* 1: Phones (portrait) */ @media (max-width: 576px) { html { font-size: var(--font-base-1); } body { font-size: calc(var(--font-size-text) - 2px); } h1 a.phone-link, h2 a.phone-link, h3 a.phone-link, h4 a.phone-link, h5 a.phone-link, h6 a.phone-link { text-decoration: none; } /* Captions --------------------------------------------- */ .wp-caption { width: 100% !important } /* Fancy Lists --------------------------------------------- */ ul.bullet, ul.bullet-list, ul.fancy-list { clear: both; } ul.fancy-list { margin-left: 40px; } ul.fancy-list li { display: inline-block; } ul.fancy-list li::before { margin-right: 0; font-size: 100%; text-indent: -40px; } ul.fancy-list b, ul.fancy-list strong { display: inline; min-width: unset; max-width: unset; margin-right: 0; } ul.fancy-list b::after, ul.fancy-list strong::after { content: "\A"; white-space: pre; } } @media screen and (min-width: 1281px) { .hide-5, .hide-desktop { display: none !important; } } @media screen and (min-width: 1025px) and (max-width: 1280px) { .hide-4, .hide-desktop { display: none !important; } } @media screen and (min-width: 861px) and (max-width: 1024px) { .hide-3, .hide-mobile { display: none !important; } } @media screen and (min-width: 577px) and (max-width: 860px) { .hide-2, .hide-mobile { display: none !important; } } @media screen and (max-width: 576px) { .hide-1, .hide-mobile { display: none !important; } } @media screen and (min-width: 961px) { .screen-480, .screen-640, .screen-960 { display: none !important; } } @media screen and (min-width: 641px) and (max-width: 960px) { .screen-480, .screen-640, .screen-1280 { display: none !important; } } @media screen and (min-width: 481px) and (max-width: 640px) { .screen-480, .screen-960, .screen-1280 { display: none !important; } } @media screen and (max-width: 480px) { .screen-640, .screen-960, .screen-1280 { display: none !important; } }