← back to Rentv
mockups/L02.html
67 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>L02 · Editorial Magazine — RENTV redesign</title>
<link rel="stylesheet" href="assets/base.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,800;1,500&family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
<style>
body{background:#fbfbf9;color:#14171a;font-family:'Inter',system-ui,sans-serif}
.wrap{max-width:1140px;margin:0 auto;padding:26px 22px 60px}
.kick{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #14171a;padding-bottom:10px}
.kick .d{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#5b636b}
.kick .h{font-family:'Playfair Display',serif;font-style:italic;font-size:18px}
.hero{display:grid;grid-template-columns:1.5fr 1fr;gap:30px;margin:28px 0;align-items:center}
.hero .im{height:380px;border-radius:4px;display:block}
.hero .tag{color:#c8102e;font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.hero h1{font-family:'Playfair Display',serif;font-size:44px;line-height:1.06;margin:10px 0 12px;font-weight:800}
.hero p{color:#40474e;font-size:15px;line-height:1.6}
.secondary{display:grid;grid-template-columns:1fr 1fr;gap:26px;border-top:1px solid #e4e7ea;padding-top:24px}
.sec .im{height:180px;border-radius:4px;display:block;margin-bottom:10px}
.sec .tag{color:#c8102e;font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.sec h3{font-family:'Playfair Display',serif;font-size:22px;line-height:1.15;margin:5px 0}
h2.rule{font-family:'Playfair Display',serif;font-size:15px;text-transform:uppercase;letter-spacing:.05em;border-top:2px solid #14171a;padding-top:10px;margin:40px 0 16px}
.river{columns:3;column-gap:26px}.river a{display:block;break-inside:avoid;margin-bottom:14px;color:#14171a;text-decoration:none;border-bottom:1px solid #eee;padding-bottom:12px}
.river .t{font-size:10px;color:#c8102e;font-weight:800;letter-spacing:.06em}.river h4{font:600 15px/1.3 'Inter';margin:3px 0}
.laed{display:grid;grid-template-columns:1fr 1.3fr;gap:24px;background:#14171a;color:#f3f3f0;border-radius:6px;padding:26px;align-items:center}
.laed .big{font-family:'Playfair Display',serif;font-size:40px;font-weight:800;color:#fff}
.laed .addr{font-size:15px;font-weight:600;margin:4px 0}.laed .brief{font-size:13px;color:#b9bfc5;line-height:1.6;margin-top:8px}
.two{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;margin-top:14px}
.revrow{display:flex;gap:14px}.revrow .v{flex:1}.revrow .im{height:110px;border-radius:4px;display:block}.revrow .n{font-size:12.5px;font-weight:600;margin-top:6px}
.firms .f{display:flex;justify-content:space-between;border-bottom:1px solid #e4e7ea;padding:9px 0;font-size:14px}
.firms .f b{color:#c8102e}
.cta{background:#c8102e;color:#fff;border-radius:6px;padding:26px;text-align:center;margin-top:40px}
.cta h3{font-family:'Playfair Display',serif;font-size:26px;margin:0 0 6px}.cta button{margin-top:12px;background:#fff;color:#c8102e;border:0;border-radius:4px;padding:11px 26px;font-weight:800;cursor:pointer}
.foot{color:#8b939b;font-size:12px;text-align:center;margin-top:40px}
@media(max-width:820px){.hero,.secondary,.two,.laed{grid-template-columns:1fr}.river{columns:1}}
</style></head>
<body>
<div class="wrap">
<div class="kick" data-eln><span class="d" id="date"></span><span class="h">The Regional Authority in Commercial Real Estate — since 1998</span></div>
<div class="hero" data-eln id="hero"></div>
<div class="secondary" data-eln id="secondary"></div>
<h2 class="rule" data-eln>Across the Sectors</h2>
<div class="river" data-eln id="river"></div>
<h2 class="rule">LA Commercial Intelligence</h2>
<div class="laed" data-eln id="laed"></div>
<div class="two">
<div><h2 class="rule">The REview</h2><div class="revrow" data-eln id="rev"></div></div>
<div><h2 class="rule">Top LA Brokerages</h2><div class="firms" data-eln id="firms"></div></div>
</div>
<div class="cta" data-eln><h3>The morning CRE briefing, in your inbox.</h3><div>Join thousands of West-Coast dealmakers.</div><button>Subscribe free</button></div>
<div class="foot" data-eln>RENTV.com · L02 Editorial Magazine · live data</div>
</div>
<script src="assets/chrome.js"></script>
<script>
RENTV.mount({layout:'L02', render(d){
const {esc,shortUsd,imgTag,sectionColor}=RENTV;
date.textContent=new Date(d.news.fetched_at||Date.now()).toLocaleDateString(undefined,{weekday:'long',month:'long',day:'numeric',year:'numeric'});
const it=d.news.items||[], l=it[0];
hero.innerHTML=`${imgTag(l.image,'im',l.id)}<div><span class="tag">${esc(l.cat)}</span><h1>${esc(l.title)}</h1><p>${esc((d.la.marquee||[])[0]?.brief||'').slice(0,180)||'The definitive regional read on commercial real estate deals, financing and development across the Western U.S.'}</p><a href="${esc(l.url)}" style="color:#c8102e;font-weight:800;text-decoration:none">Read the full story →</a></div>`;
secondary.innerHTML=it.slice(1,3).map(n=>`<div class="sec">${imgTag(n.image,'im',n.id)}<span class="tag">${esc(n.cat)}</span><h3>${esc(n.title)}</h3></div>`).join('');
river.innerHTML=it.slice(3,15).map(n=>`<a href="${esc(n.url)}"><span class="t">${esc(n.cat).toUpperCase()}</span><h4>${esc(n.title)}</h4></a>`).join('');
const m=(d.la.marquee||[])[0];
laed.innerHTML=`<div><div class="big">${shortUsd(m.assessed_total)}</div><div style="font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9aa1a8">Assessed value · ${esc(m.type_label)}</div></div><div><div class="addr">${esc(m.address)}, ${esc(m.city)}</div><div class="brief">${esc(m.brief)}</div></div>`;
rev.innerHTML=(d.videos.items||[]).slice(0,2).map(v=>`<div class="v">${imgTag(v.thumb,'im',v.id)}<div class="n">${esc(v.title)}</div></div>`).join('');
document.getElementById('firms').innerHTML=(d.la.firms||[]).slice(0,7).map(f=>`<div class="f"><span>${esc(f.name)}</span><b>${(f.agent_count||0).toLocaleString()}</b></div>`).join('');
}});
</script></body></html>