/* =========================================================================== * CLH LISTING RESTYLE: Houzez grids and property cards, in the redesign's * type, palette, radii and column width. * --------------------------------------------------------------------------- * CSS ONLY, ON PURPOSE. The cards are assembled from a dozen small partials and * carry hz-item-gallery-js and data-hz-id; Houzez's JavaScript binds to those * hooks for the image gallery, favourites and compare. Copying the partials into * this theme to restyle them would freeze them at 2.8.6.1 and put every one of * those behaviours at risk for a cosmetic gain, so nothing here rewrites markup. * Where a rule needs a class that may not exist in this Houzez build, the rule * is cosmetic and a miss costs nothing. * * SCOPE: body.redesign-listing, added by clh_child_is_listing_view() in * functions.php. The class deliberately avoids the "clh-" prefix. The shared * guard in clh-redesign.css matches [class*="clh-"] as a SUBSTRING, so a * clh-listing class on would apply the guard to every element on the * page, stripping the colour and underline from Houzez's own links and the * bullets from every list. * * SPECIFICITY: scoping beats !important. Bootstrap ships with Houzez, so its * .card and .form-control rules (0,1,0) are all outranked by the .redesign-* * prefix here (0,2,0). The single exception is marked and explained inline. * * Tokens come from clh-redesign.css. Every var() carries the literal fallback * so the page is still on-palette if that stylesheet fails to load. * ======================================================================== */ /* --- Page shell ---------------------------------------------------------- */ body.redesign-listing{background:#fff} .redesign-listing .listing-wrap{ font-family:var(--clh-body,'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif); color:var(--clh-ink,#16232E); padding-bottom:var(--clh-section,clamp(40px,6vw,72px)); } /* One shared content column with every redesign block: 1280px and the same fluid gutter. Bootstrap's .container tops out at 1140px in a breakpoint media query at (0,1,0), so the two-class selector here wins at every width. */ .redesign-listing .listing-wrap > .container{ width:100%; max-width:var(--clh-measure,1280px); padding-left:var(--clh-gutter,clamp(24px,5vw,56px)); padding-right:var(--clh-gutter,clamp(24px,5vw,56px)); } .redesign-listing .page-title-wrap{padding:clamp(28px,4vw,44px) 0 clamp(16px,2.5vw,26px)} .redesign-listing .page-title-wrap .page-title, .redesign-listing .page-title-wrap h1{ font-family:var(--clh-display,'Newsreader',Georgia,'Times New Roman',serif); font-weight:500; font-size:clamp(28px,4.5vw,42px); line-height:1.12; letter-spacing:-.02em; text-transform:none; /* Houzez title-cases headings */ color:var(--clh-navy,#0C3A5C); margin:0; } .redesign-listing .breadcrumb, .redesign-listing .breadcrumb a{ background:transparent; padding:0; font-size:13px; color:var(--clh-muted,#5a6b78); } /* --- The grid ------------------------------------------------------------ * Houzez lays the grid out with Bootstrap's .card-deck: display:flex on the * deck, flex:1 0 0% plus side margins on each card. Grid gives the same three * columns with a real gutter and equal-height rows, but the deck's sizing has * to be unset on the children or the two fight. Breakpoints match * .clh-svc__grid on the homepage so the cards step down in sync with it. * ------------------------------------------------------------------------ */ .redesign-listing .listing-view.grid-view{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,26px); margin:0; } .redesign-listing .listing-view.grid-view > *{flex:none;width:auto;max-width:none;margin:0} /* item-none.php renders a .col-lg-12 in place of the cards. As a grid item it would sit in the first column; the empty state belongs across the full row. */ .redesign-listing .listing-view.grid-view > .col-lg-12{grid-column:1/-1;padding:0} .redesign-listing .listing-view.grid-view > .col-lg-12 p{ font-size:16px; color:var(--clh-muted,#5a6b78); padding:clamp(28px,5vw,48px) 0; } @media(max-width:1024px){ .redesign-listing .listing-view.grid-view{grid-template-columns:repeat(2,1fr)} } @media(max-width:640px){ .redesign-listing .listing-view.grid-view{grid-template-columns:1fr} } /* --- The card ------------------------------------------------------------ * Same soft border, 16px radius, shadow and hover lift as .clh-svc__card on the * homepage, so a property card and a service card read as one system. * .item-listing-wrap.card is (0,2,0) and beats Bootstrap's .card. * Nothing here touches display or flex-direction: Houzez switches the inner * .item-wrap between row and column for its grid and list views, and that is * its layout to own. * ------------------------------------------------------------------------ */ .redesign-listing .item-listing-wrap.card{ background:#fff; border:1px solid var(--clh-line,#eaeef2); border-radius:var(--clh-radius,16px); overflow:hidden; box-shadow:none; transition:box-shadow .25s cubic-bezier(.2,.8,.2,1), transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s cubic-bezier(.2,.8,.2,1); } .redesign-listing .item-listing-wrap.card:hover{ box-shadow:0 26px 54px -26px rgba(12,58,92,.5); transform:translateY(-5px); border-color:#dbe3ea; } @media(prefers-reduced-motion:reduce){ .redesign-listing .item-listing-wrap.card{transition:none} .redesign-listing .item-listing-wrap.card:hover{transform:none} } /* The inner wrap carries Houzez's own frame. The card outside it now provides the border and radius, so the second frame is redundant. */ .redesign-listing .item-wrap{ background:transparent; border:0; border-radius:0; box-shadow:none; } .redesign-listing .item-header{position:relative;border-radius:0} .redesign-listing .item-body{padding:clamp(18px,2vw,22px)} .redesign-listing .item-footer{ padding:14px clamp(18px,2vw,22px); border-top:1px solid var(--clh-line,#eaeef2); background:var(--clh-surface,#f9fbfc); font-size:13px; color:var(--clh-muted,#5a6b78); } /* --- Card contents ------------------------------------------------------- * Colour and type only, matching the Newsreader / Archivo pairing the blocks * use. These class names come from the partials item-v1.php and item-v3.php * pull in; each rule is decorative, so an unused selector is inert. * ------------------------------------------------------------------------ */ .redesign-listing .item-title{ font-family:var(--clh-display,'Newsreader',Georgia,'Times New Roman',serif); font-weight:600; font-size:clamp(18px,2.2vw,21px); line-height:1.25; letter-spacing:normal; text-transform:none; margin:0 0 8px; } .redesign-listing .item-title a{color:var(--clh-navy,#0C3A5C)} .redesign-listing .item-title a:hover{color:var(--clh-blue-dark,#0F6FA6)} .redesign-listing .item-price{ font-family:var(--clh-body,'Archivo',system-ui,sans-serif); font-weight:700; font-size:17px; color:var(--clh-navy,#0C3A5C); } .redesign-listing .item-address, .redesign-listing .item-address a{font-size:14px;line-height:1.5;color:var(--clh-muted,#5a6b78)} .redesign-listing .item-amenities, .redesign-listing .item-amenities li{font-size:13.5px;color:var(--clh-muted,#5a6b78)} /* --- Tools, filters and controls ----------------------------------------- */ .redesign-listing .listing-tools-wrap{padding:0 0 clamp(14px,2vw,20px)} .redesign-listing .sort-by-title{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--clh-faint,#9aa7b0); white-space:nowrap; margin-right:10px; } /* The sidebar filter form, given the same card treatment as the listings. */ .redesign-listing .houzez-filters{ background:#fff; border:1px solid var(--clh-line,#eaeef2); border-radius:var(--clh-radius,16px); padding:20px; margin-top:clamp(28px,4vw,44px); } .redesign-listing .houzez-filters .sort-by-title{display:block;margin:0 0 12px} .redesign-listing .houzez-filters br{display:none} .redesign-listing .houzez-filter-bedroom, .redesign-listing .houzez-filter-bathroom, .redesign-listing .houzez-filter-sqft{margin-bottom:14px} .redesign-listing .form-control, .redesign-listing .bootstrap-select > .dropdown-toggle{ min-height:44px; border-radius:10px; border:1px solid #dbe3ea; background:#fff; font-size:14.5px; color:var(--clh-ink,#16232E); box-shadow:none; } .redesign-listing .form-control:focus, .redesign-listing .bootstrap-select > .dropdown-toggle:focus{ border-color:var(--clh-blue,#1487C4); box-shadow:0 0 0 3px rgba(20,135,196,.15); outline:none; } .redesign-listing .bootstrap-select > .dropdown-toggle{display:flex;align-items:center} /* Buttons: the pill from the blocks, at the contrast-safe blue. #1487C4 with white text measures 3.92:1, which fails AA for anything under 18pt; the --clh-blue-fill token is the darker blue the redesign uses behind white. */ .redesign-listing .btn-primary, .redesign-listing .houzez-search-button, .redesign-listing .houzez-filters .elementor-button, .redesign-listing .active-filters .btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 22px; border:0; border-radius:var(--clh-pill,40px); background-color:var(--clh-blue-fill,#127BB3); color:#fff; font-family:var(--clh-body,'Archivo',system-ui,sans-serif); font-size:14.5px; font-weight:600; text-decoration:none; transition:background-color .2s cubic-bezier(.2,.8,.2,1); } .redesign-listing .btn-primary:hover, .redesign-listing .houzez-search-button:hover, .redesign-listing .houzez-filters .elementor-button:hover, .redesign-listing .active-filters .btn:hover{ background-color:var(--clh-blue-dark,#0F6FA6); color:#fff; } /* The active-filters panel is written with an inline style attribute in the parent page template (background #f7f7f7, a #ddd border, 10px of padding). Inline styles outrank every selector, so !important is the only way to reach them from CSS. The alternative is overriding the page template purely to move three declarations, which is a worse trade. Kept to exactly those three properties, and to nothing else in this file. */ .redesign-listing .active-filters{ background:var(--clh-surface-2,#f6f8fa) !important; border:1px solid var(--clh-line,#eaeef2) !important; padding:16px 18px !important; border-radius:var(--clh-radius,16px); font-size:14px; color:var(--clh-muted,#5a6b78); } .redesign-listing .active-filters strong{color:var(--clh-navy,#0C3A5C)} /* --- Pagination ---------------------------------------------------------- */ .redesign-listing .pagination{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:clamp(24px,4vw,40px) 0 0; padding:0; list-style:none; } .redesign-listing .pagination a, .redesign-listing .pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 12px; border:1px solid var(--clh-line,#eaeef2); border-radius:10px; background:#fff; color:var(--clh-navy,#0C3A5C); font-size:14.5px; font-weight:600; text-decoration:none; transition:background-color .18s,border-color .18s; } .redesign-listing .pagination a:hover{background:var(--clh-surface-2,#f6f8fa);border-color:#dbe3ea} .redesign-listing .pagination .current, .redesign-listing .pagination .page-numbers.current, .redesign-listing .pagination .active a{ background:var(--clh-blue-fill,#127BB3); border-color:var(--clh-blue-fill,#127BB3); color:#fff; } /* --- Mobile tap targets -------------------------------------------------- * Same 44px floor the redesign holds everywhere else. The card tools (compare, * favourite, gallery arrows) are icon buttons and measure well under it. * ------------------------------------------------------------------------ */ @media(max-width:1024px){ .redesign-listing .item-tools a, .redesign-listing .item-tools button, .redesign-listing .listing-switch-view a{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; } .redesign-listing .sort-by .selectpicker, .redesign-listing .sort-by .bootstrap-select > .dropdown-toggle{min-height:44px} }