/* ── HousifyHub – SEO City Landing Pages ───────────────────────────────────── /houses-for-rent/, /houses-for-sale/ (+ /{city-slug}/) hub + city pages. Design taken from the approved voorbeeld-nairobi-rent.html mockup — same tokens, hero, stat cards, sections. Only the top header is swapped out for the shared hk_plugin_navbar() (same approach as the legal pages), so the Astra-hide rules below mirror homepage.css's ".home" block but scoped to the "hk-seo-page" body class this plugin adds for these virtual pages. Loaded ONLY on these pages, LAST in (priority 100 on wp_enqueue_scripts — see hk_seo_enqueue() in includes/seo/seo-pages.php) so equal-specificity Astra rules lose the cascade tie instead of racing load order. Every color/background/border declaration below carries !important: this template never goes through page.php, so it isn't wrapped in Astra's usual #primary/.entry-content — Astra's own global link/heading colors still apply directly to our markup with no wrapper to scope them out, and CSS inheritance (e.g. .hero's color:#fff cascading to its child h1) loses to ANY directly-matching rule no matter how weak, so explicit !important is required, not just higher specificity. ─────────────────────────────────── */ /* ── Self-hosted font (no Google Fonts CDN request) ──────────────────────── Plus Jakarta Sans variable font, latin subset only (site content is English/Swahili — no cyrillic/vietnamese/latin-ext glyphs needed). A single variable-range @font-face covers weights 400–800 from one file. */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2'); } :root { --hk-seo-green:#1d4d3b; --hk-seo-green-dark:#12352a; --hk-seo-green-soft:#e8f0ec; --hk-seo-orange:#e8762d; --hk-seo-orange-soft:#fdeee2; --hk-seo-bg:#faf8f4; --hk-seo-text:#28312d; --hk-seo-muted:#70807a; --hk-seo-card:#ffffff; --hk-seo-line:#e7e3da; --hk-seo-radius:16px; --hk-seo-shadow:0 2px 12px rgba(18,53,42,.07); --hk-seo-shadow-lg:0 10px 30px rgba(18,53,42,.13); } /* ── Hide Astra theme header + page title on SEO pages (same technique as the legal/contact pages — see hk_enqueue_scripts() in housing-kenya.php) ── */ body.hk-seo-page .site-header, body.hk-seo-page #masthead, body.hk-seo-page .ast-masthead-custom-spacing, body.hk-seo-page header.site-header, body.hk-seo-page .ast-masthead-wrapper { display: none !important; } body.hk-seo-page .entry-title, body.hk-seo-page h1.page-title, body.hk-seo-page .page-header, body.hk-seo-page .ast-page-title-wrap, body.hk-seo-page .ast-page-title-bar, body.hk-seo-page .ast-blog-single-element.ast-page-title { display: none !important; } body.hk-seo-page .hk-plugin-nav { display: flex !important; } /* ── Break Astra content-width constraints — same list as homepage.css's ".home" block, in case our markup does land inside one of these (defense in depth alongside the viewport breakout on .hk-seo below). ────────────── */ body.hk-seo-page #primary, body.hk-seo-page #secondary, body.hk-seo-page .content-area, body.hk-seo-page .site-main, body.hk-seo-page #main, body.hk-seo-page #content, body.hk-seo-page .site-content, body.hk-seo-page .ast-container, body.hk-seo-page .ast-container-wrap, body.hk-seo-page .ast-article-single, body.hk-seo-page .ast-row, body.hk-seo-page article.page, body.hk-seo-page .entry-content, body.hk-seo-page .page-content { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } /* An empty Astra sidebar column (if the site's default layout reserves one) would otherwise still eat width even with the rule above — remove it. */ body.hk-seo-page #secondary, body.hk-seo-page .ast-sidebar { display: none !important; } /* Belt-and-suspenders full-bleed: makes .hk-seo break out to the real viewport width regardless of what ancestor container it happens to render inside (the rules above only help if we correctly guessed that ancestor's class/ID — this doesn't need to guess anything). overflow-x:hidden on the body is the standard safety net for the 100vw-width trick (100vw can otherwise count the scrollbar and cause a few px of horizontal scroll). */ body.hk-seo-page { overflow-x: hidden; } .hk-seo { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative; } /* ── Page scope ─────────────────────────────────────────────────────────── */ .hk-seo { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: var(--hk-seo-bg) !important; color: var(--hk-seo-text) !important; line-height: 1.65; } .hk-seo * { box-sizing: border-box; } .hk-seo .wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; } /* :not(.hk-plugin-nav a) excludes the entire hk_plugin_navbar() subtree — .hk-pnav-logo, .hk-pnav-contact, .hk-pnav-link, .hk-pnav-account, and the .hk-pnav-offcanvas panel links — since the navbar renders nested inside .hk-seo on these pages and would otherwise have its white link color (set in includes/shortcode.php) clobbered by this !important rule. */ .hk-seo a:not(.hk-plugin-nav a) { color: var(--hk-seo-green) !important; } /* ── hero ───────────────────────────────────────────────────────────────── */ .hk-seo .hero { position: relative; background: linear-gradient(150deg, #1d4d3b 0%, #16412f 55%, #12352a 100%) !important; color: #fff !important; padding: 52px 0 96px; overflow: hidden; } .hk-seo .hero::before { content: ""; position: absolute; right: -140px; top: -140px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(232,118,45,.28), transparent 65%) !important; } .hk-seo .hero::after { content: ""; position: absolute; left: -160px; bottom: -220px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.07), transparent 65%) !important; } .hk-seo .hero .wrap { position: relative; z-index: 1; } .hk-seo .crumbs { font-size: .85rem; color: rgba(255,255,255,.65) !important; margin-bottom: 18px; } .hk-seo .crumbs a { color: rgba(255,255,255,.65) !important; text-decoration: none; } .hk-seo .crumbs a:hover { color: #fff !important; } .hk-seo .crumbs strong { color: #fff !important; } /* Explicit color (not inherited from .hero) — inheritance loses to ANY directly-matching rule, including Astra's own low-specificity global "h1 { color: ... }", which is exactly what made this heading unreadable dark-on-dark before this fix. */ .hk-seo .hero h1 { color: #fff !important; font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 20px; max-width: 640px; } .hk-seo .answer { background: rgba(255,255,255,.1) !important; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18) !important; border-left: 4px solid var(--hk-seo-orange) !important; border-radius: 14px; padding: 20px 26px; max-width: 760px; } .hk-seo .answer p { font-size: 1.08rem; color: rgba(255,255,255,.94) !important; margin: 0; } .hk-seo .answer strong { color: #fff !important; } .hk-seo .updated { font-size: .8rem; color: rgba(255,255,255,.55) !important; margin-top: 12px; } /* ── stats: overlap the hero ───────────────────────────────────────────── */ .hk-seo .stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 16px; margin: -52px 0 48px; position: relative; z-index: 2; } .hk-seo .stat { background: var(--hk-seo-card) !important; border-radius: var(--hk-seo-radius); padding: 20px 16px; text-align: center; box-shadow: var(--hk-seo-shadow-lg); } .hk-seo .stat .num { font-size: 1.55rem; font-weight: 800; color: var(--hk-seo-green) !important; letter-spacing: -.02em; } .hk-seo .stat .lbl { font-size: .82rem; color: var(--hk-seo-muted) !important; margin-top: 2px; } /* ── sections ───────────────────────────────────────────────────────────── */ .hk-seo section { margin-bottom: 56px; } .hk-seo h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--hk-seo-green-dark) !important; margin-bottom: 6px; padding-left: 16px; position: relative; } .hk-seo h2::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 4px; background: var(--hk-seo-orange) !important; } .hk-seo .sub { color: var(--hk-seo-muted) !important; font-size: .95rem; margin-bottom: 20px; padding-left: 16px; } /* ── listings ───────────────────────────────────────────────────────────── */ .hk-seo .grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(245px,1fr)); gap: 20px; } .hk-seo .card { background: var(--hk-seo-card) !important; border-radius: var(--hk-seo-radius); overflow: hidden; text-decoration: none !important; color: var(--hk-seo-text) !important; box-shadow: var(--hk-seo-shadow); transition: transform .18s, box-shadow .18s; display: block; } .hk-seo .card:hover { transform: translateY(-4px); box-shadow: var(--hk-seo-shadow-lg); } .hk-seo .card .ph { height: 150px; display: grid; place-items: center; font-size: 2rem; color: rgba(255,255,255,.85) !important; overflow: hidden; } .hk-seo .card .ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .hk-seo .ph.a { background: linear-gradient(135deg,#7fa892,#4e7a65) !important; } .hk-seo .ph.b { background: linear-gradient(135deg,#d9a06b,#b07040) !important; } .hk-seo .ph.c { background: linear-gradient(135deg,#8aa6b8,#5d7d92) !important; } .hk-seo .ph.d { background: linear-gradient(135deg,#a3987d,#7d7257) !important; } .hk-seo .card .body { padding: 14px 16px 16px; } .hk-seo .price { font-weight: 800; color: var(--hk-seo-green) !important; font-size: 1.05rem; } .hk-seo .title { font-weight: 600; font-size: .95rem; margin: 2px 0; color: var(--hk-seo-text) !important; } .hk-seo .meta { font-size: .83rem; color: var(--hk-seo-muted) !important; } .hk-seo .all-link { display: inline-block; margin-top: 18px; font-weight: 700; text-decoration: none !important; color: var(--hk-seo-orange) !important; } .hk-seo .all-link:hover { text-decoration: underline !important; } /* ── price table ────────────────────────────────────────────────────────── */ .hk-seo .tbl-wrap { background: var(--hk-seo-card) !important; border-radius: var(--hk-seo-radius); box-shadow: var(--hk-seo-shadow); overflow: hidden; overflow-x: auto; } .hk-seo table { width: 100%; border-collapse: collapse; } .hk-seo th, .hk-seo td { padding: 13px 20px; text-align: left; font-size: .93rem; white-space: nowrap; color: var(--hk-seo-text) !important; } .hk-seo th { background: var(--hk-seo-green-soft) !important; color: var(--hk-seo-green-dark) !important; font-weight: 700; } .hk-seo tr + tr td { border-top: 1px solid var(--hk-seo-line) !important; } .hk-seo td:first-child { font-weight: 600; } /* ── neighbourhoods ─────────────────────────────────────────────────────── */ .hk-seo .chips { display: flex; flex-wrap: wrap; gap: 10px; } .hk-seo .chip { background: var(--hk-seo-card) !important; border-radius: 999px; padding: 9px 18px; font-size: .9rem; text-decoration: none !important; color: var(--hk-seo-text) !important; box-shadow: var(--hk-seo-shadow); font-weight: 500; transition: transform .15s; } .hk-seo .chip b { color: var(--hk-seo-orange) !important; font-weight: 700; } .hk-seo .chip:hover { transform: translateY(-2px); } /* ── city hub list (hub pages) ─────────────────────────────────────────── */ .hk-seo .city-list { display: flex; flex-wrap: wrap; gap: 10px; } .hk-seo .city-card { background: var(--hk-seo-card) !important; border-radius: var(--hk-seo-radius); padding: 16px 22px; text-decoration: none !important; color: var(--hk-seo-text) !important; box-shadow: var(--hk-seo-shadow); font-weight: 600; transition: transform .15s; flex: 1 1 220px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .hk-seo .city-card:hover { transform: translateY(-3px); box-shadow: var(--hk-seo-shadow-lg); } .hk-seo .city-card .city-count { color: var(--hk-seo-orange) !important; font-weight: 800; } /* ── local content block ───────────────────────────────────────────────── */ .hk-seo .prose { background: linear-gradient(160deg, var(--hk-seo-green-soft), #f3f7f2) !important; border-radius: var(--hk-seo-radius); padding: 26px 30px; box-shadow: var(--hk-seo-shadow); color: var(--hk-seo-text) !important; } .hk-seo .prose p + p { margin-top: 13px; } /* ── faq ────────────────────────────────────────────────────────────────── */ .hk-seo details { background: var(--hk-seo-card) !important; border-radius: 14px; padding: 16px 22px; margin-bottom: 12px; box-shadow: var(--hk-seo-shadow); } .hk-seo summary { font-weight: 700; cursor: pointer; color: var(--hk-seo-green-dark) !important; list-style: none; position: relative; padding-right: 28px; } .hk-seo summary::-webkit-details-marker { display: none; } .hk-seo summary::after { content: "+"; position: absolute; right: 0; top: -2px; font-size: 1.3rem; color: var(--hk-seo-orange) !important; font-weight: 600; } .hk-seo details[open] summary::after { content: "\2013"; } .hk-seo details p { margin-top: 10px; font-size: .95rem; color: #3c4642 !important; } /* ── cta ────────────────────────────────────────────────────────────────── */ .hk-seo .cta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .hk-seo .cta a { border-radius: var(--hk-seo-radius); padding: 26px; text-decoration: none !important; text-align: center; font-weight: 700; font-size: 1.08rem; transition: transform .15s; } .hk-seo .cta a:hover { transform: translateY(-3px); } .hk-seo .cta .tenant { background: linear-gradient(135deg, var(--hk-seo-green), var(--hk-seo-green-dark)) !important; color: #fff !important; box-shadow: var(--hk-seo-shadow-lg); } .hk-seo .cta .landlord { background: var(--hk-seo-orange-soft) !important; color: #9a4d15 !important; border: 2px solid var(--hk-seo-orange) !important; } /* ── internal links ─────────────────────────────────────────────────────── */ /* Selector prefixed with body.hk-seo-page on top of the usual .hk-seo scope — extra specificity insurance for exactly this rule, since these were the one link style reported as still losing to the theme's default look. */ .hk-seo .cities, body.hk-seo-page .cities { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: .93rem; } .hk-seo .cities a, body.hk-seo-page .cities a { text-decoration: none !important; font-weight: 500; color: var(--hk-seo-green) !important; } .hk-seo .cities a:hover, body.hk-seo-page .cities a:hover { text-decoration: underline !important; color: var(--hk-seo-green-dark) !important; } @media (max-width: 640px) { .hk-seo .cta { grid-template-columns: 1fr; } .hk-seo .hero h1 { font-size: 1.75rem; } .hk-seo .hero { padding: 36px 0 84px; } }