/*! * Optima Theme - Base Elements * Version 1.0 */ /* ========================================================= BASE RESET ========================================================= */ html { height: 100%; } body { margin: 0; } a, input, .tab-sm i, .header, .header .header-inner, .header .cta .phone, .header .cta a, *:before, *:after, .mobile-nav.open, .mobile-nav.close, svg:hover, a:hover svg { text-decoration: none!important; } .embed a[data-sb-event="link-call"], .content a[data-sb-event="link-call"], .sb-module a[data-sb-event="link-call"] { white-space: nowrap; } /*custom dropdown motion -- desktop*/ .header .nav .dropdown-wrapper, .header .nav .dropdown-wrapper li { -ms-transition:transform 0.65s cubic-bezier(0.2,.8,.25,1),opacity 0.65s cubic-bezier(0.2,.8,.25,1); transition:transform 0.65s cubic-bezier(0.2,.8,.25,1),opacity 0.65s cubic-bezier(0.2,.8,.25,1); -webkit-transition: transform 0.65s cubic-bezier(0.2,.8,.25,1),opacity 0.65s cubic-bezier(0.2,.8,.25,1); } .sb-content a { text-decoration: underline; } @media screen and (max-width:1280px) { .content img{ max-width:100%; height: auto!important; display:block; margin-left: auto!important; margin-right: auto!important; float: none !important; } } h1, h2, h3 { font-weight: 300; letter-spacing: 0px; } @media (min-width:949px) { body:not(#page-home) .sb-content:not(.text--center) .content :is(h1,h2,h3){ margin-inline:auto; text-align:left; padding-bottom:15px; } } p, ul { font-size: 16px!important; line-height: 1.5; margin-bottom: 20px; } aside { padding: 50px 0; } button:focus { outline: none; } @media (max-width: 948px) { .image img, .content img { display:block; margin-inline:auto; margin-bottom:1em; float:none; } } .body { background: transparent; } /* HR bars */ /* Global
styling */ hr { display: block; height: 1px; /* line thickness */ border: 0; /* remove default groove */ background: currentColor; /* inherits text color */ opacity: 0.15; /* soften the line */ margin: 35px 0px 35px; /* vertical space (mobile) */ } /* More breathing room on larger screens */ @media (min-width: 768px) { hr {margin: 35px 0px 35px;} } /* HR bars -- hide by default */ { display: none; } .form-inner p.submit { text-align: right; padding-top: 20px!important; } iframe { vertical-align: bottom; } .content img, .headline img, .post .entry img { border: 0px!important; } body.page-app [class*="elfsight-"] { display: none!important; } /*padd */ .sb-embed .box, .box { padding: 0px; margin: 0px; display: inline-block; width: 100%; } /*padd */ .sb-embed .box { display: inline-block; width: 100%; } .site-messages { display: none; } /* "l" seperater */ .pipe { color: var(--color-brand); opacity: .65; /* optional polish */ } /* ========================================================= gallery reset - icons var3 system ========================================================= */ .gallery.var3 img{ width:auto; height:auto; } /* ========================================================= GLOBAL PRESETS ========================================================= */ /* Global Typography */ body, .content, .content h3, .footer .locations_list, .btn, .btn-cta, .module-form input:not([type=submit]), .module-form textarea, .module-form select, .mobile-nav a, .gallery .gallery-header p, .headline h2, .headline h2, .post .entry h1, .post .entry h2 { font-family: 'Poppins', sans-serif; } /* Full Post Content (inherits body) */ .post h1.title, .post h2.title, .sb-full-post p, .sb-full-post ul { font-family: inherit !important; } /* ========================================================= HEADING SIZE SYSTEM (SCOPED + TOKEN-BASED) Applies ONLY when .is-hX-* exists on parent ========================================================= */ /* ========================= H1 ========================= */ [class*="is-h1-"] h1 { font-size: var(--h1-size) !important; } .is-h1-sm { --h1-size: 32px; } .is-h1-md { --h1-size: 40px; } .is-h1-lg { --h1-size: 52px; } .is-h1-xl { --h1-size: 64px!important; } /* ========================= H2 ========================= */ [class*="is-h2-"] h2 { font-size: var(--h2-size) !important; } .is-h2-sm { --h2-size: 22px; } .is-h2-md { --h2-size: 28px; } .is-h2-lg { --h2-size: 34px; }x .is-h2-xl { --h2-size: 40px; } /* ========================= H3 ========================= */ [class*="is-h3-"] h3 { font-size: var(--h3-size) !important; } .is-h3-sm { --h3-size: 18px; } .is-h3-md { --h3-size: 22px; } .is-h3-lg { --h3-size: 28px; } .is-h3-xl { --h3-size: 32px; } /* ========================================================= CAROUSEL MOBILE COMPACT MODES ========================================================= */ @media (max-width: 948px) { /* ========================================= BASE COMPACT (shared styles) ========================================= */ .carousel .item-content .is-mobile-compact-left, .carousel .item-content .is-mobile-compact-right { /* Typography */ h1 { font-size: 32px !important; line-height: 1.2; } h2 { font-size: 35px !important; line-height: 1.25; } h3 { font-size: 14px !important; } p { font-size: 15px !important; line-height: 1.5; } /* Button stack base */ p { display: flex; flex-direction: column; gap: 6px; } p > a { display: inline-flex; padding: 10px 16px; font-size: 11px; border-radius: 12px; margin-top: 4px; } } /* ========================================= LEFT VERSION ========================================= */ .carousel .item-content .is-mobile-compact-left { text-align: left; } .carousel .item-content .is-mobile-compact-left h1, .carousel .item-content .is-mobile-compact-left h2, .carousel .item-content .is-mobile-compact-left h3, .carousel .item-content .is-mobile-compact-left p { text-align: left; } .carousel .item-content .is-mobile-compact-left p { align-items: flex-start; } /* ========================================= RIGHT VERSION ========================================= */ .carousel .item-content .is-mobile-compact-right { text-align: right; } .carousel .item-content .is-mobile-compact-right h1, .carousel .item-content .is-mobile-compact-right h2, .carousel .item-content .is-mobile-compact-right h3, .carousel .item-content .is-mobile-compact-right p { text-align: right; } .carousel .item-content .is-mobile-compact-right p { align-items: flex-end; } } /* ========================================================= ALIGNMENT (POSITIONING) ========================================================= */ .align-right { margin-left: auto; } .align-left { margin-right: auto; justify-content: flex-start; text-align: left;} .align-center { margin-left: auto; margin-right: auto; justify-content: center; text-align: center;} /* ========================================================= FLEX ALIGNMENT (INTERNAL) ========================================================= */ .is-centered { justify-content: center; } .is-spread { justify-content: space-between; } /* ========================================================= FLEX LAYOUT ========================================================= */ .has-split { display: flex; align-items: center; } /* ========================================================= VERTICAL ALIGNMENT ========================================================= */ .align-top { align-items: flex-start; } .align-middle { align-items: center; } .align-bottom { align-items: flex-end; } /* ========================================================= /*padd ? ROW LAYOUT MODIFIERS ========================================================= */ .sb-bg-full-row > .sb-module, .sb-has-space-y-row > .sb-module { align-items: center; } /* ========================================================= PADDING ========================================================= */ .pad-y-0 { padding-top: var(--sb-space-xs) !important; padding-bottom: var(--sb-space-xs) !important; } .pad-y-xs { padding-top: var(--sb-space-xs) !important; padding-bottom: var(--sb-space-xs) !important; } .pad-y-sm { padding-top: var(--sb-space-xs) !important; padding-bottom: var(--sb-space-xs) !important; } @media screen and (min-width:949px) { .pad-y-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .pad-y-xs { padding-top: var(--sb-space-xs) !important; padding-bottom: var(--sb-space-xs) !important; } .pad-y-sm { padding-top: var(--sb-space-sm) !important; padding-bottom: var(--sb-space-sm) !important; } .pad-y { padding-top: var(--sb-space-default) !important; padding-bottom: var(--sb-space-default) !important; } .pad-y-lg { padding-top: var(--sb-space-lg) !important; padding-bottom: var(--sb-space-lg) !important; } } /* ========================================================= PADDING HORIZONTAL (LEFT / RIGHT) ========================================================= */ @media screen and (min-width:949px) { .pad-x-0 { padding-left: 0 !important; padding-right: 0 !important; } .pad-x-sm { padding-left: var(--sb-gutter) !important; padding-right: var(--sb-gutter) !important; } .pad-x { padding-left: var(--sb-space-default) !important; padding-right: var(--sb-space-default) !important; } .pad-x-lg { padding-left: var(--sb-space-lg) !important; padding-right: var(--sb-space-lg) !important; } .pad-x-xl { padding-left: var(--sb-space-xl) !important; padding-right: var(--sb-space-xl) !important; } } @media screen and (min-width:1281px) { .pad-l-0 { padding-left: 0 !important; } .pad-l-sm { padding-left: var(--sb-gutter) !important; } .pad-l { padding-left: var(--sb-space-default) !important; } .pad-l-lg { padding-left: var(--sb-space-lg) !important; } .pad-r-0 { padding-right: 0 !important; } .pad-r-sm { padding-right: var(--sb-gutter) !important; } .pad-r { padding-right: var(--sb-space-default) !important; } .pad-r-lg {padding-right: var(--sb-space-lg) !important;} .pad-r-xl {padding-right: var(--sb-space-xl) !important;} } /* ========================================================= PADDING — VERTICAL OFFSET (TOP / BOTTOM) (follows existing naming + tokens) ========================================================= */ .pad-y-offset-sm { padding-top: var(--sb-space-lg) !important; padding-bottom: var(--sb-space-sm) !important; } .pad-y-offset { padding-top: var(--sb-space-xl) !important; padding-bottom: var(--sb-space-default) !important; } .pad-y-offset-lg { padding-top: var(--sb-space-xl) !important; padding-bottom: 0px !important; } /* ========================================================= MARGIN VERTICAL (TOP / BOTTOM) ========================================================= */ .mar-y-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .mar-y-sm { margin-top: var(--sb-space-sm) !important; margin-bottom: var(--sb-space-sm) !important; } .mar-y { margin-top: var(--sb-space-default) !important; margin-bottom: var(--sb-space-default) !important; } .mar-y-lg { margin-top: var(--sb-space-lg) !important; margin-bottom: var(--sb-space-lg) !important; } /* ========================================================= MODULE LAYOUT SYSTEM (CENTER + WIDTH + CARD) ========================================================= */ /* ========================= CENTER MODULE ========================= */ .sb-wrap.has-module-center .sb-module { margin-left: auto; margin-right: auto; width: 100%; } /* ========================= WIDTH CONTROL ========================= */ .embed:has(.has-card), .content:has(.has-card) { max-width: 900px; } .embed:has(.has-card-sm), .content:has(.has-card-sm) { max-width: 700px; } .embed:has(.has-card-md), .content:has(.has-card-md) { max-width: 1000px; } .embed:has(.has-card-lg), .content:has(.has-card-lg) { max-width: 1200px; } .embed:has(.has-card-full), .content:has(.has-card-full) { max-width: var(--site-wide); } /* ========================= CARD STYLE ========================= */ .sb-wrap.has-card .sb-module { padding: var(--sb-space-default); border-radius: 20px; background: var(--color-surface-soft); box-shadow: 0 10px 30px rgba(0,0,0,0.05); } /* ========================================================= GLOBAL SPACING + LAYOUT SYSTEM CMS-safe JS-free ========================================================= */ /* ========================================================= SB WRAP STRUCTURAL + BACKGROUND ========================================================= */ .sb-wrap { position: relative; margin: 0; padding: 0; clear: both; box-sizing: border-box; max-width: 100%; z-index: 0; background-position: 50% 0; background-size: cover !important; background-repeat: no-repeat; background-attachment: scroll !important; } /* ========================================================= SB MODULE BEFORE / AFTER (GRAPHICS) ========================================================= */ .sb-wrap::before, .sb-wrap::after, .sb-bg-graphic1-row::before, .sb-bg-graphic1-row::after, .sb-bg-graphic2-row::before, .sb-bg-graphic2-row::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* ========================================================= OVERLAY STACKING SAFETY ========================================================= */ /* Content layer */ .sb-wrap > *, .sb-module { position: relative; z-index: 2; } /* CTA safety */ .sb-module a.btn { position: relative; z-index: 3; } /* ========================================================= /*padd CMS WRAPPER RESET ========================================================= */ .body.body-innerstatic .wrapper { max-width: none !important; width: 100%; margin: 0; padding: 0; } /* ========================================================= SPACING TOKENS ========================================================= */ :root { --z-base: 1; --z-header: 100; --z-header-inner: 110; --z-nav: 120; --z-dropdown: 130; --z-overlay: 900; --z-modal: 1000; --sb-gutter: clamp(20px, 4vw, 32px); --sb-gutter-md: clamp(40px, 4vw, 32px); --sb-space-xs: clamp(8px, 1.5vw, 16px); --sb-space-sm: clamp(40px, 6vw, 64px); --sb-space-default: clamp(60px, 8vw, 120px); --sb-space-lg: clamp(104px, 10vw, 220px); --sb-space-xl: clamp(160px, 15vw, 360px); --site-max: 1425px; /* default container */ --site-wide: 1680px; /* optional wider */ --site-full-pad: clamp(20px, 4vw, 60px); --sb-space-top-sm: var(--sb-space-sm); --sb-space-top: var(--sb-space-default); --sb-space-top-lg: var(--sb-space-lg); --sb-space-bottom-xs: var(--sb-space-xs); --sb-space-bottom-sm: var(--sb-space-sm); --sb-space-bottom: var(--sb-space-default); --sb-space-bottom-lg: var(--sb-space-lg); --sb-hero-pad: clamp(60px, 6vw, 140px); /* Surfaces */ --surface-white: rgb(255 255 255 / 79%); --surface-dark: #000000; --surface-brand: #000000; /* brand-specific */ --surface-shadow: 0px 0px 1px 1px rgb(231 231 231); --surface-shadow-light: 0 1px 2px rgb(224 224 224 / 80%); --surface-shadow-md: 0 6px 16px rgba(0,0,0,.08); --surface-shadow-lg: 0 12px 28px rgba(0,0,0,.12); /* Core modes */ --color-brand: #3c3a38; /* overridden per site */ --color-light: #ffffff; --color-dark: #000000; /* BORDERS */ --color-border-brand: var(--color-brand-primary); --color-border-light: rgba(255,255,255,0.5); --color-border-light-solid: var(--color-light); /* Base usage */ --color-text-light: #ffffff; --color-text-dark: var(--color-dark); --color-bg: var(--color-light); --color-line: rgba(0,0,0,.15); --nav-toggle-color: #000; /* fallback */ --logo-sm: 250px; --logo-md: 350px; --logo-lg: 400px; --logo-xl: 800px; /* Base usage */ --font-body-light: 300; --font-body-regular: 400; --font-body-strong: 600; /* univeral icons */ --icon-sm: 50px; --icon-md: 90px; --icon-lg: 110px; --icon-xl: 290px; --gap-xs: 8px; --gap-sm: 12px; --gap-md: 20px; --gap-lg: 30px; --gap-xl: 50px; } /* ========================================================= NAV TOGGLE COLOR SYSTEM ========================================================= */ /* default */ .site-header { --nav-toggle-color: currentColor; } /* apply */ .nav-toggle__icon line { stroke: var(--nav-toggle-color); } /* states */ .site-header.is-lines-dark line, body.nav-open .site-header.is-lines-dark line { --nav-toggle-color: #000000; } .site-header.is-lines-light line, body.nav-open .site-header.is-lines-light line { --nav-toggle-color: #ffffff; } .site-header.is-lines-brand line, body.nav-open .site-header.is-lines-brand line { --nav-toggle-color: var(--color-brand); } /* gap utilities */ .gap-none{ --grid-gap:0; } .gap-sm{ --grid-gap:var(--gap-sm); } .gap-md{ --grid-gap:var(--gap-md); } .gap-lg{ --grid-gap:var(--gap-lg); } /* ========================================================= HEADER CTA VISIBILITY SYSTEM (header-based) ========================================================= */ /* Default: hide all CTAs */ .site-header .site-header__cta .tool-link--address, .site-header .site-header__cta .btn-ph, .site-header .site-header__cta .btn-cta { display: block; } /* Show Address */ .site-header.has-address .tool-link--address { display: flex; } /* Show Phone */ .site-header.has-phone .btn-ph { display: inline; } /* Show Book CTA */ .site-header.has-cta .btn-cta:not(.btn-ph) { display: inline; } /* ========================================================= GLOBAL HAS — SPACING PRESETS (LEGACY — KEEP) (margin-based utilities) ========================================================= */ /* Even edges */ .has-space-sm { margin-top: var(--sb-space-sm)!important; margin-bottom: var(--sb-space-sm)!important; } .has-space-lg { margin-top: var(--sb-space-lg); margin-bottom: var(--sb-space-lg); } /* Bottom edge */ .has-space-bottom-sm { margin-bottom: var(--sb-space-bottom-sm); } /* CMS-driven row spacing (legacy hook) */ #page-home .sb-wrap.sb-has-space-bottom-row > .sb-module { padding-bottom: var(--sb-space-bottom); padding-top: var(--sb-space-bottom-xs); } .has-space-bottom-lg { margin-bottom: var(--sb-space-bottom-lg); z-index: 2; } /* Top edge */ .has-space-top-sm { margin-top: var(--sb-space-top-sm); } .has-space-top-lg { margin-top: var(--sb-space-top-lg); } /* ========================================================= FULL SECTION RHYTHM (LEGACY — KEEP) ========================================================= */ /* tightened selector to avoid bleed */ #page-home .sb-wrap.sb-bg-image1-row > .sb-module, #page-home .sb-wrap.sb-bg-image2-row > .sb-module, #page-home .sb-wrap.sb-bg-image3-row > .sb-module, #page-home .sb-wrap.sb-accent-lite1-row > .sb-module, #page-home .sb-wrap.sb-accent-lite2-row > .sb-module, #page-home .sb-wrap.sb-accent-lite3-row > .sb-module, #page-home .sb-wrap.sb-has-space-row > .sb-module, .sb-has-space-y-row > .sb-module, .sb-bg-full-row > .sb-module { padding: var(--sb-space-default) var(--sb-gutter); } .container > .columns .content { padding: 0; } /* tightened selector to avoid bleed */ #page-home .sb-gallery-row.sb-wrap > .sb-module:not(.col-wrap) { padding: var(--sb-space-sm) var(--sb-gutter); } /* ========================================================= MOBILE COLUMN STACK SPACING ========================================================= */ @media (max-width: 948px) { .sb-wrap .sb-col + .sb-col { margin-top: var(--sb-space-xs); } } /* Bottom edge */ .has-space-bottom-sm { margin-bottom: var(--sb-space-bottom-sm); } #page-home .sb-wrap.sb-has-space-bottom-row > .sb-module {padding-bottom: var(--sb-space-bottom);padding-top: var(--sb-space-bottom-xs);} #page-home .sb-wrap.sb-has-space-top-row > .sb-module {padding-bottom: var(--sb-space-bottom-xs);padding-top: var(--sb-space-top-xs);} #page-home .sb-wrap.sb-has-space-0-row > .sb-module {padding-bottom: 0px;padding-top: 0px;} /* Top outer space */ #page-home .sb-wrap.sb-has-space-top-sm-row {padding-bottom: 0px;padding-top: var(--sb-space-xs);} #page-home .sb-wrap.sb-has-space-top-sm-row .has-space-top-sm, #page-home .sb-wrap.sb-has-space-top-sm-row > .sb-module {padding-bottom: 0px;padding-top: 0px;!important; margin-top: 0px!important;margin-bottom: 0px!important;} /* Top edge */ .has-space-top-sm {margin-top: var(--sb-space-top-sm);} .has-space-top { margin-top: var(--sb-space-top); } .has-space-top-lg { margin-top: var(--sb-space-top-lg); } /* ========================================================= LEGACY PAD CLEANUP ========================================================= */ #page-home [class*="sb-accent-lite"] > .sb-module .pad-y, #page-home [class*="sb-accent-lite"] > .sb-module .pad-y-offset-sm { padding: 0px!important; } /* ========================================================= CMS ONLY — FULL BG MODULE SPACING ========================================================= */ .page-app .sb-module.sb-bg-full { padding-top: var(--sb-space-default); padding-bottom: var(--sb-space-default); } /* ========================================================= MAXWIDTH NORMALIZATION ========================================================= */ #page-home .sb-gallery-row .sb-gallery, .sb-wrap.sb-maxwidth-row > .sb-module { max-width: var(--site-max); margin-inline: auto; } /* readable content wrapper */ .sb-maxwidth-row .sb-module.col-wrap{ max-width: var(--site-max); margin-inline: auto; padding-inline: var(--sb-gutter); } /* kill nested padding */ .sb-maxwidth-row .sb-module.col-wrap .sb-module { padding: 0 !important; } /* ========================================================= NO SECTION PADDING — MEDIA ROWS ========================================================= */ /* fixed missing dot on .sb-module */ #page-home .sb-carousel-wrapper-row .sb-module { padding-top: 0; padding-bottom: 0; } /* mobile stacking rhythm (secondary pass) */ @media (max-width: 948px) { .sb-wrap .sb-col + .sb-col { margin-top: var(--sb-space-default); } } /* ========================================================= MODULE BASE SPACING (CORE — KEEP) ========================================================= */ /* homepage modules */ #page-home .sb-wrap > .sb-module { padding: var(--sb-space-default) var(--sb-gutter) 0; box-sizing: border-box; } /* global fallback module spacing */ .sb-module { padding: calc(var(--sb-space-sm) * 0.5) var(--sb-gutter) calc(var(--sb-space-sm) * 0.5); box-sizing: border-box; } /* mobile reset */ @media (max-width: 948px) { body:not(#page-home) .sb-col .sb-module { padding: 0px; } } /* ========================================================= BLOG MODULE — EQUAL TOP/BOTTOM SPACING ========================================================= */ /* row-level (preferred) */ .sb-blogrecentposts-row .sb-module { padding-top: var(--sb-space-default)!important; padding-bottom: var(--sb-space-default)!important; } /* ========================================================= CONTENT BLOCK NORMALIZATION ========================================================= */ .sb-content-block { padding: var(--sb-space-xs) 0; box-sizing: border-box; } @media (min-width: 949px) { .sb-content-block { padding: var(--sb-space-default) var(--sb-gutter) 0; box-sizing: border-box; } } /* desktop column reset */ @media (min-width: 949px) { .sb-col .sb-module { padding: 0; } } /* ========================================================= NEW SPACING SYSTEM — OVERRIDES (PRIMARY CONTROL) (use on sb-wrap — overrides ALL above safely) ========================================================= */ /* no spacing */ .sb-wrap.has-space-0 > .sb-module { padding: 0 !important; margin: 0 !important; } /* default spacing */ .sb-wrap.has-space > .sb-module { padding-top: var(--sb-space-default) !important; padding-bottom: var(--sb-space-default) !important; padding-left: var(--sb-gutter) !important; padding-right: var(--sb-gutter) !important; } /* top only */ .sb-wrap.has-space-t > .sb-module { padding-top: var(--sb-space-default) !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* bottom only */ .sb-wrap.has-space-b > .sb-module { padding-top: 0 !important; padding-bottom: var(--sb-space-default) !important; padding-left: 0 !important; padding-right: 0 !important; } /* ========================================================= /*padd FLEX SAFETY (CMS FRIENDLY) ========================================================= */ .box, .box-inner, .content, .embed, .sb-module { min-width: 0; box-sizing: border-box; margin-left: auto!important; margin-right: auto!important; max-width: 100%; } /* ========================================================= CENTERED CONTENT ROWS ========================================================= */ @media (min-width: 768px) { .sb-content-intro-row, .sb-feature-about1-row, .sb-feature-about2-row, .sb-feature-about3-row, .sb-feature-cta1-row, .sb-feature-cta2-row, .sb-feature-cta3-row { display: flex; justify-content: center; } } /* ========================================================= CARD / GRID ROWS ========================================================= */ .sb-feature-plans1-row, .sb-feature-plans2-row, .sb-icon-steps-row { display: flex; justify-content: center; } .sb-feature-plans1 > div, .sb-feature-plans2 > div, .sb-icon-steps > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } /* ========================================================= MEDIA ROWS (NO SPACING) ========================================================= */ .sb-feature-gallery-row, .sb-gallery-row, .sb-instagram-row, .sb-carousel-wrapper-row, .sb-video-row, .sb-image-row { position: relative; } /* ========================================================= LEGACY CMS COLUMN SUPPORT ========================================================= */ .sb-wrap > .sb-col { float: left; width: auto; max-width: none; } /* ========================================================= MODERN LAYOUT OPT-IN ========================================================= */ .flex-row > .sb-col, .sb-cols > .sb-col { float: none; width: auto !important; max-width: none !important; flex: 1 1 auto; } /* ========================================================= /*padd SPLIT ROWS EVEN COLUMNS ========================================================= */ @media (min-width: 768px) { .col-wrap, .sb-content-intro-row, .sb-feature-about1--split-row, .sb-feature-about2--split-row, .sb-feature-about3--split-row { display: flex; align-items: flex-start; gap: clamp(32px, 5vw, 64px); } .sb-content-intro-row .sb-module .sb-col, .sb-feature-about1--split-row > .sb-col, .sb-feature-about2--split-row > .sb-col, .sb-feature-about3--split-row > .sb-col { float: none; width: auto !important; max-width: none !important; flex: 1 1 0; } } /* ========================================================= /*padd BOOTSTRAP / CMS NEUTRALIZATION (SCOPED) ========================================================= */ .sb-wrap .row, .sb-wrap [class*="col-"]:not(.col-wrap) { margin: 0; padding: 0; } .sb-wrap [class*="col-"]:not(.sb-col) { float: none; width: auto; } /* ========================================================= Global Has - GLOBAL ICON SYSTEM ========================================================= */ /* normalize icon images */ .has-icons img{ /* display:block; */ margin-left:auto; margin-right:auto; object-fit:contain; border-radius: 0px!important; } /* default icon size */ .has-icons img{ width:var(--icon-md); height:var(--icon-md); } /* size modifiers */ .has-icons.icon-sm img{ width:var(--icon-sm); height:var(--icon-sm); } .has-icons.icon-md img{ width:var(--icon-md); height:var(--icon-md); } .has-icons.icon-lg img{ width:var(--icon-lg); height:var(--icon-lg); } .has-icons.icon-xl img{ width:var(--icon-xl); height:var(--icon-xl); } /* mobile scale */ @media (max-width:948px){ .has-icons.icon-md img, .has-icons img{ width:var(--icon-md); height:var(--icon-md); } .has-icons.icon-xl img, .has-icons.icon-lg img{ width:var(--icon-md); height:var(--icon-md); } } /* ========================================================= MOBILE (DEFAULT) — STACKED ========================================================= */ .has-inline-group { display: block; } /* ========================================================= DESKTOP (949+) — INLINE SYSTEM ========================================================= */ @media (max-width: 948px) { .has-inline-group { margin: auto; align-items: center; } .has-inline-group span { display: block; margin: auto; text-align: center; } .has-inline-group span * { font-size: 10px!important; } } @media (min-width: 949px) { .has-inline-group { display: flex; align-items: center; } /* spacing */ .has-inline-group-gap-sm { gap: 8px; } .has-inline-group-gap-md { gap: 12px; } .has-inline-group-gap-lg { gap: 20px; } /* dividers */ .has-inline-group-dividers > *:not(:last-child)::after { content: "|"; margin: 0 10px; opacity: 0.6; } /* distribution */ .has-inline-group.is-between { justify-content: space-between; } .has-inline-group.is-around { justify-content: space-around; } .has-inline-group.is-even { justify-content: space-evenly; } } /*==================================================================================*/ /* INTERIOR FIRST MODULE HERO PADDING */ /*==================================================================================*/ body:not(#page-home) .sb-seamlessbox-row .sb-module { padding: var(--sb-space-default) var(--sb-gutter); } @media (min-width: 949px) { body:not(#page-home) .sb-seamlessbox-row .sb-module { padding: var(--sb-space-lg); } } /* ========================================================= EMPTY SPACER ROW SYSTEM Layout-only, CMS-safe, editor-controlled ========================================================= */ body.page-app .sb-spacerdiv-row { display: none; width: 100%; height: var(--sb-space-default); min-height: var(--sb-space-default); pointer-events: none; } /* Size modifiers (optional) */ .sb-spacerdiv-row.sb-space-xs { height: var(--sb-space-xs); min-height: var(--sb-space-xs); } .sb-spacerdiv-row.sb-space-sm { height: var(--sb-space-sm); min-height: var(--sb-space-sm); } .sb-spacerdiv-row.sb-space-lg { height: var(--sb-space-lg); min-height: var(--sb-space-lg); } .sb-spacerdiv-row.sb-space-xl { height: var(--sb-space-xl); min-height: var(--sb-space-xl); } /* Ensure no accidental padding/margins interfere */ body.page-app .sb-spacerdiv-row > * { display: none !important; } /* Optional: editor-only visual hint */ html:not(.js-ready) .sb-spacerdiv-row, body.page-app .sb-spacerdiv-row { outline: 1px dashed rgba(0, 0, 0, 0.15); background: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04) 10px, transparent 10px, transparent 20px ); } .page-app .sb-row .sb-module { width: 100%; } .sb-module.spacer-marked:before { content: "Spacing Div"; } .sb-module.spacer-marked { content: "Spacing Div"; display: block; background: color(srgb 0.95 0.95 0.95); border: 1px dotted color(srgb 0.554 0.554 0.554); margin: auto; position: relative; vertical-align: middle; text-align: center; padding: 0px!important; min-height: 100%!important; flex-grow: 1; } .sb-module.spacer-marked:before { content: "Spacing Div"; display: block; align-items: center; justify-content: center; position: relative; top: 50%; transform: translateY(-50%); position: absolute; left: 0px; right: 0px; } .sb-module.spacer-marked { content: "Spacing Div"; display: block; background: color(srgb 0.95 0.95 0.95 / 0.5); border: 1px dotted color(srgb 0.554 0.554 0.554); margin: auto; position: relative; vertical-align: top; text-align: center; padding: 40px 0px 40px!important; position: relative; } .sb-module.spacer-marked .sbuilder{ position: absolute; width: 100%; top: 0px; } @media (max-width: 948px) { .sb-col.empty { margin: 0px!important; } .sb-col.empty .sb-module { display: none; } } /* ========================================================= EQUAL HEIGHT COLUMNS SPACER AWARE Only affects rows with empty spacer columns ========================================================= */ .page-app .sb-row:has(> .sb-col.empty) { display: flex; align-items: stretch; } /* Kill float ONLY in this case */ .page-app .sb-row:has(> .sb-col.empty) > .sb-col { float: none; } /* Ensure empty column stretches */ .page-app .sb-row:has(> .sb-col.empty) > .sb-col.empty { display: flex; align-items: stretch; } /* Spacer module fills column height */ .page-app .sb-row:has(> .sb-col.empty) .sb-module.spacer-marked { flex: 1; min-height: 100%; } /* style bg for app only */ .page-app .accordion-list2, .page-app .accordion-list, .page-app .sb-bg-img { background: radial-gradient(circle, rgba(150, 150, 150, 0.2) 10%, rgb(83 83 83 / 34%) 70%), #f0f0f0; } /* ========================================================= SURFACE UTILITIES — GLOBAL (TOKEN-DRIVEN) Use on ANY module or element ========================================================= */ /* ---------------------------------------- FEATURE CARDS ---------------------------------------- */ body:not(#page-home) .sb-feature-cards1-row :where(.embed, .content) .feature-cards1.has-surface-white > div > div { background: var(--surface-white)!important; } .feature-cards1.has-surface-dark > div > div { background: var(--surface-dark); color: var(--color-light); } .feature-cards1.has-surface-brand > div > div { background: var(--color-brand-soft); } /* ===================================================== footer wrapper ===================================================== */ .footer .wrapper { width: 100%; padding-left: 30px; padding-right: 30px; } @media (min-width:949px) { .footer .wrapper { padding-left: 0px; padding-right: 0px; } } .footer-box, .footer-user-content { flex: 1 1 0; /* KEY LINE */ min-width: 0; } .footer .wrapper { justify-content: space-between; } .footer .wrapper:has(.footer-user-content:empty) { justify-content: flex-start; } /* ===================================================== BOTTOM BRANDING STRIP (OUTSIDE FOOTER) ===================================================== */ .by-optima { /* Reset text behavior */ display: flex !important; align-items: center; justify-content: flex-end; /* Full-width bar */ width: 100%!important; max-width: 100%; margin: 0; padding: 14px 24px; /* Visual style (light trim like example) */ background: #f4f5f6; color: #6b6f75 !important; font-size: 12px !important; line-height: 1.4; font-weight: 500; border-top: 1px solid rgba(0, 0, 0, 0.06); /* Kill legacy inline styles */ text-align: right; border-radius: 0; padding-right: 20px!important; } /* Link styling */ .by-optima a { color: inherit !important; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding-right: 2px; } /* Logo sizing */ .by-optima img { height: 34px; width: auto!important; display: block; opacity: 0.85; } /* Hover polish */ .by-optima a:hover img { opacity: 1; } /* Mobile handling */ @media (max-width: 768px) { .by-optima { justify-content: center; text-align: center; flex-wrap: wrap; } } /* --- Fix vertical misalignment of "by" text --- */ .by-optima { line-height: 34px !important; /* match logo height */ } .by-optima img { align-self: center; } .by-optima a { line-height: 34px; display: inline-flex; align-items: center; } .sb-bg-pattern-row { background-size: inherit!important; background-repeat: repeat; } body.page-app .sb-row { background-position: top center!important; background-size: cover!important; background-attachment: scroll; overflow: visible; z-index: 0; } @media screen and (max-width: 767px) { .sb--bgcover, .body, .footer { background-position: top center!important; background-size: cover!important; background-attachment: scroll; overflow: visible; z-index: 0; } } .sb--bgcover { background-position: 50% 0; background-size: cover!important; background-attachment: scroll!important; background-repeat: no-repeat; background-clip: padding-box; /* or border-box */ } .body { background-size: 100%!important; background-repeat: repeat!important; background-size:inherit!important; } /* ========================================================= FOUC PREVENTION — DISABLED IN CMS EDITOR ========================================================= */ /* Logo fade */ html.js-loading body:not(.page-app) #header-logo { opacity: 0; } html.js-ready body:not(.page-app) #header-logo { opacity: 1; transition: opacity 0.2s ease; } /* Hide modules before ready (LIVE ONLY) */ html:not(.js-ready) body:not(.page-app) .sb-module { opacity: 0; pointer-events: none; } /* Reveal modules */ html.js-ready body:not(.page-app) .sb-module { opacity: 1; transition: opacity 0.2s ease-out; pointer-events: auto; } /* Prevent carousel flash */ html.js-loading body:not(.page-app) .carousel, html.js-loading body:not(.page-app) .carousel-inner { opacity: 0; } html.page-app .sb-module { opacity: 1 !important; } /* Prevent carousel animation during initial JS setup */ html:not(.carousel-ready) .carousel-inner, html:not(.carousel-ready) .carousel-inner .item, html:not(.carousel-ready) .carousel-inner .carousel-item { transition: none !important; } /* Prevent CMS background-image from ever flashing */ html.js-loading .carousel-wrapper, html.js-loading .carousel-inner, html.js-loading .carousel-inner .item, html.js-loading .carousel-inner .carousel-item { background-image: none !important; } /* Carousel CLS guard */ .carousel-inner .item, .carousel-inner .carousel-item { min-height: 750px; position: relative; overflow: hidden; } .carousel-lcp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; } @media (max-width: 768px) { .carousel-lcp-img { animation: none !important; } } html.carousel-ready .carousel-lcp-img, html.js-ready .carousel-lcp-img { opacity: 1; transition: opacity 0.25s ease-out; } /* Disable motion until JS + LCP are ready */ html:not(.carousel-ready) .carousel-inner, html:not(.carousel-ready) .carousel-inner .item, html:not(.carousel-ready) .carousel-inner .carousel-item { transition: none !important; transform: none !important; } /* Overlay content stays above image */ .carousel-inner .item-inner, .carousel-inner .caption, .carousel-inner .text-overlay { position: relative; z-index: 2; } /* HARD KILL CMS CAROUSEL BACKGROUNDS */ #page-home .carousel-wrapper, #page-home .carousel-inner, #page-home .carousel-inner .item, #page-home .carousel-inner .carousel-item { background-image: none !important; } /* Default: header is transparent */ :where(html, body).has-header-overlay .site-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Only animate AFTER JS-ready */ html.js-ready :where(html, body).has-header-overlay .site-header { transition: background-color 0.28s ease, backdrop-filter 0.28s ease; } /* Scrolled state */ :where(html, body).has-header-overlay.header-scrolled .site-header { background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ========================================================= CAROUSEL HEADER LOGO ========================================================= */ html.has-carousel-logo .body:not(#page-home) #header-logo { visibility: hidden; } html.has-carousel-logo body#page-home .carousel .logo-icon { display: block; } .carousel-wrapper { background-color: #fff; } /* iframe control -------------------------------------------------*/ .sb-module iframe { width: 100%!important; } /*style iframe in fancybox*/ @media screen and (max-width:948px) { .fancybox-content iframe { width: 100%; height: 30vh; } } /* ========================================================= HEADER - TOOLBAR LINKS ========================================================= */ .site-header__main { justify-content: flex-start; /* stop space-between */ } @media (max-width:948px) { .site-header__brand { margin-right: auto; } } /* group right side clean */ .tool-link--book, .nav-toggle { margin-left: 10px; } /* optional tighten spacing */ .site-header__main { gap: 12px; } .site-header__cta .tool-links { display: block; font-size: 13px; line-height: 19px!important; font-weight: 400; text-align: center; } @media (min-width:949px) { .site-header__cta .tool-links { display: block; font-size: 12px; line-height: 25px!important; font-weight: 400; } } .site-header__cta .tool-links a { margin: 0px 0px 0px 0px; font-size: 15px; line-height: 19px!important; font-weight: 500; display: inline; } @media (min-width: 949px) { .site-header__cta .tool-links a { margin: 0px 20px 0px 0px; font-size: 13px; line-height: 19px!important; font-weight: 600; text-align: center; } } .site-header__cta .tool-links a.phone { white-space: nowrap; } .site-header__cta .tool-links a .icon-map { display: inline-flex; align-items: center; gap: 8px; } .site-header__cta .tool-links a .icon-map { width: 18px; height: 18px; color: currentColor; /* inherits link color */ } /* ============================== MAP SPLIT HERO (LAYOUT ONLY) ============================== */ /* no top spacing home only */ #page-home .has-space-top-lg.interior { margin-top: 0px; } .map-split { position: relative; display: grid; grid-template-columns: 60% 40%; height: 100%; overflow: hidden; width: 100%; margin-left: auto; margin-right: auto; border-radius: 30px; background: left center; align-items: center; align-self: center; } /* MAP SIDE */ .map-frame { position: relative; overflow: hidden; } .map-frame iframe { min-height: 500px; filter: brightness(100%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg); border: none; line-height: 1; margin: 0px; max-width: 100%; width: 100%; transform: translateX(0); height: 400px; border-radius: 30px; } /* MOBILE */ @media (max-width: 900px) { .map-split { grid-template-columns: 1fr; height: auto; margin-left: 0px; margin-right: 0px; width: inherit; } .map-frame iframe { position: relative; width: 100%; height: 320px; transform: none; } /* CONTENT SIDE */ .contact-block { position: relative; z-index: 2; display: flex; align-items: center; } .contact-block .content { width: 100%; } .contact-block .content h2 { font-weight: 600; } .contact-block .content { width: 100%; } } /* ===================================================== CONTACT CONTENT TYPOGRAPHY ===================================================== */ .contact-block .content h1 { font-size: 2em !important; line-height: 1.3em !important; font-weight: 400; } @media (min-width: 768px) { .contact-block .content h1 { font-size: 2em !important; line-height: 1.3em !important; } } /* ===================================================== CONTACT CONTENT ADDRESS / PHONE / EMAIL (CHILD-SCOPED, NOT MAP-DEPENDENT) ===================================================== */ /* Shared row behavior */ .contact-block .content a.map, .contact-block .content a.phone, .contact-block .content a.mail, .contact-block .content .hours::before { display: grid; grid-template-columns: 18px 1fr; column-gap: 20px; align-items: start; text-decoration: none; margin-bottom: 14px; line-height: 1.55; } /* ICON COLUMN */ .contact-block .content a.map::before, .contact-block .content a.phone::before, .contact-block .content a.mail::before, .contact-block .content .hours::before { content: ""; width: 16px; height: 16px; background: var(--color-brand-primary); grid-column: 1; margin-top: 2px; } /* TEXT COLUMN */ .contact-block .content a.map .address-text, .contact-block .content a.phone span, .contact-block .content a.mail span { grid-column: 2; display: block; } /* Ensure wrapped address lines align cleanly */ .contact-block .content a.map .address-text span { display: inline; } /* ===================================================== CONTACT CONTENT DIVIDER ===================================================== */ .contact-block .content hr { display: block; height: 1px; border: 0; opacity: 0.2; margin: 35px 0; } /* ===================================================== ICON MASKS (UNCHANGED SVGs) ===================================================== */ /* ADDRESS */ .contact-block .content a.map::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E") no-repeat center; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E") no-repeat center; } /* PHONE */ .contact-block .content a.phone::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1v3.5a1 1 0 0 1-1 1C10.07 21 3 13.93 3 5.5a1 1 0 0 1 1-1H7.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.59a1 1 0 0 1-.25 1.01l-2.2 2.19z'/%3E%3C/svg%3E") no-repeat center; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1v3.5a1 1 0 0 1-1 1C10.07 21 3 13.93 3 5.5a1 1 0 0 1 1-1H7.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.59a1 1 0 0 1-.25 1.01l-2.2 2.19z'/%3E%3C/svg%3E") no-repeat center; } /* EMAIL */ .contact-block .content a.mail::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center; } /* ===================================================== CONTACT CONTENT HOURS GRID ===================================================== */ .contact-block .content .hours-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 15px; row-gap: 6px; max-width: 310px; margin-top: 16px; margin-bottom: 16px; } .contact-block.feature-cards1 .content .hours-grid { max-width: 100% } /* ============================== MAP SPLIT COLORS + TYPOGRAPHY ============================== */ .map-split .contact-block span, .map-split .contact-block p, .map-split .contact-block a { font-size: 13px!important; line-height: 1.5!important; } .map-split .contact-block { position: relative; z-index: 2; display: flex; align-items: center; background: #d7d7d7; } .map-split .contact-block .content { width: 100%; } /* ===================================================== CONTACT FEATURE GRID ===================================================== */ .contact-block.has-contact-cards .content a.map::before, .contact-block.has-contact-cards .content a.phone::before, .contact-block.has-contact-cards .content a.mail::before, .contact-block.has-contact-cards .content .hours::before{ content: ""; width: 30px; height: 30px!important; grid-column: 1; /* margin-top: 2px; */ z-index: 1; } .contact-block.has-contact-cards .contact-card{ position:relative; display:grid; grid-template-columns:60px 1fr; gap:16px; align-items:start; } /* circle */ .contact-block.has-contact-cards .contact-card::before{ margin: 0px!important; content:""; width:60px; height:60px; border-radius:50%; display: flex!important; align-items:center; justify-content:center; -webkit-mask-position: center!important; mask-position: center!important; -webkit-mask-size:24px; mask-size:24px; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; height: 40%!important; margin-top: 0px!important; z-index: 2!important; } /* icon */ .contact-block.has-contact-cards .contact-card::after{ content:""; position:absolute; width:60px; height:60px; left: 0px; top: 0px; border-radius: 50px; background-color: var(--color-brand-accent); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-position:center; mask-position:center; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; z-index: -1; } .contact-block.has-contact-cards .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px 40px; margin-top: 30px; margin-left: auto; max-width: 1200px; margin-right: auto; } @media (max-width:768px){ .contact-block.has-contact-cards .contact-grid{ grid-template-columns:1fr; gap: 55px; margin: 0px; } .contact-block.has-contact-cards .contact-card{ grid-template-columns:60px 1fr; align-items:center; } } /* ===================================================== CONTACT CARDS ===================================================== */ .contact-block.has-contact-cards .contact-card{ display:flex!important; align-items: center!important; gap: 18px!important; text-decoration:none; text-align: left!important; } /* ===================================================== ICON CIRCLE ===================================================== */ .contact-block.has-contact-cards .contact-card::before{ content:""; width:60px; height:60px; flex: 0 0 60px; border-radius:50%; display:block; } /* ===================================================== ICON MASK SETTINGS ===================================================== */ .contact-block.has-contact-cards .contact-card::before{ -webkit-mask-size:22px; mask-size:22px; -webkit-mask-position:center; mask-position:center; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } /* ===================================================== TEXT BLOCK ===================================================== */ .contact-block.has-contact-cards .contact-text{ display:block; line-height:1.45; } /* ===================================================== HOURS GRID ===================================================== */ .contact-block.has-contact-cards .hours-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:14px; row-gap:4px; max-width:none; font-size:.95em; } /* ===================================================== ADDRESS ICON ===================================================== */ .contact-card.map::before{ background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E"); mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E"); } /* ===================================================== PHONE ICON ===================================================== */ .contact-card.phone::before{ background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1v3.5a1 1 0 0 1-1 1C10.07 21 3 13.93 3 5.5a1 1 0 0 1 1-1H7.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.59a1 1 0 0 1-.25 1.01l-2.2 2.19z'/%3E%3C/svg%3E"); mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1v3.5a1 1 0 0 1-1 1C10.07 21 3 13.93 3 5.5a1 1 0 0 1 1-1H7.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.59a1 1 0 0 1-.25 1.01l-2.2 2.19z'/%3E%3C/svg%3E"); } /* ===================================================== EMAIL ICON ===================================================== */ .contact-card.mail::before{ background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E"); mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E"); } /* ===================================================== HOURS ICON ===================================================== */ .contact-card.hours::before{ background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1zm1 11h5v2h-7V6h2z'/%3E%3C/svg%3E"); mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1zm1 11h5v2h-7V6h2z'/%3E%3C/svg%3E"); } /* ===================================================== contact - list ===================================================== */ .has-contact-list #logoimg { margin-bottom: 60px; max-width: 300px!important; display: block; } .has-contact-list a { font-size: 20px; column-gap: 20px; margin-bottom: 20px; } .has-contact-list a::before { height: 30px!important; width: 30px!important; margin-right: 30px!important; } /*==================================================================================*/ /* add before element property */ /*==================================================================================*/ header .logo, .content h1, .sb-embed h1, .content h2, .sb-module .headline h2 { position: relative; } .testimonials figure:before, .sb-testimonials-row .testimonials:before, .image-row-one-wrap .image:before, .carousel-wrapper .item-content .item-content-inner:before, .gallery-item:before, header .logo:before, .carousel .item-content h2:before, body:not(.page-app) .content h1:before, body:not(.page-app) .sb-embed h1:before, body:not(.page-app) .content h2:before, .sb-module .headline h2:before { content: ""; height: 100%; position: absolute; top: 0px; left: 0; width: 100%; z-index: 0; margin: 0px; right: 0px; } /* transition speeds -------------------------------------------------*/ a, input, .tab-sm i, a i, .header, .header .header-inner, #header-logo, .header .nav, .toolbar-links, .header .cta .phone, .header .cta a, .sb-module *:not(.slick-slide):not(.slick-list):not(.slick-track):not(.module-mini-cta):not([class*='col-']), .sb-gallery div, *:before, *:after, #logoimg, .nav .dropdown-wrapper, .header-inner > .row, .sb-feature-cta-col-row .sb-col, .sb-feature-cards1-row .sb-col, .sb-feature-cards2-row .sb-col, .sb-feature-services-row .sb-col, .hamburger-box, .module-mini-cta [class*='col-'] a, .sb-feature-services-row .sb-col-wrap:before { -webkit-transition: all .45s cubic-bezier(0.25, 1, 0.33, 1)!important; -moz-transition: all .45s cubic-bezier(0.25, 1, 0.33, 1)!important; transition: all .45s cubic-bezier(0.25, 1, 0.33, 1)!important; } .header { display: none; } /* ========================================================= FOUC PREVENTION + FADE-IN ========================================================= */ /* Initial hidden state */ html.js-loading body { opacity: 0; } /* Ready fade in */ html.js-ready body { opacity: 1; transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1); } /* ================================================= HEADER LOGO CLS SAFE BASELINE (FINAL) ================================================= */ /* Brand container */ .site-header__brand { display: flex; align-items: flex-end; } body { /* HEADER LOGO */ --header-logo-height: 60px; --header-logo-height-desktop: 110px; /* CAROUSEL LOGO */ --carousel-logo-height: 200px; --carousel-logo-height-desktop: 400px; } /* Header logo container controls size */ #header-logo { height: var(--header-logo-height); display: flex; align-items: center; overflow: hidden; /* clamps tall / wide logos */ } /* Mobile default (implicit) */ #header-logo { height: var(--header-logo-height); } /* Desktop override */ @media (min-width: 949px) { #header-logo { height: var(--header-logo-height-desktop); } } /* Mobile default */ body#page-home .carousel .logo { height: var(--carousel-logo-height); } /* Desktop override */ @media (min-width: 949px) { body#page-home .carousel .logo { height: var(--carousel-logo-height-desktop); } } /* Logo obeys container height, NOT width */ #header-logo { display: flex; align-items: center; } #header-logo * { height: 100%; } #header-logo img, #header-logo svg { height: 100%!important; width: auto; max-width: none !important; padding: 5px 0px; } @media (min-width: 949px) { #header-logo img, #header-logo svg { padding: 10px 0px; } } /* FIX LOGO LINK CLICKING */ .header { display: block; /* or remove rule entirely */ } header .logo::before, header .logo::after, #header-logo::before, #header-logo::after { pointer-events: none; } #header-logo a { position: relative; z-index: 5; } /* ================================================= HEADER LOGO - Container ================================================= */ body#page-home .carousel .logo img { height: 100% !important; width: auto; max-width: none !important; } /*==================================================================================*/ /* heading -- h3 stylized variation 1 */ /*==================================================================================*/ .content h3, .embed h3 { font-size: 22px; line-height: 1.3em; } @media (min-width: 949px) { .content h3, .embed h3 { font-size: 24px; } } body .content h3, body .sb-embed h3 { font-family: Times, Georgia, serif; font-weight: 400; font-style: italic; padding-bottom: 15px!important; } @media (min-width: 949px) { body .content h3, body .sb-embed h3 { padding-bottom: 10px!important; } } /*==================================================================================*/ /* heading -- default 2*/ /*==================================================================================*/ .content h1, .headline h1, .post .entry h1, .post h2.title, .post h1.title, .post h2 { text-transform: capitalize; } .content h1, .sb-embed h1, .content h2, .sb-module .headline h2, .footer h2, .sb-module h2, .content h2 { font-size: 30px!important; line-height: 42px!important; font-weight: 500; letter-spacing: 0px; text-transform: capitalize; text-align: left; /* width: 90%;*/ margin: 0px auto; } @media (min-width: 768px) { .content h1, .sb-embed h1, .content h2, .sb-module .headline h2, .footer h2, .sb-module h2, .content h2 { font-size: 1.5em!important; line-height: 1.2em!important; font-weight: 500; width: initial; margin: 0px; } } .content-intro h1, .content h1, .sb-embed h1 { font-size: 22px!important; line-height: 42px!important; } @media (min-width: 768px) { .content-intro h1, .content h1, .sb-embed h1 { font-size: 50px!important; line-height: 60px!important; } } .content h1 span, .content h2 span, .content h1 strong, .content h2 strong, body:not(.page-app) .text--white h2 span { font-weight: 400!important; } /* home*/ /* h1 */ :where(html, body).has-heading-color .content h1 { font-size: 1.5em!important; line-height: 1.1em!important; } @media (min-width: 768px) { :where(html, body).has-heading-color .content h1 { font-size: 2em!important; line-height: 1.2em!important; } } /* h4 */ body .content h4 { font-size: 1.1em!important; line-height: 1.2em!important; } @media (min-width: 768px) { body .content h4 { font-size: 1.4em!important; line-height: 1.5em!important; } } .content h1 + *{ margin-top:.7em; } body:not(#page-home) * + h2 { margin-top: 1.6em; margin-bottom:0em; padding: 0px!important; } /*==================================================================================*/ /* BUTTON SYSTEM  Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â€šÂ¬Ã…¡Ã‚¬šÃ‚¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚¬Ã‚ MODERN CORE (CMS SAFE / NON-LEGACY) */ /*==================================================================================*/ /* ===================================================== 0) BASE BUTTON RESET ===================================================== */ a.btn, .btn, .carousel a, .sb-read-tag { text-decoration: none; outline: none; border: 1px solid; border-radius: 50px; font-size: 14px; font-weight: 500; line-height: 20px; text-transform: uppercase; display: inline-block; padding: 16px 38px; transform: translateY(0); box-shadow: 0 6px 12px rgba(0,0,0,0); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } /* Desktop refinement */ @media (min-width: 768px) { a.btn, .btn, .carousel a, .sb-read-tag { padding: 14px 42px; } } /* ===================================================== 1) FLOW SPACING (REPLACES BUTTON GROUP LOGIC) ===================================================== */ :where(.sb-module, .content, .embed) a.btn, :where(.sb-module, .content, .embed) .carousel a { margin-top: 1rem; } :where(.sb-module, .content, .embed) a.btn + a.btn, :where(.sb-module, .content, .embed) .carousel a + a { margin-top: 1rem; } /* ===================================================== 2) INTERACTION MOTION ===================================================== */ a.btn:hover, .btn:hover, .carousel a:hover, .sb-read-tag:hover, a.btn:focus-visible, .btn:focus-visible, .carousel a:focus-visible, .sb-read-tag:focus-visible { text-decoration: none; transform: translateY(-4px); box-shadow: 0 5px 10px rgba(0,0,0,0); } /* ===================================================== 3) HOVER TINT LAYER (THEME SAFE) ===================================================== */ a.btn, .btn, .carousel a, .sb-read-tag { position: relative; overflow: hidden; } a.btn::before, .btn::before, .carousel a::before, .sb-read-tag::before { content: ""; position: absolute; inset: 0; background: transparent; pointer-events: none; z-index: 0; transition: background .25s ease; } a.btn > *, .btn > *, .carousel a > *, .sb-read-tag > * { position: relative; z-index: 1; } a.btn:hover::before, .btn:hover::before, .carousel a:hover::before, a.btn:focus-visible::before, .btn:focus-visible::before, .carousel a:focus-visible::before { background: rgba(255, 255, 255, 0.12); } /* Submit inputs */ input[type="submit"]:hover { box-shadow: inset 0 0 0 999px rgba(255,255,255,0.12); } /* ===================================================== 4) SIZE MODIFIERS ===================================================== */ .btn-sm { font-size: 12px; padding: 6px 14px; } .btn-lg { font-size: 18px; padding: 18px 45px; } /* ===================================================== 5) STYLE VARIANTS ===================================================== */ /* Minimal */ .btn-minimal { background: transparent; border-width: 1px; letter-spacing: 1px; } /* Solid */ .btn-solid { background: currentColor; color: #fff; } /* Text-style */ .btn-text { background: transparent; border: 0; padding: 0; text-transform: capitalize; font-size: 18px; font-weight: 700; text-decoration: underline; border-radius: 0; } /* Square */ .btn-square { border-radius: 0; } /* Soft */ .btn-soft { border-radius: 10px; } /* ===================================================== 6) ARROW / ICON VARIANT ===================================================== */ .btn-arrow { display: inline-flex; align-items: center; gap: .65em; padding-right: 1.8em; } .btn-arrow::after { content: ""; width: 1em; height: 1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4 L12 12 L4 20 Z M12 4 L20 12 L12 20 Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4 L12 12 L4 20 Z M12 4 L20 12 L12 20 Z'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s ease; } .btn-arrow:hover::after { transform: translateX(2px); } /* ===================================================== 7) DECORATIVE INLINE ICON LINKS ===================================================== */ /* Map */ a.map { display: inline-flex; align-items: center; gap: .4em; } a.map::before { content: ""; width: 1.05em; height: 1.25em; background: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-3.866 0-7 3.134-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7zm0 10.2a3.2 3.2 0 1 1 0-6.4 3.2 3.2 0 0 1 0 6.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-3.866 0-7 3.134-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7zm0 10.2a3.2 3.2 0 1 1 0-6.4 3.2 3.2 0 0 1 0 6.4z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Phone */ a.phone { display: inline-flex; align-items: center; gap: .4em; } a.phone::before { content: ""; width: 1em; height: 1em; background: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.07 21 3 13.93 3 5a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.59a1 1 0 0 1-.24 1.01l-2.2 2.19z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.07 21 3 13.93 3 5a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.59a1 1 0 0 1-.24 1.01l-2.2 2.19z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* ===================================================== 8) EXTERNAL / NEW-WINDOW BUTTON ICON Adds an indicator to buttons using target="_blank" ===================================================== */ .carousel a[target="_blank"], a.btn[target="_blank"]{ padding-right: 35px; /* adds space for icon */ } .site-header__cta a.btn[target="_blank"]{ padding: 9px 15px 9px 25px; /* adds space for icon */ } .carousel a[target="_blank"] { padding-right: 25px; /* adds space for icon */ } .carousel a[target="_blank"]::after, a.btn[target="_blank"]::after{ content:""; display:inline-block; width:20px; height:20px; vertical-align:-4px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/%3E%3Cpath d='M5 5h6v2H7v10h10v-4h2v6H5z'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/%3E%3Cpath d='M5 5h6v2H7v10h10v-4h2v6H5z'/%3E%3C/svg%3E") center / contain no-repeat; margin-left: 10px; } /* ===================================================== EXTERNAL LINKS CONTENT ONLY ===================================================== */ /* icon */ .content p a[target="_blank"]::after { content:""; display:inline-block; width:16px; height:16px; margin-left:6px; vertical-align:-2px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/%3E%3Cpath d='M5 5h6v2H7v10h10v-4h2v6H5z'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/%3E%3Cpath d='M5 5h6v2H7v10h10v-4h2v6H5z'/%3E%3C/svg%3E") center / contain no-repeat; } /* ===================================================== 9) BUTTON STACK MODE Apply to parent/module to stack buttons vertically ===================================================== */ .is-btn-stack a.btn, .is-btn-stack .btn { display: block; width: 100%; margin-bottom: 10px; } .is-btn-stack a.btn:last-child, .is-btn-stack .btn:last-child { margin-bottom: 0; } /*==================================================================================*/ /* LINK LIST GRID SAFE (NO OVERFLOW, MOBILE SAFE) */ /*==================================================================================*/ .sb-has-space-y-row ul, .sb-content-intro-row ul, .sb-feature-about1-row ul, .sb-feature-about2-row ul { list-style: disc; margin: 0; padding: 0; } .sb-has-space-y-row li, .sb-content-block-row li, .sb-content-intro-row li, .sb-feature-about1-row li, .sb-feature-about2-row li { margin: 0; padding: 0; margin-left: 20px; border-bottom: 1px solid rgb(0 0 0 / 0%); } /* Anchor = grid container */ .sb-has-space-y-row li > a, .sb-has-space-row li > a, .sb-content-block-row li > a, .sb-content-intro-row li > a, .sb-feature-about1-row li > a, .sb-feature-about2-row li > a { display: grid; grid-template-columns: 1fr auto; /* text | arrow */ align-items: center; column-gap: 16px; padding: 14px 0; font-size: 18px; line-height: 1.5; font-weight: 500; text-decoration: none; /* HARD SAFETY */ max-width: 100%; overflow: hidden; } /* Arrow lives IN layout (no absolute positioning) */ .sb-has-space-y-row li > a::after, ..content li > a::after { content: ""; width: 26px; height: 16px; flex-shrink: 0; background-repeat: no-repeat; background-size: contain; background-position: center; pointer-events: none; background-color: #000; mask-image: url("data:image/svg+xml;utf8,\ \ \ "); mask-repeat: no-repeat; mask-size: contain; } /* Hover motion (desktop only, layout-safe) */ @media (min-width: 949px) { .sb-content-intro-row li > a:hover::after, .sb-feature-about1-row li > a:hover::after, .sb-feature-about2-row li > a:hover::after { transform: translateX(6px); } } /* Mobile sizing */ @media (max-width: 948px) { .sb-content-intro-row li > a, .sb-feature-about1-row li > a, .sb-feature-about2-row li > a { font-size: 16px; padding: 16px 0; } } /* Remove last divider */ .sb-content-intro-row li:last-child, .sb-feature-about1-row li:last-child, .sb-feature-about2-row li:last-child { border-bottom: none; } /* ===================================================== LIST COLUMNS CMS-SAFE (list-col / list-cols) ===================================================== */ @media (min-width: 949px) { .list-cols ul { display: block !important; /* kill flex/grid interference */ column-count: 2; column-gap: 60px; width: 100%; } .list-cols li { break-inside: avoid; -webkit-column-break-inside: avoid; } } /* Text Alignment Presets ******************/ .text-center, .text-center p, .text-center h1, .text-center h2, .text-center h3, .text-center .asset { text-align: center!important; } .text--center, .text--center p, .text--center h1, .text--center h2, .text--center h3, .text--center .asset { text-align: center!important; } @media (min-width:1001px) { .text--center, .text--center p, .text--center h1, .text--center h2, .text--center h4, .text--center h3, .text--center figure, .text--center .asset { text-align: center!important; } } .text--center h3::after { left: 50%!important; transform: translateX(-50%); } .text--center .slick-slide img { display: inline-block; } .text--center .tab-sm { text-align: center; } @media (min-width:1001px) { .sb-module.text--center .content a.map, .text--center p { margin-left: auto!important; /* margin-right: auto!important; */ } } .text--center .contact-block .content .hours-grid { margin: auto; } .sb-feature-cards1.text--center .cta-content { display: block; } .text--left img, .text--left, .text--left p:not(.sb-formfield), .text--left h1, .text--left h2, .text--left h3, .text--left img, .text--left figure, .text--left div, .text--left .content div, .text--left:not(.sb-gallery-row):not(.sb-image-row) div, .text--left .sb-module.sb-hoursofoperation .headline h2, .text--left:not(.sb-gallery-row) a:not(.btn) { text-align: left!important; } .text--left .sb-content img { margin: 0px!important; } .sb-feature-plans-row.text--center ul { text-align: left!important; } .text--center ul { padding-top: 20px; text-align: center!important; margin-left: 0em; } .text--center .text-center.list-compact ul { padding-top: 20px; text-align: left!important; margin-left: 0em; } .sb-feature-plans.text--center ul { padding-top: 0px; text-align: left!important; } .text--center li { /* list-style-position: inside; */ } .text--center i { display: inline-block; text-align: center; margin-left: 5px; position: relative; } .module-popup.text-center * { text-align: center!important; } .text-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; /* space between columns */ } @media (max-width: 768px) { .text-cols { grid-template-columns: 1fr; /* stack on small screens */ } } /*Module White Text Coloring*/ /*=========================================*/ body:not(.page-app) .text--white, body:not(.page-app) .text--white .content a:not(.btn-default), body:not(.page-app) .text--white p, body:not(.page-app) .text--white h1, body:not(.page-app) .text--white h2, body:not(.page-app) .text--white h3, body:not(.page-app) .text--white li, body:not(.page-app) .text--white li a, body:not(.page-app) .text--white i:not(.fa), body:not(.page-app) .text--white span, body:not(.page-app) .text--white strong, body:not(.page-app) .text--white blockquote:before, body:not(.page-app) .text--white .gallery *, body:not(.page-app) .feature-cards1.is-dark a { color: var(--color-text-light) !important; } body:not(.page-app) .text--white a.phone::before, body:not(.page-app) .text--white a.map::before, body:not(.page-app) .text--white a:after { background-color: rgb(255 255 255)!important; } body:not(.page-app) .text--white .accordion-list li { border-color: var(--color-border-light)!important; } body:not(.page-app) .text--white .content-intro ul a:after, body:not(.page-app) .text--white .feature-about1 ul a:after, body:not(.page-app) .text--white .feature-about2 ul a:after, body:not(.page-app) .text--white .sb-feature-about2-row ul a:after, body:not(.page-app) .text--white .sb-feature-about-row ul a:after { } body:not(.page-app) .text--white .btn { color: #ffffff!important; border-color: #fff!important; background-color: rgb(255 255 255 / 0%) !important; } body:not(.page-app) .text--white ul { border-color: var(--color-border-light-solid)!important; } body:not(.page-app) .text--white .has-icons img { filter: brightness(0) invert(1) contrast(1.1); } /*==================================================================================*/ /* row - maxwidth when narrow col active */ /*==================================================================================*/ .container >.columns.sb-maxwidth-row, #page-home .sb-gallery-row, .sb-maxwidth-row { position: relative; background-position-x: center; background-position-y: top; position: relative; left: 50%; right: 50%; margin-left: calc(-50vw); margin-right: calc(-50vw); width: 100vw; max-width: 100vw; border-radius: 0px!important; } .container >.columns.sb-maxwidth-row .map-frame { border-radius: 0px!important; padding: 40px; } /* ====================================================================== FEATURE FLAGS (has-*) ---------------------------------------------------------------------- Body-level switches injected by CMS / templates. All flags are preserved for compatibility. Behavior is intentionally minimal unless noted. ====================================================================== */ /* ========================================================= BODY WEIGHT MODIFIERS ========================================================= */ html.has-body-light, html.has-body-light .item-content, html.has-body-light .content p, html.has-body-light .content ul, html.has-body-light .gallery { font-weight: var(--font-body-light); } html.has-body-regular, html.has-body-regular .item-content, html.has-body-regular .content p, html.has-body-regular .content ul, html.has-body-regular .gallery { font-weight: var(--font-body-regular); } html.has-body-strong, html.has-body-strong .item-content, html.has-body-strong .content p, html.has-body-strong .content ul, html.has-body-strong .gallery { font-weight: var(--font-body-strong); } /* ---------------------------------------------------------------------- HEADINGS / TYPOGRAPHY VARIANTS ---------------------------------------------------------------------- */ /* has heading accents */ #page-home.has-heading-accent .content h1:before, #page-home.has-heading-accent .sb-embed h1:before, #page-home.has-heading-accent .sb-embed h2:before, #page-home.has-heading-accent .content h2:before, #page-home.has-heading-accent .sb-module .headline h2:before { border-left: 4px solid #363636; position: relative; width: 2px; height: 100%; -webkit-transform: translateY(0px) translateX(35px) rotate(32deg); top: 0px; left: -20px; } /* h1 -- large */ :where(html, body).has-heading-lg .sb-embed h1, :where(html, body).has-heading-lg .content h1, :where(html, body).has-heading-lg .text--white .content h1 { font-size: 1.8em!important; line-height: 1.2em!important; } @media (min-width: 768px) { :where(html, body).has-heading-lg .sb-embed h1, :where(html, body).has-heading-lg .content h1, :where(html, body).has-heading-lg .text--white .content h1 { font-size: 2.5em!important; line-height: 1.6em!important; } } @media (min-width: 768px) { :where(html, body).has-heading-lg .text--white .content h1 { font-size: 2.5em!important; line-height: 1.4em!important; } } /* h1 -- xlarge */ :where(html, body).has-heading-xl .sb-embed h1, :where(html, body).has-heading-xl .content h1{ font-size: 2.5em!important; line-height: 1.4em!important; } @media (min-width: 768px) { :where(html, body).has-heading-xl .sb-embed h1, :where(html, body).has-heading-xl .content h1{ font-size: 3.2em!important; line-height: 1.3em!important; } } /* h1 -- xlarge */ :where(html, body).has-heading-xxl .sb-embed h1, :where(html, body).has-heading-xxl .content h1{ font-size: 2.7em!important; line-height: 1.4em!important; } @media (min-width: 768px) { :where(html, body).has-heading-xxl .sb-embed h1, :where(html, body).has-heading-xxl .content h1{ font-size: 4.2em!important; line-height: 1.3em!important; } } /* h1 -- 300 */ :where(html, body).has-heading-100 .sb-embed h1, :where(html, body).has-heading-100 .content h1, :where(html, body).has-heading-100 .text--white .content h1 { font-weight: 100; } @media (min-width: 768px) { :where(html, body).has-heading-100 .sb-embed h1, :where(html, body).has-heading-100 .content h1, :where(html, body).has-heading-100 .text--white .content h1{ font-weight: 100; } } /* h1 -- 300 */ :where(html, body).has-heading-300 .sb-embed h1, :where(html, body).has-heading-300 .content h1, :where(html, body).has-heading-300 .text--white .content h1 { font-weight: 300; } @media (min-width: 768px) { :where(html, body).has-heading-300 .sb-embed h1, :where(html, body).has-heading-300 .content h1, :where(html, body).has-heading-300 .text--white .content h1 { font-weight: 300; } } @media (min-width: 768px) { :where(html, body).has-heading-300 .text--white .content h1 { font-weight: 300; } } /* h1 -- 400 */ :where(html, body).has-heading-400 .sb-embed h1, :where(html, body).has-heading-400 .content h1, :where(html, body).has-heading-400 .text--white .content h1 { font-weight: 400; } @media (min-width: 768px) { :where(html, body).has-heading-400 .sb-embed h1, :where(html, body).has-heading-400 .content h1, :where(html, body).has-heading-400 .text--white .content h1 { font-weight: 400; } } @media (min-width: 768px) { :where(html, body).has-heading-400 .text--white .content h1 { font-weight: 400; } } html.has-heading-600 :is( .content h1, .sb-embed h1, .carousel h2, .item-content h2 ){ font-weight:600; } html.has-heading-700 :is( .content h1, .sb-embed h1, .carousel h2, .item-content h2 ){ font-weight:700; } /* headings -- uppercase */ :where(html, body).has-uppercase.has-footer-alternate1 .footer .footer-headline h1, :where(html, body).has-uppercase .carousel .item-content h2, :where(html, body).has-uppercase .sb-embed h1, :where(html, body).has-uppercase .sb-embed h2, :where(html, body).has-uppercase .content h1, :where(html, body).has-uppercase .content h2, :where(html, body).has-uppercase .text--white .content h1, :where(html, body).has-uppercase .text--white .content h2, :where(html, body).has-uppercase .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-uppercase .text--white:not(.sb-feature-cta1) .content h2, :where(html, body).has-uppercase .text--white.sb-feature-cta1 .content h1, :where(html, body).has-uppercase .text--white.sb-feature-cta1 .content h2, :where(html, body).has-uppercase .gallery.var1 .gallery-item .gallery-header, :where(html, body).has-uppercase .sb-feature-cards1-row .sb-col .content a { text-transform: uppercase!important; } /* headings -- letter spacing */ :where(html, body).has-letterspacing.has-footer-alternate1 .footer .footer-headline h1, :where(html, body).has-letterspacing .carousel .item-content h2, :where(html, body).has-letterspacing .sb-embed h1, :where(html, body).has-letterspacing .sb-embed h2, :where(html, body).has-letterspacing .content h1, :where(html, body).has-letterspacing .content h2, :where(html, body).has-letterspacing .text--white .content h1, :where(html, body).has-letterspacing .text--white .content h2, :where(html, body).has-letterspacing.text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-letterspacing .text--white:not(.sb-feature-cta1) .content h2, :where(html, body).has-letterspacing .text--white.sb-feature-cta1 .content h1, :where(html, body).has-letterspacing .text--white.sb-feature-cta1 .content h2 { letter-spacing: 8px!important; } :where(html, body).has-letterspacing a.btn, :where(html, body).has-letterspacing .gallery.var1 .gallery-item a.btn { letter-spacing: 3px!important; } :where(html, body).has-letterspacing .sb-feature-cards1-row .sb-col .content a { letter-spacing: 4px!important; } /* h2 */ body .content h2 { font-size: 1.4em!important; line-height: 1.7em!important; padding-bottom: 15px; } @media (min-width: 768px) { body .content h2 { font-size: 2em!important; line-height: 1.4em!important; } } :where(html, body).has-heading-lg .content h3 { font-weight: 400!important; } body#page-home.has-heading-lg .content h3, body#page-home.has-heading-lg .sb-about h3, body#page-home.has-heading-lg .embed h3 { letter-spacing: 0px!important; } /* h1 -- var1 */ :where(html, body).has-heading-var1 .sb-embed h1, :where(html, body).has-heading-var1 .content h1, :where(html, body).has-heading-var1 .text--white .content h1, :where(html, body).has-heading-var1 .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-var1 .text--white.sb-feature-cta1 .content h1 { font-size: 1.5em!important; line-height: 1.4em!important; font-weight: 400; text-transform: uppercase; } @media (min-width: 768px) { :where(html, body).has-heading-var1 .sb-embed h1, :where(html, body).has-heading-var1 .content h1, :where(html, body).has-heading-var1 .text--white .content h1, :where(html, body).has-heading-var1 .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-var1 .text--white.sb-feature-cta1 .content h1 { font-size: 2.5em!important; line-height: 1.2em!important; font-weight: 100; text-transform: uppercase; } } @media (min-width: 768px) { :where(html, body).has-heading-var1 .text--white .content h1 { font-size: 2.5em!important; line-height: 1.4em!important; font-weight: 300; } } :where(html, body).has-heading-var1 .content h3 { font-size: .9em!important; font-weight: 500!important; text-transform: uppercase; } body#page-home.has-heading-var1 .content h3, body#page-home.has-heading-var1 .sb-about h3, body#page-home.has-heading-var1 .embed h3 { letter-spacing: 0px!important; } /* h1 -- var1 this is OLD */ :where(html, body).has-heading-bold .carousel .item-content h2 { font-weight: 600!important; } :where(html, body).has-heading-bold .sb-embed h1, :where(html, body).has-heading-bold .content h1, :where(html, body).has-heading-bold .text--white .content h1, :where(html, body).has-heading-bold .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-bold .text--white.sb-feature-cta1 .content h1 { font-weight: 600!important; } @media (min-width: 768px) { :where(html, body).has-heading-bold .sb-embed h1, :where(html, body).has-heading-bold .content h1, :where(html, body).has-heading-bold .text--white .content h1, :where(html, body).has-heading-bold .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-bold .text--white.sb-feature-cta1 .content h1 { font-weight: bold!important; } } @media (min-width: 768px) { :where(html, body).has-heading-bold .text--white .content h1 { font-weight: 600!important; } } :where(html, body).has-heading-bold .content h3 { font-weight: 600!important; } body#page-home.has-heading-bold:not(.has-testimonials-var1) .content h3, body#page-home.has-heading-bold:not(.has-testimonials-var1) .sb-about h3, body#page-home.has-heading-bold:not(.has-testimonials-var1) .embed h3 { font-weight: 600!important; } body#page-home.has-heading-bold .sb-testimonials-var1-row figure h3 strong { font-weight: bolder!important; } /* show header -- logo icon */ /* for legacy sites and new gen */ .logo-icon { display: none; } html.has-carousel-logo #page-home .logo-icon { display: block; } /* for legacy sites and new gen */ .logo-icon { background: transparent; } .logo-icon img { background: transparent; width: 50px; height: auto; display: inline-block!important; position: relative; opacity: 1; } /* */ .has-logo-icon a.logo-icon { display: block!important; } .has-logo-icon .logo-icon { width: inherit; height: inherit; background: transparent; float: none; margin-right: 10px; background: transparent; } .has-logo-icon .logo-icon img { width: inherit; height: inherit; max-height: 35px!important; float: none; display: inline-block!important; visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.5s linear; position: relative; top: 0px; filter: blur(0px); } .has-logo-icon .header.logoshow .logo-icon img { display: inline-block; visibility: visible; opacity: 1; position: relative; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 0%); } .has-logo-icon .logo-icon img { display: block; } @media (min-width:949px) { .has-logo-icon .logo-icon img { display: block!important; } .has-logo-icon .header.logoshow .logo-icon img { display: inline-block; visibility: visible; opacity: 1; position: relative; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 0%); } } .has-logo-icon .header.logoshow .logo-icon img { position: relative; display: inline-block!important; } @media screen and (max-width:1279px) { .has-logo-icon .fcol-1 .box-nested > * { display: none!important; /* Hide all direct children */ } .has-logo-icon .fcol-1 .box-nested > a.logo-icon { display: block!important; /* Show only the logo */ } } /* */ .has-logo-icon-scroll a.logo-icon { display: block!important; } .has-logo-icon-scroll .logo-icon { width: inherit; height: inherit; background: transparent; float: none; margin-right: 10px; background: transparent; } .has-logo-icon-scroll .logo-icon img { width: inherit; height: inherit; max-height: 35px!important; float: none; display: inline-block!important; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; position: relative; top: 0px; filter: blur(0px); } .has-logo-icon-scroll .header.logoshow .logo-icon img { display: inline-block; visibility: visible; opacity: 1; position: relative; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 0%); } .has-logo-icon-scroll .logo-icon img { display: block; } @media (min-width:949px) { .has-logo-icon-scroll .logo-icon img { display: none!important; } .has-logo-icon-scroll .header.logoshow .logo-icon img { display: inline-block; visibility: visible; opacity: 1; position: relative; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 0%); } } .has-logo-icon-scroll .header.logoshow .logo-icon img { position: relative; display: inline-block!important; } /* */ .has-logo-icon-swap a.logo-icon { display: block!important; } .has-logo-icon-swap .logo-icon { width: inherit; height: inherit; background: transparent; float: none; margin-right: 10px; background: transparent; } .has-logo-icon-swap .logo-icon img { width: inherit; height: inherit; max-height: 35px!important; float: none; display: none!important; visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.5s linear; position: relative; top: 0px; filter: blur(0px); } .has-logo-icon-swap .header.logoshow .logo-icon img { display: inline-block!important; visibility: visible; opacity: 1; position: relative; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 0%); } .has-logo-icon-swap .logo-icon img { display: block; } @media (min-width:949px) { .has-logo-icon-swap .logo-icon img { display: none!important; } .has-logo-icon-swap .header.logoshow .logo-icon img { display: inline-block; visibility: visible; opacity: 1; position: relative; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 0%); } } .has-logo-icon-swap .header.logoshow .logo-icon img { position: relative; display: inline-block!important; max-height: 60px!important; } .has-logo-icon-swap .header img#logoimg:not(.footer img) { display: inline-block; opacity: 1; /* Fully visible */ visibility: visible; transition: opacity 0.5s ease!important; /* Smooth transition for opacity */ } @media (min-width:1280px) { .has-logo-icon-swap .header.logoshow img#logoimg:not(.footer img) { /* Note: display: none will still cause the element to disappear abruptly after the transition */ opacity: 0; /* Fully transparent */ visibility: hidden; transition: opacity 0.5s ease!important; /* Smooth transition for opacity */ display: none; } } @media (max-width: 768px) { .has-mobile-logo-lg img#logoimg, body:not(#page-home).has-mobile-logo-lg img#logoimg { max-height: 45px !important; } } /* ---------------------------------------------------------------------- IMGS ---------------------------------------------------------------------- */ /* imgs -- rounded images */ :where(html, body).has-img-rounded-10 .map-frame, body.page-full-post.has-img-rounded-10 .sb-blog-row .sb-featured-image img, body.page-feed-post.has-img-rounded-10 .post, body:not(#page-home).has-img-dropshadow .sb-content img, :where(html, body).has-img-rounded-10 .sb-image-row img, :where(html, body).has-img-rounded-10 .sb-image-row.image-row-three-wrap.col-row-three-wrap img, :where(html, body).has-img-rounded-10 .gallery-item-wrap, :where(html, body).has-img-rounded-10 .gallery-item:before, :where(html, body).has-img-rounded-10 .sb-feature-discount-row, :where(html, body).has-img-rounded-10 .sb-wrap[class*='image-row-one-wrap'] img, :where(html, body).has-img-rounded-10 .sb-wrap[class*='col-row-one-wrap'] img, :where(html, body).has-img-rounded-10 .gallery img, :where(html, body).has-img-rounded-10 .sb-fillbox-row .sb-wrap-inner, :where(html, body).has-img-rounded-10 .sb-testimonials-var1-row:not(.sb-maxwidth-row), :where(html, body).has-img-rounded-10 .post .entry img, :where(html, body).has-img-rounded .posts .sb-featured-image img, :where(html, body).has-img-rounded .video-wrapper iframe { border-radius: 10px; } html.has-img-rounded-30 #page-home .feature-cards1.has-card-image-top:not([class*='has-surface']) > div > div img, :where(html, body).has-img-rounded-30 .map-frame, body.page-full-post.has-img-rounded-30 .sb-blog-row .sb-featured-image img, body.page-feed-post.has-img-rounded-30 .post, body:not(#page-home).has-img-dropshadow .sb-content img, :where(html, body).has-img-rounded-30 .sb-image-row img, :where(html, body).has-img-rounded-30 .sb-image-row.image-row-three-wrap.col-row-three-wrap img, :where(html, body).has-img-rounded-30 .gallery-item-wrap, :where(html, body).has-img-rounded-30 .gallery-item:before, :where(html, body).has-img-rounded-30 .sb-feature-discount-row, :where(html, body).has-img-rounded-30 .sb-wrap[class*='image-row-one-wrap'] img, :where(html, body).has-img-rounded-30 .sb-wrap[class*='col-row-one-wrap'] img, body:not(#page-home) .has-img-rounded-30 .gallery img, :where(html, body).has-img-rounded-30 .sb-fillbox-row .sb-wrap-inner, :where(html, body).has-img-rounded-30 .sb-testimonials-var1-row:not(.sb-maxwidth-row), :where(html, body).has-img-rounded-30 .post .entry img, :where(html, body).has-img-rounded-30 .posts .sb-featured-image img, :where(html, body).has-img-rounded-30 .video-wrapper iframe { border-radius: 30px; } /* ---------------------------------------------------------------------- /*padd LAYOUT / WIDTH ---------------------------------------------------------------------- */ @media (min-width: 949px) { .container > .columns, .wrapper .columns { max-width: var(--site-max); margin-inline: auto; } } /* ---------------------------------------------------------------------- CONTENT / MODULE VARIANTS ---------------------------------------------------------------------- */ ul.accordion-list { max-width: 1005; margin: auto!important; padding: 0 15px; text-align: left!important; margin-top: 50px!important; } ul.accordion-list { text-align: left; } .accordion-list h1 { /* color: #f05454; */ margin-bottom: 30px; } .accordion-list h2 { color: #47d8b2; /* font-family: 'hm_light', sans-serif; */ font-size: 20px; text-align: left; line-height: 34px; padding: 30px 30px 0; text-transform: none; letter-spacing: 0px; font-weight: 300; display: block; margin: 0; cursor: pointer; transition: .2s; } body:not(#page-home) ul.accordion-list li h3, body ul.accordion-list li h3 , body:not(#page-home) .body .sb-content:not(.text--left) .content ul.accordion-list li h3 { font-size: 1.6em!important; line-height: 1.1em!important; font-weight: 400!important; /* padding: 20px 0px!important; */ margin: 0px!important; text-align: left!important; padding: 20px 70px 20px 0px !important; } @media (min-width: 949px) { body ul.accordion-list li h3 { font-size: 1.7em!important; line-height: 1.4em!important; font-weight: 400!important; /* padding: 20px 0px!important; */ margin: 0px!important; text-align: left!important; padding: 20px 70px 20px 0px !important; } } .accordion-list p { text-align: left; /* font-family: 'hm_light', sans-serif; */ font-size: 14px; line-height: 1.45; position: relative; will-change: max-height; contain: layout; display: inline-block; opacity: 1; transform: translate(0,0); margin: 0px; transition: .3s opacity; -webkit-hyphens: auto; -ms-hyphens: auto; z-index: 2; text-align: left; padding-bottom: 20px; } .content .accordion-list p { line-height: 23px!important; } .content .accordion-list .answer p { padding-top: 0px!important; } ul.accordion-list { list-style: none; perspective: 900; padding: 0; margin: 0; } .sb-module *:not(.element-item):not(.element-item):not(.element-item):not(.slick-slide):not(.slick-list):not(.slick-track):not(.module-mini-cta):not([class*='col-']) > ul.accordion-list > li { position: relative; overflow: hidden; padding: 0px 40px!important; margin: 0; background: rgb(192 192 192 / 5%); box-shadow: 0 3px 10px -2px rgb(0 0 0 / 0%); -webkit-tap-highlight-color: transparent; border-radius: 0px; border-top: 2px solid #d5d5d5; padding-left: 20px; padding-right: 20px; } ul.accordion-list li + li { margin-top: 15px; } ul.accordion-list li:last-of-type { padding-bottom: 0; } ul.accordion-list li i { position: absolute; transform: translate(-6px, 0); margin-top: 28px; right: 15px; } ul.accordion-list li i:before, ul.accordion-list li i:after { content: ""; position: absolute; background-color: #354aa6; width: 3px; height: 9px; } ul.accordion-list li i:before { transform: translate(2px, 0) rotate(45deg); } ul.accordion-list li i:after { transform: translate(-2px, 0) rotate(-45deg); } ul.accordion-list li input[type=checkbox] { position: absolute; cursor: pointer; width: 100%; height: 100%; z-index: 1; opacity: 0; touch-action: manipulation; } ul.accordion-list li input[type=checkbox]:checked ~ h2 { color: #101a2b; } ul.accordion-list li input[type=checkbox]:checked ~ p { margin: 10px; max-height: 0; transition: .3s; opacity: 0; } ul.accordion-list li input[type=checkbox]:checked ~ i:before { transform: translate(2px, 0) rotate(45deg); background: #57af9b; } ul.accordion-list li input[type=checkbox]:checked ~ i:after { transform: translate(-2px, 0) rotate(-45deg); background: #60c3aa; } ul.accordion-list li { cursor: pointer!important; } .sb-module *:not(.element-item):not(.element-item):not(.element-item):not(.slick-slide):not(.slick-list):not(.slick-track):not(.module-mini-cta):not([class*='col-']) ul.accordion-list .answer { cursor: auto!important; pointer-events: none; transition: none!important; } body.page-app ul.accordion-list .answer { display: block!important; } /* module accordion -- variant 2 (1 exists in base.themes) */ .accordion-list .accordion-list h3::after { display: none; } .accordion-list ul.accordion-list { max-width: 100%; margin: auto!important; padding: 0 15px; text-align: center; margin-top: 50px!important; } .accordion-list .accordion-list ul { text-align: left; } .accordion-list h1 { /* color: #f05454; */ margin-bottom: 30px; } .accordion-list h2 { color: #47d8b2; /* font-family: 'hm_light', sans-serif; */ font-size: 20px; text-align: left; line-height: 34px; padding: 30px 30px 0; text-transform: none; letter-spacing: 0px; font-weight: 300; display: block; margin: 0; cursor: pointer; transition: .2s; } .accordion-list h3 { margin: 0px!important; } .accordion-list p { font-size: 14px!important; } @media (min-width: 949px) { .accordion-list p { text-align: left; /* font-family: 'hm_light', sans-serif; */ font-size: 16px!important; line-height: 1.45; position: relative; will-change: max-height; contain: layout; display: inline-block; opacity: 1; transform: translate(0,0); margin: 0px; transition: .3s opacity; -webkit-hyphens: auto; -ms-hyphens: auto; z-index: 2; text-align: left; padding-bottom: 20px; } } :where(.embed, .content) .accordion-list p { line-height: 30px!important; } ul.accordion-list { list-style: none; perspective: 900; padding: 0px 0px; margin: 0; } .sb-module *:not(.element-item):not(.element-item):not(.element-item):not(.slick-slide):not(.slick-list):not(.slick-track):not(.module-mini-cta):not([class*='col-']) ul.accordion-list li { position: relative; overflow: hidden; padding: 0px 0px!important; margin: 0; background: rgb(192 192 192 / 0%); box-shadow: 0 3px 10px -2px rgb(0 0 0 / 0%); -webkit-tap-highlight-color: transparent; border-radius: 0px; border-top: 2px solid #d5d5d5; padding-left: 20px; padding-right: 20px; border-bottom: 0px; } @media (min-width: 949px) { .sb-module ul.accordion-list .answer { width: 60%; } ul.accordion-list { padding: 0px 0px; } } ul.accordion-list li + li { margin-top: 15px; } ul.accordion-list li:last-of-type { padding-bottom: 0; } ul.accordion-list li i { position: absolute; transform: translate(-6px, 0); margin-top: 28px; right: 15px; } ul.accordion-list li i:before, ul.accordion-list li i:after { content: ""; position: absolute; background-color: #354aa6; width: 3px; height: 9px; } ul.accordion-list li i:before { transform: translate(2px, 0) rotate(45deg); } ul.accordion-list li i:after { transform: translate(-2px, 0) rotate(-45deg); } ul.accordion-list li input[type=checkbox] { position: absolute; cursor: pointer; width: 100%; height: 100%; z-index: 1; opacity: 0; touch-action: manipulation; } ul.accordion-list li input[type=checkbox]:checked ~ h2 { color: #101a2b; } ul.accordion-list li input[type=checkbox]:checked ~ p { margin: 10px; max-height: 0; transition: .3s; opacity: 0; } ul.accordion-list li input[type=checkbox]:checked ~ i:before { transform: translate(2px, 0) rotate(45deg); background: #57af9b; } ul.accordion-list li input[type=checkbox]:checked ~ i:after { transform: translate(-2px, 0) rotate(-45deg); background: #60c3aa; } ul.accordion-list li { cursor: pointer!important; } .sb-module *:not(.element-item):not(.element-item):not(.element-item):not(.slick-slide):not(.slick-list):not(.slick-track):not(.module-mini-cta):not([class*='col-']) ul.accordion-list .answer { cursor: auto!important; pointer-events: none; transition: none!important; } body.page-app ul.accordion-list .answer { display: block!important; } ul.accordion-list li::before { content: "+"; display: inline-block; position: absolute; right: 10px; top: 20px; font-size: 30px; font-weight: bold; transition: none!important; } ul.accordion-list li.active::before { transform: rotate(45deg); } /* FLEX LAYOUT for plan cards when inside sb-feature-cards1-row */ .feature-cards1 > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; margin-top: 30px; } /* EACH card */ .feature-cards1 > div > div { flex: 1 1 220px; max-width: 320px; border-radius: 30px; padding: 35px 35px; box-sizing: border-box; } /* EACH card */ .feature-cards1[class*="has-surface-"] > div > div { padding: 35px 25px; } /* Tablet */ @media (max-width: 900px) { .feature-cards1 > div > div { flex: 1 1 45%; max-width: 450px; } } /* Mobile */ @media (max-width: 600px) { .feature-cards1 > div > div { flex: 1 1 100%; max-width: 500px; } } .feature-cards1 > div > div h2 { font-weight: 500; padding: 0px!important; line-height: 30px!important; font-size: 1.7em!important; } .feature-cards1 > div > div p { margin-bottom: 0px!important; } /* ========================================================= FEATURE CARDS has IMAGE ========================================================= */ .feature-cards1 > div > div img { max-width: 30%; padding-bottom: 10px; } /* ========================================================= FEATURE CARDS — IMAGE FLUSH TOP ========================================================= */ /* remove top padding ONLY when image exists */ .feature-cards1.has-card-image-top > div > div { padding-top: 0px !important; padding-right: 0 !important; padding-left: 0 !important; padding-bottom: 20px !important; overflow: hidden; /* ensures clean radius clipping */ } /* image goes full bleed */ .feature-cards1.has-card-image-top > div > div img { display: block; width: 100%; max-width: none!important; margin: 0; padding: 0; border-radius: 20px 20px 0 0; /* match card radius */ margin-bottom: 30px; } /* restore spacing for text BELOW image */ .feature-cards1.has-card-image-top > div > div h2, .feature-cards1.has-card-image-top > div > div h3, .feature-cards1.has-card-image-top > div > div p { padding: 0px 40px 0px 40px!important; } .feature-cards1.has-card-image-top > div > div h2, .feature-cards1.has-card-image-top > div > div p { padding-left: var(--sb-space-sm); padding-right: var(--sb-space-sm); } /* add spacing between image and text */ .feature-cards1.has-card-image-top > div > div img + h2 { margin-top: var(--sb-space-xs); } /* ========================================================= SHADOW ENGINE — AGNOSTIC (SMART TARGETING) requires: has-surface-* + has-shadow-* ========================================================= */ /* base transition */ [class*="has-surface-"][class*="has-shadow"] { transition: box-shadow .25s ease, transform .25s ease; } /* --------------------------------------------------------- TARGET INNER STRUCTURE FIRST (cards pattern) (feature-cards, grids, etc.) --------------------------------------------------------- */ [class*="has-surface-"][class*="has-shadow"] > div > div { box-shadow: inherit; transition: inherit; } /* --------------------------------------------------------- FALLBACK: direct children (simpler modules) --------------------------------------------------------- */ [class*="has-surface-"][class*="has-shadow"] > div { box-shadow: inherit; transition: inherit; } /* --------------------------------------------------------- DEFAULT (parent holds the value) --------------------------------------------------------- */ [class*="has-surface-"].has-shadow { --_shadow: var(--surface-shadow); } [class*="has-surface-"].has-shadow-light { --_shadow: var(--surface-shadow-light); } [class*="has-surface-"].has-shadow-md { --_shadow: var(--surface-shadow-md); } [class*="has-surface-"].has-shadow-lg { --_shadow: var(--surface-shadow-lg); } /* apply shadow once (parent defines it) */ [class*="has-surface-"][class*="has-shadow"] { box-shadow: none; } .feature-cards1[class*="has-surface-"][class*="has-shadow"] > div > div { box-shadow: var(--_shadow); } .feature-cards1[class*="has-surface-"][class*="has-shadow"] > div { box-shadow: 0; } /* --------------------------------------------------------- HOVER (applies to cards, not container) --------------------------------------------------------- */ [class*="has-surface-"][class*="has-shadow"] > div:hover, [class*="has-surface-"][class*="has-shadow"] > div > div:hover { transform: translateY(-4px); } /* ---------------------------------------------------------------------- MISC / LEGACY / FUTURE ---------------------------------------------------------------------- */ /* :where(html, body).has-rounded */ .sb-roundedbox-row { border-radius: 10px; overflow: hidden!important; margin: 0px 20px; padding: 0px; } @media (max-width: 768px) { .container > .columns { margin: 0px 20px; } } /* ---------------------------------------------------------------------- STACKED MODULES ---------------------------------------------------------------------- */ .sb-roundedbox-row + .sb-roundedbox-row { margin-top: 40px!important; } /* boxes -- rounded images -- with fixed inner box width */ .sb-roundedbox-row.sb-fillbox-600-row { border-radius: 0px; } .sb-roundedbox-row.sb-fillbox-600-row .sb-wrap-inner { border-radius: 20px; } :where(html, body).has-animation {} :where(html, body).has-scroll-effects {} /* SAFETY CATCH DO NOT REMOVE */ body[class*="has-"] {} /*==================================================================================*/ /* FOOTER ALTERNATE LAYOUT 1 8/1/2023 */ /*==================================================================================*/ .footer .locations_footer .locations_list a[target="_blank"] { padding: 3px 0px 0px; } .feature-socialmedia a[target="_blank"] { padding: 8px 0px 0px; } .social-module { padding-top: 20px; } .feature-socialmedia a, .social-module a { border-radius: 100px; width: 35px; height: 35px; padding-top: 14px; display: inline-block; border: 1px solid; margin-left: 0px; margin-right: 5px; margin-bottom: 0px; text-align: center; font-weight: 500; } .feature-socialmedia a .fa, .social-module a .fa { font-size: 14px; } /* custom - footer */ .has-footer-alternate1 .footer-box a { font-size: 16px; line-height: 30px; font-variant-numeric: lining-nums; } .has-footer-alternate1 .footer-box p, .has-footer-alternate1 .footer-box h1, .has-footer-alternate1 .footer-box h2, .has-footer-alternate1 .footer-box h3, .has-footer-alternate1 .footer-box h4, .has-footer-alternate1 .footer-box h5, .has-footer-alternate1 .footer-box h6, .has-footer-alternate1 .footer-box ul, .has-footer-alternate1 .footer-box ol, .has-footer-alternate1 .footer-box li, .has-footer-alternate1 .footer-box li a, .has-footer-alternate1 .footer-box div { margin: 0; padding: 0; } .has-footer-alternate1.footer .nav .primary-link:last-child > a { margin: auto!important; padding: 0px!important; text-align: center!important; padding: 5px 15px!important; margin-top: 20px!important; } .has-footer-alternate1.footer .nav .primary-link:last-child > a:hover{ text-decoration: none; } .has-footer-alternate1 .footer-box li a { text-transform: capitalize!important; padding: 0px!important; } .has-footer-alternate1 .footer-box ul, .has-footer-alternate1 .footer-box ol { list-style: none; } @media screen and (min-width: 949px) { .has-footer-alternate1.footer .wrapper { max-width: 1425px!important; padding: 0px!important; margin: auto; } } .has-footer-alternate1 .footer { padding: 110px 0px!important; } .footer { display: flex; flex-wrap: wrap; justify-content: space-between; } .footer-box { flex: 1 1 100%; margin-bottom: 10px; float: left!important; } .has-footer-alternate1 .footer-box .footer-logo-container { display: flex; align-items: flex-start; } .has-footer-alternate1 .footer-box .footer-logo-container img { max-width: 200px; margin-right: 20px; } .has-footer-alternate1 .footer-box .footer-logoname { align-self: flex-end; font-weight: bold; } .has-footer-alternate1 .footer-box .footer-nav { display: flex; flex-wrap: wrap; justify-content: space-between; } .has-footer-alternate1 .footer-box .footer-nav .nav-inner { flex-basis: 50%; margin-bottom: 10px; } .has-footer-alternate1 .footer-box .footer-nav ul { list-style: none; padding: 0; } .has-footer-alternate1 .footer-box .footer-nav li { margin-bottom: 5px; } .has-footer-alternate1 .footer-box .locations_footer { margin-top: 0px!important; margin-bottom: 10px!important; max-width: 400px!important; margin: 0px; } .has-footer-alternate1 .footer-box .footer-headline { padding: 0px 0px 0px; text-align: left; } @media screen and (min-width: 949px) { .has-footer-alternate1 .footer-box .footer-headline h1 { padding: 20px 0px 100px; } } .has-footer-alternate1 .footer-box .nav-inner { display: flex; } .has-footer-alternate1 .footer-box .nav-inner ul { list-style: none; padding: 0; margin: 0; flex: 1; margin-right: 20px; } .has-footer-alternate1 .footer-box .nav-inner li { margin-bottom: 10px; display: block; } /* Styling for the h2 titles */ .has-footer-alternate1 .footer-box .nav-inner h2 { margin-top: 20px; font-size: 20px; } .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(2) { padding-right: 30px; } .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) { display: flex; } .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) { margin-top: 0px; } @media screen and (min-width: 949px) { .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) { margin-top: 0px; } } .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) ul { list-style: none; padding: 0; margin: 0; padding-right: 20px!important; } @media screen and (min-width: 949px) { .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) ul { list-style: none; padding: 0; margin: 0; padding-right: 60px!important; } } .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) li { margin-bottom: 14px; display: block; } .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) li a { line-height: 20px!important; } /* Styling for the h2 titles */ .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) h2 { margin-top: 20px; font-size: 15px!important; margin-bottom: 10px; } @media screen and (min-width: 949px) { .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) li { margin-bottom: 10px; display: block; } .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) li a { line-height: 26px!important; } .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) h2 { margin-top: 10px; font-size: 14px!important; font-weight: 600; margin-bottom: 20px; } } @media screen and (min-width: 949px) { /* Apply a font size to all links in the third .col-md-4 container, except the last one */ .has-footer-alternate1.footer .footer-box li a { font-size: 16px!important; } } .has-footer-alternate1.footer .nav .primary-link:last-child > a { display: inline-block; font-size: 15px!important; font-weight: 600!important; margin-top: 10px!important; } @media screen and (min-width: 949px) { .has-footer-alternate1.footer .footer-box .col-md-4:last-child > a { font-size: 14px!important; } } /* Align all text to the left */ .has-footer-alternate1.footer .footer .wrapper { text-align: left!important; } /* Align the navigation lists to the left */ .has-footer-alternate1.footer .footer .col-md-4 nav ul { text-align: left!important; } /* Align social media icons to the left */ .has-footer-alternate1.footer .footer .embed.social-module.sm-bg-colors-OFF { text-align: left!important; } .has-footer-alternate1.footer * { text-align: left!important; } .has-footer-alternate1.footer .locations_list br { display: block;!important; } .has-footer-alternate1.footer .social-module a { text-align: center!important; } .has-footer-alternate1.footer .social-module a { margin-bottom: 10px; } .has-footer-alternate1.footer .footer-box span { padding-bottom: 0px!important; } .has-footer-alternate1.footer .footer-box .location_name { font-size: 18px!important; line-height: 25px; } .has-footer-alternate1.footer .footerlogoname, .has-footer-alternate1.footer img#logoimg { text-align: left!important; padding-top: 35px!important; margin: 0px!important; position: relative; } .has-footer-alternate1.footer #logoimg { width: 1250px!important; } .has-footer-alternate1.footer h1 { font-size: 2.5em!important; line-height: 1.4em!important; font-weight: 300; background: linear-gradient(234.33deg, #dfdfdf -3.63%, #ffffff 89.96%); } @media (min-width: 768px) { .has-footer-alternate1.footer h1 { font-size: 3.5em!important; line-height: 1.4em!important; font-weight: 300; } } .has-footer-alternate1.footer h1 { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; } .has-footer-alternate1.footer h1 { margin: 20px 0px; } .has-footer-alternate1.footer .locations_list { /* font-family: 'Montserrat', sans-serif; */ } .has-footer-alternate1.footer .footer-user-content { width: 100%!important; float: left; max-width: 100%!important; text-align: left!important; padding: 0 15px; padding-top: 50px; } .has-footer-alternate1.footer .footer-user-content p:first-child { border-top: 1px solid rgb(57 57 57 / 5%); margin-top: 40px; padding-top: 80px; } .has-footer-alternate1.footer .footer-user-content a, .has-footer-alternate1.footer .footer-user-content p { font-size: 16px!important; text-align: left!important; line-height: 29px; } .has-footer-alternate1.footer .footer-user-content p { padding-bottom: 6px!important; } .has-footer-alternate1 .locations_list .social-module { padding-top: 20px; margin-bottom: 20px; } .has-footer-alternate1 .locations_list a { display: inline-block!important; } /* Footer logo stability */ .has-footer-alternate1 img#logoimg { max-width: 200px; height: auto; display: block; } /*==================================================================================*/ /* SET FOOTER */ /*==================================================================================*/ .footer { padding-top: 60px; padding-bottom: 60px; text-align: center; overflow: visible; border-top: 1px solid; } @media screen and (min-width: 949px) { .footer .footer-box:nth-child(1), .footer .footer-box:nth-child(2), .footer .footer-box:nth-child(3) { padding: 0 15px; position: relative; min-height: 1px; width: 100%!important; text-align: center!important; } } .footer .footer-box { float: none!important; } .footer .nav ul { padding-bottom: 20px; } .footer .nav li { display: block; font-size: 20px; } @media screen and (min-width: 949px) { .footer .nav li { display: inline; font-size: 20px; } } .footer .nav li a { font-size: 17px; padding: 10px; font-weight: 300; } .footer h3 { padding-top: 18px; padding-bottom: 0px; } body.logoshow footer img#logoimg, body.logoshow footer img#logoimg:not(.logo-color), body footer img#logoimg, body footer img#logoimg:not(.logo-color) { margin: 0px; max-width: 180px!important; height: auto; margin: auto; /* clear: both; */ /* display: block; */ } @media screen and (min-width: 949px) { body.logoshow footer img#logoimg, body.logoshow footer img#logoimg:not(.logo-color), body footer img#logoimg, body footer img#logoimg:not(.logo-color) { max-width: 250px!important; height: auto; } } .footer-user-content { padding: 0 15px; position: relative; min-height: 1px; width: 100%!important; text-align: center!important; margin: auto; } @media screen and (min-width: 949px) { .footer-user-content { width: 80%!important; } } /*==================================================================================*/ /* extra footer instance fix -- remove 2nd instance */ /*==================================================================================*/ body > .footer-box { display: none; } /* ========================================================= CAROUSEL - MOBILE - ALIGN CENTER ========================================================= */ @media (max-width: 768px) { .carousel-wrapper .align-left { margin-left: 0px; justify-content: center; text-align: center; } } /* --------------------------------------------------------- CAROUSEL - HAS CLASSES --------------------------------------------------------- */ @media screen and (min-width:949px) { #page-home.has-carousel-bottom .carousel-wrapper .carousel .item-content { justify-content: flex-end; } #page-home.has-carousel-top .carousel-wrapper .carousel .item-content { justify-content: flex-start; } } /* --------------------------------------------------------- Column spacing rules --------------------------------------------------------- */ @media (min-width:949px) { html.has-banner-thin:not(#page-home) .sb-wrap-inner[class*="col-row-"] .sb-col:nth-of-type(1) .sb-module, html.has-banner-thin:not(#page-home) .sb-wrap-inner.image-row-two .sb-col.sb-image-row .sb-module, html.has-banner-thin:not(#page-home) .image-row-two-wrap .sb-col.sb-image-row .sb-module { padding: 0 !important; padding-bottom: 30px !important; } } html.has-banner-thin:not(#page-home) .sb-wrap-inner[class*="col-row-"] .sb-col:nth-of-type(1) .sb-module .box { padding-bottom: 30px !important; border-bottom: 1px solid #e1e1e1; } /* --------------------------------------------------------- Misc layout tweaks --------------------------------------------------------- */ html.has-banner-thin:not(#page-home) .module-form { padding-top: 0; padding-bottom: 0 !important; } html.has-banner-thin:not(#page-home) .sb-wrap.sb-image-row.image-row-one-wrap { overflow: visible; } /* --------------------------------------------------------- Button scale --------------------------------------------------------- */ @media (min-width:949px) { html.has-banner-thin:not(#page-home).has-btn-lg a.btn-cta:not(.btn-reset) { padding: 9px 15px !important; font-size: 12px !important; text-transform: uppercase !important; } html.has-banner-thin:not(#page-home).has-btn-lg a.btn-cta:not(.btn-reset) i { display: none; } } /* --------------------------------------------------------- Header nav text --------------------------------------------------------- */ html.has-banner-thin:not(#page-home) .header .nav .primary-link > a { font-size: 13px; } /* ========================================================= Interior banner landing page thin style ROOT-DRIVEN (html.has-banner-thin) ========================================================= */ /* --------------------------------------------------------- Base height --------------------------------------------------------- */ html.has-banner-thin:not(#page-home) > body > .container > .carousel-wrapper { height: 60px; } /* --------------------------------------------------------- Desktop adjustments --------------------------------------------------------- */ @media (min-width:1280px) { html.has-banner-thin:not(#page-home) > body > .container > .carousel-wrapper { height: 165px; background-image: none !important; } html.has-banner-thin:not(#page-home) > body > .container > .carousel-wrapper .item-content-inner { display: flex !important; margin: 0; height: auto; align-self: flex-start; top: 40px !important; } html.has-banner-thin:not(#page-home) > body > .container > .carousel-wrapper img#logoimg:not(.footer img) { max-height: 60px !important; } html.has-banner-thin:not(#page-home) .header img#logoimg:not(.footer img) { max-height: 60px !important; } html.has-banner-thin:not(#page-home) > body > .container > .carousel-wrapper:before, html.has-banner-thin:not(#page-home) > body > .container > .carousel-wrapper .carousel-inner .item:before { background: linear-gradient( 0deg, #8d929e 0%, #8d929e 40%, #8d929e 100% ); } } /* --------------------------------------------------------- Body background --------------------------------------------------------- */ html.has-banner-thin:not(#page-home) body { background: linear-gradient( 0deg, #fcfdff 0%, #ffffff 40%, #acb0bb 100% ); } /* Reserve header height */ header.header-static, header.header.header-static { min-height: 120px; } /* Normalize icons only inside header/nav/footer */ header i.fa, header i.fas, .nav i.fa, .nav i.fas, .mobile-nav i.fa, .mobile-nav i.fas, .footer i.fa, .footer i.fas { width: 1em; height: 1em; display: inline-flex; align-items: center; justify-content: center; } /* SVG inside inherits color/size */ header i svg, .nav i svg, footer i svg, .mobile-nav i svg { width: 1em; height: 1em; fill: currentColor; } /* ============================= */ /* TOP BAR */ /* ============================= */ .site-header.has-topbar .site-header__top { display: flex; align-items: center; /* hard vertical lock */ min-height: 40px; width: 95%; margin: 0 auto; gap: 24px; padding: 20px 20px; border-bottom: 1px solid rgba(0,0,0,0.05); } @media screen and (max-width:948px) { .site-header.has-topbar .site-header__topr { display: inline-block; } } /* ===================================================== SITE HEADER CTA + ADDRESS (HTML-AWARE FIX) ===================================================== */ /* ============================= */ /* CTA WRAPPER */ /* ============================= */ .site-header__cta { display: flex; align-items: center; /* vertical centering */ gap: 28px; /* SPACE between address + button */ } /* ============================= */ /* PHONE CTA BUTTON */ /* ============================= */ .site-header__cta .btn { padding: 12px 22px; font-size: 14px; line-height: 1; white-space: nowrap; } /* ============================= */ /* MAIN HEADER BAR */ /* ============================= */ .site-header__main { display: flex; align-items: center; /* hard vertical lock */ justify-content: space-between; min-height: 80px; width: 100%; margin: 0 auto; gap: 24px; position: relative; z-index: var(--z-base); vertical-align: middle; } @media screen and (max-width:948px) { .site-header__main.align-center { justify-content: flex-end!important; } } @media (min-width: 1281px) { /* Keep nav vertically aligned */ .site-header__main nav { display: flex; align-items: center; } } /* ============================= */ /* NAV */ /* ============================= */ /* Hover polish (top-level only) */ .site-nav > .nav-list > .nav-item > a:hover { opacity: 0.85; } .site-nav { display: flex; } .nav-list { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; } .nav-item { position: relative; } .site-nav .nav-item > a { font-weight: 500; display: inline-flex; align-items: center; gap: .35rem; } .site-nav .nav-arrow { transition: transform .25s ease; } /* rotate when dropdown open (if you add class later) */ .site-nav .nav-item:hover > a .nav-arrow { transform: rotate(180deg); } .mega-dropdown > a:hover .nav-arrow { transform: rotate(180deg); } /* ========================================= MOBILE NAV FINAL (CMS-SAFE) ========================================= */ /* NAV PANEL */ nav.mobile-nav { position: fixed; inset: 0; background: #000; padding: 70px 20px 0px; z-index: var(--z-base); transform: translateX(100%); transition: transform 0.35s ease; will-change: transform; padding-bottom: 90px; overflow: auto!important; height: 100%; } /* NAV PANEL */ nav.mobile-nav { background: var(--color-brand-primary); } body.nav-open nav.mobile-nav { transform: translateX(0); } /* ============================== TOGGLE VISIBILITY ================================ */ .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; } @media (max-width: 1281px) { .site-nav, .site-header__cta { display: none; } .nav-toggle { display: block; } } /* ============================== HAMBURGER X ================================ */ .nav-toggle__icon { width: 24px; height: 24px; } .nav-toggle__icon line { stroke-linecap: round; stroke-width: 1.75; transform-box: fill-box; transform-origin: center; transition: transform 0.25s ease, opacity 0.2s ease, stroke-width 0.2s ease; } body.nav-open .nav-toggle__icon line:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.nav-open .nav-toggle__icon line:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle__icon line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } body.nav-open .nav-toggle__icon line { stroke-width: 1.25; } /* ============================== ACCORDION STRUCTURE ================================ */ .mobile-menu > .mobile-item { border-bottom: 1px solid rgb(215 215 214); } .mobile-link-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* ============================== TOGGLE BUTTON ================================ */ .mobile-toggle { background: none; border: 0; padding: 6px; cursor: pointer; color: inherit; flex-shrink: 0; } .mobile-toggle svg { width: 16px; height: 16px; stroke: #28334a; stroke-width: 2; fill: none; } .mobile-toggle line { transition: opacity 0.2s ease; } /* ============================== SUBMENUS (TIER 1 + TIER 2) ================================ */ .mobile-submenu, .mobile-submenu-2 { display: none; padding-left: 18px; overflow: hidden; transition: height 0.25s ease; } .mobile-item.is-open > .mobile-submenu { display: block; } .mobile-subitem.is-open > .mobile-submenu-2 { display: block; } /* ============================== PLUS MINUS LOGIC ================================ */ .mobile-toggle line:first-child { opacity: 1; /* plus */ } .mobile-item.is-open > .mobile-link-row .mobile-toggle line:first-child { opacity: 0; /* minus */ } /* De-emphasize open parents */ .mobile-item.is-open > .mobile-link-row > a { font-size: 0.9em; opacity: 0.8; } /* ========================================================= MEGA DROPDOWN — FULL SYSTEM (LAYOUT + ANIMATION + STYLE) ========================================================= */ /* --------------------------------------- PARENT --------------------------------------- */ .site-nav .nav-item.mega-dropdown { position: relative; } /* --------------------------------------- HOVER BRIDGE (prevents flicker) --------------------------------------- */ .site-nav .nav-item.mega-dropdown::after { content: ""; position: absolute; left: -40px; right: -40px; bottom: -40px; height: 40px; } /* ========================================================= DROPDOWN SYSTEM — MEGA + STANDARD (UNIFIED) ========================================================= */ /* --------------------------------------- PARENT --------------------------------------- */ .site-nav .nav-item { position: relative; } .sub-nav { max-width: 100%; } /* --------------------------------------- HOVER BRIDGE (ALL DROPDOWNS) --------------------------------------- */ .site-nav .nav-item::after { content: ""; position: absolute; left: 0px; right: -40px; bottom: -40px; height: 40px; } /* --------------------------------------- BASE DROPDOWN (ALL) --------------------------------------- */ .site-nav .dropdown-wrapper { position: absolute; left: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); transform-origin: top center; z-index: var(--z-dropdown); margin-top: 20px; /* animation */ transition: opacity 0.25s ease, transform 0.35s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0.35s; /* GLASS STYLE */ background: rgb(255 255 255 / 95%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); } /* --------------------------------------- OPEN STATE --------------------------------------- */ .site-nav .dropdown-wrapper.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity 0.25s ease, transform 0.35s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s; } /* ========================================================= MEGA DROPDOWN OVERRIDE (CENTERED FULL WIDTH) ========================================================= */ .site-nav .nav-item.mega-dropdown .dropdown-wrapper { position: fixed; left: 50%; right: 50%; width: 100%; max-width: 100%; transform: translate(-50%, 10px); } .site-nav .nav-item.mega-dropdown .dropdown-wrapper.open { transform: translate(-50%, 0); } /* ========================================================= CONTENT LAYOUT ========================================================= */ /* columns (mega) */ .site-nav .nav-item.mega-dropdown .dropdown-wrapper > ul > li.secondary-link, .site-nav .nav-item.mega-dropdown .dropdown-wrapper > ul > .orphan_links { display: inline-block; max-width: 250px; vertical-align: top; padding-right: 50px; padding-bottom: 30px; } /* inner spacing */ .site-nav .nav-item.mega-dropdown .dropdown-wrapper > ul { padding: 35px 25px; } .site-nav .nav-item .dropdown-wrapper > ul { padding: 15px 25px; } .site-nav .nav-item .dropdown-wrapper li.secondary-link > a { color: #1d1d1d; line-height: 20px; } /* ========================================================= TYPOGRAPHY / STYLE ========================================================= */ .dropdown-wrapper ul.sub-nav { min-width: 250px; line-height: 30px; } /* headings */ .site-nav .dropdown-wrapper li.secondary-link > a { color: rgb(40 51 74 / 70%); font-weight: 400; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; display: inline-block; padding-bottom: 10px!important; } /* links */ .site-nav .dropdown-wrapper ul li a { color: #28334a; opacity: 0.75; font-size: 14px; margin-top: 10px; transition: opacity 0.2s ease, transform 0.2s ease; } /* hover */ .site-nav .dropdown-wrapper ul li a:hover { opacity: 1; transform: translateY(2px); } /* selected */ .site-nav .secondary-link.selected > a, .site-nav .sub-secondary-link.selected > a { font-weight: 600 !important; font-style: italic; } .site-nav .nav-item.mega-dropdown .dropdown-wrapper ul ul { line-height: 40px; } /* ========================================================= ITEM ANIMATION (ALL DROPDOWNS) ========================================================= */ .site-nav .dropdown-wrapper ul li { opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; } .site-nav .dropdown-wrapper.open ul li { opacity: 1; transform: translateY(0); } /* stagger */ .site-nav .dropdown-wrapper.open ul li:nth-child(1) { transition-delay: 0.05s; } .site-nav .dropdown-wrapper.open ul li:nth-child(2) { transition-delay: 0.1s; } .site-nav .dropdown-wrapper.open ul li:nth-child(3) { transition-delay: 0.15s; } .site-nav .dropdown-wrapper.open ul li:nth-child(4) { transition-delay: 0.2s; } .site-nav .dropdown-wrapper.open ul li:nth-child(5) { transition-delay: 0.25s; } .site-nav .dropdown-wrapper.open ul li:nth-child(6) { transition-delay: 0.3s; } .site-nav .dropdown-wrapper.open ul li:nth-child(7) { transition-delay: 0.35s; } .site-nav .dropdown-wrapper.open ul li:nth-child(8) { transition-delay: 0.4s; } .site-nav .dropdown-wrapper.open ul li:nth-child(9) { transition-delay: 0.45s; } .site-nav .dropdown-wrapper.open ul li:nth-child(10) { transition-delay: 0.5s; } /* ========================================================= SMALL DROPDOWN SPECIFIC (OPTIONAL POLISH) ========================================================= */ .site-nav .nav-item:not(.mega-dropdown) .dropdown-wrapper { min-width: 220px; border-radius: 6px; } /* ========================================================= DESKTOP ALIGNMENT ========================================================= */ @media (min-width: 1281px) { .site-nav .nav-item.mega-dropdown .dropdown-wrapper ul { text-align: center; } .site-nav .nav-item.mega-dropdown .dropdown-wrapper ul > li.secondary-link { text-align: left; } .site-nav .nav-item.mega-dropdown .dropdown-wrapper ul ul { text-align: left; } } /* ========================================================= FIX: LAST NAV ITEM DROPDOWN OVERFLOW (prevents right-edge bleed) ========================================================= */ /* flip dropdown direction for last item */ .site-nav .nav-list > .nav-item:last-child:not(.mega-dropdown) .dropdown-wrapper { left: auto; right: 0; transform: translateY(10px); } /* open state */ .site-nav .nav-list > .nav-item:last-child:not(.mega-dropdown) .dropdown-wrapper.open { transform: translateY(0); } /* tighten hover bridge so it doesn't push overflow */ .site-nav .nav-list > .nav-item:last-child::after { left: 0; right: 0; } /* ========================================================= TESTIMONIAL CONTENT WIDTH ========================================================= */ .testimonials-var1 .slick-slide > div{ max-width:900px; margin:0 auto; } /* ========================================================= TESTIMONIALS SLICK CORE (SLIM) ========================================================= */ .testimonials-var1 .slick-track{ display:flex; align-items: flex-start; } .testimonials-var1 .slick-slide{ height:auto; } /* ========================================================= ARROWS ========================================================= */ .testimonials-var1 .slick-prev, .testimonials-var1 .slick-next{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:none; background:none; cursor:pointer; z-index:5; } .testimonials-var1 .slick-prev{ left:0; display: none!important;!important; } .testimonials-var1 .slick-next{ right:0; display: none!important;!important; } /* hide default slick icons */ .testimonials-var1 .slick-prev:before, .testimonials-var1 .slick-next:before{ display:none; } /* SVG arrows */ .testimonials-var1 .slick-prev::after, .testimonials-var1 .slick-next::after{ content:""; display:block; width:22px; height:22px; margin:auto; background-size:contain; background-repeat:no-repeat; } /* left arrow */ .testimonials-var1 .slick-prev::after{ background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); } /* right arrow */ .testimonials-var1 .slick-next::after{ background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); } /* ========================================================= DOTS ========================================================= */ .testimonials-var1 .slick-dots{ margin-top:2rem; padding:0; list-style:none; display:flex; justify-content:center; gap:10px; } .testimonials-var1 .slick-dots li{ width:10px; height:10px; } .testimonials-var1 .slick-dots button{ width:10px; height:10px; padding:0; border-radius:50%; border:none; background:#bbb; font-size:0; } .testimonials-var1 .slick-dots .slick-active button{ background:#333; } /* ========================================================= Optional: quote mark (disabled by default) ========================================================= */ .testimonials-var1 .multiple-items blockquote::before { content: "\201C"; font-family: Georgia, Merriweather, Arial; font-size: 114px; line-height: 80px; display: none; /* enable if desired */ } /* ========================================================= COLUMN / GRID VARIANTS ========================================================= */ .list-check [class*="list-cols"] > ul a { font-size: 18px; font-weight: 600; letter-spacing: 0; text-transform: uppercase; display: inline; padding: 0; } /* ========================================================= LOCATIONS LIST CLEANUP + SOCIAL ICON LAYOUT Scoped for mobile nav + reusable contexts ========================================================= */ /* Hide name + following breaks/links */ .mobile-nav .locations_list .location_name + br, .mobile-nav .locations_list .location_name + a { display: none !important; } /* Base link spacing */ .mobile-nav .locations_list a { display: block !important; padding: 25px 0 5px; line-height: 0 !important; } /* External links (social / maps) */ .mobile-nav .locations_list a[target="_blank"] { padding: 16px 0 0; } /* Location text blocks */ .mobile-nav .locations_list span { display: block !important; margin: 0 !important; padding-bottom: 20px; line-height: 25px !important; } /* ========================================================= SOCIAL MODULE FLEX, NO MARGIN HACKS ========================================================= */ .mobile-nav .locations_list .social-module { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px; text-align: initial; margin-top: 10px !important; margin-bottom: 40px !important; } /* Desktop adjustment */ @media (min-width: 949px) { .mobile-nav .locations_list .social-module { margin-bottom: 10px !important; } .mobile-nav .locations_list .social-module span { display: block !important; padding-top: 0; line-height: 15px !important; } } /* ========================================================= SOCIAL ICON LINKS CENTERED SQUARES ========================================================= */ .mobile-nav .locations_list .social-module a[target="_blank"] { display: flex !important; align-items: center; justify-content: center; padding: 0; margin: 0; line-height: 1; text-decoration: none; position: relative; } /* Icon normalization */ .mobile-nav .locations_list .social-module a[target="_blank"] i { line-height: 0 !important; } .mobile-nav .locations_list span { padding-bottom: 10px!important; line-height: 15px!important; } .mobile-nav span.location_name { font-size: 18px!important; max-width: 80%; padding-bottom: 0px !important; line-height: 25px !important; } .mobile-nav .locations_list { margin-top: 35px!important; padding: 0px 20px; } .mobile-nav .locations_list a { font-size: 13px; line-height: 2px!important; font-weight: 300!important; } .mobile-nav .locations_list .social-module { padding-top: 0px!important; margin-bottom: 10px!important; } .mobile-nav .locations_list div span a { padding: 0px; background: transparent; } /* ========================================================= FORMS ========================================================= */ /* base */ .sb-formbuilder form, .sb-contactform form { width: 100%; } .sb-formbuilder fieldset, .sb-contactform fieldset { border: 0; padding: 0; margin: 0; } /* field blocks (covers .sb-formfield + plain

) */ .sb-formbuilder p, .sb-contactform p { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; } /* labels */ .sb-formbuilder label, .sb-contactform label { display: inline-block; margin: 0; font-weight: 500; font-size: 1em; } /* inputs & textareas */ .sb-formbuilder input[type="text"], .sb-formbuilder input[type="email"], .sb-formbuilder input[type="tel"], .sb-formbuilder textarea, .sb-formbuilder .form-control, .sb-contactform input[type="text"], .sb-contactform input[type="email"], .sb-contactform input[type="tel"], .sb-contactform textarea { width: 100%; box-sizing: border-box; } /* ========================================================= DATE INPUT NORMALIZE (BOTH FORMS) ========================================================= */ .sb-formbuilder .input-group.date, .sb-contactform .input-group.date { position: relative; display: flex; align-items: stretch; width: 100%; } .sb-formbuilder .input-group.date > .form-control, .sb-contactform .input-group.date > .form-control { flex: 1 1 auto; width: 100%; min-width: 0; } .sb-formbuilder .input-group.date > .input-group-addon, .sb-contactform .input-group.date > .input-group-addon { display: flex; align-items: center; justify-content: center; flex: 0 0 48px; margin-left: 8px; border-radius: 6px; cursor: pointer; border: 1px solid #66a6ce; background: #e8f6ff; } .sb-formbuilder .input-group-addon .fa-calendar, .sb-contactform .input-group-addon .fa-calendar { line-height: 1; } /* ========================================================= SUBMIT BUTTONS ========================================================= */ .sb-formbuilder .submit, .sb-contactform .submit { margin-top: 12px; } .sb-formbuilder input[type="submit"], .sb-contactform input[type="submit"] { width: auto; } /* ========================================================= MOBILE TWEAKS ========================================================= */ @media (max-width: 768px) { .sb-formbuilder .input-group.date > .input-group-addon, .sb-contactform .input-group.date > .input-group-addon { flex: 0 0 44px; margin-left: 6px; } } form input[type=email], form input[type=text], form input[type=url], form input[type=number], form textarea, form select{ border-radius:3px; font-family: inherit!important; padding:7px; border:1px solid #ccc; color:#ccc; background-color:#fff; font-size:1.0em!important; height:auto !important; } form select{ color:#555; appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:10px; padding-right:28px; } /* ========================================================= MULTI-ITEM FALLBACK (when Slick is NOT active) - 3-up desktop - 1-up mobile ========================================================= */ .testimonials-var1 .multiple-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } /* Mobile */ @media (max-width: 950px) { .testimonials-var1 .multiple-items { grid-template-columns: 1fr; } } /* ========================================================= Slick layout overrides (Slick auto-overrides grid when initialized) ========================================================= */ .testimonials-var1 .multiple-items.slick-slider { display: block; } /* Slick gutters */ .testimonials-var1 .multiple-items .slick-slide { padding: 0 12px; } .testimonials-var1 .multiple-items .slick-list { margin: 0 -12px; } /* ========================================================= Quote ========================================================= */ body:not(.page-app) .testimonials-var1-row:not(.text--white) .testimonials-var1 figure h3 { color: #141414!important; } /* ========================================================= Caption ========================================================= */ .testimonials-var1 figcaption.quotename { font-weight: 800; font-size: 14px; line-height: 1.4; margin-top: 6px; } /* ========================================================= THEME: Card Style (safe to move to site-specific CSS) ========================================================= */ .sb-testimonials-var1-row .multiple-items figure { padding: 30px 45px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } /* Star image */ .sb-testimonials-var1-row figure img { width: 250px; margin-bottom: 10px; margin-left: auto; margin-right: auto; } /* ========================================================= TESTIMONIALS  Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â€šÂ¬Ã…¡Ã‚¬šÃ‚¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚¬Ã‚ SLIDE MODE Behavior flag: .is-slide ========================================================= */ .testimonials-var1.is-slide .multiple-items{ display:flex; flex-wrap:nowrap; gap:24px; overflow-x:auto; overflow-y:visible; scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-width:none; } .testimonials-var1.is-slide .multiple-items::-webkit-scrollbar{ display:none; } .testimonials-var1.is-slide .multiple-items > figure{ scroll-snap-align: start; } @media (min-width: 949px) .testimonials-var1.is-slide .multiple-items > figure{ flex: 0 0 calc((100% / 3) - 16px); max-width: calc((100% / 3) - 16px); scroll-snap-align: start; } } /* ========================================================= Optional: quote mark (disabled by default) ========================================================= */ .testimonials-var1 .multiple-items blockquote::before { content: "\201C"; font-family: Georgia, Merriweather, Arial; font-size: 114px; line-height: 80px; display: none; /* enable if desired */ } /* ========================================================= Carousel: hero graphic overlay (optional) ========================================================= */ #page-home .carousel-inner .item::after { content: ""; position: absolute; right: 6%; bottom: 6%; width: 600px; height: 600px; background-repeat: no-repeat; background-size: contain; background-position: bottom right; opacity: 0; /* base hidden */ pointer-events: none; z-index: 2; will-change: transform, opacity; } /* keep text above */ .carousel .item-content { position: relative; z-index: 3; } /* ENTRANCE SOFT DIAGONAL BOUNCE + FADE */ @keyframes starBounceIn { 0% { opacity: 0; transform: translate(18px, 18px) scale(0.96); } 60% { opacity: 1; transform: translate(-4px, -4px) scale(1.01); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } /* IDLE FLOAT TRANSFORM ONLY (IMPORTANT) */ @keyframes starFloat { 0% { transform: translate(0, 0); } 50% { transform: translate(-6px, -8px); } 100% { transform: translate(0, 0); } } /* TRIGGER AFTER CAROUSEL READY */ html.carousel-images-ready #page-home .carousel-inner .item.active::after { opacity: 1; /* LOCK VISIBLE */ animation: starBounceIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both, starFloat 8s ease-in-out infinite; animation-delay: 0s, 0.9s; } /* MOBILE TUNING */ @media (max-width: 767px) { #page-home .carousel-inner .item::after { width: 180px; height: 180px; right: 4%; bottom: 4%; opacity: 0.9; } } /*==================================================================================*/ /* carousel logo */ /*==================================================================================*/ body#page-home .carousel .logo { margin-bottom: 20px; } html.has-carousel-logo body#page-home header #header-logo { display: none; } body#page-home .carousel .logo { margin-left: auto; margin-right: auto; } .page-app .logo img { display: none; } .page-app .logo { display: flex; align-items: center; justify-content: center; width: 180px; height: 180px; } .page-app .logo::before { content: ""; width: 160px; height: 160px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23666'/%3E%3Ctext x='50' y='55' font-size='12' text-anchor='middle' fill='white' font-family='Arial'%3ELOGO%3C/text%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } .hero-logo img { width: var(--logo-md); /* default */ height: auto; } /* ========================================================= LOGO SIZE MODIFIERS ========================================================= */ .logo-sm .hero-logo img { width: var(--logo-sm); } .logo-md .hero-logo img { width: var(--logo-md); } .logo-lg .hero-logo img { width: var(--logo-lg); } /* ========================================================= BUILDER / EDITOR LOGO PLACEHOLDER ========================================================= */ /* Only inside editor iframe */ body[contenteditable="true"] .logo img { display: none; } /* Logo container */ body[contenteditable="true"] .logo { display: flex; align-items: center; justify-content: center; width: 180px; height: 180px; } /* SVG placeholder */ body[contenteditable="true"] .logo::before { content: ""; width: 160px; height: 160px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23666'/%3E%3Ctext x='50' y='55' font-size='12' text-anchor='middle' fill='white' font-family='Arial'%3ELOGO%3C/text%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } /* ========================================================= BUILDER / EDITOR LOGO PLACEHOLDER ========================================================= */ /* Only inside editor iframe */ body[contenteditable="true"] .logo img { display: none; } /* Logo container */ body[contenteditable="true"] .logo { display: flex; align-items: center; justify-content: center; width: 180px; height: 180px; } /* SVG placeholder */ body[contenteditable="true"] .logo::before { content: ""; width: 160px; height: 160px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23666'/%3E%3Ctext x='50' y='55' font-size='12' text-anchor='middle' fill='white' font-family='Arial'%3ELOGO%3C/text%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } /* ========================================================= SOCIAL ICONS (ANYWHERE) ========================================================= */ .socials { display: inline-flex; justify-content: center; align-items: center; gap: 10px; /* Adjust spacing between icons */ } @media screen and (max-width:948px) { .socials { display: none; } } .socials a { display: flex; justify-content: center; align-items: center; width: 30px; /* Set a uniform width for the icons */ height: 30px; /* Set a uniform height for the icons */ border: 0px solid #ccc; /* Add a border color */ background-color: #f0f0f0; /* Add a background color */ border-radius: 50%; /* Makes the icons circular */ text-decoration: none; transition: all 0.3s ease; /* Smooth hover effect */ } .socials a i { font-weight: normal!important; font-size: 12px!important; /* Adjust icon size */ color: #333; /* Icon color */ } .socials a:hover { background-color: #121212; /* Change background on hover */ border-color: #121212; /* Change border color on hover */ color: white; /* Change icon color on hover */ } .socials a:hover i { color: white!important; /* Change icon color on hover */ } .btn + .socials {padding-left: 20px;} /* ========================================================= BASE ========================================================= */ body, .body, .content { color: #141414; background-color: transparent; } body { background-color: var(--color-bg-page); } /* ========================================================= LINKS ========================================================= */ .embed a, .content a, .sb-module a { color: var(--color-brand-primary); } a:hover { color: var(--color-text-subtle); } /* ========================================================= HEADINGS ========================================================= */ .content h1, .content h2, .sb-module h2, .sb-module h4 { color: var(--color-text-primary); } .content h3 { color: var(--color-text-accent1); } /* ========================================================= HEADER / NAV ========================================================= */ .site-header { background: var(--color-header-bg); } html.snapped body#page-home .site-header.has-header-overlay { background: var(--color-header-bg); } /* NAV PANEL */ nav.mobile-nav { background: var(--color-nav-bg); } /* NAV PANEL */ nav.mobile-nav { background: #f7f7f6!important; } /* style menu only */ .mobile-nav .mobile-menu a { display: block; padding: 20px 2px; font-weight: 600; font-size: 15px; } /* global color */ .mobile-nav a { color: #28334a; } /* cta */ .mobile-nav a { padding: 10px 30px 10px 40px; font-weight: 600; font-size: 15px; } /* ========================================================= HEADER LOGO BASE ========================================================= */ .site-header .logo img { width: var(--logo-size, var(--logo-md)); height: auto; transition: width .35s ease; } /* ========================================================= HERO / CAROUSEL LOGO BASE ========================================================= */ .hero-logo img { width: var(--hero-logo-size, var(--logo-lg)); height: auto; transition: width .35s ease; padding-bottom: 20px; } /* ========================================================= FOOTER ========================================================= */ .footer { background-image: linear-gradient(var(--color-bg-footer1), var(--color-bg-footer1)), url(/img/upload/000_custom_image91.jpg); } .footer .footer-box h3, .footer .footer-box a, .footer .footer-user-content, .footer .footer-user-content a, .footer .footer-box span, .footer .footer-box h2, .footer .footerlogoname { color: var(--color-text-subtle); } .footer { color: var(--color-bg-footer1); } .footer .footer-box { color: var(--color-bg-footer1); } .footer .footer-box a:hover { color: var(--color-brand-primary); } .by-optima, .by-optima a { color: var(--color-text-secondary) !important; } /* ========================================================= BUTTON SYSTEM ========================================================= */ a.btn, .btn, .btn-cta, .btn-ph, .gallery-item-wrap .btn, .module-cta a.btn, .module-cta .btn, .sb-contactform-row input.btn, .sb-formbuilder-row input.btn, .carousel .item-content a, .sb-read-tag, .social-module a, .footer .primary-link:last-child > a, input[type="submit"] { color: var(--color-text-inverse) !important; background: var(--color-brand-primary) !important; border-color: var(--color-brand-primary) !important; } .btn-default, a.btn.btn-default { color: var(--color-text-inverse) !important; background: var(--color-brand-primary) !important; border-color: var(--color-brand-primary) !important; } a.btn-white { color: #fff !important; background: rgb(255 255 255 / 0%) !important; border-color: #fff !important; } .has-forms .btn-default { color: #fff !important; background: rgb(0 0 0 / 0%) !important; border-color: #191919 !important; } /* ========================================================= CAROUSEL ========================================================= */ .carousel .item-content { color: var(--color-text-accent2); } .carousel-wrapper::before, .carousel-inner .item::before { background: var(--color-overlay-dark); } #page-home .carousel-inner .item::after { background-image: var(--carousel-bg-image, none); } /* ========================================================= GLOBAL SURFACE MOOD ========================================================= */ body { background-image: none; background-color: var(--color-bg-page1); } .body { background: linear-gradient( 180deg, var(--color-bg-page2), var(--color-bg-page2) ); } /* ========================================================= ACCENT SECTIONS ========================================================= */ .accent--lite1 { background-color: var(--color-brand-primary); } .accent--lite2 { background-color: var(--color-brand-accent); } .accent--lite3 { background-color: var(--color-brand-soft); } /* kill wrapper */ .sb-wrap.sb-accent-lite3-row:has(.has-card) { background: none !important; } .embed:has(.has-card), .content:has(.has-card) { position: relative; z-index: 1; padding: var(--sb-space-sm) var(--sb-space-sm); } /* turn .content into the card */ @media (min-width: 949px) { .embed:has(.has-card), .content:has(.has-card) { position: relative; z-index: 1; padding: var(--sb-space-xs) var(--sb-space-xs); } } /* draw the card */ .embed:has(.has-card)::before, .content:has(.has-card)::before { content: ""; position: absolute; inset: 0; background: var(--color-brand-soft); border-radius: 20px; z-index: -1; } /* ========================================================= MODULE BG CONTROL ========================================================= */ .sb-content-intro-row, .sb-module-mini-cta, .sb-testimonials-row, .sb-testimonials-var1-row, .sb-feature-about-row, .sb-feature-about1-row, .sb-feature-about2-row, .sb-feature-about3-row, .sb-feature-services2-row, .sb-feature-cta1-row, .sb-feature-cta2-row, .sb-feature-cta3-row, .sb-feature-message1-row { background-image: none; } /* ========================================================= MINI CTA ========================================================= */ .sb-module-mini-cta { background: var(--color-brand-secondary) !important; } /* ========================================================= TESTIMONIALS ========================================================= */ .sb-testimonials-row { background: transparent !important; } /* ========================================================= HOMEPAGE GALLERY BG ========================================================= */ #page-home .sb-feature-gallery-row, #page-home .sb-gallery-row { background: var(--color-brand-primary); } /* ========================================================= CONTACT / FORMS ========================================================= */ #page-home .sb-contactform-row, #page-home .sb-formbuilder-row { background-image: none; } /* ========================================================= MAP SPLIT ========================================================= */ .map-split .contact-block { background: var(--color-brand-secondary); } /* ========================================================= NARROW SITE  Ã¢â‚¬â„¢ÃƒÆ’†â€™Ãƒâ€šÃ‚¢ Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚¬Ã…¡Ã‚¬ Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â€šÂ¬Ã…¡Ã‚¬Ã‚ COLUMN SURFACE ========================================================= */ @media (min-width: 949px) { .container > .columns { background: var(--color-bg-page); } } /* ========================================================= NAV TUNING ========================================================= */ .tool-links a, .site-header .site-nav > .nav-list > .nav-item > a { color: var(--color-text-inverse); } /* ========================================================= CAROUSEL CUSTOMIZATION ========================================================= */ #page-home > .container > .carousel-wrapper:first-of-type::before { background: var(--color-overlay-light); } #page-home .carousel-inner .item::after { background-image: url("/img/upload/northstarpediatric_bg_1.webp"); } /* ========================================================= GALLERY CARDS ========================================================= */ #page-home .gallery-item-wrap { background: transparent; box-shadow: -2px 1px 5px rgb(0 0 0 / 8%); } #page-home .gallery-item-wrap:hover { border-color: var(--color-brand-primary); background: var(--color-bg-soft); box-shadow: none; } /* ========================================================= FEATURE CARDS ========================================================= */ .sb-feature-cards1-row :where(.embed, .content) .feature-cards1.has-surface-brand > div > div { background-color: var(--surface-brand); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); isolation: isolate; /* breaks stacking poison */ will-change: backdrop-filter; /* tells browser early */ transform: translateZ(0); /* forces compositor */ } /* ========================================================= GLOBAL DECORATIVE GRAPHIC ENGINE ========================================================= */ [class*='sb-bg-graphic'].sb-wrap:after { background-repeat: no-repeat; background-origin: content-box; z-index: -1; background-position: var(--bg-pos-x-mobile, right) var(--bg-pos-y-mobile, 0); background-size: var(--bg-size-mobile, 200%); height: var(--bg-height-mobile, 2400px); opacity: var(--bg-opacity-mobile, .1); top: var(--bg-top-mobile, 0); transform: var(--bg-transform-mobile, scaleX(1)); left: 50%; margin-left: -50vw; width: 100vw; max-width: 100vw; } @media (min-width: 949px) { [class*='sb-bg-graphic'].sb-wrap:after { background-position: var(--bg-pos-x-desktop, right) var(--bg-pos-y-desktop, 0); background-size: var(--bg-size-desktop, 75%); height: var(--bg-height-desktop, 1200px); opacity: var(--bg-opacity-desktop, 1); top: var(--bg-top-desktop, 0); transform: var(--bg-transform-desktop, scaleX(1)); } /* LAYER PROTECTION */ .sb-testimonials-row, .sb-gallery-row, .sb-content-row, .footer { position: relative; z-index: 2; } } /* ----------------------------------------- Banner Thin  Ã¢â‚¬â„¢ÃƒÆ’†â€™Ãƒâ€šÃ‚¢ Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚¬Ã…¡Ã‚¬ Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â€šÂ¬Ã…¡Ã‚¬Ã‚ Page Background ----------------------------------------- */ html.has-banner-thin:not(#page-home) body { background: rgb(255 255 255); } /* Banner Thin  Ã¢â‚¬â„¢ÃƒÆ’†â€™Ãƒâ€šÃ‚¢ Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚¬Ã…¡Ã‚¬ Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â€šÂ¬Ã…¡Ã‚¬Ã‚ Carousel Overlay */ body:not(#page-home):not(.body).has-banner-thin > .container > .carousel-wrapper .carousel-inner .item:before, body:not(#page-home):not(.body).has-banner-thin > .container > .carousel-wrapper:before { background: rgb(0 0 0 / 43%); } /* ================================================= HERO VIDEO LAYER — FINAL (COVER SAFE) ================================================= */ #page-home > .container > .carousel-wrapper:first-of-type .video-wrapper { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; /* ← IMPORTANT (you commented this out) */ } /* VIDEO COVER BEHAVIOR */ #page-home > .container > .carousel-wrapper:first-of-type .video-wrapper iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-width: 177.78vh; min-height: 100vh; transform: translate(-50%, -50%); } /* ========================================================= HERO HARD LOCK (CLS FIX) ========================================================= */ #page-home .carousel, #page-home .carousel-inner, #page-home .carousel .item, #page-home .carousel .item-inner { height: 100vh; min-height: 650px; } @media (min-width: 949px) { #page-home .carousel, #page-home .carousel-inner, #page-home .carousel .item, #page-home .carousel .item-inner { min-height: 950px; } } .carousel .carousel-lcp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ========================================================= UNIVERSAL GRID / COLUMN ENGINE ========================================================= */ /* modules that use grid */ .gallery, .feature-grid, .figure-grid, .feature-cards1 > div{ display:flex; flex-wrap:wrap; gap:var(--grid-gap,25px); } .gallery{ --grid-cols:4; } /* ========================================================= GALLERY ITEMS ========================================================= */ .gallery > .item{ flex: 0 0 calc((100% - (var(--grid-gap,25px) * (var(--grid-cols,4) - 1))) / var(--grid-cols,4)); max-width: calc((100% - (var(--grid-gap,25px) * (var(--grid-cols,4) - 1))) / var(--grid-cols,4)); box-sizing:border-box; } .columns-inner > :nth-last-child(1 of .sb-gallery-row) .gallery.has-breakout > .item{ max-width: 100%!important; box-sizing:border-box; } /* ========================================================= FEATURE CARDS keeps div > div structure ========================================================= */ .feature-cards1 > div > div{ flex:0 0 calc((100% / var(--grid-cols,3)) - var(--grid-gap)); max-width:calc((100% / var(--grid-cols,3)) - var(--grid-gap)); } /* ========================================================= COLUMN MODIFIERS ========================================================= */ /* ========================================================= COLUMN MODIFIERS (DESKTOP DEFAULT) ========================================================= */ .is-1col{ --grid-cols:1; } .is-2col{ --grid-cols:2; } .is-3col{ --grid-cols:3; } .is-4col{ --grid-cols:4; } .is-5col{ --grid-cols:5; } /* ========================================================= MOBILE OVERRIDES (OPT-IN) ========================================================= */ @media (max-width: 948px){ .is-m-1col { --grid-cols:1 !important; } .is-m-2col { --grid-cols:2 !important; } .is-m-3col { --grid-cols:3 !important; } } /* ========================================================= scale fonts ========================================================= */ @media (max-width: 948px){ .is-m-1col { --grid-cols:1 !important; } .feature-cards1.is-m-2col h2 {font-size: 18px!important; line-height: 20px!important;} .feature-cards1.is-m-3col h2 {font-size: 18px!important; line-height: 20px!important;} .feature-cards1.is-m-2col p {font-size: 13px!important; line-height: 17px!important;} .feature-cards1.is-m-3col p {font-size: 13px!important; line-height: 17px!important;} } @media (max-width:948px){ .gallery[class*="col"]{ --grid-cols: 2; } .var1.gallery[class*="col"]{ --grid-cols: 1; } .gallery.is-slide[class*="col"]{ --grid-cols:1; } body:not(#page-home) .gallery[class*="col"]{ --grid-cols: 2; } } /* ========================================================= GAP MODIFIERS ========================================================= */ .is-tight{ --grid-gap:10px; } .is-normal{ --grid-gap:25px; } .is-spacious{ --grid-gap:40px; } /* ========================================================= RESPONSIVE DEFAULTS ========================================================= */ @media (max-width:948px){ .gallery, .feature-grid, .figure-grid, .feature-cards1{ --grid-cols:1; } } /* ========================================================= GALLERY SYSTEM  Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â€šÂ¬Ã…¡Ã‚¬šÃ‚¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚¬Ã‚ LEGACY VARS var1 = overlay var2 = cards is-slide = slider behavior ========================================================= */ /* ========================================================= TOKEN ENGINE ========================================================= */ :where(html, body){ --gallery-cols:3; --gallery-gap:20px; } /* ========================================================= CORE GALLERY LAYOUT ========================================================= */ .gallery{ display:flex; flex-wrap:wrap; width:100%; box-sizing:border-box; gap: var(--gap-md); } @media (max-width:948px){ .gallery{ justify-content:center; gap: 0; } .var1.gallery{ justify-content:center; gap:var(--gap-md); } } /* ========================================================= COLUMN ENGINE ========================================================= */ @media (min-width:949px){ #page-home .gallery > .col-sm-4{ float:none; flex:0 0 calc((100% / var(--gallery-cols)) - var(--gallery-gap)); max-width:calc((100% / var(--gallery-cols)) - var(--gallery-gap)); box-sizing:border-box; padding:0 15px; } } @media (max-width:768px){ .gallery > .col-sm-4{ flex:0 0 100%; max-width:100%; padding:0; } } /* ========================================================= WRAPPER CONTRACT ========================================================= */ .gallery .gallery-item-wrap{ height:450px; overflow:hidden; position:relative; margin-bottom:20px; } /* ========================================================= BASE ITEM CONTRACT ========================================================= */ #page-home .gallery span.gallery-item{ display:flex; flex-direction:column; margin:0; line-height:initial; vertical-align:top; background-repeat:no-repeat; background-position:center top; background-size:cover; transition:transform .5s ease; height: 100%; } #page-home .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout span.gallery-item, #page-home .gallery.var1 span.gallery-item{ width:100%; height:100%; } /* ========================================================= CAPTIONS ========================================================= */ .gallery .gallery-caption{ text-align:center; margin-top:10px; } .gallery .gallery-caption a{ display:inline-block; margin-top:10px; padding:10px 20px; text-decoration:none; } /* ========================================================= HEADERS ========================================================= */ .gallery .gallery-header{ text-align:center; text-transform:capitalize; position:relative; } .gallery .gallery-header h2{ font-size:.8em!important; line-height: 1.0em!important; padding-bottom:5px; text-align:center; } .gallery .gallery-header p{ font-size:15px!important; line-height:25px; } /* ========================================================= RESPONSIVE HEADERS ========================================================= */ @media (max-width:768px){ .gallery .gallery-header{ font-size:1em; line-height:.8em!important; } } @media (min-width:949px){ .gallery .gallery-header{ font-size:30px; line-height:30px; } .gallery .gallery-header h2{ font-size:1.2em!important; } } /* ========================================================= CURSOR ========================================================= */ body:not(#page-home) span.gallery-item *{ cursor:pointer; margin:auto; } /* ========================================================= VAR1  Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â€šÂ¬Ã…¡Ã‚¬šÃ‚¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚¬Ã‚ OVERLAY ========================================================= */ #page-home .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout img, #page-home .gallery.var1 img{ display:none!important; } #page-home .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout .gallery-header, #page-home .gallery.var1 .gallery-header{ width:100%; } #page-home .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout .col-sm-2, #page-home .gallery.var1 .col-sm-2{ width:100%; } #page-home .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout span.gallery-item, #page-home .gallery.var1 span.gallery-item{ position:relative; justify-content:flex-start; align-items:center; padding:0 40px; } /* background now applied to wrapper */ #page-home .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout .gallery-item-wrap, #page-home .gallery.var1 .gallery-item-wrap{ background-repeat:no-repeat; background-position:center top; background-size: 145%; } @media (max-width:768px){ #page-home .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout, #page-home .gallery.var1{ display:flex; } #page-home .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout .gallery-item-wrap, #page-home .gallery.var1 .gallery-item-wrap{ height:250px; width:100%; margin-bottom:20px; } #page-home .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout span.gallery-item, #page-home .gallery.var1 span.gallery-item{ background-position:center center; } } @media (min-width:949px){ .gallery .gallery-header{ bottom:20px; } } /* caption overlay */ #page-home .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout .gallery-caption, #page-home .gallery.var1 .gallery-caption{ text-align:center; width:100%; background:rgb(0 0 0 / 0%); position:absolute; padding:0px 20px; display:block; bottom:0px; z-index:9; padding-bottom:20px; } #page-home .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout .gallery-caption *, #page-home .gallery.var1 .gallery-caption *{ color:var(--color-text-accent2); } /* clip card */ #page-home .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout .item, #page-home .gallery.var1 .item{ overflow:hidden; } /* background layer */ #page-home .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout .gallery-item-wrap:hover, #page-home .gallery.var1 .gallery-item-wrap:hover { background-size:120%; } /* hover */ #page-home .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout .gallery-item-wrap, #page-home .gallery.var1 .gallery-item-wrap { background-size: 105%; } #page-home .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout .gallery-header, #page-home .gallery.var1 .gallery-header { margin: auto; max-width: 60%; } #page-home .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout .gallery-header h2, #page-home .gallery.var1 .gallery-header h2 { font-size: 2em!important; line-height: 1.2em !important; } @media (min-width:949px){ #page-home .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout .gallery-header, #page-home .gallery.var1 .gallery-header { margin: auto; max-width: 60%; } #page-home .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout .gallery-header h2, #page-home .gallery.var1 .gallery-item-wrap { font-size: 1.1em!important; line-height: 1.2em !important; } } #page-home .gallery.var1 .gallery-item-wrap { margin-bottom: 0px; } /* ========================================================= BTN HIDE MODE ========================================================= */ .has-gallery-btn-hide .gallery-item img{ cursor:pointer!important; } .has-gallery-btn-hide .gallery-item-wrap .btn{ width:100%!important; height:100%; max-width:100%; position:absolute; margin:auto; bottom:0; left:0; right:0; top:0; opacity:0; } .has-gallery-btn-hide .gallery-item-wrap .btn:hover{ opacity:0; } .has-gallery-btn-hide .gallery-caption{ pointer-events:none; } /* ========================================================= SLIDE MODE ========================================================= */ #page-home .gallery.is-slide{ display:flex; flex-wrap:nowrap; position:relative; scroll-behavior:smooth; overflow-x:auto; overflow-y:visible; scrollbar-width:none; scroll-snap-type:x mandatory; justify-content:flex-start!important; pointer-events:auto; } .gallery.is-slide::-webkit-scrollbar{ display:none; } @media (min-width:949px){ #page-home .gallery.is-slide > .col-sm-4{ flex:0 0 calc((100% / var(--gallery-cols))); max-width:calc((100% / var(--gallery-cols))); scroll-snap-align:start; } } @media (max-width:768px){ .gallery.is-slide > .col-sm-4{ flex:0 0 85%; max-width:85%; } } /* ========================================================= SLIDER ARROWS ========================================================= */ .gallery-slider-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:42px; height:42px; border-radius:50%; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.15); cursor:pointer; display:flex; align-items:center; justify-content:center; border:0; } .gallery-slider-arrow.prev{ left:-20px; } .gallery-slider-arrow.next{ right:-20px; } .gallery-slider-arrow svg{ width:14px; height:14px; } .gallery-slider-arrow svg *{ stroke:#000000!important; } /* ========================================================= INTERIOR GALLERY ========================================================= */ /* reset base gallery */ .has-fancybox span.gallery-item, body:not(#page-home) span.gallery-item { margin: 10px!important; } .has-fancybox.gallery, body:not(#page-home) .gallery { gap: 10px!important; } /* end reset */ .has-fancybox span.gallery-item .gallery-image, body:not(#page-home) span.gallery-item .gallery-image{ display:block!important; } .has-fancybox.gallery span.gallery-item, body:not(#page-home) .gallery span.gallery-item{ float:none; width:auto; } .has-fancybox.gallery .gallery-item-wrap, body:not(#page-home) .gallery .gallery-item-wrap{ position:relative; overflow:hidden; margin:0; height: auto; } .has-fancybox.gallery img, body:not(#page-home) .gallery img{ width:160px; height:160px; object-fit:cover; display:block; border:none!important; box-shadow:none!important; } /* ========================================================= Temp gallery homepage icons only system ========================================================= */ #page-home .gallery img { width: 100%; height: 100%; object-fit: contain; /* 🔑 THIS is the fix */ padding: 0px; /* breathing room */ } /* frame */ #page-home .gallery .gallery-item-wrap { aspect-ratio: 3 / 2; /* or 1/1 if you want squares */ display: flex; align-items: center; justify-content: center; } #page-home .gallery span.gallery-item { float: none; width: auto; height: auto; margin: 0px!important; } #page-home .gallery > .item{ flex: 0 0 calc((100% - (var(--grid-gap,25px) * (var(--grid-cols,4) - 1))) / var(--grid-cols,4)); max-width: calc((100% - (var(--grid-gap,25px) * (var(--grid-cols,4) - 1))) / var(--grid-cols,4)); box-sizing:border-box; } .has-fancybox.gallery .btn, body:not(#page-home) .gallery .btn{ display:none!important; } .has-fancybox span.gallery-item *, body:not(#page-home) span.gallery-item *{ cursor:pointer; } .has-fancybox span.gallery-item a, body:not(#page-home) span.gallery-item a{ z-index:1; position:relative; } .has-fancybox .gallery-item-wrap, body:not(#page-home) .gallery-item-wrap{ background: none!important; text-align: center; } .has-fancybox .gallery-item-wrap .btn, body:not(#page-home) .gallery-item-wrap .btn { padding: 6px 20px!important; } .has-fancybox .gallery-caption , body:not(#page-home) .gallery-caption { position:relative; } .has-fancybox .gallery-header, body:not(#page-home) .gallery-header{ max-width: 100%; } .gallery .gallery-header{ bottom:0px; } .gallery span.gallery-item{ cursor:inherit; } .gallery span.gallery-item a{ cursor:inherit; } /* icon hover */ .has-fancybox .gallery img, body:not(#page-home) .gallery img{ transform: scale(1); } .has-fancybox .gallery img:hover, body:not(#page-home) .gallery img:hover{ transform: scale(1.1) translateY(-2px); } .has-fancybox .gallery .gallery-item-wrap { height: auto; overflow:hidden; position:relative; margin-bottom:0px!important; } /* ===================================== ==================== Hover ========================================================= */ .gallery .gallery-icon{ display:block; } .gallery.var3 .gallery-icon{ display:block; height:100%; width:100%; text-decoration:none; color:inherit; } /* ====================================================== VAR3  Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â€šÂ¬Ã…¡Ã‚¬šÃ‚¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚¬Ã‚ ICON CARD ====================================================== */ /* Neutralize CMS image defaults */ .gallery.var3 img{ border-width: 0!important; box-shadow:none; background:none; max-width:none; max-height:none; cursor:pointer; } /* GALLERY VAR3  Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â€šÂ¬Ã…¡Ã‚¬šÃ‚¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚¬Ã‚ ICON SIZE */ .gallery.var3 img.gallery-image{ object-fit:contain; transform:scale(.92); } .gallery.var3 .gallery-item{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content: flex-start; text-align:center; width:100%; padding: 0px; height: 100%; } @media (max-width:948px){ .gallery.var3 .gallery-item{ height:100%; } } /* title */ @media (max-width:768px){ .gallery.var3 .gallery-header{ line-height: 20px!important; max-width: 50%; margin: auto; } } /* button */ .gallery.var3 .btn{ margin-top:20px; display: none; } .gallery.var3 .gallery-item-wrap{ height: auto; overflow:hidden; position:relative; margin-bottom:20px; } .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout .gallery-item-wrap{ height: 450px; overflow: hidden; position: relative; margin-bottom: 20px; } .gallery.var3 .gallery-item:before { background: linear-gradient(185deg, #00000000 25%, rgb(255 255 255 / 0%) 95%); box-shadow: none!important; } .gallery.var3 .gallery-header{ margin: auto; max-width: 60%; } body#page-home .gallery.var3 .gallery-header h2 { font-size: 1.2em!important; line-height: 1.4em !important; } @media (min-width:949px){ .gallery.var3 .gallery-header{ margin: auto; max-width: 60%; } body#page-home .gallery.var3 .gallery-header h2{ font-size: .7em!important; line-height: 1.4em !important; } } .gallery.var3 .gallery-caption{ height: 100%; width:100%; text-decoration:none; color:inherit; display: inline-block; position: relative; margin-top: 10px; } @media (min-width:949px){ .gallery.var3 .gallery-caption{ margin-top: 20px; } } .gallery.var3 .gallery-header { bottom: 0px; } .gallery.var3 .gallery-item:hover img.gallery-image{ transform:scale(1.1); transform:translateY(-4px); } /* ---------------------------------------------------------------------- CONTENT / MODULE VARIANTS ---------------------------------------------------------------------- */ ul.accordion-list { max-width: 1005; margin: auto!important; padding: 0 15px; text-align: left!important; margin-top: 50px!important; } ul.accordion-list { text-align: left; } .accordion-list h1 { /* color: #f05454; */ margin-bottom: 30px; } .accordion-list h2 { color: #47d8b2; /* font-family: 'hm_light', sans-serif; */ font-size: 20px; text-align: left; line-height: 34px; padding: 30px 30px 0; text-transform: none; letter-spacing: 0px; font-weight: 300; display: block; margin: 0; cursor: pointer; transition: .2s; } body:not(#page-home) ul.accordion-list li h3, body ul.accordion-list li h3 , body:not(#page-home) .body .sb-content:not(.text--left) .content ul.accordion-list li h3 { font-size: 1.5em!important; line-height: 1.1em!important; font-weight: 400!important; /* padding: 20px 0px!important; */ margin: 0px!important; text-align: left!important; padding: 20px 40px 20px 0px !important; font-family: inherit; font-style: normal; font-weight: 500!important; } @media (min-width: 949px) { body ul.accordion-list li h3 { font-size: 1.5em!important; line-height: 1.4em!important; font-weight: 400!important; /* padding: 20px 0px!important; */ margin: 0px!important; text-align: left!important; padding: 20px 40px 20px 0px !important; } } .accordion-list p { text-align: left; /* font-family: 'hm_light', sans-serif; */ font-size: 14px; line-height: 1.45; position: relative; will-change: max-height; contain: layout; display: inline-block; opacity: 1; transform: translate(0,0); margin: 0px; transition: .3s opacity; -webkit-hyphens: auto; -ms-hyphens: auto; z-index: 2; text-align: left; padding-bottom: 20px; } .content .accordion-list p { line-height: 23px!important; } .content .accordion-list .answer p { padding-top: 0px!important; } ul.accordion-list { list-style: none; perspective: 900; padding: 0; margin: 0; } .sb-module *:not(.element-item):not(.element-item):not(.element-item):not(.slick-slide):not(.slick-list):not(.slick-track):not(.module-mini-cta):not([class*='col-']) > ul.accordion-list > li { position: relative; overflow: hidden; padding: 0px 40px!important; margin: 0; background: rgb(192 192 192 / 5%); box-shadow: 0 3px 10px -2px rgb(0 0 0 / 0%); -webkit-tap-highlight-color: transparent; border-radius: 0px; border-top: 2px solid #d5d5d5; padding-left: 20px; padding-right: 20px; } ul.accordion-list li + li { margin-top: 15px; } ul.accordion-list li:last-of-type { padding-bottom: 0; } ul.accordion-list li i { position: absolute; transform: translate(-6px, 0); margin-top: 28px; right: 15px; } ul.accordion-list li i:before, ul.accordion-list li i:after { content: ""; position: absolute; background-color: #354aa6; width: 3px; height: 9px; } ul.accordion-list li i:before { transform: translate(2px, 0) rotate(45deg); } ul.accordion-list li i:after { transform: translate(-2px, 0) rotate(-45deg); } ul.accordion-list li input[type=checkbox] { position: absolute; cursor: pointer; width: 100%; height: 100%; z-index: 1; opacity: 0; touch-action: manipulation; } ul.accordion-list li input[type=checkbox]:checked ~ h2 { color: #101a2b; } ul.accordion-list li input[type=checkbox]:checked ~ p { margin: 10px; max-height: 0; transition: .3s; opacity: 0; } ul.accordion-list li input[type=checkbox]:checked ~ i:before { transform: translate(2px, 0) rotate(45deg); background: #57af9b; } ul.accordion-list li input[type=checkbox]:checked ~ i:after { transform: translate(-2px, 0) rotate(-45deg); background: #60c3aa; } ul.accordion-list li { cursor: pointer!important; } .sb-module *:not(.element-item):not(.element-item):not(.element-item):not(.slick-slide):not(.slick-list):not(.slick-track):not(.module-mini-cta):not([class*='col-']) ul.accordion-list .answer { cursor: auto!important; pointer-events: none; transition: none!important; } body.page-app ul.accordion-list .answer { display: block!important; } /* module accordion -- variant 2 (1 exists in base.themes) */ .accordion-list .accordion-list h3::after { display: none; } .accordion-list ul.accordion-list { max-width: 100%; margin: auto!important; padding: 0 15px; text-align: center; margin-top: 50px!important; } .accordion-list .accordion-list ul { text-align: left; } .accordion-list h1 { /* color: #f05454; */ margin-bottom: 30px; } .accordion-list h2 { color: #47d8b2; /* font-family: 'hm_light', sans-serif; */ font-size: 20px; text-align: left; line-height: 34px; padding: 30px 30px 0; text-transform: none; letter-spacing: 0px; font-weight: 300; display: block; margin: 0; cursor: pointer; transition: .2s; } .accordion-list h3 { margin: 0px!important; } .accordion-list p { font-size: 14px!important; } @media (min-width: 949px) { .accordion-list p { text-align: left; /* font-family: 'hm_light', sans-serif; */ font-size: 16px!important; line-height: 1.45; position: relative; will-change: max-height; contain: layout; display: inline-block; opacity: 1; transform: translate(0,0); margin: 0px; transition: .3s opacity; -webkit-hyphens: auto; -ms-hyphens: auto; z-index: 2; text-align: left; padding-bottom: 20px; } } :where(.embed, .content) .accordion-list p { line-height: 30px!important; } ul.accordion-list { list-style: none; perspective: 900; padding: 0px 0px; margin: 0; } .sb-module *:not(.element-item):not(.element-item):not(.element-item):not(.slick-slide):not(.slick-list):not(.slick-track):not(.module-mini-cta):not([class*='col-']) ul.accordion-list li { position: relative; overflow: hidden; padding: 0px 0px!important; margin: 0; background: rgb(192 192 192 / 0%); box-shadow: 0 3px 10px -2px rgb(0 0 0 / 0%); -webkit-tap-highlight-color: transparent; border-radius: 0px; border-top: 1px solid var(--color-text-accent1); padding-left: 20px; padding-right: 20px; border-bottom: 0px; } @media (min-width: 949px) { .sb-module ul.accordion-list .answer { width: 60%; } ul.accordion-list { padding: 0px 0px; } } ul.accordion-list li + li { margin-top: 15px; } ul.accordion-list li:last-of-type { padding-bottom: 0; } ul.accordion-list li i { position: absolute; transform: translate(-6px, 0); margin-top: 28px; right: 15px; } ul.accordion-list li i:before, ul.accordion-list li i:after { content: ""; position: absolute; background-color: #354aa6; width: 3px; height: 9px; } ul.accordion-list li i:before { transform: translate(2px, 0) rotate(45deg); } ul.accordion-list li i:after { transform: translate(-2px, 0) rotate(-45deg); } ul.accordion-list li input[type=checkbox] { position: absolute; cursor: pointer; width: 100%; height: 100%; z-index: 1; opacity: 0; touch-action: manipulation; } ul.accordion-list li input[type=checkbox]:checked ~ h2 { color: #101a2b; } ul.accordion-list li input[type=checkbox]:checked ~ p { margin: 10px; max-height: 0; transition: .3s; opacity: 0; } ul.accordion-list li input[type=checkbox]:checked ~ i:before { transform: translate(2px, 0) rotate(45deg); background: #57af9b; } ul.accordion-list li input[type=checkbox]:checked ~ i:after { transform: translate(-2px, 0) rotate(-45deg); background: #60c3aa; } ul.accordion-list li { cursor: pointer!important; } .sb-module *:not(.element-item):not(.element-item):not(.element-item):not(.slick-slide):not(.slick-list):not(.slick-track):not(.module-mini-cta):not([class*='col-']) ul.accordion-list .answer { cursor: auto!important; pointer-events: none; transition: none!important; } body.page-app ul.accordion-list .answer { display: block!important; } ul.accordion-list li::before { content: "+"; display: inline-block; position: absolute; right: 10px; top: 20px; font-size: 30px; font-weight: bold; transition: none!important; } ul.accordion-list li.active::before { transform: rotate(45deg); } /* ========================================================= GLOBAL FEATURE GRID ENGINE (AUTO) applies to ANY module starting with feature- ========================================================= */ [class^="feature-"], [class*=" feature-"] { } /* direct child wrapper (your CMS pattern) */ [class^="feature-"] > div, [class*=" feature-"] > div { display: flex; flex-wrap: wrap; --grid-gap: 25px; } /* actual items */ [class^="feature-"] > div > *, [class*=" feature-"] > div > * { flex: 0 0 calc( (100% - (var(--grid-gap) * (var(--grid-cols) - 1))) / var(--grid-cols) ); max-width: calc( (100% - (var(--grid-gap) * (var(--grid-cols) - 1))) / var(--grid-cols) ); } .feature-cards1 > div > div h2 { font-weight: 500; padding: 0px!important; line-height: 30px!important; font-size: 1.7em!important; } .feature-cards1 > div > div img { max-width: 30%; padding-bottom: 10px; } /* ---------------------------------------------------------------------- STACKED MODULES ---------------------------------------------------------------------- */ .sb-roundedbox-row + .sb-roundedbox-row { margin-top: 40px!important; } /* boxes -- rounded images -- with fixed inner box width */ .sb-roundedbox-row.sb-fillbox-600-row { border-radius: 0px; } .sb-roundedbox-row.sb-fillbox-600-row .sb-wrap-inner { border-radius: 20px; } :where(html, body).has-animation {} :where(html, body).has-scroll-effects {} /* SAFETY CATCH DO NOT REMOVE */ body[class*="has-"] {} /*==================================================================================*/ /* FOOTER ALTERNATE LAYOUT 1 8/1/2023 */ /*==================================================================================*/ /* custom - footer */ .has-footer-alternate1 .footer-box a { font-size: 16px; line-height: 30px; font-variant-numeric: lining-nums; } .has-footer-alternate1 .footer-box p, .has-footer-alternate1 .footer-box h1, .has-footer-alternate1 .footer-box h2, .has-footer-alternate1 .footer-box h3, .has-footer-alternate1 .footer-box h4, .has-footer-alternate1 .footer-box h5, .has-footer-alternate1 .footer-box h6, .has-footer-alternate1 .footer-box ul, .has-footer-alternate1 .footer-box ol, .has-footer-alternate1 .footer-box li, .has-footer-alternate1 .footer-box li a, .has-footer-alternate1 .footer-box div { margin: 0; padding: 0; } .has-footer-alternate1.footer .nav .primary-link:last-child > a { margin: auto!important; padding: 0px!important; text-align: center!important; padding: 5px 15px!important; margin-top: 20px!important; } .has-footer-alternate1.footer .nav .primary-link:last-child > a:hover{ text-decoration: none; } .has-footer-alternate1 .footer-box li a { text-transform: capitalize!important; padding: 0px!important; } .has-footer-alternate1 .footer-box ul, .has-footer-alternate1 .footer-box ol { list-style: none; } @media screen and (min-width: 949px) { .has-footer-alternate1.footer .wrapper { max-width: 1425px!important; padding: 0px!important; margin: auto; } } .has-footer-alternate1 .footer { padding: 110px 0px!important; } .footer { display: flex; flex-wrap: wrap; justify-content: space-between; } .footer-box { flex: 1 1 100%; margin-bottom: 10px; float: left!important; } .has-footer-alternate1 .footer-box .footer-logo-container { display: flex; align-items: flex-start; } .has-footer-alternate1 .footer-box .footer-logo-container img { max-width: 200px; margin-right: 20px; } .has-footer-alternate1 .footer-box .footer-logoname { align-self: flex-end; font-weight: bold; } .has-footer-alternate1 .footer-box .footer-nav { display: flex; flex-wrap: wrap; justify-content: space-between; } .has-footer-alternate1 .footer-box .footer-nav .nav-inner { flex-basis: 50%; margin-bottom: 10px; } .has-footer-alternate1 .footer-box .footer-nav ul { list-style: none; padding: 0; } .has-footer-alternate1 .footer-box .footer-nav li { margin-bottom: 5px; } .has-footer-alternate1 .footer-box .locations_footer { margin-top: 0px!important; margin-bottom: 10px!important; max-width: 400px!important; margin: 0px; } .has-footer-alternate1 .footer-box .footer-headline { padding: 0px 0px 0px; text-align: left; } @media screen and (min-width: 949px) { .has-footer-alternate1 .footer-box .footer-headline h1 { padding: 20px 0px 100px; } } .has-footer-alternate1 .footer-box .nav-inner { display: flex; } .has-footer-alternate1 .footer-box .nav-inner ul { list-style: none; padding: 0; margin: 0; flex: 1; margin-right: 20px; } .has-footer-alternate1 .footer-box .nav-inner li { margin-bottom: 10px; display: block; } /* Styling for the h2 titles */ .has-footer-alternate1 .footer-box .nav-inner h2 { margin-top: 20px; font-size: 20px; } .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(2) { padding-right: 30px; } .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) { display: flex; } .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) { margin-top: 0px; } @media screen and (min-width: 949px) { .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) { margin-top: 0px; } } .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) ul { list-style: none; padding: 0; margin: 0; padding-right: 20px!important; } @media screen and (min-width: 949px) { .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) ul { list-style: none; padding: 0; margin: 0; padding-right: 60px!important; } } .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) li { margin-bottom: 14px; display: block; } .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) li a { line-height: 20px!important; } /* Styling for the h2 titles */ .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) h2 { margin-top: 20px; font-size: 15px!important; margin-bottom: 10px; } @media screen and (min-width: 949px) { .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) li { margin-bottom: 10px; display: block; } .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) li a { line-height: 26px!important; } .has-footer-alternate1.footer .footer-box .col-md-4:nth-child(3) h2 { margin-top: 10px; font-size: 14px!important; font-weight: 600; margin-bottom: 20px; } } @media screen and (min-width: 949px) { /* Apply a font size to all links in the third .col-md-4 container, except the last one */ .has-footer-alternate1.footer .footer-box li a { font-size: 16px!important; } } .has-footer-alternate1.footer .nav .primary-link:last-child > a { display: inline-block; font-size: 15px!important; font-weight: 600!important; margin-top: 10px!important; } @media screen and (min-width: 949px) { .has-footer-alternate1.footer .footer-box .col-md-4:last-child > a { font-size: 14px!important; } } /* Align all text to the left */ .has-footer-alternate1.footer .footer .wrapper { text-align: left!important; } /* Align the navigation lists to the left */ .has-footer-alternate1.footer .footer .col-md-4 nav ul { text-align: left!important; } /* Align social media icons to the left */ .has-footer-alternate1.footer .footer .embed.social-module.sm-bg-colors-OFF { text-align: left!important; } .has-footer-alternate1.footer * { text-align: left!important; } .has-footer-alternate1.footer .locations_list br { display: block;!important; } .has-footer-alternate1.footer .social-module a { text-align: center!important; } .has-footer-alternate1.footer .social-module a { margin-bottom: 10px; } .has-footer-alternate1.footer .footer-box span { padding-bottom: 0px!important; } .has-footer-alternate1.footer .footer-box .location_name { font-size: 18px!important; line-height: 25px; } .has-footer-alternate1.footer .footerlogoname, .has-footer-alternate1.footer img#logoimg { text-align: left!important; padding-top: 35px!important; margin: 0px!important; position: relative; } .has-footer-alternate1.footer #logoimg { width: 1250px!important; } .has-footer-alternate1.footer h1 { font-size: 2.5em!important; line-height: 1.4em!important; font-weight: 300; background: linear-gradient(234.33deg, #dfdfdf -3.63%, #ffffff 89.96%); } @media (min-width: 768px) { .has-footer-alternate1.footer h1 { font-size: 3.5em!important; line-height: 1.4em!important; font-weight: 300; } } .has-footer-alternate1.footer h1 { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; } .has-footer-alternate1.footer h1 { margin: 20px 0px; } .has-footer-alternate1.footer .locations_list { /* font-family: 'Montserrat', sans-serif; */ } .has-footer-alternate1.footer .footer-user-content { width: 100%!important; float: left; max-width: 100%!important; text-align: left!important; padding: 0 15px; padding-top: 50px; } .has-footer-alternate1.footer .footer-user-content p:first-child { border-top: 1px solid rgb(57 57 57 / 5%); margin-top: 40px; padding-top: 80px; } .has-footer-alternate1.footer .footer-user-content a, .has-footer-alternate1.footer .footer-user-content p { font-size: 16px!important; text-align: left!important; line-height: 29px; } .has-footer-alternate1.footer .footer-user-content p { padding-bottom: 6px!important; } .has-footer-alternate1 .locations_list .social-module { padding-top: 20px; margin-bottom: 20px; } .has-footer-alternate1 .locations_list a { display: inline-block!important; } /* Footer logo stability */ .has-footer-alternate1 img#logoimg { max-width: 200px; height: auto; display: block; } /*==================================================================================*/ /* SET FOOTER */ /*==================================================================================*/ .footer { padding-top: 60px; padding-bottom: 60px; text-align: center; overflow: visible; border-top: 1px solid; } @media screen and (min-width: 949px) { .footer .footer-box:nth-child(1), .footer .footer-box:nth-child(2), .footer .footer-box:nth-child(3) { padding: 0 15px; position: relative; min-height: 1px; width: 100%!important; text-align: center!important; } } .footer .footer-box { float: none!important; } .footer .nav ul { padding-bottom: 20px; } .footer .nav li { display: block; font-size: 20px; } @media screen and (min-width: 949px) { .footer .nav li { display: inline; font-size: 20px; } } .footer .nav li a { font-size: 17px; padding: 10px; font-weight: 300; } .footer h3 { padding-top: 18px; padding-bottom: 0px; } body.logoshow footer img#logoimg, body.logoshow footer img#logoimg:not(.logo-color), body footer img#logoimg, body footer img#logoimg:not(.logo-color) { margin: 0px; max-width: 180px!important; height: auto; margin: auto; /* clear: both; */ /* display: block; */ } @media screen and (min-width: 949px) { body.logoshow footer img#logoimg, body.logoshow footer img#logoimg:not(.logo-color), body footer img#logoimg, body footer img#logoimg:not(.logo-color) { max-width: 250px!important; height: auto; } } .footer-user-content { padding: 0 15px; position: relative; min-height: 1px; width: 100%!important; text-align: center!important; margin: auto; } @media screen and (min-width: 949px) { .footer-user-content { width: 80%!important; } } /*==================================================================================*/ /* extra footer instance fix -- remove 2nd instance */ /*==================================================================================*/ body > .footer-box { display: none; } /* ============================= */ /* CAROUSEL  Ã¢â‚¬â„¢ÃƒÆ’†â€™Ãƒâ€šÃ‚¢ Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚¬Ã…¡Ã‚¬ Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â€šÂ¬Ã…¡Ã‚¬Ã‚ HERO RESET SYSTEM */ /* ============================= */ .carousel-arrows-shadowed .carousel-control {display: none} /* ========================================================= 01. CMS HARD RESET (CRITICAL) ========================================================= */ /* set wrapper */ .carousel-wrapper { position: relative; z-index: 0; background-attachment: scroll !important; } /* Kill builder background panels */ .carousel-wrapper .item-content, .carousel-wrapper .item-content-inner, .carousel-wrapper.carousel-full-background-with-content .item-content { background: transparent !important; background-color: transparent !important; } /* Kill width restrictions */ .carousel, .carousel-inner, .carousel .item, .carousel .item-inner, .carousel .item-content { width: 100% !important; max-width: none !important; } /* Remove builder positioning weirdness */ .carousel .item-content, .carousel .item-content-inner { position: relative; inset: auto; top: auto; left: auto; right: auto; bottom: auto; width: 100%; } /* Remove inherited padding junk */ .carousel-wrapper .item-content .item-content-inner { padding: 0; margin: 0 auto; } /* Remove text alignment conflicts */ .carousel-wrapper .item-content { text-align: inherit !important; } /* ========================================================= 03. BACKGROUND IMAGE BEHAVIOR ========================================================= */ .carousel .item { background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; } /* ========================================================= 04. TRUE HERO CENTERING (FIXES TOP-STICK ISSUE) ========================================================= */ .carousel .item-inner { height: 100%; display: flex; } .carousel .item-content { display: flex; align-items: center; justify-content: center; width: 100%; text-align: center; z-index: 2; } @media (min-width: 949px) { .carousel .item-content { align-items: center; } } /* Inner content container */ .carousel .item-content-inner { max-width: var(--site-max); margin: auto; } .carousel-wrapper .item-content .item-content-inner { padding-inline: var(--sb-hero-pad); padding: var(--sb-space-default); padding: var(--sb-gutter); padding-bottom: 0px; padding-top: 0px; } @media (min-width: 949px) { .carousel-wrapper .item-content .item-content-inner { padding-top: 100px; } } /* ========================================================= 05. TYPOGRAPHY ========================================================= */ .carousel .item-content h2 { font-size: 45px; line-height: 55px; font-weight: 300; margin-bottom: 10px; } @media (min-width: 949px) { .carousel .item-content h2 { font-size: 80px; line-height: 90px; } } .carousel .item-content h3 { font-size: 14px; line-height: 25px; font-weight: 400; margin-bottom: 20px; } @media (min-width: 949px) { .carousel .item-content h3 { font-size: 19px; } } .carousel .item-content p { font-size: 17px; line-height: 22px; margin-top: 20px; font-weight: 300; } @media (min-width: 949px) { .carousel .item-content p { font-size: 22px; } } /* ========================================================= 06. BUTTONS / LINKS ========================================================= */ .carousel .item-content a { display: inline-block; margin-top: 15px; } /* ========================================================= 07. OVERLAY (RESTORED TRUE LEGACY BEHAVIOR) ========================================================= */ /* Base layer */ .container > .carousel-wrapper > .carousel .carousel-inner .item:before { content: ""; position: absolute; inset: 0; background: var(--color-carousel-overlay); } /*  Ã¢â‚¬â„¢ÃƒÆ’†â€™Ãƒâ€šÃ‚¢ Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â€šÂ¬Ã…¡Ã‚¬Ã‚  Ã¢â‚¬â„¢ÃƒÆ’¢â‚¬Å¡Ãƒâ€šÃ‚ THIS is your original system logic */ .carousel .carousel-inner .item::before { opacity: 0.6; } .carousel .carousel-inner .item:before, body:not(#page-home) .carousel-wrapper:before { content: ""; height: 100%; position: absolute; top: 0; left: 0; width: 100%; z-index: 2; } #page-home .sb-carousel-wrapper-row .carousel-inner:before, #page-home .sb-carousel-wrapper-row .carousel-inner. item:before, body:not(#page-home) .sb-carousel-wrapper-row .carousel-inner:before, body:not(#page-home) .sb-carousel-wrapper-row .carousel-inner .item:before { opacity: 1; background: linear-gradient(185deg, rgb(182 56 56 / 0%) 25%, rgb(3 3 3 / 70%) 95%); } /* ========================================================= 09. SAFE BACKGROUND ZOOM (LEGACY FRIENDLY) ========================================================= */ /* IMPORTANT: Animate IMAGE, not container */ .carousel .carousel-lcp-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); animation: heroZoom 18s ease-in-out infinite; } @keyframes heroZoom { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } } /* ========================================================= 10. OPTIONAL  Ã¢â‚¬â„¢ÃƒÆ’†â€™Ãƒâ€šÃ‚¢ Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚¬Ã…¡Ã‚¬ Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â€šÂ¬Ã…¡Ã‚¬Ã‚ ARROWS (UNCHANGED / HIDDEN) ========================================================= */ .carousel .slick-prev, .carousel .slick-next { display: none; } /* ========================================================= 11. MICRO TEXT / KEYWORDS ========================================================= */ .carousel .hero-meta { font-size: 85%; font-style: italic; margin-top: 35px; color: inherit; } /* ========================================================= HERO HEIGHT CHAIN (UNCHANGED) ========================================================= */ .carousel { height: 700px; } .carousel-inner, .carousel .item, .carousel .item-inner { height: 100%; } @media (min-width: 949px) { .carousel { height: 950px; } } /* ========================================================= CAROUSEL - MOBILE - ALIGN CENTER ========================================================= */ @media (max-width: 768px) { .carousel-wrapper .align-left { margin-left: 0px; justify-content: center; text-align: center; } } /* --------------------------------------------------------- CAROUSEL - HAS CLASSES --------------------------------------------------------- */ @media screen and (min-width:949px) { #page-home.has-carousel-bottom .carousel-wrapper .carousel .item-content { justify-content: flex-end; } #page-home.has-carousel-top .carousel-wrapper .carousel .item-content { justify-content: flex-start; } } /* --------------------------------------------------------- CAROUSEL - ellipses --------------------------------------------------------- */ .carousel-indicators li { background-color: rgb(255 255 255); border: 0px solid #fff; border-radius: 10px; width: 5px; height: 5px; margin: 3px; } .carousel-indicators .active { width: 10px; height: 10px; } /* --------------------------------------------------------- Column spacing rules --------------------------------------------------------- */ @media (min-width:949px) { html.has-banner-thin:not(#page-home) .sb-wrap-inner[class*="col-row-"] .sb-col:nth-of-type(1) .sb-module, html.has-banner-thin:not(#page-home) .sb-wrap-inner.image-row-two .sb-col.sb-image-row .sb-module, html.has-banner-thin:not(#page-home) .image-row-two-wrap .sb-col.sb-image-row .sb-module { padding: 0 !important; padding-bottom: 30px !important; } } html.has-banner-thin:not(#page-home) .sb-wrap-inner[class*="col-row-"] .sb-col:nth-of-type(1) .sb-module .box { padding-bottom: 30px !important; border-bottom: 1px solid #e1e1e1; } /* --------------------------------------------------------- Misc layout tweaks --------------------------------------------------------- */ html.has-banner-thin:not(#page-home) .module-form { padding-top: 0; padding-bottom: 0 !important; } html.has-banner-thin:not(#page-home) .sb-wrap.sb-image-row.image-row-one-wrap { overflow: visible; } /* --------------------------------------------------------- Button scale --------------------------------------------------------- */ @media (min-width:949px) { html.has-banner-thin:not(#page-home).has-btn-lg a.btn-cta:not(.btn-reset) { padding: 9px 15px !important; font-size: 12px !important; text-transform: uppercase !important; } html.has-banner-thin:not(#page-home).has-btn-lg a.btn-cta:not(.btn-reset) i { display: none; } } /* --------------------------------------------------------- Header nav text --------------------------------------------------------- */ html.has-banner-thin:not(#page-home) .header .nav .primary-link > a { font-size: 13px; } /* ========================================================= Interior banner landing page thin style ROOT-DRIVEN (html.has-banner-thin) ========================================================= */ /* --------------------------------------------------------- Base height --------------------------------------------------------- */ html.has-banner-thin:not(#page-home) > body > .container > .carousel-wrapper { height: 60px; } /* --------------------------------------------------------- Desktop adjustments --------------------------------------------------------- */ @media (min-width:1280px) { html.has-banner-thin:not(#page-home) > body > .container > .carousel-wrapper { height: 165px; background-image: none !important; } html.has-banner-thin:not(#page-home) > body > .container > .carousel-wrapper .item-content-inner { display: flex !important; margin: 0; height: auto; align-self: flex-start; top: 40px !important; } html.has-banner-thin:not(#page-home) > body > .container > .carousel-wrapper img#logoimg:not(.footer img) { max-height: 60px !important; } html.has-banner-thin:not(#page-home) .header img#logoimg:not(.footer img) { max-height: 60px !important; } html.has-banner-thin:not(#page-home) > body > .container > .carousel-wrapper:before, html.has-banner-thin:not(#page-home) > body > .container > .carousel-wrapper .carousel-inner .item:before { background: linear-gradient( 0deg, #8d929e 0%, #8d929e 40%, #8d929e 100% ); } } /* --------------------------------------------------------- Body background --------------------------------------------------------- */ html.has-banner-thin:not(#page-home) body { background-color: var(--color-bg-page1); ); } /* --------------------------------------------------------- Forms --------------------------------------------------------- */ .sb-module.sb-formbuilder .box, .sb-module.sb-contactform .box, html.has-banner-thin .sb-module.sb-formbuilder .box, html.has-banner-thin .sb-module.sb-contactform .box { background: #fff !important; box-shadow: 0 0 10px rgb(0 0 0 / 25%); border-radius: 12px; padding: 10px 30px; } html.has-banner-thin:not(#page-home) .wrap-inner { padding-left: 120px; padding-right: 120px; overflow: visible; } .sb-module.sb-formbuilder .box, .sb-module.sb-contactform .box, html.has-banner-thin .sb-module.sb-formbuilder .box, html.has-banner-thin .sb-module.sb-contactform .box { padding: 10px 30px !important; box-shadow: 0 6px 16px rgb(0 0 0 / 5%); border: 1px solid #dfdfdf; } @media (min-width:949px) { .sb-module.sb-formbuilder .box, .sb-module.sb-contactform .box, html.has-banner-thin .sb-module.sb-formbuilder .box, html.has-banner-thin .sb-module.sb-contactform .box { padding: 40px 60px !important; } } /* Reserve header height */ header.header-static, header.header.header-static { min-height: 120px; } /* Normalize icons only inside header/nav/footer */ header i.fa, header i.fas, .nav i.fa, .nav i.fas, .mobile-nav i.fa, .mobile-nav i.fas, .footer i.fa, .footer i.fas { width: 1em; height: 1em; display: inline-flex; align-items: center; justify-content: center; } /* SVG inside inherits color/size */ header i svg, .nav i svg, footer i svg, .mobile-nav i svg { width: 1em; height: 1em; fill: currentColor; } /* ===================================================== HEADER STICKY / FIXED (PAGE-SCOPED) ===================================================== */ :where(html, body).has-header-overlay.snapped .site-header { box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 0%); } :where(html, body).has-header-overlay.snapped .site-header { background: rgba(0, 0, 0, 0); } /* Default  Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â€šÂ¬Ã…¡Ã‚¬šÃ‚¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚¬Ã‚ matche s site max */ .site-header.is-contained .site-header__inner, .site-header.is-contained .site-header__container, .site-header.is-contained .site-header__top { max-width: var(--site-max); } /* Wider version */ .site-header.is-wide .site-header__inner, .site-header.is-wide .site-header__container, .site-header.is-wide .site-header__top { max-width: var(--site-wide); } /* True full bleed */ .site-header.is-full .site-header__inner, .site-header.is-full .site-header__container { max-width: none; padding-inline: var(--site-full-pad); } .site-header .site-header__top { position: relative; z-index: 1; } .site-header .site-header__top::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; z-index: -1; } /* ========================= BASE (ALL PAGES) ========================= */ .site-header__inner, .site-header__container { width: 100%; max-width: var(--site-max); margin-inline: auto; padding-inline: var(--sb-gutter); } .site-header { position: sticky; top: 0; z-index: var(--z-header); transition: background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease; } /* Kill legacy pseudo fills */ .site-header::before, .site-header::after { display: none !important; } /* ========================= HOME ONLY FIXED OVERLAY (#page-home is key) ========================= */ body#page-home .site-header.has-header-overlay { position: fixed; left: 0; right: 0; background: rgb(255 255 255 / 0%); } .site-header { background: rgb(255 255 255); } /* ========================= INTERIOR SAFETY (forces sticky everywhere else) ========================= */ body:not(#page-home) .site-header { position: sticky; } /* ========================= HEADER BASE BEHAVIOR ========================= */ .site-header { position: sticky; top: 0; z-index: var(--z-header); } /* Overlay override */ body#page-home .site-header.has-header-overlay { position: fixed; top: 0; left: 0; right: 0; align-self: center; } /* Transitions */ .site-header.has-topbar .site-header__main { transition: transform .35s ease, padding .35s ease, background .35s ease; } .site-header.has-topbar .site-header__top { display: block; transition: transform .35s ease, opacity .25s ease; } .site-header .site-header__top { display: none; } /* Top bar slide away */ html.snapped .site-header__top { display: none!important; } /* Main bar shift */ html.snapped .site-header.has-topbar { transform: translateY(0%); padding-top: 0px; padding-bottom: 0px; } /* Performance hint */ .site-header.has-topbar .site-header__main, .site-header.has-topbar .site-header__top { will-change: transform; } /* ============================= */ /* TOP BAR */ /* ============================= */ .site-header.has-topbar .site-header__top { display: flex; align-items: center; /* hard vertical lock */ min-height: 40px; width: 100%; margin: 0 auto; gap: 24px; padding: 20px 20px; border-bottom: 1px solid rgba(0,0,0,0.05); } @media screen and (max-width:948px) { .site-header.has-topbar .site-header__topr { display: inline-block; } } /* ===================================================== SITE HEADER CTA + ADDRESS (HTML-AWARE FIX) ===================================================== */ /* ============================= */ /* CTA WRAPPER */ /* ============================= */ .site-header__cta { display: flex; align-items: center; /* vertical centering */ gap: 15px; /* SPACE between address + button */ } /* ============================= */ /* PHONE CTA BUTTON */ /* ============================= */ .site-header__cta .btn { padding: 12px 22px; font-size: 14px; line-height: 1; white-space: nowrap; } /* ============================= */ /* MAIN HEADER BAR */ /* ============================= */ .site-header__main { display: flex; align-items: center; /* hard vertical lock */ justify-content: space-between; min-height: 70px; width: 100%; margin: 0 auto; gap: 5px; position: relative; z-index: var(--z-base); vertical-align: middle; padding-top: 5px; } @media (min-width: 1281px) { .site-header__main { gap: 25px; padding-top: 0px; } } @media screen and (max-width:948px) { .site-header__main.align-center { justify-content: flex-end!important; } } @media (min-width: 1281px) { /* Keep nav vertically aligned */ .site-header__main nav { display: flex; align-items: center; } } /* ============================= */ /* NAV */ /* ============================= */ /* Hover polish (top-level only) */ .site-nav > .nav-list > .nav-item > a:hover { opacity: 0.85; } .site-nav { display: flex; } .nav-list { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; } .nav-item { position: relative; } .site-nav .nav-item > a { display: inline-flex; align-items: center; gap: .35rem; } .site-nav .nav-arrow { transition: transform .25s ease; } /* rotate when dropdown open (if you add class later) */ .site-nav .nav-item:hover > a .nav-arrow { transform: rotate(180deg); } .mega-dropdown > a:hover .nav-arrow { transform: rotate(180deg); } /* ============================== TOGGLE VISIBILITY ================================ */ .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; } @media (max-width: 1281px) { .site-header .feature-socialmedia, .site-header .site-nav, .site-header .site-header__cta { display: none; } .nav-toggle { display: block; } } /* ============================== HAMBURGER X ================================ */ .nav-toggle__icon { width: 24px; height: 24px; } .nav-toggle__icon line { stroke-linecap: round; stroke-width: 1.45; transform-box: fill-box; transform-origin: center; transition: transform 0.25s ease, opacity 0.2s ease, stroke-width 0.2s ease; } body.nav-open .nav-toggle__icon line:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.nav-open .nav-toggle__icon line:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle__icon line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } body.nav-open .nav-toggle__icon line { stroke-width: 1.25; } /* ============================== BASE LIST RESET (CMS OVERRIDE) ================================ */ .mobile-nav ul { list-style: none; margin: 0; padding: 0; } .mobile-nav li { margin: 0; padding: 0; } /* ============================== ACCORDION STRUCTURE ================================ */ .mobile-menu > .mobile-item { border-top: 1px solid rgba(255, 255, 255, 0.2); } .mobile-link-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* ============================== TOGGLE BUTTON ================================ */ .mobile-toggle { background: none; border: 0; padding: 6px; cursor: pointer; color: inherit; flex-shrink: 0; } .mobile-toggle line { transition: opacity 0.2s ease; } /* ============================== SUBMENUS (TIER 1 + TIER 2) ================================ */ .mobile-submenu, .mobile-submenu-2 { display: none; padding-left: 18px; overflow: hidden; transition: height 0.25s ease; } .mobile-item.is-open > .mobile-submenu { display: block; } .mobile-subitem.is-open > .mobile-submenu-2 { display: block; } /* ============================== PLUS MINUS LOGIC ================================ */ .mobile-toggle line:first-child { opacity: 1; /* plus */ } .mobile-item.is-open > .mobile-link-row .mobile-toggle line:first-child { opacity: 0; /* minus */ } /* De-emphasize open parents */ .mobile-item.is-open > .mobile-link-row > a { font-size: 0.9em; opacity: 0.8; } /* ============================== compact mobile sizing ================================ */ .is-compact.mobile-nav .mobile-menu a { display: block; padding: 12px 2px; font-weight: 400; font-size: 14px; } .is-compact .mobile-menu > .mobile-item { border-bottom: 1px solid rgb(0 0 0 / 0%); } .is-compact.mobile-nav { padding: 80px 20px 0px; } /* ========================================================= HEADER TOOL LINKS -- (MASK ICON SYSTEM) ========================================================= */ .mobile-tool-links { display: none; } @media screen and (max-width:948px) { .mobile-tool-links { display: inline-flex; align-items: center; gap: 7px; } } .desktop-tool-links { display: inline-flex; } @media screen and (max-width:948px) { .desktop-tool-links { display: none; } } /* ========================================================= BASE ========================================================= */ .tool-link { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: var(--color-text-nav); font-weight: 600; font-size: 13px; transition: transform 0.25s ease, color 0.25s ease; } /* ========================================================= ICON (MASK BASE) ========================================================= */ .tool-icon { width: 26px; height: 26px; display: block; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-size: contain; mask-repeat: no-repeat; mask-position: center; } /* ========================================================= LABEL (HIDDEN FOR NOW) ========================================================= */ .tool-label { display: none; } /* ========================================================= HOVER ========================================================= */ .tool-link:hover { color: var(--color-text-primary); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 949px) { .tool-link { font-size: 10px; gap: 2px; } .tool-icon { width: 25px; height: 25px; } .tool-link--phone .tool-icon { width: 26px; height: 26px; } } .tool-link.tool-link--book .tool-icon { fill: none; stroke: var(--color-text-primary); stroke-width: 1.7!important; stroke-linecap: round; stroke-linejoin: round; width: 25px; height: 25px; display: block; } .tool-link.tool-link--phone .tool-icon { fill: var(--color-text-primary); width: 25px; height: 25px; display: block; } /* ========================================================= BASE LIST (NORMAL BULLETS) ========================================================= */ ul { margin: 0 0 1em 1.2em; padding: 0; list-style: disc; } ul li { margin-bottom: 0.4em; position: static; padding-left: 0; } /* nested lists */ ul ul { margin-top: 0.4em; margin-bottom: 0.4em; } /* ========================================================= RESET (ENSURE NO CMS ICONS INTERFERE) ========================================================= */ ul li::before { content: none; } /* ========================================================= MODIFIER: .is-check (CHECK ICON) ========================================================= */ .is-check ul { list-style: none; margin-left: 0; } .is-check ul li { position: relative; padding-left: 28px; margin-bottom: 0.5em; } .is-check ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E") center / contain no-repeat; } /* ========================================================= NESTED LISTS INSIDE CHECK ========================================================= */ .is-check ul ul { margin-left: 1.2em; } .is-check ul ul li { padding-left: 24px; } .is-check ul ul li::before { width: 14px; height: 14px; top: 0.7em; } /* ========================================================= MODIFIER: .is-check (CHECK ICON) ========================================================= */ .is-check ul { list-style: none; margin-left: 5px; } .is-check ul li { position: relative; padding-left: 28px; } .is-check ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E") center / contain no-repeat; } /* ========================================================= CIRCLE CHECK (OVERRIDE ONLY) Usage: .is-check.is-circle ========================================================= */ /* circle */ .is-check.is-circle ul li::before { content: ""; position: absolute; left: 0px; top: .1em; width: 24px; height: 24px; border-radius: 999px; background: currentColor; } /* check */ .is-check.is-circle ul li::after { content: ""; position: absolute; left: 0; top: 0.4em; width: 28px; height: 28px; background: var(--color-brand-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E") center / 14px 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E") center / 14px 14px no-repeat; z-index: 1; } /* ========================================================= COLUMN / GRID VARIANTS (OPTIONAL) ========================================================= */ .list-check [class*="list-cols"] > ul a { font-size: 18px; font-weight: 600; text-transform: uppercase; padding: 0; } /* ========================================================= COLUMN / GRID VARIANTS (OPTIONAL) ========================================================= */ .list-check [class*="list-cols"] > ul a { font-size: 18px; font-weight: 600; text-transform: uppercase; padding: 0; } /* ========================================================= FEATURE STEPS — NUMBERED CIRCLES ========================================================= */ .fc-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; } .fc-steps > li { position: relative; padding-left: 64px; margin-bottom: var(--sb-space-sm); counter-increment: step; } /* circle */ .fc-steps.is-circle-numbered > li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 40px; height: 40px; border-radius: 999px; background: var(--color-brand-secondary); } /* number */ .fc-steps.is-circle-numbered > li::after { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0.2em; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 600; } /* ========================================================= FEATURE STEPS — CONNECTOR LINE ========================================================= */ .fc-steps.is-circle-numbered { position: relative; } .fc-steps.is-circle-numbered::before { content: ""; position: absolute; left: 20px; top: 20px; bottom: 20px; width: 1px; background: rgba(255,255,255,0.25); pointer-events: none; z-index: 0; } /* ensure circles sit above line */ .fc-steps.is-circle-numbered > li::before, .fc-steps.is-circle-numbered > li::after { z-index: 1; } /* ========================================================= LIST COMPARE ========================================================= */ .list-compare { list-style: none; padding: 0; margin: 0 auto; max-width: 1000px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px 10px; align-items: center; background: rgb(255 255 255 / 50%); padding: 40px!important; border-radius: 12px; } /* headers */ .content .list-compare h3 { font-weight: 600; text-transform: uppercase; font-size: 18px!important; opacity: 0.65; padding-bottom: 6px; /* border-bottom: 1px solid rgba(0,0,0,0.1); */ } /* rows */ .list-compare li { padding: 6px 0; border-bottom: 1px solid rgb(29 29 29 / 20%); } /* remove bottom border from last row */ .list-compare li:nth-last-child(-n+3) { border-bottom: none; } /* center icon columns */ .list-compare li:nth-child(3n-1), .list-compare li:nth-child(3n) { text-align: center; font-size: 18px; } .list-compare { display: grid; grid-template-columns: 2fr 1fr 1fr; align-items: end; /* KEY CHANGE */ } /* ========================================================= LOCATIONS LIST CLEANUP + SOCIAL ICON LAYOUT Scoped for mobile nav + reusable contexts ========================================================= */ /* Hide name + following breaks/links */ .mobile-nav .locations_list .location_name + br, .mobile-nav .locations_list .location_name + a { display: none !important; } /* Base link spacing */ .mobile-nav .locations_list a { display: block !important; padding: 25px 0 5px; line-height: 0 !important; } /* External links (social / maps) */ .mobile-nav .locations_list a[target="_blank"] { padding: 16px 0 0; } /* Location text blocks */ .mobile-nav .locations_list span { display: block !important; margin: 0 !important; padding-bottom: 20px; line-height: 25px !important; } /* ========================================================= SOCIAL MODULE FLEX, NO MARGIN HACKS ========================================================= */ .mobile-nav .locations_list .social-module { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px; text-align: initial; margin-top: 10px !important; margin-bottom: 40px !important; } /* Desktop adjustment */ @media (min-width: 949px) { .mobile-nav .locations_list .social-module { margin-bottom: 10px !important; } .mobile-nav .locations_list .social-module span { display: block !important; padding-top: 0; line-height: 15px !important; } } /* ========================================================= SOCIAL ICON LINKS CENTERED SQUARES ========================================================= */ .mobile-nav .locations_list .social-module a[target="_blank"] { display: flex !important; align-items: center; justify-content: center; padding: 0; margin: 0; line-height: 1; text-decoration: none; position: relative; } /* Icon normalization */ .mobile-nav .locations_list .social-module a[target="_blank"] i { line-height: 0 !important; } .mobile-nav .locations_list span { padding-bottom: 10px!important; line-height: 15px!important; } .mobile-nav span.location_name { font-size: 18px!important; max-width: 80%; padding-bottom: 0px !important; line-height: 25px !important; } .mobile-nav .locations_list { margin-top: 35px!important; padding: 0px 20px; } .mobile-nav .locations_list a { font-size: 13px; line-height: 2px!important; font-weight: 300!important; } .mobile-nav .locations_list .social-module { padding-top: 0px!important; margin-bottom: 10px!important; } .mobile-nav .locations_list div span a { padding: 0px; background: transparent; } /* ========================================================= FORMS UNIFIED STYLING (sb-formbuilder + sb-contactform) CMS-safe no markup assumptions ========================================================= */ /* base */ .sb-formbuilder form, .sb-contactform form { width: 100%; } /* base */ .sb-formbuilder.headline h2, .sb-contactform .headline h2 { font-size: 16px!important; } .sb-formbuilder fieldset, .sb-contactform fieldset { border: 0; padding: 0; margin: 0; } /* field blocks (covers .sb-formfield + plain

) */ .sb-formbuilder p, .sb-contactform p { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; } /* labels */ .sb-formbuilder label, .sb-contactform label { display: inline-block; margin: 0; font-weight: 500; font-size: 1em; } /* inputs & textareas */ .sb-formbuilder input[type="text"], .sb-formbuilder input[type="email"], .sb-formbuilder input[type="tel"], .sb-formbuilder textarea, .sb-formbuilder .form-control, .sb-contactform input[type="text"], .sb-contactform input[type="email"], .sb-contactform input[type="tel"], .sb-contactform textarea { width: 100%; box-sizing: border-box; } /* ========================================================= DATE INPUT NORMALIZE (BOTH FORMS) ========================================================= */ .sb-formbuilder .input-group.date, .sb-contactform .input-group.date { position: relative; display: flex; align-items: stretch; width: 100%; } .sb-formbuilder .input-group.date > .form-control, .sb-contactform .input-group.date > .form-control { flex: 1 1 auto; width: 100%; min-width: 0; } .sb-formbuilder .input-group.date > .input-group-addon, .sb-contactform .input-group.date > .input-group-addon { display: flex; align-items: center; justify-content: center; flex: 0 0 48px; margin-left: 8px; border-radius: 6px; cursor: pointer; border: 1px solid #66a6ce; background: #e8f6ff; } .sb-formbuilder .input-group-addon .fa-calendar, .sb-contactform .input-group-addon .fa-calendar { line-height: 1; } /* ========================================================= SUBMIT BUTTONS ========================================================= */ .sb-formbuilder .submit, .sb-contactform .submit { margin-top: 12px; } .sb-formbuilder input[type="submit"], .sb-contactform input[type="submit"] { width: auto; } /* ========================================================= MOBILE TWEAKS ========================================================= */ @media (max-width: 768px) { .sb-formbuilder .input-group.date > .input-group-addon, .sb-contactform .input-group.date > .input-group-addon { flex: 0 0 44px; margin-left: 6px; } } .sb-formbuilder .helptext, .sb-contactform .helptext { display: inline-block; padding: 15px 5px 10px 5px; font-size: 11px; line-height: 1.8em!important; text-align: left; } /* ========================================================= Carousel: hero graphic overlay (optional) ========================================================= */ #page-home .carousel-inner .item::after { content: ""; position: absolute; right: 6%; bottom: 6%; width: 600px; height: 600px; background-repeat: no-repeat; background-size: contain; background-position: bottom right; opacity: 0; /* base hidden */ pointer-events: none; z-index: 2; will-change: transform, opacity; } /* keep text above */ .carousel .item-content { position: relative; z-index: 3; } /* ENTRANCE SOFT DIAGONAL BOUNCE + FADE */ @keyframes starBounceIn { 0% { opacity: 0; transform: translate(18px, 18px) scale(0.96); } 60% { opacity: 1; transform: translate(-4px, -4px) scale(1.01); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } /* IDLE FLOAT TRANSFORM ONLY (IMPORTANT) */ @keyframes starFloat { 0% { transform: translate(0, 0); } 50% { transform: translate(-6px, -8px); } 100% { transform: translate(0, 0); } } /* TRIGGER AFTER CAROUSEL READY */ html.carousel-images-ready #page-home .carousel-inner .item.active::after { opacity: 1; /* LOCK VISIBLE */ animation: starBounceIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both, starFloat 8s ease-in-out infinite; animation-delay: 0s, 0.9s; } /* MOBILE TUNING */ @media (max-width: 767px) { #page-home .carousel-inner .item::after { width: 180px; height: 180px; right: 4%; bottom: 4%; opacity: 0.9; } } /*==================================================================================*/ /* carousel logo */ /*==================================================================================*/ body#page-home .carousel .logo { margin-bottom: 20px; } html.has-carousel-logo body#page-home header #header-logo { display: none; } body#page-home .carousel .logo { margin-left: auto; margin-right: auto; } .page-app .logo img { display: none; } .page-app .logo { display: flex; align-items: center; justify-content: center; width: 180px; height: 180px; } .page-app .logo::before { content: ""; width: 160px; height: 160px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23666'/%3E%3Ctext x='50' y='55' font-size='12' text-anchor='middle' fill='white' font-family='Arial'%3ELOGO%3C/text%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } .hero-logo img { width: var(--logo-md); /* default */ height: auto; } /* ========================================================= LOGO SIZE MODIFIERS ========================================================= */ .logo-sm .hero-logo img { width: var(--logo-md); } .logo-md .hero-logo img { width: var(--logo-md); } .logo-lg .hero-logo img { width: var(--logo-sm); } .logo-xl .hero-logo img { width: var(--logo-md); } @media (min-width: 949px) { .logo-sm .hero-logo img { width: var(--logo-sm); } .logo-md .hero-logo img { width: var(--logo-md); } .logo-lg .hero-logo img { width: var(--logo-lg); } .logo-xl .hero-logo img { width: var(--logo-xl); } } } /* ========================================================= BUILDER / EDITOR LOGO PLACEHOLDER ========================================================= */ /* Only inside editor iframe */ body[contenteditable="true"] .logo img { display: none; } /* Logo container */ body[contenteditable="true"] .logo { display: flex; align-items: center; justify-content: center; width: 180px; height: 180px; } /* SVG placeholder */ body[contenteditable="true"] .logo::before { content: ""; width: 160px; height: 160px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23666'/%3E%3Ctext x='50' y='55' font-size='12' text-anchor='middle' fill='white' font-family='Arial'%3ELOGO%3C/text%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } /* ========================================================= BUILDER / EDITOR LOGO PLACEHOLDER ========================================================= */ /* Only inside editor iframe */ body[contenteditable="true"] .logo img { display: none; } /* Logo container */ body[contenteditable="true"] .logo { display: flex; align-items: center; justify-content: center; width: 180px; height: 180px; } /* SVG placeholder */ body[contenteditable="true"] .logo::before { content: ""; width: 160px; height: 160px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23666'/%3E%3Ctext x='50' y='55' font-size='12' text-anchor='middle' fill='white' font-family='Arial'%3ELOGO%3C/text%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } /* ========================================================= SOCIAL ICONS (ANYWHERE) ========================================================= */ .socials { display: inline-flex; justify-content: center; align-items: center; gap: 10px; /* Adjust spacing between icons */ } @media screen and (max-width:948px) { .socials { display: none; } } .socials a { display: flex; justify-content: center; align-items: center; width: 30px; /* Set a uniform width for the icons */ height: 30px; /* Set a uniform height for the icons */ border: 0px solid #ccc; /* Add a border color */ background-color: #f0f0f0; /* Add a background color */ border-radius: 50%; /* Makes the icons circular */ text-decoration: none; transition: all 0.3s ease; /* Smooth hover effect */ } .socials a i { font-weight: normal!important; font-size: 12px!important; /* Adjust icon size */ color: #333; /* Icon color */ } .socials a:hover { background-color: #121212; /* Change background on hover */ border-color: #121212; /* Change border color on hover */ color: white; /* Change icon color on hover */ } .socials a:hover i { color: white!important; /* Change icon color on hover */ } .btn + .socials {padding-left: 20px;} /* ========================================================= BASE ========================================================= */ body, .body, .content { color: #141414; background-color: transparent; } body { background-color: var(--color-bg-page); } /* ========================================================= LINKS ========================================================= */ .embed a, .content a, .sb-module a { color: var(--color-brand-primary); } a:hover { color: var(--color-text-subtle); } /* ========================================================= HEADINGS ========================================================= */ .embed h1, .content h1, .content h2, .sb-module h2 { color: var(--color-text-primary); } .embed h3, .content h3 { color: var(--color-text-accent1); } /* ========================================================= HEADER / NAV ========================================================= */ .site-header { background: var(--color-header-bg); } html.snapped body#page-home .site-header.has-header-overlay { background: var(--color-header-bg); } /* NAV PANEL */ nav.mobile-nav { background: var(--color-brand-primary); } /* ========================================================= HEADER LOGO BASE ========================================================= */ .site-header .logo img { width: var(--logo-size, var(--logo-md)); height: auto; transition: width .35s ease; } /* ========================================================= HERO / CAROUSEL LOGO BASE ========================================================= */ .hero-logo img { width: var(--hero-logo-size, var(--logo-lg)); height: auto; transition: width .35s ease; padding-bottom: 20px; } /* ========================================================= FOOTER ========================================================= */ .footer { background-image: linear-gradient(var(--color-bg-footer1), var(--color-bg-footer1)), url(/img/upload/000_custom_image91.jpg); } .footer .footer-box h3, .footer .footer-box a, .footer .footer-user-content, .footer .footer-user-content a, .footer .footer-box span, .footer .footer-box h2, .footer .footerlogoname { color: var(--color-text-subtle); } .footer .footer-box { color: var(--color-bg-footer1); } .footer .footer-box a:hover { color: var(--color-brand-primary); } .by-optima, .by-optima a { color: var(--color-text-secondary) !important; } /* ========================================================= BTN — TEXT VARIANT (LIGHTWEIGHT LINK BUTTON) ========================================================= */ a.btn-text { display: inline-flex; align-items: center; /* typography */ font-size: 1.3em; font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; /* color (token-driven) */ color: var(--color-text-secondary) !important; background: transparent !important; border: none !important; /* spacing (SAFE — no left push issues) */ padding: 6px 0; margin: 0 12px 0 0; /* reset junk */ box-shadow: none !important; text-transform: none; border-radius: 0; width: auto; /* behavior */ text-decoration: none; transition: opacity 0.2s ease, transform 0.2s ease; } /* hover */ a.btn-text:hover { opacity: 0.7; transform: translateY(1px); } /* last one — remove gap */ a.btn-text:last-child { margin-right: 0; } /* ========================================================= CAROUSEL ========================================================= */ .carousel .item-content { color: var(--color-text-accent2); } .carousel-wrapper::before, .carousel-inner .item::before { background: var(--color-overlay-dark); } #page-home .carousel-inner .item::after { background-image: var(--carousel-bg-image, none); } /* ========================================================= GLOBAL SURFACE MOOD ========================================================= */ body { background-image: none; background-color: var(--color-bg-page1); } .body { background: linear-gradient( 180deg, var(--color-bg-page2), var(--color-bg-page2) ); } /* ========================================================= MINI CTA ========================================================= */ .sb-module-mini-cta { background: var(--color-brand-secondary) !important; } /* ========================================================= TESTIMONIALS ========================================================= */ .sb-testimonials-row { background: transparent !important; } .sb-wrap.sb-testimonials-var1-row:not(.sb-maxwidth-row) .sb-module .box { background: transparent !important; } /* ========================================================= HOMEPAGE GALLERY BG ========================================================= */ #page-home .sb-feature-gallery-row, #page-home .sb-gallery-row { background: var(--color-brand-primary); } /* ========================================================= CONTACT / FORMS ========================================================= */ #page-home .sb-contactform-row, #page-home .sb-formbuilder-row { background-image: none; } /* ========================================================= MAP SPLIT ========================================================= */ .map-split .contact-block { background: var(--color-brand-secondary); } /* ========================================================= NARROW SITE  Ã¢â‚¬â„¢ÃƒÆ’†â€™Ãƒâ€šÃ‚¢ Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚¬Ã…¡Ã‚¬ Ã¢â‚¬â„¢ÃƒÆ’‚¢šÃ‚¢ÃƒÂ¢Ã¢â€šÂ¬Ã…¡Ã‚¬Ã‚ COLUMN SURFACE ========================================================= */ .container > .columns { background: var(--color-bg-footer3); } /* ========================================================= NAV TUNING ========================================================= */ /* Base nav color */ .tool-links a, .site-header .site-nav > .nav-list > .nav-item > a { color: var(--color-text-nav); } /* Interior nav */ body:not(#page-home) .site-header.has-header-overlay.has-nav-interior { --color-text-nav: var(--color-text-nav-interior); } /* Snapped overlay */ .snapped .site-header.has-header-overlay.has-nav-invert { --color-text-nav: var(--color-text-nav-overlay); } /* ========================================================= CAROUSEL CUSTOMIZATION ========================================================= */ #page-home > .container > .carousel-wrapper:first-of-type::before { background: var(--color-overlay-light); } #page-home .carousel-inner .item::after { background-image: url("/img/upload/northstarpediatric_bg_1.webp"); } /* ========================================================= GALLERY CARDS ========================================================= */ #page-home .gallery-item-wrap { background: transparent; box-shadow: -5px 3px 5px rgb(0 0 0 / 0%); } #page-home .gallery-item-wrap:hover { border-color: var(--color-brand-primary); background: var(--color-bg-soft); box-shadow: none; } /* ========================================================= FEATURE CARDS ========================================================= */ .sb-feature-cards1-row :where(.embed, .content) .feature-cards1 > div > div { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); isolation: isolate; /* breaks stacking poison */ will-change: backdrop-filter; /* tells browser early */ transform: translateZ(0); /* forces compositor */ } body:not(#page-home) .sb-feature-cards1-row :where(.embed, .content) .feature-cards1 > div > div { background: var(--surface-brand)!important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); isolation: isolate; /* breaks stacking poison */ will-change: backdrop-filter; /* tells browser early */ transform: translateZ(0); /* forces compositor */ } html.has-img-rounded-30 #page-home .sb-feature-cards1-row :where(.embed, .content) .feature-cards1 > div > div { background-color: none!important; } /* ================================================= FEATURE CARDS — HOVER LIFT + SCALE ================================================= */ .sb-feature-cards1-row :where(.embed, .content) .feature-cards1 > div { overflow: visible; } .sb-feature-cards1-row :where(.embed, .content) .feature-cards1 > div > div { transition: transform .45s cubic-bezier(0.25, 1, 0.33, 1); will-change: transform; } .sb-feature-cards1-row :where(.embed, .content) .feature-cards1 > div > div:hover { transform: scale(1.04) translateY(-4px); } /* ---------------------------------------- FEATURE CARDS ---------------------------------------- */ .feature-cards1.has-surface-white > div > div a.btn { background: var(--surface-white)!important; border-color: var(--color-brand-primary) !important; color: var(--color-brand-primary) !important; border-width: 2px; padding: 9px 20px; } .feature-cards1.has-surface-brand > div > div a.btn { background: var(--color-brand-soft)!important; border-color: var(--color-brand-primary) !important; color: #0e0700!important; border-width: 2px; padding: 9px 20px; } .feature-cards1.has-surface-brand > div > div a[target="_blank"] { padding-right: 12px!important; } /* ========================================================= GLOBAL DECORATIVE GRAPHIC ENGINE ========================================================= */ [class*='sb-bg-graphic'].sb-wrap:after { background-repeat: no-repeat; background-origin: content-box; z-index: -1; background-position: var(--bg-pos-x-mobile, right) var(--bg-pos-y-mobile, 0); background-size: var(--bg-size-mobile, 200%); height: var(--bg-height-mobile, 2400px); opacity: var(--bg-opacity-mobile, .1); top: var(--bg-top-mobile, 0); transform: var(--bg-transform-mobile, scaleX(1)); left: 50%; margin-left: -50vw; width: 100vw; max-width: 100vw; } @media (min-width: 949px) { [class*='sb-bg-graphic'].sb-wrap:after { background-position: var(--bg-pos-x-desktop, right) var(--bg-pos-y-desktop, 0); background-size: var(--bg-size-desktop, 75%); height: var(--bg-height-desktop, 1200px); opacity: var(--bg-opacity-desktop, 1); top: var(--bg-top-desktop, 0); transform: var(--bg-transform-desktop, scaleX(1)); } /* LAYER PROTECTION */ .sb-feature-cards1-row, .sb-testimonials-var1-row, .sb-gallery-row, .sb-content-row, .footer { position: relative; z-index: 2; } } /* ----------------------------------------- Banner Thin Page Background ----------------------------------------- */ html.has-banner-thin:not(#page-home) body { background-color: var(--color-bg-page1); } /* Banner Thin Carousel Overlay */ body:not(#page-home):not(.body).has-banner-thin > .container > .carousel-wrapper .carousel-inner .item:before, body:not(#page-home):not(.body).has-banner-thin > .container > .carousel-wrapper:before { background: rgb(0 0 0 / 43%); } #page-home .columns-inner > :nth-last-child(1 of .sb-gallery-row) .has-breakout .gallery-item:before, body#page-home .gallery.var1 .gallery-item:before { background: linear-gradient(185deg, #00000000 25%, rgb(3 3 3 / 70%) 95%); opacity: 1; } /* BASE STATE (visible) */ .has-topbar { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.25s ease, transform 0.35s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0.35s; } /* HIDDEN STATE */ .nav-open .has-topbar { transform: translateY(-60px); transition: opacity 0.25s ease, transform 0.35s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s; } /* ========================================================= FEATURE LOCATIONS 1 ========================================================= */ .feature-locations1 { margin-top: 30px; } /* Card */ .feature-locations1 .location-card { } /* Name */ .feature-locations1 .location_name { font-size: 20px; font-weight: 600; margin-bottom: 5px; line-height: 1.3; } /* Address */ .feature-locations1 .location-address { display: block; margin-bottom: 5px; line-height: 1.6; text-decoration: none; color: inherit; padding: 0px; font-weight: 400; } .feature-locations1 .location-address:hover { opacity: 0.75; } /* Contact */ .feature-locations1 .location-contact { display: flex; flex-direction: column; gap: 10px; margin-bottom: 0px; } /* Phone */ .feature-locations1 .location-phone a { padding: 0px; text-decoration: none; color: var(--color-text-secondary); font-size: 13px; font-weight: 500; margin-top: 5px; } /* Fax */ .feature-locations1 .location-fax { font-size: 13px; font-weight: 500; } /* Social */ .feature-locations1 .feature-socialmedia { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 15px; } .feature-locations1 .feature-socialmedia:empty { display: none; } .feature-locations1 .feature-socialmedia a { display: flex; align-items: center; justify-content: center; padding: 0px; } .feature-locations1 .feature-socialmedia i { line-height: 1; } /* ========================================================= MOBILE ========================================================= */ .mobile-nav .feature-locations1 .location-card { padding: 0px; } .mobile-nav .feature-locations1 .location_name { font-size: 14px; } .mobile-nav .feature-locations1 .location-address, .mobile-nav .feature-locations1 .location-contact { font-size: 12px; } .mobile-nav .feature-locations1 .location-card { margin-bottom: 25px; padding: 0 10px 0px 0px; } /* hide both by default */ .hours-set-1, .hours-set-2{ display:none; } /* first location shows hours 1 */ .content .location-block:nth-of-type(1) .hours-set-2{ display: none; } /* second location shows hours 2 */ .content .location-block:nth-of-type(2) .hours-set-1{ display: none; } /* ========================================================= 08. LOAD ANIMATION (FINAL) ========================================================= */ .hero-logo { opacity: 0; transform: translateY(14px); animation: carouselFadeUp 0.8s ease forwards; animation-delay: 0.15s; /* comes after text */ } /* Base animation — EXCLUDE logo */ .carousel .item-content-inner > *:not(.hero-logo) { opacity: 0; transform: translateY(14px); animation: carouselFadeUp 0.8s ease forwards; } /* Stagger delays */ .carousel .item-content-inner > *:nth-child(1) { animation-delay: 0.15s; } .carousel .item-content-inner > *:nth-child(2) { animation-delay: 0.3s; } .carousel .item-content-inner > *:nth-child(3) { animation-delay: 0.45s; } .carousel .item-content-inner > *:nth-child(4) { animation-delay: 0.6s; } /* Fade up */ @keyframes carouselFadeUp { to { opacity: 1; transform: translateY(0); } } /* ========================================================= SLIDE Y (VERTICAL) — ANIMATION (FIXED) ========================================================= */ /* base hidden state */ .anim-slide-y { opacity: 0; transform: translateY(-10px); } /* active animation */ .anim-slide-y.is-anim { animation: uiSlideY 0.6s cubic-bezier(.42, .01, .58, 1) forwards; animation-delay: 0.3s; } /* delay helpers */ .anim-delay-sm { animation-delay: 0.2s; } .anim-delay-md { animation-delay: 0.4s; } .anim-delay-lg { animation-delay: 0.6s; } /* keyframes */ @keyframes uiSlideY { 0% { opacity: 0; transform: translateY(-20px); } 60% { opacity: 1; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); } } /* ========================================================= ANIMATION UTILITIES ========================================================= */ /* Base utility */ .anim { animation-fill-mode: forwards; } /* Bounce (used for logo) */ .hero-logo.anim-bounce { animation: uiBounce 0.8s cubic-bezier(.18,.9,.32,1.2) forwards; animation-delay: 0.7s; } /* Optional global use (safe) */ .anim-bounce { animation: uiBounce 0.8s cubic-bezier(.18,.9,.32,1.2) forwards; } /* Bounce keyframes */ @keyframes uiBounce { 0% { opacity: 0; transform: translateY(30px) scale(0.92); } 40% { opacity: 1; transform: translateY(-8px) scale(1.04); } 65% { transform: translateY(4px) scale(0.98); } 85% { transform: translateY(-2px) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* ========================================================= BLOG — CLEAN + BALANCED (FINAL) ========================================================= */ body.page-full-post h1.title { font-size: 2.7em!important; line-height: 1.5em!important; } @media (min-width: 768px) { body.page-full-post h1.title { font-size: 3.3em!important; line-height: 1.4em!important; } } body.page-full-post h2 { font-size: 2.1em!important; line-height: 1.5em!important; text-transform: capitalize!important; } @media (min-width: 768px) { body.page-full-post h2 { font-size: 2.7em!important; line-height: 1.5em!important; text-transform: capitalize!important; } } .post h2.title { font-size: 45px!important; color: #0c0c0c; margin-top: 0px; margin-bottom: 16px; line-height: 1.2em!important; text-transform: capitalize; font-style: normal; } .posts .post { text-align: left; } .posts .post img { max-width: 100%; height: auto; } /* Sidebar list */ .sb-blog-row .list li { display: block; padding: 2px 0; border: 0; } .sb-blog-row .list li a { color: #6f6f6f; } .sb-blog-row .list li { font-size: 0; } .sb-blog-row .list li a { font-size: 16px!important; } /* Sidebar headings */ .sb-blogarchives h3, .sb-blogcategories h3 { font-size: 20px; font-weight: 500; margin-bottom: 12px; } /* Container */ @media (min-width: 949px) { .sb-blog-row { max-width: 68rem; margin: 0 auto; } } /* ========================================================= LAYOUT — DESKTOP ========================================================= */ @media (min-width: 949px) { .sb-blog-row .col-wrap { display: flex; gap: 40px; align-items: flex-start; } /* kill inline widths */ .sb-blog-row .col-wrap > .sb-col { width: auto !important; max-width: none !important; } /* MAIN */ .sb-blog-row .col-wrap > .sb-col:first-child { flex: 1 1 auto !important; /* 👇 THIS is the divider */ border-right: 1px solid #e3e3e3; /* 👇 THIS centers it visually */ padding-right: 40px; /* half gap */ margin-right: 0px; /* other half */ } /* SIDEBAR */ .sb-blog-row .col-wrap > .sb-col:last-child { flex: 0 0 200px !important; } } .time { display: block; margin-bottom: 20px; } /* ========================================================= BLOG HERO — HIDE ON SINGLE POSTS ========================================================= */ .page-full-post .sb-embed-row { display: none; } /* ========================================================= MOBILE — CLEAN STACK ========================================================= */ @media (max-width: 948px) { .sb-blog-row .col-wrap { display: block; } .sb-blog-row .col-wrap::after { display: none; } .sb-blog-row .col-wrap > .sb-col { width: 100% !important; max-width: none !important; } .sb-blog-row .col-wrap > .sb-col:last-child { margin-top: 30px; } } /* ========================================================= BREADCRUMB — CLEAN / MINIMAL ========================================================= */ .breadcrumb { font-size: 16px; color: #8a8a8a; margin: 90px 0px 0px 0px; max-width: 68rem; background: none; padding: 0px; } @media (max-width: 948px) { .breadcrumb { font-size: 12px; margin:40px 0px 0px 0px; max-width: 68rem; background: none; padding: 0px 20px; } } .breadcrumb li { display: inline; } .breadcrumb li + li::before { content: " / "; margin: 0 6px; color: #c2c2c2; } .breadcrumb a { color: #6f6f6f; text-decoration: none; transition: color .2s ease; } .breadcrumb a:hover { color: #000; } /* last item */ .breadcrumb li:last-child { color: #111; } .breadcrumb + .sb-module { padding: 0px; } .post-share{ display:flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 0px 0 30px; } .post-share button{ display:flex; align-items:center; gap:8px; background:none; border:0; cursor:pointer; font-weight:500; color:var(--color-text-primary); } .post-share .share-icons{ display:flex; gap: 5px; } .post-share .share-icons a{ display:flex; align-items:center; justify-content:center; width: 26px; height: 26px; border-radius:50%; background:var(--color-brand-primary); color:#fff; transition:transform .2s ease; } .post-share .share-icons a:hover{ transform:translateY(-2px); } /* ========================================= BLOG IMAGE NORMALIZATION (HERO FIX) ========================================= */ .sb-feed-post .sb-featured-image img{ width:100%; height:auto; /* FORCE CONSISTENT VISUAL HEIGHT */ max-height:420px; /* MAGIC */ object-fit:cover; object-position:center; /* keeps your rounded style */ border-radius:20px; } /*==================================================================================*/ /* legacy -- module -- content tabs */ /*==================================================================================*/ .arrow-tabs iframe body { background-color: rgb(0 0 0 / 0%)!important; } .arrow-tabs { width: 100%; margin: auto; padding: 0px; } .arrow-tabs > ul { text-align: center; font-weight: 500; padding: 0; position: relative; z-index: 1; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 60px; } .arrow-tabs > ul > li { display: block; background: rgb(0 0 0 / 0%); padding: 0.6em 0; position: relative; width: 100%; margin: 0; } .arrow-tabs > ul > li a { font-weight: 700; font-size: 16px; line-height: 24px!important; display: block; } @media screen and (min-width:949px) { .arrow-tabs > ul > li a { font-weight: 600; font-size: 18px; line-height: 29px!important; display: block; } .arrow-tabs > ul > li { display: inline-block; width: 33%; margin: 0 0 0 -4px; } } .arrow-tabs > ul > li:before, .arrow-tabs > ul > li:after { opacity: 0; transition: 0.3s ease; } .arrow-tabs > ul > li.ui-tabs-active:before, .arrow-tabs > ul > li.ui-tabs-active:after { opacity: 1; } .arrow-tabs > ul > li.ui-tabs-active a { color: #009994; } .arrow-tabs > ul > li:hover:before, .arrow-tabs > ul > li:focus:before, .arrow-tabs > ul > li:hover:after, .arrow-tabs > ul > li:focus:after { opacity: 1; } .arrow-tabs > ul > li:before, .arrow-tabs > ul > li.ui-state-active:hover:before, .arrow-tabs > ul > li.ui-state-active:focus:before { content: ""; position: absolute; z-index: -1; top: 50%; bottom: 0px; left: 5px; right: 5px; /* border-radius: 100px / 10px; */ } .arrow-tabs > ul > li:after, .arrow-tabs > ul > li.ui-state-active:hover:after, .arrow-tabs > ul > li.ui-state-active:focus:after { content: ""; background: #fafafa; position: absolute; width: 12px; height: 12px; left: 50%; bottom: -6px; margin-left: -6px; transform: rotate(45deg); display: none; } .arrow-tabs > ul > li:hover:before, .arrow-tabs > ul > li:focus:before { } .arrow-tabs > ul > li:hover:after, .arrow-tabs > ul > li:focus:after { } .arrow-tabs > ul > li:focus { outline: none; } .arrow-tabs > ul > li a { color: #444; text-decoration: none; } .arrow-tabs > ul > li a:focus { outline: none; text-decoration: none; } .arrow-tabs > ul > li a span { position: relative; top: 0; } .arrow-tabs.dark > ul > li { background: #352624; } .arrow-tabs.dark > ul > li a { color: white; } .arrow-tabs.dark > ul > li.ui-tabs-active a { color: #009994; } .darkpage { background: #352624; color: white; } .darkpage, .lightpage { padding: 50px 0; } /* ========================================================= FOOTER IG CTA (has-ig controlled) ========================================================= */ /* hidden by default */ .footer-ig { margin-bottom: 40px; } /* enable via header class */ .site-header.has-ig + * .footer-ig, .has-ig .footer-ig { display: block; } /* link wrapper */ .footer-ig a { display: block; text-decoration: none; color: inherit; } /* container */ .footer-ig-inner { border: 1px solid rgba(0,0,0,0.25); padding: 22px 28px; text-align: center; transition: all 0.3s ease; } /* hover */ .footer-ig-inner:hover { border-color: rgba(0,0,0,0.6); } /* icon */ .footer-ig-icon { margin-bottom: 12px; } .footer-ig-icon svg { width: 36px; height: 36px; display: inline-block; fill: currentColor; } /* text */ .footer-ig p { margin: 0; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; } /* ========================================================= USERWAY — FORCE VIEWPORT POSITION (BOTTOM LEFT) ========================================================= */ .uwy.userway_p6{ position: fixed !important; left: 16px !important; bottom: 16px !important; right: auto !important; top: auto !important; } /* CRITICAL: override inner wrapper */ .uwy.userway_p6 .userway_buttons_wrapper { position: static !important; bottom: auto !important; top: auto !important; transform: none !important; } /* attempt override */ body .uwy .uai.userway_dark { background: var(--color-brand-primary) !important; } /* ========================================================= ELFSIGHT REVIEWS — FORCE RIGHT SIDE ========================================================= */ [aria-label="Reviews badge"] { justify-content: flex-end!important; padding-right: 20px!important; } .mobile-tool-links { flex: 0 0 auto; } .nav-toggle { position: relative; z-index: 2; } .feature-cards1.is-cta > div > div { text-align: center; } /* ----------------------------------------- CARD 1 — VISIT (soft beige) ----------------------------------------- */ .feature-cards1.is-cta-light > div > div { background: var(--color-brand-soft); } /* ----------------------------------------- CARD 1 — VISIT (soft beige) ----------------------------------------- */ .feature-cards1.is-cta.is-dark > div > div { background: var(--color-brand-primary); } .feature-cards1.is-cta > div > div h2 { display: inline-block; margin: 4px!important; vertical-align: top; } .feature-cards1.is-cta > div > div h2 { font-size: 20px!important; } .feature-cards1.is-cta.is-4col > div > div h2 { font-size: 14px!important; } @media (max-width: 948px) { .feature-cards1.is-cta > div > div h2 {font-size: 17px!important;} } @media (max-width: 948px) { .feature-cards1.is-cta > div > div { padding: 15px 25px; } } /* ========================================================= CHERRY FONT OVERRIDE (SYSTEM INHERIT) ========================================================= */ #all, #hero, #calculator, #howitworks, #faq { font-family: inherit !important; } #all *, #hero *, #calculator *, #howitworks *, #faq * { font-family: inherit !important; } .has-list-center * { text-align: center!important; } .has-list-center ul { border-top: 1px solid var(--color-border-brand); border-bottom: 1px solid var(--color-border-brand); text-align: center; list-style: none; padding: 40px!important; margin-top: 40px!important; margin-bottom: 40px!important; max-width: 80%; margin-left: auto; margin-right: auto; } .has-list-center ul li { overflow: visible!important; padding: 0px!important; margin: 0px!important; } .has-list-center ul a{ position: relative; display: inline-block; overflow: visible; } /* underline */ .has-list-center ul a::after{ content: ""; position: absolute; left: 0; bottom: 10px; width: 100%; height: 1px; background: var(--color-brand-primary); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; mask-image: none; } /* hover animation */ .has-list-center ul a:hover::after{ transform: scaleX(1); } /* ========================================================= SEAMLESS SPLIT (EDGE-TO-EDGE IMAGE) ========================================================= */ @media (min-width: 949px) { /* remove maxwidth constraint ONLY for this row */ .sb-seamlessbox-row .sb-module.col-wrap { max-width: 100% !important; padding-inline: 0 !important; } /* make columns flex (safer than float behavior) */ .sb-seamlessbox-row .sb-module.col-wrap { display: flex; padding: 0px!important; } /* force equal columns */ .sb-seamlessbox-row .sb-col { width: 50% !important; flex: 0 0 50%; } /* --------------------------------- IMAGE SIDE (FULL BLEED) --------------------------------- */ /* kill all spacing inside image column */ .sb-seamlessbox-row .sb-col.sb-image-row { padding: 0 !important; } /* remove box padding */ .sb-seamlessbox-row .sb-image .box, .sb-seamlessbox-row .sb-image .box-inner, .sb-seamlessbox-row .sb-image .image-wrap { padding: 0 !important; } /* make image fill */ .sb-seamlessbox-row .sb-image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0px!important; } /* --------------------------------- CONTENT SIDE (KEEP COMFORT) --------------------------------- */ .sb-seamlessbox-row .sb-col:not(.sb-image-row) { display: flex; align-items: center; } .sb-seamlessbox-row .sb-col:not(.sb-image-row) .sb-module { padding: var(--sb-space-default) var(--sb-gutter) !important; } /* ========================================================= SEAMLESS SPLIT — HORIZONTAL CENTER FIX ========================================================= */ /* target RIGHT column content only */ .sb-seamlessbox-row .col-wrap { gap: 0px; } } .feature-cards1.custom > div > div h2 { display: inline-block; margin: 4px!important; vertical-align: top; } .feature-cards1.custom > div > div h2, .feature-cards1.custom > div > div a { color: #ffffff!important; } .feature-cards1.custom > div > div h2 { font-size: 20px!important; } @media (max-width: 948px) { .feature-cards1.custom > div > div h2 {font-size: 17px!important;} } @media (max-width: 948px) { .feature-cards1 > div > div { padding: 15px 25px; } } /* ========================================================= SITE ATTRIBUTION — OPTIMA ========================================================= */ .site-attribution { padding: 20px; text-align: center; opacity: 0.85; } .site-attribution a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; line-height: 1.4; letter-spacing: 0.02em; text-decoration: none; color: var(--color-text-muted, #6b7280); transition: color 0.25s ease, opacity 0.25s ease; } /* icon */ .site-attribution a::after { content: ""; width: 14px; height: 14px; flex: 0 0 14px; background: url("/img/upload/optima_icon.webp") center / contain no-repeat; filter: grayscale(1) brightness(0.5); opacity: 0.7; transition: all 0.25s ease; } /* hover */ .site-attribution a:hover, .site-attribution a:focus-visible { color: var(--color-text-primary, #111); opacity: 1; } .site-attribution a:hover::after, .site-attribution a:focus-visible::after { filter: grayscale(0) brightness(1); opacity: 1; transform: translateY(-1px); } /* ========================================================= PULL QUOTE ========================================================= */ .pull-quote { display: inline-block; font-size: 1.4rem; line-height: 1.4; font-weight: 500; max-width: 700px; margin: 40px 0px; padding: 20px 25px; text-align: left; border-left: 3px solid var(--color-brand-primary); opacity: 0.9; } /* optional: nicer large quote mark */ .pull-quote::before { content: "“"; font-size: 3rem; line-height: 0; display: block; margin-bottom: 10px; opacity: 0.3; } /* ========================================================= BLOG RECENT POSTS → CARD SYSTEM (CMS SAFE) ========================================================= */ .sb-blogrecentposts .list ul { display: grid; grid-template-columns: repeat(1, 1fr); gap: 14px; list-style: none; padding: 0; margin: 0; } /* desktop → 2 or 3 columns if you want */ @media (min-width: 768px) { .sb-blogrecentposts .list ul { grid-template-columns: repeat(5, 1fr); } } /* ========================================================= CARD ITEM ========================================================= */ .sb-blogrecentposts .list li { position: relative; padding: 18px 18px 20px; border-radius: 12px; background: var(--color-surface-soft, #fff); /* reuse your shadow system */ box-shadow: var(--surface-shadow, 0 8px 20px rgba(0,0,0,0.06)); transition: transform .25s ease, box-shadow .25s ease; } /* hover */ .sb-blogrecentposts .list li:hover { transform: translateY(-4px); box-shadow: var(--surface-shadow-lg, 0 16px 30px rgba(0,0,0,0.12)); } /* ========================================================= LINK (TITLE) ========================================================= */ .sb-blogrecentposts .list li a { display: block; text-decoration: none; font-weight: 600; line-height: 1.4; color: var(--color-text-primary); transition: color .2s ease; font-size: 24px; } .sb-blogrecentposts .list li a:hover { color: var(--color-brand-primary); } /* ========================================================= OPTIONAL: FAKE "READ MORE" ========================================================= */ .sb-blogrecentposts .list ul ::before { content: "Featured Article"; display: block; margin-top: 10px; font-size: 13px; opacity: 0.7; font-weight: 300; } /* ========================================================= HEADER POLISH ========================================================= */ .sb-blogrecentposts .headline h3 { margin-bottom: 18px; display: none; } /* ========================================================= BLOG ICON — ARROW ========================================================= */ .sb-blogrecentposts .list li { position: relative; padding-right: 36px; /* space for icon */ } .sb-blogrecentposts .list li::before { content: ""; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: currentColor; opacity: 0.5; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; transition: transform .25s ease, opacity .25s ease; } /* hover motion */ .sb-blogrecentposts .list li:hover::before { transform: translateY(-50%) translateX(4px); opacity: 1; } /* ========================================================= BODY CAROUSEL ARROWS (NOT HERO) ========================================================= */ /* Scope: skip FIRST hero carousel */ .carousel-wrapper:first-of-type .carousel-control { /* all: unset; */ } /* Target ONLY body carousels */ .sb-carousel-wrapper-row .carousel { position: relative; max-width: 1100px; /* controls visual width */ margin: 0 auto; } /* ========================================= ARROW BASE ========================================= */ .sb-carousel-wrapper-row .carousel-control { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.9); display: flex !important; align-items: center; justify-content: center; z-index: 5; opacity: 1; transition: all 0.25s ease; background: none!important; border: 1px solid #1b1b1b; padding: 0px; } /* Remove default bootstrap junk */ .sb-carousel-wrapper-row .carousel-control span { display: block!important; color: #363636; } /* ========================================= LEFT / RIGHT POSITION (OUTSIDE IMAGE) ========================================= */ .sb-carousel-wrapper-row .carousel-control.left { left: -70px; } .sb-carousel-wrapper-row .carousel-control.right { right: -70px; } /* ========================================= MOBILE FIX ========================================= */ @media (max-width: 949px) { .sb-carousel-wrapper-row .carousel-control.left { left: 10px; } .sb-carousel-wrapper-row .carousel-control.right { right: 10px; } } .sb-carousel-wrapper-row .carousel, .sb-carousel-wrapper-row .carousel-inner, .sb-carousel-wrapper-row .carousel .item, .sb-carousel-wrapper-row .carousel .item-inner { border-radius: 20px; border: 1px solid #000; } @media (min-width: 949px) { .sb-carousel-wrapper-row .carousel, .sb-carousel-wrapper-row .carousel-inner, .sb-carousel-wrapper-row .carousel .item, .sb-carousel-wrapper-row .carousel .item-inner { min-height: 750px!important; height: 750px!important; } }