/** * Base CSS used by the builder's layout, including rows * and columns. Any module specific global CSS should be * included in fl-builder-layout-modules.css. */ /* Grid ------------------------------------------------------ */ .fl-builder-content *, .fl-builder-content *:before, .fl-builder-content *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fl-row:before, .fl-row:after, .fl-row-content:before, .fl-row-content:after, .fl-col-group:before, .fl-col-group:after, .fl-col:before, .fl-col:after, .fl-module:not([data-accepts], .fl-ds-block):before, .fl-module:not([data-accepts], .fl-ds-block):after, .fl-module-content:before, .fl-module-content:after { display: table; content: " "; } .fl-row:after, .fl-row-content:after, .fl-col-group:after, .fl-col:after, .fl-module:not([data-accepts], .fl-ds-block):after, .fl-module-content:after { clear: both; } .fl-clear { clear: both; } /* Rows ------------------------------------------------------ */ .fl-row, .fl-row-content { margin-left: auto; margin-right: auto; min-width: 0; } .fl-row-content-wrap { position: relative; } /* Photo Bg */ .fl-builder-mobile .fl-row-bg-photo .fl-row-content-wrap { background-attachment: scroll; } /* Video and Embed Code Bg */ .fl-row-bg-video, .fl-row-bg-video .fl-row-content, .fl-row-bg-embed, .fl-row-bg-embed .fl-row-content { position: relative; } .fl-row-bg-video .fl-bg-video, .fl-row-bg-embed .fl-bg-embed-code { bottom: 0; left: 0; overflow: hidden; position: absolute; right: 0; top: 0; } .fl-row-bg-video .fl-bg-video video, .fl-row-bg-embed .fl-bg-embed-code video { bottom: 0; left: 0px; max-width: none; position: absolute; right: 0; top: 0px; } .fl-row-bg-video .fl-bg-video video { min-width: 100%; min-height: 100%; width: auto; height: auto; } .fl-row-bg-video .fl-bg-video iframe, .fl-row-bg-embed .fl-bg-embed-code iframe { pointer-events: none; width: 100vw; height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */ max-width: none; min-height: 100vh; min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */ position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ transform: translate(-50%, -50%); } .fl-bg-video-fallback { background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; bottom: 0px; left: 0px; position: absolute; right: 0px; top: 0px; } /* Slideshow Bg */ .fl-row-bg-slideshow, .fl-row-bg-slideshow .fl-row-content { position: relative; } .fl-row .fl-bg-slideshow { bottom: 0; left: 0; overflow: hidden; position: absolute; right: 0; top: 0; z-index: 0; } .fl-builder-edit .fl-row .fl-bg-slideshow * { bottom: 0; height: auto !important; left: 0; position: absolute !important; right: 0; top: 0; } /* Row Bg Overlay */ .fl-row-bg-overlay .fl-row-content-wrap:after { border-radius: inherit; content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; } .fl-row-bg-overlay .fl-row-content { position: relative; z-index: 1; } /* Full Height Rows */ .fl-row-default-height .fl-row-content-wrap, .fl-row-custom-height .fl-row-content-wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; min-height: 100vh; } .fl-row-overlap-top .fl-row-content-wrap { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 100%; } .fl-row-default-height .fl-row-content-wrap, .fl-row-custom-height .fl-row-content-wrap { min-height: 0; } .fl-row-default-height .fl-row-content, .fl-row-full-height .fl-row-content, .fl-row-custom-height .fl-row-content { -webkit-box-flex: 1 1 auto; -moz-box-flex: 1 1 auto; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .fl-row-default-height .fl-row-full-width.fl-row-content, .fl-row-full-height .fl-row-full-width.fl-row-content, .fl-row-custom-height .fl-row-full-width.fl-row-content { max-width: 100%; width: 100%; } /* Full height align center */ .fl-row-default-height.fl-row-align-center .fl-row-content-wrap, .fl-row-full-height.fl-row-align-center .fl-row-content-wrap, .fl-row-custom-height.fl-row-align-center .fl-row-content-wrap { -webkit-align-items: center; -webkit-box-align: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-align: center; -ms-flex-pack: center; justify-content: center; align-items: center; } /* Full height align bottom */ .fl-row-default-height.fl-row-align-bottom .fl-row-content-wrap, .fl-row-full-height.fl-row-align-bottom .fl-row-content-wrap, .fl-row-custom-height.fl-row-align-bottom .fl-row-content-wrap { -webkit-align-items: flex-end; -webkit-justify-content: flex-end; -webkit-box-align: end; -webkit-box-pack: end; -ms-flex-align: end; -ms-flex-pack: end; justify-content: flex-end; align-items: flex-end; } /* Column Groups ------------------------------------------------------ */ .fl-col-group-equal-height { display: flex; flex-wrap: wrap; width: 100%; } .fl-col-group-equal-height.fl-col-group-has-child-loading { flex-wrap: nowrap; } .fl-col-group-equal-height .fl-col, .fl-col-group-equal-height .fl-col-content { display: flex; flex: 1 1 auto; } .fl-col-group-equal-height .fl-col-content { flex-direction: column; flex-shrink: 1; min-width: 1px; max-width: 100%; width: 100%; } .fl-col-group-equal-height:before, .fl-col-group-equal-height .fl-col:before, .fl-col-group-equal-height .fl-col-content:before, .fl-col-group-equal-height:after, .fl-col-group-equal-height .fl-col:after, .fl-col-group-equal-height .fl-col-content:after{ content: none; } /* Equal height align top */ .fl-col-group-nested.fl-col-group-equal-height.fl-col-group-align-top .fl-col-content, .fl-col-group-equal-height.fl-col-group-align-top .fl-col-content { justify-content: flex-start; } /* Equal height align center */ .fl-col-group-nested.fl-col-group-equal-height.fl-col-group-align-center .fl-col-content, .fl-col-group-equal-height.fl-col-group-align-center .fl-col-content { justify-content: center; } /* Equal height align bottom */ .fl-col-group-nested.fl-col-group-equal-height.fl-col-group-align-bottom .fl-col-content, .fl-col-group-equal-height.fl-col-group-align-bottom .fl-col-content { justify-content: flex-end; } .fl-col-group-equal-height.fl-col-group-align-center .fl-col-group { width: 100%; } /* Columns ------------------------------------------------------ */ .fl-col { float: left; min-height: 1px; } /* Column Bg Overlay */ .fl-col-bg-overlay .fl-col-content { position: relative; } .fl-col-bg-overlay .fl-col-content:after { border-radius: inherit; content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; } .fl-col-bg-overlay .fl-module { position: relative; z-index: 2; } /* Templates ------------------------------------------------------ */ .single:not(.woocommerce).single-fl-builder-template .fl-content { width: 100%; } /* Shapes & Patterns ------------------------------------------------------- */ .fl-builder-layer { position: absolute; top:0; left:0; right: 0; bottom: 0; z-index: 0; pointer-events: none; overflow: hidden; } .fl-builder-shape-layer { z-index: 0; } .fl-builder-shape-layer.fl-builder-bottom-edge-layer { z-index: 1; } .fl-row-bg-overlay .fl-builder-shape-layer { z-index: 1; } .fl-row-bg-overlay .fl-builder-shape-layer.fl-builder-bottom-edge-layer { z-index: 2; } .fl-row-has-layers .fl-row-content { z-index: 1; } .fl-row-bg-overlay .fl-row-content { z-index: 2; } .fl-builder-layer > * { display: block; position: absolute; top:0; left:0; width: 100%; } .fl-builder-layer + .fl-row-content { position: relative; } .fl-builder-layer .fl-shape { fill: #aaa; stroke: none; stroke-width: 0; width:100%; } /** Fix ipad parallax issue on safari https://core.trac.wordpress.org/ticket/48802 https://core.trac.wordpress.org/ticket/49285 https://github.com/WordPress/gutenberg/issues/17718 */ @supports (-webkit-touch-callout: inherit) { .fl-row.fl-row-bg-parallax .fl-row-content-wrap, .fl-row.fl-row-bg-fixed .fl-row-content-wrap { background-position: center !important; background-attachment: scroll !important; } } @supports (-webkit-touch-callout: none) { .fl-row.fl-row-bg-fixed .fl-row-content-wrap { background-position: center !important; background-attachment: scroll !important; } } /** * Base CSS used by all (or many) modules. This file should * not contain any generic layout CSS that doesn't apply to * modules. That belongs in fl-builder-layout.css. */ /* Utilities ------------------------------------------------------ */ .fl-clearfix:before, .fl-clearfix:after { display: table; content: " "; } .fl-clearfix:after { clear: both; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Buttons ------------------------------------------------------ */ .fl-builder-content .fl-button:is(a, button), .fl-builder-content a.fl-button:visited { border-radius: 4px; display: inline-block; font-size: 16px; font-weight: normal; line-height: 18px; padding: 12px 24px; text-decoration: none; text-shadow: none; cursor: pointer; } .fl-builder-content .fl-button:hover { text-decoration: none; } .fl-builder-content .fl-button:active { position: relative; top: 1px; } .fl-builder-content .fl-button-width-full .fl-button { width: 100%; display: block; text-align: center; } .fl-builder-content .fl-button-width-custom .fl-button { display: inline-block; text-align: center; max-width: 100%; } .fl-builder-content .fl-button-left { text-align: left; } .fl-builder-content .fl-button-center { text-align: center; } .fl-builder-content .fl-button-right { text-align: right; } .fl-builder-content .fl-button i { font-size: 1.3em; height: auto; margin-right:8px; vertical-align: middle; width: auto; } .fl-builder-content .fl-button i.fl-button-icon-after { margin-left: 8px; margin-right: 0; } .fl-builder-content .fl-button-has-icon .fl-button-text { vertical-align: middle; } /* Icons ------------------------------------------------------ */ .fl-icon-wrap { display: inline-block; } .fl-icon { display: table-cell; vertical-align: middle; } .fl-icon a { text-decoration: none; } .fl-icon i { float: right; height: auto; width: auto; } .fl-icon i:before { border: none !important; height: auto; width: auto; } .fl-icon-text { display: table-cell; text-align: left; padding-left: 15px; vertical-align: middle; } .fl-icon-text-empty { display: none; } .fl-icon-text *:last-child { margin: 0 !important; padding: 0 !important; } .fl-icon-text a { text-decoration: none; } .fl-icon-text span { display: block; } .fl-icon-text span.mce-edit-focus { min-width: 1px; } /* Photos ------------------------------------------------------ */ .fl-module img { max-width: 100%; } .fl-photo { line-height: 0; position: relative; } .fl-photo-align-left { text-align: left; } .fl-photo-align-center { text-align: center; } .fl-photo-align-right { text-align: right; } .fl-photo-content { display: inline-block; line-height: 0; position: relative; max-width: 100%; } .fl-photo-img-svg { width: 100%; } .fl-photo-content img { display: inline; height: auto; max-width: 100%; } .fl-photo-crop-circle img { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .fl-photo-caption { font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; } .fl-photo-caption-below { padding-bottom: 20px; padding-top: 10px; } .fl-photo-caption-hover { background: rgba(0,0,0,0.7); bottom: 0; color: #fff; left: 0; opacity: 0; filter: alpha(opacity = 0); padding: 10px 15px; position: absolute; right: 0; -webkit-transition:opacity 0.3s ease-in; -moz-transition:opacity 0.3s ease-in; transition:opacity 0.3s ease-in; } .fl-photo-content:hover .fl-photo-caption-hover { opacity: 100; filter: alpha(opacity = 100); } /* Pagination ------------------------------------------------------ */ .fl-builder-pagination, .fl-builder-pagination-load-more { padding: 40px 0; } .fl-builder-pagination ul.page-numbers { list-style: none; margin: 0; padding: 0; text-align: center; } .fl-builder-pagination li { display: inline-block; list-style: none; margin: 0; padding: 0; } .fl-builder-pagination li a.page-numbers, .fl-builder-pagination li span.page-numbers { border: 1px solid #e6e6e6; display: inline-block; padding: 5px 10px; margin: 0 0 5px; } .fl-builder-pagination li a.page-numbers:hover, .fl-builder-pagination li span.current { background: #f5f5f5; text-decoration: none; } /* Slideshows ------------------------------------------------------ */ .fl-slideshow, .fl-slideshow * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .fl-slideshow .fl-slideshow-image img { max-width: none !important; } .fl-slideshow-social { line-height: 0 !important; } .fl-slideshow-social * { margin: 0 !important; } /* Sliders ------------------------------------------------------ */ .fl-builder-content .bx-wrapper .bx-viewport { background: transparent; border: none; box-shadow: none; left: 0; } /* Lightbox ------------------------------------------------------ */ .mfp-wrap button.mfp-arrow, .mfp-wrap button.mfp-arrow:active, .mfp-wrap button.mfp-arrow:hover, .mfp-wrap button.mfp-arrow:focus { background: transparent !important; border: none !important; outline: none; position: absolute; top: 50%; box-shadow: none !important; } .mfp-wrap .mfp-close, .mfp-wrap .mfp-close:active, .mfp-wrap .mfp-close:hover, .mfp-wrap .mfp-close:focus { background: transparent !important; border: none !important; outline: none; position: absolute; top: 0; box-shadow: none !important; } .admin-bar .mfp-wrap .mfp-close, .admin-bar .mfp-wrap .mfp-close:active, .admin-bar .mfp-wrap .mfp-close:hover, .admin-bar .mfp-wrap .mfp-close:focus { top: 32px!important; } img.mfp-img { padding: 0; } .mfp-counter { display: none; } .mfp-wrap .mfp-preloader.fa { font-size: 30px; } /* Form Fields ------------------------------------------------------ */ .fl-form-field { margin-bottom: 15px; } .fl-form-field input.fl-form-error { border-color: #DD6420; } .fl-form-error-message { clear: both; color: #DD6420; display: none; padding-top: 8px; font-size: 12px; font-weight: lighter; } .fl-form-button-disabled { opacity: 0.5; } /* Animations ------------------------------------------------------ */ .fl-animation { opacity: 0; } body.fl-no-js .fl-animation { opacity: 1; } .fl-builder-preview .fl-animation, .fl-builder-edit .fl-animation, .fl-animated { opacity: 1; } .fl-animated { animation-fill-mode: both; } /* Button Icon Animation */ .fl-button.fl-button-icon-animation i { width: 0 !important; opacity: 0; transition: all 0.2s ease-out; } .fl-button.fl-button-icon-animation:hover i { opacity: 1 !important; } .fl-button.fl-button-icon-animation i.fl-button-icon-after { margin-left: 0px !important; } .fl-button.fl-button-icon-animation:hover i.fl-button-icon-after { margin-left: 10px !important; } .fl-button.fl-button-icon-animation i.fl-button-icon-before { margin-right: 0 !important; } .fl-button.fl-button-icon-animation:hover i.fl-button-icon-before { margin-right: 20px !important; margin-left: -10px; } /* Default button colors for non Beaver Builder themes. ------------------------------------------------------ */ .fl-builder-content .fl-button:is(a, button), .fl-builder-content a.fl-button:visited { background: #fafafa; border: 1px solid #ccc; color: #333; } .fl-builder-content .fl-button:is(a, button) *, .fl-builder-content a.fl-button:visited * { color: #333; }@media (max-width: 1280px) { /** * Styles needed for the large breakpoint. */ }@media (max-width: 992px) { /* Columns ------------------------------------------------------ */ /* Reversed Responsive Stacking */ .fl-col-group.fl-col-group-medium-reversed { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; flex-direction: row-reverse; } }@media (max-width: 768px) { /* Rows ------------------------------------------------------ */ .fl-row-content-wrap { background-attachment: scroll !important; } .fl-row-bg-parallax .fl-row-content-wrap { background-attachment: scroll !important; background-position: center center !important; } /* Column Groups ------------------------------------------------------ */ /* Equal Heights */ .fl-col-group.fl-col-group-equal-height { display: block; } .fl-col-group.fl-col-group-equal-height.fl-col-group-custom-width { display: -webkit-box; display: -webkit-flex; display: flex; } /* Reversed Responsive Stacking */ .fl-col-group.fl-col-group-responsive-reversed { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; flex-direction: row-reverse; } .fl-col-group.fl-col-group-responsive-reversed .fl-col:not(.fl-col-small-custom-width) { flex-basis: 100%; width: 100% !important; } .fl-col-group.fl-col-group-medium-reversed:not(.fl-col-group-responsive-reversed) { display: unset; display: unset; -webkit-flex-wrap: unset; flex-wrap: unset; flex-direction: unset; } /* Columns ------------------------------------------------------ */ .fl-col { clear: both; float: none; margin-left: auto; margin-right: auto; width: auto !important; } .fl-col-small:not(.fl-col-small-full-width) { max-width: 400px; } .fl-block-col-resize { display:none; } /* Rows ------------------------------------------------------ */ .fl-row[data-node] .fl-row-content-wrap { margin: 0; padding-left: 0; padding-right: 0; } .fl-row[data-node] .fl-bg-video, .fl-row[data-node] .fl-bg-slideshow { left: 0; right: 0; } /* Columns ------------------------------------------------------ */ .fl-col[data-node] .fl-col-content { margin: 0; padding-left: 0; padding-right: 0; } }@media (min-width: 1281px) { html .fl-visible-large:not(.fl-visible-desktop), html .fl-visible-medium:not(.fl-visible-desktop), html .fl-visible-mobile:not(.fl-visible-desktop) { display: none; } } @media (min-width: 993px) and (max-width: 1280px) { html .fl-visible-desktop:not(.fl-visible-large), html .fl-visible-medium:not(.fl-visible-large), html .fl-visible-mobile:not(.fl-visible-large) { display: none; } } @media (min-width: 769px) and (max-width: 992px) { html .fl-visible-desktop:not(.fl-visible-medium), html .fl-visible-large:not(.fl-visible-medium), html .fl-visible-mobile:not(.fl-visible-medium) { display: none; } } @media (max-width: 768px) { html .fl-visible-desktop:not(.fl-visible-mobile), html .fl-visible-large:not(.fl-visible-mobile), html .fl-visible-medium:not(.fl-visible-mobile) { display: none; } } .fl-col-content { display: flex; flex-direction: column; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .fl-row-fixed-width { max-width: 1240px; } .fl-builder-content > .fl-module-box { margin: 0; } .fl-row-content-wrap { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 96px; padding-right: 56px; padding-bottom: 96px; padding-left: 56px; } .fl-module-content, .fl-module:where(.fl-module:not(:has(> .fl-module-content))) { margin-top: 20px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; } @media(max-width: 992px) { .fl-row[data-node] > .fl-row-content-wrap { padding-top: 72px; padding-right: 32px; padding-bottom: 72px; padding-left: 32px; } } @media(max-width: 768px) { .fl-row[data-node] > .fl-row-content-wrap { padding-top: 48px; padding-right: 20px; padding-bottom: 48px; padding-left: 20px; } } :root { --fl-global-navy: #001621; --fl-global-sable: #624a3e; --fl-global-cream: #FFF6F0; --fl-global-powder-blue: #CBDDE8; --fl-global-sand: #e8e0d5; --fl-global-terracotta: #9a4121; --fl-global-blush: #EED8E1; --fl-global-tan: #D8BDA8; --fl-global-ink-mid: #022534; --fl-global-espresso: #2E211A; --fl-global-chocolate: #3D2B1F; --fl-global-ink-deep: #00121C; --fl-global-text-font-family: gotham, Helvetica, sans-serif; --fl-global-text-font-weight: 400; --fl-global-text-font-size: 16px; --fl-global-text-line-height: 1.65; --fl-global-text-letter-spacing: 0.02em; --fl-global-h1-font-family: bodoni-pt-variable, Georgia, serif; --fl-global-h1-font-weight: 400; --fl-global-h1-font-size: 92px; --fl-global-h1-line-height: 1.02; --fl-global-h1-letter-spacing: -0.014em; --fl-global-h1-font-size-medium: 64px; --fl-global-h1-font-size-responsive: 48px; --fl-global-h2-font-family: bodoni-pt-variable, Georgia, serif; --fl-global-h2-font-weight: 400; --fl-global-h2-font-size: 72px; --fl-global-h2-line-height: 1.06; --fl-global-h2-letter-spacing: -0.004em; --fl-global-h2-font-size-medium: 52px; --fl-global-h2-font-size-responsive: 40px; --fl-global-h3-font-family: bodoni-pt-variable, Georgia, serif; --fl-global-h3-font-weight: 400; --fl-global-h3-font-size: 30px; --fl-global-h3-line-height: 1.1; --fl-global-h3-letter-spacing: -0.01em; --fl-global-h3-font-size-medium: 26px; --fl-global-h3-font-size-responsive: 22px; --fl-global-h4-font-family: bodoni-pt-variable, Georgia, serif; --fl-global-h4-font-weight: 400; --fl-global-h4-font-size: 24px; --fl-global-h4-line-height: 1.14; --fl-global-h4-letter-spacing: 0em; --fl-global-h4-font-size-medium: 22px; --fl-global-h4-font-size-responsive: 20px; --fl-global-h5-font-family: gotham, Helvetica, sans-serif; --fl-global-h5-font-weight: 400; --fl-global-h5-font-size: 21px; --fl-global-h5-line-height: 1.55; --fl-global-h5-letter-spacing: 0.01em; --fl-global-h5-font-size-medium: 19px; --fl-global-h5-font-size-responsive: 17px; --fl-global-h6-font-family: gotham, Helvetica, sans-serif; --fl-global-h6-font-weight: 700; --fl-global-h6-font-size: 12px; --fl-global-h6-line-height: 1.4; --fl-global-h6-letter-spacing: 0.22em; --fl-global-h6-text-transform: uppercase; --fl-global-button-color: var(--fl-global-cream); --fl-global-button-hover-color: #FFF6F0; --fl-global-button-background: var(--fl-global-ink-mid); --fl-global-button-hover-background: #001621; --fl-global-button-font-family: gotham, Helvetica, sans-serif; --fl-global-button-font-weight: 700; --fl-global-button-font-size: 15.6px; --fl-global-button-line-height: 16px; --fl-global-button-letter-spacing: 0.035em; --fl-global-button-text-transform: uppercase; --fl-global-button-border-style: solid; --fl-global-button-background-clip: border-box; --fl-global-button-border-color: var(--fl-global-ink-mid); --fl-global-button-border-top-width: 1px; --fl-global-button-border-right-width: 1px; --fl-global-button-border-bottom-width: 1px; --fl-global-button-border-left-width: 1px; --fl-global-button-border-top-left-radius: 4px; --fl-global-button-border-top-right-radius: 4px; --fl-global-button-border-bottom-left-radius: 4px; --fl-global-button-border-bottom-right-radius: 4px; } .fl-builder-content:not(.fl-builder-empty) { font-family: gotham, Helvetica, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.65; letter-spacing: 0.02em; } .fl-builder-content h1, .fl-builder-content h2, .fl-builder-content h3, .fl-builder-content h4, .fl-builder-content h5, .fl-builder-content h6, .fl-builder-content p:where([data-pardee-as="h5"], [data-pardee-as="h5"] > .fl-module-content > *), .fl-builder-content p:where([data-pardee-as="h6"], [data-pardee-as="h6"] > .fl-module-content > *) { font-family: bodoni-pt-variable, Georgia, serif; font-weight: 400; line-height: 1.06; letter-spacing: -0.004em; } .fl-builder-content h1 { font-family: bodoni-pt-variable, Georgia, serif; font-weight: 400; font-size: 92px; line-height: 1.02; letter-spacing: -0.014em; } .fl-builder-content h2 { font-family: bodoni-pt-variable, Georgia, serif; font-weight: 400; font-size: 72px; line-height: 1.06; letter-spacing: -0.004em; } .fl-builder-content h3 { font-family: bodoni-pt-variable, Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: -0.01em; } .fl-builder-content h4 { font-family: bodoni-pt-variable, Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.14; letter-spacing: 0em; } .fl-builder-content h5, .fl-builder-content p:where([data-pardee-as="h5"], [data-pardee-as="h5"] > .fl-module-content > *) { font-family: gotham, Helvetica, sans-serif; font-weight: 400; font-size: 21px; line-height: 1.55; letter-spacing: 0.01em; } .fl-builder-content h6, .fl-builder-content p:where([data-pardee-as="h6"], [data-pardee-as="h6"] > .fl-module-content > *) { font-family: gotham, Helvetica, sans-serif; font-weight: 700; font-size: 12px; line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase; } .fl-builder-content button:not(.fl-content-ui-button), .fl-builder-content input[type=button], .fl-builder-content input[type=submit], .fl-builder-content .fl-button:is(a, button), .fl-builder-content button:not(.fl-content-ui-button) *, .fl-builder-content input[type=button] *, .fl-builder-content input[type=submit] *, .fl-builder-content .fl-button:is(a, button) *, .fl-builder-content button:visited, .fl-builder-content input[type=button]:visited, .fl-builder-content input[type=submit]:visited, .fl-builder-content a.fl-button:visited, .fl-builder-content button:visited *, .fl-builder-content input[type=button]:visited *, .fl-builder-content input[type=submit]:visited *, .fl-builder-content a.fl-button:visited *, .fl-page .fl-builder-content button:not(.fl-content-ui-button), .fl-page .fl-builder-content input[type=button], .fl-page .fl-builder-content input[type=submit], .fl-page .fl-builder-content .fl-button:is(a, button), .fl-page .fl-builder-content button:not(.fl-content-ui-button) *, .fl-page .fl-builder-content input[type=button] *, .fl-page .fl-builder-content input[type=submit] *, .fl-page .fl-builder-content .fl-button:is(a, button) *, .fl-page .fl-builder-content button:visited, .fl-page .fl-builder-content input[type=button]:visited, .fl-page .fl-builder-content input[type=submit]:visited, .fl-page .fl-builder-content a.fl-button:visited, .fl-page .fl-builder-content button:visited *, .fl-page .fl-builder-content input[type=button]:visited *, .fl-page .fl-builder-content input[type=submit]:visited *, .fl-page .fl-builder-content a.fl-button:visited * { color: var(--fl-global-cream); } .fl-builder-content button:not(.fl-content-ui-button):hover, .fl-builder-content input[type=button]:hover, .fl-builder-content input[type=submit]:hover, .fl-builder-content .fl-button:is(a, button):hover, .fl-builder-content button:not(.fl-content-ui-button):hover *, .fl-builder-content input[type=button]:hover *, .fl-builder-content input[type=submit]:hover *, .fl-builder-content .fl-button:is(a, button):hover *, .fl-page .fl-builder-content button:not(.fl-content-ui-button):hover, .fl-page .fl-builder-content input[type=button]:hover, .fl-page .fl-builder-content input[type=submit]:hover, .fl-page .fl-builder-content .fl-button:is(a, button):hover, .fl-page .fl-builder-content button:not(.fl-content-ui-button):hover *, .fl-page .fl-builder-content input[type=button]:hover *, .fl-page .fl-builder-content input[type=submit]:hover *, .fl-page .fl-builder-content .fl-button:is(a, button):hover * { color: #FFF6F0; } .fl-builder-content .fl-module-content:not(:has(.fl-inline-editor)) button:not(.fl-content-ui-button), .fl-builder-content input[type=button], .fl-builder-content input[type=submit], .fl-builder-content .fl-button:is(a, button), .fl-builder-content button:visited, .fl-builder-content input[type=button]:visited, .fl-builder-content input[type=submit]:visited, .fl-builder-content a.fl-button:visited, .fl-page .fl-builder-content .fl-module-content:not(:has(.fl-inline-editor)) button:not(.fl-content-ui-button), .fl-page .fl-builder-content input[type=button], .fl-page .fl-builder-content input[type=submit], .fl-page .fl-builder-content .fl-button:is(a, button), .fl-page .fl-builder-content button:visited, .fl-page .fl-builder-content input[type=button]:visited, .fl-page .fl-builder-content input[type=submit]:visited, .fl-page .fl-builder-content a.fl-button:visited { background-color: var(--fl-global-ink-mid); } .fl-builder-content .fl-module-content:not(:has(.fl-inline-editor)) button:not(.fl-content-ui-button):hover, .fl-builder-content input[type=button]:hover, .fl-builder-content input[type=submit]:hover, .fl-builder-content .fl-button:is(a, button):hover, .fl-page .fl-builder-content .fl-module-content:not(:has(.fl-inline-editor)) button:not(.fl-content-ui-button):hover, .fl-page .fl-builder-content input[type=button]:hover, .fl-page .fl-builder-content input[type=submit]:hover, .fl-page .fl-builder-content .fl-button:is(a, button):hover { background-color: #001621; } .fl-builder-content button:not(.fl-content-ui-button), .fl-builder-content input[type=button], .fl-builder-content input[type=submit], .fl-builder-content .fl-button:is(a, button), .fl-builder-content button:visited, .fl-builder-content input[type=button]:visited, .fl-builder-content input[type=submit]:visited, .fl-builder-content a.fl-button:visited, .fl-page .fl-builder-content button:not(.fl-content-ui-button), .fl-page .fl-builder-content input[type=button], .fl-page .fl-builder-content input[type=submit], .fl-page .fl-builder-content .fl-button:is(a, button), .fl-page .fl-builder-content button:visited, .fl-page .fl-builder-content input[type=button]:visited, .fl-page .fl-builder-content input[type=submit]:visited, .fl-page .fl-builder-content a.fl-button:visited { font-family: gotham, Helvetica, sans-serif; font-weight: 700; font-size: 15.6px; line-height: 16px; letter-spacing: 0.035em; text-transform: uppercase; border-style: solid; border-width: 0; background-clip: border-box; border-color: var(--fl-global-ink-mid); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } :where(.fl-builder-content, .fl-page) :is(a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus { outline-width: px; outline-offset: px; } @media(max-width: 992px) { .fl-builder-content h1 { font-size: 64px; } .fl-builder-content h2 { font-size: 52px; } .fl-builder-content h3 { font-size: 26px; } .fl-builder-content h4 { font-size: 22px; } .fl-builder-content h5, .fl-builder-content p:where([data-pardee-as="h5"], [data-pardee-as="h5"] > .fl-module-content > *) { font-size: 19px; } } @media(max-width: 768px) { .fl-builder-content h1 { font-size: 48px; } .fl-builder-content h2 { font-size: 40px; } .fl-builder-content h3 { font-size: 22px; } .fl-builder-content h4 { font-size: 20px; } .fl-builder-content h5, .fl-builder-content p:where([data-pardee-as="h5"], [data-pardee-as="h5"] > .fl-module-content > *) { font-size: 17px; } } .page .fl-post-header, .single-fl-builder-template .fl-post-header { display:none; } .fl-node-7m40gbv9pa3r > .fl-row-content-wrap { background-color: #624A3E; } .fl-node-7m40gbv9pa3r.fl-row-default-height > .fl-row-content-wrap, .fl-node-7m40gbv9pa3r.fl-row-full-height > .fl-row-content-wrap, .fl-node-7m40gbv9pa3r.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-node-7m40gbv9pa3r > .fl-row-content-wrap { padding-top:160px; padding-bottom:96px; } @media ( max-width: 992px ) { .fl-node-7m40gbv9pa3r.fl-row > .fl-row-content-wrap { padding-top:120px; padding-bottom:72px; } } @media ( max-width: 768px ) { .fl-node-7m40gbv9pa3r.fl-row > .fl-row-content-wrap { padding-top:88px; padding-bottom:48px; } } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-s4fp9e5uhoiy > .fl-row-content-wrap { background-color: #FFF6F0; } .fl-node-s4fp9e5uhoiy.fl-row-default-height > .fl-row-content-wrap, .fl-node-s4fp9e5uhoiy.fl-row-full-height > .fl-row-content-wrap, .fl-node-s4fp9e5uhoiy.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-node-s4fp9e5uhoiy .fl-row-content { max-width: 960px; } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-rfvomnpy9g3q { width: 100%; } .fl-node-mdctsje7wfqp { width: 100%; } .fl-module-heading .fl-heading { padding: 0 !important; margin: 0 !important; } .fl-node-vy4enwgskb6l.fl-module-heading { margin-bottom:0px; } @media ( max-width: 992px ) { .fl-node-vy4enwgskb6l.fl-module-heading.fl-module { margin-bottom:0px; } } @media ( max-width: 768px ) { .fl-node-vy4enwgskb6l.fl-module-heading.fl-module { margin-bottom:0px; } } .fl-builder-content .fl-rich-text strong { font-weight: bold; } /** * Remove bottom margins from the last paragraph * in v2+ text editor modules. */ .fl-module.fl-rich-text p:last-child { margin-bottom: 0; } /* Handle overlays in the builder */ .fl-builder-edit .fl-module.fl-rich-text p:not(:has(~ *:not(.fl-block-overlay))) { margin-bottom: 0; } :where(.fl-builder-content .fl-node-kslwyui2v85c.fl-module-rich-text.fl-rich-text *) { color: inherit; } .fl-node-kslwyui2v85c.fl-module-rich-text { margin-bottom:0px; } @media ( max-width: 992px ) { .fl-node-kslwyui2v85c.fl-module-rich-text.fl-module { margin-bottom:0px; } } @media ( max-width: 768px ) { .fl-node-kslwyui2v85c.fl-module-rich-text.fl-module { margin-bottom:0px; } } .fl-node-fcvs2zen859k.fl-module-heading, .fl-node-fcvs2zen859k.fl-module-heading :where(a, q, p, span) { font-size: 72px; } @media(max-width: 992px) { .fl-node-fcvs2zen859k.fl-module-heading, .fl-node-fcvs2zen859k.fl-module-heading :where(a, q, p, span) { font-size: 52px; } } @media(max-width: 768px) { .fl-node-fcvs2zen859k.fl-module-heading, .fl-node-fcvs2zen859k.fl-module-heading :where(a, q, p, span) { font-size: 40px; } } .fl-node-fcvs2zen859k.fl-module-heading { margin-top:22px; } @media ( max-width: 992px ) { .fl-node-fcvs2zen859k.fl-module-heading.fl-module { margin-top:20px; } } @media ( max-width: 768px ) { .fl-node-fcvs2zen859k.fl-module-heading.fl-module { margin-top:18px; } } /* Module headings are scoped `.fl-module-content .x` (0,2,0): BB Global Styles h1–h6 rules are (0,1,1) and would resize them. */ /* ── pardee-gate module ─────────────────────────────────────── Relies on canonical .pardee-btn / .pardee-textlink (see _components.scss) and the row's surface tokens (--pardee-btn-bg/-fg flip on dark rows). Bespoke: the modal (backdrop + cream panel) and Gravity Forms chrome inside it. Content module: no padding, the row pads. page/links modes render nothing visible. ───────────────────────────────────────────────────────────── */ .pardee-gate--page, .pardee-gate--links { display: contents; } .pardee-gate--button { display: flex; justify-content: flex-start; } .pardee-gate--button.pardee-gate--align-center { justify-content: center; } /* Buttons: same metrics as the core Button module, colours from the surface tokens. */ .pardee-gate .pardee-btn { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; box-sizing: border-box; text-decoration: none; } @media (max-width: 640px) { .pardee-gate .pardee-btn { width: 100%; justify-content: center; white-space: normal; height: auto; min-height: var(--pardee-btn-h, 48px); padding-top: 12px; padding-bottom: 12px; line-height: 1.2; text-align: center; } } .pardee-gate__btn--filled { background: var(--pardee-btn-bg, var(--pp-ink-mid)); color: var(--pardee-btn-fg, var(--pp-cream)); border: 1px solid var(--pardee-btn-bg, var(--pp-ink-mid)); } .pardee-gate__btn--filled:hover { background: var(--pardee-btn-bg-hover, var(--pp-ink)); border-color: var(--pardee-btn-bg-hover, var(--pp-ink)); color: var(--pardee-btn-fg, var(--pp-cream)); } .pardee-gate__btn--outline { background: transparent; color: var(--pardee-fg, var(--pp-ink-mid)); border: 1px solid var(--pardee-fg, var(--pp-ink-mid)); } .pardee-gate__btn--outline:hover { background: var(--pardee-btn-bg, var(--pp-ink-mid)); color: var(--pardee-btn-fg, var(--pp-cream)); } .pardee-gate__textlink { color: var(--pardee-fg, var(--pp-ink-mid)); } .pardee-gate__notice { margin: 0; font-family: "Courier New", ui-monospace, monospace; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--pp-clay); } /* ── Modal ──────────────────────────────────────────────── */ .pardee-gate__modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; } .pardee-gate__modal[hidden] { display: none; } .pardee-gate__backdrop { position: absolute; inset: 0; background: rgba(0, 18, 28, .72); } .pardee-gate__panel { position: relative; box-sizing: border-box; width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow: auto; padding: clamp(28px, 4vw, 44px); background: var(--pp-cream); color: var(--pp-ink-mid); border-radius: var(--r-md); box-shadow: 0 30px 80px rgba(0, 18, 28, .35); /* light-surface tokens inside the panel whatever the row surface */ --pardee-fg: var(--pp-ink-mid); --pardee-fg-muted: var(--pp-clay); --pardee-line: var(--line-soft); --pardee-btn-bg: var(--pp-ink-mid); --pardee-btn-fg: var(--pp-cream); --pardee-btn-bg-hover: var(--pp-ink); } .pardee-gate__close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; font-family: var(--font-body); font-size: 26px; line-height: 1; color: var(--pp-clay); transition: color var(--dur-base); } .pardee-gate__close:hover { color: var(--pp-ink-mid); } .fl-module-content .pardee-gate__heading { margin: 0 0 8px 24px; margin-left: 0; padding-right: 32px; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.005em; color: var(--pp-ink-mid); } .pardee-gate__text { margin: 0 0 20px; font-family: var(--font-body); font-size: 14.5px; line-height: 1.6; color: var(--pp-clay); } /* ── Gravity Form: the LOOK (labels, inputs, checkboxes, selects, button, validation) is site-wide in the theme — scss/redesign-2026/_forms.scss on the --pardee-input-* tokens (Component Library §05). This module owns only where the fields sit. ── */ /* the modal panel is always cream, whatever row the gate sits in → light-mode form tokens on the panel */ .pardee-gate__panel { --pardee-fg: var(--pp-ink-mid); --pardee-fg-muted: var(--pp-clay); --pardee-outline: var(--pp-ink-mid); --pardee-btn-bg: var(--pp-ink-mid); --pardee-btn-fg: var(--pp-cream); --pardee-btn-bg-hover: var(--pp-ink); --pardee-input-bg: var(--pp-cream); --pardee-input-fg: var(--pp-ink-mid); --pardee-input-border: var(--pp-tan); --pardee-input-border-w: 1px; --pardee-input-radius: var(--r-sm); --pardee-input-pad: 0 14px; --pardee-input-ph: #6E5A4C; --pardee-input-focus: var(--pp-ink-mid); --pardee-input-focus-ring: 0 0 0 3px rgba(2, 37, 52, .12); --pardee-input-disabled-bg: var(--pp-sand); --pardee-label-color: var(--pp-clay); --pardee-check-accent: var(--pp-ink-mid); --pardee-select-chevron: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23022534' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); --pardee-select-chevron-pos: right 14px center; } /* ── The panel is a LIGHT surface inside ANY row ────────────────────────────────────────────── Mirrors what the theme already does for a light-surfaced COLUMN on a dark row (`scss/redesign-2026/_forms.scss`, "$pardee-light-cols"). Two halves: (a) TOKENS. Custom properties inherit from the ROW, so a gate on an ink/brown/photo row would take the dark set onto its cream panel. The block above re-declares the form + button tokens; the rest (`--pardee-fg-faint`, `--pardee-link`, `--pardee-eyebrow-color`, …) would still resolve dark. Nearest declaration wins for custom properties, so declaring the theme's light-surface values on the panel is enough; on a light row they are the values already inherited, so nothing moves. (b) HARD RULES. The theme's dark-ROW form block ("$pardee-dark-rows") is NOT token-driven and is gated on the row surface only, so it cannot see the panel: `.fl-row[data-pardee-spacing][data-pardee-surface="ink"] .fl-module-content .gform_wrapper .gchoice label { color: rgba(255, 246, 240, .85) }` → (0,6,1) would paint the Gravity Form's radio/checkbox labels cream ON the cream panel — invisible; the same for `.gform_description` (0,6,0) and `select` (0,6,1), plus the mockup metrics (38px fields, 64px textarea): labels resolve to rgba(255,246,240,.85) and the description to rgba(255,246,240,.5) on a rgb(255,246,240) panel. Re-assert them here at the LIGHT values from a prefix that reaches (0,7,0) — the modal's `[data-gate-modal]` and the panel's `[role="dialog"]` are what carry it past (0,6,1), so no `!important` — and repeat GF's 7-long `:not()` chain where the theme repeats it ((0,13,1)). Values are the theme's light-surface ones, so a gate on a light row computes unchanged. ──────────────────────────────────────────────────────────────────────────────────────────────── */ .pardee-gate__panel { --pardee-fg-faint: var(--pp-clay); --pardee-fg-soft: var(--pp-clay); --pardee-link: #012F48; --pardee-link-hover: var(--pp-ink); --pardee-line: var(--line-soft); --pardee-eyebrow-color: var(--pp-clay); --pardee-accent-color: var(--pp-clay); --pardee-card-bg: var(--pp-cream); --pardee-card-bg-hover: var(--pp-cream-warm); } /* (0,8,1) — beats the dark-row choice-label rule (0,6,1) */ .pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper .gfield_checkbox label, .pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper .gfield_radio label, .pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper .gchoice label { font-family: var(--font-body); font-weight: var(--pardee-w-regular); font-size: 14px; letter-spacing: .02em; text-transform: none; color: var(--pardee-fg); } /* (0,8,0) — beats the dark-row description rule (0,6,0); the designs' legal/consent line */ .pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper .gform_description { color: var(--pardee-fg-faint, var(--pardee-fg-muted)); } /* (0,8,0) — field labels + legends: token-driven in the theme, re-asserted so the panel owns them */ .pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper .gfield_label, .pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper .gform-field-label, .pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper .ginput_complex label { color: var(--pardee-label-color); } /* (0,14,1) / (0,7,1) — the mockup metrics the dark-row block hard-codes; light values = what the same modal computes on /equity/, /international/, /mortgage-reset-game-plan/ today */ .pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):not([type=hidden]), .pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper select { height: auto; min-height: var(--pardee-input-h); padding-top: 0; padding-bottom: 0; color: var(--pardee-input-fg); } /* (0,7,1) */ .pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper textarea { height: auto; min-height: 120px; } .pardee-gate__form .gform_wrapper .gform_heading { padding-right: 32px; } /* clear the close button */ .pardee-gate__form .gform_wrapper .gform_button, .pardee-gate__form .gform_wrapper input[type="submit"] { width: 100%; } /* the modal's one action fills the panel */ body.pardee-gate-open { overflow: hidden; } /* In the builder: never trap the editor behind a page gate; show the modal inline for editing. */ .fl-builder-edit .pardee-gate__modal { position: static; display: block; padding: 0; margin-top: 16px; } .fl-builder-edit .pardee-gate__modal[hidden] { display: block; } .fl-builder-edit .pardee-gate__backdrop { display: none; } .fl-builder-edit .pardee-gate__panel { box-shadow: none; border: 1px dashed var(--pp-tan); max-width: none; } /* BB Global Styles paint every bare