← back to Rentv
mockups/rentv.html
115 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>RENTV — flagship (no tabs · bottom breaking bar)</title>
<link rel="stylesheet" href="assets/base.css">
<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>
body{background:#fbfbfc;color:#14171a;font-family:'Inter',system-ui,sans-serif}
/* HERO = one fold; the breaking bar is pinned to the BOTTOM of the fold */
.fold{min-height:calc(100vh - 52px);display:flex;flex-direction:column}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px;width:100%}
/* signature: a live CRE data strip above the hero (says "this is a CRE data publication") */
.datastrip{border-bottom:1px solid #e8e4e0;background:#f7f5f2}
.datastrip .in{max-width:1240px;margin:0 auto;display:flex;gap:34px;padding:9px 22px;font-size:11px;font-weight:500;letter-spacing:.06em;color:#4a4f55;overflow:hidden;white-space:nowrap}
.datastrip .m b{color:#14171a;font-weight:700;margin-left:6px}.datastrip .m b.dn{color:#c8102e}.datastrip .m b.up{color:#0f8a4d}
.hero{flex:1;display:grid;grid-template-columns:1.55fr 1fr;gap:34px;align-items:center;padding:28px 0}
.lead{padding-right:34px;border-right:1px solid #e2ded9} /* broadsheet hairline column */
.lead .im{position:relative;height:380px;border-radius:6px;display:block;margin-bottom:16px;box-shadow:inset 0 -90px 70px -50px rgba(0,0,0,.35)}
.lead .tag{color:var(--rentv-red,#c8102e);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.lead h1{font-family:'Playfair Display',serif;font-size:clamp(46px,4vw,64px);line-height:1.08;margin:9px 0 12px;font-weight:700;letter-spacing:-.01em}
.lead .byl{color:#6b7178;font-size:13px}
.aside{display:flex;flex-direction:column;gap:0}
.aside a{display:grid;grid-template-columns:80px 1fr;gap:13px;text-decoration:none;color:#14171a;border-bottom:1px solid #e8e4e0;padding:13px 0}
.aside a:first-child{padding-top:0}
.aside .im{height:58px;border-radius:5px;display:block}
.aside .tag{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.aside h4{font:600 14px/1.32 'Inter';margin-top:3px}
/* ── BREAKING BAR — bottom of the fold, scrolling, hover-pause + hover-select ── */
.breaking{background:#0b0e12;color:#fff;border-top:3px solid var(--rentv-red,#c8102e)}
.breaking .in{max-width:1240px;margin:0 auto;display:flex;align-items:stretch;height:52px}
.breaking .lbl{background:var(--rentv-red,#c8102e);display:flex;align-items:center;gap:9px;padding:0 20px;font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;flex:none;box-shadow:3px 0 0 rgba(255,255,255,.06)}
.breaking .lbl .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:bpulse 1.1s infinite}
@keyframes bpulse{50%{opacity:.3;transform:scale(.8)}}
.ticker{position:relative;overflow:hidden;flex:1}
.ticker .track{display:flex;align-items:center;gap:0;height:100%;white-space:nowrap;
animation:bscroll 52s linear infinite;will-change:transform}
.ticker:hover .track{animation-play-state:paused} /* hover ANYWHERE pauses */
@keyframes bscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker .it{display:inline-flex;align-items:center;gap:11px;padding:0 24px;height:100%;color:#c3cbd3;
text-decoration:none;font-size:14px;font-weight:600;cursor:pointer;border-right:1px solid #1a2129;transition:background .14s,color .14s}
.ticker .it .c{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:20px;background:#161d25;color:#8b939b}
.ticker .it:hover{background:rgba(200,16,46,.16);color:#fff} /* full-height red wash = select */
.ticker .it:hover .c{background:var(--rentv-red,#c8102e);color:#fff}
.ticker .it.sel{background:var(--rentv-red,#c8102e);color:#fff}
.ticker .it.sel .c{background:#fff;color:var(--rentv-red,#c8102e)}
.ticker .paused{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:3;font-size:9px;font-weight:700;
letter-spacing:.16em;color:rgba(255,255,255,.5);opacity:0;transition:opacity .3s;pointer-events:none}
.ticker:hover .paused{opacity:1}
.ticker .fade{position:absolute;top:0;bottom:0;width:64px;pointer-events:none;z-index:2}
.ticker .fade.l{left:0;background:linear-gradient(90deg,#0b0e12,transparent)}
.ticker .fade.r{right:0;background:linear-gradient(270deg,#0b0e12,transparent)}
/* selected-headline reader (opens inline above the bar) */
.selbar{max-width:1240px;margin:0 auto;display:none;padding:12px 22px;background:#11161c;color:#e7ecf1;border-top:1px solid #1c232b;align-items:center;gap:14px}
.selbar.on{display:flex}
.selbar .c{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:var(--rentv-red,#c8102e);padding:3px 9px;border-radius:20px}
.selbar a{color:#fff;font-weight:700;text-decoration:none}.selbar a:hover{text-decoration:underline}
.selbar .x{margin-left:auto;background:none;border:0;color:#8b939b;cursor:pointer;font-size:18px}
/* below the fold */
.sec{padding:34px 0}
h2.rule{font-size:13px;text-transform:uppercase;letter-spacing:.09em;border-top:2px solid #14171a;padding-top:10px;margin-bottom:16px;font-weight:800}
.river{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.river a{text-decoration:none;color:#14171a}.river .im{height:130px;border-radius:5px;display:block;margin-bottom:8px}
.river .tag{font-size:10px;font-weight:800;text-transform:uppercase}.river h4{font:600 15px/1.25 'Inter';margin-top:3px}
@media(max-width:900px){.hero{grid-template-columns:1fr}.river{grid-template-columns:1fr 1fr}.breaking .in{height:auto}}
</style></head>
<body>
<div class="fold">
<div class="datastrip" data-eln><div class="in" id="datastrip"></div></div>
<main class="wrap">
<section class="hero">
<div class="lead" data-eln id="lead"></div>
<div class="aside" data-eln id="aside"></div>
</section>
</main>
<div class="selbar" id="selbar" data-eln></div>
<div class="breaking" data-eln>
<div class="in">
<div class="lbl"><span class="dot"></span> Breaking</div>
<div class="ticker" id="ticker"><div class="fade l"></div><div class="fade r"></div><span class="paused">Paused · hover to browse</span><div class="track" id="track"></div></div>
</div>
</div>
</div>
<main class="wrap">
<section class="sec"><h2 class="rule" data-eln>Across the market</h2><div class="river" data-eln id="river"></div></section>
</main>
<script src="assets/chrome.js"></script>
<script>
RENTV.mount({layout:'FLAG', render(d){
const {esc,imgTag,sectionColor}=RENTV;
// signature CRE data strip (real ticker metrics)
const t=d.ticker||{};
document.getElementById('datastrip').innerHTML=Object.values(t).filter(m=>m&&m.label).map(m=>{
const cls=m.dir==='up'?'up':m.dir==='down'?'dn':'';
return `<span class="m">${esc(m.label)}<b class="${cls}">${esc(m.value)}${m.change_pct!=null?` ${m.change_pct>0?'+':''}${m.change_pct}%`:''}</b></span>`;
}).join('');
const it=d.news.items||[], l=it[0];
lead.innerHTML=`${imgTag(l.image,'im',l.id)}<span class="tag">${esc(l.cat)} · Western U.S.</span><h1>${esc(l.title)}</h1><div class="byl">By RENTV Staff · live from rentv.com</div>`;
aside.innerHTML=it.slice(1,5).map(n=>`<a href="${esc(n.url)}">${imgTag(n.image,'im',n.id)}<div><span class="tag" style="color:${sectionColor(n.cat)}">${esc(n.cat)}</span><h4>${esc(n.title)}</h4></div></a>`).join('');
// breaking ticker — duplicate the set so the loop is seamless; hover pauses, hover-item selects
const items=it.slice(0,14);
const mk=n=>`<a class="it" data-id="${esc(n.id)}" data-cat="${esc(n.cat)}" data-title="${esc(n.title)}" data-url="${esc(n.url)}"><span class="c">${esc(n.cat)}</span>${esc(n.title)}</a>`;
track.innerHTML=items.map(mk).join('')+items.map(mk).join('');
const selbar=document.getElementById('selbar');
track.querySelectorAll('.it').forEach(a=>{
a.addEventListener('click',e=>{e.preventDefault();
track.querySelectorAll('.it').forEach(x=>x.classList.remove('sel'));
track.querySelectorAll('.it[data-id="'+a.dataset.id+'"]').forEach(x=>x.classList.add('sel'));
selbar.innerHTML=`<span class="c">${esc(a.dataset.cat)}</span><a href="${esc(a.dataset.url)}">${esc(a.dataset.title)}</a><button class="x" aria-label="close">✕</button>`;
selbar.classList.add('on');
selbar.querySelector('.x').onclick=()=>{selbar.classList.remove('on');track.querySelectorAll('.it').forEach(x=>x.classList.remove('sel'));};
});
});
river.innerHTML=it.slice(5,13).map(n=>`<a href="${esc(n.url)}">${imgTag(n.image,'im',n.id)}<span class="tag" style="color:${sectionColor(n.cat)}">${esc(n.cat)}</span><h4>${esc(n.title)}</h4></a>`).join('');
}});
</script></body></html>