/* Theme Name: Property Portfolio Investor Theme URI: https://propertyportfolioinvestor.co.uk/ Author: Capital Business Media Author URI: https://capitalbusinessmedia.co.uk Description: Editorial theme for Property Portfolio Investor (Direction A). Mobile-first, ad-ready, SEO-friendly. Pairs with Yoast Premium for schema/meta. Design tokens and layout live in assets/css/main.css (enqueued separately). Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: Proprietary Text Domain: ppi Tags: news, magazine, editorial, two-columns, custom-menu, featured-images, translation-ready */ /* The full design system is in assets/css/main.css (enqueued in functions.php). Below: WordPress-specific glue only. */ /* Primary nav menu (wp_nav_menu outputs
  • ) */ nav.main .wrap > li{flex:none;list-style:none} nav.main .wrap > li > a{display:inline-block} nav.main .wrap .current-menu-item > a{color:var(--accent-dk);border-bottom:2px solid var(--accent)} /* Drawer menu */ .drawer .dnav li{list-style:none} /* Custom logo sizing */ .custom-logo-link{display:inline-block} .custom-logo{max-height:62px;width:auto;height:auto} /* When BlogKit renders a real ad inside the theme's .ad chrome, drop the striped placeholder background and the theme's own 'Advertisement' tag — the plugin prints its own disclosure label (avoids the double label). Also release the FIXED placeholder height (.ad-inline was 120px, .ad-mpu 250px, .ad-banner 90px). Those sizes were drawn for the grey mock boxes; a real creative taller than that escaped the container and landed on the copy below — the Taylor Wimpey homepage banner is 219px in a 120px box, so it overhung the article text by 61px (client, 2026-08-12). */ .ad:has(.blogkit-ad){background:none;border-color:transparent;height:auto;min-height:0} .ad:has(.blogkit-ad)::before{display:none} /* Creatives scale to the column and never overflow their slot, with or without :has() support. */ .ad .blogkit-ad{max-width:100%} .ad .blogkit-ad img{display:block;max-width:100%;height:auto;margin:0 auto} /* -------------------------------------------------------------------------- Article & guide body copy (.prose) — 2026-07-29. The prototype's sample article only ever used paragraphs and one H2, so the design never covered the rest of real editorial content. Anything richer (subheadings, bullet lists, numbered steps, tables, quotes) was rendering completely unstyled — the Renters' Rights guide has ten H3 subheads that had no size, no serif font and NO space above them, so it read as a wall of text. These rules apply to every article and guide, not just the one reported. -------------------------------------------------------------------------- */ .prose h3{font-family:var(--serif);font-weight:700;font-size:1.22rem;line-height:1.25;margin:28px 0 10px;color:var(--ink)} .prose h4{font-family:var(--sans);font-weight:700;font-size:.98rem;letter-spacing:.01em;margin:24px 0 8px;color:var(--ink)} .prose h2+h3,.prose h3+h4{margin-top:14px} .prose ul,.prose ol{font-family:var(--serif);font-size:1.07rem;line-height:1.7;margin:0 0 20px;padding-left:26px} .prose ul{list-style:disc} .prose ol{list-style:decimal} .prose li{margin-bottom:8px} .prose li::marker{color:var(--accent-dk)} .prose li>ul,.prose li>ol{margin:8px 0 0} .prose blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:4px solid var(--accent);font-family:var(--serif);font-size:1.15rem;line-height:1.45} .prose blockquote p{font-size:inherit;margin-bottom:10px} .prose blockquote p:last-child{margin-bottom:0} .prose a{color:var(--accent-dk);text-decoration:underline;text-underline-offset:2px} .prose hr{border:0;border-top:1px solid var(--line);margin:30px 0} .prose figure{margin:24px 0} .prose img{max-width:100%;height:auto;border-radius:6px} .prose figcaption{font-size:.78rem;color:var(--ink-soft);margin-top:6px} /* Tables scroll inside the column instead of breaking the page layout */ .prose table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.92rem;margin:0 0 22px;display:block;overflow-x:auto} .prose table th,.prose table td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top} .prose table th{font-weight:700;background:var(--paper-2);white-space:nowrap} /* -------------------------------------------------------------------------- Pagination — 2026-07-30. WordPress renders the CURRENT page number and the "…" gap as , not . The prototype's pager only ever styled `.pager a`, so the active number and the ellipsis fell through completely — sitting as raw text, unboxed and vertically misaligned against the other buttons. -------------------------------------------------------------------------- */ .pager{align-items:center;flex-wrap:wrap} .pager a,.pager span{box-sizing:border-box;min-width:38px;height:38px;padding:0 10px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:4px;font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--ink);text-decoration:none;transition:border-color .15s,color .15s,background .15s} .pager a.on,.pager span.on{background:var(--ink);border-color:var(--ink);color:#fff} .pager a:hover:not(.on){border-color:var(--accent);color:var(--accent-dk)} .pager a:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* The "…" gap is not a control — no box, just a quiet separator */ .pager span.dots{border-color:transparent;background:none;color:var(--ink-soft);min-width:22px;padding:0 2px;letter-spacing:.08em} /* -------------------------------------------------------------------------- Site search — 2026-07-30. The prototype shipped a search RESULTS page but no way to reach it: there was no search control anywhere in the header, drawer or masthead. Added a search button in the utility bar (plus the drawer and mobile bar) that opens this overlay. The results page and /?s= already worked. -------------------------------------------------------------------------- */ .utility .u-search{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;color:#cdd0d6;font-family:inherit;font-size:inherit;letter-spacing:inherit;cursor:pointer;transition:color .15s} .utility .u-search:hover{color:#fff} .utility .u-search svg{width:13px;height:13px;fill:currentColor;flex:none} .utility .u-search:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px} .search-overlay{position:fixed;inset:0;z-index:120;background:rgba(22,24,28,.72);display:flex;align-items:flex-start;justify-content:center;padding:12vh 20px 20px;animation:ppi-search-fade .16s ease-out} .search-overlay[hidden]{display:none} .search-panel{position:relative;width:100%;max-width:660px;background:var(--paper);border-radius:10px;padding:30px 32px 26px;box-shadow:0 30px 80px rgba(0,0,0,.35)} .search-panel .search-kicker{display:block;font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dk);margin-bottom:12px} .search-panel .searchbar{max-width:none} .search-panel .search-hint{margin-top:12px;font-size:.8rem;color:var(--ink-soft)} .search-close{position:absolute;top:10px;right:14px;background:none;border:0;font-size:1.7rem;line-height:1;color:var(--ink-soft);cursor:pointer;padding:4px 8px;border-radius:4px} .search-close:hover{color:var(--ink)} .search-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px} @keyframes ppi-search-fade{from{opacity:0}to{opacity:1}} @media(prefers-reduced-motion:reduce){.search-overlay{animation:none}} @media(max-width:560px){ .utility .u-search span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} .search-overlay{padding:8vh 14px 14px} .search-panel{padding:26px 20px 22px} .search-panel .searchbar{flex-direction:column} } /* -------------------------------------------------------------------------- Guide FAQ accordion — 2026-07-30. The prototype had no FAQ section, so this markup shipped with NO styling at all: browsers drew their own disclosure triangles and the "+" sat loose in the text. Restyled to match the editorial design — serif questions, a custom plus/minus control, hairline dividers. -------------------------------------------------------------------------- */ .faq-block{margin:38px 0 8px} .faq-heading{font-family:var(--serif);font-weight:700;font-size:1.5rem;line-height:1.2;margin:0;color:var(--ink)} .faq-heading::after{content:"";display:block;width:52px;height:3px;background:var(--accent);margin-top:12px} .faq-list{margin-top:20px;border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line)} .faq-summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:16px 2px;font-family:var(--serif);font-weight:700;font-size:1.06rem;line-height:1.4;color:var(--ink);transition:color .15s} .faq-summary::-webkit-details-marker{display:none} .faq-summary::marker{content:""} .faq-summary:hover{color:var(--accent-dk)} .faq-summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px} /* Plus that becomes a minus when the answer is open */ .faq-item .icon{position:relative;flex:none;width:26px;height:26px;margin-top:1px;border:1px solid var(--line);border-radius:50%;transition:background .18s,border-color .18s} .faq-item .icon::before,.faq-item .icon::after{content:"";position:absolute;top:50%;left:50%;width:11px;height:2px;background:var(--accent-dk);transform:translate(-50%,-50%);transition:transform .2s,background .18s} .faq-item .icon::after{transform:translate(-50%,-50%) rotate(90deg)} .faq-summary:hover .icon{border-color:var(--accent);background:var(--accent)} .faq-summary:hover .icon::before,.faq-summary:hover .icon::after{background:#221301} .faq-item[open] .icon{background:var(--ink);border-color:var(--ink)} .faq-item[open] .icon::before,.faq-item[open] .icon::after{background:#fff} .faq-item[open] .icon::after{transform:translate(-50%,-50%) rotate(0deg)} .faq-body{padding:0 46px 20px 2px} .faq-body p{font-family:var(--serif);font-size:1rem;line-height:1.65;color:var(--ink-soft);margin:0 0 12px} .faq-body p:last-child{margin-bottom:0} .faq-item[open] .faq-body{animation:ppi-faq-reveal .2s ease-out} @keyframes ppi-faq-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.faq-item[open] .faq-body{animation:none}.faq-item .icon,.faq-item .icon::before,.faq-item .icon::after{transition:none}} @media(max-width:560px){.faq-summary{font-size:1rem;gap:12px;padding:14px 2px}.faq-body{padding-right:34px}} /* Guide cards on /guides/ — show the featured image like every other card */ .guide .imgwrap{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)} .guide .imgwrap img{width:100%;height:100%;object-fit:cover;display:block} /* Opinion page polish 2026-07-14: uniform columnist cards (role pinned to the bottom, long names clamped) and op-ed cards with the author row bottom-aligned so the grid reads evenly. */ .colcard{display:flex;flex-direction:column;align-items:center} .colcard .av{flex:none} .colcard .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .colcard .rl{margin-top:auto;padding-top:4px} .opcard{display:flex;flex-direction:column} .opcard .authorrow{margin-top:auto;padding-top:14px} /* Client tweaks 2026-07-10: date moved into the utility bar (above the ticker), brand logo enlarged in the masthead. */ .utility .u-date{color:#8a909b;margin-left:14px;padding-left:14px;border-left:1px solid #3a3e46} .mast .logo svg{width:64px;height:54px} .mast .logo .word .l1,.mast .logo .word .l2{font-size:1.6rem} @media(max-width:560px){ .mast .logo svg{width:48px;height:40px} .mast .logo .word .l1,.mast .logo .word .l2{font-size:1.2rem} } /* Ad slot wrapper */ .ad-slot{display:flex;justify-content:center;margin:14px 0} /* Skip link / screen-reader text */ .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip-link:focus{position:fixed;left:8px;top:8px;width:auto;height:auto;clip:auto;z-index:1000;background:var(--accent);color:#221301;padding:10px 16px;border-radius:4px;font-weight:600} /* WP alignment/caption helpers inside article prose */ .prose img,.entry-content img{height:auto} .alignleft{float:left;margin:6px 20px 12px 0} .alignright{float:right;margin:6px 0 12px 20px} .aligncenter{display:block;margin:12px auto} .wp-caption-text,figcaption{font-size:.72rem;color:var(--ink-soft);margin-top:6px} /* Featured images inside prototype placeholder frames fill the frame */ .imgwrap img,.portrait img,.th img,.heroimg img{width:100%;height:100%;object-fit:cover;display:block} /* Rail "View all" link under the Opinion/Advice boxes */ .railbox .rl-more{display:block;margin-top:10px;font-size:.82rem;font-weight:700;color:var(--accent-dk);text-decoration:none} .railbox .rl-more:hover{text-decoration:underline} /* Homepage Profiles feature block (reuses .pfeat/.people from the profiles listing) */ .profiles-home{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .profiles-home .people{margin-top:26px} /* WP-adaptation rules the starter theme carried in template