`public/rate-card.html`

185 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rate Card · The Corridor</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Inter:wght@200;300;400;500;600&family=JetBrains+Mono:wght@200;300&display=swap');
:root{--paper:#faf6ee;--ink:#1a1815;--ink-mute:#6e6356;--metal:#8a6d3b;--metal-glow:#b89968;--accent:#6a3a1a;--rule:#d8cdb8}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;font-weight:300;line-height:1.55}
header{text-align:center;padding:64px 24px 36px;border-bottom:4px double var(--ink)}
header .kicker{font-size:10px;letter-spacing:.45em;text-transform:uppercase;color:var(--metal);font-weight:500;margin-bottom:16px}
header h1{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:84px;line-height:.95;margin:0;letter-spacing:-0.02em}
header h1 em{font-style:normal;color:var(--metal)}
header .deck{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:18px;color:var(--ink-mute);margin-top:14px;max-width:560px;margin-left:auto;margin-right:auto;line-height:1.5}

main{max-width:780px;margin:0 auto;padding:48px 24px 100px}
section{margin-bottom:48px}
section h2{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:32px;margin:0 0 12px;color:var(--ink)}
section h2 em{font-style:normal;color:var(--metal)}
section p{font-size:15px;color:var(--ink);margin:0 0 12px}
section .lede::first-letter{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:64px;line-height:.85;float:left;margin:6px 12px 0 0;color:var(--accent)}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
@media(max-width:680px){.tiers{grid-template-columns:1fr}}
.tier{padding:24px 22px;background:var(--paper);border:1px solid var(--rule);position:relative}
.tier.featured{border:2px solid var(--metal);background:linear-gradient(180deg,rgba(184,153,104,0.05),transparent 40%)}
.tier .tier-name{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:24px;color:var(--ink);margin-bottom:4px}
.tier .price{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:38px;color:var(--accent);margin:8px 0;letter-spacing:-0.02em}
.tier .price small{font-family:'Inter',sans-serif;font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-left:4px;vertical-align:middle}
.tier ul{list-style:none;padding:0;margin:14px 0 0;font-size:13px;color:var(--ink)}
.tier li{padding:6px 0 6px 22px;border-top:1px dotted var(--rule);position:relative}
.tier li:first-child{border-top:none}
.tier li::before{content:'✓';position:absolute;left:0;top:6px;color:var(--metal);font-weight:600}
.tier .badge{position:absolute;top:-12px;right:14px;background:var(--accent);color:var(--paper);padding:4px 12px;font-size:9px;letter-spacing:.3em;text-transform:uppercase;font-weight:600}

table.specs{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
table.specs th, table.specs td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule)}
table.specs th{font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-mute);font-weight:500;background:rgba(184,153,104,0.04)}
table.specs td.metric{color:var(--metal);font-family:'JetBrains Mono',monospace;font-size:12px}
table.specs td.metric b{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;color:var(--ink);font-weight:500}

blockquote{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:22px;line-height:1.4;color:var(--accent);border-left:3px solid var(--metal);padding:14px 0 14px 22px;margin:24px 0}

.contact{margin-top:48px;padding:28px;background:var(--ink);color:var(--paper);text-align:center}
.contact h3{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:28px;margin:0 0 8px;color:var(--paper)}
.contact h3 em{font-style:normal;color:var(--metal-glow)}
.contact p{color:var(--paper);opacity:0.85;font-size:14px;margin:0 0 14px}
.contact a{color:var(--metal-glow);text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:13px;border-bottom:1px solid var(--metal-glow);padding-bottom:1px}
.contact a:hover{color:var(--paper);border-color:var(--paper)}

.toolbar{position:fixed;top:14px;right:14px;display:flex;gap:6px;z-index:100}
.toolbar a{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);background:var(--paper);padding:5px 10px;border:1px solid var(--rule);text-decoration:none}
.toolbar a:hover{color:var(--metal);border-color:var(--metal)}
@media print{.toolbar{display:none}}
</style>
</head>
<body>

<div class="toolbar">
  <a href="/magazine.html">Admin</a>
  <a href="/issue">Public issue</a>
  <a href="javascript:window.print()">🖨 Print</a>
</div>

<header>
  <div class="kicker">The Corridor · Volume I · Sponsorship</div>
  <h1>Be in <em>the issue</em></h1>
  <div class="deck">A magazine of who's here on Ventura Boulevard. Every business gets a feature. Sponsors get the cover, the spread, and the eyeballs.</div>
</header>

<main>

<section>
  <h2>Why <em>The Corridor</em>.</h2>
  <p class="lede"><strong>Ventura Boulevard runs nine miles through Sherman Oaks, Encino, Tarzana, Studio City, and Woodland Hills — and 17,462 licensed businesses sit on it.</strong> Our editorial team writes the corridor warm: a magazine-style feature for every storefront, profession, and atelier worth a paragraph. Readers come for the discovery; sponsors come for the position.</p>
  <p>Each issue is curated by neighborhood and vertical. Restaurants, professionals, beauty, medical, fitness, real estate, hospitality, automotive, and shops — distinct sections, distinct readerships, distinct ad audiences.</p>
</section>

<section>
  <h2>The reach.</h2>
  <table class="specs">
    <tr><th>Metric</th><th>Volume I</th><th>Notes</th></tr>
    <tr><td>Businesses indexed</td><td class="metric"><b id="biz-count">—</b></td><td>Every BTRC-licensed business on Ventura Boulevard</td></tr>
    <tr><td>Editorial features</td><td class="metric"><b id="feat-count">—</b></td><td>AI-drafted, human-curated by The Corridor desk</td></tr>
    <tr><td>Verticals covered</td><td class="metric"><b id="cat-count">—</b></td><td>Restaurant · Professional · Medical · Beauty · Salon · Real estate · Fitness · Shop · Hospitality · Automotive</td></tr>
    <tr><td>Sponsor candidates</td><td class="metric"><b id="ad-count">—</b></td><td>Businesses already running paid Google/Meta/TikTok ads (proven ad-buyers)</td></tr>
    <tr><td>Issues</td><td class="metric"><b>Quarterly</b></td><td>Spring · Summer · Fall · Winter (digital-first, print-on-demand)</td></tr>
  </table>
</section>

<section>
  <h2>Sponsorship <em>tiers</em>.</h2>
  <div class="tiers">

    <div class="tier">
      <div class="tier-name">Listing</div>
      <div class="price">Free<small>standard</small></div>
      <ul>
        <li>AI-drafted feature in the public issue</li>
        <li>Listed in vertical TOC</li>
        <li>Full-text search</li>
        <li>Photo placeholder (mood gradient)</li>
      </ul>
    </div>

    <div class="tier featured">
      <div class="badge">★ Featured</div>
      <div class="tier-name">Spread</div>
      <div class="price">$<span id="price-spread">240</span><small>per issue</small></div>
      <ul>
        <li>Owner-supplied photo (one full-bleed)</li>
        <li>Pull-quote upgrade with custom copy</li>
        <li>"Sponsored feature" indicia</li>
        <li>Linked from /scoreboard "Sponsor candidates"</li>
        <li>Issue-archive permanence</li>
        <li>Mention in morning email blast (rotation)</li>
      </ul>
    </div>

    <div class="tier">
      <div class="tier-name">Cover</div>
      <div class="price">$<span id="price-cover">1,800</span><small>per issue</small></div>
      <ul>
        <li>Cover position · ABOVE the masthead deck</li>
        <li>Full editorial rewrite by Steve directly</li>
        <li>Custom-sourced photography (or owner-supplied)</li>
        <li>Featured in the morning email opening slot</li>
        <li>Tagged in scoreboard "Cover" leaderboard</li>
        <li>Newsletter banner inclusion all quarter</li>
      </ul>
    </div>

  </div>
</section>

<section>
  <h2>What you get vs. boosting on Meta.</h2>
  <table class="specs">
    <tr><th></th><th>The Corridor</th><th>Meta boosted post</th></tr>
    <tr><td>Permanence</td><td>Quarterly issue + archive (forever)</td><td>~7 days, then dark</td></tr>
    <tr><td>Editorial framing</td><td>Magazine-style write-up by editor</td><td>Your own ad copy</td></tr>
    <tr><td>Local context</td><td>Hand-curated, neighborhood-keyed</td><td>Algorithmic, generic</td></tr>
    <tr><td>Discovery angle</td><td>Reader is browsing for what's around them</td><td>Reader is scrolling, mid-meme</td></tr>
    <tr><td>Cost per impression</td><td>Predictable, flat-rate</td><td>Opaque, auction-priced</td></tr>
  </table>
</section>

<blockquote>"The walls of Ventura Boulevard tell you who's here. The Corridor writes them down."</blockquote>

<section>
  <h2>How it works.</h2>
  <ol style="font-size:15px;line-height:1.7">
    <li><strong>Start with a free listing.</strong> Every business on the corridor has one already drafted. We send you yours to review.</li>
    <li><strong>Upgrade to Spread or Cover.</strong> Email <a href="mailto:steve@designerwallcoverings.com">steve@designerwallcoverings.com</a> with the photo and any copy notes; we typeset and ship.</li>
    <li><strong>Issue goes live.</strong> Your sponsorship runs the full quarter — digital, archive, and morning-email rotation.</li>
    <li><strong>Renew or upgrade for next issue.</strong> No autopay, no agency fees.</li>
  </ol>
</section>

<div class="contact">
  <h3>Reserve your <em>spread</em>.</h3>
  <p>Email Steve directly. We respond within a business day, no agency between us.</p>
  <a href="mailto:steve@designerwallcoverings.com?subject=The%20Corridor%20%E2%80%94%20sponsor%20inquiry">steve@designerwallcoverings.com</a>
</div>

</main>

<script>
async function loadStats() {
  try {
    const stats = await fetch('/api/magazine/stats').then(r => r.json());
    document.getElementById('biz-count').textContent  = (stats.corridor_total || 0).toLocaleString();
    document.getElementById('feat-count').textContent = (stats.total || 0).toLocaleString();
    const sb = await fetch('/api/magazine/scoreboard').then(r => r.json());
    document.getElementById('cat-count').textContent  = (sb.hot_verticals || []).length;
    document.getElementById('ad-count').textContent   = (sb.sponsor_candidates || []).length || '—';
  } catch {}
}
loadStats();
</script>
</body>
</html>