/* Theme Name: Isco Pipe Custom Theme Theme URI: http://isco-pipe.com Version: 1.1.2 Description: A custom created theme for ISCO-PIPE. Author: Gerard Agency Author URI: http://gerardagency.com template: bb-theme */ :root { --ip-body-font-family: var(--ip-body-ff), Helvetica, Arial, sans-serif; /* need fallbacks */ --sctn-my: calc(1.625rem + 4.5vw); --sctn-py: var(--sctn-my); --sctn-pb: var(--sctn-py); --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; --bs-body-font-size: 1rem; --bs-body-line-height: 1.65; --content-width: 400px; /* 100% */ --spacer: 1rem; /* brand colors, ip = isco pipe */ --ip-navy: #1C2541; --ip-navy-rgb: 28,37,65; --ip-navy-95: #1b2846; --ip-navy-90: #192a4a; --ip-navy-85: #182d4f; --ip-drkblue: #005A9C; --ip-drkblue-rgb: 0,90,156; --ip-blue: #007AD3; --ip-blue-rgb: 0,122,211; --ip-charcoal: #2F2F2F; --ip-charcoal-rgb: 47,47,47; --ip-gray: #7C7C7C; --ip-gray-rgb: 124,124,124; --ip-ltgray: #F5F5F5; --ip-ltgray-rgb: 245,245,245; --ip-gray-300: #C4C4C4; --ip-gray-300-rgb: 196,196,196; /* convert black fill to desired color (blue): https://codepen.io/sosuke/pen/Pjoqqp */ --convert-to-blue: invert(32%) sepia(100%) saturate(913%) hue-rotate(177deg) brightness(98%) contrast(111%); --convert-to-accent: invert(70%) sepia(96%) saturate(1292%) hue-rotate(1deg) brightness(103%) contrast(103%); --bgp-dots-img: url('imgs/bgp-dot_blk_10px-5px.svg'); --body-color-rgb: 47,47,47; --bs-body-color: #2f2f2f; --bs-white: #ffffff; --bs-white-rgb: 255,255,255; --bs-light: #ffffff; --bs-light-rgb: 255,255,255; --bs-black: #000000; --bs-black-rgb: 0,0,0; --bs-link-color: var(--accent-color); --bs-link-hover-color: var(--accent-color-hover); --bs-btn-fontsize: var(--bs-body-font-size); --bs-btn-fontwt: 600; --bs-btn-py: 1.5rem; --bs-btn-px: 2rem; --bs-btn-p: var(--bs-btn-py) var(--bs-btn-px); --bs-btn-color: rgba(var(--bs-light-rgb), 1); --bs-btn-color-hover: rgba(var(--bs-light-rgb), 1); --bs-btn-bgcolor: var(--accent-color); --bs-btn-hover-bgcolor: var(--accent-color-hover); --bs-link-opacity: 1; --bs-border-color: var(--ip-gray-300); --bs-border-radius: 0.25rem; --transition: 0.2s ease-in; --transition-slow: 1.0s ease-in; --text-shadow-offset: 0px 3px 6px; --bs-text-shadow-opacity: 0.77; --text-shadow: var(--text-shadow-offset) rgba(var(--bs-black-rgb),var(--bs-text-shadow-opacity)); --bs-box-shadow-opacity: 0.15; --bs-box-shadow: 0 0.5rem 1rem rgba(var(--bs-black-rgb), var(--bs-box-shadow-opacity)); --ip-inset-shadow-offset: 0 12px 20px -12px; --ip-inset-shadow-opacity: 0.4; --ip-inset-shadow: inset var(--ip-inset-shadow-offset) rgba(var(--bs-black-rgb), var(--ip-inset-shadow-opacity) ); --overlay-opacity: 0.55; --ip-btn-hover-translate: -8px, 8px; --ip-radius: var(--spacer); --btn-mh: 5.25rem; /* mh = min height */ } @media (min-width: 576px) { :root { --content-width: 540px; } } @media (min-width: 768px) { :root { --content-width: 720px; } } @media (min-width: 992px) { :root { --content-width: 960px; } } @media (min-width: 1200px) { :root { --sctn-my: 5rem; --content-width: 1140px; } } @media (min-width: 1400px) { :root { --content-width: 1320px; /* */ } } /* START typography ==================================== */ body { font-size: var(--bs-body-font-size); line-height: var(--bs-body-line-height); font-family: var(--ip-body-font-family); } .mark, mark { background-color: var(--accent-color); } .fw-bold { font-weight: 700 !important; } .single-team-member .wp-block-columns { --dot-h-unit: 8px; --dot-h: calc( var(--dot-h-unit) * 2); --dot-scale: calc( var(--dot-h-unit) * 2); --pb: 1rem; } @media (min-width: 768px) { .single-team-member .wp-block-columns { --pb: 1.5rem; } } @media (min-width: 992px) { .single-team-member .wp-block-columns { --pb: 2rem; } } .single-team-member .wp-block-columns:first-of-type .wp-block-column:first-of-type { color: var(--ip-drkblue); font-weight: 500; position: relative; padding-bottom: calc( var(--dot-h) + var(--pb)); transition: padding-bottom var(--transition); } .single-team-member .wp-block-columns:first-of-type .wp-block-column:first-of-type::after { content: ""; display: block; position: absolute; width: 100%; height: var(--dot-h); background: var(--bgp-dots-img); background-size: calc(var(--dot-scale) * 0.5); background-position-x: -1px; filter: var(--convert-to-blue); bottom: 0; } .single-team-member .lead { color: var(--ip-drkblue); font-weight: 500; } .single-team-member .wp-block-group.lead { --dot-h-unit: 8px; --dot-h: calc( var(--dot-h-unit) * 2); --dot-scale: calc( var(--dot-h-unit) * 2); --mb: 1.5rem; margin-bottom: var(--mb); transition: margin-bottom var(--transition); } .single-team-member .wp-block-group.lead p:last-child { margin-bottom: var(--mb); } @media (min-width: 768px) { .single-team-member .wp-block-group.lead { --mb: 1.75rem; } } @media (min-width: 992px) { .single-team-member .wp-block-group.lead { --mb: 2rem; } } .single-team-member .wp-block-group.lead::after { content: ""; display: flex; height: var(--dot-h); background: var(--bgp-dots-img); background-size: calc(var(--dot-scale) * 0.5); background-position-x: -1px; filter: var(--convert-to-blue); } .fl-theme-builder-singular-team-member-single .job-title .fl-heading { margin-bottom: 0; font-size: calc(1.275rem + .3vw); } /* responsive - customizer is set PX */ .h1, h1, .h1 .fl-heading { font-size: calc(1.375rem + 1.5vw); } .block-title-eyebrow .fl-heading { font-size: var(--bs-body-font-size); line-height: var(--bs-body-line-height); text-transform: uppercase; } .h2, h2, .h2 .fl-heading { font-size: calc(1.325rem + .9vw); } .fl-module-heading.sctn-title .fl-heading, main > .fl-builder-content-primary > section .fl-row-content > .fl-module-box:first-child > .fl-module-box:only-child .fl-module-heading:not(:only-child) h2.fl-heading { --mb: 1rem; margin-bottom: var(--mb) !important; line-height: 1.1; } main > .fl-builder-content-primary > section .fl-row-content > .fl-module-box:first-child > .fl-module-box:first-child .fl-module-heading:not(:only-child) h2.fl-heading { --mb: 0.5rem; margin-bottom: var(--mb) !important; } @media (min-width: 1200px) { .fl-module-heading.sctn-title .fl-heading, main > .fl-builder-content-primary > section .fl-row-content > .fl-module-box:first-child > .fl-module-box:only-child .fl-module-heading:not(:only-child) h2.fl-heading { --mb: 1.5rem; } main > .fl-builder-content-primary > section .fl-row-content > .fl-module-box:first-child > .fl-module-box:first-child .fl-module-heading:not(:only-child) h2.fl-heading { --mb: 0.5rem; margin-bottom: var(--mb) !important; } } .h3, h3, .h4, h4, .h5, h5, .h6, h6, .display-3 .fl-heading, .display-4 .fl-heading, .display-5 .fl-heading, .display-6 .fl-heading { font-family: var(--ip-body-font-family); font-weight: 600; } .h3, h3, .h3 .fl-heading { font-size: calc(1.3rem + .6vw); } .h4, h4, .h4 .fl-heading { font-size: calc(1.275rem + .3vw); } .h5, h5, .h5 .fl-heading { font-size: 1.25rem; } .fl-module-heading.h5 { margin-bottom: 0; } .h6, h6, .h6 .fl-heading { font-size: 1rem; color: var(--ip-charcoal); } @media (min-width: 1200px) { .h1, h1, .h1 .fl-heading { font-size: 2.5rem; } .h2, h2, .h2 .fl-heading { font-size: 2rem; } .h3, h3, .h3 .fl-heading { font-size: 1.5625rem; /* 1.75 */ } .h4, h4, .h4 .fl-heading { font-size: 1.5rem; } } .fl-heading a, h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a, h6 a, .h6 a { transition: color var(--transition); } .fl-heading a:hover, h1 a:hover, .h1 a:hover, h2 a:hover, .h2 a:hover, h3 a:hover, .h3 a:hover, h4 a:hover, .h4 a:hover, h5 a:hover, .h5 a:hover, h6 a:hover, .h6 a:hover { color: var(--accent-color); } .text-links-body-color a, .text-links-body-color a:visited { color: var(--body-color); transition: color var(--transition); } .text-links-body-color a:hover { color: var(--accent-color); } .text-links-accent-inverse a, .text-links-accent-inverse a:visited { color: var(--accent-color-hover); transition: color var(--transition); } .text-links-accent-inverse a:hover { color: var(--accent-color); } .text-links-underline .fl-module-content a, .text-links-underline .fl-module-content a:hover { text-decoration: underline; } .fl-module-heading .fl-heading { margin-bottom: 0.5rem !important; } [class*="display-"] .fl-heading { font-weight: 300; line-height: 1.2; } .display-1 .fl-heading { font-size: calc(1.625rem + 4.5vw); } .display-2 .fl-heading { font-size: calc(1.575rem + 3.9vw); } .display-3 .fl-heading { font-size: calc(1.525rem + 3.3vw); } .display-4 .fl-heading { font-size: calc(1.475rem + 2.7vw); } .display-5 .fl-heading { font-size: calc(1.425rem + 2.1vw); } .display-6 .fl-heading { font-size: calc(1.375rem + 1.5vw); } @media (min-width: 1200px) { .display-1 .fl-heading { font-size: 5rem; } .display-2 .fl-heading { font-size: 4.5rem; } .display-3 .fl-heading { font-size: 4rem; } .display-4 .fl-heading { font-size: 3.5rem; } .display-5 .fl-heading { font-size: 3rem; } .display-6 .fl-heading { font-size: 2.5rem; } } .mb-lc-0 *:last-child { margin-bottom: 0; } .list-dashes, .list-dashed { padding-left: 0.5rem; } .list-dashes > li, .list-dashed > li { padding-left: 0.75rem; } .list-dashes > li::marker, .list-dashed > li::marker { content: "-"; } .text-accent, .text-accent .fl-heading { color: var(--accent-color); } .text-white .fl-heading { color: var(--bs-white); } .text-charcoal, .text-charcoal .fl-heading { color: var(--ip-charcoal); } .text-black .fl-heading { color: var(--bs-black); } ul.list-col-2, .list-col-2 .fl-menu .menu { columns: 100px 2; column-gap: 0; } ul[class*="list-col-"].list-dashes, ul[class*="list-col-"].list-dashed, ul[class*="list-col-"].list-unstyled { column-gap: 2rem; } ul[class*="list-col-"] > li, [class*="list-col-"] .fl-menu .menu > li { break-inside: avoid; } @media (min-width: 768px) { ul.list-col-md-2, .list-col-md-2 .fl-menu .menu { columns: 300px 2; column-gap: 0; } ul.list-col-md-3, .list-col-md-3 .fl-menu .menu { columns: 200px 3; } } @media (min-width: 992px) { ul.list-col-lg-2, .list-col-lg-2 .fl-menu .menu { columns: 300px 2; column-gap: 0; } ul.list-col-lg-3, .list-col-lg-3 .fl-menu .menu { columns: 250px 3; } } @media (min-width: 1200px) { ul.list-col-xl-2, .list-col-xl-2 .fl-menu .menu { columns: 300px 2; column-gap: 0; } ul.list-col-xl-3, .list-col-xl-3 .fl-menu .menu { columns: 250px 3; } ul.list-col-xl-4, .list-col-xl-4 .fl-menu .menu { columns: 190px 4; } } /* END typography ---------------------------------------- */ /* START images ======================================= */ .img-border img, .border-me { border: 1px solid var(--ip-gray-300); } /* END images ======================================= */ /* START fancy link effects =========================== */ .underline, .link-title-underline a > .link-title { display: inline-block; position: relative; } .fl-hdg-underline .fl-heading > a { display: block; position: relative; } .underline:hover::before, .fl-hdg-underline .fl-heading > a:hover::before, .link-title-underline a:hover > .link-title::before { width: 100%; } .underline::before, .fl-hdg-underline .fl-heading > a::before, .link-title-underline a > .link-title::before { transition: width .4s; transition-delay: 0s; content: ""; position: absolute; bottom: 0; left: 0; width: 0; border-bottom: 1px solid currentColor; } .action, .fl-hdg-action .fl-heading > a, .link-title-action a > .link-title { transition: all .2s; transition-delay: 0s; display: inline-block; position: relative; padding-right: 2em; cursor: pointer; } /* END fancy link effects ----------------------------- */ /* START image links ================================== */ .img-link-border a, .img-link-border a:visited { border: 1px solid var(--bs-link-hover-color); transition: border-color var(--transition); display: block; } .img-link-border a:hover { border-color: var(--bs-link-color); } /* END image links ------------------------------------ */ /* START buttons ====================================== */ a.fl-button, a.fl-button:visited, .fl-builder-content a.fl-button, .fl-builder-content a.fl-button:visited, .btn-primary, .btn-primary:visited { font-family: var(--ip-body-font-family); font-weight: var(--bs-btn-fontwt); font-size: var(--bs-btn-fontsize); background-color: var(--bs-btn-bgcolor); color: var(--bs-btn-color); border: 1px solid var(--bs-btn-bgcolor); padding: var(--bs-btn-p); line-height: 1; transition: background-color var(--transition), border-color var(--transition); } .fl-builder-content .fl-button i { margin-right: 0; } a.fl-button:hover, .fl-builder-content a.fl-button:hover, .btn-primary:hover { color: var(--bs-btn-color-hover); background-color: var(--bs-btn-hover-bgcolor); border: 1px solid var(--bs-btn-hover-bgcolor); } a.fl-button *, a.fl-button:visited *, a.fl-button:hover *, .btn-primary * { color: inherit; } /* text link looking buttons */ [class*="btn-text-"] { --bs-btn-bgcolor: transparent; --bs-btn-hover-bgcolor: transparent; --icon-w: 20px; --icon-h: 10px; --icon-gap: 1rem; --btn-px: calc( var(--icon-gap) + var(--icon-w)); --icon-offset: calc( var(--icon-gap) * 0.5); --icon-offset-hover: 0; } .fl-builder-content [class*="btn-text-"] .fl-button { padding-left: 0; padding-right: 0; font-weight: 400; color: var(--accent-color-hover); transition: color var(--transition); border: none; } .fl-builder-content [class*="btn-text-"] .fl-button:visited { color: var(--accent-color-hover); } .fl-builder-content [class*="btn-text-"] .fl-button:hover { color: var(--accent-color); border: none; } .fl-builder-content .btn-text-arrow-rt .fl-button { position: relative; padding-right: var(--btn-px); } .fl-builder-content [class*="btn-text-arrow-"] .fl-button::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: var(--icon-w); height: var(--icon-h); line-height: 0; } .fl-builder-content .btn-text-arrow-rt .fl-button::after { background-color: currentColor; mask-image: url('data:image/svg+xml;utf8,'); right: var(--icon-offset); mask-repeat: no-repeat; mask-position: center; transition: right var(--transition); } .fl-builder-content .btn-text-arrow-rt .fl-button:hover::after { right: var(--icon-offset-hover); } /* animated hamburger menu "icon" */ button.hamburger { background: transparent; border: none; } .hamburger .line { --w: 40px; --h: 3px; --my: 7px; --translation-amount: 10px; --translation-amount-neg: calc(var(--translation-amount) * -1); width: var(--w); height: var(--h); background-color: rgba(var( --bs-light-rgb), 0.65); display: block; margin: var(--my) auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hamburger:hover { cursor: pointer; } .hamburger:hover .line, .hamburger:not(.collapsed) .line { background-color: rgba(var( --bs-light-rgb), 1.0); } /* ONE */ #hamburger-1:not(.collapsed) .line:nth-child(2) { opacity: 0; } #hamburger-1:not(.collapsed) .line:nth-child(1) { -webkit-transform: translateY(var(--translation-amount)) rotate(45deg); -ms-transform: translateY(var(--translation-amount)) rotate(45deg); -o-transform: translateY(var(--translation-amount)) rotate(45deg); transform: translateY(var(--translation-amount)) rotate(45deg); } #hamburger-1:not(.collapsed) .line:nth-child(3) { -webkit-transform: translateY(var(--translation-amount-neg)) rotate(-45deg); -ms-transform: translateY(var(--translation-amount-neg)) rotate(-45deg); -o-transform: translateY(var(--translation-amount-neg)) rotate(-45deg); transform: translateY(var(--translation-amount-neg)) rotate(-45deg); } /* END buttons ---------------------------------------- */ /* START forms ====================================== */ /* gravity forms coloration in a dark section */ .gform-theme--framework .gfield--input-type-datepicker .ginput_container_date input { --gf-local-width: 100%; } section.bg-dots-navy-overlay { --gravityform-text-color: var(--bs-white); } section.bg-dots-navy-overlay :where(.gform_heading > .gform_title, .gform_required_legend), section.bg-dots-navy-overlay .gform-theme--framework .gform-field-label > .gfield_required, section.bg-dots-navy-overlay .gform-theme--framework .gform_required_legend .gfield_required { color: var(--gravityform-text-color); } section.bg-dots-navy-overlay .gform-theme--framework :where( .gform-field-label, .gfield_validation_message) { --gf-local-color: var(--gravityform-text-color); } /* buttons */ .gform-theme.gform-theme--framework.gform_wrapper .button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper .gform-theme-button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper :where(:not(.mce-splitbtn))>button:not([id*=mceu_]):not(.mce-open):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper button.button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit],[type=button],[type=reset]).button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit],[type=button],[type=reset]):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper input[type=submit].button.gform_button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) { --gf-local-bg-color: var(--accent-color); --gf-local-border-color: var(--accent-color); --gf-local-padding-y: 1.5rem; --gf-local-padding-x: 2rem; --gf-local-font-weight: 600; --gf-local-font-size: var(--bs-body-font-size); } .gform-theme.gform-theme--framework.gform_wrapper .button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):hover, .gform-theme.gform-theme--framework.gform_wrapper .gform-theme-button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):hover, .gform-theme.gform-theme--framework.gform_wrapper :where(:not(.mce-splitbtn))>button:not([id*=mceu_]):not(.mce-open):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):hover, .gform-theme.gform-theme--framework.gform_wrapper button.button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):hover, .gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit],[type=button],[type=reset]).button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):hover, .gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit],[type=button],[type=reset]):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):hover, .gform-theme.gform-theme--framework.gform_wrapper input[type=submit].button.gform_button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):hover { --gf-local-bg-color: var(--accent-color-hover); --gf-local-border-color: var(--accent-color-hover); } /* hubspot */ .hbspt-form { --gutter: 1rem; --gutter-half: calc( var(--gutter) * 0.5); --bs-border-width: 1px; --bs-body-bg: #fff; } .hbspt-form input[type=submit] { font-family: var(--ip-body-font-family); font-size: var(--bs-body-font-size); background-color: var(--bs-btn-bgcolor); color: rgba(var(--bs-light-rgb), 1); border: 1px solid var(--bs-btn-bgcolor); font-weight: 600; padding: 1.5rem 2rem; line-height: 1; transition: background-color var(--transition), border-color var(--transition); } .hbspt-form input[type=submit]:hover, .hbspt-form input[type=submit]:focus { background-color: var(--bs-btn-hover-bgcolor); border: 1px solid var(--bs-btn-hover-bgcolor); } .hbspt-form .hs-error-msg, .hbspt-form .hs-form-required { color: #c6303e; } .hbspt-form .hs-error-msg { font-style: italic; } .hbspt-form fieldset[class*="form-columns-"] { flex-direction: row; margin-left: calc( var(--gutter-half) * -1); margin-right: calc( var(--gutter-half) * -1); max-width: unset; } .hbspt-form .hs-form-field { margin-bottom: var(--gutter); } .hbspt-form fieldset[class*="form-columns-"] .hs-form-field { float: none; padding-left: var(--gutter-half); padding-right: var(--gutter-half); width: 100%; } /* mirror .form-control from bootstrap */ .hbspt-form fieldset[class*="form-columns-"] .hs-input { display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--bs-body-color); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--bs-body-bg); background-clip: padding-box; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } /* this should not be necessary - overwriting inline style from somewhere */ [class*="hs-form-"] fieldset.form-columns-1 .hs-input { width: 100% !important; } .hbspt-form fieldset[class*="form-columns-"] .hs-input:focus { color: var(--bs-body-color); background-color: var(--bs-body-bg); border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); } /* selectbox - match bs .form-select */ .hbspt-form select.hs-input { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); display: block; width: 100%; padding: .375rem 2.25rem .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--bs-body-color); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--bs-body-bg); background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } .text-white .hbspt-form form[class*="hs-form-"] .hs-form-field label:not(.hs-error-msg) { color: var(--bs-white); } /* checkboxes */ .hbspt-form .inputs-list { padding-left: 0; list-style: none; } @media (min-width: 992px) { .inputs-list-col-lg-2 .hbspt-form .inputs-list { columns: 250px 2; column-gap: 0; } } @media (min-width: 1200px) { .inputs-list-col-xl-2 .hbspt-form .inputs-list { columns: 250px 2; column-gap: 0; } } .hbspt-form fieldset[class*="form-columns-"] .hs-input[type="checkbox"] { --bs-form-check-bg: var(--bs-body-bg); flex-shrink: 0; width: 1em; height: 1em; margin-top: .25em; padding: 0; vertical-align: top; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--bs-form-check-bg); background-image: var(--bs-form-check-bg-image); background-repeat: no-repeat; background-position: center; background-size: contain; border: var(--bs-border-width) solid var(--bs-border-color); -webkit-print-color-adjust: exact; color-adjust: exact; print-color-adjust: exact; } .hbspt-form fieldset[class*="form-columns-"] .hs-input[type="checkbox"]:checked { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); background-color: #0d6efd; border-color: #0d6efd; } .hbspt-form fieldset[class*="form-columns-"] .hs-input[type="checkbox"]:active { filter: brightness(90%); } .hbspt-form .hs-form-checkbox-display .hs-input[type="checkbox"] { float: left; margin-right: 0.75rem; } /* overwriting inline style of unknown origin */ @media (max-width: 767px) { form[class*="hs-form-"] [class*="form-columns-"] .hs-form-field .hs-input:not([type="checkbox"]) { width: 100% !important; } form[class*="hs-form-"] fieldset[class*="form-columns-"] .hs-input[type="checkbox"] { width: 1rem !important; } } @media (min-width: 768px) { .hbspt-form fieldset[class*="form-columns-"] { display: flex; } .hbspt-form fieldset[class*="form-columns-"] fieldset.form-columns-2 .hs-form-field { width: 50%; } .hbspt-form fieldset[class*="form-columns-"] fieldset.form-columns-3 .hs-form-field { width: 33.3333%; } /* overwriting inline style of unknown origin */ [class*="hs-form-"] fieldset.form-columns-3 .hs-form-field { width: 33.3333% !important; float: none !important; } } .hbspt-form fieldset[class*="form-columns-"] .input { margin-right: 0; } /* overwriting inline style */ [class*="hs-form-"] fieldset[class*="form-columns-"] .input { margin-right: 0 !important; } .hbspt-form fieldset[class*="form-columns-"] > .field { width: 100%; } .bg-dots-navy-overlay .hbspt-form label { color: var(--bs-white); } /* landing page hubspot forms in a #sidebar */ @media (min-width: 768px) { #sidebar .hbspt-form fieldset[class*="form-columns-"] { display: block; } #sidebar [class*="hs-form-"] fieldset[class*="form-columns-"] .hs-form-field { width: 100% !important; } } /* END forms ---------------------------------------- */ /* START tables ======================================= */ /* doc library plugin table to show document list */ .dataTable th.sorting:before { margin-bottom: 1px; } .dataTable th.sorting:after { margin-top: 1px; } .dataTable thead>tr>th.sorting_asc:before, .dataTable thead>tr>th.sorting_desc:after, .dataTable thead>tr>td.sorting_asc:before, .dataTable thead>tr>td.sorting_desc:after { color: var(--accent-color-hover); } .dataTable [class*="col-"] > a { color: var(--accent-color-hover); transition: color var(--transition); } .dataTable [class*="col-"] > a:hover { color: var(--accent-color); } .dataTable td.col-file_type { text-transform: uppercase; } .dataTable .button { --px: calc( var(--spacer) * 1.25); --py: calc( var(--spacer) * 0.25); border-color: var(--bs-btn-hover-bgcolor); color: var(--bs-btn-color); background-color: var(--bs-btn-hover-bgcolor); font-weight: 600; height: unset; padding: var(--py) var(--px) !important; font-size: calc( var(--bs-body-font-size) * 0.9); transition: background-color var(--transition), border-color var(--transition); } .dataTable .button:hover { border-color: var(--bs-btn-bgcolor); color: var(--bs-btn-color-hover); background-color: var(--bs-btn-bgcolor); } /* doc library, but grid view */ .dlp-grid-card-featured-img { border: 1px solid #e5e5e5; border-width: 1px 1px 0 1px; } .dlp-grid-card-featured-img .wp-post-image, .dlp-grid-card-featured-img img { border-radius: unset !important; } .dlp-grid-card-info { margin-top: 0.25rem; } .dlp-grid-card-file-info { display: none !important; } .dlp-grid-card-categories { width: 100%; } .dlp-grid-card-info .dlp-grid-card-categories { text-align: left !important; color: rgba( var(--ip-gray-rgb), 0.65) !important; } .dlp-grid-card-info .dlp-grid-card-categories span { background: unset !important; /* i unset this in the plugin but it doesn't seem to have stuck */ } .dlp-grid-card-info .dlp-grid-card-categories span:first-child { padding-left: 0 !important; } .dlp-grid-card-title { line-height: 1.3; } .dlp-grid-card-categories a, .dlp-grid-card-title a { color: var(--accent-color-hover); transition: color var(--transition); } .dlp-grid-card-categories a:hover, .dlp-grid-card-title a:hover { color: var(--accent-color); } .document-library-pro-button { font-family: var(--ip-body-font-family); font-weight: var(--bs-btn-fontwt); font-size: var(--bs-btn-fontsize); background-color: var(--bs-btn-bgcolor); color: var(--bs-btn-color); border: 1px solid var(--bs-btn-bgcolor); padding: var(--bs-btn-p); line-height: 1; transition: background-color var(--transition), border-color var(--transition); } .document-library-pro-button:hover { color: var(--bs-btn-color-hover); background-color: var(--bs-btn-hover-bgcolor); border: 1px solid var(--bs-btn-hover-bgcolor); } .dlp-grid-pagination .dlp-grid-paginate-button.current { background: transparent; border-color: var(--ip-gray); } /* made a child selector to be more specific than the plugin css */ .dlp-grid-pagination .dlp-grid-paginate-button:hover, .dlp-grid-pagination .dlp-grid-paginate-button.current:hover { border-color: var(--bs-btn-hover-bgcolor); background: var(--bs-btn-hover-bgcolor); } /* ==> responsive tables */ .table-scroll-container { overflow: scroll; width: 100%; } table.table-mobile-headings thead th { position: -webkit-sticky; /* for Safari */ position: sticky; top: 0; background-color: inherit; white-space: nowrap; } table.table-mobile-headings tbody th { position: -webkit-sticky; /* for Safari */ position: sticky; left: 0; white-space: nowrap; border-right-width: 1px; } table.table-mobile-headings.table-striped > tbody > tr:nth-of-type(2n+1) th { --bs-table-accent-bg: var(--bs-table-striped-bg); color: var(--bs-table-striped-color); } table.table-mobile-headings thead th:first-child { left: 0; z-index: 1; border-right-width: 1px; } /* ==> content table for pipe specs */ .table-data { --p: calc( var(--spacer) * 0.5); --border-color: rgba(var(--bs-black-rgb),0.125); --col1-data-width: 4rem; --col1-width: calc( var(--col1-data-width) + ( var(--p) * 2)); --col2-offset: var(--col1-width); /* --bgcolor: var(--border-color); */ } .table-data.table-striped { --border-color: #F2F2F2; } .table-data td, .table-data th { border: 1px solid var(--border-color); text-align: center; padding: var(--p); } .table-data thead tr:last-child th { border-left-color: var(--ip-drkblue); border-right-color: var(--ip-drkblue); } table.table-mobile-headings.table-data thead th:first-child { width: var(--col1-width); } table.table-mobile-headings.table-data thead tr:last-child th:nth-child(2) { left: var(--col2-offset); z-index: 1; border-right: 1px solid var(--border-color); } .table-data thead tr:last-child { color: var(--bs-white); background-color: var(--ip-blue); font-size: 0.75rem; } /* make fake borders for the stationary cells */ table.table-mobile-headings.table-data thead th:first-child:after, table.table-mobile-headings.table-data thead th:first-child:before, table.table-mobile-headings.table-data thead tr:last-child th:nth-child(2):after, table.table-mobile-headings.table-data thead tr:last-child th:nth-child(2):before { content: ""; display: block; position: absolute; top: 0; right: 100%; width: 1px; height: 100%; background-color: var(--border-color); } table.table-mobile-headings.table-data thead tr:last-child th:nth-child(2):after, table.table-mobile-headings.table-data thead tr:last-child th:first-child:after, table.table-mobile-headings.table-data thead tr:last-child th:first-child:before { --border-color: var(--ip-drkblue); } table.table-mobile-headings.table-data thead th:first-child:before, table.table-mobile-headings.table-data thead tr:last-child th:nth-child(2):before { right: unset; left: 100%; } table.table-mobile-headings.table-data thead tr:last-child th:nth-child(2):before { --border-color: var(--ip-drkblue); } table.table-mobile-headings.table-data thead tr:not(:last-child) th:first-child { background-color: rgba( var(--bs-white-rgb),1.0 ); } .table-data tbody { font-size: 0.8rem; } /* make the first two td's stationary */ table.table-data.table-mobile-headings tbody td:first-child, table.table-data.table-mobile-headings tbody td:nth-child(2) { position: -webkit-sticky; /* for Safari */ position: sticky; left: 0; white-space: nowrap; border-right: 1px solid var(--border-color); z-index: 1; background-color: var(--bs-white); } /* fake borders for stationary body cells */ table.table-data.table-mobile-headings tbody td:first-child:after, table.table-data.table-mobile-headings tbody td:nth-child(2):after, table.table-data.table-mobile-headings tbody td:nth-child(2):before { content: ""; display: block; position: absolute; top: 0; right: 100%; width: 1px; height: 100%; background-color: var(--border-color); } table.table-data.table-mobile-headings tbody td:nth-child(2):before { right: unset; left: 100%; } table.table-data.table-mobile-headings tbody td:nth-child(2) { left: var(--col2-offset); } table.table-data.table-mobile-headings.table-striped tbody tr:nth-of-type(odd) td:first-child, table.table-data.table-mobile-headings.table-striped tbody tr:nth-of-type(odd) td:nth-child(2) { background-color: #F2F2F2; /* black 0.05 */ } /* END tables ========================================= */ /* START Components =================================== */ /* store location map -- via WP Store Locator plugin */ h3.store_locator_name { font-size: 1.25rem; } .wordpress-store-locator-address-container a, .wordpress-store-locator-address-container a:visited { color: var(--body-color); transition: color var(--transition); } .wordpress-store-locator-address-container a:hover { color: var(--accent-color); } .store_locator .store_locator_address_field, .store_locator .store_locator_name_search_field, .store_locator .select, .store_locator .store_locator_address_field::placeholder { color: var(--body-color); } .store_locator .store_locator_address_field, .store_locator .store_locator_name_search_field, .store_locator .select { border-color: var(--bs-border-color); border-radius: var(--bs-border-radius); } .store_locator .store_locator_address_field, .store_locator .store_locator_name_search_field { padding: .375rem .75rem; } .store_locator .wordpress-store-locator-block-address_field [class*="store-locator-col-"] { display: flex; flex-wrap: wrap; } .store_locator .wordpress-store-locator-block-address_field .wordpress-store-locator-address-title { width: 100%; } #store_locator_address_field { margin-bottom: 0.5rem; } .store_locator_text_actions { hyphens: none; word-break: keep-all; } #store_locator_find_stores_button { padding: 1rem 1.25rem; } /* ----> ACCORDION <---- */ .fl-accordion-item { border-color: rgba( var(--ip-gray-300-rgb), 1) !important; border-bottom-width: 1px !important; } .fl-accordion-item:first-child { border-top-width: 1px !important; } .fl-accordion-small .fl-accordion-button { padding: 10px 0; } .fl-accordion-small .fl-accordion-content { padding: 0 10px 10px 0; } .fl-accordion-button-label { font-family: var(--ip-body-font-family); font-weight: 600; } .fl-accordion-button-label, .fl-accordion-button-label:visited, .fl-accordion-button-icon, .fl-accordion-button-icon:visited { color: var(--bs-body); transition: color var(--transition); } .fl-accordion-button-label:hover, .fl-accordion-button-icon:hover { color: var(--bs-link-hover-color); } .fl-accordion-button-label:hover, .fl-accordion-button-icon:hover, .fl-accordion-button-label:focus, .fl-accordion-button-label:active, .fl-accordion-button-icon:focus, .fl-accordion-button-icon:active { color: var(--accent-color); } /* Otter Block accordion */ .wp-block-themeisle-blocks-accordion { --border-color: rgba( var(--ip-gray-300-rgb), 1); } .wp-block-themeisle-blocks-accordion-item { border-bottom: var(--border-width) var(--border-style) var(--border-color); } .wp-block-themeisle-blocks-accordion-item__title { padding: 10px 0; border-left-width: 0 !important; border-right-width: 0 !important; border-bottom-width: 0 !important; font-weight: 600; } .wp-block-themeisle-blocks-accordion-item__content { padding: 0 10px 10px 0; } .wp-block-themeisle-blocks-accordion:not(.is-style-default) .wp-block-themeisle-blocks-accordion-item__content { border: none; } .wp-block-themeisle-blocks-accordion:not(.has-icon)>.wp-block-themeisle-blocks-accordion-item:not([open])>.wp-block-themeisle-blocks-accordion-item__title::after, .wp-block-themeisle-blocks-accordion:not(.has-open-icon)>.wp-block-themeisle-blocks-accordion-item[open]>.wp-block-themeisle-blocks-accordion-item__title::after { border-right-color: var(--border-color); border-bottom-color: var(--border-color); } /* ---> END accordion <--- */ /* -----> START BB Ultimate Addons Image slider module <------ */ .uabb-img-slider-flex .uabb-image-carousel .slick-track { display: flex; align-items: center; } .uabb-img-slider-flex .uabb-image-carousel.slick-initialized .slick-slide { display: flex; justify-content: center; } /* ----> START BB Ultimate Addons Video Gallery module <------ */ .uabb-video__gallery-filter.uabb-filter__current, .uabb-video__gallery-filter:hover { background-color: var(--accent-color) !important; } .uabb-video__caption { font-size: 1.25rem; } @media (min-width:1200px) { .uabb-video__caption { font-size: 1.25rem; } } /* ---> START image swapping accordion <------ */ .fl-module-ignite-accordion-module-v2 .accordion-header .accordion-button { font-size: 1rem; color: var(--body-color); font-family: var(--ip-body-font-family); font-weight: 600; padding: 10px 0; transition: color var(--transition); } .fl-module-ignite-accordion-module-v2 .accordion-header .accordion-button:hover { color: var(--accent-color); } .fl-module-ignite-accordion-module-v2 .accordion-flush .accordion-item:first-child { border-top-width: var(--bs-accordion-border-width); } /* ---> END image swapping accordion <------ */ /* ---> TABS (default) <--- */ .fl-tabs-label { font-family: var(--ip-body-font-family); font-weight: 600; } .fl-tabs-label, .fl-tabs-label:active { color: var(--bs-body); transition: color var(--transition); } .fl-tabs-label:hover, .fl-tabs-label.fl-tab-active, .fl-tabs-label.fl-tab-active:hover { color: var(--bs-link-hover-color); } .fl-tabs-label:hover, .fl-tabs-label.fl-tab-active, .fl-tabs-label.fl-tab-active:hover { color: var(--accent-color); } /* ---> ip-tabs <--- */ .ip-tabs { --dot-size: 10px; --dot-hz-repeats: 3; --dot-w: calc(var(--dot-size)* var(--dot-hz-repeats)); --label-px: 1rem; --label-py: 0.6rem; } .ip-tabs .fl-tabs-labels { border-bottom: 2px solid var(--accent-color); } .ip-tabs .fl-tabs .fl-tabs-labels .fl-tabs-label.fl-tab-active { border-color: transparent; } .ip-tabs .fl-tabs-label { padding: var(--label-py) calc( var(--label-px) * 2) var(--label-py) 0; } .bgc-navy .ip-tabs .fl-tabs-label, .bg-dots-navy-overlay .ip-tabs .fl-tabs-label { color: var(--bs-white); } .ip-tabs .fl-tabs-label:hover, .ip-tabs .fl-tabs-label.fl-tab-active, .ip-tabs .fl-tabs-label.fl-tab-active:hover { color: var(--accent-color); } .ip-tabs .fl-tabs-label.fl-tab-active { background: transparent; } .ip-tabs .fl-tabs-panels { background: transparent; border: none; position: relative; padding-left: calc( (var(--bs-gutter-x) * .5) + var(--dot-w)) !important; } @media (min-width: 992px) { .ip-tabs .fl-tabs-panels { margin-top: calc( var(--spacer) * 3); } } .ip-tabs .fl-tabs-panels:before { display: block; position: absolute; content: ""; top: 0; left: 0; background: var(--bgp-dots-img) top left; background-size: var(--dot-size) var(--dot-size); width: var(--dot-w); height: 100%; filter: var(--convert-to-accent); } .bgc-navy .ip-tabs .fl-tabs-panel-content > *, .bg-dots-navy-overlay .ip-tabs .fl-tabs-panel-content > * { color: var(--bs-white); } /* ---> END ip-tabs <----- */ /* OTTER Blocks plugin Gutenberg tabs ----------- */ .wp-block-themeisle-blocks-tabs { --border-width: 1px; --border-color: rgba(var(--bs-black-rgb), 0.125); --active-title-color: var(--accent-color); --font-size: var(--bs-body-font-size); --title-padding: 12px 18px; } .wp-block-themeisle-blocks-tabs__header_item { font-weight: 600; transition: background-color var(--transition); } .wp-block-themeisle-blocks-tabs__header_item:not(.active) { background-color: rgba(var(--bs-black-rgb), 0.05); } /* slider item carousel */ .slider-item-carousel rs-slide::after, .slider-item-carousel rs-slide::after { content: ""; display: block; position: absolute; width: 100%; height: 100%; background: var(--bgp-dots-img) repeat top left; background-size: 10px 10px; filter: var(--convert-to-blue); } .slider-item-carousel rs-slide:not([data-isactiveslide])::after, .slider-item-carousel rs-slide[data-isactiveslide="false"]::after { opacity: 1.0; transition: opacity 1.0s ease-in; } .slider-item-carousel rs-slide[data-isactiveslide="true"]::after { opacity: 0.0; transition: opacity 1.0s ease-in; } .slider-item-carousel rs-slide:not([data-isactiveslide]) rs-sbg, .slider-item-carousel rs-slide[data-isactiveslide="false"] rs-sbg { opacity: 0.25 !important; transition: opacity 1.0s ease-in; } .slider-item-carousel rs-slide[data-isactiveslide="true"] rs-sbg { opacity: 1.0 !important; transition: opacity 1.0s ease-in; } /* ----> image gallery <----- */ .ip-gallery a { --radius: 1rem; display: block; position: relative; border-radius: var(--radius); overflow: clip; } /* create the arrow button */ .ip-gallery .fl-photo a::after { display: inline-block; position: absolute; bottom: 0; left: 0; content: "\f105"; font-size: 1.3em; font-weight: 900; font-family: "Font Awesome 6 Free"; font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; padding: 1.5rem 2rem; border-bottom-left-radius: var(--radius); background-color: var(--ip-drkblue); /* --bs-btn-bgcolor */ color: rgba(var(--bs-light-rgb), 1); border: 1px solid var(--ip-drkblue); /* --bs-btn-bgcolor */ transition: background-color var(--transition), border-color var(--transition); text-shadow: none !important; } .ip-gallery .fl-photo a:hover::after { text-decoration: none; background-color: var(--bs-btn-bgcolor); border-color: var(--bs-btn-bgcolor); } /* ---> START cards <--- */ .item-cards { --radius: var(--ip-radius); --img-h: 150px; } @media (min-width: 768px) { .item-cards { --img-h: 200px; } } @media (min-width: 992px) { .item-cards { --img-h: 250px; } } @media (min-width: 1200px) { .item-cards { --img-h: 300px; } } .item-cards .fl-post-column { float: unset; } .item-cards .fl-post-grid { --bs-gutter-y: var(--bs-gutter-x); display: flex; flex-wrap: wrap; margin-right: calc(-0.5 * var(--bs-gutter-x)); margin-left: calc(-0.5 * var(--bs-gutter-x)); margin-top: calc( var(--bs-gutter-y) * -1); /* vertical gutter offset */ } .item-cards .fl-post-column { padding-right: calc(var(--bs-gutter-x) * .5) !important; padding-left: calc(var(--bs-gutter-x) * .5) !important; margin-top: var(--bs-gutter-y); } .item-cards .fl-post-grid-post { display: flex; flex-direction: column; border-radius: var(--radius); overflow: unset; border: none; } .item-cards .card { border-radius: var(--radius); height: 100%; border: none; } .item-cards .card-eyebrow { font-size: 0.7rem; text-transform: uppercase; color: var(--body-color); margin-bottom: 0; } .item-cards .card-title { font-size: 1.25rem; } .item-cards .card-title > a { --dot-h: 16px; padding-bottom: calc( var(--dot-h) + 0.25rem); margin-bottom: 1rem; position: relative; display: block; } .item-cards .card-title > a:after { content: ""; display: block; position: absolute; width: 100%; bottom: 0; height: var(--dot-h); background: var(--bgp-dots-img); background-size: calc( var(--dot-h) * 0.5); background-position-x: -1px; filter: var(--convert-to-blue); } .item-cards .card-excerpt > *:last-child { margin-bottom: 0; } .item-cards div.card-image { height: var(--img-h); display: flex; background-color: rgba(var(--ip-drkblue-rgb),1.0); background-blend-mode: multiply, luminosity; background-size: cover; position: relative; transition: height var(--transition); border-radius: 0 0 var(--radius) calc(var(--radius) * 1.2); } .item-cards .card-img-bottom { border-radius: 0 0 var(--radius) calc(var(--radius) * 1.2) !important; } .item-cards .fl-button-wrap { min-height: var(--btn-mh); } .item-cards .fl-button { align-self: flex-start; border-radius: 0 0 0 var(--radius) !important; /* need to simplify negative margins so a consistent exact height is needed */ min-height: var(--btn-mh); /* 84px */ aspect-ratio: 1/1; display: inline-flex !important; align-items: center; } html:not(.fl-builder-edit) .item-cards .card .fl-button { margin-top: calc( var(--btn-mh) * -1 ); position: unset; } .item-cards .fl-button-text { width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; /* overflow: clip !important; */ clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .item-cards .fl-button-text:not(caption) { position: absolute !important; } .item-cards .fl-button i { margin-right: 0; font-size: 1.8rem; } .item-cards .fl-button i.fl-button-icon-after { margin-left: 0; } html.fl-builder-edit .item-cards .stretched-link::after { content: unset; display: none; } /* ----> item-cards sctn-box-flex, box-in-a-box variation <------ */ .item-cards.fl-module-box { --p: 1.25rem; } .item-cards.fl-module-box > .fl-module-box > .fl-module-box { height: 100%; background-color: var(--bs-white); border-radius: var(--radius); box-shadow: var(--bs-box-shadow) !important; position: relative; } .item-cards.fl-module-box > .fl-module-box > .fl-module-box > .fl-module:not(.fl-module-button) { position: relative; } .item-cards.fl-module-box > .fl-module-box > .fl-module-box > .fl-module:not(.fl-module-photo, .fl-module-button) { padding-left: var(--p); padding-right: var(--p); } .item-cards.fl-module-box > .fl-module-box > .fl-module-box > .fl-module:first-child { padding-top: var(--p); } .item-cards.fl-module-box > .fl-module-box > .fl-module-box .fl-heading { --dot-h: 16px; padding-bottom: calc( var(--dot-h) + 0.25rem) !important; margin-bottom: 1rem !important; position: relative; } .item-cards.fl-module-box > .fl-module-box > .fl-module-box .fl-heading::after { content: ""; display: block; position: absolute; width: 100%; bottom: 0; height: var(--dot-h); background: var(--bgp-dots-img); background-size: calc( var(--dot-h) * 0.5); background-position-x: -1px; filter: var(--convert-to-blue); } .item-cards.fl-module-box > .fl-module-box > .fl-module-box > .fl-module-photo { margin-top: auto; border-bottom-left-radius: calc( var(--radius) * 1.2); border-bottom-right-radius: var(--radius); } html:not(.fl-builder-edit) .item-cards.fl-module-box > .fl-module-box > .fl-module-box > .fl-module-photo { overflow: clip; /* otherwise interferes with BB edit dropdown */ } html:not(.fl-builder-edit) .item-cards.fl-module-box > .fl-module-box > .fl-module-box .fl-module-button:last-child { margin-top: calc( var(--btn-mh) * -1 ); position: unset; } html:not(.fl-builder-edit) .item-cards.fl-module-box > .fl-module-box > .fl-module-box .fl-module-button > .fl-module-content, html:not(.fl-builder-edit) .item-cards.fl-module-box > .fl-module-box > .fl-module-box .fl-module-button > .fl-module-content > .fl-button-wrap, html:not(.fl-builder-edit) .item-cards.fl-module-box > .fl-module-box > .fl-module-box .fl-module-button > .fl-module-content > .fl-button-wrap > .fl-button { position: unset; } .item-cards.fl-module-box > .fl-module-box > .fl-module-box .fl-module-button { z-index: 1; } .item-cards.fl-module-box > .fl-module-box > .fl-module-box .fl-button { margin-left: unset; } /* equivalent of BS .stretched-link */ html:not(.fl-builder-edit) .item-cards.fl-module-box > .fl-module-box > .fl-module-box .fl-button::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: auto; content: ""; background-color: rgba(0, 0, 0, 0); } /* column based version of the above */ .item-card { --radius: var(--ip-radius); --img-h: 150px; --p: 1.25rem; } html:not(.fl-builder-edit) .item-card { float: unset; } @media (min-width: 768px) { .item-card { --img-h: 200px; } } @media (min-width: 992px) { .item-card { --img-h: 250px; } } @media (min-width: 1200px) { .item-card { --img-h: 300px; } } html:not(.fl-builder-edit) .item-card .fl-col-content { display: flex; flex-direction: column; border-radius: var(--radius); overflow: unset; border-radius: var(--radius); height: 100%; padding-top: var(--p); position: relative; background-color: var(--bs-white); box-shadow: var(--bs-box-shadow); } html:not(.fl-builder-edit) .item-card .fl-module:not(.fl-module-photo, .fl-module-button) { padding-left: var(--p); padding-right: var(--p); } html:not(.fl-builder-edit) .item-card .fl-heading { font-size: 1.25rem; } .item-card .fl-heading { --dot-h: 16px; padding-bottom: calc( var(--dot-h) + 0.25rem) !important; margin-bottom: 1rem !important; position: relative; display: block; } .item-card .fl-heading::after { content: ""; display: block; position: absolute; width: 100%; bottom: 0; height: var(--dot-h); background: var(--bgp-dots-img); background-size: calc( var(--dot-h) * 0.5); background-position-x: -1px; filter: var(--convert-to-blue); } html:not(.fl-builder-edit) .item-card .fl-module-rich-text { height: 100%; } html:not(.fl-builder-edit) .item-card .fl-module-photo { position: relative; z-index: 0; } html:not(.fl-builder-edit) .item-card .fl-photo-content { height: var(--img-h); display: flex; background-color: rgba(var(--ip-drkblue-rgb),1.0); background-blend-mode: multiply, luminosity; background-size: cover; position: relative; transition: height var(--transition); border-radius: 0 0 var(--radius) var(--radius); } html:not(.fl-builder-edit) .item-card .fl-photo-content { border-radius: 0 0 var(--radius) calc( var(--radius) * 1.2) !important; overflow: clip; } html:not(.fl-builder-edit) .item-card .fl-module-button { align-self: flex-start; margin-top: calc( var(--btn-mh) * -1); z-index: 1; } html:not(.fl-builder-edit) .item-card .fl-button { border-radius: 0 0 0 var(--radius) !important; } .item-card .fl-button { min-height: var(--btn-mh); aspect-ratio: 1 / 1; display: inline-flex !important; align-items: center; justify-content: center; } html:not(.fl-builder-edit) .item-card .fl-button::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: auto; content: ""; background-color: rgba(0, 0, 0, 0); } .item-card .fl-button-text { width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: clip !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .item-card .fl-button-text:not(caption) { position: absolute !important; } html:not(.fl-builder-edit) .item-card .fl-button i { margin-left: 0; font-size: 1.8rem; } /* ---> image takes up entire card background <--- */ .item-img-cards { --radius: var(--ip-radius); --link-overlay-bgc-rgb: 0,92,206; /* #005CCE */ } .item-img-cards .fl-post-grid { --bs-gutter-y: var(--bs-gutter-x); display: flex; flex-wrap: wrap; margin-right: calc(-0.5 * var(--bs-gutter-x)); margin-left: calc(-0.5 * var(--bs-gutter-x)); margin-top: calc( var(--bs-gutter-y) * -1); /* vertical gutter offset */ } .fl-module-box:has(.fl-module-post-grid.item-img-cards) { width: 100%; /* otherwise the Leadership page items don't take full width */ } .item-img-cards .fl-post-grid-post { background-color: transparent; } .item-img-cards .fl-post-column { /* min-height: 300px; */ float: unset; padding-right: calc(var(--bs-gutter-x) * .5) !important; padding-left: calc(var(--bs-gutter-x) * .5) !important; margin-top: var(--bs-gutter-y); flex: 0 0 auto; max-width: 100%; /* 240610 container-type: inline-size; container-name: item-cards-col; */ } /* 240610 @container item-cards-col (width < 320px) { .item-img-cards .card-title { font-size: calc(1.275rem + .3vw); } }*/ .item-img-cards .fl-post-grid-post { overflow: clip; /* visible */ height: 100%; display: flex; border: none; aspect-ratio: 1 / 1; } .item-img-cards .card { border-radius: var(--radius); border: none; position: relative; /* 240610 */ height: 100%; width: 100%; } .item-img-cards .card:hover::after { background-color: rgba(var(--link-overlay-bgc-rgb), 0.5); } .item-img-cards .card-img { border-radius: var(--radius) var(--radius) var(--radius) calc(var(--radius) * 1.2); object-fit: cover; aspect-ratio: 1 / 1; } html:not(.fl-builder-edit) .item-img-cards .card-img, .item-img-cards .fl-post-grid .card-img /* style things more accurately in BB when using a post rollup module */ { height: 100%; filter: grayscale(1); /* 240610 */ position: absolute; } .item-img-cards .card-img-overlay { display: flex; flex-direction: column; justify-content: space-between; border-radius: var(--radius); background-color: rgba(var(--bs-black-rgb), 0.25); transition: background-color var(--transition); padding: 0; /* for better preview in Beaver Builder, technically BS has this in .card-img-overlay already */ /* 240610 */ position: relative; z-index: 1; height: 100%; } /* undo some overlay stuff when in Beaver Builder edit mode, otherwise the preview is whack */ .fl-builder-edit .item-img-cards .card-img-overlay { position: relative; } .item-img-cards .card-img-overlay:hover { background-color: rgba(var(--link-overlay-bgc-rgb), 0.5); } .item-img-cards .card-img-overlay .card-wrap { padding: 1.25rem; } .item-img-cards .card-title, .item-img-cards .card-text { --bs-text-shadow-opacity: 0.125; --text-shadow: var(--text-shadow-offset) rgba(var(--bs-black-rgb),var(--bs-text-shadow-opacity)); color: var(--bs-white); transition: color var(--transition); text-shadow: var(--text-shadow); } .item-img-cards .card-text { font-family: var(--ip-body-font-family); } .item-img-cards .card-img-overlay:hover .card-title { color: var(--accent-color); } .item-img-cards .fl-button { border-radius: 0 0 0 var(--radius) !important; /* troubleshooting chrome, but removing this didn't alter much align-self: flex-start; min-height: var(--btn-mh); 84px aspect-ratio: 1/1; display: inline-flex !important; align-items: center; justify-content: center; */ text-align: center; vertical-align: middle; } .item-img-cards .fl-post-grid-post .fl-button { align-self: flex-start; position: unset; } .fl-builder-edit .item-img-cards .stretched-link::after { display: none; content: unset; position: unset; } .item-img-cards .fl-button-text { width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: clip !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .item-img-cards .fl-button-text:not(caption) { position: absolute !important; } .item-img-cards .fl-button i.fl-button-icon-after { margin-left: 0; } /* START layout / grid extras ====================== */ /* BeaverBuilder doesn't have a small breakpoint, so to be as least intrusive as possible and not break what can be set in Beaver Builder UI ... */ /* smo = small only */ @media (min-width: 576px) and (max-width: 767px) { .col-smo-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-smo-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-smo-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-smo-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-smo-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-smo-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-smo-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-smo-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-smo-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } } /* END layout / grid extras ----------------------- */ /* ---> .sctn-box-flex, box-in-a-box variation <---- */ .item-img-cards.fl-module-box { --min-ht: auto; --p: 1.25rem; } /* beaver builder doesn't do a small breakpoint of 576, so let's make these two columns a little sooner */ @media (min-width: 576px) and (max-width: 767px) { .sctn-box-flex .fl-module-box.item-img-cards > .fl-module-box { flex: 0 0 50%; max-width: 50%; } } @media (min-width: 1200px) { .item-img-cards.fl-module-box { --min-ht: 350px; } } @media (min-width: 1400px) { .item-img-cards.fl-module-box { --min-ht: 400px; } } .item-img-cards.fl-module-box > .fl-module-box { position: relative; } .item-img-cards.fl-module-box > .fl-module-box > .fl-module-box { border-radius: var(--radius); padding-top: var(--p); } html:not(.fl-builder-edit) .item-img-cards.fl-module-box > .fl-module-box > .fl-module-box { position: absolute; top: 0; right: calc( var(--bs-gutter-x) * 0.5); bottom: 0; left: calc( var(--bs-gutter-x) * 0.5); z-index: 1; color: var(--bs-white); overflow: clip; } .item-img-cards.fl-module-box > .fl-module-box { display: unset; flex-direction: unset; } html:not(.fl-builder-edit) .item-img-cards.fl-module-box > .fl-module-box > .fl-module-box::after { content: ""; display: block !important; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(var(--link-overlay-bgc-rgb), 0); transition: background-color var(--transition); } html:not(.fl-builder-edit) .item-img-cards.fl-module-box > .fl-module-box > .fl-module-box:hover::after { background-color: rgba(var(--link-overlay-bgc-rgb), 0.5); } html:not(.fl-builder-edit) .item-img-cards.fl-module-box > .fl-module-box > .fl-module-box > .fl-module:not(.fl-module-photo) { z-index: 1; } /* stretched link troubleshooting */ .item-img-cards.fl-module:before, .item-img-cards.fl-module:after, .item-img-cards .fl-module:before, .item-img-cards .fl-module:after, .item-img-cards .fl-module-content:before, .item-img-cards .fl-module-content:after { display: none; } html:not(.fl-builder-edit) .item-img-cards.fl-module-box > .fl-module-box > .fl-module-box > .fl-module:not(.fl-module-photo, .fl-module-button) { position: relative; padding-left: var(--p); padding-right: var(--p); } html:not(.fl-builder-edit) .item-img-cards.fl-module-box > .fl-module-box > .fl-module-box .fl-heading { color: var(--bs-white); } .item-img-cards.fl-module-box > .fl-module-box > .fl-module-photo { /* add a little extra bottom left radius to prevent the fuzz of image bleedthrough on the button */ border-radius: var(--radius) var(--radius) var(--radius) calc( var(--radius) * 1.2); /* aspect-ratio: 1 / 1; object-fit: cover; */ } html:not(.fl-builder-edit) .item-img-cards.fl-module-box > .fl-module-box > .fl-module-photo { filter: grayscale(1); overflow: clip; } .item-img-cards.fl-module-box > .fl-module-box > .fl-module-box > .fl-module-button { margin-top: auto; position: unset; /* MUST set this for every direct parent of the button module in order for the stretched link click through to work outside of the physical button area */ } .item-img-cards.fl-module-box > .fl-module-box > .fl-module-box > .fl-module-button > .fl-module-content { position: unset; /* MUST set this for every direct parent of the button module in order for the stretched link click through to work outside of the physical button area */ } .item-img-cards.fl-module-box > .fl-module-box .fl-button { margin-left: unset; margin-bottom: unset; position: unset; /* MUST set this for every direct parent of the button module in order for the stretched link click through to work outside of the physical button area */ } .item-img-cards.fl-module-box > .fl-module-box .fl-button i.fl-button-icon-after { margin-left: 0; } html:not(.fl-builder-edit) .item-img-cards.fl-module-box > .fl-module-box .fl-button::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: auto; content: ""; background-color: rgba(0, 0, 0, 0); } /* END item-img-cards, box-in-a-box version ------------------- */ /* START item-img-card, singular - applied to a column ======== */ /* ---> image takes up entire card background <--- */ html:not(.fl-builder-edit) .item-img-card { --bs-gutter-y: var(--bs-gutter-x); --radius: var(--ip-radius); --link-overlay-bgc-rgb: 0,92,206; --p: 1.25rem; } html:not(.fl-builder-edit) .item-img-card > .fl-col-content { height: 100%; overflow: clip; /* visible */ display: flex; flex-direction: column; /* because we are positioning a button in the bottom right that has a bottom left radius, unless we tweak the bottom left radius of other elements the edge gets some pixel show through */ border-radius: var(--radius) var(--radius) var(--radius) calc( var(--radius) * 1.2); position: relative; background-color: rgba(var(--bs-black-rgb), 0.25); transition: background-color var(--transition); padding-top: var(--p); aspect-ratio: 1/1; } html:not(.fl-builder-edit) .item-img-card > .fl-col-content { background-color: rgba(var(--link-overlay-bgc-rgb), 1.0); } /* don't apply some style in edit mode or items are not accessible */ html:not(.fl-builder-edit) .item-img-card > .fl-col-content::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; z-index: 1; background-color: rgba(var(--link-overlay-bgc-rgb), 0); transition: background-color var(--transition); border-radius: var(--radius); } html:not(.fl-builder-edit) .item-img-card > .fl-col-content:hover::after { background-color: rgba(var(--link-overlay-bgc-rgb), 0.5); } html:not(.fl-builder-edit) .item-img-card .fl-module:not(.fl-module-photo) { z-index: 2; } html:not(.fl-builder-edit) .item-img-card .fl-module:not(:first-child, :last-child) { padding-left: var(--p); padding-right: var(--p); } html:not(.fl-builder-edit) .item-img-card .fl-module-photo { position: absolute; top: 0; height: 100%; width: 100%; /* because we are positioning a button in the bottom right that has a bottom left radius, unless we tweak the bottom left radius of other elements the edge gets some pixel show through */ border-radius: var(--radius) var(--radius) var(--radius) calc( var(--radius) * 1.2); overflow: clip; } html:not(.fl-builder-edit) .item-img-card .fl-module-photo .fl-module-content, html:not(.fl-builder-edit) .item-img-card .fl-photo, html:not(.fl-builder-edit) .item-img-card .fl-photo-content { width: 100%; height: 100%; } html:not(.fl-builder-edit) .item-img-card .fl-module-photo img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; } .item-img-card .fl-module-photo img { filter: grayscale(1); } html:not(.fl-builder-edit) .item-img-card .fl-module:not(.fl-module-photo, .fl-module-button) { position: relative; } html:not(.fl-builder-edit) .item-img-card .fl-heading, html:not(.fl-builder-edit) .item-img-card .fl-rich-text > * { --bs-text-shadow-opacity: 0.125; --text-shadow: var(--text-shadow-offset) rgba(var(--bs-black-rgb),var(--bs-text-shadow-opacity)); color: var(--bs-white); transition: color var(--transition); text-shadow: var(--text-shadow); } html:not(.fl-builder-edit) .item-img-card .fl-rich-text > * { font-family: var(--ip-body-font-family); } html:not(.fl-builder-edit) .item-img-card .fl-col-content:hover .fl-heading { color: var(--accent-color); } html:not(.fl-builder-edit) .item-img-card .fl-module-button { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; } html:not(.fl-builder-edit) .item-img-card .fl-module-button .fl-module-content, html:not(.fl-builder-edit) .item-img-card .fl-module-button .fl-button-wrap { height: 100%; } html:not(.fl-builder-edit) .item-img-card .fl-module-button .fl-button-wrap { display: flex; } html:not(.fl-builder-edit) .item-img-card .fl-module-button, html:not(.fl-builder-edit) .item-img-card .fl-module-button > .fl-module-content, html:not(.fl-builder-edit) .item-img-card .fl-module-button > .fl-module-content > .fl-button-wrap { position: unset; } html:not(.fl-builder-edit) .item-img-card .fl-button { border-radius: 0 0 0 var(--radius) !important; align-self: flex-end; position: unset; } .item-img-card .fl-button { /* need to simplify negative margins so a consistent exact height is needed */ min-height: var(--btn-mh); /* 84px */ aspect-ratio: 1/1; display: inline-flex !important; align-items: center; justify-content: center; } .item-img-card .fl-button-text { width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: clip !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .item-img-card .fl-button-text:not(caption) { position: absolute !important; } html:not(.fl-builder-edit) .item-img-card .fl-button::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: auto; content: ""; background-color: rgba(0, 0, 0, 0); } .item-img-card .fl-button i.fl-button-icon-after { margin-left: 0; } /* END item-img-card ========================================== */ /* CTA-ish card that turns inline at large breakpoint */ .card-cc-inline { --radius: var(--ip-radius); --p: var(--spacer); } .card-cc-inline > .fl-col-content { background-color: var(--ip-drkblue); color: var(--bs-white); border-radius: 0 var(--radius) var(--radius) var(--radius); box-shadow: inset 20px 20px 14px rgba(var(--bs-black-rgb), 0.18); } .card-cc-inline .fl-module > .fl-module-content { padding-top: calc(var(--p) * 0.5); padding-bottom: calc(var(--p) * 0.5); } .card-cc-inline .fl-module:not(.fl-module-button) > .fl-module-content { padding-left: var(--p); padding-right: var(--p); } .card-cc-inline .fl-module:first-child > .fl-module-content { padding-top: var(--p); } .card-cc-inline .fl-module:last-child:not(.fl-module-button) > .fl-module-content { padding-bottom: var(--p); } .card-cc-inline .fl-module.fl-module-button:last-child > .fl-module-content { padding-bottom: 0; } .card-cc-inline .fl-heading { color: var(--bs-white); margin-bottom: 0 !important; font-size: 1.25rem; } .card-cc-inline .fl-button-wrap { height: 100%; } .card-cc-inline a.fl-button { border-radius: 0 0 0 var(--radius); height: 100%; display: flex; align-items: center; } .card-cc-inline a.fl-button:hover { border-color: var(--bs-white); } @media (min-width: 768px) { .card-cc-inline > .fl-col-content { display: flex; align-items: stretch; flex-wrap: nowrap; } .card-cc-inline .fl-module:not(:last-child) > .fl-module-content { padding-top: var(--p); padding-bottom: var(--p); } .card-cc-inline .fl-module:first-child { order: 2; } .card-cc-inline .fl-module:nth-child(2) { order: 3; } .card-cc-inline .fl-module-button:last-child { order: 1; align-self: flex-end; } .card-cc-inline .fl-module-button:last-child > .fl-module-content { padding-top: 0; } } @media (min-width: 768px) /* and (max-width: 991px) */ { .card-cc-inline .fl-module:first-child { width: 30%; } .card-cc-inline .fl-module:nth-child(2) { width: 60%; } .card-cc-inline .fl-module-button:last-child { width: auto; } } @media (min-width: 1200px) { .card-cc-inline .fl-module:first-child { width: 20%; } } /* END CARDS ---------------------------- */ /* START blocks ------------------------- */ .fl-col-group:has(.block-inset) { display: flex; flex-wrap: wrap; } .block-inset, .block-insets, .block-inner-insets, /* col > row.block-inner-insets > wrap > col - col */ .col-block-insets { --radius: var(--ip-radius); --border-size: var(--radius); --p: var(--radius); --border-color: var(--ip-blue); --color: var(--bs-white); --bgc: var(--ip-drkblue); --inset-offset: calc( var(--p) + var(--border-size) ); --gutter-y: 1rem; float: unset; } .block-inset > .fl-col-content { border: var(--border-size) solid var(--border-color); border-radius: var(--radius); background-color: var(--bgc); color: var(--color); padding: var(--p); height: 100%; box-shadow: inset 20px 20px 14px rgba(var(--bs-black-rgb), 0.18); } .block-inset.fl-module-box { color: var(--color); position: relative; } /* beaver builder doesn't do a small breakpoint of 576, so let's make these two columns a little sooner */ @media (min-width: 576px) and (max-width: 767px) { .sctn-box-flex .block-insets.fl-module-box > .fl-module-box { flex: 0 0 50%; max-width: 50%; } } @media (min-width: 768px) { /* retain a consistent block size if the last row doesn't have the same number of blocks as above */ .sctn-box-flex .block-insets.fl-module-box > .fl-module-box { flex: 0 0 auto; } } .block-insets.fl-module-box > .fl-module-box > .fl-module-box, .col-block-insets > .fl-module-box { color: var(--color); background-color: var(--bgc); border-radius: var(--radius); border: var(--border-size) solid var(--border-color); padding: var(--p); box-shadow: inset 20px 20px 14px rgba(var(--bs-black-rgb), 0.18); height: 100%; } /* flip text link button colors inside the box */ .fl-builder-content .block-insets.fl-module-box > .fl-module-box > .fl-module-box [class*="btn-text-"] .fl-button, .col-block-insets > .fl-module-box [class*="btn-text-"] .fl-button, .fl-builder-content .block-insets.fl-module-box > .fl-module-box > .fl-module-box [class*="btn-text-"] .fl-button:visited, .col-block-insets > .fl-module-box [class*="btn-text-"] .fl-button:visited { color: var(--accent-color); } .fl-builder-content .block-insets.fl-module-box > .fl-module-box > .fl-module-box [class*="btn-text-"] .fl-button:hover, .col-block-insets > .fl-module-box [class*="btn-text-"] .fl-button:hover { color: var(--bs-white); } .block-inner-insets.fl-module-box > .fl-module-box > .fl-module-box { color: var(--color); background-color: var(--bgc); border-radius: var(--radius); border: var(--border-size) solid var(--border-color); padding: var(--p); box-shadow: inset 20px 20px 14px rgba(var(--bs-black-rgb), 0.18); } @media (min-width: 992px) { .block-inner-insets.fl-module-box > .fl-module-box > .fl-module-box { height: 100%; } } .h-auto { height: auto; } @media (min-width: 992px) { .h-lg-100 { height: 100%; } } .col-block-insets > .fl-module-box:not(:last-child) { margin-bottom: var(--gutter-y); } .block-inset.fl-module-box::after { margin-left: calc( var(--bs-gutter-x) * 0.5); margin-right: calc( var(--bs-gutter-x) * 0.5); content: ""; position: absolute; display: block !important; /* i think BB sets this to none !important somewhere */ top: 0; right: 0; bottom: 0; left: 0; background-color: var(--bgc); border-radius: var(--radius); border: var(--border-size) solid var(--border-color); box-shadow: inset 20px 20px 14px rgba(var(--bs-black-rgb), 0.18); } .block-inset.fl-module-box > .fl-module { padding-left: var(--inset-offset); padding-right: var(--inset-offset); position: relative; z-index: 1; } .block-inset.fl-module-box > .fl-module:first-child { margin-top: 0; padding-top: var(--inset-offset); } .block-insets.fl-module-box > .fl-module-box > .fl-module-box > .fl-module:first-child, .block-inner-insets.fl-module-box > .fl-module-box > .fl-module-box > .fl-module:first-child { margin-top: 0; } .block-inset.fl-module-box > .fl-module:last-child { margin-bottom: 0; padding-bottom: var(--inset-offset); } .block-insets.fl-module-box > .fl-module-box > .fl-module-box > .fl-module:last-child, .block-inner-insets.fl-module-box > .fl-module-box > .fl-module-box > .fl-module:last-child { margin-bottom: 0; } .block-inset .fl-heading, .block-insets.fl-module-box > .fl-module-box > .fl-module-box .fl-heading, .block-inner-insets.fl-module-box > .fl-module-box > .fl-module-box .fl-heading, .col-block-insets > .fl-module-box .fl-heading { color: var(--color); } .block-inset .fl-module:last-child .fl-rich-text > *:last-child, .block-insets .fl-module:last-child .fl-rich-text > *:last-child, .block-inner-insets .fl-module:last-child .fl-rich-text > *:last-child, .col-block-insets .fl-module:last-child .fl-rich-text > *:last-child { margin-bottom: 0; } .fl-builder-content .block-inset [class*="btn-text-"] .fl-button:hover, .fl-builder-content .block-insets [class*="btn-text-"] .fl-button:hover, .fl-builder-content .block-inner-insets [class*="btn-text-"] .fl-button:hover, .fl-builder-content .col-block-insets [class*="btn-text-"] .fl-button:hover { color: var(--bs-white); } /* END blocks --------------------------- */ /* END components ------------------------------------- */ /* START grid enhancements ============================ */ .gy-3 { --bs-gutter-y: var(--spacer); } .g-4, .gy-4 { --bs-gutter-y: calc( var(--spacer) * 1.5); } .g-4, .gx-4 { --bs-gutter-x: calc( var(--spacer) * 1.5); } .g-5, .gy-5 { --bs-gutter-y: calc( var(--spacer) * 3); } .g-5, .gx-5 { --bs-gutter-x: calc( var(--spacer) * 3); } .gx-1, .gx-2, .gx-3, .gx-4, .gx-5 { margin-right: calc(-.5* var(--bs-gutter-x)); margin-left: calc(-.5* var(--bs-gutter-x)); } .fl-module-box:where(.gx-1, .gx-2, .gx-3, .gx-4, .gx-5) > .fl-module-box { padding-left: calc(0.5 * var(--bs-gutter-x)); padding-right: calc(0.5 * var(--bs-gutter-x)); } @media (min-width: 768px) { .gy-md-0 { --bs-gutter-y: 0; } .gy-md-3 { --bs-gutter-y: var(--spacer); } .g-md-4, .gy-md-4 { --bs-gutter-y: calc( var(--spacer) * 1.5); } .g-md-4, .gx-md-4 { --bs-gutter-x: calc( var(--spacer) * 1.5); } .g-md-5, .gy-md-5 { --bs-gutter-y: calc( var(--spacer) * 3); } .g-md-5, .gx-md-5 { --bs-gutter-x: calc( var(--spacer) * 3); } [class*="gx-md-"] { margin-right: calc(-.5* var(--bs-gutter-x)); margin-left: calc(-.5* var(--bs-gutter-x)); } [class*="gx-md-"] > .fl-module-box { padding-left: calc(0.5 * var(--bs-gutter-x)); padding-right: calc(0.5 * var(--bs-gutter-x)); } } @media (min-width: 992px) { .gy-lg-0 { --bs-gutter-y: 0; } .gy-lg-3 { --bs-gutter-y: var(--spacer); } .g-lg-4, .gy-lg-4 { --bs-gutter-y: calc( var(--spacer) * 1.5); } .g-lg-4, .gx-lg-4 { --bs-gutter-x: calc( var(--spacer) * 1.5); } .g-lg-5, .gy-lg-5 { --bs-gutter-y: calc( var(--spacer) * 3); } .g-lg-5, .gx-lg-5 { --bs-gutter-x: calc( var(--spacer) * 3); } [class*="gx-lg-"] { margin-right: calc(-.5* var(--bs-gutter-x)); margin-left: calc(-.5* var(--bs-gutter-x)); } [class*="gx-lg-"] > .fl-module-box { padding-left: calc(0.5 * var(--bs-gutter-x)); padding-right: calc(0.5 * var(--bs-gutter-x)); } } @media (min-width: 1200px) { .gy-xl-0 { --bs-gutter-y: 0; } .gy-xl-3 { --bs-gutter-y: var(--spacer); } .g-xl-4, .gy-xl-4 { --bs-gutter-y: calc( var(--spacer) * 1.5); } .g-xl-4, .gx-xl-4 { --bs-gutter-x: calc( var(--spacer) * 1.5); } .g-xl-5, .gy-xl-5 { --bs-gutter-y: calc( var(--spacer) * 3); } .g-xl-5, .gx-xl-5 { --bs-gutter-x: calc( var(--spacer) * 3); } [class*="gx-xl-"] { margin-right: calc(-.5* var(--bs-gutter-x)); margin-left: calc(-.5* var(--bs-gutter-x)); } [class*="gx-xl-"] > .fl-module-box { padding-left: calc(0.5 * var(--bs-gutter-x)); padding-right: calc(0.5 * var(--bs-gutter-x)); } } @media (min-width: 1400px) { .gx-xxl-6 { --bs-gutter-x: calc( var(--spacer) * 6); } [class*="gx-xxl-"] { margin-right: calc(-.5 * var(--bs-gutter-x)); margin-left: calc(-.5 * var(--bs-gutter-x)); } [class*="gx-xxl-"] > .fl-module-box { padding-left: calc(0.5 * var(--bs-gutter-x)); padding-right: calc(0.5 * var(--bs-gutter-x)); } } /* since beaver builder has more container depth than default BS, it is useful to have some flex related classes that target these BB specific children */ /* the box-module mostly removes the need for these flex utilities */ @media (max-width: 767px) { /* smo = small only */ .d-smo-cc-flex > .fl-col-content { display: flex !important; } .justify-smo-cc-content-between > .fl-col-content { justify-content: space-between !important; } .flex-smo-cc-row > .fl-col-content { flex-direction: row !important; } } @media (max-width: 768px) { .fl-col-small:not(.fl-col-small-full-width) { max-width: unset; } } .rcw-align-items-start > .fl-row-content-wrap { align-items: flex-start !important; } .rcw-mh50 > .fl-row-content-wrap { min-height: 50vh !important; } .rcw-mh60 > .fl-row-content-wrap { min-height: 60vh !important; } .rcw-mh70 > .fl-row-content-wrap { min-height: 70vh !important; } .cg-d-flex .fl-col-group { display: flex !important; flex-wrap: wrap; } .cg-d-flex .fl-col { float: unset; max-width: 100%; } .cg-d-flex .fl-col:not([class*="col-"]) { flex: 1 0 0%; } /* END grid enhancements ============================== */ /* START sections ===================================== */ .g-5 { --bs-gutter-x: 3rem; --bs-gutter-y: var(--bs-gutter-x); } /* main content top offset for fixed / sticky header */ .fl-page:has(header[data-overlay="1"]) { padding-top: calc( var(--sctn-py) * 1.5); } #fl-main-content > .fl-builder-content > .fl-row:not(:first-child[id^="hero"],:first-child[class*="bgc-"],:first-child.bg-inset,:first-child[class*="fl-row-bg-"],:first-child[class*="cta-card-slim"]), #fl-main-content > .fl-builder-content > .fl-row.fl-row-bg-none:not([class*="bgc-"]), #fl-main-content > .fl-builder-content > .fl-row.fl-row-bg-none:not([class*="bgc-"],[class*="cta-card-slim"]) + .fl-row.fl-row-bg-none:not([class*="bgc-"],[class*="cta-card-slim"]) { margin-top: var(--sctn-my); } #fl-main-content > .fl-builder-content > .fl-row[class*="bgc-"] + .fl-row:where([class*="bgc-"],.cta-card-slim), #fl-main-content > .fl-builder-content > .fl-row[class*="fl-row-bg-"]:not(.fl-row-bg-none) + .fl-row[class*="fl-row-bg-"]:not(.fl-row-bg-none), #fl-main-content > .fl-builder-content > .fl-row[class*="bgc-"] + .fl-row[class*="fl-row-bg-"]:not(.fl-row-bg-none), #fl-main-content > .fl-builder-content > .fl-row[class*="fl-row-bg-"]:not(.fl-row-bg-none) + .fl-row[class*="bgc-"], #fl-main-content > .fl-builder-content > .fl-row[id^="hero"] + .fl-row[class*="bgc-"], #fl-main-content > .fl-builder-content > .fl-row[id^="hero"] + .fl-row[class*="fl-row-bg-"]:not(.fl-row-bg-none), #fl-main-content > .fl-builder-content > .fl-row[id^="intro"] + .fl-row[class*="bgc-"], #fl-main-content > .fl-builder-content > .fl-row[id^="intro"] + .fl-row[class*="fl-row-bg-"]:not(.fl-row-bg-none), #fl-main-content > .fl-builder-content > .fl-row.cta-card-slim + .fl-row:where([class*="bgc-"],[class*="fl-row-bg-"]:not(.fl-row-bg-none),#cta,#intro) { margin-top: 0; } .sctn-py, .sctn-rcw-py .fl-row-content-wrap, #fl-main-content > .fl-builder-content > .fl-row[class*="fl-row-bg-"]:not(.fl-row-bg-none) .fl-row-content-wrap, #fl-main-content > .fl-builder-content > .fl-row[class*="bgc-"]:not(#hero-slider, .rcw-py-0, .bgc-none) .fl-row-content-wrap, #fl-main-content > .fl-builder-content > .fl-row.bg-inset > .fl-row-content-wrap { padding-top: var(--sctn-py); padding-bottom: var(--sctn-py); } /* set a default vertical gutter for main content area section columns, that way letting more cols wrap creates some space */ .sctn-rcw-py, #fl-main-content > .fl-builder-content-primary section, #fl-main-content > .fl-builder-content section /* archive template page header */ { --bs-gutter-y: var(--bs-gutter-x); /* this is problematic for existing kitchen sink typical BB sections where there are multiple col-groups */ } /* offset the default vertical gutter space of the cols, so there isn't extra space at the top of the section */ .sctn-rcw-py .fl-row-content-wrap > .fl-row-content > .fl-col-group:first-child, #fl-main-content > .fl-builder-content-primary section .fl-row-content-wrap > .fl-row-content > .fl-col-group:first-child, #fl-main-content > .fl-builder-content section .fl-row-content-wrap > .fl-row-content > .fl-col-group:first-child /* archive template page header */ { margin-top: calc( var(--bs-gutter-y) * -1); /* vertical gutter offset */ } .sctn-py-2, .sctn-rcw-py-2 .fl-row-content-wrap, #fl-main-content > .fl-builder-content-primary section.sctn-rcw-py-2 .fl-row-content-wrap { --sctn-py-2: calc( var(--sctn-py) * 0.5); padding-top: var(--sctn-py-2) !important; padding-bottom: var(--sctn-py-2) !important; } #fl-main-content > .fl-builder-content-primary section.fl-row-bg-color .fl-rich-text > *:last-child { margin-bottom: 0; } .sctn-mt { margin-top: var(--sctn-my); } .sctn-mb { margin-bottom: var(--sctn-my); } .sctn-pt { padding-top: var(--sctn-my); } .sctn-pb { padding-bottom: var(--sctn-my); } @media (min-width:767px) and (max-width:991px) { .sctn-mdo-mt { margin-top: var(--sctn-my); } .sctn-mdo-mb { margin-bottom: var(--sctn-my); } .sctn-mdo-pt { padding-top: var(--sctn-my); } .sctn-mdo-pb { padding-bottom: var(--sctn-my); } } /* ~ .container */ .fl-row-content, /* fl-module-box (row) still uses this wrapper */ .fluid-container, .container, .fl-page-nav-right .fl-page-header-container, .fl-page-header-container.container, .fl-page-footer-widgets-container.container, .fl-page-footer-container.container { padding-right: calc(var(--bs-gutter-x) * 0.5) !important; padding-left: calc(var(--bs-gutter-x) * 0.5) !important; } /* ~ .row */ .fl-col-group, .row, .fl-page-nav-right .fl-page-header-row, .fl-page-header-row.row, .fl-page-footer-widgets-row.row, .fl-page-footer-row.row, /* BB v2.8 offers a "box" module which brings flex and grid things */ /* i think it applies each dynamically with random generated classes */ .sctn-box-flex .fl-row-content > .fl-module-box, .sctn-left-right .fl-row-content > .fl-module-box { margin-right: calc(var(--bs-gutter-x) * -0.5) !important; margin-left: calc(var(--bs-gutter-x) * -0.5) !important; } .sctn-box-flex .fl-row-content > .fl-module-box { /* flex: 0 0 auto; --- */ flex-wrap: wrap; /* will need to set col widths */ } /* ~ .col */ .fl-col-group > .fl-col, .fl-page-nav-right .fl-page-header-row .fl-page-header-logo-col, .row > *, .row > [class*="col"], .sctn-box-flex .fl-row-content > .fl-module-box > .fl-module-box, .sctn-left-right .fl-row-content > .fl-module-box > .fl-module-box { padding-right: calc(var(--bs-gutter-x) * 0.5) !important; padding-left: calc(var(--bs-gutter-x) * 0.5) !important; margin-top: var(--bs-gutter-y); } /* offset the default vertical gutter space of the cols, so there isn't extra space at the top of the section */ .sctn-box-flex .fl-row-content > .fl-module-box:first-child, .sctn-left-right .fl-row-content > .fl-module-box { margin-top: calc( var(--bs-gutter-y) * -1); /* vertical gutter offset */ } .cta-left-right { background-color: var(--ip-drkblue) !important; background-image: url('imgs/bgp-popdots_navy.svg'); background-repeat: no-repeat; background-position: center center; background-size: cover; color: rgba( var(--bs-white-rgb),1.0 ); } .cta-left-right-bgp-left { background-color: var(--ip-drkblue) !important; background-image: url('imgs/bgp-popdots_navy_left.svg'); background-repeat: no-repeat; background-position: bottom left; background-size: auto 100%; color: rgba( var(--bs-white-rgb),1.0 ); } .cta-left-right .fl-heading, .cta-left-right-bgp-left .fl-heading { color: rgba( var(--bs-white-rgb),1.0 ); } /* --> Coloration <-- */ .bgc-navy, .bgc-rcw-navy > .fl-row-content-wrap { background-color: rgba(var(--ip-navy-rgb),1.0) !important; } .bgc-navy-85, .bgc-rcw-navy-85 > .fl-row-content-wrap { background-color: var(--ip-navy-85) !important; } .fl-builder-content .bgc-navy [class*="btn-text-"] .fl-button, .fl-builder-content .bgc-rcw-navy > .fl-row-content-wrap [class*="btn-text-"] .fl-button, .fl-builder-content .bgc-navy [class*="btn-text-"] .fl-button:visited, .fl-builder-content .bgc-rcw-navy > .fl-row-content-wrap [class*="btn-text-"] .fl-button:visited { color: var(--accent-color); } .fl-builder-content .bgc-navy [class*="btn-text-"] .fl-button:hover, .fl-builder-content .bgc-rcw-navy > .fl-row-content-wrap [class*="btn-text-"] .fl-button:hover { color: var(--bs-white); } .bgc-drkblue, .bgc-rcw-drkblue > .fl-row-content-wrap { background-color: rgba(var(--ip-drkblue-rgb),1.0); } .bgc-blue, .bgc-rcw-blue > .fl-row-content-wrap { background-color: rgba(var(--ip-blue-rgb),1.0); } .bgc-ltgray, .bgc-ltgrey, .bgc-rcw-ltgray > .fl-row-content-wrap, .bgc-rcw-ltgrey > .fl-row-content-wrap { background-color: var(--ip-ltgray); } .sctn-ltgray-inset, .sctn-ltgrey-inset, .bgc-ltgray-inset, .bgc-ltgrey-inset, .bg-inset { background-color: var(--ip-ltgray); box-shadow: var(--ip-inset-shadow); } .bgc-charcoal, section.bgc-charcoal > .fl-row-content-wrap { background-color: rgba(var(--ip-charcoal-rgb),1.0); } .bg-dots-navy-overlay { background-color: var(--ip-navy); } .fl-buider-content .bg-dots-navy-overlay [class*="btn-text-"] .fl-button, .fl-buider-content .bg-dots-navy-overlay [class*="btn-text-"] .fl-button:visited { color: var(--accent-color); } .fl-buider-content .bg-dots-navy-overlay [class*="btn-text-"] .fl-button:hover { color: var(--bs-white); } .bg-dots-navy-overlay.fl-row-bg-none { margin-top: 0 !important; margin-bottom: 0 !important; } .bg-dots-navy-overlay > .fl-row-content-wrap { padding-top: var(--sctn-py); padding-bottom: var(--sctn-py); } .hero-sub > .fl-row-content-wrap, .bg-dots-navy-overlay > .fl-row-content-wrap { position: relative; } .hero-sub > .fl-row-content-wrap { padding-top: var(--sctn-py); padding-bottom: var(--sctn-py); } .hero-sub > .fl-row-content-wrap::before, .bg-dots-navy-overlay > .fl-row-content-wrap::before { content: ""; display: block; background: url('imgs/bgp-dot_blk_8px-2px.svg') top left; background-size: 8px 8px; position: absolute; top: 0; right: 0; width: 100%; height: 100%; /* convert black fill to desired color (blue): https://codepen.io/sosuke/pen/Pjoqqp */ filter: var(--convert-to-blue); } .color-overlay > .fl-row-content-wrap::after, .hero-sub > .fl-row-content-wrap::after, .bg-dots-navy-overlay > .fl-row-content-wrap::after { content: ""; display: block; background-color: rgba(var(--ip-navy-rgb), var(--overlay-opacity)); position: absolute; top: 0; right: 0; width: 100%; height: 100%; } .color-overlay > .fl-row-content-wrap > .fl-row-content, .hero-sub > .fl-row-content-wrap > .fl-row-content, .bg-dots-navy-overlay > .fl-row-content-wrap > .fl-row-content { position: relative; z-index: 1; } .bg-dots-navy-overlay .sctn-title .fl-heading, .bg-dots-navy-overlay .fl-module-heading .fl-heading { text-shadow: var(--text-shadow); color: var(--bs-white); } .bg-dots-navy-overlay .fl-module-rich-text .fl-rich-text a { text-decoration: underline; } .bg-dots-navy-overlay .fl-module-rich-text .fl-rich-text *:not(a), .bg-dots-navy-overlay .fl-module-rich-text .fl-rich-text a:hover, .bg-dots-navy-overlay .fl-module-rich-text .fl-rich-text a:focus { color: var(--bs-white); } /* bgb = background border */ /* dots treated as "borders" - can be positionally applied to headings or containers */ /* rename bgb-dots-rc-btm = background border targeting .fl-row-content */ [class*="bgp-dots-"], [class*="bgb-dots-"] { --dot-h-unit: 8px; --dot-h: calc( var(--dot-h-unit) * 2); /* default is 2 units tall */ --dot-scale: calc( var(--dot-h-unit) * 2); } /* a left dots border is rather unique, it applies to a ::before pseudo element, and it's 3 units wide */ /* .bgb-dots-left replaces .dot-bg-left - this is located later in the css file */ /* rename bgb-dots-rc-btm = targeting .fl-row-content */ [class*="bgp-dots-"] .fl-row-content, [class*="bgb-dots-"].fl-row > .fl-row-content-wrap > .fl-row-content, [class*="bgb-dots-rc-"] > .fl-row-content-wrap > .fl-row-content, /* so as to not accidentally bonk descendent children */ [class*="bgb-dots-"].fl-module-heading .fl-heading, [class*="bgb-dots-hdg-"] .fl-heading, [class*="bgb-dots-cc-"] > .fl-col-content { position: relative; } .bgp-dots-btm .fl-row-content, .bgb-dots-btm.fl-row > .fl-row-content-wrap > .fl-row-content, .bgb-dots-rc-btm > .fl-row-content-wrap > .fl-row-content { padding-bottom: calc(var(--sctn-py) + var(--dot-h)); } @media (min-width: 992px) { .fl-theme-builder-singular-team-member-single .bgb-dots-btm.fl-row > .fl-row-content-wrap > .fl-row-content { padding-bottom: calc( (var(--sctn-py) * 0.5) + var(--dot-h)); } } .bgb-dots-btm.fl-module-heading .fl-heading, .bgb-dots-hdg-btm .fl-heading { padding-bottom: calc(0.25rem + var(--dot-h)) !important; } [class*="bgp-dots-"] .fl-row-content::after, [class*="bgb-dots-"].fl-row > .fl-row-content-wrap > .fl-row-content::after, [class*="bgb-dots-rc-"] > .fl-row-content-wrap > .fl-row-content::after, [class*="bgb-dots-"].fl-module-heading .fl-heading::after, [class*="bgb-dots-hdg-"] .fl-heading::after { content: ""; display: block; position: absolute; width: 100%; height: var(--dot-h); background: var(--bgp-dots-img); background-size: calc(var(--dot-scale) * 0.5); background-position-x: -1px; filter: var(--convert-to-blue); } .bgb-dots-btm.fl-row > .fl-row-content-wrap > .fl-row-content::after { width: calc( 100% - var(--bs-gutter-x) ); } .bgp-dots-btm .fl-row-content::after, .bgb-dots-btm.fl-row > .fl-row-content-wrap > .fl-row-content::after, .bgb-dots-rc-btm > .fl-row-content-wrap > .fl-row-content::after, .bgb-dots-btm.fl-module-heading .fl-heading::after, .bgb-dots-hdg-btm .fl-heading::after { bottom: 0; } .bgp-dots-btm .fl-module-heading:last-child .fl-module-content > *:last-child, .bgb-dots-btm.fl-row .fl-module-heading:last-child .fl-module-content > *:last-child { margin-bottom: 0 !important; } /* inset drop shadow at the top of the section */ .sctn-shadow-inset-top, .sctn-inset { box-shadow: var(--ip-inset-shadow); } .sctn-inset.fl-row-bg-color, .sctn-rcw-inset.fl-row-bg-color { position: relative; } .sctn-inset.fl-row-bg-color > .fl-row-content-wrap, .sctn-rcw-inset.fl-row-bg-color > .fl-row-content-wrap { position: unset; } .sctn-inset.fl-row-bg-color > .fl-row-content-wrap::before, .sctn-rcw-inset.fl-row-bg-color > .fl-row-content-wrap::before { content: ""; height: 20px; width: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(180deg, rgba(var(--bs-black-rgb),0.1) 0%, rgba(var(--bs-black-rgb),0) 100%); z-index: 1; } .sctn-left-right .fl-col-group, .sctn-left-right > .fl-row-content-wrap > .fl-row-content > .fl-module-box { align-items: center; } .sctn-left-right .fl-rich-text > *:last-child { margin-bottom: 0; } @media (max-width: 767px) { .sctn-left-right { --bs-gutter-y: var(--spacer); } } @media (min-width: 768px) { .sctn-left-right { --bs-gutter-x: calc(var(--spacer) * 1.5); } } @media (min-width: 992px) { .sctn-left-right { --bs-gutter-x: calc(var(--spacer) * 3); } } /* END sctn-left-right */ /* END sections --------------------------------------- */ /* START hero ========================================= */ #hero { --color: var(--bs-white); color: var(--color); } #hero .fl-heading { color: var(--color); } #hero .fl-module-heading:last-child .fl-heading, #hero .fl-module-heading + .fl-module-heading .fl-heading { /* sized more like an h2 */ font-size: calc(1.325rem + .9vw); } @media (min-width: 1200px) { #hero .fl-module-heading:last-child .fl-heading, #hero .fl-module-heading + .fl-module-heading .fl-heading { /* sized more like an h2 */ font-size: 2rem; } } #hero .fl-module-box > .fl-module-box { flex: 0 0 auto; /* padding-right: calc(var(--bs-gutter-x)* .5) !important; padding-left: calc(var(--bs-gutter-x)* .5) !important; margin-top: var(--bs-gutter-y); */ } #hero .fl-col:first-child, #hero .fl-module-box > .fl-module-box, #hero-col, .bgb-dots-left { --dot-size: 10px; --dot-hz-repeats: 3; --dot-w: calc(var(--dot-size) * var(--dot-hz-repeats)); } /* a left dots border is rather unique, it applies to a ::before pseudo element, and it's 3 units wide */ #hero .fl-col:first-child > .fl-col-content, #hero .fl-module-box > .fl-module-box:first-child, #hero-col > .fl-col-content, .bgb-dots-left:not(.fl-module-box) > div:only-child, .bgb-dots-left.fl-module-box { position: relative; padding-left: calc( var(--bs-gutter-x) + var(--dot-w) ) !important; } .sctn-box-flex .fl-row-content > .fl-module-box > .bgb-dots-left.fl-module-box { padding-left: calc( ( var(--bs-gutter-x) * 1.5) + var(--dot-w) ) !important; } #hero .fl-col:first-child > .fl-col-content::before, #hero-col > .fl-col-content::before, #hero .fl-module-box > .fl-module-box:first-child::before, .bgb-dots-left:not(.fl-module-box) > div:only-child::before, .bgb-dots-left.fl-module-box::before { display: block !important; position: absolute; content: ""; top: 0; left: 0; background: var(--bgp-dots-img) top left; background-size: var(--dot-size) var(--dot-size); width: var(--dot-w); height: 100%; filter: var(--convert-to-accent); } .sctn-box-flex .bgb-dots-left.fl-module-box::before { left: calc( var(--bs-gutter-x) * 0.5); } .bgb-dots-left.sctn-title:first-child + .fl-module { margin-top: calc( var(--sctn-my) * 0.5); } #hero, #hero-col .fl-module { text-shadow: var(--text-shadow); } #hero .fl-module-heading:first-child:not(:only-child) .fl-heading, #hero-title .fl-heading { text-transform: uppercase; font-size: var(--bs-body-font-size); line-height: var(--bs-body-line-height); } #hero:not(.hero-sub) > .fl-row-content-wrap { position: relative; } /* create an overlay to aid in copy legiblity */ #hero:not(.hero-sub) > .fl-row-content-wrap::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; background-color: rgba( var(--ip-navy-rgb), 0.45 ); } #hero:not(.sub-hero) .fl-row-content { position: relative; z-index: 2; } @media (min-width: 768px) { #hero:not(.hero-sub) .fl-module-heading + .fl-module-rich-text { margin-top: 1rem; transition: var(--transition); } #hero-subtitle .fl-heading { margin-bottom: 1rem !important; transition: var(--transition); } } @media (min-width: 992px) { #hero:not(.hero-sub) .fl-module-heading + .fl-module-rich-text { margin-top: 2rem; } #hero-subtitle .fl-heading { margin-bottom: 2rem !important; } } @media (min-width: 1200px) { #hero:not(.hero-sub) .fl-module-heading + .fl-module-rich-text { margin-top: 3rem; } #hero-subtitle .fl-heading { margin-bottom: 3rem !important; } } #hero-description .fl-rich-text > p:last-child { margin-bottom: 0.5rem; } /* END hero ------------------------------------------- */ /* START #intro ======================================= */ #intro { background-color: rgba(var(--ip-drkblue-rgb),1.0); margin-top: 0 !important; margin-bottom: 0 !important; } #intro.bgc-drkblue .fl-heading, #intro .fl-heading { color: var(--bs-white); } #intro .fl-module-heading:not([class*="display-"]) .fl-heading { font-size: calc(1.275rem + .3vw); font-weight: 500; } #intro.big-intro .fl-module-heading:not([class*="display-"]) .fl-heading { font-size: calc(1.375rem + 1.5vw); } #intro .fl-col-content > .fl-module-heading:only-child .fl-heading, #intro .fl-module-box > .fl-module-box .fl-module-heading:only-child .fl-heading { margin-bottom: 0 !important; } #intro .fl-module-rich-text .fl-rich-text { color: var(--bs-white); } #intro .fl-module-rich-text .fl-rich-text > p { font-family: "ff-utility-web-pro", Helvetica, Arial, sans-serif; font-size: calc(1.275rem + .3vw); font-weight: 500; line-height: 1.2; } #intro .fl-module-rich-text:last-child .fl-rich-text > p:last-child { margin-bottom: 0; } @media (min-width: 1200px) { #intro .fl-module-box > .fl-module-box { width: 91.666%; flex: 0 0 auto; } #intro .fl-module-heading:not([class*="display-"]) .fl-heading, #intro .fl-module-rich-text .fl-rich-text > p { font-size: 1.5rem; } #intro.big-intro .fl-module-heading:not([class*="display-"]) .fl-heading { font-size: 2.5rem; } } @media (min-width: 1400px) { #intro .fl-module-box > .fl-module-box { width: 83.333%; } } #intro .fl-row-content-wrap { --sctn-py-2: calc(var(--sctn-py)* 0.5); padding-top: var(--sctn-py-2) !important; padding-bottom: var(--sctn-py-2) !important; } /* END intro ------------------------------------------ */ /* START #single-intro ================================ */ #single-intro { background-color: var(--ip-ltgray); margin-top: 0 !important; } .single-news #single-intro { --dot-h: 16px; background-color: unset; } .single-webinars #single-intro { --dot-h: 16px; } .single-news #single-intro .fl-row-content-wrap { padding-bottom: 0; } .single-news #single-intro .fl-heading { padding-bottom: var(--sctn-py) !important; position: relative; } .single-webinars #single-intro .fl-heading { padding-top: calc( var(--dot-h) + 0.5rem) !important; position: relative; } .single-news #single-intro .fl-heading::after, .single-webinars #single-intro .fl-heading::before { content: ""; display: block !important; position: absolute; width: 100%; bottom: 0; height: var(--dot-h); background: url('imgs/bgp-dot_blk_10px-5px.svg'); background-size: calc(var(--dot-h)* 0.5); background-position-x: -1px; filter: var(--convert-to-blue); } .single-webinars #single-intro .fl-heading::before { top: 0; bottom: unset; } #single-intro .fl-row-content-wrap { padding-top: var(--sctn-py); padding-bottom: var(--sctn-py); } #post-data { --dot-h: 16px; position: relative; padding-bottom: calc( var(--dot-h) + ( var(--spacer) * 1.5) ); margin-bottom: calc( var(--spacer) * 0.5) ; } #post-data::after { content: ""; display: block; position: absolute; width: 100%; bottom: 0; height: var(--dot-h); background: url('imgs/bgp-dot_blk_10px-5px.svg'); background-size: calc(var(--dot-h)* 0.5); background-position-x: -1px; filter: var(--convert-to-blue); } #post-data .fl-html > ul { padding-left: 0; list-style: none; text-transform: uppercase; margin-bottom: 0; } #post-data .fl-html > ul > li { display: inline-block; position: relative; } #post-data .fl-html > ul > li:not(:last-child) { padding-right: 1rem; margin-right: 1rem; } #post-data .fl-html > ul > li:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 1rem; background-color: var(--body-color); } #post-data .fl-html > ul > li > a { color: var(--accent-color-hover); transition: color var(--transition); } #post-data .fl-html > ul > li > a:hover { color: var(--accent-color); } #single-intro .fl-heading { margin-bottom: 0 !important; } #single-intro .fl-module-heading + .fl-module { --mt: calc(1.275rem + .3vw); margin-top: var(--mt); transition: margin-top var(--transition); } @media (min-width: 1200px) { #single-intro .fl-module-heading + .fl-module { --mt: 2rem; } } #single-intro p { color: var(--ip-drkblue); font-size: calc(1.3rem + .6vw); /* h3 */ font-family: var(--heading-ff); font-weight: 700; line-height: 1.2; } #single-intro p:last-child { margin-bottom: 0; } @media (min-width: 1200px) { #single-intro p { font-size: 1.75rem; } } #podcast-data .fl-html > ul { padding-left: 0; list-style: none; text-transform: uppercase; margin-bottom: 0; } #podcast-data .fl-html > ul > li { display: inline-block; position: relative; } #podcast-data .fl-html > ul > li:not(:last-child) { padding-right: 1rem; margin-right: 1rem; } #podcast-data .fl-html > ul > li:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 1rem; background-color: var(--body-color); } #podcast-data .fl-html > ul > li > a { color: var(--accent-color-hover); transition: color var(--transition); } #podcast-data .fl-html > ul > li > a:hover { color: var(--accent-color); } /* END #single-intro --------------------------------------------- */ /* START .cta-card-slim ========================================== */ .cta-card-slim { --radius: var(--ip-radius); --p: var(--spacer); background-color: rgba(var(--ip-navy-rgb), 1.0); color: var(--bs-white); } .cta-card-slim .fl-row-content-wrap { --sctn-py-2: calc(var(--sctn-py)* 0.5); padding-top: var(--sctn-py-2) !important; padding-bottom: var(--sctn-py-2) !important; } .cta-card-slim .fl-col:only-child { float: unset; } .cta-card-slim .fl-col-content, .cta-card-slim .fl-module-box > .fl-module-box { background-color: var(--ip-drkblue); color: var(--bs-white); border-radius: 0 var(--radius) var(--radius) var(--radius); box-shadow: inset 20px 20px 14px rgba(var(--bs-black-rgb), 0.18); } .cta-card-slim .fl-module > .fl-module-content { padding-top: calc(var(--p)* 0.5); padding-bottom: calc(var(--p)* 0.5); } .cta-card-slim p { margin-bottom: 0; } .cta-card-slim .fl-module:not(.fl-module-button) > .fl-module-content { padding-left: var(--p); padding-right: var(--p); } .cta-card-slim .fl-button-wrap { height: 100%; } .cta-card-slim .fl-module-box .fl-button { border-radius: 0 0 0 var(--radius); } .cta-card-slim a.fl-button-wrap { height: 100%; align-items: center; } .cta-card-slim .fl-button-text { width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: clip !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .cta-card-slim .fl-button-text:not(caption) { position: absolute !important; } .cta-card-slim .fl-module.fl-module-button:last-child > .fl-module-content { padding-bottom: 0; } .cta-card-slim .fl-button i.fl-button-icon-after { margin-left: 0; } .cta-card-slim .fl-button:hover { border: 1px solid var(--bs-white) !important; } .cta-card-slim .fl-module-heading { margin-bottom: 0; } @media (max-width: 767px) { .cta-card-slim .fl-heading { padding-top: 0.7rem !important; } } @media (min-width: 768px) { .cta-card-slim .fl-col-content, .cta-card-slim .fl-module-box > .fl-module-box { display: flex; align-items: stretch; flex-wrap: nowrap; } .cta-card-slim .fl-module-box > .fl-module-box { flex-direction: row; } .cta-card-slim .fl-module:not(:last-child) > .fl-module-content { padding-top: var(--p); padding-bottom: var(--p); } .cta-card-slim .fl-module-heading:first-child { order: 2; width: 30%; } .cta-card-slim .fl-module-rich-text:nth-child(2) { order: 3; width: 60%; } .cta-card-slim .fl-module-button:last-child { order: 1; align-self: flex-end; width: auto; height: 100%; } .cta-card-slim .fl-module-button:last-child > .fl-module-content { padding-top: 0; height: 100%; } .cta-card-slim .fl-module-button:last-child .fl-button-wrap { height: 100%; } .cta-card-slim .fl-module-button:last-child .fl-button { height: 100%; aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center; } } @media (min-width: 1200px) { .cta-card-slim .fl-module-heading:first-child { width: 20%; } } .cta-card-slim .fl-heading { color: var(--bs-white); margin-bottom: 0 !important; font-size: 1.25rem; } /* END cta-card-slim --------------------------------------- */ /* START .cta-card-slim-col (apply this class to a section) == */ .cta-card-slim-col { --radius: var(--ip-radius); --p: var(--spacer); background-color: rgba(var(--ip-navy-rgb), 1.0); color: var(--bs-white); } .cta-card-slim-col .fl-row-content-wrap { --sctn-py-2: calc(var(--sctn-py)* 0.5); padding-top: var(--sctn-py-2) !important; padding-bottom: var(--sctn-py-2) !important; } .cta-card-slim-col [class*="gx-"] { margin-right: calc(-.5* var(--bs-gutter-x)); margin-left: calc(-.5* var(--bs-gutter-x)); } .cta-card-slim-col [class*="gx-"] > .fl-module-box { padding-left: calc(0.5* var(--bs-gutter-x)); padding-right: calc(0.5* var(--bs-gutter-x)); } .fl-module-box:has( > .cta-card) { container-name: cta-card-parent; container-type: inline-size; } .cta-card-slim-col .cta-card { background-color: var(--ip-drkblue); color: var(--bs-white); border-radius: 0 var(--radius) var(--radius) var(--radius); box-shadow: inset 20px 20px 14px rgba(var(--bs-black-rgb), 0.18); } .cta-card-slim-col .fl-heading { color: var(--bs-white); font-size: 1.25rem; margin-bottom: 0 !important; } .cta-card-slim-col p { margin-bottom: 0; } .cta-card-slim-col .fl-button-wrap { height: 100%; } .cta-card-slim-col .fl-module-box .fl-button { border-radius: 0 0 0 var(--radius); } .cta-card-slim-col a.fl-button-wrap { height: 100%; align-items: center; } .cta-card-slim-col .fl-button-text { width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: clip !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .cta-card-slim-col .fl-button-text:not(caption) { position: absolute !important; } .cta-card-slim-col .fl-module.fl-module-button:last-child > .fl-module-content { padding-bottom: 0; } .cta-card-slim-col .fl-button i.fl-button-icon-after { margin-left: 0; } .cta-card-slim-col .fl-button:hover { border: 1px solid var(--bs-white) !important; } .cta-card-slim-col .cta-card > .fl-module-box { padding: var(--p); } @container cta-card-parent (max-width: 455px) { .cta-card-slim-col .cta-card { flex-direction: column; } } @container cta-card-parent (min-width: 456px) { .cta-card-slim-col .fl-module-button:last-child { order: -1; align-self: flex-end; width: auto; height: 100%; } .cta-card-slim-col .fl-module-button > .fl-module-content { height: 100%; } .cta-card-slim-col .fl-button { height: 100%; display: flex !important; align-items: center; } } @container cta-card-parent (min-width: 768px) { .cta-card-slim-col .fl-module-button > .fl-module-content { padding-top: 0; height: 100%; } .cta-card-slim-col .fl-module-button .fl-button-wrap { height: 100%; } .cta-card-slim-col .fl-module-button .fl-button { height: 100%; aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center; } } /* END cta-card-slim-col --------------------------------------- */ /* START .card-cta (apply this class to a box module which contains another box and a button module) == */ /* example: .fl-module-box (column) .fl-module-box.card-cta .fl-module-box .fl-module-heading .fl-module-rich-text .fl-module-button */ /* possible parent selector here .card-cta .fl-row-content-wrap { --sctn-py-2: calc(var(--sctn-py)* 0.5); padding-top: var(--sctn-py-2) !important; padding-bottom: var(--sctn-py-2) !important; } */ .fl-module-box:has( > .card-cta) { container-name: card-cta-parent; container-type: inline-size; } .card-cta { --radius: var(--ip-radius); --p: var(--spacer); color: var(--bs-white); background-color: var(--ip-drkblue); border-radius: 0 var(--radius) var(--radius) var(--radius); box-shadow: inset 20px 20px 14px rgba(var(--bs-black-rgb), 0.18); } .card-cta > .fl-module-box { padding: var(--p); } .card-cta .fl-heading { color: var(--bs-white); font-size: 1.25rem; margin-bottom: 0 !important; } .card-cta p { margin-bottom: 0; } .card-cta .fl-module-button > .fl-module-content { padding-bottom: 0; } .card-cta .fl-button-wrap { height: 100%; } .card-cta a.fl-button-wrap { height: 100%; align-items: center; } .card-cta .fl-button { border-radius: 0 0 0 var(--radius) !important; } .card-cta .fl-button:hover { border: 1px solid var(--bs-white) !important; } .card-cta .fl-button-text { width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: clip !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .card-cta .fl-button-text:not(caption) { position: absolute !important; } .card-cta .fl-button i.fl-button-icon-after { margin-left: 0; } @container card-cta-parent (max-width: 455px) { .card-cta { flex-direction: column; } } @container card-cta-parent (min-width: 456px) { .card-cta .fl-module-button { order: -1; align-self: flex-end; width: auto; height: 100%; } .card-cta .fl-module-button > .fl-module-content { height: 100%; } .card-cta .fl-button { height: 100%; display: flex !important; align-items: center; } } @container card-cta-parent (min-width: 768px) { .card-cta .fl-module-button > .fl-module-content { padding-top: 0; height: 100%; } .card-cta .fl-module-button .fl-button-wrap { height: 100%; } .card-cta .fl-module-button .fl-button { height: 100%; aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center; } } /* END .card-cta --------------------------------------- */ /* START archive page stuff ================================ */ #search-n-filter { margin-top: 0 !important; margin-bottom: 0 !important; } #search-n-filter .fl-row-content-wrap { --sctn-py-2: calc(var(--sctn-py)* 0.5); padding-top: var(--sctn-py-2) !important; padding-bottom: var(--sctn-py-2) !important; } #archive-list { margin-bottom: var(--sctn-my); } #search-n-filter + #archive-list { margin-top: 0 !important; } #search-n-filter .searchandfilter ul { display: flex; padding-left: 0; } @media (min-width: 768px) { #search-n-filter .searchandfilter ul { padding-left: var(--spacer); } } #search-n-filter .searchandfilter ul > li:not(:first-child) { margin-left: var(--spacer); } /* duplicate BS5 for .form-select */ #search-n-filter .sf-input-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); --bs-border-width: 1px; --bs-border-color: #dee2e6; --bs-border-radius: 0.375rem; --bs-body-color: var(--body-color); --bs-body-bg: #ffffff; display: block; width: 100%; padding: .375rem 2.25rem .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--bs-body-color); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--bs-body-bg); background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } #search-n-filter .sf-input-select:focus { border-color: rgb(var(--ip-drkblue-rgb)); outline: 0; box-shadow: 0 0 0 0.25rem rgba(var(--ip-drkblue-rgb), 0.125); } .archive-item { --img-h: 200px; --dot-h: 16px; --gutter-y: 1rem; /* top and bottom */ --gutter-x: 0; /* left and right */ --img-col-w: 100%; --text-col-w: 100%; --dot-border-w: 100%; border-bottom: none; padding-bottom: calc( var(--gutter-y) + var(--dot-h) ); margin: 0 0 var(--gutter-y) 0 !important; max-width: unset !important; position: relative; } .archive-item:first-child { padding-top: calc( var(--gutter-y) + var(--dot-h) ); } .archive-item:last-child { padding-bottom: calc( var(--gutter-y) + var(--dot-h) ); margin: 0 0 var(--gutter-y) 0 !important; } .archive-item:first-child::before, .archive-item::after { content: ""; display: block; position: absolute; width: var(--dot-border-w); bottom: 0; left: 50%; transform: translateX(-50%); height: var(--dot-h); background: var(--bgp-dots-img); background-size: calc(var(--dot-h)* 0.5); background-position-x: -1px; filter: var(--convert-to-blue); } .archive-item:first-child::before { bottom: unset; top: 0; } .archive-item .fl-button-text { display: flex; align-items: center; } .archive-item .fa-solid { margin-left: var(--spacer); } .archive-item .item-image a > img { filter: grayscale(100%); transition: filter var(--transition); height: var(--img-h); object-fit: cover; } .archive-item .item-image a:hover > img { filter: grayscale(0%); } .archive-item .wp-post-image { border-radius: var(--spacer); } @media (max-width: 767px) { .archive-item.item-md-img-beside .item-image, .archive-item.item-md-img-beside .item-text { margin-top: var(--gutter-y); } .archive-item.item-md-img-beside .item-text { margin-bottom: var(--gutter-y); } } @media (min-width: 768px) { .archive-item.item-md-img-beside { --img-col-w: 33.333%; --text-col-w: 66.666%; --gutter-y: 2rem; --gutter-x: 2rem; /* left and right */ --px: calc( var(--gutter-x) * 0.5); --img-h: 200px; --dot-border-w: calc( 100% - var(--gutter-x) ); display: flex; flex-wrap: wrap; margin-left: calc( var(--px) * -1) !important; margin-right: calc( var(--px) * -1) !important; } .archive-item.item-md-img-beside .item-image, .archive-item.item-md-img-beside .item-text { flex: 0 0 auto; padding-left: var(--px); padding-right: var(--px); } .archive-item.item-md-img-beside .item-image { width: var(--img-col-w); } .archive-item.item-md-img-beside .wp-post-image { /* min-height: var(--img-h); */ height: var(--img-h); object-fit: cover; } .archive-item.item-md-img-beside .item-text { width: var(--text-col-w); } } @media (min-width: 992px) { .archive-item.item-md-img-beside { --img-col-w: 33.333%; --text-col-w: 66.666%; } } @media (min-width: 1200px) { .archive-item.item-md-img-beside { --img-col-w: 25%; --text-col-w: 75%; --img-h: 250px; } } /* pagination */ .fl-builder-pagination li a.page-numbers:hover { background-color: unset; } .fl-builder-pagination li span.current { background-color: unset; color: #707070; } .fl-builder-pagination li a.page-numbers, .fl-builder-pagination li span.page-numbers { border: none; transition: color var(--transition); } /* END archive page stuff ---------------------------------- */ /* START singular page ===================================== */ #single-content .fl-module-box .fl-module-box:first-child .fl-module-fl-post-content a { transition: color var(--transition); } .field-reports-template-default #fl-main-content > .fl-builder-content section#single-content { margin-bottom: 0; } /* zero out the outer wrappers */ #single-content > .fl-row-content-wrap > .fl-row-content.fl-row-full-width, #single-content > .fl-row-content-wrap > .fl-row-content.fl-row-full-width > .fl-col-group > .fl-col { padding-left: 0 !important; padding-right: 0 !important; } #single-content > .fl-row-content-wrap > .fl-row-content.fl-row-full-width > .fl-col-group { margin-left: 0 !important; margin-right: 0 !important; } #fl-main-content #single-content section.fl-row-bg-none:not([id^="hero"],[class*="bgc-"]) { margin-top: var(--sctn-my); } #fl-main-content #single-content section.fl-row-bg-none:not([class*="bgc-"]) { margin-bottom: var(--sctn-my); } #fl-main-content #single-content section[class*="bgc-"]:not(#hero-slider) .fl-row-content-wrap { padding-top: var(--sctn-py); padding-bottom: var(--sctn-py); } /* now also aside */ #single-content .fl-module-box > .fl-module-box:nth-child(2) { margin-bottom: 2rem; } /* #single-content is a single post specific section (below #single-intro) - since field reports is a unique themer layout it doesn't have this section */ /* using min height because otherwise the bottom item can get cut off */ @media (min-height: 920px) and (min-width: 992px) { html:not(.fl-builder-edit) #single-content .fl-module-box > .fl-module-box:nth-child(2) { position: -webkit-sticky; position: sticky; top: 13rem; overflow: auto; height: 100%; } } #single-content .fl-module-box > .fl-module-box:first-child > .fl-module-photo:first-child, #single-content .fl-module-box > .fl-module-box:first-child .fl-module-fl-post-content .fl-module-content > .wp-block-gallery:first-child { margin-bottom: var(--sctn-my); } #single-content .fl-module-box > .fl-module-box:first-child .fl-module-fl-post-content .fl-module-content > .wp-block-gallery:first-child { margin-top: 0; } /* force post image gallery thumbs to be square */ #single-content .wp-block-gallery > .wp-block-image { aspect-ratio: 1/1; } #single-content .fl-module-fl-post-content .wp-block-heading { font-size: 1rem; color: var(--ip-charcoal); } #single-content .fl-module-fl-post-content h2.wp-block-heading:not(:first-child) { margin-top: calc( var(--sctn-my) - 1rem); } #single-content .fl-module-fl-post-content .wp-block-themeisle-blocks-tabs-item__content h2.wp-block-heading:not(:first-child) { margin-top: 1rem; } #single-content .fl-module-post-grid .fl-post-feed article.fl-post-feed-image-beside { border-bottom: unset; display: flex; margin-bottom: 2rem; } #single-content .fl-module-post-grid .fl-post-feed article.fl-post-feed-image-beside .fl-post-feed-image { float: unset; flex: 0 0 auto; } #single-content .fl-module-post-grid .fl-post-feed article.fl-post-feed-image-beside .fl-post-feed-text { --dot-h: 16px; margin-left: 1rem; position: relative; padding-bottom: var(--dot-h); flex-grow: 1; } #single-content .fl-module-post-grid .fl-post-feed article.fl-post-feed-image-beside .fl-post-feed-text::after { content: ""; display: block; position: absolute; width: 100%; bottom: 0; height: var(--dot-h); background: url('imgs/bgp-dot_blk_10px-5px.svg'); background-size: calc(var(--dot-h)* 0.5); background-position-x: -1px; filter: var(--convert-to-blue); } #single-content .fl-module-post-grid .fl-post-feed article .fl-post-feed-header { margin-bottom: 0.5rem; } #single-content .fl-module-post-grid .fl-post-feed article .fl-post-feed-title { font-size: 1rem; } #single-content .fl-module-post-grid .fl-post-feed article .fl-post-feed-title > a { color: var(--ip-charcoal); transition: color var(--transition); } #single-content .fl-module-post-grid .fl-post-feed article .fl-post-feed-title > a:hover, #single-content .fl-module-post-grid .fl-post-feed article .fl-post-feed-title > a:focus { color: var(--accent-color); } #single-content .fl-module-fl-post-content .fl-module-content > :last-child { margin-bottom: 0; } #single-content + #related-content { margin-top: var(--sctn-my); } #single-content + #related-content .fl-row-content { --dot-h-unit: 8px; --dot-h: calc( var(--dot-h-unit) * 3); --dot-scale: calc( var(--dot-h-unit) * 2); position: relative; } #single-content + #related-content .fl-row-content::before { content: ""; display: block; position: absolute; width: 100%; top: 0; height: var(--dot-h); background: url('imgs/bgp-dot_blk_10px-5px.svg'); background-size: calc(var(--dot-scale) * 0.5); background-position-x: -1px; filter: var(--convert-to-accent); } #single-content + #related-content .fl-row-content { padding-top: calc( var(--sctn-py) + var(--dot-h) ); } /* sidebar responsive refinements */ #single-content .fl-module-box .fl-module-box .fl-post-feed { --gutter-x: calc( var(--bs-gutter-x) * 0.5); } /* on mobile */ @media (max-width: 767px) { #single-content .fl-module-post-grid .fl-post-feed article.fl-post-feed-image-beside { margin-left: 0; max-width: unset; } #single-content .fl-module-post-grid .fl-post-feed article.fl-post-feed-image-beside .fl-post-feed-image { width: 33.333% !important; padding-right: var(--gutter-x); margin-bottom: 0; } #single-content .fl-module-post-grid .fl-post-feed article.fl-post-feed-image-beside .fl-post-feed-text { width: 66.666% !important; padding-left: var(--gutter-x); } } /* two post items across in tablet */ @media (min-width: 768px) and (max-width: 991px) { #single-content .fl-module-post-grid .fl-post-feed { display: flex; flex-wrap: wrap; margin-left: calc( var(--gutter-x) * -1 ); margin-right: calc( var(--gutter-x) * -1 ); } #single-content .fl-module-post-grid .fl-post-feed article.fl-post-feed-image-beside { width: 50%; padding-left: var(--gutter-x); padding-right: var(--gutter-x); } #single-content .fl-module-post-grid .fl-post-feed article.fl-post-feed-image-beside .fl-post-feed-text { padding-bottom: var(--dot-h); } } /* create extra space in between the two columns in XL to give space for the shadow divider */ @media (min-width: 1200px) { #single-content .fl-module-box > .fl-module-box { --gutter-separator: 2rem; } #single-content .fl-module-box > article.fl-module-box:first-child > .fl-module { padding-right: var(--gutter-separator); transition: padding-right var(--transition); } #single-content .fl-module-box > aside.fl-module-box:last-child > .fl-module { padding-left: var(--gutter-separator); transition: padding-left var(--transition); } } @media (min-width: 1400px) { #single-content .fl-module-box > .fl-module-box { --gutter-separator: 3rem; } #single-content .fl-module-box > aside.fl-module-box:last-child > .fl-module-post-grid { background: url('imgs/bg-sidebar-shadow.webp') no-repeat top left; background-size: auto 100%; } } /* this section houses the social media icons via the Ultimate Social plugin */ #social-share .norm_row { width: 100% !important; } #social-share .sfsi_wicons:first-child { margin-left: 0 !important; /* overcome inline style */ } /* END singular page ---------------------------------- */ /* START content width ================================ */ /* beaver builder sets a max content width, whereas BS sets progressive content widths based on browser width */ .fl-row-fixed-width { width: 100%; max-width: var(--content-width); } /* END content width ---------------------------------- */ /* START page header ================================== */ /* top-bar -bar == div */ #top-bar { background-color: var(--ip-gray-300); } #top-bar .fl-row-content-wrap { padding-top: 0; padding-bottom: 0; } #menu-topbar a { padding-top: 0.5rem; padding-bottom: 0.5rem; text-transform: uppercase; color: rgba(var(--body-color-rgb), 1); transition: color var(--transition); font-size: 0.7rem; letter-spacing: 0.08rem; } #menu-topbar:hover > .menu-item:not(:hover) > a { color: rgba(var(--body-color-rgb), 0.35); } #menu-topbar a:hover { color: var(--bs-link-hover-color); } /* branding-bar -bar == div */ #branding-bar { color: var(--bs-light); font-size: calc( var(--bs-body-font-size) * 0.8); } #branding-bar p { margin-bottom: 0; text-transform: uppercase; font-weight: 100; } #branding-bar a { font-family: var(--ip-body-font-family); font-weight: 600; color: var(--bs-light); transition: color var(--transition); } #branding-bar a:hover { color: var(--bs-link-hover-color); } #branding-bar .fl-row-content-wrap { --py: calc(1.275rem + .3vw); padding-top: var(--py); padding-bottom: var(--py); transition: padding-top var(--transition), padding-bottom var(--transition); } #branding-bar .fl-menu .fl-menu-mobile-toggle { color: var(--bs-light); } @media (max-width: 767px) { #branding-bar .fl-col-group-equal-height { width: unset; } } @media (min-width: 1200px) { #branding-bar .fl-row-content-wrap { --py: 2.5rem; } /* shrink stuff on scroll */ .fl-theme-builder-header-scrolled #branding-bar .fl-row-content-wrap { --py: calc(2.5rem * 0.5); } .fl-theme-builder-header-scrolled #branding-bar .branding .fl-photo-content { width: 100px; transition: width var(--transition); } } #primary-menu-wrap .sub-menu { margin-left: 0; padding-bottom: 0; } #primary-menu-wrap .menu .fl-has-submenu .sub-menu { display: unset; /* overrides "none" so that we can perform simple transitions */ } /* mobile menu specific considerations */ @media (max-width: 767px) { .navbar-expand-md #primary-menu-wrap { overflow: auto; max-height: 75vh; } .navbar-expand-md #primary-menu-wrap.navbar-collapse { flex-basis: unset; flex-grow: unset; } .navbar-expand-md #primary-menu-wrap .fl-clear { display: none; clear: unset; } .navbar-expand-md #primary-menu-wrap .sub-menu { padding-left: 0; overflow: auto; max-height: 50vh; } .navbar-expand-md #primary-menu-wrap.d-mh-smo-unset #menu-primary.fl-menu-horizontal { display: unset; } } @media (min-width: 768px) { #primary-menu-wrap .sub-menu { --offset: calc(0.5 * var(--bs-gutter-x)); margin: 0 calc( var(--offset) * -1) 0 0; /* offset the below padding to align megamenu left and right edges with container width */ padding: 0 var(--offset) 0 var(--offset); /* create room for dropshadow behind megamenu */ overflow: clip; /* nix? */ background-color: unset; box-shadow: unset; height: 0; /* otherwise you can still show the megamenu by hovering where it used to be */ } #primary-menu-wrap .menu-item.mega-menu:hover .sub-menu { height: auto; padding-bottom: var(--offset); /* create room for dropshadow behind megamenu */ } #primary-menu-wrap .sub-menu > .mega-menu-content { position: relative; background-color: var(--bs-white); box-shadow: 0 1px 20px rgba(0,0,0,0.1); /* not really seeing this because parent has overflow hidden */ opacity: 0; transform: translateY(-10px); transition: all var(--transition); } #primary-menu-wrap .sub-menu > .mega-menu-content::before { --h: 20px; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: var(--h); background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); } .navbar-expand-md #primary-menu-wrap .fl-has-submenu:hover > .sub-menu > .mega-menu-content { opacity: 1; transform: translateX(0px); } .fl-col-group-equal-height.fl-col-group-align-center #primary-menu-wrap .sub-menu .fl-col-group { width: unset; } } @media (max-width: 991px) { .navbar-expand-lg #primary-menu-wrap { overflow: auto; max-height: 75vh; } .navbar-expand-lg #primary-menu-wrap.navbar-collapse { flex-basis: unset; flex-grow: unset; } .navbar-expand-lg #primary-menu-wrap .fl-clear { display: none; clear: unset; } .navbar-expand-lg #primary-menu-wrap .sub-menu { padding-left: 0; overflow: auto; max-height: 50vh; } .navbar-expand-lg #primary-menu-wrap.d-mh-smo-unset #menu-primary.fl-menu-horizontal { display: unset; } } #primary-menu-wrap .sub-menu > .mega-menu-content > a { padding: 0; } #primary-menu-bar .fl-row-content-wrap { padding-top: 0; padding-bottom: 0; background-color: rgba(var(--bs-light-rgb), 1.0); } @media (max-width: 767px) { #primary-menu-bar .fl-col-group-equal-height { width: unset; } } @media (min-width: 768px) { #primary-menu-bar .fl-row-content-wrap { background-color: rgba(var(--bs-light-rgb), 0.9); } } /* ul.menu */ #menu-primary { --link-px: 1rem; } @media (max-width: 767px) { #menu-primary > .menu-item { border-bottom: 1px solid var(--ip-gray-300); } } #menu-primary a { font-family: var(--ip-body-font-family); font-weight: 600; padding-top: 0.75rem; padding-bottom: 0.75rem; } #menu-primary a > .link-description { font-weight: 500; } @media (min-width: 768px) { #menu-primary a { padding-top: 1rem; padding-bottom: 1rem; } } #menu-primary .fl-has-submenu-container { display: flex; align-items: center; justify-content: space-between; } @media (max-width: 767px) { #menu-primary .fl-row-content { --bs-gutter-x: calc( var(--link-px) * 2); } } @media (min-width: 768px) { #menu-primary .fl-has-submenu-container { justify-content: unset; } } #menu-primary > .menu-item > a, /* no sub megamenu */ #menu-primary > .fl-has-submenu > .fl-has-submenu-container > a { text-transform: uppercase; color: rgba( var(--body-color-rgb), 1.0); transition: color var(--transition); letter-spacing: 0.08rem; font-size: 0.9rem; padding-left: var(--link-px); padding-right: var(--link-px); } /* toggle icons */ #menu-primary.fl-toggle-arrows .fl-menu-toggle:before { border-color: rgba( var(--body-color-rgb), 1.0); transition: border-color var(--transition); } #menu-primary.fl-toggle-arrows .menu-item .fl-menu-toggle { transform: translateY(0); transition: all var(--transition); } #menu-primary.fl-toggle-arrows .menu-item:hover .fl-menu-toggle { transform: translateY(3px); } #menu-primary > .fl-has-submenu > .fl-has-submenu-container > a { padding-right: calc(var(--link-px) * 0.5); width: 100%; } #menu-primary .fl-menu-toggle { position: relative; margin-top: unset; margin-right: calc(var(--link-px) * 1.5); } #menu-primary > .menu-item > a:hover, #menu-primary li.fl-has-submenu:hover > .fl-has-submenu-container > a { color: rgba( var(--body-color-rgb), 1.0); } #menu-primary:hover > .menu-item:not(:hover) > a, #menu-primary:hover li.fl-has-submenu:not(:hover) > .fl-has-submenu-container > a { color: rgba( var(--body-color-rgb), 0.35); } #menu-primary.fl-toggle-arrows:hover .fl-menu-toggle:before { border-color: rgba( var(--body-color-rgb), 1.0); transition: border-color var(--transition); } #menu-primary.fl-toggle-arrows:hover li.fl-has-submenu:not(:hover) > .fl-has-submenu-container .fl-menu-toggle:before { border-color: rgba( var(--body-color-rgb), 0.35); } /* megamenu */ #menu-primary > .menu-item .submenu .fl-col-group { display: flex; flex-wrap: wrap; } @media (max-width: 767px) { #menu-primary > .menu-item .submenu .fl-col-group { width: unset; } } #menu-primary > .menu-item .submenu .fl-col-group > .fl-col { float: unset; /* this is so stupid to have to do in 2024 */ } #menu-primary > .menu-item .submenu .fl-col-group > .fl-col:first-of-type { --bs-btn-hover-bordercolor: var(--bs-white); background-color: var(--ip-drkblue); } #menu-primary > .menu-item .submenu .fl-col-group > .fl-col > .fl-col-content { justify-content: unset; } #menu-primary > .menu-item .submenu .fl-col-group > .fl-col:first-of-type > .fl-col-content { padding-top: 1rem; padding-bottom: 1rem; } @media (min-width: 768px) { #menu-primary > .menu-item .submenu .fl-col-group > .fl-col:first-of-type > .fl-col-content { padding: 1rem; } #menu-primary > .menu-item .submenu .fl-col-group > .fl-col:not(:first-of-type) > .fl-col-content { padding-top: 0.5rem; padding-bottom: 0.5rem; } } @media (min-width: 992px) { #menu-primary > .menu-item .submenu .fl-col-group > .fl-col:first-of-type > .fl-col-content { padding: 1.5rem; } #menu-primary > .menu-item .submenu .fl-col-group > .fl-col:not(:first-of-type) > .fl-col-content { padding-top: 0.75rem; padding-bottom: 0.75rem; } } @media (min-width: 1200px) { #menu-primary > .menu-item .submenu .fl-col-group > .fl-col:first-of-type > .fl-col-content { padding: 2rem; } #menu-primary > .menu-item .submenu .fl-col-group > .fl-col:not(:first-of-type) > .fl-col-content { padding-top: 1rem; padding-bottom: 1rem; } } #menu-primary > .menu-item .submenu .fl-col-group > .fl-col:first-of-type .fl-heading { color: var(--bs-light); line-height: 1.2; } #menu-primary > .menu-item .submenu .fl-col-group > .fl-col:first-of-type .fl-heading a { padding-top: 0; padding-bottom: 0; color: rgba(var(--bs-light-rgb), 1.0); transition: color var(--transition); } #menu-primary > .menu-item .submenu .fl-col-group > .fl-col:first-of-type .fl-heading a:hover { color: rgba(var(--bs-light-rgb), 1.0); } #menu-primary > .menu-item .submenu .fl-col-group > .fl-col:first-of-type .fl-rich-text > * { line-height: 1.5; color: var(--bs-light); } #menu-primary > .menu-item .submenu .fl-col-group > .fl-col:first-of-type .fl-module-rich-text:last-child *:last-child { margin-bottom: 0; } #menu-primary > .menu-item .submenu .fl-col-group > .fl-col:first-of-type .fl-button:hover { border-color: var(--bs-btn-hover-bordercolor); } #menu-primary > .menu-item .submenu .fl-module-menu.megamenu-list .menu > .menu-item { display: block; } #menu-primary > .menu-item .submenu .megamenu-list > li > a, #menu-primary > .menu-item .submenu .fl-module-menu.megamenu-list .menu > .menu-item > a /* when using a WP menu module */ { color: var(--body-color); transition: background-color var(--transition); padding-top: 0.5rem; padding-bottom: 0.5rem; } #menu-primary > .menu-item .submenu .fl-module-menu.megamenu-list .menu > .menu-item > a { text-align: left; } @media (min-width: 768px) { #menu-primary > .menu-item .submenu .megamenu-list > li > a, #menu-primary > .menu-item .submenu .fl-module-menu.megamenu-list .menu > .menu-item a { padding: 0.75rem; } } #menu-primary > .menu-item .submenu .megamenu-list > li > a:hover, #menu-primary > .menu-item .submenu .fl-module-menu.megamenu-list .menu > .menu-item > a:hover { background-color: var(--ip-ltgray); } #menu-primary > .menu-item .submenu .megamenu-list > li > a > .link-title, #menu-primary > .menu-item .submenu .fl-module-menu.megamenu-list .menu > .menu-item > a > .link-title { color: var(--ip-drkblue); display: inline-block; margin-bottom: 0.125rem; padding-bottom: 0.35rem; transition: color var(--transition); } #menu-primary > .menu-item .submenu .megamenu-list > li > a:hover > .link-title, #menu-primary > .menu-item .submenu .fl-module-menu.megamenu-list .menu > .menu-item > a:hover > .link-title { color: var(--ip-blue); } #menu-primary > .menu-item .submenu .megamenu-list > li > a > .link-description, #menu-primary > .menu-item .submenu .fl-module-menu.megamenu-list .menu > .menu-item > a > .link-description { line-height: 1.5; font-family: var(--ip-body-font-family); font-size: 0.85rem; line-height: 1.3; } /* END page header ------------------------------------ */ /* START CTA ========================================== */ #cta, .cta { margin-top: 0 !important; margin-bottom: 0 !important; } #cta, .cta, #cta .fl-heading, .cta .fl-heading { color: var(--bs-white); } #cta .fl-module-heading:first-child .fl-heading, .cta .fl-module-heading:first-child .fl-heading { font-weight: 400; } #cta .fl-row-content-wrap, .cta .fl-row-content-wrap { /* background: var(--ip-drkblue) url('imgs/bgp-popdots_navy.svg') no-repeat center center; */ background-color: var(--ip-drkblue); background-image: url('imgs/bgp-popdots_navy.svg'); background-repeat: no-repeat; background-position: center center; background-size: cover; padding-top: var(--sctn-py); padding-bottom: var(--sctn-py); } .cta-left .fl-row-content-wrap { background-image: url('imgs/bgp-popdots_navy_left.svg'); background-position: bottom left; background-size: auto 100%; } .cta-left.cta-navy95 .fl-row-content-wrap { background-color: var(--ip-navy-95); } .cta-left.cta-navy90 .fl-row-content-wrap { background-color: var(--ip-navy-90); } .cta-left.cta-navy85 .fl-row-content-wrap { background-color: var(--ip-navy-85); } .cta-2col .fl-row-content > .fl-module-box { margin-right: calc(var(--bs-gutter-x)* -0.5) !important; margin-left: calc(var(--bs-gutter-x)* -0.5) !important; } .cta-2col .fl-row-content > .fl-module-box > .fl-module-box { padding-right: calc(var(--bs-gutter-x) * 0.5) !important; padding-left: calc(var(--bs-gutter-x) * 0.5) !important; margin-top: var(--bs-gutter-y); } #cta .fl-module-button:last-child, .cta .fl-module-button:last-child { margin-top: 1rem; transition: margin-top var(--transition); } @media (min-width:992px) { #cta .fl-module-button:last-child, .cta .fl-module-button:last-child { margin-top: 2rem; } } @media (min-width:1200px) { #cta .fl-module-button:last-child, .cta .fl-module-button:last-child { margin-top: 3rem; } } /* END CTA -------------------------------------------- */ /* START page footer ================================== */ main#fl-main-content + footer { --sctn-pt: 1rem; --sctn-pb: 1rem; --bgc: var(--ip-charcoal-rgb); background: linear-gradient(180deg, rgba(var(--bgc),1) 50%, rgba(var(--bgc),0.8) 100%); color: var(--bs-light); } main#fl-main-content + footer .fl-heading { color: var(--bs-light); } main#fl-main-content + footer a, main#fl-main-content + footer a:visited { color: var(--bs-light); } main#fl-main-content + footer a:hover { color: var(--bs-light); text-decoration: underline; } main#fl-main-content + footer a[href^="tel"] { font-weight: bold; } main#fl-main-content + footer > .fl-row .fl-row-content { padding-top: var(--sctn-pt); padding-bottom: var(--sctn-pb); } main#fl-main-content + footer > .fl-row:first-child .fl-row-content { --sctn-pt: calc( var(--sctn-my) * 0.5 ); border-bottom: 1px solid rgba( var(--bs-white-rgb),0.5 ); } main#fl-main-content + footer > .fl-row:last-child .fl-row-content { border-top: 1px solid rgba( var(--bs-white-rgb),0.5 ); --sctn-pb: calc( var(--sctn-my) * 0.5 ); } main#fl-main-content + footer > .fl-row:not(:first-child, :last-child) .fl-module-content > *:last-child { margin-bottom: 0 !important; } main#fl-main-content + footer > .fl-row:not(:first-child, :last-child) .fl-module-content > div > *:last-child { margin-bottom: 0; } #menu-footer { display: flex; width: 100%; } #menu-footer::before, #menu-footer::after { display: none; content: unset; } @media (max-width: 767px) { #menu-footer { flex-wrap: wrap; } } @media (min-width: 768px) { #menu-footer { justify-content: space-between; } } #menu-footer .menu-item { display: unset; } #menu-footer a, #menu-footer a:hover { color: rgba( var(--bs-light-rgb), 1.0); transition: color var(--transition); } #menu-footer a { --py: 0.5rem; --pe: 1rem; padding-top: var(--py); padding-bottom: var(--py); padding-right: var(--pe); text-transform: uppercase; font-family: var(--ip-body-font-family); letter-spacing: 0.125rem; font-size: calc( var(--bs-body-font-size) * 0.8); } #menu-footer .menu-item:last-child a { padding-right: 0; } #menu-footer a:hover { text-decoration: none !important; } #menu-footer:hover .menu-item:not(:hover) > a { color: rgba( var(--bs-light-rgb), 0.35); } /* footer middle section, 3 cols */ #site-footer-description .fl-col-group { display: flex; } @media (max-width: 575px) { #site-footer-description .fl-col-group { flex-wrap: wrap; } } #site-footer-description .fl-col { float: unset; } @media (min-width: 576px) and (max-width: 767px) { #site-footer-description .fl-col-group { flex-wrap: wrap; } } @media (min-width: 992px) { #site-footer-description .fl-col:first-child, #site-footer-description .fl-col:last-child { flex: 0 0 auto; width: auto; } #site-footer-description .fl-col:not(:first-child, :last-child) { width: 60%; } #site-footer-description .fl-col:last-child { margin-left: auto; } } #site-footer-copyright .fl-rich-text > * { margin-bottom: 0; } #copyright-menu { font-size: 0.85rem; } @media (max-width: 767px) { #copyright-menu { text-align: center; } } #copyright-menu .list-inline-item:not(:last-child) { padding-right: 0.75rem; margin-right: 0.5rem; position: relative; } #copyright-menu .list-inline-item:not(:last-child):after { content: ""; display: block; width: 1px; background-color: rgba( var(--bs-light-rgb), 0.4 ); height: 0.8rem; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } @media (max-width: 767px) { #copyright-menu .list-inline-item { padding-top: 0.25rem; padding-bottom: 0.25rem; } } #menu-social a { padding: 0.125rem 0.35rem; color: rgba( var(--bs-light-rgb), 1.0); transition: color var(--transition); } #menu-social a:hover { color: rgba( var(--bs-light-rgb), 1.0); } #menu-social:hover li:not(:hover) > a { color: rgba( var(--bs-light-rgb), 0.5); } /* ---> START footer reveal effect <--- */ /* via: https://css-tricks.com/the-slideout-footer/ */ @media (max-width:767px) { /* the footer reveal effect has some layering issues without specifying a z-index */ .fl-page > header:not(.fl-theme-builder-header-scrolled)[data-sticky-breakpoint="medium"]:first-child { position: relative; z-index: 1; } } #fl-main-content /* main page content */ { /* make sure to cover the screen */ min-height: 100vh; /* need a solid bg to hide the footer */ background: white; /* put on top */ position: relative; z-index: 1; /* padding-bottom: var(--sctn-py); */ } #fl-main-content + footer { /* place on the bottom */ position: sticky; bottom: 0; left: 0; width: 100%; } /* using the "footer reveal" effect, pages with less content will have an empty white area prior to the footer which is undesirable the below is a fix for this situation note: vertical margins no longer collapse */ #fl-main-content > .fl-builder-content { min-height: 100vh; display: flex; flex-direction: column; } #fl-main-content > .fl-builder-content > .fl-row { width: 100%; } /* set sctn-mt-auto as needed as opposed to this, there are too many exceptions for this to be useful */ /* #fl-main-content > .fl-builder-content > .fl-row:last-child:not(#archive-list, .submenu, #related-content, .single-team-member, #cta) { margin-top: auto !important; } */ /* n+4 = select all except the first 4 elements */ #fl-main-content > .fl-builder-content > .fl-row-bg-none:not([class*="bgc-"]) + .fl-row:last-child:nth-child(n+4), .fl-builder-template-template-default #fl-main-content > .fl-builder-content > .fl-row-bg-none:not([class*="bgc-"]):only-child /* for saved rows editing */ { margin-top: var(--sctn-my) !important; } /* for saved rows editing */ .fl-builder-template-template-default #fl-main-content > .fl-builder-content > .fl-row[class*="bgc-"]:only-child { margin-top: 0 !important; } #fl-main-content > .fl-builder-content > .fl-row-bg-none:last-child:not(#cta, [class*="bgc-"]) { margin-bottom: var(--sctn-my); } /* END page footer ------------------------------------ */ /* START utilities ==================================== */ .shadow { box-shadow: var(--bs-box-shadow) !important; } .hide-labels .nav-label, .hide-icons .fab { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: clip; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (max-width: 575px) { .menu-smo-stack .menu { flex-direction: column; } .menu-smo-stack .menu-item > a { padding: calc( var(--bs-gutter-x) * .5); } } @media (min-width: 576px) { .fl-menu-horizontal.menu-smo-stack .menu-item:first-child > a { padding-left: 0; } .fl-menu-horizontal.menu-smo-stack .menu-item:last-child > a { padding-right: 0; } } /* END utilities ---------------------------------------------- */