/** * 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-q6k57a3twvdg > .fl-row-content-wrap { background-color: #FFF6F0; } .fl-node-q6k57a3twvdg.fl-row-default-height > .fl-row-content-wrap, .fl-node-q6k57a3twvdg.fl-row-full-height > .fl-row-content-wrap, .fl-node-q6k57a3twvdg.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-jzsace1f2835 > .fl-row-content-wrap { background-color: #FFF6F0; } .fl-node-jzsace1f2835.fl-row-default-height > .fl-row-content-wrap, .fl-node-jzsace1f2835.fl-row-full-height > .fl-row-content-wrap, .fl-node-jzsace1f2835.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-node-jzsace1f2835 > .fl-row-content-wrap { padding-top:0px; padding-bottom:0px; } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-a7v4j1olumxg > .fl-row-content-wrap { background-color: #E8E0D5; } .fl-node-a7v4j1olumxg.fl-row-default-height > .fl-row-content-wrap, .fl-node-a7v4j1olumxg.fl-row-full-height > .fl-row-content-wrap, .fl-node-a7v4j1olumxg.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-78ry9l1tnbax > .fl-row-content-wrap { background-color: #FFF6F0; } .fl-node-78ry9l1tnbax.fl-row-default-height > .fl-row-content-wrap, .fl-node-78ry9l1tnbax.fl-row-full-height > .fl-row-content-wrap, .fl-node-78ry9l1tnbax.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-8ctv0db4ghoy > .fl-row-content-wrap { background-color: #E8E0D5; } .fl-node-8ctv0db4ghoy.fl-row-default-height > .fl-row-content-wrap, .fl-node-8ctv0db4ghoy.fl-row-full-height > .fl-row-content-wrap, .fl-node-8ctv0db4ghoy.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-iumezvp8y1wg > .fl-row-content-wrap { background-color: #001621; } .fl-node-iumezvp8y1wg.fl-row-default-height > .fl-row-content-wrap, .fl-node-iumezvp8y1wg.fl-row-full-height > .fl-row-content-wrap, .fl-node-iumezvp8y1wg.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-swh6gxfzv1mu > .fl-row-content-wrap { background-color: #2E211A; } .fl-node-swh6gxfzv1mu.fl-row-default-height > .fl-row-content-wrap, .fl-node-swh6gxfzv1mu.fl-row-full-height > .fl-row-content-wrap, .fl-node-swh6gxfzv1mu.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-5s7ckwl1pqvj > .fl-row-content-wrap { background-color: #D8BDA8; } .fl-node-5s7ckwl1pqvj.fl-row-default-height > .fl-row-content-wrap, .fl-node-5s7ckwl1pqvj.fl-row-full-height > .fl-row-content-wrap, .fl-node-5s7ckwl1pqvj.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-iagbq5oh307w > .fl-row-content-wrap { background-color: #001621; } .fl-node-iagbq5oh307w.fl-row-default-height > .fl-row-content-wrap, .fl-node-iagbq5oh307w.fl-row-full-height > .fl-row-content-wrap, .fl-node-iagbq5oh307w.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-n71vud9kbp0w > .fl-row-content-wrap { background-color: #FFF6F0; } .fl-node-n71vud9kbp0w.fl-row-default-height > .fl-row-content-wrap, .fl-node-n71vud9kbp0w.fl-row-full-height > .fl-row-content-wrap, .fl-node-n71vud9kbp0w.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-kxjmfwd54h1n > .fl-row-content-wrap { background-color: #E8E0D5; } .fl-node-kxjmfwd54h1n.fl-row-default-height > .fl-row-content-wrap, .fl-node-kxjmfwd54h1n.fl-row-full-height > .fl-row-content-wrap, .fl-node-kxjmfwd54h1n.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-7h6dsmi4wx8e > .fl-row-content-wrap { background-color: #FFF6F0; } .fl-node-7h6dsmi4wx8e.fl-row-default-height > .fl-row-content-wrap, .fl-node-7h6dsmi4wx8e.fl-row-full-height > .fl-row-content-wrap, .fl-node-7h6dsmi4wx8e.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-node-7h6dsmi4wx8e .fl-row-content { max-width: 960px; } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-azuej17w2kp3 > .fl-row-content-wrap { background-color: #001621; } .fl-node-azuej17w2kp3.fl-row-default-height > .fl-row-content-wrap, .fl-node-azuej17w2kp3.fl-row-full-height > .fl-row-content-wrap, .fl-node-azuej17w2kp3.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-node-azuej17w2kp3 .fl-row-content { max-width: 960px; } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-lsd49z1naout > .fl-row-content-wrap { background-color: #001621; } .fl-node-lsd49z1naout.fl-row-default-height > .fl-row-content-wrap, .fl-node-lsd49z1naout.fl-row-full-height > .fl-row-content-wrap, .fl-node-lsd49z1naout.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-node-lsd49z1naout > .fl-row-content-wrap { padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; } @media ( max-width: 992px ) { .fl-node-lsd49z1naout.fl-row > .fl-row-content-wrap { padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; } } @media ( max-width: 768px ) { .fl-node-lsd49z1naout.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-yxkt4a0ij659 { width: 52%; } .fl-node-yxkt4a0ij659 > .fl-col-content { padding-right:36px; } @media ( max-width: 992px ) { .fl-node-yxkt4a0ij659.fl-col > .fl-col-content { padding-right:22px; } } @media ( max-width: 768px ) { .fl-node-yxkt4a0ij659.fl-col > .fl-col-content { padding-right:0px; } } .fl-node-nal1hxoc4kwr { width: 100%; } .fl-node-fkdxqzn7jm25 { width: 50%; } .fl-node-fkdxqzn7jm25 > .fl-col-content { padding-right:36px; } @media ( max-width: 992px ) { .fl-node-fkdxqzn7jm25.fl-col > .fl-col-content { padding-right:22px; } } @media ( max-width: 768px ) { .fl-node-fkdxqzn7jm25.fl-col > .fl-col-content { padding-right:0px; } } .fl-node-35splgdi041f { width: 100%; } .fl-node-35splgdi041f > .fl-col-content { background-color: #001621; } .fl-node-35splgdi041f > .fl-col-content { padding-top:30px; padding-right:30px; padding-bottom:30px; padding-left:30px; } @media ( max-width: 992px ) { .fl-node-35splgdi041f.fl-col > .fl-col-content { padding-top:26px; padding-right:26px; padding-bottom:26px; padding-left:26px; } } @media ( max-width: 768px ) { .fl-node-35splgdi041f.fl-col > .fl-col-content { padding-top:22px; padding-right:22px; padding-bottom:22px; padding-left:22px; } } .fl-node-caywz05vn2fm { width: 50%; } .fl-node-caywz05vn2fm > .fl-col-content { padding-right:36px; } @media ( max-width: 992px ) { .fl-node-caywz05vn2fm.fl-col > .fl-col-content { padding-right:22px; } } @media ( max-width: 768px ) { .fl-node-caywz05vn2fm.fl-col > .fl-col-content { padding-right:0px; } } .fl-node-qhj9cse4ywzn { width: 100%; } .fl-node-hlz56b8oysxn { width: 50%; } .fl-node-hlz56b8oysxn > .fl-col-content { padding-right:36px; } @media ( max-width: 992px ) { .fl-node-hlz56b8oysxn.fl-col > .fl-col-content { padding-right:22px; } } @media ( max-width: 768px ) { .fl-node-hlz56b8oysxn.fl-col > .fl-col-content { padding-right:0px; } } .fl-node-nx8ecwqz4pur { width: 100%; } .fl-node-rhk3y9nvplg4 { width: 100%; } .fl-node-thn03zxpckfo { width: 50%; } .fl-node-thn03zxpckfo > .fl-col-content { padding-right:36px; } @media ( max-width: 992px ) { .fl-node-thn03zxpckfo.fl-col > .fl-col-content { padding-right:22px; } } @media ( max-width: 768px ) { .fl-node-thn03zxpckfo.fl-col > .fl-col-content { padding-right:0px; } } .fl-node-603r5cifkuzj { width: 53%; } .fl-node-603r5cifkuzj > .fl-col-content { padding-right:36px; } @media ( max-width: 992px ) { .fl-node-603r5cifkuzj.fl-col > .fl-col-content { padding-right:22px; } } @media ( max-width: 768px ) { .fl-node-603r5cifkuzj.fl-col > .fl-col-content { padding-right:0px; } } .fl-node-yqlo0rc6nek9 { width: 100%; } .fl-node-brsy6evd2zti { width: 50%; } .fl-node-brsy6evd2zti > .fl-col-content { padding-right:36px; } @media ( max-width: 992px ) { .fl-node-brsy6evd2zti.fl-col > .fl-col-content { padding-right:22px; } } @media ( max-width: 768px ) { .fl-node-brsy6evd2zti.fl-col > .fl-col-content { padding-right:0px; } } .fl-node-j4lr8dymskc7 { width: 100%; } .fl-node-0fgh2cwazrok { width: 50%; } .fl-node-0fgh2cwazrok > .fl-col-content { padding-right:36px; } @media ( max-width: 992px ) { .fl-node-0fgh2cwazrok.fl-col > .fl-col-content { padding-right:22px; } } @media ( max-width: 768px ) { .fl-node-0fgh2cwazrok.fl-col > .fl-col-content { padding-right:0px; } } .fl-node-by04wt2dxahs { width: 100%; } .fl-node-kabp2omevnuz { width: 50%; } .fl-node-kabp2omevnuz > .fl-col-content { padding-right:36px; } @media ( max-width: 992px ) { .fl-node-kabp2omevnuz.fl-col > .fl-col-content { padding-right:22px; } } @media ( max-width: 768px ) { .fl-node-kabp2omevnuz.fl-col > .fl-col-content { padding-right:0px; } } .fl-node-53k60ypimdsw { width: 100%; } .fl-node-z6uwi0br3jql { width: 100%; } .fl-node-zvfadtqe2ixj { width: 100%; } .fl-node-rf9piwy2zg3h { width: 50%; } .fl-node-rf9piwy2zg3h > .fl-col-content { padding-right:36px; } @media ( max-width: 992px ) { .fl-node-rf9piwy2zg3h.fl-col > .fl-col-content { padding-right:22px; } } @media ( max-width: 768px ) { .fl-node-rf9piwy2zg3h.fl-col > .fl-col-content { padding-right:0px; } } .fl-node-n1fl3m7qxgjk { width: 100%; } .fl-node-m8q6ka93yj0n { width: 100%; } .fl-node-xzdeigym81pb { width: 100%; } .fl-node-vsflr2an1qtx { width: 100%; } .fl-node-18bdwh3x2jul { width: 100%; } .fl-node-g30t2wko9cym { width: 48%; } @media ( max-width: 768px ) { .fl-node-g30t2wko9cym.fl-col > .fl-col-content { margin-top:32px; } } .fl-node-g30t2wko9cym > .fl-col-content { padding-left:36px; } @media ( max-width: 992px ) { .fl-node-g30t2wko9cym.fl-col > .fl-col-content { padding-left:22px; } } @media ( max-width: 768px ) { .fl-node-g30t2wko9cym.fl-col > .fl-col-content { padding-left:0px; } } .fl-node-1thyew4b26rl { width: 50%; } @media ( max-width: 768px ) { .fl-node-1thyew4b26rl.fl-col > .fl-col-content { margin-top:32px; } } .fl-node-1thyew4b26rl > .fl-col-content { padding-left:36px; } @media ( max-width: 992px ) { .fl-node-1thyew4b26rl.fl-col > .fl-col-content { padding-left:22px; } } @media ( max-width: 768px ) { .fl-node-1thyew4b26rl.fl-col > .fl-col-content { padding-left:0px; } } .fl-node-puoiek2q4xd0 { width: 50%; } @media ( max-width: 768px ) { .fl-node-puoiek2q4xd0.fl-col > .fl-col-content { margin-top:32px; } } .fl-node-puoiek2q4xd0 > .fl-col-content { padding-left:36px; } @media ( max-width: 992px ) { .fl-node-puoiek2q4xd0.fl-col > .fl-col-content { padding-left:22px; } } @media ( max-width: 768px ) { .fl-node-puoiek2q4xd0.fl-col > .fl-col-content { padding-left:0px; } } .fl-node-i436oghsnzu2 { width: 50%; } @media ( max-width: 768px ) { .fl-node-i436oghsnzu2.fl-col > .fl-col-content { margin-top:32px; } } .fl-node-i436oghsnzu2 > .fl-col-content { padding-left:36px; } @media ( max-width: 992px ) { .fl-node-i436oghsnzu2.fl-col > .fl-col-content { padding-left:22px; } } @media ( max-width: 768px ) { .fl-node-i436oghsnzu2.fl-col > .fl-col-content { padding-left:0px; } } .fl-node-o9lcg37yijkq { width: 50%; } @media ( max-width: 768px ) { .fl-node-o9lcg37yijkq.fl-col > .fl-col-content { margin-top:32px; } } .fl-node-o9lcg37yijkq > .fl-col-content { padding-left:36px; } @media ( max-width: 992px ) { .fl-node-o9lcg37yijkq.fl-col > .fl-col-content { padding-left:22px; } } @media ( max-width: 768px ) { .fl-node-o9lcg37yijkq.fl-col > .fl-col-content { padding-left:0px; } } .fl-node-178cr0pn2sa4 { width: 47%; } @media ( max-width: 768px ) { .fl-node-178cr0pn2sa4.fl-col > .fl-col-content { margin-top:32px; } } .fl-node-178cr0pn2sa4 > .fl-col-content { padding-left:36px; } @media ( max-width: 992px ) { .fl-node-178cr0pn2sa4.fl-col > .fl-col-content { padding-left:22px; } } @media ( max-width: 768px ) { .fl-node-178cr0pn2sa4.fl-col > .fl-col-content { padding-left:0px; } } .fl-node-jd87tqfazhgp { width: 50%; } @media ( max-width: 768px ) { .fl-node-jd87tqfazhgp.fl-col > .fl-col-content { margin-top:32px; } } .fl-node-jd87tqfazhgp > .fl-col-content { padding-left:36px; } @media ( max-width: 992px ) { .fl-node-jd87tqfazhgp.fl-col > .fl-col-content { padding-left:22px; } } @media ( max-width: 768px ) { .fl-node-jd87tqfazhgp.fl-col > .fl-col-content { padding-left:0px; } } .fl-node-vcm52xszjqht { width: 50%; } @media ( max-width: 768px ) { .fl-node-vcm52xszjqht.fl-col > .fl-col-content { margin-top:32px; } } .fl-node-vcm52xszjqht > .fl-col-content { padding-left:36px; } @media ( max-width: 992px ) { .fl-node-vcm52xszjqht.fl-col > .fl-col-content { padding-left:22px; } } @media ( max-width: 768px ) { .fl-node-vcm52xszjqht.fl-col > .fl-col-content { padding-left:0px; } } .fl-node-12jgtnlesuc4 { width: 50%; } @media ( max-width: 768px ) { .fl-node-12jgtnlesuc4.fl-col > .fl-col-content { margin-top:32px; } } .fl-node-12jgtnlesuc4 > .fl-col-content { padding-left:36px; } @media ( max-width: 992px ) { .fl-node-12jgtnlesuc4.fl-col > .fl-col-content { padding-left:22px; } } @media ( max-width: 768px ) { .fl-node-12jgtnlesuc4.fl-col > .fl-col-content { padding-left:0px; } } .fl-node-f0dixzymcwq1 { width: 50%; } @media ( max-width: 768px ) { .fl-node-f0dixzymcwq1.fl-col > .fl-col-content { margin-top:32px; } } .fl-node-f0dixzymcwq1 > .fl-col-content { padding-left:36px; } @media ( max-width: 992px ) { .fl-node-f0dixzymcwq1.fl-col > .fl-col-content { padding-left:22px; } } @media ( max-width: 768px ) { .fl-node-f0dixzymcwq1.fl-col > .fl-col-content { padding-left:0px; } } .fl-module-heading .fl-heading { padding: 0 !important; margin: 0 !important; } .fl-node-oz56r8hpmldn.fl-module-heading { margin-bottom:0px; } @media ( max-width: 992px ) { .fl-node-oz56r8hpmldn.fl-module-heading.fl-module { margin-bottom:0px; } } @media ( max-width: 768px ) { .fl-node-oz56r8hpmldn.fl-module-heading.fl-module { margin-bottom:0px; } } /* ── pardee-grid-gallery module ─────────────────────────────── Content module: the row pads and constrains; this fills its column. Three layouts — even (Listing Marketing .ss-artifacts / .lm-grid4), tall-left (Case Study .case-gallery), pairs (Pardee Prep .prep-gallery, before/after side by side). Colours read the row's surface tokens; the placeholder block and chips are fixed palette accents. ───────────────────────────────────────────────────────────── */ .pardee-grid-gallery { display: grid; width: 100%; gap: var(--pardee-grid-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } .pardee-grid-gallery--cols-1 { grid-template-columns: minmax(0, 1fr); } .pardee-grid-gallery--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pardee-grid-gallery--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pardee-grid-gallery--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pardee-grid-gallery__item { display: flex; flex-direction: column; margin: 0; min-width: 0; color: var(--pardee-fg); } /* ── Media slot ─────────────────────────────────────────────── */ .pardee-grid-gallery__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--pardee-r-card); background: var(--pp-sand); } .pardee-grid-gallery__img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Placeholder: token-coloured block carrying the label so a layout reads before photos exist */ .pardee-grid-gallery__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 16px; background: var(--pp-sand); background-image: linear-gradient(to top right, transparent calc(50% - .5px), rgba(2, 37, 52, .12) calc(50% - .5px), rgba(2, 37, 52, .12) calc(50% + .5px), transparent calc(50% + .5px)); text-align: center; } .pardee-grid-gallery__ph-text { font-family: var(--font-body); font-weight: var(--pardee-w-bold); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--pp-clay); background: var(--pp-sand); padding: 4px 8px; } /* Tag on the image (even / tall-left) — design .ss-artifact__tag */ .pardee-grid-gallery__tag { position: absolute; left: 12px; top: 12px; z-index: 2; background: var(--pp-ink-mid); color: var(--pp-cream); font-family: var(--font-body); font-weight: var(--pardee-w-bold); font-size: 10px; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; padding: 5px 11px; pointer-events: none; } /* ── Even grid: tiles with a hairline + card surface — design .ss-artifact ── */ .pardee-grid-gallery--even .pardee-grid-gallery__item { background: var(--pardee-card-bg); border: 1px solid var(--pardee-line); border-radius: var(--pardee-r-card); overflow: hidden; transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-soft); } .pardee-grid-gallery--even .pardee-grid-gallery__item:hover { border-color: var(--pp-tan); transform: translateY(-3px); } .pardee-grid-gallery--even .pardee-grid-gallery__media { border-radius: 0; } .pardee-grid-gallery--even .pardee-grid-gallery__body { padding: 18px 20px 20px; } /* ── Tall-left: first tile spans two rows — design .case-gallery ── */ .pardee-grid-gallery--tall { grid-template-columns: 2fr 1fr 1fr; gap: 16px; } .pardee-grid-gallery--tall .pardee-grid-gallery__media { aspect-ratio: 4 / 3; } .pardee-grid-gallery__item--tall { grid-row: span 2; } .pardee-grid-gallery__item--tall .pardee-grid-gallery__media { aspect-ratio: 3 / 5; flex: 1 1 auto; } /* The tall tile spans two AUTO rows, so the grid grows both rows to half its height (3/5 of the 2fr column ≈ 1007px at 1240px → rows of 495px). The small tiles' figure stretches to that row, but their media keeps its 4/3 box (227px) unless it is told to fill, leaving ~270px of blank surface under each one. In the design the cells ARE the grid items (bare .case-gallery__cell divs) and stretch, so the media must fill its figure here too. Below 992px the tall tile stops spanning and every media is 4/3 again. */ .pardee-grid-gallery--tall .pardee-grid-gallery__item .pardee-grid-gallery__media { flex: 1 1 auto; min-height: 0; } /* ── Pairs: before / after side by side — design .prep-gallery + .ba ── */ .pardee-grid-gallery--pairs { gap: clamp(24px, 3vw, 40px); } .pardee-grid-gallery__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: var(--pardee-r-card); overflow: hidden; } .pardee-grid-gallery__pair .pardee-grid-gallery__media { border-radius: 0; } .pardee-grid-gallery__tag--before, .pardee-grid-gallery__tag--after { top: auto; bottom: 14px; left: 14px; border-radius: var(--pardee-r-chip); font-size: 10px; letter-spacing: .18em; padding: 6px 12px; text-shadow: 0 1px 6px rgba(0, 0, 0, .4); } .pardee-grid-gallery__tag--before { background: rgba(2, 37, 52, .78); } .pardee-grid-gallery__tag--after { background: rgba(154, 65, 33, .85); left: auto; right: 14px; } /* One pair on its own (columns 1 — home 06 Pardee Prep, design .hp-prep__media): two portrait slots 2:3, 16px apart, no radius, both labels top-left — Before a cream pill in ink, After an ink pill in cream. */ .pardee-grid-gallery--cols-1.pardee-grid-gallery--pairs .pardee-grid-gallery__pair { gap: 16px; border-radius: 0; } .pardee-grid-gallery--cols-1.pardee-grid-gallery--pairs .pardee-grid-gallery__media { aspect-ratio: 2 / 3; } .pardee-grid-gallery--cols-1.pardee-grid-gallery--pairs .pardee-grid-gallery__tag--before, .pardee-grid-gallery--cols-1.pardee-grid-gallery--pairs .pardee-grid-gallery__tag--after { top: 12px; bottom: auto; left: 12px; right: auto; border-radius: 0; text-shadow: none; font-size: 10.5px; letter-spacing: .18em; padding: 5px 11px; } .pardee-grid-gallery--cols-1.pardee-grid-gallery--pairs .pardee-grid-gallery__tag--before { background: var(--pp-cream); color: var(--pp-ink-mid); } .pardee-grid-gallery--cols-1.pardee-grid-gallery--pairs .pardee-grid-gallery__tag--after { background: var(--pp-ink-mid); color: var(--pp-cream); } /* Chips under a pair — design .prep-tags / .prep-tag */ .pardee-grid-gallery__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; } .pardee-grid-gallery__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--pardee-r-chip); background: var(--pp-blush); color: var(--pp-ink-mid); font-family: var(--font-body); font-weight: var(--pardee-w-bold); font-size: 10px; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; } .pardee-grid-gallery__chip::before { content: ""; width: 5px; height: 5px; border-radius: var(--r-circle); background: var(--pp-terracotta); } /* ── Text under the image ───────────────────────────────────── */ .pardee-grid-gallery__body { display: flex; flex-direction: column; gap: 6px; margin: 0; } .pardee-grid-gallery--tall .pardee-grid-gallery__body, .pardee-grid-gallery--pairs .pardee-grid-gallery__body { padding-top: 12px; } .pardee-grid-gallery--pairs .pardee-grid-gallery__chips + .pardee-grid-gallery__label { margin-top: 10px; } .pardee-grid-gallery__label { font-family: var(--font-display); font-weight: 700; font-size: 19px; /* design .ss-artifact__t */ line-height: 1.2; letter-spacing: 0; color: var(--pardee-fg); } .pardee-grid-gallery__caption { font-family: var(--font-body); font-weight: var(--pardee-w-regular); font-size: 13.5px; /* design .ss-artifact__d */ letter-spacing: .02em; line-height: 1.5; color: var(--pardee-fg-muted); text-wrap: pretty; } /* ── Responsive (BB: ≤992 medium, ≤768 small) ───────────────── */ @media (max-width: 992px) { .pardee-grid-gallery--cols-3, .pardee-grid-gallery--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pardee-grid-gallery--tall { grid-template-columns: 1fr 1fr; } .pardee-grid-gallery__item--tall { grid-row: auto; } /* (0,4,0): the Case Study Layout CSS repeats `.cs-gallery .pardee-grid-gallery__item--tall .pardee-grid-gallery__media { aspect-ratio: 3/5 }` at (0,3,0) with no breakpoint, and Layout CSS loads after the module bundle — at (0,3,0) this override would lose and the portrait tile stay 3/5 on tablet/phone (683px beside 307px tiles at 900px). */ .pardee-grid-gallery.pardee-grid-gallery--tall .pardee-grid-gallery__item--tall .pardee-grid-gallery__media { aspect-ratio: 4 / 3; } } @media (max-width: 768px) { .pardee-grid-gallery, .pardee-grid-gallery--cols-2, .pardee-grid-gallery--cols-3, .pardee-grid-gallery--cols-4, .pardee-grid-gallery--tall { grid-template-columns: minmax(0, 1fr); } .pardee-grid-gallery--pairs { gap: 28px; } .pardee-grid-gallery__tag--before, .pardee-grid-gallery__tag--after { bottom: 10px; left: 10px; padding: 5px 10px; } .pardee-grid-gallery__tag--after { left: auto; right: 10px; } } @media (prefers-reduced-motion: reduce) { .pardee-grid-gallery--even .pardee-grid-gallery__item { transition: none; } .pardee-grid-gallery--even .pardee-grid-gallery__item:hover { transform: none; } } /* ── Compare slider (Pardee Prep 02/04 .prep-compare): the after image sits over the before, clipped at --pos, a range input drives it ── */ .pardee-grid-gallery--compare .pardee-grid-gallery__pair { display: block; position: relative; overflow: hidden; aspect-ratio: 3 / 2; gap: 0; } .pardee-grid-gallery--compare .pardee-grid-gallery__pair .pardee-grid-gallery__media { position: absolute; inset: 0; aspect-ratio: auto; } .pardee-grid-gallery--compare .pardee-grid-gallery__pair .pardee-grid-gallery__media:nth-child(2) { clip-path: inset(0 0 0 var(--pos)); } .pardee-grid-gallery--compare .pardee-grid-gallery__pair .pardee-grid-gallery__img, .pardee-grid-gallery--compare .pardee-grid-gallery__pair .pardee-grid-gallery__ph { width: 100%; height: 100%; object-fit: cover; } .pardee-grid-gallery--compare .pardee-grid-gallery__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; -webkit-appearance: none; appearance: none; } .pardee-grid-gallery--compare .pardee-grid-gallery__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--pp-cream); z-index: 2; pointer-events: none; box-shadow: 0 0 0 1px rgba(2, 37, 52, .25); } .pardee-grid-gallery--compare .pardee-grid-gallery__handle::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: var(--pp-cream); box-shadow: var(--shadow-card); } /* The arrows are a symmetric mask drawn on the knob's exact centre (a text glyph sits on its font's baseline, off-centre) */ .pardee-grid-gallery--compare .pardee-grid-gallery__handle::before { content: ""; position: absolute; top: 50%; left: 50%; z-index: 1; width: 12px; height: 8px; transform: translate(-50%, -50%); background: var(--pp-ink-mid); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M3.9.9 1 4l2.9 3.1M8.1.9 11 4 8.1 7.1' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M3.9.9 1 4l2.9 3.1M8.1.9 11 4 8.1 7.1' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .pardee-grid-gallery--compare .pardee-grid-gallery__tag--before { left: 14px; right: auto; } .pardee-grid-gallery--compare .pardee-grid-gallery__tag--after { left: auto; right: 14px; } .pardee-grid-gallery--compare .pardee-grid-gallery__range:focus-visible ~ .pardee-grid-gallery__handle { box-shadow: 0 0 0 2px var(--pp-cream), 0 0 0 4px var(--pp-ink-mid); } .pardee-grid-gallery--compare.pardee-grid-gallery--pairs .pardee-grid-gallery__pair .pardee-grid-gallery__tag--before { top: auto; bottom: 14px; left: 14px; right: auto; background: rgba(2, 37, 52, .78); color: var(--pp-cream); z-index: 2; } .pardee-grid-gallery--compare.pardee-grid-gallery--pairs .pardee-grid-gallery__pair .pardee-grid-gallery__tag--after { top: auto; bottom: 14px; right: 14px; left: auto; background: rgba(154, 65, 33, .85); color: var(--pp-cream); z-index: 2; } .pardee-grid-gallery--compare .pardee-grid-gallery__pair .pardee-grid-gallery__media:nth-child(2) .pardee-grid-gallery__tag { clip-path: none; } /* even 3-up boards: two-up on phones (six 3:2 placeholder tiles stacked one-up = two screens of sand) */ @media (max-width: 768px) { .pardee-grid-gallery--even.pardee-grid-gallery--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } /* ── card_surface: light — the tiles stay cream with ink titles / clay captions on a dark row (Listing Marketing 07 print + signage) ── */ .pardee-grid-gallery--surface-light .pardee-grid-gallery__item { background: var(--pp-cream); border-color: var(--line-soft); } .pardee-grid-gallery--surface-light .pardee-grid-gallery__label { color: var(--pp-ink-mid); } .pardee-grid-gallery--surface-light .pardee-grid-gallery__caption { color: var(--pp-clay); } .pardee-grid-gallery--compare.pardee-grid-gallery--r16-9 .pardee-grid-gallery__pair { aspect-ratio: 16 / 9; } .pardee-grid-gallery--compare.pardee-grid-gallery--r4-3 .pardee-grid-gallery__pair { aspect-ratio: 4 / 3; } .pardee-grid-gallery--compare.pardee-grid-gallery--r2-3 .pardee-grid-gallery__pair { aspect-ratio: 2 / 3; } .pardee-grid-gallery__media, .pardee-grid-gallery__pair { border-radius: var(--r-md, 8px); overflow: hidden; } /* design .ba 8px */ /* ── Collage: five tiles in a 4-column mosaic (design careers.css .cr-collage — Careers 06 Culture). The span pattern repeats per five images; empty slots render the labelled placeholder block. ── */ .pardee-grid-gallery--collage { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 76px; gap: 12px; } .pardee-grid-gallery--collage .pardee-grid-gallery__item { display: block; } .pardee-grid-gallery--collage .pardee-grid-gallery__media { height: 100%; aspect-ratio: auto; border-radius: 0; border: 1px solid var(--pardee-line); } .pardee-grid-gallery--collage .pardee-grid-gallery__img { height: 100%; } .pardee-grid-gallery--collage .pardee-grid-gallery__item:nth-child(5n+1) { grid-column: span 2; grid-row: span 3; } .pardee-grid-gallery--collage .pardee-grid-gallery__item:nth-child(5n+2) { grid-column: span 2; grid-row: span 2; } .pardee-grid-gallery--collage .pardee-grid-gallery__item:nth-child(5n+3) { grid-row: span 3; } .pardee-grid-gallery--collage .pardee-grid-gallery__item:nth-child(5n+4) { grid-row: span 3; } .pardee-grid-gallery--collage .pardee-grid-gallery__item:nth-child(5n+5) { grid-column: span 2; grid-row: span 2; } @media (max-width: 900px) { .pardee-grid-gallery--collage { grid-auto-rows: 64px; } } /* ── pardee-nav-chips ───────────────────────────────────────── chips = the kit's .pardee-chip pills (theme _components.scss) in a wrapping row; anchors = the designs' anchor strips (.prep-anchornav / .lm-anchornav / .olp-subnav): Gotham 12 uppercase .14em, active link ink with a 2px underline, hairline band, sticky under the fixed header. Surface-aware via --pardee-* tokens. ── */ .pardee-nav-chips { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; } .pardee-nav-chips--anchors { flex-wrap: nowrap; } .pardee-nav-chips--anchors .pardee-nav-chips__list { flex: 1 1 auto; min-width: 0; } .pardee-nav-chips--center { justify-content: center; } .pardee-nav-chips--right { justify-content: flex-end; } .pardee-nav-chips__list { display: flex; flex-wrap: wrap; gap: 10px; } .pardee-nav-chips--center .pardee-nav-chips__list { justify-content: center; } .pardee-nav-chips--right .pardee-nav-chips__list { justify-content: flex-end; } .pardee-nav-chips .pardee-chip { text-decoration: none; } /* static chips (no link) = the export's term pills (.ss-term, Private Listings "The vocabulary"): 13.5px sentence case, cream fill, hairline, 10/18 padding — not the filter chip */ .pardee-nav-chips span.pardee-chip--static { height: auto; padding: 10px 18px; background: var(--pp-cream); border-color: var(--line-soft); border-radius: 999px; /* export --r-pill; --line is blush-soft on the chip (a cream-alpha ring vanishes on a cream fill) */ font-size: 13.5px; letter-spacing: .02em; text-transform: none; color: var(--pardee-fg, var(--pp-ink-mid)); cursor: default; } .pardee-nav-chips span.pardee-chip--static:hover { border-color: var(--line-soft); } [data-pardee-surface="ink"] .pardee-nav-chips span.pardee-chip--static, [data-pardee-surface="ink-mid"] .pardee-nav-chips span.pardee-chip--static, [data-pardee-surface="espresso"] .pardee-nav-chips span.pardee-chip--static, [data-pardee-surface="sable"] .pardee-nav-chips span.pardee-chip--static { background: rgba(255,246,240,.06); border-color: rgba(255,246,240,.22); color: var(--pp-cream); } /* export: .section--ink .ss-term */ .pardee-nav-chips--anchors { padding: 0; border-top: 1px solid var(--pardee-line); border-bottom: 1px solid var(--pardee-line); } /* design .olp-subnav / .lm-anchors: a 58px tab bar, the links carry the height */ .pardee-nav-chips--anchors .pardee-nav-chips__list { gap: 0; } .pardee-nav-chips__anchor { display: inline-flex; align-items: center; padding: 20px 16px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-family: var(--font-body); font-weight: var(--pardee-w-bold); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; white-space: nowrap; color: var(--pardee-fg-muted); text-decoration: none; transition: color var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft); } .pardee-nav-chips__anchor:hover, .pardee-nav-chips__anchor:focus-visible { color: var(--pardee-fg); } .pardee-nav-chips__anchor.is-active { color: var(--pardee-fg); border-bottom-color: currentColor; } .pardee-nav-chips__anchor:focus-visible { outline: 2px solid var(--pardee-outline); outline-offset: 3px; } .pardee-nav-chips__cta { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: var(--pardee-w-bold); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-terracotta); text-decoration: none; white-space: nowrap; flex: 0 0 auto; transition: gap var(--dur-base) var(--ease-soft); } .pardee-nav-chips__cta:hover { gap: 14px; } .pardee-nav-chips__cta .icon-pp-arrow-right { font-size: 11px; } /* sticky: the module's row must not clip (BB rows don't); the header is fixed, --pardee-nav-h is its height */ .pardee-nav-chips--sticky { position: sticky; top: var(--pardee-nav-h, 68px); z-index: 20; background: var(--pardee-row-bg, var(--pp-cream)); } @media (max-width: 768px) { .pardee-nav-chips--anchors .pardee-nav-chips__list { gap: 2px 20px; } /* wraps on phones (Component Library §11: chip/tag rows wrap) */ .pardee-nav-chips__anchor { white-space: nowrap; font-size: 11px; } .pardee-nav-chips--sticky { position: static; } .pardee-nav-chips__cta { display: none; } } @media (prefers-reduced-motion: reduce) { .pardee-nav-chips__anchor, .pardee-nav-chips__cta { transition: none; } } .pardee-nav-chips--anchors .pardee-nav-chips__cta { margin-right: 16px; } @media (max-width: 768px) { .pardee-nav-chips__anchor { padding: 12px 10px; } } .pardee-nav-chips--anchors .pardee-nav-chips__cta { padding: 18px 0; margin-right: 16px; } /* Active-chip tick (design .pp-chip__tick, Meet the Team.html 01 People Hero) — only rendered on the active chip, so the export's `display:none` / `is-active` pair is not needed. currentColor, so it reads on the active fill. Spaced with a margin rather than a flex `gap` on .pardee-chip so the kit chip's own rendering is untouched. */ .pardee-nav-chips__tick { width: 14px; height: 14px; flex: none; margin-right: 8px; } /* Row label (additive — blog.html .bloghero__chips-label "Trending", .filters__label "Filter" / "Topics"): only rendered when the Row label field carries a value. */ .pardee-nav-chips__label { font-family: var(--font-body); font-weight: var(--pardee-w-bold); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--pardee-eyebrow-color, var(--pp-clay)); flex: 0 0 auto; align-self: center; } /* Chip arrow (additive — property story .similar__chip). Only rendered when `chip_arrow: yes`. */ .pardee-nav-chips__arrow { flex: 0 0 auto; width: 11px; height: 11px; opacity: .55; color: inherit; } .pardee-chip:hover .pardee-nav-chips__arrow { opacity: 1; } /* behaviour=cs-filters: the /results/ "Reset filters" link — design Results.html .results-shortcuts__reset. Rendered only while a situation filter is active. */ .pardee-nav-chips__reset { align-self: center; flex: 0 0 auto; padding: 6px 4px; font-family: var(--font-body); font-weight: var(--pardee-w-bold, 600); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--pp-clay); text-decoration: underline; text-underline-offset: 4px; } .pardee-nav-chips__reset:hover { color: var(--pp-ink-mid); } /* behaviour=blog-filters: js/frontend.js dims the chip rows while a swap is in flight (the grid gets the same treatment from its own css). Only ever added on the /blog/ hub. */ .pardee-nav-chips.is-loading { opacity: .55; transition: opacity .15s ease; pointer-events: none; } /* Active chip fill: the kit's `.pardee-chip.is-active` (0,2,0) is out-specified by the page-scoped rules that restyle the RESTING chip — `/results/` `.cs-chips .pardee-nav-chips a.pardee-chip` (0,3,1) and `/communities/` `.nb-chips .pardee-chip` (0,2,0) both set a cream fill, and Layout CSS loads after the module CSS, so a selected chip would take the kit's CREAM TEXT on that CREAM FILL and read as an empty pill. Restated here at (0,4,0): above every resting-chip page rule, level with a page rule that addresses `.is-active` on purpose (Meet the Team's `.pp-teamchips … .pardee-chip.is-active`, which still wins on order). Values are the surface tokens, so the fill flips with the row — ink on light rows, cream on dark ones — which is the designs' active chip (results.css `.results-shortcuts__chip.is-active`, nbhd.css `.nb-chip[aria-pressed="true"]`, Meet the Team `.pp-chip.is-active`). The tick svg is currentColor. */ .pardee-nav-chips .pardee-nav-chips__list .pardee-chip.is-active { background: var(--pardee-btn-bg, var(--pp-ink-mid)); color: var(--pardee-btn-fg, var(--pp-cream)); border-color: var(--pardee-btn-bg, var(--pp-ink-mid)); } /* Phone chip overflow — clamp a long wrapping chip row to 3 lines with a "Show more" step. The design (blog.css .filters) wraps 9 chips; the built page carries 17 (every real category) plus a 10-chip "Keep researching" row, so at 500px the two rows stand 318px and 242px tall and push the articles off the first screen. Progressive enhancement: js/frontend.js adds `is-clamped` ONLY on a ≤768px viewport and ONLY when the row really wraps past 3 lines, sets --pardee-chips-max to the measured bottom of the last shown line, and appends the toggle; with JS off, or on any row that fits, the markup and the CSS below are inert. Desktop is untouched at every width. */ .pardee-nav-chips.is-clamped .pardee-nav-chips__list { max-height: var(--pardee-chips-max, none); overflow: hidden; } /* The toggle is a