`public/index.html`

96 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>crankd</title>
<style>
  :root {
    --bg: #0b0b0c;
    --fg: #f4f1ea;
    --accent: #ff5b3a;
    --hair: rgba(244,241,234,0.18);
  }
  * { box-sizing: border-box; }
  html, body { margin:0; padding:0; background:var(--bg); color:var(--fg); font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; }
  a { color: inherit; text-decoration: none; }

  /* header — logo UL, hamburger UR */
  header {
    position: fixed; inset: 0 0 auto 0; z-index: 10;
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 22px; pointer-events: none;
  }
  header .logo, header .menu { pointer-events: auto; }
  header .logo { font-weight: 700; letter-spacing: 0.02em; text-transform: lowercase; }
  header .menu { font-size: 22px; cursor: pointer; padding: 6px 10px; }

  /* hero — large, wordmark below */
  .hero {
    min-height: 100vh;
    display: grid; place-items: center;
    background:
      radial-gradient(60% 60% at 30% 35%, rgba(255,91,58,0.18), transparent 60%),
      radial-gradient(50% 50% at 75% 70%, rgba(120,150,255,0.10), transparent 60%),
      var(--bg);
  }
  .hero-inner { text-align:center; padding: 0 24px; max-width: 980px; }
  .hero h1 {
    font: 700 clamp(56px, 12vw, 168px)/0.9 "Helvetica Neue", sans-serif;
    letter-spacing: -0.04em;
    margin: 0 0 14px;
    text-transform: lowercase;
  }
  .hero .tagline {
    font-style: italic; opacity: 0.78; font-size: clamp(14px, 1.6vw, 18px);
    margin: 0 auto 28px; max-width: 56ch;
  }
  .cta {
    display: inline-block; border: 1px solid var(--hair);
    padding: 12px 22px; border-radius: 999px; font-size: 14px;
    letter-spacing: 0.04em; text-transform: uppercase;
  }
  .cta:hover { border-color: var(--accent); color: var(--accent); }

  /* compliance footer strip */
  .compliance {
    border-top: 1px solid var(--hair);
    padding: 28px 22px;
    font-size: 12px; opacity: 0.66; max-width: 1100px; margin: 0 auto;
  }
  .compliance b { color: var(--fg); opacity: 1; }
  .compliance ul { padding-left: 18px; margin: 8px 0 0; }
</style>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  </head>
<body>

<header>
  <div class="logo">crankd</div>
  <div class="menu" aria-label="menu">≡</div>
</header>

<section class="hero">
  <div class="hero-inner">
    <h1>crankd</h1>
    <p class="tagline">opt-in AI-voice prank &amp; escape calls — built compliance-first.</p>
    <a class="cta" href="#how">how it works</a>
  </div>
</section>

<section id="how" class="compliance">
  <b>What crankd is not.</b> crankd does not cold-dial strangers. Every call requires
  prior express opt-in from the recipient (or the recipient is you, calling yourself).
  <ul>
    <li>FCC Feb-2024 rule: every AI-voice call begins with an audible disclosure that the voice is AI-generated.</li>
    <li>TCPA: outbound calls only to numbers with a confirmed opt-in record on file.</li>
    <li>CA Penal Code §632: recordings require both-party consent — recording is off by default.</li>
    <li>Quiet hours: no calls before 8am or after 9pm recipient-local.</li>
    <li>DNC scrub runs before every dial.</li>
    <li>v0.1 ships in Steve-only mode: dialing is hard-disabled until allowlist is wired.</li>
  </ul>
</section>

</body>
</html>