/* ========================================================================== CSG Managed Properties — brand layer Loaded last on every page. Colours, typography and spacing come from the 2025 brand assets: deep forest green, brushed gold, cream, generous air. ========================================================================== */ :root { /* Core palette (sampled from the brand marque) */ --csg-green: #093A25; --csg-green-deep: #06271A; --csg-green-soft: #115437; --csg-gold: #BF953F; --csg-gold-light: #D6B46C; --csg-gold-deep: #96701F; /* gold text on light grounds (4.1:1) */ --csg-gold-pale: #E8D8B0; --csg-cream: #FAF8F3; --csg-cream-deep: #F3EFE6; --csg-ink: #1C2A23; --csg-muted: #5F6B63; --csg-line: rgba(9, 58, 37, 0.12); --csg-gold-line: rgba(191, 149, 63, 0.45); /* Keep the template's variable contract pointed at the brand palette. Declared here so this file wins over ui-improvements.css. */ --brand-color: 9, 58, 37; --hover-color: 17, 84, 55; --light-color: 191, 149, 63; --light-hover-color: 214, 180, 108; --csg-shadow: 0 1px 2px rgba(9, 58, 37, .05), 0 8px 24px rgba(9, 58, 37, .06); --csg-shadow-lg:0 2px 4px rgba(9, 58, 37, .06), 0 18px 44px rgba(9, 58, 37, .12); --csg-control-height: 52px; /* search input + button share this */ --nav-solid-height: 170px; /* the solid nav bar at rest */ --nav-mobile-height: 104px; /* the mobile bar — pinned exactly, see .csg-nav-mobile */ --csg-section: clamp(4.5rem, 9vw, 8rem); --csg-measure: 68ch; } /* -------------------------------------------------------------------------- 1. Typography -------------------------------------------------------------------------- */ /* template-revamp.css sets html { height: 100%; overflow-x: hidden }, which turns the root element into a fixed-height scroll container. That breaks position: fixed — the nav and the cookie bar drift with the content instead of staying pinned — and can stop the page scrolling altogether. The root has to scroll normally, so the horizontal clamp moves to . */ html { height: auto !important; min-height: 100%; overflow-x: visible !important; overflow-y: visible !important; } body { overflow-x: hidden; } body { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--csg-ink); font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; background: #fff; } h1, h2, h3, h4, h5, h6, .section-heading, .about-heading { font-family: "Jost", "DM Sans", sans-serif; color: var(--csg-green); font-weight: 500; letter-spacing: .01em; line-height: 1.25; } /* Section headings: letterspaced small caps with a gold hairline under them */ .section-heading { font-size: clamp(1.65rem, 3.2vw, 2.5rem); font-weight: 500; text-transform: uppercase; letter-spacing: .13em; color: var(--csg-green) !important; } .section-heading.has-rule::after { content: ""; display: block; width: 68px; height: 2px; margin: 1.5rem auto 0; background: var(--csg-gold); } .section-heading.text-start.has-rule::after { margin-left: 0; } /* Small uppercase gold label that sits above a heading */ /* The signature line from the brand assets */ .csg-lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.85; color: var(--csg-muted); max-width: var(--csg-measure); } .text-dark-grey { color: var(--csg-muted); } .text-main { color: var(--csg-green) !important; } .text-light-color { color: var(--csg-gold) !important; } .text-gold { color: var(--csg-gold) !important; } a { color: var(--csg-green); text-decoration: none; } a:hover { color: var(--csg-gold) !important; } /* -------------------------------------------------------------------------- 2. Section rhythm -------------------------------------------------------------------------- */ .section-white { background: #fff; padding: var(--csg-section) 0; } .section-cream { background: var(--csg-cream); padding: var(--csg-section) 0; } .section-green { background: var(--csg-green); color: #fff; padding: var(--csg-section) 0; } .section-green h1, .section-green h2, .section-green h3, .section-green .section-heading { color: #fff !important; } .section-centered { width: min(92%, 1180px); margin: 0 auto; max-width: 1180px; } /* The template's default divider becomes a gold hairline */ .divider-main { width: min(70%, 760px); border: 0; border-top: 1px solid var(--csg-gold-line); margin: 0 auto; opacity: 1; } .csg-rule { width: 68px; height: 2px; background: var(--csg-gold); border: 0; opacity: 1; margin: 1.75rem auto; } .csg-rule-start { margin-left: 0; margin-right: auto; } /* -------------------------------------------------------------------------- 3. Buttons -------------------------------------------------------------------------- */ .btn-csg, .btn-contact, .btn-search, .btn-search-home, .btn-homeprop { font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: .16em; font-weight: 500; font-size: .84rem; border-radius: 0 !important; border: 1px solid transparent; transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* Solid green — primary */ .btn-csg { display: inline-flex; align-items: center; justify-content: center; padding: 1.05rem 2.6rem; background: var(--csg-green); color: #fff; line-height: 1; } .btn-csg:hover { background: var(--csg-green-soft); color: #fff !important; } /* Gold — used for the primary call to action */ .btn-csg-gold { background: var(--csg-gold); color: var(--csg-green); border-color: var(--csg-gold); } .btn-csg-gold:hover { background: var(--csg-gold-light); color: var(--csg-green) !important; } /* Outline on light backgrounds */ .btn-csg-outline { background: transparent; color: var(--csg-green); border-color: var(--csg-green); } .btn-csg-outline:hover { background: var(--csg-green); color: #fff !important; } /* Outline on dark / photographic backgrounds */ .btn-csg-ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .6); backdrop-filter: blur(2px); } .btn-csg-ghost:hover { background: #fff; color: var(--csg-green) !important; border-color: #fff; } .btn-csg-block { width: min(320px, 100%); } /* Template buttons pulled onto the brand */ .btn-contact { background-color: var(--csg-green) !important; color: #fff !important; width: auto; min-width: 260px; padding: 1.05rem 2.6rem !important; font-size: .84rem !important; margin: 2.5rem auto 0 !important; display: inline-flex; align-items: center; justify-content: center; } .btn-contact:hover { background-color: var(--csg-green-soft) !important; border: 1px solid var(--csg-green-soft) !important; color: #fff !important; } .btn-search, .btn-search-home { background-color: var(--csg-green) !important; color: #fff !important; padding: .95rem 2.2rem !important; } .btn-search:hover, .btn-search-home:hover { background-color: var(--csg-gold) !important; color: var(--csg-green) !important; } .btn-search-home .btn-search-label, .btn-search .btn-search-label { margin: 0; font-size: .84rem; letter-spacing: .16em; } /* -------------------------------------------------------------------------- 4. Navigation — logo left, links right (the original site's arrangement) -------------------------------------------------------------------------- */ .navigation-clean.csg-nav { padding: 0; background: #fff; border-bottom: 1px solid var(--csg-line); } .csg-nav .nav-container { width: min(94%, 1440px); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: var(--nav-height, 170px); padding: var(--nav-padding, 10px) 0; } .csg-nav .navbar-brand { margin: 0; padding: 0; display: flex; align-items: center; } .csg-nav .nav-logo { height: var(--nav-logo-height, 150px); width: auto; } .csg-nav .nav-links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); } .csg-nav .nav-link { font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: .15em; font-size: .78rem; font-weight: 500; color: var(--csg-green); padding: .4rem 0; position: relative; white-space: nowrap; transition: color .25s ease; } /* Gold underline on hover — quiet, not a colour change */ .csg-nav .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--csg-gold); transform: scaleX(0); transition: transform .28s ease; } .csg-nav .nav-link:hover::after, .csg-nav .nav-link.active::after { transform: scaleX(1); } .csg-nav .nav-link:hover { color: var(--csg-gold) !important; } /* Utility cluster (saved + log in) separated by a hairline */ .csg-nav .nav-utility { display: flex; align-items: center; gap: clamp(.9rem, 1.6vw, 1.5rem); padding-left: clamp(1rem, 2vw, 1.9rem); margin-left: clamp(.2rem, 1vw, .6rem); border-left: 1px solid var(--csg-line); } .csg-nav .nav-btn { border: 1px solid var(--csg-green); padding: .62rem 1.4rem; color: var(--csg-green); } .csg-nav .nav-btn::after { display: none; } .csg-nav .nav-btn:hover { background: var(--csg-green); color: #fff !important; } .csg-nav .nav-saved-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: .4rem; border-radius: 9px; background: var(--csg-gold); color: var(--csg-green); font-size: .65rem; font-weight: 700; letter-spacing: 0; line-height: 1; vertical-align: middle; } /* Mobile bar */ .csg-nav-mobile { display: none; padding: 0; background: #fff; border-bottom: 1px solid var(--csg-line); } /* Height is pinned rather than left to the logo + padding, so the hero's offset can rely on --nav-mobile-height and no sliver of page shows through. */ .csg-nav-mobile .navbar-container { display: flex; align-items: center; justify-content: space-between; width: min(92%, 1440px); height: calc(var(--nav-mobile-height) - 1px); /* the 1px is the border */ padding: 0; } .csg-nav-mobile .nav-logo-mobile { height: 78px; width: auto; } .csg-nav-mobile .navbar-toggler { border: 1px solid var(--csg-line); border-radius: 0; padding: .5rem .65rem; background: transparent; } .csg-nav-mobile .navbar-toggler:focus { box-shadow: none; } .csg-nav-mobile .toggler-bar { display: block; width: 22px; height: 2px; /* whole pixels — 1.5px rounds unevenly bar to bar */ margin: 4px 0; border-radius: 1px; background: var(--csg-green); } @media (max-width: 1199.98px) { .navigation-clean.csg-nav { display: none; } .csg-nav-mobile { display: block; } } /* Slide-in drawer */ .full-screen-menu { position: fixed; top: 0; right: 0; width: min(360px, 86vw); height: 100%; background: var(--csg-green); z-index: 99999; transform: translateX(100%); transition: transform .35s cubic-bezier(.4, 0, .2, 1); display: flex; flex-direction: column; padding: 5rem 2.4rem 2.4rem; overflow-y: auto; } .full-screen-menu.show { transform: translateX(0); } .full-screen-menu .nav-link { font-family: "Jost", sans-serif; color: #fff; text-transform: uppercase; letter-spacing: .18em; font-size: .84rem; padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); } .full-screen-menu .nav-link:hover { color: var(--csg-gold-light) !important; } .full-screen-menu .close-btn { position: absolute; top: 1.6rem; right: 1.8rem; background: none; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; } .full-screen-menu .drawer-mark { height: 120px; width: auto; margin-bottom: 2rem; align-self: flex-start; } .mobile-nav-overlay { position: fixed; inset: 0; background: rgba(6, 39, 26, .55); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; z-index: 99998; } .mobile-nav-overlay.show { opacity: 1; visibility: visible; } body.mobile-nav-open { overflow: hidden; } .mobile-nav-saved-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--csg-gold); color: var(--csg-green); font-size: .65rem; font-weight: 700; } /* -------------------------------------------------------------------------- 5. Hero — the original site's full-height masthead, in brand colours -------------------------------------------------------------------------- */ .hero-main { position: relative; display: flex; /* flex container: no margin collapse from children */ flex-direction: column; justify-content: center; /* The hero photo is bright, near-white through the middle, so the type is dark green over a soft cream veil rather than white over a dark wash. The radial layer guarantees a light bed for the text at any crop. */ background: radial-gradient(ellipse 64% 70% at 50% 44%, rgba(250, 248, 243, .58) 0%, rgba(250, 248, 243, .30) 55%, rgba(250, 248, 243, 0) 80%), linear-gradient(to bottom, rgba(250, 248, 243, .34) 0%, rgba(250, 248, 243, .10) 38%, rgba(250, 248, 243, .22) 100%), var(--hero-bg); background-position: center, center, center; background-size: cover, cover, cover; background-repeat: no-repeat; height: calc(100vh - var(--nav-height, 170px)); min-height: 520px; max-height: 820px; margin-top: var(--nav-height, 170px); padding: 3rem 1.25rem; } .hero-main-content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0; padding: 0; text-align: center; } .hero-welcome { font-family: "Jost", sans-serif; text-align: center; color: var(--csg-green); font-size: var(--hero-welcome-font-size, clamp(2rem, 5.4vw, 4rem)); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; line-height: 1.25; margin: 0; /* a cream halo, so the type lifts off the skyline detail rather than sitting in a dark box */ text-shadow: 0 1px 16px rgba(250, 248, 243, .95), 0 0 44px rgba(250, 248, 243, .75); } .hero-tagline { font-family: "Sacramento", cursive; color: var(--csg-gold-deep); font-size: clamp(1.8rem, 4vw, 2.9rem); line-height: 1.2; margin: 1.1rem 0 0; text-shadow: 0 1px 14px rgba(250, 248, 243, .95), 0 0 34px rgba(250, 248, 243, .8); } .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.4rem; } .hero-actions .btn-csg { min-width: 220px; } /* Plain page header for inner pages, sitting under the solid nav */ .page-header { background: var(--csg-cream); border-bottom: 1px solid var(--csg-line); padding-top: calc(var(--nav-solid-height, 170px) + clamp(2.5rem, 5vw, 4rem)) !important; padding-bottom: clamp(2.5rem, 5vw, 4rem); } .page-header .csg-lead { margin-bottom: 0; } /* -------------------------------------------------------------------------- 6. Service / value cards (the four pillars from the brand banner) -------------------------------------------------------------------------- */ .csg-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; } .csg-grid > * { flex: 1 1 230px; max-width: 320px; } /* Five services sit on one line once there is room for them */ @media (min-width: 1200px) { .csg-grid > * { flex: 1 1 0; max-width: none; } } .csg-card { background: #fff; border: 1px solid var(--csg-line); padding: 2.6rem 1.9rem; text-align: center; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .csg-card:hover { border-color: var(--csg-gold-line); box-shadow: var(--csg-shadow); transform: translateY(-3px); } .csg-card .csg-card-icon { font-size: 1.7rem; color: var(--csg-gold); margin-bottom: 1.2rem; display: block; } .csg-card h3 { font-size: .92rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 500; margin: 0 0 .85rem; } .csg-card p { color: var(--csg-muted); font-size: .95rem; line-height: 1.7; margin: 0; } /* The four value props, shown as a green band with gold icons */ .csg-pillars { background: var(--csg-green); padding: clamp(3rem, 6vw, 4.5rem) 0; } /* Explicit steps: 1 across, then 2x2, then 4 across. auto-fit would give an awkward 3 + 1 at in-between widths. */ .csg-pillars .csg-pillar-grid { display: grid; grid-template-columns: 1fr; width: min(92%, 1180px); margin: 0 auto; } @media (min-width: 576px) { .csg-pillars .csg-pillar-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .csg-pillars .csg-pillar-grid { grid-template-columns: repeat(4, 1fr); } } .csg-pillar { text-align: center; padding: 1rem 1.6rem; border: 0; } /* Single column: a rule between each, none trailing the last */ .csg-pillar:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, .16); } /* 2x2: a cross — right edge on the left column, bottom edge on the top row */ @media (min-width: 576px) { .csg-pillar:not(:last-child) { border-bottom: 0; } .csg-pillar:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .16); } .csg-pillar:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .16); } } /* 4 across: uprights between, none trailing the last */ @media (min-width: 1100px) { .csg-pillar:nth-child(-n+2) { border-bottom: 0; } .csg-pillar:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, .16); } .csg-pillar:last-child { border-right: 0; } } .csg-pillar i { font-size: 1.6rem; color: var(--csg-gold); display: block; margin-bottom: 1rem; } .csg-pillar span { font-family: "Jost", sans-serif; display: block; color: #fff; text-transform: uppercase; letter-spacing: .13em; font-size: .78rem; line-height: 1.7; } /* Split feature row: image one side, copy the other */ .csg-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .csg-split img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; display: block; } .csg-checklist { list-style: none; padding: 0; margin: 1.75rem 0 0; } .csg-checklist li { display: flex; align-items: flex-start; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid var(--csg-line); font-size: .98rem; } .csg-checklist li:last-child { border-bottom: 0; } .csg-checklist i { color: var(--csg-gold); font-size: .95rem; margin-top: .35rem; flex-shrink: 0; } /* -------------------------------------------------------------------------- 7. Certifications / portals -------------------------------------------------------------------------- */ .csg-certs { background: #fff; padding: clamp(3.5rem, 7vw, 5.5rem) 0; } .brands { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.8rem, 4vw, 3.4rem); width: min(92%, 1180px); margin: 0 auto; } .brands img { opacity: .92; transition: opacity .3s ease, transform .3s ease; padding: 0; } .brands img:hover { opacity: 1; transform: translateY(-2px); } .brand-lg { height: 58px; max-width: 190px; width: auto; object-fit: contain; } .brand-md { height: 46px; max-width: 170px; width: auto; object-fit: contain; } .csg-cert-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.4rem; margin-top: 3rem; } .csg-cert-links a { font-family: "Jost", sans-serif; font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--csg-muted); border-bottom: 1px solid var(--csg-gold-line); padding-bottom: .3rem; } .csg-cert-links a:hover { color: var(--csg-gold) !important; } /* Standard clearance for pages that sit under the solid nav */ .page-below-nav { padding-top: calc(var(--nav-solid-height) + 2.5rem); } @media (max-width: 1199.98px) { :root { --nav-solid-height: var(--nav-mobile-height, 108px); } } /* -------------------------------------------------------------------------- 8. Property cards & listing pages -------------------------------------------------------------------------- */ .grid-listing .grid-listing-wrapper { box-shadow: none; border: 1px solid var(--csg-line); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .grid-listing .grid-listing-wrapper:hover { box-shadow: var(--csg-shadow-lg); border-color: var(--csg-gold-line); transform: translateY(-4px); } .details-container { background: #fff !important; padding: 1.35rem 1.4rem 1.5rem !important; } .details-container .first-line h5 { font-family: "Jost", sans-serif; font-size: .93rem; font-weight: 500; letter-spacing: .04em; color: var(--csg-ink); margin-bottom: .85rem; line-height: 1.5; } .details-container .second-line { align-items: baseline; padding-top: .85rem; border-top: 1px solid var(--csg-line); } .details-container .price-wrapper h4 { font-family: "Jost", sans-serif; color: var(--csg-green) !important; font-size: 1.12rem; font-weight: 600; letter-spacing: .02em; margin: 0; } .details-container .bedbath-wrapper h4 { font-size: .88rem; color: var(--csg-muted); margin: 0; font-weight: 400; } .details-container .bedbath-wrapper i { color: var(--csg-gold); } /* Listing pages: header band, filter bar, toolbar, results */ .listing-header { background: var(--csg-cream); padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--csg-line); } .listing-page { background: #fff; padding: clamp(2rem, 4vw, 3rem) 0 clamp(4rem, 8vw, 7rem); } .filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; } .filter-row-submit { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--csg-line); gap: 1rem; align-items: stretch; /* input and button share a height */ } .filter-row-submit .search-text-container, .filter-row-submit .submit-container { display: flex; } .filter-row-submit .search-text-container .selectize-control, .filter-row-submit .search-text-container .selectize-input { width: 100%; } .filter-row-submit .selectize-input { display: flex !important; align-items: center; height: auto !important; min-height: var(--csg-control-height); padding: 0 1rem !important; } .filter-row-submit .btn-search { height: var(--csg-control-height); padding: 0 2.4rem !important; display: inline-flex; align-items: center; justify-content: center; } .filter-row .price-container { flex: 1 1 320px; min-width: 260px; align-items: center; gap: .9rem; } .filter-row .beds-container, .filter-row .baths-container { align-items: center; gap: .9rem; } .filter-row .beds-btn-wrapper, .filter-row .baths-btn-wrapper { gap: .4rem; } .filter-row .beds-btn, .filter-row .baths-btn { min-width: 42px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0 .6rem; } .filter-row .label-wrapper h5, .filter-row .price-label h5 { font-family: "Jost", sans-serif; font-size: .8rem; letter-spacing: .1em; color: var(--csg-ink); margin: 0; white-space: nowrap; } .filter-row-submit .submit-container .btn-search { width: auto; min-width: 180px; } .listing-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 2.5rem 0 1.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--csg-line); } .listing-count { font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; color: var(--csg-muted); } .listing-sort { display: flex; align-items: center; gap: .75rem; margin: 0; } .listing-sort > span { font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; color: var(--csg-muted); } .listing-sort .form-select { width: auto; min-width: 165px; font-family: "Jost", sans-serif; font-size: .82rem; padding: .5rem 2.2rem .5rem .85rem; } .listing-container { margin-bottom: 0; } /* Property detail page */ .single-listing { width: min(92%, 1180px); margin: 0 auto; } .single-listing .addressListing { font-family: "Jost", sans-serif; font-size: clamp(1.15rem, 2.2vw, 1.6rem); font-weight: 400; letter-spacing: .05em; color: var(--csg-green); line-height: 1.4; margin: 0; } .single-listing .price-wrapper h4 { font-family: "Jost", sans-serif; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 500; letter-spacing: .02em; color: var(--csg-green); margin: 0; } .single-listing .bedbath-badge { border: 1px solid var(--csg-line); border-radius: 0; background: #fff; padding: .7rem 1.1rem; } .single-listing .bedbath-badge .badge-icon { background: var(--csg-gold); color: #fff; } .single-listing .bedbath-badge .badge-icon i { color: #fff; } .single-listing .badge-value { font-family: "Jost", sans-serif; font-size: 1.05rem; font-weight: 500; color: var(--csg-green); } .single-listing .badge-label { font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: .14em; font-size: .62rem; color: var(--csg-muted); } .single-listing .description-title, .single-listing .listing-description h4, .single-listing h4.description-title { font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: .16em; font-size: .92rem; font-weight: 500; color: var(--csg-green); padding-bottom: .8rem; border-bottom: 1px solid var(--csg-gold-line); margin-bottom: 1.4rem; } .single-listing .listing-description { color: var(--csg-muted); line-height: 1.85; } .single-listing .csg-hr, .single-listing hr { border: 0; border-top: 1px solid var(--csg-line); opacity: 1; margin: 2.25rem 0; } /* ui-improvements.css positions the feature icon absolutely at left:0 and relies on the li's padding-left: 32px to clear it — so keep that padding. */ .single-listing .listing-bullets li { padding: .55rem 0 .55rem 32px; border-bottom: 1px solid var(--csg-line); } .single-listing .listing-bullets li::before { color: var(--csg-gold); top: .75rem; } .single-listing .favorite-btn-inline, .single-listing .share-btn, .single-listing .print-btn { border-radius: 0 !important; border: 1px solid var(--csg-line); background: #fff; color: var(--csg-green); font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; } .single-listing .favorite-btn-inline:hover, .single-listing .share-btn:hover, .single-listing .print-btn:hover { border-color: var(--csg-gold); color: var(--csg-gold); } .single-listing .carousel-control-prev-icon, .single-listing .carousel-control-next-icon { filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); } /* Filter bar — quiet, cream, hairline framed rather than a heavy green slab */ .search-wrapper .search-container, .search-main { max-width: none; width: 100%; background: var(--csg-cream); border: 1px solid var(--csg-line); color: var(--csg-ink) !important; padding: 1.1rem 1.25rem; } .search-wrapper .search-container h5, .search-main h5 { color: var(--csg-ink); } /* Scrolls with the page like any other section — no sticky behaviour. */ .sticky-filters { position: static; background: transparent; } .sticky-filters .search-container { box-shadow: none; } .beds-btn, .baths-btn { border: 1px solid var(--csg-line); background: #fff; border-radius: 0 !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .beds-btn h5, .baths-btn h5 { font-family: "Jost", sans-serif; font-size: .78rem; letter-spacing: .08em; color: var(--csg-ink); margin: 0; } .beds-btn.btn-active, .baths-btn.btn-active { background: var(--csg-green); border-color: var(--csg-green); } .beds-btn.btn-active h5, .baths-btn.btn-active h5 { color: #fff; } .sales-btn, .lettings-btn { font-family: "Jost", sans-serif; border-radius: 0 !important; background-color: #fff !important; border: 1px solid var(--csg-line); border-bottom: 0; width: auto; min-width: 120px; height: auto; padding: 0; display: flex; align-items: center; justify-content: center; transition: background-color .25s ease, border-color .25s ease; } .sales-btn h5, .lettings-btn h5 { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; color: var(--csg-muted) !important; margin: 0; padding: .95rem 1.2rem !important; } .sales-btn.btn-active, .lettings-btn.btn-active { background-color: var(--csg-green) !important; border-color: var(--csg-green); } .sales-btn.btn-active h5, .lettings-btn.btn-active h5 { color: #fff !important; } /* The home search sits in the full width of its section */ .search-wrapper-home { padding: 0 !important; width: 100%; } .search-container-home { max-width: 100%; width: 100%; flex-direction: column; } .search-main { background: #fff; border: 1px solid var(--csg-line); padding: 1.25rem 1.35rem; } .search-main .label-wrapper h5, .search-main .price-label h5 { font-family: "Jost", sans-serif; color: var(--csg-ink) !important; font-size: .8rem; letter-spacing: .1em; margin: 0; white-space: nowrap; } .search-main .price-container, .search-main .beds-container-home, .search-main .baths-container-home { gap: .9rem; align-items: center; padding: .35rem .9rem; } .search-main .beds-btn-wrapper, .search-main .baths-btn-wrapper { gap: .4rem; } .search-main .beds-btn, .search-main .baths-btn { min-width: 42px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0 .6rem; } .ui-slider-range { background-color: var(--csg-gold) !important; } .ui-slider .ui-slider-handle { background: var(--csg-gold) !important; border: 2px solid #fff !important; border-radius: 50% !important; box-shadow: 0 1px 6px rgba(9, 58, 37, .3); } .selectize-input { border: 1px solid var(--csg-line) !important; border-radius: 0 !important; box-shadow: none !important; } .selectize-control.multi .selectize-input > div { background: var(--csg-green) !important; color: #fff !important; border-radius: 0 !important; } .form-select, .form-control { border-radius: 0; border-color: var(--csg-line); font-size: .92rem; } .form-select:focus, .form-control:focus { border-color: var(--csg-gold); box-shadow: 0 0 0 .15rem rgba(191, 149, 63, .18); } /* Empty / loading states */ .empty-state { text-align: center; padding: 5rem 1.5rem; color: var(--csg-muted); } .empty-state-icon { font-size: 2.4rem; color: var(--csg-gold); margin-bottom: 1.2rem; } .empty-state h3 { text-transform: uppercase; letter-spacing: .14em; font-size: 1.05rem; margin-bottom: .75rem; } .empty-state-suggestions { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: center; margin-top: 1.6rem; } .empty-state-suggestions a { font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; color: var(--csg-green); background: transparent; border: 0; border-bottom: 1px solid var(--csg-gold-line); border-radius: 0; padding: 0 0 .3rem; transition: color .25s ease, border-color .25s ease; } .empty-state-suggestions a:hover { background: transparent; color: var(--csg-gold) !important; border-bottom-color: var(--csg-gold); transform: none; } /* -------------------------------------------------------------------------- 9. Testimonials -------------------------------------------------------------------------- */ .testimonials-main, .testimonials-clean { background: linear-gradient(rgba(6, 39, 26, .93), rgba(6, 39, 26, .93)), var(--reviews-bg); background-size: cover; background-position: center; background-attachment: scroll; padding: var(--csg-section) 0; } .testimonials-clean .item .box { background: transparent; border: 0; box-shadow: none; padding: 0 1rem; } /* Testimonials.css draws a white speech-bubble tail on the box; the box is transparent here, so the tail is left hanging in mid-air. */ .testimonials-clean .item .box::after { display: none !important; } .testimonials-clean .item .description { color: rgba(255, 255, 255, .92); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.85; font-weight: 300; text-align: center; font-style: normal; } .testimonials-clean .fa-quote-left, .testimonials-clean .fa-quote-right { color: var(--csg-gold) !important; font-size: 1.3rem; opacity: .9; } .testimonials-clean .author { text-align: center; margin-top: 2rem; } .testimonials-clean .author .name { font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: .18em; font-size: .82rem; color: #fff !important; margin-bottom: .35rem; } .testimonials-clean .author .title { color: var(--csg-gold-light) !important; font-size: .74rem; text-transform: uppercase; letter-spacing: .18em; } .testimonials-clean .carousel-control-prev, .testimonials-clean .carousel-control-next { width: 5%; opacity: .5; } .testimonials-clean .carousel-control-prev:hover, .testimonials-clean .carousel-control-next:hover { opacity: 1; } /* -------------------------------------------------------------------------- 10. Contact strip & footer -------------------------------------------------------------------------- */ .footer-dark { background: var(--csg-green); color: rgba(255, 255, 255, .82); padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem; font-size: .93rem; border-top: 1px solid var(--csg-gold-line); } .footer-dark .container { width: min(92%, 1180px); } .footer-dark h3 { font-family: "Jost", sans-serif; color: #fff; font-size: .84rem; text-transform: uppercase; letter-spacing: .2em; margin-bottom: 1rem; } .footer-dark p { color: rgba(255, 255, 255, .72); line-height: 1.9; } .footer-dark a { color: rgba(255, 255, 255, .82) !important; } .footer-dark a:hover { color: var(--csg-gold-light) !important; } .footer-dark ul { list-style: none; padding: 0; margin: 0; } .footer-dark .item ul li a { font-family: "Jost", sans-serif; font-size: .76rem !important; font-weight: 500 !important; text-transform: uppercase; letter-spacing: .16em; line-height: 2.5; } .footer-dark .item i { color: var(--csg-gold); font-size: 1rem !important; width: 20px; } .footer-dark .footer-mark { height: 104px; width: auto; margin-bottom: 1.5rem; } .footer-dark .copyright { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 3rem; padding-top: 1.6rem; text-align: center; font-size: .78rem; color: rgba(255, 255, 255, .58); letter-spacing: .04em; } .footer-dark .copyright a { color: rgba(255, 255, 255, .7) !important; } /* -------------------------------------------------------------------------- 11. Cookie bar, back-to-top, misc -------------------------------------------------------------------------- */ /* Cream, so the bar reads as an overlay against both the hero photo and the green footer rather than blending into either. */ .cookiealert { background: var(--csg-cream) !important; color: var(--csg-ink) !important; border-radius: 0 !important; border: 0; border-top: 2px solid var(--csg-gold); font-size: .88rem; padding: 1rem 1.25rem; box-shadow: 0 -6px 30px rgba(6, 39, 26, .22); } .cookiealert a { color: var(--csg-green) !important; text-decoration: underline; } .cookiealert a:hover { color: var(--csg-gold) !important; } .cookiealert .acceptcookies { background: var(--csg-green) !important; border-color: var(--csg-green) !important; color: #fff !important; border-radius: 0 !important; font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; padding: .5rem 1.4rem; } .cd-top { background-color: var(--csg-green) !important; filter: none !important; opacity: .85 !important; border-radius: 0 !important; } .cd-top:hover { background-color: var(--csg-gold) !important; opacity: 1 !important; } /* Forms — enquiry, valuation and registration */ .csg-form .form-control, .form-card .form-input, .form-input { border-radius: 0 !important; border: 1px solid var(--csg-line); background: #fff; padding: .85rem 1rem; font-family: "DM Sans", sans-serif; font-size: .98rem; color: var(--csg-ink); } .csg-form .form-control:focus, .form-input:focus { border-color: var(--csg-gold); box-shadow: 0 0 0 .15rem rgba(191, 149, 63, .18); outline: none; } .csg-form .form-check-input, .form-checkbox { border-radius: 0; border-color: var(--csg-line); margin-top: .3rem; } .csg-form .form-check-input:checked, .form-checkbox:checked { background-color: var(--csg-green); border-color: var(--csg-green); } .csg-form .form-check-label, .form-checkbox-label { font-family: "DM Sans", sans-serif; text-transform: none; letter-spacing: 0; font-size: .92rem; color: var(--csg-muted); line-height: 1.6; } /* The shared form template pages */ .form-card { background: #fff; border: 1px solid var(--csg-line); border-radius: 0; box-shadow: none; padding: clamp(1.75rem, 4vw, 3rem); } .form-title { font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: .13em; color: var(--csg-green); font-weight: 500; } .form-section-title { font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: var(--csg-green); border-bottom: 1px solid var(--csg-line); padding-bottom: .6rem; } .form-submit-section .btn, .form-submit-section button[type="submit"] { font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: .16em; font-size: .84rem; background: var(--csg-green); border: 1px solid var(--csg-green); color: #fff; border-radius: 0; padding: 1.05rem 2.6rem; } .form-submit-section .btn:hover { background: var(--csg-green-soft); } .form-banner { border-radius: 0; font-size: .92rem; } .form-banner.success { border-left: 3px solid var(--csg-green); } .form-banner.error { border-left: 3px solid #A33; } /* Site alerts */ .alert-success, .alert-danger { border-radius: 0; border: 0; border-left: 3px solid var(--csg-green); background: var(--csg-cream); color: var(--csg-ink); padding: 1.1rem 1.5rem; font-size: .95rem; } .alert-danger { border-left-color: #A33; } /* Contact cards — larger type, and the borderless hours table */ .csg-contact-cards .csg-card { padding: 2.4rem 1.8rem; } .csg-contact-cards .csg-card h3 { font-size: 1rem; letter-spacing: .16em; margin-bottom: 1.1rem; } .csg-contact-cards .csg-card p, .csg-contact-cards .csg-card a { font-size: 1.15rem; line-height: 1.6; color: var(--csg-green); } .csg-contact-cards .csg-card a:hover { color: var(--csg-gold) !important; } .table-no-border { margin: 0; } .table-no-border > :not(caption) > * > * { border-bottom-width: 0; padding: .38rem .25rem; background: transparent; font-size: 1.02rem; color: var(--csg-muted); } .table-no-border td.text-end { color: var(--csg-green); white-space: nowrap; } /* Full-bleed map band */ .csg-map { line-height: 0; border-top: 1px solid var(--csg-line); } .csg-map iframe { display: block; width: 100%; border: 0; } /* Contact opens on the map, hard against the nav with no gap */ .csg-map-hero { margin-top: var(--nav-solid-height); border-top: 0; } .csg-map-hero iframe { height: 460px; } @media (max-width: 767.98px) { .csg-map-hero iframe { height: 320px; } } .form-label, label { font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--csg-muted); } /* Accordion (FAQs) */ .csg-accordion .accordion-item { border: 0; border-bottom: 1px solid var(--csg-line); background: transparent; border-radius: 0 !important; } .csg-accordion .accordion-button { font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: .84rem; font-weight: 500; color: var(--csg-green); background: transparent; box-shadow: none; padding: 1.5rem 0; border-radius: 0 !important; } .csg-accordion .accordion-button:not(.collapsed) { color: var(--csg-gold); background: transparent; } .csg-accordion .accordion-button:focus { box-shadow: none; border-color: transparent; } .csg-accordion .accordion-button::after { background-image: none; content: "\f067"; /* fa-plus */ font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: .72rem; color: var(--csg-gold); width: auto; height: auto; transform: none; } .csg-accordion .accordion-button:not(.collapsed)::after { content: "\f068"; } /* fa-minus */ .csg-accordion .accordion-body { padding: 0 0 1.6rem; color: var(--csg-muted); font-size: .98rem; line-height: 1.85; } /* Skeleton loaders in brand neutrals */ .skeleton { background: linear-gradient(90deg, #F1EEE7 25%, #E7E2D8 37%, #F1EEE7 63%); } .skeleton-card { border: 1px solid var(--csg-line); } /* -------------------------------------------------------------------------- 12. Responsive -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .hero-main { height: calc(100vh - var(--nav-mobile-height)); margin-top: var(--nav-mobile-height); min-height: 480px; /* A portrait crop with the dead centre spliced out, so the skyline is actually visible on a phone. Sky up top carries the type; the veil stays off the buildings along the bottom. */ background: radial-gradient(ellipse 92% 40% at 50% 34%, rgba(250, 248, 243, .58) 0%, rgba(250, 248, 243, .26) 60%, rgba(250, 248, 243, 0) 85%), linear-gradient(to bottom, rgba(250, 248, 243, .40) 0%, rgba(250, 248, 243, .12) 45%, rgba(250, 248, 243, 0) 72%), var(--hero-bg-mobile, var(--hero-bg)); background-position: center, center, center bottom; background-size: cover, cover, cover; } /* type sits in the upper sky, above the skyline band */ .hero-main-content { justify-content: flex-start; padding-top: 12vh; } .csg-split { gap: 2.2rem; } .footer-dark .col.item { text-align: center; align-items: center !important; } .footer-dark .item .d-flex { justify-content: center !important; } } /* Filter controls wrap rather than push the page sideways */ @media (max-width: 767.98px) { .filter-row, .search-main .d-flex.flex-column.flex-xxl-row { align-items: stretch; } .filter-row > *, .search-main .d-flex.flex-column.flex-xxl-row > * { min-width: 0; max-width: 100%; } .filter-row .beds-container, .filter-row .baths-container, .search-main .beds-container-home, .search-main .baths-container-home { flex: 1 1 100%; flex-wrap: wrap; align-items: flex-start; white-space: normal; min-width: 0; } .filter-row .beds-btn-wrapper, .filter-row .baths-btn-wrapper, .search-main .beds-btn-wrapper, .search-main .baths-btn-wrapper { flex-wrap: wrap; min-width: 0; } .filter-row .price-container, .search-main .price-container { flex: 1 1 100%; min-width: 0; white-space: normal; } /* Stacked, the button spans the same width as the field above it */ .filter-row-submit { flex-direction: column; } .filter-row-submit .search-text-container, .filter-row-submit .submit-container { width: 100%; } .filter-row-submit .submit-container .btn-search { width: 100%; } .listing-toolbar { gap: .75rem; } .listing-sort { width: 100%; justify-content: space-between; } .listing-sort .form-select { min-width: 0; flex: 1 1 auto; max-width: 220px; } } /* Keep the back-to-top button inside the viewport */ .cd-top { right: 16px !important; } @media (max-width: 575.98px) { body { font-size: 1rem; } .cd-top { right: 12px !important; bottom: 12px !important; } /* The headline is nearly edge-to-edge at 390px; ease it off a little */ .hero-welcome { font-size: clamp(1.5rem, 7vw, 2.1rem); letter-spacing: .08em; } .hero-tagline { font-size: clamp(1.5rem, 6.4vw, 2rem); } .hero-main { padding-bottom: 4.5rem; } .hero-actions { flex-direction: column; align-items: center; } .hero-actions .btn-csg { width: min(280px, 100%); } .brand-lg { height: 44px; } .brand-md { height: 36px; } .csg-card { padding: 2rem 1.4rem; } } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }