/* Theme Name: Jacob Realty Clone Theme URI: https://jacobrealtytx.com/ Description: Standalone static replica of jacobrealtytx.com. Reproduces 129 pages with no parent theme, no page builder and no plugins. Page markup is baked into template parts and the theme routes URLs to them itself, so it renders correctly on a bare WordPress install with no content created. Author: Building Brands Marketing Author URI: https://www.buildingbrandsmarketing.com/ Version: 1.0.4 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: jacobrealty-clone Tags: real-estate, static-replica */ /* * The source site's stylesheets are mirrored under assets/ and emitted per * page by jr_head_assets() in functions.php, preserving the original order and * inline blocks. This file intentionally carries only the theme header plus * small corrections that the replica needs. */ /* Cloudflare's email obfuscation is decoded at build time; these spans replace the placeholders and must inherit link styling. */ .jr-email { color: inherit; text-decoration: inherit; } /* * Homepage header. * * The source homepage uses a transparent "trans-header" pulled over the hero * with `#main-content { margin-top: -230px }`. That value is calibrated to the * live header height and only looks right once the theme's scroll JS adds the * `sticky` class that turns the header opaque white. On this static replica * that JS does not initialise, so the header stayed transparent and the hero * rendered on top of the navigation. * * Render the header as a solid white bar in normal flow instead -- the same * end state the sticky class produces -- so the layout is correct without * depending on runtime JS. Homepage only; interior pages are unaffected. */ #home #header-wrap.trans-header { position: relative !important; background: #ffffff !important; } /* Size the placeholder to the nav. The source collapses it to 0 for the transparent overlay, but the search bar (#header-search-wrap) is a sibling of the placeholder, so a 0-height placeholder makes the search bar render on top of the nav. `auto` lets the nav reserve its height and the search bar sits below it. */ #home #header-wrap-placeholder { height: auto !important; } #home #main-content.trans-header { margin-top: 0 !important; top: 0 !important; } /* The captured homepage ends with an empty Elementor HTML container that only carried source-site CSS. Elementor still reserves vertical space for it, leaving a white band between the final CTA and the footer. */ #home .elementor-43026 .elementor-element.elementor-element-cb3857a { display: none !important; } /* * Accordion icon fallback. * * FAQ accordions use Font Awesome angle icons in the captured markup. When the * icon font does not load, browsers render small square glyphs. Draw the * chevrons and plus/minus marks in CSS so the accordion controls stay legible. */ .elementor-widget-n-accordion .e-n-accordion-item-title-icon i.fa-angle-up, .elementor-widget-n-accordion .e-n-accordion-item-title-icon i.fa-angle-down, .elementor-widget-n-accordion .e-n-accordion-item-title-icon i.fa-plus, .elementor-widget-n-accordion .e-n-accordion-item-title-icon i.fa-minus, .elementor-accordion .elementor-accordion-icon i.fa-angle-up, .elementor-accordion .elementor-accordion-icon i.fa-angle-down, .elementor-accordion .elementor-accordion-icon i.fa-plus, .elementor-accordion .elementor-accordion-icon i.fa-minus { display: inline-block !important; position: relative; width: 16px; height: 16px; color: inherit !important; font-family: inherit !important; font-size: 0 !important; line-height: 1 !important; vertical-align: middle; } .elementor-widget-n-accordion .e-n-accordion-item-title-icon i.fa-angle-up::before, .elementor-widget-n-accordion .e-n-accordion-item-title-icon i.fa-angle-down::before, .elementor-accordion .elementor-accordion-icon i.fa-angle-up::before, .elementor-accordion .elementor-accordion-icon i.fa-angle-down::before { content: "" !important; position: absolute; left: 4px; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; } .elementor-widget-n-accordion .e-n-accordion-item-title-icon i.fa-angle-down::before, .elementor-accordion .elementor-accordion-icon i.fa-angle-down::before { top: 2px; transform: rotate(45deg); } .elementor-widget-n-accordion .e-n-accordion-item-title-icon i.fa-angle-up::before, .elementor-accordion .elementor-accordion-icon i.fa-angle-up::before { top: 6px; transform: rotate(225deg); } .elementor-widget-n-accordion .e-n-accordion-item-title-icon i.fa-plus::before, .elementor-widget-n-accordion .e-n-accordion-item-title-icon i.fa-minus::before, .elementor-accordion .elementor-accordion-icon i.fa-plus::before, .elementor-accordion .elementor-accordion-icon i.fa-minus::before { content: "" !important; position: absolute; left: 2px; right: 2px; top: 7px; border-top: 2px solid currentColor; } .elementor-widget-n-accordion .e-n-accordion-item-title-icon i.fa-plus::after, .elementor-accordion .elementor-accordion-icon i.fa-plus::after { content: "" !important; position: absolute; top: 2px; bottom: 2px; left: 7px; border-left: 2px solid currentColor; } /* * Font Awesome loads on the demo (FA5 Free + Brands), so the social icons and * CTA chevrons render as their real glyphs, exactly like the live site. The * earlier text/CSS-drawn fallbacks (TEL / @ / f / in / >> ...) were removed * because they overrode those working glyphs with plain-text stand-ins. */ /* * Footer corrections. * * The captured footer menu in the demo differs from the live legal row, and * the icon font path can fail on the standalone clone. Keep the footer close * to the source screenshot with local CSS and inline SVG social marks. */ #footer-widgets.footer-widgets-style-one-wrap { background: #ffffff !important; } #footer-widgets .dark-overlay { background-color: rgba(216, 151, 57, 0.13) !important; padding: 40px 0 44px; } #footer-widgets .container { max-width: 1542px; width: calc(100% - 342px); } #footer-widgets .widget { margin-bottom: 0; } #footer-widgets #text-4 p:first-child { margin-bottom: 26px; } #footer-widgets #text-4 img { display: block; margin: 0 auto; } #footer-widgets .footer-logo-link { display: block; text-decoration: none; } #footer-widgets #text-4 p:last-child { max-width: 360px; } /* !important throughout this footer block: this theme is also deployed on at least one live install carrying its own older Customizer "Additional CSS" with duplicate/stale footer-widget-title and text-size rules (from before these titles were h3). Those rules live in that site's database, outside this repo, so win on !important here rather than depend on load order. */ #footer-widgets .footer-widget-title, body #footer-widgets .footer-widget-title, html body #footer-widgets h3.footer-widget-title { margin-bottom: 20px !important; font-size: 28px !important; font-weight: 700 !important; letter-spacing: 4px !important; line-height: 1.2 !important; border-bottom: none !important; text-decoration: none !important; color: #000000 !important; } #footer-widgets .widget_text p, #footer-widgets .widget_text a { font-size: 18px !important; line-height: 1.75 !important; } #footer-widgets #text-4 p, #footer-widgets #text-4 p:last-child { font-size: 18px !important; line-height: 1.5 !important; } #footer-widgets #nav_menu-2 li { border-bottom: none !important; } #footer-widgets #nav_menu-2 li a { display: block !important; padding: 0 !important; margin-bottom: 10px !important; border-bottom: none !important; font-size: 15px !important; line-height: 1.5 !important; } #footer-widgets #text-6 img { display: block; width: 365px; max-width: 100%; height: auto; border: 13px solid #082a03; } #footer-widgets #text-6 p { margin-bottom: 20px; } #footer-widgets .footer-social-icons { display: flex; align-items: center; gap: 21px; margin-top: 25px; } #footer-widgets .footer-social-icons .social-link { display: inline-flex; width: 18px; height: 18px; color: #000000 !important; line-height: 1; text-decoration: none; } #footer-widgets .footer-social-icons svg { display: block; width: 100%; height: 100%; fill: currentColor; } footer#site-footer { border-top: 0 !important; background: #ffffff !important; } footer#site-footer .footer-bottom-inner { display: flex; justify-content: center; align-items: center; min-height: 60px; text-align: center; } footer#site-footer .footer-legal, footer#site-footer .footer-legal a, footer#site-footer .footer-legal span { color: #000000 !important; font-size: 20px; line-height: 1.5; } footer#site-footer .footer-legal a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } footer#site-footer .footer-separator { display: inline-block; margin: 0 9px; } @media only screen and (max-width: 1500px) { #footer-widgets .container { width: min(90%, 1240px); } } @media only screen and (max-width: 959px) { #footer-widgets .dark-overlay { padding: 40px 0 52px; } #footer-widgets .container { width: 90%; } #footer-widgets #text-4, #footer-widgets #text-5, #footer-widgets #nav_menu-2, #footer-widgets #text-6 { width: 100% !important; margin-left: 0 !important; margin-bottom: 34px; } #footer-widgets #text-4 p:last-child { max-width: none; } footer#site-footer .footer-bottom-inner { min-height: 88px; } } @media only screen and (max-width: 640px) { #footer-widgets .widget_text p, #footer-widgets .widget_text a, #footer-widgets #text-4 p, #footer-widgets #text-4 p:last-child, #footer-widgets #nav_menu-2 li a, footer#site-footer .footer-legal, footer#site-footer .footer-legal a, footer#site-footer .footer-legal span { font-size: 15px; } } /* * Mobile menu toggle. * * The theme's slide-push mobile menu (#cbp-spmenu) is opened by JS that does * not run on the static replica, so the hamburger was dead and mobile users * had no navigation (the desktop nav is hidden below the breakpoint). * jr_mobile_menu() in functions.php toggles the `jr-nav-open` class; these * rules slide the menu in and reveal the backdrop. */ #cbp-spmenu.jr-nav-open { right: 0 !important; left: auto !important; } #ct-menu-backdrop.jr-nav-open { display: block !important; opacity: 1 !important; pointer-events: auto !important; } /* * Mobile hero height. * * The homepage hero (elementor-element-fb3e7e7) carries 390px of top padding * from its desktop design, never reduced for mobile -- ballooning the hero to * ~1130px and pushing the heading and CTA far down the screen. Trim the * vertical padding on phones so the hero is roughly one screen tall and the * content sits near the top. */ @media (max-width: 767px) { .elementor-element-fb3e7e7 > .e-con-inner { padding-top: 110px !important; padding-bottom: 56px !important; } } /* Property Management hero (page-id-41942): restore the site's normal hero spacing (80px top/bottom, matching the other hero sections) after an earlier over-tightened pass left the content cramped against the edges. */ .elementor-41942 .elementor-element.elementor-element-fb3e7e7 { --padding-top: 80px !important; --padding-bottom: 80px !important; } /* * Mobile footer: tighten the space under the review logos. * * On mobile the footer columns stack and the REVIEW US widget (#text-6) is * last. Its trailing paragraph margin (33px), the widget's own bottom margin * (34px) and the footer's bottom padding stacked to ~139px of empty space * under the Google/Facebook badges. Trim them to a tidy ~40px. */ @media (max-width: 767px) { #footer-widgets #text-6 p:last-child { margin-bottom: 0 !important; } #footer-widgets #text-6 { margin-bottom: 0 !important; } #footer-widgets .dark-overlay { padding-bottom: 20px !important; } } /* ------------------------------------------------------------------------- * Agent Bio template (page-agent-bio.php) — structured ACF profile layout, * styled to mirror the live agent hero (full-bleed background, photo left, * name / role / tagline / memberships / contact / social / CTA on the right). * ---------------------------------------------------------------------- */ .jr-ab-container{max-width:1140px;margin:0 auto;padding:0 15px;} /* Hero */ .jr-ab-hero{position:relative;background-size:cover;background-position:center center;background-repeat:no-repeat;padding:60px 0;overflow:hidden;} .jr-ab-hero-overlay{position:absolute;inset:0;background:rgba(255,255,255,.72);} .jr-ab-hero-inner{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;gap:40px;} .jr-ab-hero-photo{flex:0 0 340px;max-width:340px;} .jr-ab-hero-photo img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.18);} .jr-ab-hero-body{flex:1 1 380px;min-width:300px;} .jr-ab-name{font-family:"Roboto",sans-serif;font-size:52px;line-height:1.02;font-weight:700;color:#222;margin:0 0 2px;text-transform:uppercase;} .jr-ab-name .jr-ab-creds{font-size:.5em;font-weight:600;vertical-align:super;} .jr-ab-role{font-family:"Roboto",sans-serif;font-size:26px;font-weight:600;color:var(--e-global-color-primary,#1b873f);margin:0 0 14px;} .jr-ab-tagline{font-size:17px;color:#333;margin:0 0 18px;} .jr-ab-sub,.jr-ab-memberships .jr-ab-sub{font-weight:700;letter-spacing:.02em;margin:0 0 6px;color:#222;} .jr-ab-memberships ul{list-style:none;margin:0 0 18px;padding:0;} .jr-ab-memberships li{margin:2px 0;color:#333;} .jr-ab-contact p{margin:2px 0;font-weight:700;color:#222;} .jr-ab-contact p span{color:#222;} .jr-ab-contact a{color:var(--e-global-color-primary,#1b873f);font-weight:600;text-decoration:none;} .jr-ab-social{display:flex;gap:12px;margin:18px 0;} .jr-ab-social-ic{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:8px;color:#fff;font-weight:700;font-size:18px;text-decoration:none;line-height:1;} .jr-ab-phone{background:#1b873f;} .jr-ab-fb{background:#1877f2;font-family:Georgia,serif;} .jr-ab-yt{background:#ff0000;font-size:15px;} .jr-ab-cta{display:flex;flex-wrap:wrap;gap:12px;} .jr-ab-btn{display:inline-block;background:#1b873f;color:#fff;font-weight:700;font-size:13px;letter-spacing:.03em;padding:11px 18px;border-radius:4px;text-decoration:none;} .jr-ab-btn:hover{background:#14682f;} /* About */ .jr-ab-about{padding:46px 0;} .jr-ab-about-heading{font-family:"Roboto",sans-serif;font-size:32px;font-weight:700;color:var(--e-global-color-primary,#1b873f);text-transform:uppercase;margin:0 0 18px;} .jr-ab-bio{line-height:1.8;color:#333;font-size:16px;} .jr-ab-bio p{margin:0 0 16px;} /* Featured listings */ .jr-ab-featured{padding:20px 0 60px;} .jr-ab-featured-heading{font-family:"Roboto",sans-serif;font-size:32px;font-weight:700;color:var(--e-global-color-primary,#1b873f);text-transform:uppercase;text-align:center;margin:0 0 30px;} .jr-ab-featured .elementor-loop-container{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} .jr-ab-featured .e-loop-item{border-radius:21px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.08);background:#fff;} .jr-ab-featured .elementor-element-48872bd{min-height:180px;background-position:center center;background-size:cover;border-radius:7px 7px 0 0;} .jr-ab-featured .elementor-element-42bbc42{padding:20px 15px;} .jr-ab-featured .elementor-element-f17c8b6{display:flex;gap:6px;} /* Review */ .jr-ab-review{padding:0 0 50px;} .jr-ab-review img{display:block;max-width:760px;margin:0 auto;} @media(max-width:1024px){.jr-ab-featured .elementor-loop-container{grid-template-columns:repeat(2,1fr);}} @media(max-width:767px){ .jr-ab-hero-inner{gap:24px;} .jr-ab-hero-photo{flex:0 0 100%;max-width:320px;margin:0 auto;} .jr-ab-name{font-size:38px;} .jr-ab-featured .elementor-loop-container{grid-template-columns:1fr;} } /* ------------------------------------------------------------------------- * County Page template (page-county.php) — structured ACF county landing. * ---------------------------------------------------------------------- */ .jr-ct-container{max-width:1140px;margin:0 auto;padding:0 15px;} .jr-ct-hero{position:relative;background-size:cover;background-position:center center;background-repeat:no-repeat;padding:80px 0;overflow:hidden;text-align:center;} .jr-ct-hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.42);} .jr-ct-hero-inner{position:relative;} .jr-ct-name{font-family:"Roboto",sans-serif;font-size:52px;line-height:1.05;font-weight:700;color:#fff;margin:0 0 10px;text-transform:uppercase;} .jr-ct-towns{font-family:"Roboto",sans-serif;font-size:22px;font-weight:600;letter-spacing:.06em;color:#fff;margin:0 0 22px;text-transform:uppercase;} .jr-ct-btn{display:inline-block;background:var(--e-global-color-primary,#1b873f);color:#fff;font-weight:700;font-size:15px;letter-spacing:.03em;padding:14px 30px;border-radius:4px;text-decoration:none;text-transform:uppercase;} .jr-ct-btn:hover{background:#14682f;} .jr-ct-body{padding:50px 0;} .jr-ct-body-inner{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;} .jr-ct-content{flex:1 1 520px;min-width:300px;line-height:1.8;color:#333;font-size:16px;} .jr-ct-content h2{font-family:"Roboto",sans-serif;font-size:26px;font-weight:700;color:var(--e-global-color-primary,#1b873f);text-transform:uppercase;margin:0 0 14px;} .jr-ct-content h2+h2{font-size:20px;color:#222;margin-top:-6px;} .jr-ct-content p{margin:0 0 16px;} .jr-ct-map{flex:0 0 380px;max-width:380px;} .jr-ct-map img{display:block;width:100%;height:auto;border-radius:10px;} .jr-ct-listings{padding:10px 0 60px;} .jr-ct-listings-heading{font-family:"Roboto",sans-serif;font-size:30px;font-weight:700;color:var(--e-global-color-primary,#1b873f);text-transform:uppercase;text-align:center;margin:0 0 28px;} .jr-ct-listings .elementor-loop-container{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} .jr-ct-listings .e-loop-item{border-radius:21px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.08);background:#fff;} .jr-ct-listings .elementor-element-48872bd{min-height:180px;background-position:center center;background-size:cover;border-radius:7px 7px 0 0;} .jr-ct-listings .elementor-element-42bbc42{padding:20px 15px;} .jr-ct-listings .elementor-element-f17c8b6{display:flex;gap:6px;} @media(max-width:1024px){.jr-ct-listings .elementor-loop-container{grid-template-columns:repeat(2,1fr);}} @media(max-width:767px){ .jr-ct-name{font-size:36px;} .jr-ct-map{flex:0 0 100%;max-width:100%;} .jr-ct-listings .elementor-loop-container{grid-template-columns:1fr;} } /* ------------------------------------------------------------------------- * Region Page template (page-region.php) — structured ACF region landing. * ---------------------------------------------------------------------- */ .jr-rg-container{max-width:1140px;margin:0 auto;padding:0 15px;} .jr-rg-hero{position:relative;background-size:cover;background-position:center center;background-repeat:no-repeat;padding:80px 0;overflow:hidden;text-align:center;} .jr-rg-hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);} .jr-rg-hero-inner{position:relative;} .jr-rg-name{font-family:"Roboto",sans-serif;font-size:52px;line-height:1.05;font-weight:700;color:#fff;margin:0;text-transform:uppercase;} .jr-rg-intro{padding:40px 0 10px;text-align:center;} .jr-rg-map{margin:0 auto 20px;max-width:680px;} .jr-rg-map img{display:block;width:100%;height:auto;} .jr-rg-introbody{max-width:820px;margin:0 auto;line-height:1.8;color:#333;font-size:16px;} .jr-rg-tiles-sec{padding:30px 0 60px;} .jr-rg-tiles-heading{font-family:"Roboto",sans-serif;font-size:30px;font-weight:700;color:var(--e-global-color-primary,#1b873f);text-transform:uppercase;text-align:center;margin:0 0 30px;} .jr-rg-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} .jr-rg-tile{display:block;text-decoration:none;color:#222;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.08);transition:transform .15s ease,box-shadow .15s ease;} .jr-rg-tile:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.14);} .jr-rg-tile img{display:block;width:100%;height:auto;} .jr-rg-tile-label{display:block;padding:10px 8px;text-align:center;font-weight:600;font-size:15px;} .jr-rg-cta{padding:0 0 60px;text-align:center;} .jr-rg-cta-heading{font-family:"Roboto",sans-serif;font-size:26px;font-weight:700;color:var(--e-global-color-primary,#1b873f);text-transform:uppercase;margin:0 0 18px;} .jr-rg-btn{display:inline-block;background:var(--e-global-color-primary,#1b873f);color:#fff;font-weight:700;font-size:14px;letter-spacing:.03em;padding:13px 26px;border-radius:4px;text-decoration:none;text-transform:uppercase;} .jr-rg-btn:hover{background:#14682f;} @media(max-width:1024px){.jr-rg-tiles{grid-template-columns:repeat(3,1fr);}} @media(max-width:767px){.jr-rg-name{font-size:36px;}.jr-rg-tiles{grid-template-columns:repeat(2,1fr);}} /* ------------------------------------------------------------------------- * Page Sections template (page-sections.php) — flexible-content blocks. * ---------------------------------------------------------------------- */ .jr-sections{--jr-accent:var(--e-global-color-primary,#1b873f);} .jr-sections .jr-sec{max-width:1140px;margin:0 auto;padding:26px 15px;} .jr-sections .jr-sec-h{font-family:"Roboto",sans-serif;font-size:30px;font-weight:700;color:var(--jr-accent);margin:0 0 16px;} .jr-sections .align-center{text-align:center;} .jr-sec-hero{max-width:none;position:relative;padding:70px 15px;text-align:center;background-size:cover;background-position:center;} .jr-sec-hero .jr-sec-inner,.jr-sec-cta .jr-sec-inner{max-width:1140px;margin:0 auto;position:relative;} .jr-sec-hero.has-bg{color:#fff;} .jr-sec-hero-ov{position:absolute;inset:0;background:rgba(0,0,0,.45);} .jr-sec-hero-h{font-family:"Roboto",sans-serif;font-size:46px;line-height:1.08;font-weight:700;margin:0 0 12px;} .jr-sec-hero.has-bg .jr-sec-hero-h,.jr-sec-hero.has-bg .jr-sec-hero-sub{color:#fff;} .jr-sec-hero-sub{font-size:20px;font-weight:600;margin:0 0 20px;color:var(--jr-accent);} .jr-sec-rich .jr-sec-body{line-height:1.8;color:#333;font-size:16px;} .jr-sec-rich .jr-sec-body p{margin:0 0 16px;} .jr-sec-image img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:8px;} .jr-sec-btn{display:inline-block;background:var(--jr-accent);color:#fff;font-weight:700;font-size:14px;letter-spacing:.03em;padding:13px 26px;border-radius:4px;text-decoration:none;text-transform:uppercase;} .jr-sec-btn:hover{filter:brightness(.92);} .jr-sec-buttonwrap.align-center{text-align:center;} .jr-sec-cardgrid{display:grid;gap:22px;} .jr-sec-cardgrid.cols-2{grid-template-columns:repeat(2,1fr);} .jr-sec-cardgrid.cols-3{grid-template-columns:repeat(3,1fr);} .jr-sec-cardgrid.cols-4{grid-template-columns:repeat(4,1fr);} .jr-sec-card{background:#fff;border:1px solid #eee;border-radius:10px;padding:22px;box-shadow:0 3px 12px rgba(0,0,0,.05);} .jr-sec-card-img{width:64px;height:64px;object-fit:contain;margin:0 0 12px;} .jr-sec-card-title{font-size:19px;font-weight:600;margin:0 0 8px;color:#222;} .jr-sec-card-text{line-height:1.6;color:#444;margin:0 0 10px;} .jr-sec-faq-item{border-bottom:1px solid #e5e5e5;padding:12px 0;} .jr-sec-faq-item summary{cursor:pointer;font-weight:600;font-size:17px;color:#222;list-style:none;} .jr-sec-faq-item summary::-webkit-details-marker{display:none;} .jr-sec-faq-item summary::after{content:"+";float:right;color:var(--jr-accent);font-weight:700;} .jr-sec-faq-item[open] summary::after{content:"\2013";} .jr-sec-faq-a{padding:10px 0 2px;line-height:1.7;color:#444;} .jr-sec-tstgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;} .jr-sec-tst-item{background:#f7f7f7;border-left:4px solid var(--jr-accent);border-radius:6px;padding:20px;margin:0;} .jr-sec-tst-q{font-style:italic;line-height:1.7;color:#333;margin:0 0 10px;} .jr-sec-tst-a{font-weight:700;color:var(--jr-accent);font-style:normal;} .jr-sec-cta{max-width:none;background:#f2f6f3;text-align:center;padding:50px 15px;} .jr-sec-cta-h{font-size:30px;font-weight:700;color:var(--jr-accent);margin:0 0 10px;} .jr-sec-cta-sub{font-size:17px;color:#333;margin:0 0 20px;} .jr-sec-raw{max-width:1140px;margin:0 auto;padding:10px 15px;} @media(max-width:1024px){.jr-sec-cardgrid.cols-4{grid-template-columns:repeat(2,1fr);}.jr-sec-cardgrid.cols-3{grid-template-columns:repeat(2,1fr);}} @media(max-width:767px){.jr-sec-hero-h{font-size:32px;}.jr-sec-h{font-size:24px;}.jr-sec-cardgrid,.jr-sec-tstgrid{grid-template-columns:1fr;}} /* Listings Grid block inside Page Sections */ .jr-sec-listings{max-width:1140px;margin:0 auto;padding:26px 15px;} .jr-sec-listings .elementor-loop-container{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} .jr-sec-listings .e-loop-item{border-radius:21px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.08);background:#fff;} .jr-sec-listings .elementor-element-48872bd{min-height:180px;background-position:center center;background-size:cover;border-radius:7px 7px 0 0;} .jr-sec-listings .elementor-element-42bbc42{padding:20px 15px;} .jr-sec-listings .elementor-element-f17c8b6{display:flex;gap:6px;} @media(max-width:1024px){.jr-sec-listings .elementor-loop-container{grid-template-columns:repeat(2,1fr);}} @media(max-width:767px){.jr-sec-listings .elementor-loop-container{grid-template-columns:1fr;}} /* ------------------------------------------------------------------------- * Homepage fixes: search cards (bg images 404 + white text) and testimonials. * ---------------------------------------------------------------------- */ a.e-con[href="/ranches/"], a.e-con[href="/featured-listings/"], a.e-con[href="/commercial-real-estate/"] { background-color: #1b873f !important; min-height: 200px; display: flex; align-items: center; justify-content: center; border-radius: 12px; padding: 24px; text-align: center; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.12); transition: transform .15s ease, box-shadow .15s ease; } a.e-con[href="/ranches/"]:hover, a.e-con[href="/featured-listings/"]:hover, a.e-con[href="/commercial-real-estate/"]:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.22); } a.e-con[href="/ranches/"] .elementor-heading-title, a.e-con[href="/featured-listings/"] .elementor-heading-title, a.e-con[href="/commercial-real-estate/"] .elementor-heading-title { color: #fff !important; font-size: 24px; font-weight: 700; margin: 0; } /* Trustindex testimonials -> clean card grid */ .ti-reviews-container-wrapper { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; } .ti-review-item { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 22px 22px 24px; box-shadow: 0 4px 16px rgba(0,0,0,.06); } .ti-inner { display: block; } .ti-review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .ti-profile-img { width: 40px; height: 40px; border-radius: 50%; background: #1b873f; flex: 0 0 40px; } .ti-name { font-weight: 700; color: #222; font-size: 16px; } .ti-tooltip, .ti-verified-tooltip, .ti-verified-review span { font-size: 11px; color: #9a9a9a; } .ti-stars { color: #f5a623; letter-spacing: 1px; margin: 4px 0 8px; display: block; } .ti-review-content, .ti-review-item p { line-height: 1.65; color: #444; font-size: 15px; margin: 6px 0 0; } .ti-controls { display: none !important; } .ti-read-more, .ti-review-content .ti-hidden { color: #1b873f; } @media (max-width: 1024px) { .ti-reviews-container-wrapper { grid-template-columns: repeat(2,1fr); } } @media (max-width: 767px) { .ti-reviews-container-wrapper { grid-template-columns: 1fr; } } /* "Meet Our Team" panels (ranches, agent bios, team page): the captured legacy * Elementor columns don't reflow on small screens, so the big heading overlaps * the agent photos. Force the columns to stack cleanly on tablet/mobile. */ @media (max-width: 1024px) { .elementor-element-9ba519f > .elementor-container { flex-wrap: wrap; } .elementor-element-9ba519f > .elementor-container > .elementor-column { width: 100% !important; max-width: 100% !important; } .elementor-element-9ba519f .elementor-heading-title { white-space: normal; word-break: normal; } } /* Each agent photo in this section was captured at a different native size * (Tina's is 300x300, others 500x500), so on mobile -- where nothing else * constrains the width -- they render at visibly different sizes. Cap every * agent photo (not the Jacob Realty logo in the first column) to the same * width so the row/stack looks consistent. */ .elementor-element-9ba519f .elementor-column:not(:first-child) .elementor-widget-image img { width: 100% !important; max-width: 300px !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; } /* Tina Jacob hero (page 4357): the portrait is vertically centred inside a * full-viewport-height hero and uses large negative margins to "pop" it * up-and-left. So on a short browser window (or narrow width) it rides up over * the search bar / header, and below ~1300px it's cut off on the left. This is * reproducible on the live site too. Fix, made window-height independent: pin * the portrait to the TOP of the hero with a fixed gap (align-self:flex-start + * a small positive margin, cancelling the upward pull), and at narrow widths * cancel the left/right pull so it stays inside its column. Scoped to this page. */ .elementor-4357 .elementor-element-adc279d { align-self: flex-start !important; } .elementor-4357 .elementor-element-adc279d > .elementor-widget-wrap.elementor-element-populated { margin-top: 24px !important; /* was -130px */ } /* The hero left column (portrait + contact + Ready-to-Buy/Sell buttons) is taller * than the 100vh hero, so its bottom buttons used to spill into the "ABOUT TINA * JACOB" section below (visible on the live site too). Let the hero grow to fit * its content while keeping the full-screen minimum. */ .elementor-4357 .elementor-element-c220c7d { height: auto !important; min-height: 100vh !important; } /* Breathing room above the "ABOUT TINA JACOB" section (sat tight under the hero). */ .elementor-4357 .elementor-element-14dff4a { margin-top: 48px !important; } .elementor-4357 .elementor-element-580f620f .elementor-widget-container { margin-top: 0 !important; } @media (max-width: 1366px) { .elementor-4357 .elementor-element-adc279d > .elementor-widget-wrap.elementor-element-populated { margin-left: 0 !important; margin-right: 0 !important; } .elementor-4357 .elementor-element-580f620f .elementor-widget-container { margin: 0 !important; } .elementor-4357 .elementor-element-580f620f img { max-width: 100% !important; } } /* Why List With Us hero: the "CALL US TODAY" button sat only ~10px above the * hero image's bottom edge. Add bottom padding so it has breathing room. */ .elementor-4328 .elementor-element-74c2fad7 { padding-bottom: 52px !important; } /* Service Areas page: a hero banner added at the top (no hero exists on live; * requested design addition). Full-bleed scenic background with a white * uppercase title, matching the site's other hero banners. The page's original * plain "Service Areas" H1 (widget 8292668) is hidden to avoid a duplicate. */ .jr-sa-hero { position: relative; background: #0a3b1e url('/wp-content/uploads/2026/09/DJI_0014-2.jpg') center/cover no-repeat; min-height: 320px; display: flex; align-items: flex-end; } .jr-sa-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.38)); } .jr-sa-hero__inner { position: relative; width: 100%; max-width: 1140px; margin: 0 auto; padding: 64px 20px 52px; } .jr-sa-hero__title { margin: 0; color: #fff; font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; font-weight: 500; line-height: 1.05; text-transform: uppercase; font-size: clamp(34px, 6vw, 61px); } .elementor-27389 .elementor-element-8292668 { display: none !important; } @media (max-width: 768px) { .jr-sa-hero { min-height: 220px; } .jr-sa-hero__inner { padding: 40px 18px 32px; } } /* County / area pages: the "WELCOME TO X COUNTY" body section sat tight under * the hero. Add top spacing so the heading has breathing room. Each page keeps * its own captured Elementor ids, so the welcome sections are listed per page. */ .elementor-4744 .elementor-element-abed840, /* beeville-tx-real-estate-agents */ .elementor-5275 .elementor-element-79dde0d, /* aransas-county-real-estate-agents */ .elementor-7140 .elementor-element-0372eac, /* victoria-county-homes-for-sale */ .elementor-5006 .elementor-element-d846556, /* refugio-county-homes-for-sale */ .elementor-4567 .elementor-element-7b3cb0a, /* jackson-county-homes-for-sale */ .elementor-4371 .elementor-element-7ba6dbb, /* dewitt-county-homes-for-sale */ .elementor-5286 .elementor-element-4853e79, /* calhoun-county-homes-for-sale */ .elementor-4955 .elementor-element-afe8cb1, /* caldwell-county-homes-for-sale */ .elementor-6817 .elementor-element-93ec458, /* san-patricio-county */ .elementor-6920 .elementor-element-e42f1e6, /* matagorda-county */ .elementor-5162 .elementor-element-d5785fc, /* gonzales-county */ .elementor-15070 .elementor-element-0f997a7 { /* goliad-county */ padding-top: 48px !important; } /* Lavaca county page: the hero and the "WELCOME TO LAVACA COUNTY" body share one * section, so space the heading widget itself (padding on the section would push * the hero too). */ .elementor-4579 .elementor-element-49391bb8 { margin-top: 48px !important; } /* Sellers page (CMA / home-estimation Elementor forms): the captured form CSS * sets the input placeholder colour to white, but the fields sit on a white * card, so the placeholders ("First Name", "Email"...) were invisible and the * fields looked empty. Make them a visible grey. Covers both the top CMA form * and the bottom "Secure Your Individualized Home Estimation" form. */ .elementor-22400 .elementor-form input::placeholder, .elementor-22400 .elementor-form textarea::placeholder { color: #8a8a8a !important; opacity: 1 !important; } /* Multi-step (wizard) form controls -- see jr_form_wizard() in functions.php. * The step wrapper must be a full-width flex row (matching Elementor's * .elementor-form-fields-wrapper) so the fields keep their column widths; the * JS toggles each step with an inline display, so no !important on display. */ .jr-wizard-progress { flex: 0 0 100%; width: 100%; font-weight: 700; letter-spacing: .6px; color: #9a9a9a; margin-bottom: 16px; font-size: 13px; text-transform: uppercase; } .jr-wizard-step { flex: 0 0 100%; max-width: 100%; display: flex; flex-wrap: wrap; align-content: flex-start; animation: jrWizFade .25s ease; } @keyframes jrWizFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .jr-wizard-nav { flex: 0 0 100%; width: 100%; display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; } .jr-wizard-nav .jr-wiz-prev { margin-right: auto; } .jr-wiz-btn { background: #1b873f; color: #fff; border: 0; border-radius: 6px; padding: 12px 26px; font-weight: 700; cursor: pointer; font-size: 15px; line-height: 1.2; } .jr-wiz-btn:hover { background: #14632e; } .jr-wizard-nav .jr-wiz-prev { background: #6b7280; } .jr-wizard-nav .jr-wiz-prev:hover { background: #4b5563; } /* Sellers CMA copy blocks: keep the paragraphs centred. The text-editor widgets * have max-width:800px but sit left-aligned in their 1140px column, so the block * looked shifted left even with centred text -- centre the block itself too. */ .elementor-22400 .elementor-element-46985ca0, .elementor-22400 .elementor-element-46985ca0 p, .elementor-22400 .elementor-element-46985ca0 div, .elementor-22400 .elementor-element-8409fd6, .elementor-22400 .elementor-element-8409fd6 p, .elementor-22400 .elementor-element-8409fd6 div { text-align: center !important; } .elementor-22400 .elementor-element-46985ca0, .elementor-22400 .elementor-element-8409fd6 { margin-left: auto !important; margin-right: auto !important; } /* Landing pages (sellers, buyers, admin-portal, broker-portal) carry a captured * `header, #footer-widgets { display:none }` rule -- on the live site those pages * use an Elementor-built header/footer instead of the theme's. The static clone * has no Elementor header, so that rule left the page with no site header or * footer at all. Re-show the theme's real header + footer on those pages. */ .page-id-704 header#masthead, .page-id-704 #footer-widgets, .page-id-11 header#masthead, .page-id-11 #footer-widgets, .page-id-616 header#masthead, .page-id-616 #footer-widgets, .page-id-624 header#masthead, .page-id-624 #footer-widgets { display: block !important; } /* WP Customer Area portal pages (/customer-area/*): the plugin renders its own * Bootstrap "master" layout (black page-title band + navbar + widgets), exactly * as the live site does. Hide the clone theme's own header/search bar and footer * so the plugin layout owns the page and it matches live. */ .jr-customer-area #header-wrap-placeholder, .jr-customer-area #header-wrap, .jr-customer-area #header-search-wrap, .jr-customer-area #footer-widgets, .jr-customer-area #site-footer { display: none !important; } /* Agent bio heroes: left-align the "Ready To Sell/Buy" button widgets so they * sit under the photo, matching the live site. Every agent page on * jacobrealtytx.com renders these button widgets text-align:start (the buttons * hug the left content edge of the photo column); the demo had drifted, so pin * them left across all four pages. Amber (28744), Amanda (48765), * Ethan (37265) and Tina (4357). */ .elementor-28744 .elementor-element-c6399f4, .elementor-28744 .elementor-element-45532a0, .elementor-48765 .elementor-element-c6399f4, .elementor-48765 .elementor-element-45532a0, .elementor-37265 .elementor-element-f616d26, .elementor-37265 .elementor-element-95640ef, .elementor-4357 .elementor-element-31d9fcd, .elementor-4357 .elementor-element-abcb17a { text-align: left !important; } /* Bigger header + footer logos + header menu text (client request). The header * logo was capped at 60px by header#masthead .logo-wrap img.logo, so match that * specificity to raise it to 88px (masthead is ~89px tall). */ header#masthead .logo-wrap img.logo, header#masthead #logo img.logo, .sticky-logo img.logo { width: 88px !important; height: auto !important; max-height: 88px !important; } .footer-logo-link img { width: 180px !important; max-width: 180px !important; height: auto !important; } /* Mobile: the header's 89px min-height (set for the big desktop logo) leaves a lot of white space around a small logo. Shrink the logo and drop the header min-height so the bar hugs its content and the top white space goes away. */ @media (max-width: 767px) { header#masthead, header#masthead .layout-left, header#masthead .container { min-height: 80px !important; } header#masthead .logo-wrap img.logo, header#masthead #logo img.logo, .sticky-logo img.logo { width: 76px !important; max-height: 76px !important; } /* The sticky-header placeholder still reserved the old 89px height, leaving a ~29px gap between the shorter 60px header and the search bar. Match it. Also overrides the homepage's `#home #header-wrap-placeholder { height: auto }`, which would collapse to 0 once the header below is fixed. */ #header-wrap-placeholder, #home #header-wrap-placeholder { height: 80px !important; min-height: 80px !important; } /* Keep the header (and the hamburger that closes the slide-out menu) on screen while scrolling on mobile. The source site's JS toggled a `.sticky` class on scroll to pin the header, but that JS doesn't run on this static replica, so the header scrolled away -- leaving the open menu with no visible way to close it once the page was scrolled. Also overrides the homepage's `#home #header-wrap.trans-header { position: relative }` rule, which otherwise wins on `/` at this breakpoint. */ #header-wrap, #home #header-wrap.trans-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 999999 !important; } } /* Larger primary nav items in the header (was 15px). */ #menu-primary-menu > li > a, #header-menu #menu-primary-menu > li > a { font-size: 18px !important; } /* Mobile hamburger icon. The toggle button's glyph * doesn't render on the clone (Font Awesome 6 solid isn't loaded), leaving an * empty box. Draw the three bars in CSS instead (white on the dark-green * button). */ #showLeftPushIcon { display: inline-block !important; width: 24px !important; height: 2px !important; background: #ffffff !important; position: relative !important; font-size: 0 !important; vertical-align: middle; box-shadow: none; } #showLeftPushIcon::before, #showLeftPushIcon::after { content: "" !important; position: absolute; left: 0; width: 24px; height: 2px; background: #ffffff; } #showLeftPushIcon::before { top: -7px; } #showLeftPushIcon::after { top: 7px; } /* Mobile slide-out menu: open it below the header so the header (with the * hamburger, which closes it) stays visible and no menu items hide behind the * header. The panel was starting at the very top, tucking RANCHES/RESIDENTIAL * under a sticky header on some devices. */ #cbp-spmenu { top: 89px !important; height: calc(100% - 89px) !important; overflow-y: auto !important; } body.admin-bar #cbp-spmenu { top: 135px !important; height: calc(100% - 135px) !important; } /* On phones the header is shortened to 80px, so drop the slide-out menu to match (this rule comes after the 89px base so it wins). */ @media (max-width: 767px) { #cbp-spmenu { top: 80px !important; height: calc(100% - 80px) !important; } body.admin-bar #cbp-spmenu { top: 126px !important; height: calc(100% - 126px) !important; } } /* Mobile menu item divider lines: use the brand green instead of grey. */ #cbp-spmenu li a { border-bottom-color: #0b6000 !important; } /* Match the desktop nav's white background / brand green text instead of the theme's dynamic CSS, which forces every `.cbp-spmenu a` to a gold background with near-invisible dark text. */ #cbp-spmenu, #cbp-spmenu a { background-color: #ffffff !important; color: #0b6000 !important; } #cbp-spmenu a:hover { color: #d89739 !important; } /* Mobile menu top-level items (RANCHES, RESIDENTIAL, ABOUT US, ...): match the 16px used for their submenu items. */ #cbp-spmenu > div > ul > li > a { font-size: 16px !important; } /* Sub-menu tap-to-expand arrow (injected by jr_mobile_menu() in functions.php). The base theme CSS hides `.sub-menu` by default and only reveals it via the source site's JS, which doesn't run here -- this arrow and the `.jr-submenu-open` toggle it adds are this replica's replacement. */ #cbp-spmenu .menu-item-has-children { position: relative; } #cbp-spmenu .menu-item-has-children > a { padding-right: 48px !important; } #cbp-spmenu .jr-submenu-toggle { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #0b6000; cursor: pointer; user-select: none; transition: transform 0.2s ease; } #cbp-spmenu .jr-submenu-open > .jr-submenu-toggle { transform: rotate(180deg); } #cbp-spmenu .jr-submenu-open > .sub-menu { display: block !important; } #cbp-spmenu .sub-menu, #cbp-spmenu .sub-menu a { font-size: 16px !important; } /* Main desktop nav (RANCHES / RESIDENTIAL / COMMERCIAL / ...): brand green text at a readable size instead of the theme-default small white text. */ nav.right #ct-menu > li > a { color: #0b6000 !important; font-size: 16px !important; } nav.right #ct-menu > li:hover > a, nav.right #ct-menu > li.current-menu-item > a, nav.right #ct-menu > li.current-menu-ancestor > a { color: #0b6000 !important; opacity: 0.8; } /* Header nav dropdown submenus (e.g. RESOURCES -> Blog / Service Areas / ...): the theme default is a tiny 13px, hard to read. Bump it up. */ nav.right #ct-menu .sub-menu, nav.right #ct-menu .sub-menu > li > a { font-size: 16px !important; } /* Agent bio "most recent SOLD properties" section (Amber page-id-28744, Tina page-id-4357): the captured section carries a large gradient background block above the heading with no content in it, leaving a huge empty gap between the county map above and the heading. Trim it down. */ .page-id-28744 .elementor-element-ece7a6c, .page-id-4357 .elementor-element-93cd0ee { padding-top: 0 !important; } /* SOLD/listing loop cards (shared "loop-43525" template): the text panel's fixed 164px min-height leaves a large empty gap below a one-line address when the card has no price/beds/baths row. Let it size to its content. */ .elementor-43525 .elementor-element.elementor-element-42bbc42 { min-height: 0 !important; } /* Tina page (page-id-4357): the certifications/logos section (right after the SOLD grid, last section on the page) reads top-heavy -- less space below the logos than above them. Rebalance so top and bottom match. */ .page-id-4357 .elementor-element-3eab28e > .elementor-container { padding-top: 20px !important; padding-bottom: 60px !important; } /* Service Areas page (page-id-27389): the cities list section reads with a large empty gap above and below it, between the hero and the footer. Tighten the section's own top/bottom padding. */ .page-id-27389 .elementor-element-489cfbe { padding-top: 20px !important; padding-bottom: 20px !important; } .page-id-27389 .elementor-element-489cfbe > .elementor-container { padding-top: 0 !important; padding-bottom: 0 !important; } /* Our Team page flip-box agent photos (jacobrealtyteam): the front and back faces are supposed to stack on top of each other (only the front visible, the back's "Learn More" revealed on hover), but without Elementor Pro's flip-box JS/CSS taking effect they lay out as two separate boxes side by side -- the same photo appearing to duplicate. Force the stacking. */ .elementor-flip-box { position: relative !important; overflow: hidden !important; display: block !important; } .elementor-flip-box__layer { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; transform: none !important; } .elementor-flip-box { height: 480px !important; } .elementor-flip-box__front { z-index: 1 !important; opacity: 1 !important; background-size: cover !important; } .elementor-flip-box__back { z-index: 2 !important; opacity: 0 !important; /* Defense in depth: the back layer only needs to show the "Learn More" button, not a second copy of the agent photo. If the opacity/stacking above ever fails to take effect for any reason, at least the back layer won't visually duplicate the photo. */ background-image: none !important; background-color: rgba(8, 42, 3, 0.75) !important; } .elementor-flip-box:hover .elementor-flip-box__front { opacity: 0 !important; } .elementor-flip-box:hover .elementor-flip-box__back { opacity: 1 !important; } /* Remove the theme-default #masthead margin (30px above, 20px below the header) site-wide so the header sits flush and there is no gap under the menu. */ #masthead { margin-top: 0 !important; margin-bottom: 0 !important; } /* Our Team page (page-id-646): the theme's #page-content wrapper adds a 60px top margin, leaving a white gap above the full-bleed hero. Remove it so the hero sits flush under the search bar, and add bottom padding so the last content (the review section) isn't cramped against the footer. */ body.page-id-646 #page-content { margin-top: 0 !important; padding-bottom: 60px !important; } /* Our Team page on mobile: centre the section headings and paragraphs. */ @media (max-width: 767px) { body.page-id-646 #page-content .elementor-heading-title, body.page-id-646 #page-content .elementor-widget-text-editor, body.page-id-646 #page-content .elementor-widget-text-editor p, body.page-id-646 #page-content .elementor-text-editor { text-align: center !important; } } /* Commercial page (page-id-628): remove the theme's 60px #page-content top margin so the full-bleed hero sits flush under the search bar (no white gap). */ body.page-id-628 #page-content { margin-top: 0 !important; } /* Commercial page (page-id-628) on mobile: centre the "Interested? Click icon below..." heading to match the centred CTA button under it. */ @media (max-width: 767px) { body.page-id-628 .elementor-element-a70cd10 .elementor-heading-title { text-align: center !important; } } /* Contact info lists (email/phone) were captured with an inline white background on their