← back to Rentv 2026
public/2026/b.html
1474 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>RENTV — The Regional Authority in CRE</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,700;0,800;1,600&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
/* ── TOKENS ────────────────────────────────────────────── */
:root {
--ink: #14171a;
--sub: #5b636b;
--hair: #e4e7ea;
--red: #c8102e;
--gold: #b8860b;
--bg: #fff;
--cols: 4;
--font-serif: 'Playfair Display', Georgia, serif;
--font-body: 'Inter', system-ui, sans-serif;
}
/* ── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
color: var(--ink);
background: var(--bg);
line-height: 1.5;
font-size: 15px;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font: inherit; }
/* ── TICKER ─────────────────────────────────────────────── */
.ticker-strip {
background: var(--ink);
color: #fff;
font: 600 12px/1 var(--font-body);
letter-spacing: .03em;
overflow: hidden;
display: flex;
align-items: center;
height: 34px;
position: relative;
z-index: 100;
}
.ticker-label {
background: var(--red);
color: #fff;
font-weight: 800;
font-size: 10px;
letter-spacing: .12em;
text-transform: uppercase;
padding: 0 12px;
height: 100%;
display: flex;
align-items: center;
white-space: nowrap;
flex-shrink: 0;
z-index: 1;
}
.ticker-scroll-wrap {
overflow: hidden;
flex: 1;
height: 100%;
display: flex;
align-items: center;
}
.ticker-track {
display: flex;
align-items: center;
gap: 0;
white-space: nowrap;
animation: tickerScroll 40s linear infinite;
will-change: transform;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 28px 0 0;
color: rgba(255,255,255,.85);
}
.ticker-item .t-metric {
font-weight: 800;
color: #fff;
}
.ticker-item .t-up { color: #4caf50; }
.ticker-item .t-dn { color: #ff6b6b; }
.ticker-sep { color: rgba(255,255,255,.25); padding: 0 8px; }
@keyframes tickerScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ── UTILITY BAR ─────────────────────────────────────────── */
.util-bar {
border-bottom: 1px solid var(--hair);
background: #fafbfc;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
height: 30px;
font-size: 11px;
font-weight: 600;
color: var(--sub);
letter-spacing: .04em;
text-transform: uppercase;
}
.util-bar a { color: var(--sub); }
.util-bar a:hover { color: var(--ink); }
.util-advertise { color: var(--red) !important; font-weight: 700; }
.util-advertise:hover { text-decoration: underline; }
.util-date { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11px; }
/* ── STICKY HEADER ───────────────────────────────────────── */
.site-header {
position: sticky;
top: 0;
z-index: 200;
background: #fff;
border-bottom: 2px solid var(--ink);
}
.header-inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
height: 58px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.header-left { display: flex; align-items: center; gap: 20px; }
.header-right { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.nav-btn {
font: 600 12px/1 var(--font-body);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink);
display: flex;
align-items: center;
gap: 6px;
padding: 6px 0;
border-bottom: 2px solid transparent;
transition: border-color .15s;
}
.nav-btn:hover { border-color: var(--red); color: var(--red); }
.nav-btn svg { flex-shrink: 0; }
.wordmark {
font-family: var(--font-serif);
font-weight: 800;
font-size: 28px;
letter-spacing: -.02em;
text-align: center;
line-height: 1;
text-decoration: none;
}
.wordmark .tv { color: var(--red); }
/* ── SECTION NAV ─────────────────────────────────────────── */
.section-nav {
border-bottom: 1px solid var(--hair);
background: #fff;
}
.section-nav-inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
.section-nav-inner::-webkit-scrollbar { display: none; }
.snav-link {
font: 600 12px/1 var(--font-body);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--sub);
padding: 10px 16px;
white-space: nowrap;
border-bottom: 2px solid transparent;
transition: color .15s, border-color .15s;
}
.snav-link:hover, .snav-link.active { color: var(--ink); border-color: var(--ink); }
.snav-link.breaking { color: var(--red); border-color: var(--red); font-weight: 800; }
/* ── MAIN LAYOUT ─────────────────────────────────────────── */
.page-wrap {
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
}
/* ── LEADERBOARD SLOT ────────────────────────────────────── */
.leaderboard-wrap {
max-width: 1320px;
margin: 0 auto;
padding: 12px 24px 8px;
}
/* ── LEAD SECTION ────────────────────────────────────────── */
.lead-section {
display: grid;
grid-template-columns: 1fr 320px;
gap: 0;
border-bottom: 1px solid var(--hair);
padding: 28px 0 32px;
}
/* ── LEAD STORY ──────────────────────────────────────────── */
.lead-story {
padding-right: 32px;
border-right: 1px solid var(--hair);
}
.lead-eyebrow {
font: 700 11px/1 var(--font-body);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.lead-eyebrow::after {
content: '';
flex: 1;
height: 1px;
background: var(--red);
opacity: .3;
}
.lead-headline {
font-family: var(--font-serif);
font-weight: 800;
font-size: clamp(26px, 3.2vw, 40px);
line-height: 1.1;
letter-spacing: -.02em;
margin-bottom: 12px;
color: var(--ink);
}
.lead-headline a:hover { color: var(--red); }
.lead-dek {
font-size: 16px;
line-height: 1.6;
color: #2c3338;
margin-bottom: 18px;
max-width: 640px;
}
.lead-hero {
position: relative;
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: 3px;
background: #1a1e24;
margin-bottom: 14px;
}
.lead-hero img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease;
}
.lead-hero:hover img { transform: scale(1.015); }
.lead-hero-gradient {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #1a2030 0%, #2c3a52 50%, #1e2d1e 100%);
}
.lead-byline {
font: 500 12px/1 var(--font-body);
color: var(--sub);
letter-spacing: .02em;
}
.lead-byline strong { color: var(--ink); font-weight: 700; }
.lead-secondary-stories {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 0;
}
.secondary-story {
display: flex;
gap: 14px;
padding: 16px 0;
border-top: 1px solid var(--hair);
}
.secondary-story:first-child { border-top: none; padding-top: 0; }
.sec-thumb {
width: 100px;
height: 68px;
flex-shrink: 0;
border-radius: 3px;
overflow: hidden;
background: #1a1e24;
}
.sec-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sec-thumb .thumb-gradient {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1a2030, #2c3a52);
}
.sec-meta { flex: 1; min-width: 0; }
.sec-cat {
font: 700 10px/1 var(--font-body);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 4px;
}
.sec-title {
font-family: var(--font-serif);
font-weight: 700;
font-size: 15px;
line-height: 1.25;
color: var(--ink);
}
.sec-title a:hover { color: var(--red); }
.sec-author {
font: 500 11px/1 var(--font-body);
color: var(--sub);
margin-top: 5px;
}
/* ── VIDEO RAIL (right 1/3) ─────────────────────────────── */
.video-rail {
padding-left: 24px;
display: flex;
flex-direction: column;
}
.rail-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 12px;
border-bottom: 2px solid var(--ink);
margin-bottom: 0;
}
.rail-title {
font: 700 11px/1 var(--font-body);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink);
display: flex;
align-items: center;
gap: 6px;
}
.rail-title .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--red);
display: inline-block;
}
.rail-sort {
font: 600 11px/1 var(--font-body);
color: var(--sub);
background: none;
border: 1px solid var(--hair);
border-radius: 4px;
padding: 4px 8px;
cursor: pointer;
appearance: none;
}
.rail-sort:focus { outline: 2px solid var(--red); outline-offset: 2px; }
.video-rail .ad-wrap { margin: 12px 0; }
.vid-card-rail {
border-top: 1px solid var(--hair);
padding: 14px 0;
display: flex;
gap: 12px;
position: relative;
}
.vid-card-rail:last-of-type { border-bottom: 1px solid var(--hair); }
.vid-thumb-rail {
width: 110px;
height: 64px;
flex-shrink: 0;
border-radius: 4px;
overflow: hidden;
background: #111;
position: relative;
}
.vid-thumb-rail img { width: 100%; height: 100%; object-fit: cover; }
.vid-play-badge {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.35);
transition: background .15s;
}
.vid-play-badge svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.vid-thumb-rail:hover .vid-play-badge { background: rgba(200,16,46,.55); }
.vid-sponsored-flag {
position: absolute;
bottom: 4px;
left: 4px;
background: var(--gold);
color: #fff;
font: 800 8px/1 var(--font-body);
letter-spacing: .06em;
text-transform: uppercase;
padding: 3px 5px;
border-radius: 2px;
}
.vid-sponsor-cta {
position: absolute;
bottom: 4px;
right: 4px;
background: rgba(0,0,0,.65);
color: rgba(255,255,255,.8);
font: 600 8px/1 var(--font-body);
letter-spacing: .04em;
text-transform: uppercase;
padding: 3px 5px;
border-radius: 2px;
opacity: 0;
transition: opacity .15s;
white-space: nowrap;
}
.vid-card-rail:hover .vid-sponsor-cta { opacity: 1; }
.vid-meta-rail { flex: 1; min-width: 0; }
.vid-cat-rail {
font: 700 10px/1 var(--font-body);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sub);
margin-bottom: 4px;
}
.vid-title-rail {
font: 600 13px/1.3 var(--font-body);
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.vid-title-rail a:hover { color: var(--red); }
.vid-watch {
display: inline-flex;
align-items: center;
gap: 4px;
font: 700 10px/1 var(--font-body);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--red);
margin-top: 6px;
}
.vid-watch:hover { text-decoration: underline; }
.view-all-link {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font: 700 11px/1 var(--font-body);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--sub);
border: 1px solid var(--hair);
border-radius: 4px;
padding: 10px;
margin-top: 12px;
transition: all .15s;
}
.view-all-link:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
/* ── VIDEO ROW (horizontal scroll-snap) ─────────────────── */
.section-divider {
border-top: 2px solid var(--ink);
padding-top: 24px;
margin-top: 32px;
margin-bottom: 20px;
}
.section-divider-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.section-label {
font: 700 11px/1 var(--font-body);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink);
white-space: nowrap;
}
.section-controls {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.ctrl-select {
font: 600 11px/1 var(--font-body);
color: var(--sub);
background: none;
border: 1px solid var(--hair);
border-radius: 4px;
padding: 5px 8px;
cursor: pointer;
appearance: none;
}
.ctrl-select:focus { outline: 2px solid var(--red); outline-offset: 2px; }
.ctrl-label {
font: 600 11px/1 var(--font-body);
color: var(--sub);
white-space: nowrap;
}
.ctrl-range {
width: 80px;
accent-color: var(--red);
cursor: pointer;
}
.video-row-wrap {
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
scrollbar-color: var(--hair) transparent;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
}
.video-row {
display: flex;
gap: 16px;
width: max-content;
padding: 4px 2px;
}
.vid-card-h {
width: 240px;
scroll-snap-align: start;
flex-shrink: 0;
position: relative;
border-radius: 6px;
overflow: hidden;
background: #111;
box-shadow: 0 2px 8px rgba(0,0,0,.1);
transition: transform .2s, box-shadow .2s;
cursor: pointer;
}
.vid-card-h:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.vid-card-h-thumb {
width: 100%;
aspect-ratio: 16/9;
position: relative;
overflow: hidden;
}
.vid-card-h-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vid-card-h-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.3);
transition: background .15s;
}
.vid-card-h:hover .vid-card-h-play { background: rgba(200,16,46,.5); }
.vid-card-h-body { padding: 12px; background: #fff; border: 1px solid var(--hair); border-top: none; border-radius: 0 0 6px 6px; }
.vid-card-h-cat {
font: 700 9px/1 var(--font-body);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sub);
margin-bottom: 5px;
}
.vid-card-h-title {
font: 600 13px/1.3 var(--font-body);
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.vid-sponsor-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
}
.vid-sponsor-flag-h {
background: var(--gold);
color: #fff;
font: 800 9px/1 var(--font-body);
letter-spacing: .06em;
text-transform: uppercase;
padding: 3px 6px;
border-radius: 2px;
}
.vid-sponsor-cta-h {
font: 700 9px/1 var(--font-body);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--sub);
border: 1px solid var(--hair);
border-radius: 3px;
padding: 3px 6px;
transition: all .15s;
}
.vid-sponsor-cta-h:hover { background: var(--red); color: #fff; border-color: var(--red); }
/* ── NEWS RIVER ──────────────────────────────────────────── */
.news-river-wrap { padding-bottom: 40px; }
.news-grid {
display: grid;
grid-template-columns: repeat(var(--cols), 1fr);
gap: 28px 24px;
margin-top: 4px;
}
.story-card {
display: flex;
flex-direction: column;
gap: 0;
}
.story-thumb {
width: 100%;
aspect-ratio: 16/10;
border-radius: 4px;
overflow: hidden;
background: #1a1e24;
margin-bottom: 12px;
position: relative;
}
.story-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.story-card:hover .story-thumb img { transform: scale(1.04); }
.story-thumb .thumb-gradient {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1a2030, #2c3a52);
}
.story-cat {
font: 700 10px/1 var(--font-body);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 6px;
}
.story-title {
font-family: var(--font-serif);
font-weight: 700;
font-size: 16px;
line-height: 1.25;
color: var(--ink);
margin-bottom: 6px;
}
.story-title a:hover { color: var(--red); }
.story-author {
font: 500 11px/1 var(--font-body);
color: var(--sub);
margin-top: auto;
padding-top: 6px;
}
/* Ad card inside the river */
.story-card.ad-card {
border: none;
background: transparent;
}
/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer {
background: var(--ink);
color: rgba(255,255,255,.65);
padding: 40px 0 28px;
margin-top: 0;
}
.footer-inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
}
.footer-top {
display: grid;
grid-template-columns: auto 1fr 1fr 1fr;
gap: 40px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-wordmark {
font-family: var(--font-serif);
font-weight: 800;
font-size: 26px;
color: #fff;
letter-spacing: -.02em;
}
.footer-wordmark .tv { color: var(--red); }
.footer-tagline {
font: 400 12px/1.5 var(--font-body);
color: rgba(255,255,255,.4);
margin-top: 6px;
max-width: 160px;
}
.footer-col-head {
font: 700 10px/1 var(--font-body);
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.9);
margin-bottom: 14px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-links a {
font: 400 13px/1 var(--font-body);
color: rgba(255,255,255,.55);
transition: color .15s;
}
.footer-links a:hover { color: #fff; }
.footer-bot {
padding-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
font: 400 11px/1 var(--font-body);
color: rgba(255,255,255,.3);
}
.footer-bot a { color: rgba(255,255,255,.45); }
.footer-bot a:hover { color: rgba(255,255,255,.8); }
/* ── SWITCH CHIP ─────────────────────────────────────────── */
.switch-chip {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
background: var(--ink);
color: #fff;
font: 700 11px/1 var(--font-body);
letter-spacing: .04em;
padding: 10px 14px;
border-radius: 20px;
box-shadow: 0 4px 16px rgba(0,0,0,.25);
transition: background .15s, transform .15s;
white-space: nowrap;
}
.switch-chip:hover { background: var(--red); transform: translateY(-2px); }
/* ── LOADING / STATES ────────────────────────────────────── */
.skeleton {
background: linear-gradient(90deg, #f0f2f4 25%, #e4e7ea 50%, #f0f2f4 75%);
background-size: 200% 100%;
animation: shimmer 1.4s infinite;
border-radius: 4px;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.empty-state {
grid-column: 1 / -1;
text-align: center;
padding: 40px;
color: var(--sub);
font: 400 14px/1.5 var(--font-body);
}
/* ── MODAL VIDEO OVERLAY ─────────────────────────────────── */
.video-modal {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(0,0,0,.88);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: opacity .2s;
}
.video-modal.open { opacity: 1; pointer-events: all; }
.video-modal-inner {
width: 100%;
max-width: 840px;
position: relative;
}
.video-modal-close {
position: absolute;
top: -36px;
right: 0;
color: #fff;
font: 600 14px/1 var(--font-body);
cursor: pointer;
opacity: .7;
background: none;
border: none;
}
.video-modal-close:hover { opacity: 1; }
.video-modal-frame {
width: 100%;
aspect-ratio: 16/9;
border-radius: 6px;
overflow: hidden;
background: #000;
}
.video-modal-frame iframe {
width: 100%;
height: 100%;
border: none;
}
/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1100px) {
:root { --cols: 3; }
.lead-section { grid-template-columns: 1fr 280px; }
.video-rail { padding-left: 20px; }
}
@media (max-width: 860px) {
:root { --cols: 2; }
.lead-section { grid-template-columns: 1fr; }
.lead-story { padding-right: 0; border-right: none; border-bottom: 1px solid var(--hair); padding-bottom: 24px; margin-bottom: 24px; }
.video-rail { padding-left: 0; }
.footer-top { grid-template-columns: 1fr 1fr; gap: 24px; }
.footer-top > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
:root { --cols: 1; }
.header-inner { padding: 0 16px; }
.page-wrap { padding: 0 16px; }
.leaderboard-wrap { padding: 8px 16px; }
.wordmark { font-size: 22px; }
.util-bar { padding: 0 16px; }
.section-nav-inner { padding: 0 16px; }
.footer-top { grid-template-columns: 1fr; }
.lead-headline { font-size: 24px; }
}
</style>
</head>
<body>
<!-- ══ TICKER STRIP ════════════════════════════════════════ -->
<div class="ticker-strip" role="marquee" aria-label="Market data">
<span class="ticker-label">● Markets</span>
<div class="ticker-scroll-wrap">
<div class="ticker-track" id="tickerTrack">
<span class="ticker-item"><span>Loading market data…</span></span>
</div>
</div>
</div>
<!-- ══ UTILITY BAR ═════════════════════════════════════════ -->
<div class="util-bar">
<span class="util-date" id="utilDate"></span>
<div style="display:flex;align-items:center;gap:16px;">
<a href="/subscribe.html">Subscribe</a>
<a href="/advertise.html" class="util-advertise">Advertise →</a>
</div>
</div>
<!-- ══ STICKY HEADER ════════════════════════════════════════ -->
<header class="site-header" role="banner">
<div class="header-inner">
<div class="header-left">
<button class="nav-btn" id="menuBtn" aria-label="Open navigation" aria-expanded="false">
<svg width="18" height="14" viewBox="0 0 18 14" fill="none" aria-hidden="true">
<rect y="0" width="18" height="2" rx="1" fill="currentColor"/>
<rect y="6" width="18" height="2" rx="1" fill="currentColor"/>
<rect y="12" width="18" height="2" rx="1" fill="currentColor"/>
</svg>
Explore
</button>
</div>
<a href="/" class="wordmark" aria-label="RENTV — Home">REN<span class="tv">TV</span></a>
<div class="header-right">
<a href="#section-nav" class="nav-btn">Sections</a>
<a href="https://www.rentvreview.com/" class="nav-btn" rel="noopener" target="_blank" style="color:var(--red);">
▶ The REview
</a>
</div>
</div>
</header>
<!-- ══ SECTION NAV ══════════════════════════════════════════ -->
<nav class="section-nav" id="section-nav" aria-label="Sections">
<div class="section-nav-inner">
<a href="/sales.html" class="snav-link active">Sales</a>
<a href="/leasing.html" class="snav-link">Leasing</a>
<a href="/markets.html" class="snav-link">Financing</a>
<a href="/markets.html" class="snav-link">Multifamily</a>
<a href="/markets.html" class="snav-link">Industrial</a>
<a href="/markets.html" class="snav-link">Office</a>
<a href="/markets.html" class="snav-link">Retail</a>
<a href="/markets.html" class="snav-link">Markets</a>
<a href="/deals.html" class="snav-link">Deals</a>
<a href="/hub.html" class="snav-link">Intelligence</a>
<a href="https://www.rentvreview.com/" class="snav-link breaking" rel="noopener" target="_blank">▶ Watch</a>
</div>
</nav>
<!-- ══ LEADERBOARD SLOT ═════════════════════════════════════ -->
<div class="leaderboard-wrap">
<div data-ad-slot="home-leaderboard"></div>
</div>
<!-- ══ MAIN ═════════════════════════════════════════════════ -->
<main class="page-wrap" id="main" role="main">
<!-- LEAD SECTION -->
<section class="lead-section" aria-label="Top stories">
<!-- LEFT: Lead + secondary stories -->
<div class="lead-story">
<div class="lead-eyebrow" id="leadEyebrow">Loading…</div>
<h1 class="lead-headline" id="leadHeadline">
<a href="#" id="leadLink">Retrieving top story…</a>
</h1>
<p class="lead-dek" id="leadDek">Western commercial real estate news — the deals, the capital, the market intelligence.</p>
<a href="#" class="lead-hero" id="leadHeroLink" aria-label="Read lead story">
<div class="lead-hero-gradient" id="leadGradient"></div>
<img id="leadImg" src="" alt="" style="display:none;" loading="eager">
</a>
<div class="lead-byline" id="leadByline"></div>
<!-- Secondary stories -->
<div class="lead-secondary-stories" id="secondaryStories" aria-label="Secondary stories"></div>
</div>
<!-- RIGHT: Video rail -->
<aside class="video-rail" aria-label="RENTV Video">
<div class="rail-header">
<span class="rail-title"><span class="dot"></span> RENTV Video</span>
<select class="rail-sort" id="railSort" aria-label="Sort video rail">
<option value="newest">Newest</option>
<option value="category">Category</option>
<option value="title">Title A→Z</option>
<option value="views">Most Viewed</option>
</select>
</div>
<div class="video-rail-items" id="railItems" style="flex:1;">
<!-- populated by JS -->
</div>
<div class="ad-wrap"><div data-ad-slot="section-sidebar"></div></div>
<a href="https://www.rentvreview.com/" class="view-all-link" rel="noopener" target="_blank">
All Videos → The REview
</a>
</aside>
</section>
<!-- VIDEO ROW SECTION -->
<div class="section-divider">
<div class="section-divider-inner">
<span class="section-label">▶ Latest Video</span>
<div class="section-controls">
<select class="ctrl-select" id="videoRowSort" aria-label="Sort video row">
<option value="newest">Newest</option>
<option value="category">Category</option>
<option value="title">Title A→Z</option>
<option value="views">Most Viewed</option>
</select>
</div>
</div>
</div>
<div class="video-row-wrap" role="region" aria-label="Video row">
<div class="video-row" id="videoRow" aria-busy="true"></div>
</div>
<!-- NEWS RIVER SECTION -->
<div class="section-divider" style="margin-top:40px;">
<div class="section-divider-inner">
<span class="section-label">Across the Market</span>
<div class="section-controls">
<select class="ctrl-select" id="riverSort" aria-label="Sort news" aria-controls="newsGrid">
<option value="newest">Newest</option>
<option value="category">Category</option>
<option value="title">Title A→Z</option>
</select>
<span class="ctrl-label">Density</span>
<input type="range" class="ctrl-range" id="densitySlider"
min="1" max="5" step="1" value="4"
aria-label="Grid column count" aria-controls="newsGrid">
</div>
</div>
</div>
<div class="news-river-wrap">
<div class="news-grid" id="newsGrid" aria-busy="true" aria-label="News stories"></div>
</div>
</main>
<!-- ══ FOOTER ═══════════════════════════════════════════════ -->
<footer class="site-footer" role="contentinfo">
<div class="footer-inner">
<div class="footer-top">
<div>
<div class="footer-wordmark">REN<span class="tv">TV</span></div>
<p class="footer-tagline">Western U.S. commercial real estate since 1998.</p>
</div>
<div>
<div class="footer-col-head">Sections</div>
<ul class="footer-links">
<li><a href="/sales.html">Sales</a></li>
<li><a href="/leasing.html">Leasing</a></li>
<li><a href="/markets.html">Financing</a></li>
<li><a href="/markets.html">Multifamily</a></li>
<li><a href="/markets.html">Industrial</a></li>
<li><a href="/markets.html">Deals</a></li>
</ul>
</div>
<div>
<div class="footer-col-head">Intelligence</div>
<ul class="footer-links">
<li><a href="/hub.html">Hub</a></li>
<li><a href="https://www.rentvreview.com/" rel="noopener" target="_blank">The REview</a></li>
<li><a href="/market-pulse.html">Market Pulse</a></li>
<li><a href="/subscribe.html">Newsletter</a></li>
<li><a href="/search.html">Search</a></li>
</ul>
</div>
<div>
<div class="footer-col-head">Company</div>
<ul class="footer-links">
<li><a href="/about.html">About RENTV</a></li>
<li><a href="/advertise.html">Advertise</a></li>
<li><a href="/services.html">Services</a></li>
<li><a href="mailto:info@rentv.com">Contact</a></li>
</ul>
</div>
</div>
<div class="footer-bot">
<span>© 2026 RENTV Inc. All rights reserved.</span>
<a href="/advertise.html">Advertise with RENTV</a>
</div>
</div>
</footer>
<!-- ══ SWITCH CHIP ═══════════════════════════════════════════ -->
<a href="/2026/" class="switch-chip" aria-label="2026 Templates — switch">◆ 2026 Templates — switch</a>
<!-- ══ VIDEO MODAL ═══════════════════════════════════════════ -->
<div class="video-modal" id="videoModal" role="dialog" aria-modal="true" aria-label="Video player">
<div class="video-modal-inner">
<button class="video-modal-close" id="modalClose" aria-label="Close video">✕ Close</button>
<div class="video-modal-frame">
<iframe id="modalFrame" src="about:blank" allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen title="Video player" loading="lazy"></iframe>
</div>
</div>
</div>
<!-- ══ AD SLOT INCLUDE ═══════════════════════════════════════ -->
<script src="/ad-slot.js" defer></script>
<!-- ══ APP SCRIPT ════════════════════════════════════════════ -->
<script>
(function () {
'use strict';
/* ── XSS-safe text helpers ───────────────────────────── */
function esc(s) {
return String(s == null ? '' : s)
.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')
.replace(/"/g,'"').replace(/'/g,''');
}
function txt(el, str) { el.textContent = str == null ? '' : String(str); }
/* ── Date util ───────────────────────────────────────── */
var months = ['January','February','March','April','May','June',
'July','August','September','October','November','December'];
var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
function fmtDate(d) {
return days[d.getDay()] + ', ' + months[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear();
}
/* ── localStorage helpers (no-throw) ────────────────── */
function lsGet(k) { try { return localStorage.getItem(k); } catch(e) { return null; } }
function lsSet(k,v) { try { localStorage.setItem(k,v); } catch(e) {} }
/* ── Date bar ────────────────────────────────────────── */
var dateEl = document.getElementById('utilDate');
if (dateEl) txt(dateEl, fmtDate(new Date()));
/* ── Ticker ──────────────────────────────────────────── */
function buildTicker(metrics) {
var track = document.getElementById('tickerTrack');
if (!track) return;
var items = [];
Object.values(metrics).forEach(function(m) {
if (!m || typeof m !== 'object') return;
var arrow = m.dir === 'up' ? '▲' : m.dir === 'down' ? '▼' : '';
var cls = m.dir === 'up' ? 't-up' : m.dir === 'down' ? 't-dn' : '';
var val = m.value || '';
var pct = m.change_pct != null ? ' (' + (m.change_pct > 0 ? '+' : '') + m.change_pct + '%)' : '';
var bps = m.change_bps != null ? ' (' + (m.change_bps > 0 ? '+' : '') + m.change_bps + 'bps)' : '';
var change = pct || bps;
var label = esc(m.label || '');
var html = '<span class="ticker-item">' +
'<span class="t-label">' + label + '</span> ' +
'<span class="t-metric ' + cls + '">' + arrow + ' ' + esc(val) + '</span>' +
(change ? '<span style="color:rgba(255,255,255,.4)">' + esc(change) + '</span>' : '') +
'</span><span class="ticker-sep">|</span>';
items.push(html);
});
// static headlines
var headlines = [
'BlackRock entity acquires 3,620-unit SoCal portfolio in $1.6B trade',
'Seattle office and hotel asset lands $107M refi',
'GO Industrial starts 1.1msf Phoenix facility',
'Rockefeller Group acquires 34-acre Glendale site',
];
headlines.forEach(function(h) {
items.push('<span class="ticker-item" style="color:rgba(255,255,255,.75)">' + esc(h) + '</span><span class="ticker-sep">●</span>');
});
var html = items.join('');
track.innerHTML = html + html; // doubled for seamless loop
}
fetch('/api/ticker')
.then(function(r){ return r.ok ? r.json() : {}; })
.then(buildTicker)
.catch(function(){ buildTicker({}); });
/* ── Image resolver ──────────────────────────────────── */
function resolveImg(img) {
if (!img) return null;
if (typeof img === 'string') return img;
if (typeof img === 'object' && img.image) return img.image;
return null;
}
/* ── LEAD + SECONDARY STORIES ────────────────────────── */
function renderLead(items) {
if (!items || !items.length) return;
var lead = items[0];
var eyebrow = document.getElementById('leadEyebrow');
var headline = document.getElementById('leadHeadline');
var link = document.getElementById('leadLink');
var heroLink = document.getElementById('leadHeroLink');
var img = document.getElementById('leadImg');
var gradient = document.getElementById('leadGradient');
var byline = document.getElementById('leadByline');
var dek = document.getElementById('leadDek');
if (eyebrow) { eyebrow.innerHTML = '<span>' + esc(lead.cat || 'Top Story') + '</span>'; }
if (link) { txt(link, lead.title); link.href = '/news/' + encodeURIComponent(lead.id || ''); }
if (heroLink) { heroLink.href = '/news/' + encodeURIComponent(lead.id || ''); }
var src = resolveImg(lead.image);
if (src && img) {
img.src = src;
img.alt = esc(lead.title || '');
img.style.display = '';
if (gradient) gradient.style.display = 'none';
img.onerror = function() { img.style.display = 'none'; if(gradient) gradient.style.display = ''; };
}
if (byline && lead.author) {
byline.innerHTML = 'By <strong>' + esc(lead.author) + '</strong>';
}
if (dek) {
// use a snippet from title as dek if no desc
txt(dek, lead.desc || 'Read the full story at RENTV — Western U.S. commercial real estate.');
}
// Secondary stories (items 1–4)
var secCont = document.getElementById('secondaryStories');
if (!secCont) return;
var html = '';
var secs = items.slice(1, 5);
secs.forEach(function(item) {
var src2 = resolveImg(item.image);
var thumb = src2
? '<img src="' + esc(src2) + '" alt="' + esc(item.title) + '" loading="lazy" onerror="this.style.display=\'none\';this.nextElementSibling.style.display=\'\'"><div class="thumb-gradient" style="display:none"></div>'
: '<div class="thumb-gradient"></div>';
html += '<article class="secondary-story">' +
'<div class="sec-thumb">' + thumb + '</div>' +
'<div class="sec-meta">' +
'<div class="sec-cat">' + esc(item.cat || '') + '</div>' +
'<div class="sec-title"><a href="/news/' + encodeURIComponent(item.id || '') + '">' + esc(item.title) + '</a></div>' +
(item.author ? '<div class="sec-author">By ' + esc(item.author) + '</div>' : '') +
'</div>' +
'</article>';
});
secCont.innerHTML = html;
}
/* ── VIDEO MODAL ─────────────────────────────────────── */
var modal = document.getElementById('videoModal');
var modalFrame = document.getElementById('modalFrame');
var modalClose = document.getElementById('modalClose');
function openVideo(embed) {
if (!embed || !modal || !modalFrame) return;
// ensure autoplay param
var url = embed + (embed.indexOf('?') === -1 ? '?' : '&') + 'autoplay=1';
modalFrame.src = url;
modal.classList.add('open');
document.body.style.overflow = 'hidden';
if (modalClose) modalClose.focus();
}
function closeVideo() {
if (!modal) return;
modal.classList.remove('open');
document.body.style.overflow = '';
if (modalFrame) modalFrame.src = 'about:blank';
}
if (modalClose) modalClose.addEventListener('click', closeVideo);
if (modal) {
modal.addEventListener('click', function(e) {
if (e.target === modal) closeVideo();
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeVideo();
});
}
/* ── PLAY ICON SVG ───────────────────────────────────── */
var PLAY_SVG = '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true"><circle cx="14" cy="14" r="14" fill="rgba(255,255,255,0.92)"/><polygon points="11,9 21,14 11,19" fill="#c8102e"/></svg>';
var PLAY_SVG_SM = '<svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true"><circle cx="11" cy="11" r="11" fill="rgba(255,255,255,0.9)"/><polygon points="8.5,6.5 16.5,11 8.5,15.5" fill="#c8102e"/></svg>';
/* ── VIDEO RAIL ──────────────────────────────────────── */
var allVideos = [];
var RAIL_SORT_KEY = 'rentv_rail_sort_v1';
function sortVideos(arr, mode) {
var sorted = arr.slice();
if (mode === 'category') {
sorted.sort(function(a,b){ return (a.cat||'').localeCompare(b.cat||''); });
} else if (mode === 'title') {
sorted.sort(function(a,b){ return (a.title||'').localeCompare(b.title||''); });
} else if (mode === 'views') {
sorted.sort(function(a,b){ return (b.plays||0) - (a.plays||0); });
}
// newest = default order from API
return sorted;
}
function renderRail(videos, sort) {
var cont = document.getElementById('railItems');
if (!cont) return;
var list = sortVideos(videos, sort).slice(0, 7);
if (!list.length) {
cont.innerHTML = '<div class="empty-state">No videos available.</div>';
return;
}
var html = '';
list.forEach(function(v) {
var isSold = v.sponsorship && v.sponsorship.status === 'sold';
var advertiser = (v.sponsorship && v.sponsorship.advertiser) || '';
var sponsorFlag = isSold
? '<span class="vid-sponsored-flag">SPONSORED · ' + esc(advertiser) + '</span>'
: '<a href="/advertise?video=' + esc(v.uid || v.id || '') + '" class="vid-sponsor-cta" tabindex="-1" rel="nofollow">Sponsor this →</a>';
var thumb = v.thumb
? '<img src="' + esc(v.thumb) + '" alt="' + esc(v.title) + '" loading="lazy" onerror="this.style.display=\'none\'">'
: '';
var embed = v.embed || '';
var viewUrl = v.view_url || 'https://www.rentvreview.com/';
html += '<div class="vid-card-rail">' +
'<div class="vid-thumb-rail">' +
'<a href="' + esc(viewUrl) + '" rel="noopener" target="_blank">' + thumb + '</a>' +
'<div class="vid-play-badge" role="button" tabindex="0" aria-label="Play: ' + esc(v.title) + '" ' +
'onclick="window.__openVid(' + "'" + esc(embed) + "','" + esc(viewUrl) + "'" + ')"' +
' onkeypress="if(event.key===\'Enter\')window.__openVid(' + "'" + esc(embed) + "','" + esc(viewUrl) + "'" + ')">' +
PLAY_SVG_SM + '</div>' +
sponsorFlag +
'</div>' +
'<div class="vid-meta-rail">' +
'<div class="vid-cat-rail">' + esc(v.cat || '') + '</div>' +
'<div class="vid-title-rail"><a href="' + esc(viewUrl) + '" rel="noopener" target="_blank">' + esc(v.title) + '</a></div>' +
'<a href="' + esc(viewUrl) + '" class="vid-watch" rel="noopener" target="_blank">▶ Watch</a>' +
'</div>' +
'</div>';
});
cont.innerHTML = html;
}
var railSortEl = document.getElementById('railSort');
if (railSortEl) {
var savedRailSort = lsGet(RAIL_SORT_KEY) || 'newest';
railSortEl.value = savedRailSort;
railSortEl.addEventListener('change', function() {
lsSet(RAIL_SORT_KEY, this.value);
renderRail(allVideos, this.value);
});
}
/* ── VIDEO ROW (horizontal) ──────────────────────────── */
var VIDEO_ROW_SORT_KEY = 'rentv_vrow_sort_v1';
function renderVideoRow(videos, sort) {
var row = document.getElementById('videoRow');
if (!row) return;
var list = sortVideos(videos, sort).slice(0, 20);
if (!list.length) {
row.innerHTML = '<div class="empty-state">No videos available.</div>';
return;
}
var html = '';
list.forEach(function(v) {
var isSold = v.sponsorship && v.sponsorship.status === 'sold';
var advertiser = (v.sponsorship && v.sponsorship.advertiser) || '';
var embed = v.embed || '';
var viewUrl = v.view_url || 'https://www.rentvreview.com/';
var sponsorBlock = isSold
? '<div class="vid-sponsor-row"><span class="vid-sponsor-flag-h">SPONSORED · ' + esc(advertiser) + '</span></div>'
: '<div class="vid-sponsor-row"><a href="/advertise?video=' + esc(v.uid || v.id || '') + '" class="vid-sponsor-cta-h" rel="nofollow">Sponsor this →</a></div>';
var thumb = v.thumb
? '<img src="' + esc(v.thumb) + '" alt="' + esc(v.title) + '" loading="lazy" onerror="this.style.display=\'none\'">'
: '';
html += '<div class="vid-card-h" ' +
'onclick="window.__openVid(' + "'" + esc(embed) + "','" + esc(viewUrl) + "'" + ')" ' +
'role="button" tabindex="0" aria-label="Play: ' + esc(v.title) + '" ' +
'onkeypress="if(event.key===\'Enter\')window.__openVid(' + "'" + esc(embed) + "','" + esc(viewUrl) + "'" + ')">' +
'<div class="vid-card-h-thumb">' + thumb +
'<div class="vid-card-h-play">' + PLAY_SVG + '</div>' +
'</div>' +
'<div class="vid-card-h-body">' +
'<div class="vid-card-h-cat">' + esc(v.cat || '') + '</div>' +
'<div class="vid-card-h-title">' + esc(v.title) + '</div>' +
sponsorBlock +
'</div>' +
'</div>';
});
row.innerHTML = html;
row.setAttribute('aria-busy', 'false');
}
var videoRowSortEl = document.getElementById('videoRowSort');
if (videoRowSortEl) {
var savedVRowSort = lsGet(VIDEO_ROW_SORT_KEY) || 'newest';
videoRowSortEl.value = savedVRowSort;
videoRowSortEl.addEventListener('change', function() {
lsSet(VIDEO_ROW_SORT_KEY, this.value);
renderVideoRow(allVideos, this.value);
});
}
/* ── openVid global (called from inline handlers) ─────── */
window.__openVid = function(embed, fallback) {
if (embed && embed !== 'undefined' && embed.indexOf('undefined') === -1) {
openVideo(embed);
} else {
window.open(fallback || 'https://www.rentvreview.com/', '_blank', 'noopener');
}
};
/* ── NEWS RIVER ──────────────────────────────────────── */
var allNews = [];
var RIVER_SORT_KEY = 'rentv_river_sort_v1';
var DENSITY_KEY = 'rentv_density_v1';
function sortNews(arr, mode) {
var sorted = arr.slice();
if (mode === 'category') {
sorted.sort(function(a,b){ return (a.cat||'').localeCompare(b.cat||''); });
} else if (mode === 'title') {
sorted.sort(function(a,b){ return (a.title||'').localeCompare(b.title||''); });
}
return sorted;
}
function renderNewsGrid(news, sort, skipCount) {
var grid = document.getElementById('newsGrid');
if (!grid) return;
// items after lead (skipCount)
var items = news.slice(skipCount || 5);
var sorted = sortNews(items, sort);
if (!sorted.length) {
grid.innerHTML = '<div class="empty-state">No stories available.</div>';
grid.setAttribute('aria-busy', 'false');
return;
}
var html = '';
var adInserted = false;
sorted.forEach(function(item, i) {
// insert ad unit at position 2 (0-indexed)
if (!adInserted && i === 2) {
html += '<div class="story-card ad-card"><div data-ad-slot="home-infeed-1"></div></div>';
adInserted = true;
}
var src = resolveImg(item.image);
var thumb = src
? '<img src="' + esc(src) + '" alt="' + esc(item.title) + '" loading="lazy" onerror="this.style.display=\'none\';this.nextElementSibling.style.display=\'\'">'
+ '<div class="thumb-gradient" style="display:none"></div>'
: '<div class="thumb-gradient"></div>';
html += '<article class="story-card">' +
'<a href="/news/' + encodeURIComponent(item.id || '') + '" class="story-thumb" aria-label="' + esc(item.title) + '">' +
thumb +
'</a>' +
'<div class="story-cat">' + esc(item.cat || '') + '</div>' +
'<h2 class="story-title"><a href="/news/' + encodeURIComponent(item.id || '') + '">' + esc(item.title) + '</a></h2>' +
(item.author ? '<div class="story-author">By ' + esc(item.author) + '</div>' : '') +
'</article>';
});
grid.innerHTML = html;
grid.setAttribute('aria-busy', 'false');
// refill new ad slots injected by this render
if (window.RENTVAdSlot) window.RENTVAdSlot.refill();
}
var riverSortEl = document.getElementById('riverSort');
var densityEl = document.getElementById('densitySlider');
if (riverSortEl) {
var savedRiverSort = lsGet(RIVER_SORT_KEY) || 'newest';
riverSortEl.value = savedRiverSort;
riverSortEl.addEventListener('change', function() {
lsSet(RIVER_SORT_KEY, this.value);
renderNewsGrid(allNews, this.value, 5);
});
}
if (densityEl) {
var savedDensity = lsGet(DENSITY_KEY) || '4';
densityEl.value = savedDensity;
document.documentElement.style.setProperty('--cols', savedDensity);
densityEl.addEventListener('input', function() {
var v = this.value;
document.documentElement.style.setProperty('--cols', v);
lsSet(DENSITY_KEY, v);
});
}
/* ── FETCH DATA ──────────────────────────────────────── */
// News
fetch('/api/news')
.then(function(r){ return r.ok ? r.json() : {items:[]}; })
.then(function(d) {
allNews = (d.items || []);
renderLead(allNews);
var sortVal = (riverSortEl && riverSortEl.value) || 'newest';
renderNewsGrid(allNews, sortVal, 5);
})
.catch(function(e) {
console.warn('News fetch failed:', e);
var grid = document.getElementById('newsGrid');
if (grid) grid.innerHTML = '<div class="empty-state">Unable to load stories. Please try again.</div>';
});
// Videos
fetch('/api/ad/inventory')
.then(function(r){ return r.ok ? r.json() : {items:[]}; })
.then(function(d) {
// filter out vimeo items with 'undefined' in embed
allVideos = (d.items || []).filter(function(v) {
return !v.embed || v.embed.indexOf('undefined') === -1;
});
var railSort = (railSortEl && railSortEl.value) || 'newest';
var rowSort = (videoRowSortEl && videoRowSortEl.value) || 'newest';
renderRail(allVideos, railSort);
renderVideoRow(allVideos, rowSort);
})
.catch(function(e) {
console.warn('Video fetch failed:', e);
var row = document.getElementById('videoRow');
if (row) row.innerHTML = '<div class="empty-state">Unable to load videos.</div>';
});
/* ── HAMBURGER MENU (simple toggle) ─────────────────── */
var menuBtn = document.getElementById('menuBtn');
if (menuBtn) {
menuBtn.addEventListener('click', function() {
var expanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', String(!expanded));
// scroll to section nav as a lightweight menu action
document.getElementById('section-nav').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
});
}
})();
</script>
<script src="/2026/elements.js" defer></script>
<script src="/template-toggle.js" defer></script>
</body>
</html>