`public/showcase.html`

86 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Designer Wallcoverings — Brand Films</title>
<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=Lora:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
<style>
  :root{ --ink:#111; --body:#444; --canvas:#fff; --gold:#b08212; --line:#e7e2d8; }
  *{ box-sizing:border-box; margin:0; padding:0; }
  body{ font-family:'Lora',Georgia,serif; color:var(--body); background:var(--canvas); -webkit-font-smoothing:antialiased; }
  header{ text-align:center; padding:64px 24px 40px; border-bottom:1px solid var(--line); }
  .kicker{ text-transform:uppercase; letter-spacing:4px; font-size:13px; color:var(--gold); margin-bottom:18px; }
  h1{ font-weight:400; color:var(--ink); font-size:clamp(28px,5vw,46px); line-height:1.15; letter-spacing:.5px; }
  .sub{ margin-top:14px; font-size:clamp(15px,2.2vw,18px); font-style:italic; color:var(--body); }
  .wrap{ max-width:1180px; margin:0 auto; padding:48px 24px 24px; }
  .section-label{ text-transform:uppercase; letter-spacing:3px; font-size:12px; color:var(--gold); margin:36px 0 20px; padding-bottom:10px; border-bottom:1px solid var(--line); }
  .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px; align-items:end; }
  .card{ display:flex; flex-direction:column; }
  .card video{ width:100%; border-radius:6px; background:#faf8f4; display:block; box-shadow:0 1px 0 var(--line); }
  .card .meta{ margin-top:12px; }
  .card .name{ color:var(--ink); font-size:16px; }
  .card .place{ text-transform:uppercase; letter-spacing:2px; font-size:11px; color:var(--gold); margin-top:4px; }
  footer{ text-align:center; padding:56px 24px 72px; border-top:1px solid var(--line); margin-top:48px; }
  footer .mark{ text-transform:uppercase; letter-spacing:5px; color:var(--ink); font-size:15px; }
  footer a{ color:var(--gold); text-decoration:none; letter-spacing:1px; font-size:14px; display:inline-block; margin-top:10px; }
  .rule{ width:44px; height:1px; background:var(--gold); margin:18px auto 0; }
</style>
</head>
<body>
  <header>
    <div class="kicker">Designer Wallcoverings</div>
    <h1>Brand Films</h1>
    <div class="sub">Walls that make an entrance — the collections, in motion.</div>
    <div class="rule"></div>
  </header>

  <div class="wrap">
    <div class="section-label">The Film · 32 seconds</div>
    <div class="grid">
      <div class="card">
        <video controls muted loop playsinline preload="metadata" style="max-width:360px;margin:0 auto">
          <source src="/reels/dw-brand-promo-vertical-20260717.mp4" type="video/mp4"></video>
        <div class="meta"><div class="name">Vertical</div><div class="place">Reels · Stories · Phone</div></div>
      </div>
      <div class="card">
        <video controls muted loop playsinline preload="metadata" style="max-width:460px;margin:0 auto">
          <source src="/reels/dw-brand-promo-square-20260717.mp4" type="video/mp4"></video>
        <div class="meta"><div class="name">Square</div><div class="place">Instagram Feed</div></div>
      </div>
      <div class="card">
        <video controls muted loop playsinline preload="metadata">
          <source src="/reels/dw-brand-promo-wide-20260717.mp4" type="video/mp4"></video>
        <div class="meta"><div class="name">Wide · 16:9</div><div class="place">Website · YouTube</div></div>
      </div>
    </div>

    <div class="section-label">The Short · 15 seconds</div>
    <div class="grid">
      <div class="card">
        <video controls muted loop playsinline preload="metadata" style="max-width:360px;margin:0 auto">
          <source src="/reels/dw-brand-promo-short-vertical-20260717.mp4" type="video/mp4"></video>
        <div class="meta"><div class="name">Vertical</div><div class="place">Reels · TikTok · Shorts</div></div>
      </div>
      <div class="card">
        <video controls muted loop playsinline preload="metadata" style="max-width:460px;margin:0 auto">
          <source src="/reels/dw-brand-promo-short-square-20260717.mp4" type="video/mp4"></video>
        <div class="meta"><div class="name">Square</div><div class="place">Instagram Feed</div></div>
      </div>
      <div class="card">
        <video controls muted loop playsinline preload="metadata">
          <source src="/reels/dw-brand-promo-short-wide-20260717.mp4" type="video/mp4"></video>
        <div class="meta"><div class="name">Wide · 16:9</div><div class="place">Website · YouTube</div></div>
      </div>
    </div>
  </div>

  <footer>
    <div class="mark">Designer Wallcoverings</div>
    <a href="https://designerwallcoverings.com">designerwallcoverings.com →</a>
  </footer>
</body>
</html>