`public/contact.html`

95 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Contact · The Corridor</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Contact The Corridor (venturacorridor.com) — corrections, story tips, business listings, and sponsor inquiries for Ventura Boulevard.">
<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@300;400;500&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.65}
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}
header h1{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:72px;line-height:.98;margin:14px 0 0;letter-spacing:-0.02em}
header h1 em{font-style:normal;color:var(--metal)}
main{max-width:680px;margin:0 auto;padding:48px 24px 80px}
section{margin-bottom:32px}
section h2{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:28px;margin:0 0 12px;color:var(--ink)}
section h2 em{font-style:normal;color:var(--metal)}
section p{font-size:16px;color:var(--ink);margin:0 0 12px}
section .lede::first-letter{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:72px;line-height:.85;float:left;margin:6px 12px 0 0;color:var(--accent)}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule)}
a:hover{color:var(--metal);border-color:var(--metal)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.card{padding:22px;background:rgba(184,153,104,0.06);border:1px solid var(--rule)}
.card h3{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:20px;margin:0 0 8px;color:var(--metal)}
.card p{font-size:14px;color:var(--ink-mute);margin:0 0 10px}
.card a{font-family:'JetBrains Mono',monospace;font-size:13px}
.contact{margin-top:36px;padding:24px;background:var(--ink);color:var(--paper);text-align:center}
.contact p{color:rgba(255,255,255,0.85);font-size:14px;margin:0 0 14px}
.contact a{color:var(--metal-glow);font-family:'JetBrains Mono',monospace;font-size:13px;border-bottom:1px solid var(--metal-glow)}
.contact a:hover{color:white;border-color:white}
.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)}
footer{border-top:1px solid var(--rule);text-align:center;padding:28px 24px 48px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
footer a{color:var(--ink-mute);margin:0 8px;border:none}
footer a:hover{color:var(--metal)}
</style>
</head>
<body>
<div class="toolbar">
  <a href="/">Home</a>
  <a href="/about.html">About</a>
  <a href="/privacy.html">Privacy</a>
</div>
<header>
  <div class="kicker">The Corridor · get in touch</div>
  <h1>Contact <em>the desk</em></h1>
</header>
<main>

<section>
  <p class="lede">The Corridor is written from a desk in Los Angeles, covering every business on Ventura Boulevard from Sherman Oaks through Woodland Hills. Corrections, story tips, a business that belongs in the magazine, or a sponsorship question — all of it reaches a real person at the address below.</p>
</section>

<section>
  <div class="cards">
    <div class="card">
      <h3>Editorial &amp; corrections</h3>
      <p>Something we got wrong, a business we missed, or a story tip.</p>
      <a href="mailto:steve@designerwallcoverings.com?subject=The%20Corridor%20-%20Editorial">steve@designerwallcoverings.com</a>
    </div>
    <div class="card">
      <h3>Sponsorship</h3>
      <p>Placement and a custom photo for your business.</p>
      <a href="/rate-card.html">See the rate card →</a>
    </div>
    <div class="card">
      <h3>List your business</h3>
      <p>Own a business on the boulevard? Tell us and we'll typeset it.</p>
      <a href="mailto:steve@designerwallcoverings.com?subject=The%20Corridor%20-%20Business%20listing">steve@designerwallcoverings.com</a>
    </div>
    <div class="card">
      <h3>Privacy &amp; data</h3>
      <p>Questions about data we hold, or a deletion request.</p>
      <a href="/privacy.html">Read the privacy policy →</a>
    </div>
  </div>
</section>

<div class="contact">
  <p>The fastest way to reach us:</p>
  <a href="mailto:steve@designerwallcoverings.com?subject=The%20Corridor">steve@designerwallcoverings.com</a>
</div>

</main>
<footer>
  <a href="/">Home</a> · <a href="/about.html">About</a> · <a href="/contact.html">Contact</a> · <a href="/privacy.html">Privacy</a>
</footer>
</body>
</html>