/* Theme Name: Salient CFRE Theme URI: https://communityfirstrealestate.com.au/ Template: salient Author: Appraise Works Description: Community First Real Estate child theme for Salient. Replaces hello-elementor-child (Nov 2026). Listing templates, enquiry form prefills, import helpers and listing alerts carried over from the old child theme. Version: 1.0.0 Text Domain: salient-cfre */ /* carried from the old ctc-style.css */ .epl-post-slide-box { padding: 20px; text-align: center; } /* ---------- Header (Salient "centered menu": logo left, menu centre, phone + button right) ---------- */ #header-outer #top nav > ul.buttons { margin-left: 24px; } #header-outer #top nav > ul.buttons > li > a[href^="tel:"] { letter-spacing: .3px; white-space: nowrap; } #header-outer #top nav > ul.buttons > li.button_solid_color { margin-left: 18px; } #header-outer #top nav > ul.buttons > li.button_solid_color > a:before { border-radius: 50px; } #header-outer #top nav > ul.buttons > li.button_solid_color > a { padding-left: 26px; padding-right: 26px; } #header-outer #top nav > ul.sf-menu .sub-menu { border-top: 0 !important; box-shadow: 0 14px 40px rgba(36, 34, 34, .14); } #header-outer #top nav > ul.sf-menu .sub-menu li a { font-weight: 500; } #header-outer #top nav > ul > li > a { white-space: nowrap; } @media only screen and (min-width: 1000px) and (max-width: 1400px) { /* animated-underline header spaces items with MARGIN (16px from the theme option), not padding */ #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu > li > a { margin-left: 9px; margin-right: 9px; font-size: 14px; } #header-outer #top nav > ul.buttons { margin-left: 10px; } #header-outer #top nav > ul.buttons > li > a { font-size: 14px; } #header-outer #top nav > ul.buttons > li.button_solid_color { margin-left: 8px; } #header-outer #top nav > ul.buttons > li.button_solid_color > a { padding-left: 18px; padding-right: 18px; } #header-outer #top #logo img { height: 40px !important; } #header-outer #top > .container { padding-left: 24px !important; padding-right: 24px !important; } } /* ---------- Footer ("CFRE Footer" Salient global section) ---------- */ .cfre-ft-news h4 { color: #fff; font-size: 20px; line-height: 30px; font-weight: 600; margin: 0 0 24px; } .cfre-ft-news a.nectar-button.cfre-ft-btn { border-radius: 50px !important; border-width: 2px !important; padding: 14px 30px !important; text-transform: uppercase; letter-spacing: .3px; font-size: 15px !important; font-weight: 500 !important; } .cfre-ft-news a.nectar-button.cfre-ft-btn:hover { background-color: #fff !important; color: #ef4050 !important; } .cfre-follow { display: flex; align-items: center; gap: 16px; color: #fff; font-size: 16px; } .cfre-follow a { color: #fff; display: inline-flex; transition: color .2s; } .cfre-follow a:hover { color: #ef4050; } .cfre-ft-top img.cfre-ft-logo, .cfre-ft-top .cfre-ft-logo img { max-width: 250px !important; height: auto; } .cfre-ft-menus .wpb_column > .vc_column-inner > .wpb_wrapper { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 28px; } .cfre-ft-menus .wpb_content_element { margin-bottom: 0 !important; } .cfre-ft-menus .widgettitle { color: #fff !important; font-family: 'Poppins', sans-serif !important; font-size: 20px; line-height: 28px; font-weight: 300 !important; margin: 0 0 22px !important; text-transform: none; letter-spacing: 0; } .cfre-ft-menus ul, .cfre-ft-menus li { list-style: none !important; margin-left: 0 !important; padding-left: 0 !important; } .cfre-ft-menus li::before, .cfre-ft-menus li::marker { content: none !important; } .cfre-ft-menus li { margin-bottom: 14px !important; line-height: 20px; } .cfre-ft-menus li a { color: #fff !important; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .2px; overflow-wrap: anywhere; } .cfre-ft-menus li a:hover { color: #ef4050 !important; } .cfre-ft-bottom p { margin: 0 !important; padding: 0 !important; font-size: 14px; color: #fff; } .cfre-ft-bottom .wpb_column:last-child p { text-align: right; } .cfre-ft-bottom a { color: #fff !important; } .cfre-ft-bottom a:hover { color: #ef4050 !important; } #footer-outer:empty, #footer-outer #copyright:empty { display: none; } /* slide-out (phone) menu: show "Get an appraisal" in red */ #slide-out-widget-area .button_solid_color > a { color: #ef4050 !important; } @media only screen and (max-width: 999px) { .cfre-ft-menus .wpb_column > .vc_column-inner > .wpb_wrapper { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media only screen and (max-width: 690px) { .cfre-ft-menus .wpb_column > .vc_column-inner > .wpb_wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .cfre-ft-top .wpb_column { text-align: center; } .cfre-follow { justify-content: center; margin-bottom: 22px; } .cfre-ft-top .img-with-aniamtion-wrap { text-align: center !important; } .cfre-ft-bottom .wpb_column p, .cfre-ft-bottom .wpb_column:last-child p { text-align: center; } } .cfre-ft-bottom a, .cfre-ft-bottom p { opacity: 1 !important; } /* ---------- Pages rebuilt from Elementor (rows carry .cfre-el, widgets .cfre-w) ---------- Same box model as Elementor: rows are flex, columns stretch to equal height, widgets wrap. */ body.cfre-el-page .container-wrap { padding-top: 0 !important; padding-bottom: 0 !important; } body.cfre-el-page .container-wrap .main-content > .row { padding-bottom: 0 !important; } body.cfre-el-page .wpb_row.cfre-el { margin-bottom: 0 !important; display: flex; flex-wrap: wrap; position: relative; } body.cfre-el-page .wpb_row.cfre-el > .row_col_wrap_12, body.cfre-el-page .wpb_row.cfre-el > .row_col_wrap_12_inner { display: flex !important; flex-wrap: wrap; width: 100%; margin-left: auto !important; margin-right: auto !important; position: relative; z-index: 2; float: none !important; } body.cfre-el-page .wpb_row.cfre-el > .row_col_wrap_12::before, body.cfre-el-page .wpb_row.cfre-el > .row_col_wrap_12::after, body.cfre-el-page .wpb_row.cfre-el > .row_col_wrap_12_inner::before, body.cfre-el-page .wpb_row.cfre-el > .row_col_wrap_12_inner::after { display: none !important; content: none !important; } body.cfre-el-page .wpb_row.cfre-el > .row_col_wrap_12 > .wpb_column, body.cfre-el-page .wpb_row.cfre-el > .row_col_wrap_12_inner > .wpb_column { display: flex; float: none !important; margin: 0 !important; min-height: 1px; } body.cfre-el-page .cfre-el .wpb_column > .vc_column-inner { display: flex; width: 100%; padding: 10px; } body.cfre-el-page .cfre-el .wpb_column > .vc_column-inner > .wpb_wrapper { display: flex; flex-wrap: wrap; width: 100%; } :where(body.cfre-el-page .cfre-el .wpb_column > .vc_column-inner) > .wpb_wrapper { align-content: flex-start; } /* low specificity on purpose: each page's own CSS (.e-) sets the real width */ :where(body.cfre-el-page .cfre-el .wpb_wrapper) > :where(.cfre-w, .wpb_row) { width: 100%; margin-bottom: 0; } body.cfre-el-page .cfre-im img { display: inline-block; vertical-align: middle; } /* no !important here: each element's own margin (page CSS, !important) must win */ body.cfre-el-page .cfre-w.wpb_content_element, body.cfre-el-page .cfre-w.vc_empty_space { margin-bottom: 0; } body.cfre-el-page .cfre-hd > * { margin: 0; padding: 0; } body.cfre-el-page .cfre-tx p { padding-bottom: 0; } body.cfre-el-page .cfre-el .row-bg-wrap { pointer-events: none; z-index: 0; } body.cfre-el-page .cfre-el .row-bg-overlay { z-index: 1; } body.cfre-el-page .cfre-im figure, body.cfre-el-page .cfre-im .vc_single_image-wrapper { margin: 0; display: block; } body.cfre-el-page a.cfre-btn { text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; box-sizing: border-box; } body.cfre-el-page .cfre-ht, body.cfre-el-page .cfre-sc { min-width: 0; } /* ---------- Single listing template (carried from hello-elementor-child) under Salient ---------- */ /* Hello had no list bullets in these blocks; Salient adds them to every li */ .new-single-wrapper .keydetails li, .new-single-wrapper .pro-small-features li, .new-single-wrapper .two-images li, .new-single-wrapper .PropertyHighlights-txt li, .new-single-wrapper .property-features li { list-style: none !important; } /* two side-by-side highlight photos: let each half shrink, crop to 550px tall like live */ .new-single-wrapper .two-images ul li { min-width: 0; } .new-single-wrapper .two-images ul li img { width: 100% !important; max-width: 100%; height: 550px; object-fit: cover; } @media (max-width: 767px) { .new-single-wrapper .two-images ul li img { height: auto; aspect-ratio: 3/2; } } /* Salient gives every .row 24px bottom padding; the listing template uses bootstrap-style .row */ .new-single-wrapper .row { padding-bottom: 0; } /* the old theme (Hello) used line-height 1.5 for text and 1.2 for headings; Salient uses 28px / its own heading sizes */ .new-single-wrapper { line-height: 1.5; } :where(.new-single-wrapper) :where(h1, h2, h3, h4, h5, h6) { line-height: 1.2; } /* ---------- Agent profiles (/directory//, EPL Staff Directory) ---------- */ /* Hello capped every image at its container; Salient leaves these at natural size, so the photo ran over the bio */ .epl-author-box img { max-width: 100% !important; height: auto; } .epl-author-box-container { line-height: 1.5; } .epl-author-box-container p { padding-bottom: 0; margin-bottom: .9em; } /* ---------- Contact Form 7 + Material Design plugin on rebuilt pages (was styled by the Essential Addons widget) ---------- */ body.cfre-el-page .cfre-cf7 .wpcf7 label { font-weight: 400; } body.cfre-el-page .cfre-cf7 .wpcf7 input[type="text"], body.cfre-el-page .cfre-cf7 .wpcf7 input[type="email"], body.cfre-el-page .cfre-cf7 .wpcf7 input[type="tel"], body.cfre-el-page .cfre-cf7 .wpcf7 input[type="number"] { background-color: #fff; } body.cfre-el-page .cfre-cf7.instant-appraisal .wpcf7 input[type="text"], body.cfre-el-page .cfre-cf7.instant-appraisal .wpcf7 input[type="email"], body.cfre-el-page .cfre-cf7.instant-appraisal .wpcf7 input[type="tel"] { height: 60px; } body.cfre-el-page .cfre-cf7 .wpcf7 input[type="submit"], body.cfre-el-page .cfre-cf7 .wpcf7 button[type="submit"] { width: 218px; max-width: 100%; height: 50px; padding: 10px 20px !important; border-radius: 40px !important; border: 1px solid #ef4050 !important; background-color: #ef4050 !important; color: #fff !important; font-size: 16px !important; font-weight: 400 !important; line-height: 28px !important; text-transform: uppercase; letter-spacing: normal; } body.cfre-el-page .cfre-cf7 .wpcf7 input[type="submit"]:hover, body.cfre-el-page .cfre-cf7 .wpcf7 button[type="submit"]:hover { background-color: #d93445 !important; border-color: #d93445 !important; } body.cfre-el-page .cfre-cf7.contact-form .wpcf7 input[type="submit"], body.cfre-el-page .cfre-cf7.contact-form .wpcf7 button[type="submit"] { width: 180px; } body.cfre-el-page .cfre-cf7.contact-form .wpcf7 ::placeholder { color: rgba(36, 34, 34, .5); } /* ---------- Accordion (Services page): Salient toggles styled like the old Elementor accordion ---------- */ body.cfre-el-page .toggles[data-style="minimal"] .toggle { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid #d5d8dc; background: transparent; } body.cfre-el-page .toggles[data-style="minimal"] .toggle > .toggle-title { margin: 0 !important; padding: 0 !important; } body.cfre-el-page .toggles[data-style="minimal"] .toggle > .toggle-title a { display: block; position: relative; padding: 30px 90px !important; font-family: Poppins, sans-serif !important; font-size: 36px !important; line-height: 36px !important; font-weight: 600 !important; color: #ef4050 !important; text-decoration: underline !important; text-transform: none; letter-spacing: 0; } body.cfre-el-page .toggles[data-style="minimal"] .toggle > .toggle-title a i { position: absolute !important; left: auto !important; right: 90px !important; top: 50% !important; margin-top: -16px !important; width: 32px !important; height: 32px !important; border: 0 !important; background: none !important; color: #242222 !important; font-size: 30px !important; line-height: 32px !important; } body.cfre-el-page .toggles[data-style="minimal"] .toggle > .toggle-title a i:before, body.cfre-el-page .toggles[data-style="minimal"] .toggle > .toggle-title a i:after { background-color: #242222 !important; } body.cfre-el-page .toggles[data-style="minimal"] .toggle.open { background: #242222; border-bottom-color: #242222; } body.cfre-el-page .toggles[data-style="minimal"] .toggle.open > .toggle-title a i { color: #fff !important; } body.cfre-el-page .toggles[data-style="minimal"] .toggle.open > .toggle-title a i:before, body.cfre-el-page .toggles[data-style="minimal"] .toggle.open > .toggle-title a i:after { background-color: #fff !important; } body.cfre-el-page .toggles[data-style="minimal"] .toggle > div { padding: 0 90px 15px !important; background: transparent !important; } body.cfre-el-page .toggles[data-style="minimal"] .toggle > div .inner-toggle-wrap { padding: 0 !important; } body.cfre-el-page .toggles[data-style="minimal"] .toggle .one-half { width: 48%; float: left; margin-right: 4%; } body.cfre-el-page .toggles[data-style="minimal"] .toggle .one-half.last { margin-right: 0; } body.cfre-el-page .toggles[data-style="minimal"] .toggle p { color: #fff; font-family: Poppins, sans-serif; font-size: 16px; line-height: 26px; margin: 0 0 14.4px; padding: 0; } @media only screen and (max-width: 767px) { body.cfre-el-page .toggles[data-style="minimal"] .toggle > .toggle-title a { padding: 24px 70px 24px 30px !important; font-size: 28px !important; line-height: 32px !important; } body.cfre-el-page .toggles[data-style="minimal"] .toggle > .toggle-title a i { right: 30px !important; } body.cfre-el-page .toggles[data-style="minimal"] .toggle > div { padding: 0 30px 15px !important; } body.cfre-el-page .toggles[data-style="minimal"] .toggle .one-half { width: 100%; float: none; margin: 0; } } body.cfre-el-page .toggles[data-style="minimal"] .toggle > .toggle-title a i { transform: scale(1.7); } body.cfre-el-page .toggles[data-style="minimal"] .toggle > .toggle-title a i:before, body.cfre-el-page .toggles[data-style="minimal"] .toggle > .toggle-title a i:after { height: 2.5px !important; } /* ---------- /get-an-appraisal/: home-worth hero on top, in-person form below ---------- */ body.cfre-el-page .wpb_row.cfre-hw-row { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } body.cfre-el-page .wpb_row.cfre-hw-row .vc_column-inner, body.cfre-el-page .wpb_row.cfre-hw-row .wpb_wrapper { padding: 0 !important; } body.cfre-el-page .cfre-book-h { margin: 0 0 18px !important; } body.cfre-el-page .cfre-book-h h2 { font-family: Poppins, sans-serif; font-size: 32px; line-height: 40px; font-weight: 600; color: #242222; margin: 0 0 8px; } body.cfre-el-page .cfre-book-h p { font-family: Poppins, sans-serif; font-size: 16px; line-height: 26px; color: #5f5a5a; padding: 0; margin: 0; } /* the row is already full width, so the section must not pull itself out again */ body.cfre-el-page .cfre-hw-row .cfrehw { width: 100%; left: 0; margin-left: 0; } /* ---------- Listing cards ([listing], [listing_advanced]) on phones: edge to edge like live ---------- (live's Customizer CSS loaded after the hustle plugin CSS; under Salient the order flips) */ @media only screen and (max-width: 767px) { body .loop .loop-content .epl-listing-post.epl-property-blog { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } } /* Salient stretches short pages to the window height (inline min-height on .container-wrap); the old site let the footer follow the content straight away */ body .container-wrap { min-height: 0 !important; } /* suburb hub block (mu-plugin cfre-suburb-hubs) used the old theme's 1.5 line height */ .cfre-suburb-hub, .cfre-suburb-index, .cfre-archive-head { line-height: 1.5; } .cfre-suburb-hub p, .cfre-suburb-index p { padding-bottom: 0; margin-bottom: .9em; } /* ---------- Fixes after the 11 Nov fresh-eyes review ---------- */ /* Old Elementor colour/font variables, still used by the calculator code (selected Weekly/Monthly/Annual pill) */ :root { --e-global-color-primary: #EF4050; --e-global-color-secondary: #FFFFFF; --e-global-color-text: #242222; --e-global-color-accent: #EF4050; --e-global-color-bf5e07a: #000000; --e-global-color-aa02ec4: #FFFFFF; --e-global-typography-primary-font-family: "Poppins"; --e-global-typography-primary-font-weight: 600; --e-global-typography-secondary-font-family: "Poppins"; --e-global-typography-secondary-font-weight: 200; --e-global-typography-text-font-family: "Poppins"; --e-global-typography-text-font-weight: 400; --e-global-typography-accent-font-family: "Poppins"; --e-global-typography-accent-font-weight: 200; } /* Listing pages: the listing template's bootstrap-style .row {margin:0 -15px} also hit Salient's footer container */ .nectar-global-section > .container.row, .nectar-global-section .container.normal-container.row { margin-left: auto !important; margin-right: auto !important; } /* Contact Form 7 + Material Design: the submit button is a grid item; let it span the row so it keeps its width */ .cfre-cf7 .wpcf7 .mdc-layout-grid__inner > input[type="submit"], .cfre-cf7 .wpcf7 .mdc-layout-grid__inner > button[type="submit"] { grid-column: 1 / -1; justify-self: start; } /* Homepage listing cards: photo fills its 4:3 frame (a Salient image rule set height:auto) */ .cfre-card .cfre-card__media img { width: 100% !important; height: 100% !important; object-fit: cover; } /* Sell + Lease: the step numbers sit above the slider; give them room under the heading */ body.page-id-1215 .cfre-sc .n2-section-smartslider, body.page-id-1234 .cfre-sc .n2-section-smartslider { margin-top: 56px; } /* Contact page pins a dark backdrop (.left-black, position:fixed, z-index:-1) behind its left half; keep the footer on top of it */ .cfre-gbp-strip, .nectar-global-section.nectar_hook_global_section_footer { position: relative; z-index: 5; } /* page rows use z-index 2 */ /* Contact: the dark left half was a fixed full-screen backdrop; inside the rebuilt rows it painted over the footer. Make it fill its own column instead (same look while reading, never over the footer). */ body.page-id-1520 .left-black { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; height: auto !important; z-index: -1; } /* ---- 11 Nov: old-site layout problems found by the fresh-eyes review ---- */ /* Rental yield calculator: the intro text kept its desktop 205px side padding on every screen (one word per line on phones) */ @media (max-width: 1023px) { body.page-id-1830 .wpb_text_column.e-f0a93dc { padding-left: 60px !important; padding-right: 60px !important; } } @media (max-width: 767px) { body.page-id-1830 .wpb_text_column.e-f0a93dc { padding-left: 0 !important; padding-right: 0 !important; } } /* Suburb pages: the market report rows ran edge to edge while the suburb block under them sits in a 1200px column. Line both up with the site's page edge: the block drops its own 20px (Salient's container already gives the side margin) and the report rows get the container's margin (90px from 1000px up, 6% below) with the same 1200px cap. Text inside the rows has 10px of its own. */ .main-content .cfre-suburb-hub { padding-left: 0; padding-right: 0; } body:has(.cfre-suburb-hub) .main-content .wpb_row.cfre-el > .row_col_wrap_12 { max-width: 1380px; margin-left: auto; margin-right: auto; padding-left: 80px; padding-right: 80px; } @media (max-width: 999px) { body:has(.cfre-suburb-hub) .main-content .wpb_row.cfre-el > .row_col_wrap_12 { padding-left: calc(6vw - 10px); padding-right: calc(6vw - 10px); } } /* ...and their "New properties" grid (fixed 400px cards) fills the narrower row: 3 across on wide screens, 2 on tablets */ @media (min-width: 768px) { body:has(.cfre-suburb-hub) .main-content .wpb_row.cfre-el .epl-shortcode-listing.loop-content { display: flex; flex-wrap: wrap; } body:has(.cfre-suburb-hub) .main-content .wpb_row.cfre-el .epl-shortcode-listing .epl-listing-post.epl-listing-grid-view { flex: 0 0 calc(50% - 32px); width: auto; max-width: none; } } @media (min-width: 1360px) { body:has(.cfre-suburb-hub) .main-content .wpb_row.cfre-el .epl-shortcode-listing .epl-listing-post.epl-listing-grid-view { flex-basis: calc(33.333% - 32px); } } /* Open Homes (epl-inspections, theme "modern" template). The theme's EPL stylesheet puts its one-column default after the wider-screen rules, so the photo-beside-details layout never applied. Each listing's tick box (for Print List) belongs on its photo. */ .epl-inspections-list .epl-property-blog-rec--inspections { border: 1px solid #e5e5e5; margin-bottom: 16px; overflow: hidden; } .epl-inspections-list .epl-row-wrap--featured-image { position: relative; } .epl-inspections-list .epl-row-wrap--featured-image .epl-inspection-times-checkbox { top: 10px; left: 10px; width: auto; } .epl-inspections-list .epl-row-wrap--featured-image .epl-inspection-times-checkbox label { padding-left: 30px; } .epl-inspections-list .epl-inspection-times-checkbox label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .epl-inspections-list .epl-blog-image img { display: block; } @media (min-width: 691px) { .epl-inspections-list .epl-property-blog-rec--inspections { grid-template-columns: 280px 1fr; align-items: stretch; } .epl-inspections-list .epl-row-wrap--featured-image, .epl-inspections-list .epl-row-wrap--featured-image .epl-row, .epl-inspections-list .epl-row-wrap--featured-image .epl-blog-image, .epl-inspections-list .epl-row-wrap--featured-image .epl-blog-image a { height: 100%; } .epl-inspections-list .epl-row-wrap--featured-image .epl-blog-image img { height: 100% !important; min-height: 187px; object-fit: cover; } .epl-inspections-list .epl-property-blog-rec--inspections .epl-row-wrap--content { align-self: center; } } @media (min-width: 1000px) { .epl-inspections-list .epl-property-blog-rec--inspections .epl-row-wrap--content { grid-template-columns: 1.8fr 1fr 1fr auto; } }