/** * Theme Name: Havenpro Child * Author: Jegtheme * Template: havenpro * Text Domain: havenpro-child * Description: Havenpro offers a refined, modern layout crafted for Real Estate & Property websites. With its clean structure and intuitive design, it highlights your listings, builds client confidence, and positions your brand as a trusted industry leader. * Theme URI: https://fse.jegtheme.com/havenpro/ * Author URI: https://support.jegtheme.com/ * Version: 1.0.0 * License: GNU General Public License v3 or later. * License URI: https://www.gnu.org/licenses/gpl-3.0.html * Tags: grid-layout,block-patterns,block-styles,full-site-editing,editor-style */ /* Form fields should only show a validation message once JS actually flags an invalid entry, and the submit spinner only while a request is in flight. Without that state toggling (no forms backend wired up yet) both default to visible, which reads as a broken form. */ .gutenverse-input-select ~ .validation-error, .main-wrapper .validation-error { display: none; } .gutenverse-input-submit-loader { display: none; } /* Home hero search widget: the submit button's pill-shaped wrapper was stretching to fill its full column width (via the generic .guten-inner-wrap{width:100%} rule) while the button inside only filled its own text size, leaving a dead empty pill trailing after it. Scoped to this instance's own class so no other wrapper site-wide is affected. */ .guten-fy3I7P, .guten-fy3I7P .guten-inner-wrap { width: fit-content !important; } /* Select fields (Location/Type/Price Range, etc.) are meant to be enhanced into a custom-styled dropdown by a JS library (Choices.js) that ships only with the paid Gutenverse Companion Pro add-on, which isn't installed. Without it they fall back to the raw, unstyled native browser itself — browsers don't render ::after on replaced form elements. NOTE: only relevant if Choices.js fails to load (see below for why the chevron itself was removed from here). */ .guten-form-input-select .main-wrapper { position: relative; } /* Same missing-Pro-plugin problem as the select fields: text/email/tel inputs and textareas (newsletter email, contact form fields) are meant to get the theme's minimal underline treatment but fall back to a plain bordered native box without it. The reference theme demo (fse.jegtheme.com/havenpro) shows these as transparent-background, bottom-border-only fields — matching that here instead of leaving the default browser input box. Default (dark-on-light) suits the Contact page's light card; the footer newsletter override below flips it for its dark navy background. */ input.gutenverse-input, textarea.gutenverse-input { background: transparent; border: none; border-bottom: 1px solid rgba(20, 35, 61, 0.3); border-radius: 0; width: 100%; padding: 8px 4px; font-size: 15px; color: #14233D; } input.gutenverse-input::placeholder, textarea.gutenverse-input::placeholder { color: rgba(20, 35, 61, 0.55); } /* Footer newsletter sits on the dark navy .guten-yfR8BF section — light underline and text instead of the dark default above. */ .guten-yfR8BF input.gutenverse-input { border-bottom-color: rgba(255, 255, 255, 0.4); color: #fff; } .guten-yfR8BF input.gutenverse-input::placeholder { color: rgba(255, 255, 255, 0.7); } /* The theme's "full-width" template (used by Privacy Policy, Terms, and Disclaimer) renders post-content with no top offset or width constraint at all, so it collides with the fixed header and runs edge-to-edge. Every other page using this template has its own hero pattern providing that clearance; these plain content pages don't, so add it directly. IMPORTANT: every page on the site shares this same .guten-post-content wrapper (it's the generic block that renders a page's body), so this must be scoped to just these 3 legal pages via their page-id-* body class — an unscoped rule here previously capped the ENTIRE site (Home, About, everything) to 860px wide on any screen wider than that, which is the bug that was just reported. */ .page-id-67 .guten-post-content, .page-id-68 .guten-post-content, .page-id-69 .guten-post-content { max-width: 860px; margin: 0 auto; padding: 160px 24px 100px; } .page-id-67 .guten-post-content h1, .page-id-68 .guten-post-content h1, .page-id-69 .guten-post-content h1 { color: #14233D; margin-bottom: 8px; } .page-id-67 .guten-post-content h2, .page-id-68 .guten-post-content h2, .page-id-69 .guten-post-content h2 { color: #14233D; margin-top: 36px; margin-bottom: 12px; } .page-id-67 .guten-post-content p, .page-id-67 .guten-post-content li, .page-id-68 .guten-post-content p, .page-id-68 .guten-post-content li, .page-id-69 .guten-post-content p, .page-id-69 .guten-post-content li { margin-bottom: 12px; line-height: 1.6; } /* Stat counters ("Years of Experience", "Properties Sold", etc.) are pure JS count-up animations with zero static fallback text — the is empty in the raw HTML and relies entirely on the same broken frontend.js to fill in a number. That part is expected. What's NOT expected: the Fun_Fact block's own PHP render_callback hardcodes data-safe="25"/"9"/"150" regardless of the safeNumber value actually stored in the page content — confirmed by comparing parse_blocks() (correct, edited values) against do_blocks() output (still the theme's original demo numbers) in isolation. This is a bug inside the third-party plugin's rendering, not a caching or content issue, so content edits alone can't fix it. Overriding the displayed number directly per block instance (element IDs are reused identically across Home and About) instead of via data-safe. */ /* The animated counter widget renders more than just the empty .number span — there's also a separate "0" placeholder digit from its odometer-style animation that stays stuck at its starting frame since the JS that would animate it never runs. Rather than chase every piece it renders, hide all of the widget's own number output and replace the whole thing with one clean static value. */ .guten-rWz5q9 .number-wrapper > *, .guten-AUEx6n .number-wrapper > *, .guten-9F9C4v .number-wrapper > *, .guten-Ja5WyB .number-wrapper > * { display: none !important; } .guten-rWz5q9 .number-wrapper::after { content: "3+"; } .guten-AUEx6n .number-wrapper::after { content: "45+"; } .guten-9F9C4v .number-wrapper::after { content: "60+"; } .guten-Ja5WyB .number-wrapper::after { content: "60+"; } /* Scroll-reveal animations ("fadeInUp" etc.) rely on JS removing the guten-element-hide class when an element scrolls into view. That JS path is broken sitewide (a real bug in the theme's bundled frontend.js: it throws "addFilter is not a function" and never completes), so any element still carrying guten-element-hide stays permanently visibility:hidden — including the homepage's main hero headline and the FAQ accordion questions/answers. Since the JS can't be relied on, force every such element visible unconditionally; this sacrifices the fade-in entrance animation but guarantees the content is never silently invisible. */ .guten-element-hide { visibility: visible !important; } /* The visibility:hidden gate above is only half of it — these elements also carry a CSS animation (fadeInUp etc.) whose 0% keyframe is opacity:0, and the JS that's supposed to trigger the animation to actually play never runs (same broken frontend.js). Without that trigger the element sits frozen at the animation's opacity:0 starting state forever. Removing the animation outright guarantees the content just shows immediately instead of staying invisible. */ .animated.guten-element-hide { animation: none !important; opacity: 1 !important; transform: none !important; } /* Accordion (FAQ, Properties "Everything You Need to Know"): an "active" item's .accordion-body defaults to height:0;overflow:hidden and relies entirely on JS to measure its content and set an inline pixel height to reveal it — no height is ever server-rendered. Same broken frontend.js as the scroll-reveal issue above means that measurement sometimes never runs (or runs against a stale/zero measurement), leaving an "active" item's real answer text clipped to near-zero height — it's still there and still gets painted, just squeezed into a couple of visible pixels, which reads as faint illegible text rather than fully hidden. height:auto removes the dependency on JS entirely for whichever item already carries the "active" class. */ .accordion-item.active .accordion-body { height: auto !important; } /* Home hero headline: white text with only a 10%-opacity shadow reads fine against the theme's original dark villa photo, but against our bright Toronto sky it has almost no contrast (barely legible). Give it a stronger, still-subtle dark shadow rather than a glow/halo. */ .guten-zvMTIB { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.5) !important; } /* About page "01/02/03" feature list: items 01 and 02 render fine, but 03 consistently renders washed-out/faint despite byte-identical computed CSS (color, opacity, font, weight, blend-mode, no overlay element anywhere in the stack at that point — verified directly via elementsFromPoint). Root cause: the three items live inside .guten-e05Zpr, a fixed 400px-tall viewport (unique to this page) with a plain :hover{transform:translateY(-480px)} reveal — 01/02 show at rest, hovering shifts the strip up to reveal 03, and item 03's resting position sits partly under a decorative white-to-transparent gradient fade mask meant to sell the "scrolling into view" illusion. That's a bad pattern for a client-facing static page regardless of the exact rendering quirk: it requires discovering a hover target that gives no visual affordance, so most visitors would never see 03 clearly at all. Removing the fixed height/clip/hover-shift entirely makes all three items simply visible at once, same as 01/02. */ .guten-e05Zpr.guten-element { height: auto !important; } .guten-e05Zpr { overflow: visible !important; transform: none !important; } /* With the fixed-height ticker removed above, the 01-05 list is now taller than the portrait photo in the column next to it. This section's own "align-stretch overflow-hidden" (Gutenverse utility classes, matching flex columns to the same height) then clipped whatever ran past the photo's height — item 05 "Innovative Standards" was getting the exact same partial-clip treatment 03 had before. The photo column doesn't need to match the text column's height (nothing else in this row depends on equal heights), so let the section overflow normally instead of clipping to the shorter column. */ .guten-A79o7u { overflow: visible !important; } /* Header "Contact Our Agent" widget: the icon-box's .body-inner always gets a white card background by default (var(--guten-bg-color), a plugin-wide baseline), which made the white title/phone text on it invisible — same bug exists in the official theme demo itself. Rather than darken the text to fit an unwanted white card, remove the card and keep the text white, matching how the nav links sit directly on the transparent header with no card behind them either. */ .guten-R92JQG .body-inner { background: transparent !important; box-shadow: none !important; } .guten-R92JQG .body-title, .guten-AFC9HU .guten-button span { color: #fff !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } /* Logo: the reference theme's header/footer logo is white, and ours was still the navy version — barely readable in the dark navy footer, and inconsistent with the reference's look in the header. The logo is a flat two-tone raster (navy + mid-blue), so brightness(0) collapses it to a solid black silhouette (alpha preserved) and invert(1) flips that to solid white — the standard trick for recoloring a raster logo without a separate white-only source asset. Drop-shadow keeps it legible over lighter parts of hero photos, same reasoning as the hero headline's text-shadow. */ img[src*="cloudhous-logo-horizontal"] { filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5)); } /* Property card "brand" badges (Blossom, Leafe, Terra, Minty, Dune, Greenish, ProNature): leftover theme-demo watermark logos pulled directly from designer.gutenverse.com, never swapped for anything of ours — a lotus/leaf icon reading "Blossom" on a "Luxury Beach House" card makes no sense for a real estate listing, so hide them outright rather than invent a fake alternative brand mark. */ img[src*="blossom-logo.webp"], img[src*="logo-leaf.webp"], img[src*="terra-logo-client.webp"], img[src*="minty-logo.webp"], img[src*="logo-dune.webp"], img[src*="greenish-logo.webp"], img[src*="pronature.webp"] { display: none !important; } /* Choices.js dropdown list: its width matches the (fairly narrow) closed select box, so longer option text like "$1,500,000 - $3,000,000" wraps awkwardly across multiple lines. Let the open list size to its content instead of staying pinned to the closed width. */ .guten-form-input-select .choices__list--dropdown { width: max-content; min-width: 100%; max-width: 260px; } .guten-form-input-select .choices__list--dropdown .choices__item { white-space: nowrap; } /* The Choices.js library ships with only its own bare default look (small, square-cornered, #f9f9f9 grey box) since this theme never included styling for it beyond the CSS variables the paid Companion Pro add-on would normally supply — the closed Location/Type/Price Range fields on the homepage search widget were rendering as plain, unstyled input boxes instead of matching the site's premium look. Restyling the closed control directly to a clean rounded card that matches the search widget's own rounded/blurred container. */ .guten-form-input-select .choices__inner { background-color: #fff; border: none; border-radius: 14px; min-height: 56px; padding: 16px 40px 16px 20px; font-size: 15px; box-shadow: 0 1px 4px rgba(20, 35, 61, 0.1); } .guten-form-input-select .choices__list--single { padding: 0; } .guten-form-input-select .choices__list--single .choices__item { color: #14233D; } .guten-form-input-select .choices__placeholder { color: rgba(20, 35, 61, 0.55); opacity: 1; } .guten-form-input-select .choices__list--dropdown { border-radius: 12px; border: none; box-shadow: 0 8px 24px rgba(20, 35, 61, 0.16); margin-top: 6px; overflow: hidden; } .guten-form-input-select .choices__list--dropdown .choices__item--selectable { padding: 12px 16px; color: #14233D; } .guten-form-input-select .choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: rgba(61, 125, 203, 0.1); } /* Choices.js ships its own dropdown-arrow indicator built in (.choices[data-type*=select-one]:after, a plain CSS-triangle) — our separate ::after chevron on .main-wrapper (originally added as a fallback for the raw, pre-Choices native