`public/index.html`

162 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>designerline — the trade designer's everything-app</title>
<style>
  :root {
    --ink: #0e0e0c;
    --ink-mute: #6e6e68;
    --paper: #faf8f2;
    --line: #d9d4c5;
    --accent: #2d1c10;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink);
    font-family: ui-serif, 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    -webkit-font-smoothing: antialiased;
  }
  /* HERO — gucci-style: logo upper-left, hamburger upper-right, wordmark below image */
  .hero { position: relative; width: 100%; min-height: 78vh; overflow: hidden; background: #1a1714; }
  .hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
  .hero .nav-top {
    position: absolute; top: 24px; left: 28px; right: 28px;
    display: flex; justify-content: space-between; align-items: center; z-index: 2;
  }
  .hero .mark {
    color: #fff; font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  }
  .hero .hamburger {
    width: 28px; height: 28px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; justify-content: center;
  }
  .hero .hamburger span { display: block; height: 1.5px; background: #fff; }
  .hero .wordmark-zone {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 30px 28px 36px;
    color: #fff; text-align: center; z-index: 2;
    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  }
  .hero .wordmark {
    font-family: ui-serif, Georgia, serif; font-weight: 500;
    font-size: clamp(40px, 9vw, 96px); letter-spacing: -0.02em; line-height: 1;
    text-shadow: 0 2px 12px rgba(0,0,0,0.45);
  }
  .hero .tag {
    font-family: ui-serif, Georgia, serif; font-style: italic; font-weight: 400;
    font-size: clamp(14px, 1.8vw, 18px); letter-spacing: 0.02em; opacity: 0.95;
    margin-top: 12px;
  }
  .hero .cta {
    display: inline-block; margin-top: 22px; padding: 10px 22px;
    border: 1px solid rgba(255,255,255,0.7); color: #fff;
    font-family: ui-sans-serif, system-ui, sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    text-decoration: none; transition: background 0.18s, color 0.18s;
  }
  .hero .cta:hover { background: #fff; color: var(--accent); }

  /* DESTINATIONS — three jobs-to-be-done */
  .three {
    max-width: 1280px; margin: 80px auto; padding: 0 28px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
  }
  @media (max-width: 820px) { .three { grid-template-columns: 1fr; gap: 56px; } }
  .pillar { border-top: 1px solid var(--line); padding-top: 28px; }
  .pillar .num {
    font-family: ui-sans-serif, system-ui, sans-serif; font-size: 11px;
    letter-spacing: 0.22em; color: var(--ink-mute); text-transform: uppercase;
  }
  .pillar h2 {
    margin: 12px 0 14px; font-family: ui-serif, Georgia, serif;
    font-size: 30px; font-weight: 500; letter-spacing: -0.01em;
  }
  .pillar p {
    margin: 0 0 22px; color: var(--ink-mute); font-size: 15px; line-height: 1.55;
  }
  .pillar a.go {
    font-family: ui-sans-serif, system-ui, sans-serif; font-size: 11px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
    text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  }
  .pillar a.go:hover { color: var(--accent); border-bottom-color: var(--accent); }

  /* PROOF strip */
  .proof {
    background: var(--accent); color: #f5ecd9;
    padding: 64px 28px; text-align: center;
    margin-top: 80px;
  }
  .proof .num {
    font-family: ui-serif, Georgia, serif; font-size: clamp(36px, 5vw, 56px);
    font-weight: 500; letter-spacing: -0.01em; line-height: 1;
  }
  .proof .lbl {
    font-family: ui-sans-serif, system-ui, sans-serif; font-size: 11px;
    letter-spacing: 0.22em; text-transform: uppercase; color: rgba(245,236,217,0.7);
    margin-top: 10px;
  }
  .proof .row { display: flex; justify-content: center; gap: 96px; flex-wrap: wrap; }
  .proof .row > div { padding: 0 16px; }

  footer {
    color: var(--ink-mute); font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 36px 28px 48px; text-align: center;
  }
</style>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  </head>
<body>

<section class="hero">
  <img class="bg" alt="" src="https://images.unsplash.com/photo-1556228720-195a672e8a03?w=2400&auto=format&fit=crop&q=80" onerror="this.style.display='none'" />
  <div class="nav-top">
    <span class="mark">designerline</span>
    <div class="hamburger" aria-label="menu"><span></span><span></span><span></span></div>
  </div>
  <div class="wordmark-zone">
    <div class="wordmark">designerline</div>
    <div class="tag">the trade designer's everything-app.</div>
    <a class="cta" href="/commerce.html">enter</a>
  </div>
</section>

<section class="three">
  <article class="pillar">
    <div class="num">01 — commerce</div>
    <h2>Sample requests &amp;<br/>trade pricing.</h2>
    <p>One workflow. Every vendor. Order memos and rolls from 400+ wallcovering and fabric houses at your verified trade tier — without the email chain.</p>
    <a class="go" href="/commerce.html">browse the catalog →</a>
  </article>

  <article class="pillar">
    <div class="num">02 — advocacy</div>
    <h2>Petitions on IP &amp;<br/>price transparency.</h2>
    <p>Sign on to industry petitions — pattern IP protection, trade-pricing disclosure, honest lead times. Your signature carries the weight of a verified working designer.</p>
    <a class="go" href="/advocacy.html">open petitions →</a>
  </article>

  <article class="pillar">
    <div class="num">03 — community</div>
    <h2>The trade feed.<br/>Town halls. News.</h2>
    <p>Vendor announcements, archive acquisitions, regulatory filings, monthly town halls. Surfaced from 30 years of trade history, not a generic design Pinterest.</p>
    <a class="go" href="/community.html">read the feed →</a>
  </article>
</section>

<section class="proof">
  <div class="row">
    <div><div class="num">60,000</div><div class="lbl">trade-verified designers</div></div>
    <div><div class="num">400+</div><div class="lbl">vendor partners</div></div>
    <div><div class="num">30 yrs</div><div class="lbl">trade data</div></div>
  </div>
</section>

<footer>
  designerline — concept v0.1 · port 9780 · single auth via dw_unified
</footer>

</body>
</html>