/** * 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; } } .fl-node-izvfyspt2rqa.fl-row-default-height > .fl-row-content-wrap, .fl-node-izvfyspt2rqa.fl-row-full-height > .fl-row-content-wrap, .fl-node-izvfyspt2rqa.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-node-izvfyspt2rqa > .fl-row-content-wrap { padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; } @media ( max-width: 992px ) { .fl-node-izvfyspt2rqa.fl-row > .fl-row-content-wrap { padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; } } @media ( max-width: 768px ) { .fl-node-izvfyspt2rqa.fl-row > .fl-row-content-wrap { padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; } } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-ncbsj2q6v9tu > .fl-row-content-wrap { background-color: var(--fl-global-navy); border-top-width: 1px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; } .fl-node-ncbsj2q6v9tu.fl-row-default-height > .fl-row-content-wrap, .fl-node-ncbsj2q6v9tu.fl-row-full-height > .fl-row-content-wrap, .fl-node-ncbsj2q6v9tu.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-node-ncbsj2q6v9tu > .fl-row-content-wrap { padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; } @media ( max-width: 992px ) { .fl-node-ncbsj2q6v9tu.fl-row > .fl-row-content-wrap { padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; } } @media ( max-width: 768px ) { .fl-node-ncbsj2q6v9tu.fl-row > .fl-row-content-wrap { padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; } } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-vfaygo1demk5 { width: 100%; } .fl-module-box:before, .fl-module-box:after { position: absolute; } a.fl-module-box { text-decoration: none; } /* Zero margins for child modules */ .fl-module-box :where( .fl-module ), .fl-module-box :where( .fl-module-content ), .fl-module-box.fl-block > * { margin: 0; } /* Prevent sliders and carousels from blowing out flex layouts */ :where(.fl-module-box:has( [class*="slide"], [class*="carousel"], [class*="swiper"] )) { min-width: 0; } .fl-builder-content-111233 .fl-node-6nxfdovul43w { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 30px; } img.mfp-img { padding-bottom: 40px !important; } /* Support for object-fit */ .fl-builder-edit .fl-fill-container img { transition: object-position .5s; } .fl-fill-container :is(.fl-module-content, .fl-photo, .fl-photo-content, img) { height: 100% !important; width: 100% !important; } @media (max-width: 768px) { /* Mobile Photo */ .fl-photo-content, .fl-photo-img { max-width: 100%; } }.fl-node-gp05sr9acyxe, .fl-node-gp05sr9acyxe .fl-photo { text-align: left; } .fl-node-gp05sr9acyxe .fl-photo-content, .fl-node-gp05sr9acyxe .fl-photo-img { width: 83px; } /* ── pardee-mobile-menu module ─────────────────────────────── */ /* Relies on canonical .pardee-btn / .pardee-btn--on-dark and .icon-pp-arrow-right (see _components.scss) for the sticky footer's CTA button. Everything else — the bar, burger, overlay shell, accordion, and call link — is bespoke: there is no equivalent nav component in the shared kit. Visibility: the design switches between the desktop bar and this one at 920px (pardee-nav.css "Breakpoint switch"), which is not a BB breakpoint — so the swap point lives here rather than in BB's Responsive Display setting, and patch-header-layout.php clears that setting on both nav modules so the two mechanisms cannot disagree. */ /* ── Breakpoint switch — design pardee-nav.css ─────────────── */ /* The Box wrapping this module in the Themer header (class added by patch-header-layout.php) has to go too, not just the module: an empty flex child still takes a slot in the bar's space-between layout and a share of its gap, which strands the right-hand utilities short of the edge. */ @media (min-width: 921px) { .fl-module-pardee-mobile-menu, .pardee-header-mobile-slot { display: none !important; } } .pardee-mobmenu * { box-sizing: border-box; } /* ── Bar ──────────────────────────────────────────────────── */ .pardee-mobmenu__bar { display: flex; align-items: center; justify-content: flex-end; gap: 18px; height: 64px; padding: 0 20px; position: relative; z-index: 20; } /* Saved Homes heart + count badge — design .pgn-mbar__heart / .pgn-util__badge */ .pardee-mobmenu__heart { position: relative; display: flex; padding: 1px; margin: -1px; color: var(--pp-cream); } /* 24px target (WCAG 2.5.8) round the 22px icon; the negative margin keeps the layout */ .pardee-mobmenu__heart:hover { color: var(--pp-cream); } /* (0,2,0): above a page stylesheet's bare a:hover colour */ .pardee-mobmenu__badge { position: absolute; top: -5px; right: -7px; /* 6px above and 8px right of the icon, measured from the heart's 1px padding box */ min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; background: var(--pp-terracotta); color: var(--pp-cream); border-radius: 999px; font-family: var(--font-body); font-size: 10px; font-weight: var(--pardee-w-bold, 700); line-height: 16px; text-align: center; letter-spacing: 0; } .pardee-mobmenu__burger { background: none; border: 0; cursor: pointer; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--pp-cream); } /* The word is justified across the bars' width rather than letter-spaced, so M and U line up with the rules' ends exactly as in the design (.pgn-burger__word). Typography sits on the span, not the button: the BB reset below must keep `font: inherit !important` and would flatten it. */ .pardee-mobmenu__burger-word { display: flex; justify-content: space-between; width: 30px; font-family: var(--font-display); font-size: 11px; font-weight: 400; font-style: normal; text-transform: uppercase; line-height: 1; letter-spacing: 0; } .pardee-mobmenu__burger-word i { font-style: normal; } .pardee-mobmenu__burger-bars { display: flex; flex-direction: column; gap: 6px; width: 30px; } .pardee-mobmenu__burger-bars i { display: block; height: 1.5px; background: currentColor; transition: transform .25s var(--ease-soft, ease); } .pardee-mobmenu__burger[aria-expanded="true"] .pardee-mobmenu__burger-bars i:first-child { transform: translateY(3.75px) rotate(45deg); } .pardee-mobmenu__burger[aria-expanded="true"] .pardee-mobmenu__burger-bars i:last-child { transform: translateY(-3.75px) rotate(-45deg); } /* ── Overlay shell ────────────────────────────────────────── */ .pardee-mobmenu__overlay { position: fixed; inset: 0; z-index: 300; background: var(--pp-ink); display: flex; flex-direction: column; visibility: hidden; opacity: 0; transition: opacity var(--dur-base, 280ms) var(--ease-soft, ease), visibility 0s linear var(--dur-base, 280ms); } .pardee-mobmenu__overlay.is-open { visibility: visible; opacity: 1; transition: opacity var(--dur-base, 280ms) var(--ease-soft, ease), visibility 0s; } /* The Themer sticky header carries an inline `transform: translate(0, -px)` once the page is scrolled. A transformed ancestor becomes the containing block of a position:fixed descendant, so the overlay would be only as tall as the header, and the header's z-index (100) would put it under the sticky CTA bar (150) and the quick-links bar (140). While the menu is open the header takes its place with `top` instead (same spot) and rises above those bars. */ html.pardee-mobmenu-open .fl-builder-content[data-type="header"].fl-theme-builder-header-sticky { transform: none !important; top: 0; z-index: 400; } /* Links in the bar and the overlay inherit cream: the theme's `a:hover { color: unset }` (0,1,1) outranks the single-class link colours here, so a hovered or tapped link takes the inherited colour. */ .pardee-mobmenu__bar, .pardee-mobmenu__overlay { color: var(--pp-cream); } .pardee-mobmenu__scroll { overscroll-behavior: contain; } /* Sit below the WP admin bar instead of under it, matching core's own breakpoint for the admin bar's height change (46px at <=782px, 32px above). */ body.admin-bar .pardee-mobmenu__overlay { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .pardee-mobmenu__overlay { top: 46px; } } @media (prefers-reduced-motion: reduce) { .pardee-mobmenu__overlay, .pardee-mobmenu__panel, .pardee-mobmenu__chev, .pardee-mobmenu__burger-bars i { transition: none !important; } } .pardee-mobmenu__head { flex: 0 0 auto; height: 64px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 246, 240, 0.14); } /* No logo set → the close button still sits hard right (design .pgn-mobile__head). */ .pardee-mobmenu__head > :only-child { margin-left: auto; } .pardee-mobmenu__logo { display: flex; align-items: center; } .pardee-mobmenu__logo img { height: 26px; width: auto; display: block; } .pardee-mobmenu__close { background: none; border: 0; cursor: pointer; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--pp-cream); } /* Same reason as the burger word — the label carries its own type (design .pgn-mobile__close span: 11px, .22em, uppercase) so the button reset's `font: inherit` cannot flatten it. */ .pardee-mobmenu__close-label { font-family: var(--font-display); font-size: 11px; font-weight: 400; font-style: normal; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; } /* 24px box with 1.5px strokes matches the design's 24px lucide X at stroke-width 1.5. */ .pardee-mobmenu__close-x { position: relative; width: 24px; height: 24px; } .pardee-mobmenu__close-x i { position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; background: currentColor; } .pardee-mobmenu__close-x i:first-child { transform: translateY(-50%) rotate(45deg); } .pardee-mobmenu__close-x i:last-child { transform: translateY(-50%) rotate(-45deg); } /* ── Accordion ────────────────────────────────────────────── */ .pardee-mobmenu__scroll { flex: 1 1 auto; overflow-y: auto; padding: 8px 22px 24px; } .pardee-mobmenu__empty { color: var(--fg-on-dark-muted); font-family: var(--font-body); font-size: 14px; line-height: 1.6; padding: 20px 0; } .pardee-mobmenu__acc { border-bottom: 1px solid rgba(255, 246, 240, 0.12); } .pardee-mobmenu__acc-btn { width: 100%; background: none; border: 0; cursor: pointer; padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; } .pardee-mobmenu__acc-label { font-family: var(--font-display); font-size: 23px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pp-cream); line-height: 1.1; } .pardee-mobmenu__chev { flex: 0 0 auto; width: 10px; height: 10px; margin-right: 4px; border-right: 1.5px solid var(--pp-cream); border-bottom: 1.5px solid var(--pp-cream); transform: rotate(45deg); transition: transform var(--dur-base, 280ms) var(--ease-soft, ease); } .pardee-mobmenu__acc.is-open .pardee-mobmenu__chev { transform: rotate(225deg); } /* A collapsed section's links leave the tab order: visibility turns hidden once the close slide has finished. */ .pardee-mobmenu__panel { overflow: hidden; max-height: 0; visibility: hidden; transition: max-height .3s var(--ease-soft, ease), visibility 0s linear .3s; } .pardee-mobmenu__acc.is-open .pardee-mobmenu__panel { max-height: 640px; visibility: visible; transition: max-height .3s var(--ease-soft, ease), visibility 0s; } .pardee-mobmenu__panel-link { display: block; padding: 11px 0 11px 14px; margin-top: 2px; border-left: 1px solid rgba(255, 246, 240, 0.18); font-family: var(--font-body); font-weight: var(--pardee-w-regular); font-size: 15px; letter-spacing: 0.02em; color: var(--pp-cream); text-decoration: none; } .pardee-mobmenu__panel-link:last-child { margin-bottom: 6px; } .pardee-mobmenu__panel-link.current-menu-item, .pardee-mobmenu__acc.current-menu-ancestor > .pardee-mobmenu__acc-btn .pardee-mobmenu__acc-label { color: var(--pp-tan); } /* ── Log In / Saved pair — design .pgn-mobile__auth ────────── */ .pardee-mobmenu__auth { display: flex; gap: 12px; margin-top: 24px; } .pardee-mobmenu__auth a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; border: 1px solid rgba(255, 246, 240, 0.55); color: var(--pp-cream); border-radius: 4px; padding: 14px 0; font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } /* ── Sticky footer ────────────────────────────────────────── */ /* Not CSS position:sticky — the overlay is a fixed-height flex column with only .pardee-mobmenu__scroll scrolling, so this footer stays pinned to the bottom of the viewport for the life of the open menu. */ .pardee-mobmenu__foot { flex: 0 0 auto; padding: 16px 22px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-on-dark); background: var(--pp-ink); } .pardee-mobmenu__foot-cta { width: 100%; } /* narrow phones: the footer's side padding gives way so the CTA label keeps one line (330px button + 2 × 12px; below 354px the label cannot fit at its size, so the footer keeps its designed padding) */ @media (min-width: 354px) and (max-width: 374px) { .pardee-mobmenu__foot { padding-left: 12px; padding-right: 12px; } } .pardee-mobmenu__foot-call { display: flex; align-items: center; justify-content: center; margin-top: 12px; font-family: var(--font-body); font-weight: var(--pardee-w-regular); font-size: 13px; letter-spacing: 0.05em; color: var(--fg-on-dark-muted); text-decoration: none; } /* BB Global Styles paint every