/* ========================================================================== PropertyBazaar — footer (v1.42) Rewritten as ONE pass. Sprints 41–43 appended three blocks to this file and the last of them reset the background to `none` on a selector that outranked the rule meant to restore it, so the footer rendered with no background and its white text vanished against the page. That is the same failure that has cost several sprints in main.css, and it was not going to stop while this file kept growing the same way. Every property below is now declared exactly once. If something needs changing, change it in place rather than appending a correction underneath. FOUR PARTS, ONE SURFACE — reading down the page: 4 .pbh-seo tabbed link block 3 .pb-footer-grid four columns of links 2 .pb-footer-bottom logo, about copy, contacts, social 1 .pb-footer-copy copyright bar The gradient runs unbroken through all four. The only rules inside it are the two that separate the parts. ========================================================================== */ :root { --pbf-teal-dk: #123C3C; --pbf-mid: #14333A; --pbf-ink: #0E1F26; --pbf-orange: #E8873C; --pbf-text: rgba(255, 255, 255, 0.66); --pbf-text-strong: rgba(255, 255, 255, 0.92); --pbf-text-mute: rgba(255, 255, 255, 0.40); --pbf-rule: rgba(255, 255, 255, 0.10); --pbf-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* -------------------------------------------------------------------------- The band above the footer main.css reserves `main.pb-main { padding-bottom: 80px }`.
has no background, so those 80px showed the page ground as a pale stripe cutting the footer away from the block above it. Every section already carries its own bottom padding. -------------------------------------------------------------------------- */ main.pb-main, .pb-main { padding-bottom: 0; } /* -------------------------------------------------------------------------- Surface — declared once -------------------------------------------------------------------------- */ /* The surface GRADIENT is set inline in footer.php — see the note there. This file owns everything except that one property, so there is exactly one place to look when the colour is wrong. A solid colour is still declared here as a floor: if the inline style is ever stripped by a caching or optimisation plugin, the footer goes dark rather than white, and white text on white is the one failure that makes the page unreadable. */ .pbh-seo { background-color: var(--pbf-teal-dk); padding: 10px 0 36px; margin: 0; } .pb-site-footer, .pb-site-footer--tealink { background-color: var(--pbf-ink); color: var(--pbf-text); margin: 0; } /* -------------------------------------------------------------------------- Typeface main.css sets Nunito on `body, .pb-container, .pb-main` and on every heading level. Nunito is meant to be the LOGO ONLY — that rule is why the footer never matched the reference regardless of colour. The wordmark keeps Nunito because that is what it is for. -------------------------------------------------------------------------- */ .pbh-seo, .pbh-seo h3, .pb-site-footer, .pb-site-footer h1, .pb-site-footer h2, .pb-site-footer h3, .pb-site-footer h4, .pb-site-footer p, .pb-site-footer a, .pb-site-footer span, .pb-site-footer div { font-family: var(--pbf-font); letter-spacing: normal; } .pb-footer-brand__mark, .pb-footer-brand__wordmark { font-family: 'Nunito', sans-serif; letter-spacing: -.02em; } .pb-site-footer .pb-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; } /* ========================================================================== PART 4 — tabbed link block ========================================================================== */ .pbh-seo .wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; } .pbh-seo .tabs { display: flex; gap: 0; flex-wrap: nowrap; overflow-x: auto; border-bottom: 1px solid var(--pbf-rule); margin-bottom: 26px; } .pbh-seo .tabs .tab { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; cursor: pointer; font-family: inherit; color: rgba(255, 255, 255, 0.58); padding: 15px 22px; white-space: nowrap; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; transition: color .15s, border-color .15s; } .pbh-seo .tabs .tab:hover { color: #fff; } .pbh-seo .tabs .tab.on { color: #fff; border-bottom-color: var(--pbf-orange); } .pbh-seo h3 { color: #fff; font-size: 16px; font-weight: 800; margin: 0 0 18px; letter-spacing: -.01em; } .pbh-seo .cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 30px; } .pbh-seo .cols ul { list-style: none; margin: 0; padding: 0; } .pbh-seo .cols li { margin-bottom: 9px; } .pbh-seo .cols a { color: var(--pbf-text); font-size: 13px; line-height: 1.45; text-decoration: none; transition: color .13s; } .pbh-seo .cols a:hover { color: var(--pbf-orange); } .pbh-seo .pane { display: none; } .pbh-seo .pane.on { display: block; } /* ========================================================================== PART 3 — link grid, four columns Three content columns remain after the brand column moved down to the about block. Community carries fourteen links to its neighbours' six, so it takes a double track and runs in two sub-columns: four even columns of roughly equal height. The grid could not balance while one list was twice as long as the others. ========================================================================== */ .pb-footer-inner { padding: 40px 0 0; } .pb-footer-grid { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 30px 40px; align-items: start; } .pb-footer-col { min-width: 0; } .pb-footer-col ul { list-style: none; margin: 0; padding: 0; } @supports (columns: 2) { .pb-footer-col--community { columns: 2; column-gap: 40px; } .pb-footer-col--community .pb-footer-heading { column-span: all; } .pb-footer-col--community li { break-inside: avoid; } } .pb-footer-heading { color: var(--pbf-orange); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 13px; } /* A second heading inside the same column needs air above it, or it reads as another link in the list it follows. */ .pb-footer-heading--space { margin-top: 24px; } .pb-footer-col a { display: block; padding: 5px 0; color: var(--pbf-text); font-size: 13.5px; font-weight: 500; line-height: 1.4; text-decoration: none; transition: color .13s, padding-left .13s; } .pb-footer-col a:hover { color: var(--pbf-orange); padding-left: 3px; } /* ========================================================================== PART 2 — about block ========================================================================== */ .pb-footer-divider { border: 0; border-top: 1px solid var(--pbf-rule); height: 0; margin: 34px 0 30px; } .pb-footer-bottom { display: grid; grid-template-columns: 1.6fr 1.1fr 1fr; gap: 40px; align-items: start; border-top: 0; padding: 0 0 36px; } .pb-footer-bottom__about .pb-footer-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-bottom: 10px; } .pb-footer-brand__mark { width: 42px; height: 42px; border-radius: 11px; flex: none; background: var(--pbf-orange); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 15px; } .pb-footer-brand__wordmark { font-size: 22px; font-weight: 900; color: #fff; line-height: 1; } .pb-footer-brand__tagline { color: var(--pbf-orange); font-size: 13px; font-weight: 700; margin: 0 0 20px; } .pb-footer-bottom__about p { color: var(--pbf-text); font-size: 13px; line-height: 1.65; margin: 0; } /* Contacts — the gap between a label and its address was the same as the gap between pairs, so three pairs read as six unrelated lines. */ .pb-footer-email { margin: 0 0 12px; line-height: 1.35; } .pb-footer-email:last-child { margin-bottom: 0; } .pb-footer-email br { display: none; } .pb-footer-email__label { display: block; margin-bottom: 1px; font-size: 11px; font-weight: 600; color: var(--pbf-text-mute); } .pb-footer-email a { font-size: 13.5px; font-weight: 600; color: var(--pbf-text-strong); text-decoration: none; border-bottom: 1px solid transparent; } .pb-footer-email a:hover { color: var(--pbf-orange); border-bottom-color: var(--pbf-orange); } .pb-social-row { display: flex; gap: 9px; margin-bottom: 18px; } .pb-social-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--pbf-text-strong); display: grid; place-items: center; transition: background .15s, color .15s, transform .15s; } .pb-social-icon:hover { background: var(--pbf-orange); color: #fff; transform: translateY(-2px); } .pb-social-icon svg { width: 16px; height: 16px; } .pb-portal-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--pbf-rule); } .pb-portal-strip__label { flex: 0 0 auto; color: var(--pbf-text-mute); font-size: 12.5px; font-weight: 600; } .pb-portal-strip a { color: var(--pbf-text-strong); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; padding: 6px 12px; border-radius: 7px; background: rgba(255, 255, 255, 0.07); transition: background .15s, color .15s; } .pb-portal-strip a:hover { background: var(--pbf-orange); color: #fff; } /* ========================================================================== PART 1 — copyright bar ========================================================================== */ .pb-footer-copy { background: rgba(0, 0, 0, 0.28); border-top: 1px solid var(--pbf-rule); margin: 0; padding: 16px 0; color: rgba(255, 255, 255, 0.48); font-size: 12px; line-height: 1.6; } .pb-footer-copy a { color: rgba(255, 255, 255, 0.62); text-decoration: none; } .pb-footer-copy a:hover { color: var(--pbf-orange); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1080px) { .pbh-seo .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pb-footer-grid { grid-template-columns: 1fr 1fr; } .pb-footer-col--community { grid-column: 1 / -1; } .pb-footer-bottom { grid-template-columns: 1fr 1fr; } .pb-footer-bottom__about { grid-column: 1 / -1; } } @media (max-width: 720px) { .pbh-seo .cols { grid-template-columns: 1fr; } .pb-footer-inner { padding: 30px 0 0; } .pb-footer-grid { grid-template-columns: 1fr; gap: 26px; } .pb-footer-col--community { columns: 1; } .pb-footer-bottom { grid-template-columns: 1fr; gap: 28px; } .pb-footer-divider { margin: 26px 0 22px; } } .pb-site-footer a:focus-visible, .pbh-seo a:focus-visible, .pb-social-icon:focus-visible { outline: 2px solid var(--pbf-orange); outline-offset: 3px; } /* ========================================================================== AI Concierge drawer The close button always worked. main.css sets display:flex on .pb-concierge-drawer, and an author declaration beats the browser's own [hidden]{display:none} — so `drawer.hidden = true` set the attribute and changed nothing. It also meant the panel was open on every page load. ========================================================================== */ .pb-concierge-drawer[hidden] { display: none !important; }