← back to Rentv
allstar: 5 firm-inspired themes with distinct UI per theme (toggle + persist)
0a9bf94370899b26cafef0f8cc49b26b6338bdd6 · 2026-08-07 08:55:48 -0700 · Steve Abrams
Each theme is a different layout system, not a recolor — routed the remaining
hardcoded colors/gradients/fonts through CSS vars, then per-theme structural
overrides (hero arrangement, nav treatment, card shape, radius, light/dark):
- Editorial (RENTV/Real Deal, red serif, ruled), Institutional (CBRE/M&M navy
full-bleed band, boxed nav), Capital (Blackstone dark luxe, centered serif,
gold hairlines), Brokerage (Cushman/JLL emerald, pill nav, soft cards),
Summit (modern expo indigo→violet gradient, pill nav).
Masthead theme switcher, localStorage-persisted, pre-paint FOUC guard.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Files touched
Diff
commit 0a9bf94370899b26cafef0f8cc49b26b6338bdd6
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Fri Aug 7 08:55:48 2026 -0700
allstar: 5 firm-inspired themes with distinct UI per theme (toggle + persist)
Each theme is a different layout system, not a recolor — routed the remaining
hardcoded colors/gradients/fonts through CSS vars, then per-theme structural
overrides (hero arrangement, nav treatment, card shape, radius, light/dark):
- Editorial (RENTV/Real Deal, red serif, ruled), Institutional (CBRE/M&M navy
full-bleed band, boxed nav), Capital (Blackstone dark luxe, centered serif,
gold hairlines), Brokerage (Cushman/JLL emerald, pill nav, soft cards),
Summit (modern expo indigo→violet gradient, pill nav).
Masthead theme switcher, localStorage-persisted, pre-paint FOUC guard.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
public/allstar.html | 317 ++++++++++++++++++++++++++++++++++++++--------------
1 file changed, 235 insertions(+), 82 deletions(-)
diff --git a/public/allstar.html b/public/allstar.html
index d2ff793e..c903224e 100644
--- a/public/allstar.html
+++ b/public/allstar.html
@@ -1,66 +1,120 @@
-<!doctype html><html lang="en"><head>
+<!doctype html><html lang="en" data-theme="editorial"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<script>(function(){try{var t=localStorage.getItem('asg-theme');if(t)document.documentElement.setAttribute('data-theme',t);}catch(e){}})();</script>
<title>All Star Group — CRE, Lending & Hospitality Events · 2026</title>
<meta name="description" content="All Star Group, Inc. — producing Commercial Real Estate, Lending and Hospitality events since 1995. Home of the CRE & Lending Conference (CRELC) and Income Property Lending, led by Arnie Garfinkel.">
<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">
+<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&family=DM+Serif+Display:ital@0;1&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
- :root{--red:#c8102e;--ink:#14171a;--sub:#5b636b;--line:#e4e7ea;--wash:#f5f6f8;--up:#0f8a4d;--gold:#b8860b}
+ /* ═══════════════ BASE TOKENS (Editorial default) ═══════════════ */
+ :root{
+ --red:#c8102e;--ink:#14171a;--sub:#5b636b;--line:#e4e7ea;--wash:#f5f6f8;--gold:#b8860b;
+ --bg:#fbfbfc;--card:#fff;--dark:#0b0e12;--dtext:#fff;--dsub:#c3cbd3;--dmute:#8b949e;
+ --serif:'Playfair Display',Georgia,serif;--sans:'Inter',system-ui,sans-serif;
+ --grad:linear-gradient(150deg,#1f2a37,var(--red));
+ --r:6px;--shadow:none;--maxw:1160px;
+ }
+ /* Institutional — CBRE / Marcus & Millichap: navy, squared, uppercase, banded */
+ html[data-theme="institutional"]{
+ --red:#1f5fa6;--ink:#0f1c2b;--sub:#5a6b7d;--line:#d5dee7;--wash:#eef2f6;--gold:#a06a1e;
+ --bg:#f5f8fb;--card:#fff;--dark:#0f2233;--dtext:#fff;--dsub:#c6d5e3;--dmute:#8ba0b4;
+ --serif:'Space Grotesk',system-ui,sans-serif;--sans:'Inter',system-ui,sans-serif;
+ --grad:linear-gradient(135deg,#12354f,var(--red));--r:0px;--shadow:none;
+ }
+ /* Capital — Blackstone: dark luxe, gold hairlines, high-serif, centered */
+ html[data-theme="capital"]{
+ --red:#c6a24a;--ink:#f3ecdd;--sub:#a99e86;--line:#2a251c;--wash:#17140e;--gold:#c6a24a;
+ --bg:#0a0a0b;--card:#131109;--dark:#000;--dtext:#f3ecdd;--dsub:#cdbf9f;--dmute:#8f846a;
+ --serif:'DM Serif Display',Georgia,serif;--sans:'Inter',system-ui,sans-serif;
+ --grad:linear-gradient(150deg,#1c180d,var(--red));--r:2px;--shadow:none;
+ }
+ /* Brokerage — Cushman & Wakefield / JLL: emerald, rounded, pills, soft shadow */
+ html[data-theme="brokerage"]{
+ --red:#0b7a5e;--ink:#0d1f19;--sub:#4f6a61;--line:#d6e4de;--wash:#eef5f1;--gold:#b8860b;
+ --bg:#f5faf8;--card:#fff;--dark:#0c1f19;--dtext:#fff;--dsub:#c3e0d5;--dmute:#87a99b;
+ --serif:'Space Grotesk',system-ui,sans-serif;--sans:'Inter',system-ui,sans-serif;
+ --grad:linear-gradient(150deg,#0f3327,var(--red));--r:16px;--shadow:0 10px 30px rgba(13,31,25,.10);
+ }
+ /* Summit — modern expo: indigo→violet gradients, chunky rounded, energetic */
+ html[data-theme="summit"]{
+ --red:#6d28d9;--ink:#1a1533;--sub:#615b78;--line:#e6e1f5;--wash:#f4f1fe;--gold:#d97706;
+ --bg:#faf9ff;--card:#fff;--dark:#141029;--dtext:#fff;--dsub:#cfc7ee;--dmute:#9a90c4;
+ --serif:'Space Grotesk',system-ui,sans-serif;--sans:'Inter',system-ui,sans-serif;
+ --grad:linear-gradient(135deg,#6d28d9,#c026d3);--r:22px;--shadow:0 14px 40px rgba(109,40,217,.16);
+ }
+
*{box-sizing:border-box;margin:0}
- body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:#fbfbfc;line-height:1.5}
+ body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.5;transition:background .25s,color .25s}
a{color:inherit;text-decoration:none}
- /* ── Masthead ── */
- .top{position:sticky;top:0;z-index:900;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 20px;background:#fff;border-bottom:1px solid var(--line)}
- .brand{font-family:'Playfair Display',Georgia,serif;font-weight:800;font-size:24px;letter-spacing:.01em}
+ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;width:100%}
+
+ /* ═══════════════ Masthead ═══════════════ */
+ .top{position:sticky;top:0;z-index:900;display:flex;align-items:center;justify-content:space-between;gap:14px;height:60px;padding:0 20px;background:var(--card);border-bottom:1px solid var(--line)}
+ .brand{font-family:var(--serif);font-weight:800;font-size:23px;letter-spacing:.01em;color:var(--ink)}
.brand span{color:var(--red)}
- .brand .sub{font-family:'Inter';font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--sub);display:block;margin-top:-3px}
- .top .badge{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--ink);padding:4px 10px;border-radius:999px}
- /* ── Tab bar (the site's real nav: Home / Events / Income Property Lending) ── */
- .tabs{position:sticky;top:56px;z-index:880;display:flex;gap:2px;background:#0b0e12;padding:0 20px;overflow-x:auto}
- .tabs button{background:none;border:0;border-bottom:3px solid transparent;color:#aeb6bd;font:800 13px/1 'Inter';letter-spacing:.06em;text-transform:uppercase;padding:16px 20px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
- .tabs button:hover{color:#fff}
- .tabs button.on{color:#fff;border-bottom-color:var(--red)}
- .wrap{max-width:1160px;margin:0 auto;padding:0 22px;width:100%}
+ .brand .sub{font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--sub);display:block;margin-top:-2px}
+ /* Theme switcher */
+ .themebar{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:4px 0}
+ .themebar .tl{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin-right:2px;white-space:nowrap}
+ .themebar button{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:700 12px/1 var(--sans);padding:7px 11px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:border-color .15s,box-shadow .15s}
+ .themebar button:hover{border-color:var(--red)}
+ .themebar button.on{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
+ .themebar button i{width:11px;height:11px;border-radius:50%;display:inline-block;flex:none}
+
+ /* ═══════════════ Tabs (nav) — restyled per theme ═══════════════ */
+ .tabs{position:sticky;top:60px;z-index:880;display:flex;gap:2px;background:var(--dark);padding:0 20px;overflow-x:auto}
+ .tabs button{background:none;border:0;border-bottom:3px solid transparent;color:var(--dmute);font:800 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:16px 20px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s,background .15s}
+ .tabs button:hover{color:var(--dtext)}
+ .tabs button.on{color:var(--dtext);border-bottom-color:var(--red)}
+
.panel{display:none;padding:34px 0 60px}
.panel.on{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
- /* ── Hero ── */
- .hero{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:center;padding:10px 0 30px;border-bottom:1px solid var(--line)}
+
+ /* ═══════════════ Hero ═══════════════ */
+ .hero{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:center;padding:12px 0 30px;border-bottom:1px solid var(--line)}
.hero .tag{color:var(--red);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
- .hero h1{font-family:'Playfair Display',serif;font-size:clamp(36px,4vw,58px);line-height:1.06;margin:10px 0 14px;font-weight:800;letter-spacing:-.01em}
+ .hero h1{font-family:var(--serif);font-size:clamp(36px,4vw,58px);line-height:1.06;margin:10px 0 14px;font-weight:800;letter-spacing:-.01em}
.hero p{color:var(--sub);font-size:16px;max-width:52ch}
.hero .cta{display:inline-flex;gap:12px;margin-top:20px;flex-wrap:wrap}
- .btn{display:inline-block;background:var(--red);color:#fff;font-weight:800;font-size:14px;padding:13px 22px;border-radius:8px}
+ .btn{display:inline-block;background:var(--red);color:#fff;font-weight:800;font-size:14px;padding:13px 22px;border-radius:var(--r)}
.btn.ghost{background:none;color:var(--ink);border:1.5px solid var(--line)}
- .btn:hover{filter:brightness(1.05)}
- .hero .card{background:#0b0e12;color:#fff;border-radius:14px;padding:24px;border-top:4px solid var(--red)}
+ .btn:hover{filter:brightness(1.06)}
+ .hero .card{background:var(--dark);color:var(--dtext);border-radius:var(--r);padding:24px;border-top:4px solid var(--red);box-shadow:var(--shadow)}
.hero .card .k{color:var(--red);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
- .hero .card h3{font-family:'Playfair Display',serif;font-size:26px;margin:8px 0 4px}
- .hero .card .d{color:#c3cbd3;font-size:14px;margin-bottom:14px}
- .hero .card a{color:#fff;font-weight:800;font-size:13px;border-bottom:2px solid var(--red);padding-bottom:2px}
- /* ── Stat strip ── */
+ .hero .card h3{font-family:var(--serif);font-size:26px;margin:8px 0 4px}
+ .hero .card .d{color:var(--dsub);font-size:14px;margin-bottom:14px}
+ .hero .card a{color:var(--dtext);font-weight:800;font-size:13px;border-bottom:2px solid var(--red);padding-bottom:2px}
+
+ /* ═══════════════ Stats ═══════════════ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0}
- .stats .s{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px}
- .stats .s b{font-family:'Playfair Display',serif;font-size:34px;font-weight:800;display:block;line-height:1}
+ .stats .s{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)}
+ .stats .s b{font-family:var(--serif);font-size:34px;font-weight:800;display:block;line-height:1;color:var(--ink)}
.stats .s span{color:var(--sub);font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
- /* ── Section rule ── */
- h2.rule{font-size:13px;text-transform:uppercase;letter-spacing:.09em;border-top:2px solid var(--ink);padding-top:10px;margin:38px 0 18px;font-weight:800}
- /* ── Video hero + grid ── */
- .vhero{background:#0b0e12;border-radius:14px;padding:24px;margin-bottom:20px}
+
+ h2.rule{font-size:13px;text-transform:uppercase;letter-spacing:.09em;border-top:2px solid var(--ink);padding-top:10px;margin:38px 0 18px;font-weight:800;color:var(--ink)}
+
+ /* ═══════════════ Video ═══════════════ */
+ .vhero{background:var(--dark);border-radius:var(--r);padding:24px;margin-bottom:20px;box-shadow:var(--shadow)}
.vhero .eyebrow{color:var(--red);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px}
- .fr{position:relative;padding-top:56.25%;border-radius:10px;overflow:hidden;background:#05080c}
+ .fr{position:relative;padding-top:56.25%;border-radius:var(--r);overflow:hidden;background:#05080c}
.fr iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vhero .cap{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:14px}
- .vhero .cap h3{font-family:'Playfair Display',serif;color:#fff;font-size:22px;font-weight:700}
- .vhero .cap span{color:#8b949e;font-size:13px;font-weight:600}
+ .vhero .cap h3{font-family:var(--serif);color:var(--dtext);font-size:22px;font-weight:700}
+ .vhero .cap span{color:var(--dmute);font-size:13px;font-weight:600}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
- .vgrid .v h4{font:700 15px/1.3 'Inter';margin-top:10px}
+ .vgrid .v h4{font:700 15px/1.3 var(--sans);margin-top:10px;color:var(--ink)}
.vgrid .v p{color:var(--sub);font-size:13px;margin-top:4px}
- /* ── Arnie feature ── */
- .arnie{display:grid;grid-template-columns:200px 1fr;gap:28px;background:#fff;border:1px solid var(--line);border-left:5px solid var(--red);border-radius:14px;padding:28px;align-items:start}
- .arnie .por{width:200px;height:200px;border-radius:12px;background:linear-gradient(150deg,#1f2a37,#c8102e);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Playfair Display',serif;font-size:64px;font-weight:800}
+ .vquote{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;justify-content:center;box-shadow:var(--shadow)}
+ .vquote .tag{color:var(--red);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
+ .vquote h4{font-family:var(--serif);font-size:22px;margin:8px 0;color:var(--ink)}
+ .vquote p{color:var(--sub);font-size:14px}
+
+ /* ═══════════════ Arnie feature ═══════════════ */
+ .arnie{display:grid;grid-template-columns:200px 1fr;gap:28px;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--red);border-radius:var(--r);padding:28px;align-items:start;box-shadow:var(--shadow)}
+ .arnie .por{width:200px;height:200px;border-radius:var(--r);background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-size:64px;font-weight:800}
.arnie .k{color:var(--red);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
- .arnie h3{font-family:'Playfair Display',serif;font-size:30px;margin:6px 0 2px}
+ .arnie h3{font-family:var(--serif);font-size:30px;margin:6px 0 2px;color:var(--ink)}
.arnie .role{color:var(--sub);font-weight:700;font-size:14px;margin-bottom:14px}
.arnie p{font-size:15px;margin-bottom:12px}
.arnie ul{margin:0 0 14px 18px;font-size:14.5px}
@@ -68,40 +122,125 @@
.arnie .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.arnie .chip{font-size:12px;font-weight:700;background:var(--wash);border:1px solid var(--line);border-radius:20px;padding:5px 12px}
.arnie a.mail{color:var(--red);font-weight:800}
- /* ── Event cards ── */
- .ev{display:grid;grid-template-columns:110px 1fr auto;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin-bottom:14px}
+
+ /* ═══════════════ Events ═══════════════ */
+ .ev{display:grid;grid-template-columns:110px 1fr auto;gap:20px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:14px;box-shadow:var(--shadow)}
.ev.flag{border-left:5px solid var(--red)}
- .ev .date{text-align:center;background:var(--wash);border-radius:10px;padding:12px 8px}
+ .ev .date{text-align:center;background:var(--wash);border-radius:var(--r);padding:12px 8px}
.ev .date .mo{color:var(--red);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
- .ev .date .dy{font-family:'Playfair Display',serif;font-size:32px;font-weight:800;line-height:1}
+ .ev .date .dy{font-family:var(--serif);font-size:32px;font-weight:800;line-height:1;color:var(--ink)}
.ev .date .yr{color:var(--sub);font-size:12px;font-weight:700}
- .ev h4{font-family:'Playfair Display',serif;font-size:20px;margin-bottom:4px}
+ .ev h4{font-family:var(--serif);font-size:20px;margin-bottom:4px;color:var(--ink)}
.ev .meta{color:var(--sub);font-size:13px;font-weight:600}
.ev .meta .pin{color:var(--ink)}
.ev .tba{color:var(--gold);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.ev .go{white-space:nowrap}
- /* ── Info blocks ── */
+
.lede{font-size:17px;color:var(--sub);max-width:70ch;margin-bottom:8px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
- .box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 24px}
- .box h4{font-family:'Playfair Display',serif;font-size:19px;margin-bottom:8px}
- .box p,.box li{font-size:14.5px;color:#2d333a}
+ .box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow)}
+ .box h4{font-family:var(--serif);font-size:19px;margin-bottom:8px;color:var(--ink)}
+ .box p,.box li{font-size:14.5px;color:var(--sub)}
.box ul{margin:8px 0 0 18px}
.box li{margin-bottom:6px}
- footer{background:#0b0e12;color:#8b939b;padding:26px 0;font-size:12px;margin-top:20px}
- footer .in{max-width:1160px;margin:0 auto;padding:0 22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
- footer .logo{font-family:'Playfair Display',serif;font-size:20px;font-weight:800;color:#fff}footer .logo span{color:var(--red)}
- @media(max-width:860px){.hero,.vgrid,.cols,.arnie{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.arnie .por{width:120px;height:120px;font-size:40px}.ev{grid-template-columns:90px 1fr}.ev .go{grid-column:1/-1}}
+
+ footer{background:var(--dark);color:var(--dmute);padding:26px 0;font-size:12px;margin-top:20px}
+ footer .in{max-width:var(--maxw);margin:0 auto;padding:0 22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
+ footer .logo{font-family:var(--serif);font-size:20px;font-weight:800;color:var(--dtext)}footer .logo span{color:var(--red)}
+ footer a{color:var(--dsub)}
+
+ /* ════════════════════════════════════════════════════════════════
+ PER-THEME STRUCTURAL UI (each theme = a different layout system)
+ ════════════════════════════════════════════════════════════════ */
+
+ /* ───── INSTITUTIONAL — corporate: full-bleed accent hero band, squared
+ boxed uppercase nav, no radius, big flat blocks (CBRE / M&M) ───── */
+ html[data-theme="institutional"] .tabs{background:var(--card);border-bottom:1px solid var(--line);gap:0}
+ html[data-theme="institutional"] .tabs button{color:var(--sub)}
+ html[data-theme="institutional"] .tabs button:hover{color:var(--ink);background:var(--wash)}
+ html[data-theme="institutional"] .tabs button.on{color:#fff;background:var(--red);border-bottom-color:var(--red)}
+ html[data-theme="institutional"] #home .hero{grid-template-columns:1fr;gap:22px;background:var(--grad);color:#fff;border:0;border-radius:0;padding:60px 40px;width:100vw;margin-left:calc(50% - 50vw);align-items:start}
+ html[data-theme="institutional"] #home .hero .wrapin{max-width:var(--maxw);margin:0 auto;width:100%;display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:center}
+ html[data-theme="institutional"] #home .hero .tag{color:rgba(255,255,255,.85)}
+ html[data-theme="institutional"] #home .hero h1{font-size:clamp(40px,4.6vw,64px);text-transform:none}
+ html[data-theme="institutional"] #home .hero p{color:rgba(255,255,255,.9)}
+ html[data-theme="institutional"] #home .hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.6)}
+ html[data-theme="institutional"] #home .hero .card{background:rgba(255,255,255,.10);border-top:4px solid #fff;color:#fff;backdrop-filter:blur(4px)}
+ html[data-theme="institutional"] #home .hero .card .k,html[data-theme="institutional"] #home .hero .card a{color:#fff;border-color:#fff}
+ html[data-theme="institutional"] #home .hero .card .d{color:rgba(255,255,255,.85)}
+ html[data-theme="institutional"] .stats .s{border-top:3px solid var(--red)}
+ html[data-theme="institutional"] h2.rule{border-top-width:3px}
+
+ /* ───── CAPITAL — Blackstone: whole page dark, centered serif hero,
+ thin gold letter-spaced nav, gold hairline rules, no side card ───── */
+ html[data-theme="capital"] .top{border-bottom:1px solid var(--line)}
+ html[data-theme="capital"] .tabs{background:var(--dark);justify-content:center;border-bottom:1px solid #1c180d}
+ html[data-theme="capital"] .tabs button{letter-spacing:.22em;font-weight:600;font-size:12px;color:#8f846a}
+ html[data-theme="capital"] .tabs button.on{color:var(--gold);border-bottom-color:var(--gold)}
+ html[data-theme="capital"] .hero{grid-template-columns:1fr;text-align:center;justify-items:center;border-bottom:1px solid var(--line);padding:44px 0 40px}
+ html[data-theme="capital"] .hero p{max-width:60ch}
+ html[data-theme="capital"] .hero .cta{justify-content:center}
+ html[data-theme="capital"] .hero .card{max-width:520px;margin:6px auto 0;border:1px solid var(--gold);border-top:1px solid var(--gold);background:var(--card);text-align:left}
+ html[data-theme="capital"] .btn{background:var(--gold);color:#14120c}
+ html[data-theme="capital"] .btn.ghost{color:var(--ink);border-color:var(--gold)}
+ html[data-theme="capital"] h2.rule{border-top:1px solid var(--gold);color:var(--gold);text-align:center}
+ html[data-theme="capital"] .stats{grid-template-columns:repeat(4,1fr)}
+ html[data-theme="capital"] .stats .s{background:transparent;border:0;border-left:1px solid var(--gold);border-radius:0;text-align:center}
+ html[data-theme="capital"] .fr{background:#000}
+ html[data-theme="capital"] .arnie{border-left-color:var(--gold)}
+
+ /* ───── BROKERAGE — Cushman/JLL: rounded pill nav, soft cards, image
+ tiles, friendly modern ───── */
+ html[data-theme="brokerage"] .tabs{background:var(--card);border-bottom:1px solid var(--line);gap:8px;padding:10px 20px}
+ html[data-theme="brokerage"] .tabs button{color:var(--sub);border-radius:999px;border-bottom:0;background:var(--wash);padding:11px 20px}
+ html[data-theme="brokerage"] .tabs button:hover{color:var(--ink)}
+ html[data-theme="brokerage"] .tabs button.on{color:#fff;background:var(--red);border-bottom:0}
+ html[data-theme="brokerage"] .hero .card{background:var(--grad);border-top:0}
+ html[data-theme="brokerage"] .stats .s{text-align:center}
+ html[data-theme="brokerage"] h2.rule{border-top:0;border-left:4px solid var(--red);padding:2px 0 2px 12px}
+
+ /* ───── SUMMIT — modern expo: gradient rounded hero card, gradient pill
+ nav, chunky rounded, energetic ───── */
+ html[data-theme="summit"] .tabs{background:var(--card);border-bottom:1px solid var(--line);gap:8px;padding:10px 20px}
+ html[data-theme="summit"] .tabs button{color:var(--sub);border-radius:999px;border-bottom:0;padding:11px 20px}
+ html[data-theme="summit"] .tabs button:hover{color:var(--red)}
+ html[data-theme="summit"] .tabs button.on{color:#fff;background:var(--grad);border-bottom:0}
+ html[data-theme="summit"] #home .hero{background:var(--grad);color:#fff;border:0;border-radius:var(--r);padding:44px;margin-top:14px;box-shadow:var(--shadow)}
+ html[data-theme="summit"] #home .hero .tag{color:rgba(255,255,255,.9)}
+ html[data-theme="summit"] #home .hero p{color:rgba(255,255,255,.92)}
+ html[data-theme="summit"] #home .hero .btn{background:#fff;color:var(--red)}
+ html[data-theme="summit"] #home .hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
+ html[data-theme="summit"] #home .hero .card{background:rgba(255,255,255,.14);border-top:0;backdrop-filter:blur(6px)}
+ html[data-theme="summit"] #home .hero .card .k,html[data-theme="summit"] #home .hero .card a{color:#fff;border-color:#fff}
+ html[data-theme="summit"] #home .hero .card .d{color:rgba(255,255,255,.9)}
+ html[data-theme="summit"] h2.rule{border-top:0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
+ html[data-theme="summit"] .stats .s{text-align:center}
+
+ @media(max-width:860px){
+ .hero,.vgrid,.cols,.arnie{grid-template-columns:1fr}
+ .stats{grid-template-columns:1fr 1fr}
+ .arnie .por{width:120px;height:120px;font-size:40px}
+ .ev{grid-template-columns:90px 1fr}.ev .go{grid-column:1/-1}
+ html[data-theme="institutional"] #home .hero .wrapin{grid-template-columns:1fr}
+ html[data-theme="institutional"] #home .hero{padding:40px 22px}
+ .brand .sub{display:none}
+ }
</style>
</head>
<body>
<div class="top">
- <div class="brand">All Star <span>Group</span><span class="sub" style="color:var(--sub)">CRE · Lending · Hospitality Events</span></div>
- <span class="badge">Since 1995</span>
+ <div class="brand">All Star <span>Group</span><span class="sub">CRE · Lending · Hospitality Events</span></div>
+ <div class="themebar" id="themebar">
+ <span class="tl">Theme</span>
+ <button data-theme="editorial" title="The Real Deal / RENTV — editorial news"><i style="background:#c8102e"></i>Editorial</button>
+ <button data-theme="institutional" title="CBRE / Marcus & Millichap — corporate institutional"><i style="background:#1f5fa6"></i>Institutional</button>
+ <button data-theme="capital" title="Blackstone — dark luxe capital"><i style="background:#c6a24a"></i>Capital</button>
+ <button data-theme="brokerage" title="Cushman & Wakefield / JLL — modern brokerage"><i style="background:#0b7a5e"></i>Brokerage</button>
+ <button data-theme="summit" title="Modern conference / expo"><i style="background:#6d28d9"></i>Summit</button>
+ </div>
</div>
-<!-- The site's real nav, rebuilt as sticky tabs -->
<div class="tabs" id="tabs">
<button class="on" data-tab="home">Home</button>
<button data-tab="events">Events</button>
@@ -109,8 +248,9 @@
</div>
<!-- ══════════════ HOME ══════════════ -->
-<section class="panel on wrap" id="home">
+<section class="panel on" id="home">
<div class="hero">
+ <div class="wrapin" style="display:contents">
<div>
<div class="tag">Commercial Real Estate · Lending · Hospitality</div>
<h1>Where the deal-makers meet.</h1>
@@ -128,43 +268,46 @@
<div class="d">Wed · April 29, 2026 · The Westin Long Beach · 30+ expert speakers</div>
<a href="https://crelc.com/socal/" target="_blank" rel="noopener">Register at crelc.com →</a>
</div>
+ </div>
</div>
- <div class="stats">
+ <div class="stats wrap" style="max-width:var(--maxw)">
<div class="s"><b>1995</b><span>Producing events since</span></div>
<div class="s"><b>100s</b><span>CRE events produced</span></div>
<div class="s"><b>30+</b><span>Expert speakers per conference</span></div>
<div class="s"><b>30 yrs</b><span>Led by Arnie Garfinkel</span></div>
</div>
- <h2 class="rule">▶ Watch — Arnie on the All Star Group events</h2>
- <div class="vhero">
- <div class="eyebrow">Featured</div>
- <div class="fr"><iframe src="https://www.youtube-nocookie.com/embed/ez-40RhtvW0" title="CLIC & CRELC with Arnie Garfinkel of the All Star Group" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></div>
- <div class="cap">
- <h3>California Lodging Investment Conference & CRELC — with Arnie Garfinkel</h3>
- <span>All Star Group · YouTube</span>
- </div>
- </div>
- <div class="vgrid">
- <div class="v">
- <div class="fr"><iframe src="https://www.youtube-nocookie.com/embed/rE5IGSA5xiA" title="So. Cal. Commercial Real Estate & Lending Conference" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></div>
- <h4>So. Cal. Commercial Real Estate & Lending Conference</h4>
- <p>Arnie Garfinkel previews the annual Southern California CRE & Lending Conference.</p>
+ <div class="wrap" style="max-width:var(--maxw)">
+ <h2 class="rule">▶ Watch — Arnie on the All Star Group events</h2>
+ <div class="vhero">
+ <div class="eyebrow">Featured</div>
+ <div class="fr"><iframe src="https://www.youtube-nocookie.com/embed/ez-40RhtvW0" title="CLIC & CRELC with Arnie Garfinkel of the All Star Group" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></div>
+ <div class="cap">
+ <h3>California Lodging Investment Conference & CRELC — with Arnie Garfinkel</h3>
+ <span>All Star Group · YouTube</span>
+ </div>
</div>
- <div class="v" style="background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px;display:flex;flex-direction:column;justify-content:center">
- <div class="tag" style="color:var(--red);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase">On the record</div>
- <h4 style="font-family:'Playfair Display',serif;font-size:22px;margin:8px 0">“Meet, greet & network.”</h4>
- <p style="color:var(--sub);font-size:14px">Three decades of bringing the CRE and lending community into one room — in person and online. More recaps & interviews arrive here as each 2026 event wraps.</p>
+ <div class="vgrid">
+ <div class="v">
+ <div class="fr"><iframe src="https://www.youtube-nocookie.com/embed/rE5IGSA5xiA" title="So. Cal. Commercial Real Estate & Lending Conference" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></div>
+ <h4>So. Cal. Commercial Real Estate & Lending Conference</h4>
+ <p>Arnie Garfinkel previews the annual Southern California CRE & Lending Conference.</p>
+ </div>
+ <div class="vquote">
+ <div class="tag">On the record</div>
+ <h4>“Meet, greet & network.”</h4>
+ <p>Three decades of bringing the CRE and lending community into one room — in person and online. More recaps & interviews arrive here as each 2026 event wraps.</p>
+ </div>
</div>
- </div>
- <h2 class="rule">The founder</h2>
- <div class="arnie" id="arnie-home"></div>
+ <h2 class="rule">The founder</h2>
+ <div class="arnie" id="arnie-home"></div>
+ </div>
</section>
<!-- ══════════════ EVENTS ══════════════ -->
-<section class="panel wrap" id="events">
+<section class="panel wrap" id="events" style="max-width:var(--maxw)">
<h2 class="rule" style="margin-top:8px">2026 event calendar</h2>
<p class="lede">All Star Group produces the industry's signature CRE, lending and hospitality gatherings.
The 2026 flagship is confirmed below; recurring series return on their usual annual cadence with dates announced through <a href="https://crelc.com/" target="_blank" rel="noopener" style="color:var(--red);font-weight:700">crelc.com</a>.</p>
@@ -213,7 +356,7 @@
</section>
<!-- ══════════════ INCOME PROPERTY LENDING ══════════════ -->
-<section class="panel wrap" id="ipl">
+<section class="panel wrap" id="ipl" style="max-width:var(--maxw)">
<div class="hero" style="border-bottom:1px solid var(--line)">
<div>
<div class="tag">A division of All Star Group, Inc.</div>
@@ -259,7 +402,7 @@
<footer><div class="in">
<div><span class="logo">All Star <span>Group</span></span> · Commercial Real Estate, Lending & Hospitality events since 1995</div>
- <div>Arnie Garfinkel, President · <a href="mailto:arnie@allstargroup.com" style="color:#c3cbd3">arnie@allstargroup.com</a> · Westlake Village, CA</div>
+ <div>Arnie Garfinkel, President · <a href="mailto:arnie@allstargroup.com">arnie@allstargroup.com</a> · Westlake Village, CA</div>
</div></footer>
<script>
@@ -288,6 +431,17 @@ var ARNIE = `
document.getElementById('arnie-home').innerHTML = ARNIE;
document.getElementById('arnie-ipl').innerHTML = ARNIE;
+// ── Theme switcher ──
+var TB = document.getElementById('themebar');
+function setTheme(t){
+ document.documentElement.setAttribute('data-theme', t);
+ try{ localStorage.setItem('asg-theme', t); }catch(e){}
+ TB.querySelectorAll('button').forEach(function(b){ b.classList.toggle('on', b.dataset.theme===t); });
+}
+TB.addEventListener('click', function(e){ var b=e.target.closest('button'); if(b) setTheme(b.dataset.theme); });
+var saved='editorial'; try{ saved=localStorage.getItem('asg-theme')||'editorial'; }catch(e){}
+setTheme(saved);
+
// ── Tabs ──
function show(id){
document.querySelectorAll('.panel').forEach(function(p){p.classList.toggle('on', p.id===id);});
@@ -301,7 +455,6 @@ document.getElementById('tabs').addEventListener('click',function(e){
document.querySelectorAll('[data-jump]').forEach(function(a){
a.addEventListener('click',function(e){e.preventDefault(); show(a.dataset.jump);});
});
-// Deep-link support (#events / #ipl)
var start=(location.hash||'').replace('#',''); if(['home','events','ipl'].indexOf(start)>=0) show(start);
</script>
</body></html>
← 6b98f166 auto-data-snapshot: 2026-08-07T08:32:43 (7 data files) — dat
·
back to Rentv
·
auto-data-snapshot: 2026-08-07T09:05:06 (7 data files) — dat 0521e012 →