`public/versions/observer.html`

86 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>RENTV.com — The Observer concept</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Cormorant+Garamond:ital,wght@0,400;1,400&family=Inter:wght@300;400;600;800&family=Jost:wght@300;400;500&family=IBM+Plex+Sans:wght@300;400;600&display=swap" rel="stylesheet">
<style>
:root{--bg:#14110c;--panel:#1e1a12;--ink:#f6efe2;--gold:#c9a24b;--line:rgba(201,162,75,.30)}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:'Jost',system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
.disp{font-family:'Cormorant Garamond',Georgia,serif}a{color:inherit;text-decoration:none}
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.badge{position:fixed;left:16px;bottom:16px;z-index:60;background:var(--gold);color:#0b0b0c;font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:7px 13px;border-radius:2px;font-family:'Jost',system-ui,sans-serif}
.util{background:#000;color:#c9ccd1;font-size:12px}
.util .in{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;padding:8px 20px}
.tick{display:flex;gap:22px;overflow:hidden;white-space:nowrap}.tick b{color:var(--gold)}
.mast{border-bottom:2px solid var(--gold);max-width:1200px;margin:0 auto;padding:20px}
.mast .in{display:flex;justify-content:space-between;align-items:flex-end}
.logo{font-family:'Cormorant Garamond',Georgia,serif;font-weight:800;font-size:34px;letter-spacing:-.5px}.logo span{color:var(--gold)}
.logo small{display:block;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-top:3px;font-family:'Jost',system-ui,sans-serif;font-weight:400}
nav.sec{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;background:var(--bg)}
nav.sec .in{max-width:1200px;margin:0 auto;display:flex;gap:2px;overflow:auto;padding:0 12px}
nav.sec a{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:15px 13px;white-space:nowrap;border-bottom:3px solid transparent}
nav.sec a:hover{color:var(--gold);border-color:var(--gold)}
.breaking{background:var(--gold);color:#0b0b0c;font-size:13px}
.breaking .in{max-width:1200px;margin:0 auto;display:flex;gap:14px;align-items:center;padding:10px 20px;overflow:hidden}
.breaking b{background:#0b0b0c;color:var(--gold);font-size:11px;font-weight:800;text-transform:uppercase;padding:3px 9px;border-radius:2px;white-space:nowrap}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.grid{display:grid;grid-template-columns:1fr 330px;gap:34px;padding:28px 0}
.chip{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--gold);margin-bottom:6px}
.lead .img{aspect-ratio:16/8;border-radius:6px;overflow:hidden;background:linear-gradient(135deg,var(--panel),var(--gold))}
.lead .img img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.lead h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:40px;line-height:1.1;margin:14px 0 8px}
.lead p{opacity:.75;font-size:17px;max-width:54ch}.byl{font-size:12px;opacity:.6;margin-top:10px}
.subs{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px;border-top:1px solid var(--line);padding-top:22px}
.subs .img{aspect-ratio:16/9;border-radius:5px;background:linear-gradient(135deg,var(--panel),color-mix(in srgb,var(--gold) 60%,var(--panel)))}
.subs h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;margin:9px 0 4px;line-height:1.2}.subs p{font-size:13px;opacity:.7}
.sh{display:flex;align-items:center;gap:12px;border-top:3px solid var(--gold);padding-top:10px;margin:30px 0 16px}.sh h2{font-size:15px;text-transform:uppercase;letter-spacing:.06em}
.cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px}
.card .img{aspect-ratio:16/10;border-radius:5px;background:linear-gradient(135deg,var(--panel),color-mix(in srgb,var(--gold) 45%,var(--panel)))}
.card h4{font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;line-height:1.22;margin:9px 0 4px}.card .byl{margin-top:6px}
.rail>*{margin-bottom:24px}.box{border:1px solid var(--line);border-radius:6px;padding:18px}
.ns{background:var(--gold);color:#0b0b0c;border:0}.ns h3{font-size:18px;margin-bottom:6px}.ns p{font-size:13px;opacity:.85;margin-bottom:12px}
.ns input{width:100%;padding:11px;border:0;border-radius:4px;margin-bottom:8px;font-size:14px}
.ns button{width:100%;padding:11px;background:#0b0b0c;color:#fff;border:0;border-radius:4px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:12px;cursor:pointer}
.mr{list-style:none;counter-reset:m}.mr li{counter-increment:m;display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.mr li::before{content:counter(m);font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;color:var(--gold);line-height:1}.mr a{font-size:14px;font-weight:600;line-height:1.25}
.conf{background:linear-gradient(135deg,var(--panel),var(--gold));border-radius:6px;padding:22px;color:#fff}
.conf .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.85}.conf h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;margin:6px 0 8px}
.conf a{display:inline-block;background:#fff;color:#111;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:9px 16px;border-radius:4px;margin-top:6px}
.mkt .row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}.mkt .row:last-child{border:0}
footer{background:#000;color:#aeb6bd;margin-top:30px;padding:36px 0;font-size:13px}
footer .in{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
footer .logo{color:#fff;font-size:24px}footer h5{color:var(--gold);font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}footer a{display:block;padding:3px 0}
@media(max-width:860px){.grid{grid-template-columns:1fr}.cards,.subs{grid-template-columns:1fr 1fr}}
</style></head><body>
<a class="badge" href="/portal#suggested">◀ Concept · Commercial Observer direction</a>
<div class="util"><div class="in"><div class="tick"><span><b>CRE INDEX</b> 4,182 ▲0.6%</span><span><b>10-YR</b> 4.21%</span><span><b>LA VAC</b> 23.1%</span><span><b>IE CAP</b> 5.2%</span></div><div>Subscribe · Log In</div></div></div>
<header class="mast"><div class="in"><div class="logo">REN<span>TV</span>.com<small>The Observer · Commercial Observer direction</small></div><div style="font-size:12px;opacity:.7;text-align:right">Western U.S. Edition<br>Friday, July 17, 2026</div></div></header>
<nav class="sec"><div class="in"><a>Deals</a><a>Sales</a><a>Leases</a><a>Financing</a><a>Development</a><a>Markets</a><a>People</a><a>Conferences</a><a>Video</a></div></nav>
<div class="breaking"><div class="in"><b>Breaking</b><span>$212M multifamily portfolio trades in the San Fernando Valley · Downtown LA tower lands 140K SF lease · IE industrial cap rates compress</span></div></div>
<div class="wrap"><div class="grid">
  <main>
    <article class="lead rv"><div class="img"><img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1920&q=68&sat=-40" alt="" loading="lazy"></div><span class="chip" style="margin-top:14px">Deals · Los Angeles</span><h1 class="disp">Institutional Buyer Pays $212M for 8-Property Valley Multifamily Portfolio</h1><p>One of the largest SoCal multifamily trades of the year signals renewed confidence in workforce housing as rate expectations settle.</p><div class="byl">By RENTV Staff · 2 hours ago · 4 min read</div></article>
    <div class="subs"><article class="rv"><div class="img"></div><span class="chip">Financing</span><h3>Bridge Lender Closes $95M Recap on Century City Office</h3><p>Sponsors extend runway as maturities loom across the Westside.</p></article><article class="rv"><div class="img"></div><span class="chip">Leases</span><h3>Life-Science Tenant Takes 140K SF in Pasadena</h3><p>Lab conversions keep the San Gabriel Valley pipeline moving.</p></article></div>
    <div class="sh rv"><h2>Latest CRE News</h2></div>
    <div class="cards">
      <article class="card rv"><div class="img"></div><span class="chip">Sales</span><h4>Inland Empire Warehouse Trades at Record-Low Cap Rate</h4><div class="byl">RENTV Staff · 5h</div></article>
      <article class="card rv"><div class="img"></div><span class="chip">Development</span><h4>320-Unit Mixed-Use Project Breaks Ground in San Diego</h4><div class="byl">RENTV Staff · 6h</div></article>
      <article class="card rv"><div class="img"></div><span class="chip">Retail</span><h4>Grocery-Anchored Center Sells in Orange County for $61M</h4><div class="byl">RENTV Staff · 8h</div></article>
    </div>
  </main>
  <aside class="rail">
    <div class="ns box rv"><h3>The RENTV Daily</h3><p>Western-U.S. commercial real estate deals in your inbox every morning — free.</p><input placeholder="you@company.com"><button>Subscribe free</button></div>
    <div class="rv"><div class="sh" style="margin-top:0"><h2>Most Read</h2></div><ol class="mr"><li><a>Blackstone venture buys SoCal logistics campus for $340M</a></li><li><a>Office-to-resi conversions accelerate in DTLA</a></li><li><a>Top 10 Western-U.S. multifamily deals of Q2</a></li><li><a>Where CRE cap rates are heading into 2027</a></li></ol></div>
    <div class="conf rv"><div class="k">RENTV Conferences</div><h3>SoCal Real Estate Summit 2026</h3><p style="font-size:13px;opacity:.9">600+ brokers, investors &amp; developers · Sept 24 · Los Angeles.</p><a>Register →</a></div>
    <div class="box mkt rv"><div class="sh" style="margin-top:0"><h2>Market Snapshot</h2></div><div class="row"><span>LA Office Vacancy</span><b>23.1%</b></div><div class="row"><span>IE Industrial Cap</span><b>5.2%</b></div><div class="row"><span>SF Multifamily Rent YoY</span><b style="color:var(--gold)">+3.4%</b></div><div class="row"><span>Construction Starts</span><b>−8.7%</b></div></div>
  </aside>
</div></div>
<footer><div class="in"><div><div class="logo">REN<span style="color:var(--gold)">TV</span>.com</div><p style="max-width:34ch;opacity:.8;margin-top:8px">CRE news, deals &amp; conferences across the Western U.S. since 1998.</p></div><div><h5>Sections</h5><a>Deals</a><a>Sales</a><a>Leases</a><a>Financing</a></div><div><h5>Company</h5><a>About</a><a>Advertise</a><a>Conferences</a><a>Contact</a></div><div><h5>Follow</h5><a>LinkedIn</a><a>X</a><a>Newsletter</a></div></div></footer>
<div style="max-width:1200px;margin:0 auto;padding:14px 20px;font-size:12px;opacity:.5">Concept "The Observer" (Commercial Observer direction) · sample headlines for layout · one of six directions.</div>
<script>
const io=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}}),{threshold:.12});
document.querySelectorAll('.rv').forEach(el=>io.observe(el));
</script>
</body></html>