/* ===================================================================== WALAJABAD PROPERTIES — Layout & Colour Polish (loaded LAST) --------------------------------------------------------------------- One consistent finishing layer for every public page: 1. Blue colour tokens (dark-blue borders, blue accents) 2. Cards / boxes: one border, radius and spacing everywhere 3. Off-brand teal / gold / green / orange accents -> blue 4. Vertical + horizontal spacing (desktop and mobile) 5. Alignment and overflow fixes found in the page audit Pure CSS overrides — no data or markup is hidden or removed. ===================================================================== */ /* ---------- 1. TOKENS ---------- */ :root { --wp-blue: #0b4ea2; /* primary blue (header / buttons) */ --wp-blue-light: #2f7be0; /* hover / highlight */ --wp-blue-dark: #0b2e5c; /* deep blue for gradients */ --wp-border: #1f4f8f; /* card border — little dark blue */ --wp-border-soft: #a9c1e3; /* form field border */ --wp-tint: #eef4fd; /* light blue surface */ --wp-grad: linear-gradient(135deg, #0b2e5c 0%, #0b4ea2 100%); --wp-gap: 28px; /* grid gap desktop */ --wp-section: 64px; /* section padding desktop */ /* existing theme accent (was gold) -> blue, so links/CTAs match */ --cp-teal-bright: #2f7be0; } /* ---------- 2. CARDS & BOXES — one border style everywhere ---------- */ #main-wrapper .property-listing, #main-wrapper .ppl-property-card, #main-wrapper .ppl-filter-sidebar, #main-wrapper .ppl-header-section, #main-wrapper .cp-revenue-card, #main-wrapper .cp-guide-card, #main-wrapper .cp-featured-intro, #main-wrapper .cp-featured-panel, #main-wrapper .tg-card, #main-wrapper .tg-results, #main-wrapper .contact-form, #main-wrapper .contact-info-card, #main-wrapper .terms-container, #main-wrapper .privacy-container, #main-wrapper .about-content, #main-wrapper .property_block_wrap, #main-wrapper .sides-widget, #main-wrapper .sides_list_property, #main-wrapper .sidebar-widgets, #main-wrapper .simple-sidebar, #main-wrapper .item-shorting-box, #main-wrapper .agents-grid, #main-wrapper .fp-card, #main-wrapper .login-wrapper, #main-wrapper .reg-wrapper, #main-wrapper .full-search-2, #main-wrapper .like_share_wrap, #main-wrapper .cp-enquiry-privacy, #main-wrapper .cp-requirement-option { border: 1px solid var(--wp-border) !important; box-shadow: 0 4px 18px rgba(11, 46, 92, 0.08) !important; } /* Hover: slightly brighter blue border, no colour jump */ #main-wrapper .property-listing:hover, #main-wrapper .ppl-property-card:hover, #main-wrapper .cp-revenue-card:hover, #main-wrapper .cp-guide-card:hover, #main-wrapper .tg-card:hover, #main-wrapper .agents-grid:hover, #main-wrapper .contact-info-card:hover { border-color: var(--wp-blue-light) !important; box-shadow: 0 10px 28px rgba(11, 78, 162, 0.16) !important; } /* Inner dividers inside cards use the soft blue */ .property-listing hr, .fr-grid-footer, .ppl-card-footer, .tg-results tr, .property_block_wrap .block-body li { border-color: var(--wp-border-soft) !important; } /* Home property cards: an ID-scoped rule kept the grey border and a navy -> rust ::before ring drew the peach edge — make both dark blue */ #main-wrapper .property-listing.property-1 { border: 1px solid var(--wp-border) !important; } #main-wrapper .property-listing.property-1:hover { border-color: var(--wp-blue-light) !important; } #main-wrapper .property-listing::before { background: var(--wp-border) !important; padding: 1px !important; } #main-wrapper .property-listing:hover::before { background: var(--wp-blue-light) !important; } /* Missing photo: blue tint instead of a white hole behind the alt text */ .listing-img-wrapper, .ppl-card-image { background: var(--wp-tint) !important; } /* Builder logo cards: gold/orange gradient ring -> dark blue ring */ .middle-icon-features-item.remove::before { background: var(--wp-border) !important; padding: 1.5px !important; } .middle-icon-features-item.remove { background: #fff !important; } /* Form fields inside page content */ #main-wrapper section .form-control, #main-wrapper .cp-req-section .form-control, #main-wrapper .sides-widget .form-control, #main-wrapper .contact-form .form-control, #main-wrapper .tg-card .form-control, #main-wrapper .tg-card input, #main-wrapper .tg-card select { border: 1px solid var(--wp-border-soft) !important; background-color: #fff !important; } #main-wrapper section .form-control:focus, #main-wrapper .tg-card input:focus, #main-wrapper .tg-card select:focus { border-color: var(--wp-border) !important; box-shadow: 0 0 0 3px rgba(11, 78, 162, 0.15) !important; outline: none !important; } /* ---------- 3. ACCENTS -> BLUE ---------- */ /* Property detail section headers (were teal with a gold bar) */ .property_block_wrap.style-2 .property_block_wrap_header { background: var(--wp-grad) !important; } .property_block_wrap_header::before { background: linear-gradient(180deg, #60a5fa, var(--wp-blue-light)) !important; } /* Icon tiles & buttons that used a navy -> gold gradient */ .contact-icon, .btn-submit, .tg-hero-icon, .tg-card-icon, .filter-list .radio-custom:checked + .radio-custom-label, .filter_button .btn, .cp-featured-submit, .prt-view, .agents-grid .btn-theme-light-2 { background: var(--wp-grad) !important; border-color: var(--wp-blue) !important; color: #fff !important; } .btn-submit:hover, .cp-featured-submit:hover, .prt-view:hover { background: linear-gradient(135deg, var(--wp-blue) 0%, var(--wp-blue-light) 100%) !important; } /* "Get In Touch" line icons (were purple) */ .cn-info-icon, .cn-info-icon i { color: var(--wp-blue) !important; } /* Sidebar submit on property detail */ .sides-widget-body input[type=submit] { background: var(--wp-grad) !important; } .sides-widget-body input[type=submit]:hover { background: linear-gradient(135deg, var(--wp-blue), var(--wp-blue-light)) !important; } /* Share / Print / Save row on property detail: one blue outline style */ #main-wrapper .like_share_wrap .btn, #main-wrapper .like_share_wrap .btn.btn-likes { background: #fff !important; color: var(--wp-blue) !important; border: 1px solid var(--wp-border) !important; } #main-wrapper .like_share_wrap .btn:hover, #main-wrapper .like_share_wrap .btn.btn-likes:hover { background: var(--wp-blue) !important; color: #fff !important; } .like_share_wrap .btn i { color: inherit !important; } /* Amenity chips on property detail (were cream / yellow) */ .property_block_wrap .avl-features li, .property_block_wrap .cp-amenity, .property_block_wrap .block-body .avl-features li { background: var(--wp-tint) !important; border-color: var(--wp-border-soft) !important; } /* Stats tiles (teal tint -> blue tint) */ .stat-item { background: var(--wp-tint) !important; border: 1px solid var(--wp-border-soft) !important; } /* Home "How it works" step icons: one blue family */ .cp-how-icon { background: var(--wp-grad) !important; color: #fff !important; } .cp-how-step:nth-child(2) .cp-how-icon { background: linear-gradient(135deg, #0b4ea2, #1d64c4) !important; } .cp-how-step:nth-child(3) .cp-how-icon { background: linear-gradient(135deg, #1d64c4, #2f7be0) !important; } .cp-how-step:nth-child(4) .cp-how-icon { background: linear-gradient(135deg, #2f7be0, #4f95ee) !important; } /* Login / register decorative panel (navy -> gold) -> blue */ .login-left, .reg-left, .bg-c2, .rc2 { background: linear-gradient(160deg, #0b2e5c 0%, #0b4ea2 100%) !important; } /* Popular-search chips: blue outline + icon */ .cp-popular-search a, .popular-searches a { border-color: var(--wp-border-soft) !important; } /* ---------- 4. SPACING ---------- */ /* Section rhythm (desktop) */ @media (min-width: 992px) { #main-wrapper > section, #main-wrapper > .gray-simple, #main-wrapper section.cp-static-page { padding-top: var(--wp-section); padding-bottom: var(--wp-section); } } /* Section headings: breathing room before the cards */ .sec-heading { margin-bottom: 36px !important; } .sec-heading h2 { margin-bottom: 10px !important; } /* Card grids: equal horizontal + vertical gaps */ .ppl-cards-grid { gap: var(--wp-gap) !important; } .ppl-main, .ppl-container > .ppl-main { gap: 32px !important; } /* Bootstrap-column card grids: give every card a bottom gap so rows never touch */ .row > [class*="col-"] > .property-listing, .row > [class*="col-"] > .agents-grid, .row > [class*="col-"] > .middle-icon-features-item, .row > [class*="col-"] > .cp-revenue-card { margin-bottom: var(--wp-gap) !important; } .row > [class*="col-"] > .middle-icon-features-item + hr { display: none; } /* Home: property card stretch so the action row lines up across a row */ .row > [class*="col-"] > .property-listing { height: calc(100% - var(--wp-gap)); display: flex; flex-direction: column; } .property-listing .cp-card-contact-actions { margin-top: auto; } /* Achievement numbers strip */ .achievement-wrap { padding: 28px 12px !important; } /* Static text pages (About / Terms / Privacy): content in a bordered card */ .cp-static-page .container > .row > .col-lg-12 > div[style*="max-width"] { background: #fff; border: 1px solid var(--wp-border); border-radius: 16px; padding: 36px 40px; box-shadow: 0 4px 18px rgba(11, 46, 92, 0.08); } .cp-static-page ul { list-style: disc !important; padding-left: 22px !important; margin: 10px 0 18px !important; } .cp-static-page ol { list-style: decimal !important; padding-left: 22px !important; margin: 10px 0 18px !important; } .cp-static-page li { display: list-item !important; margin-bottom: 6px; } .cp-static-page li::marker { color: var(--wp-blue); } .cp-static-page h2, .cp-static-page h3, .cp-static-page h4 { margin-top: 26px; margin-bottom: 12px; } .cp-static-page h3:first-child { margin-top: 0; } /* ---------- 5. ALIGNMENT & OVERFLOW FIXES ---------- */ /* Properties list: photo did not fill its 240px box (grey band under short images) */ .ppl-card-image .property-image-wrapper { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } .ppl-card-image .property-image-wrapper img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; } /* Properties list: card body fills height so footers line up per row */ .ppl-property-card .ppl-card-content { flex: 1 1 auto; display: flex; flex-direction: column; } .ppl-property-card .ppl-card-footer { margin-top: auto; } /* Agencies: footer row aligned on every card */ .agents-grid { height: calc(100% - var(--wp-gap)); display: flex; flex-direction: column; } .agents-grid .fr-grid-footer { margin-top: auto; } /* Post requirements: the nested form row had 0 margin (global .row rule), indenting Name / Mobile 12px from the selects below — line them up */ @media (min-width: 769px) { .cp-req-section form > .row { margin-left: -12px !important; margin-right: -12px !important; width: calc(100% + 24px) !important; max-width: none !important; } } /* Select2 keeps the original