`public/collections/maya-romanoff.html`

56 lines
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Maya Romanoff — Designer Wallcoverings</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; }
  .banner{ position:relative; height:50vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; overflow:hidden; }
  .banner .bg{ position:absolute; inset:0; background:url('/public/collections/maya-romanoff-banner.jpg') center/cover; transform:scale(1.03); }
  .banner .scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,16,12,.42),rgba(20,16,12,.62)); }
  .banner .inner{ position:relative; padding:0 24px; }
  .banner .kicker{ text-transform:uppercase; letter-spacing:5px; font-size:13px; color:#e7d8bd; margin-bottom:16px; }
  .banner h1{ font-weight:400; font-size:clamp(34px,6vw,64px); line-height:1.08; text-shadow:0 2px 22px rgba(0,0,0,.5); }
  .banner .sub{ margin-top:14px; font-size:clamp(15px,2.2vw,19px); font-style:italic; color:#f3ece0; }
  .banner .rule{ width:52px; height:1px; background:var(--gold); margin:20px auto 0; }
  .wrap{ max-width:1100px; margin:0 auto; padding:44px 24px 8px; }
  .section-label{ text-transform:uppercase; letter-spacing:3px; font-size:12px; color:var(--gold); margin:0 0 18px; padding-bottom:10px; border-bottom:1px solid var(--line); text-align:center; }
  .film video{ width:100%; border-radius:8px; background:#14110e; display:block; box-shadow:0 10px 40px rgba(0,0,0,.18); }
  .film .note{ text-align:center; margin-top:14px; font-size:14px; font-style:italic; color:var(--body); }
  .film .note b{ color:var(--ink); font-style:normal; }
  .cta{ text-align:center; padding:34px 24px 8px; }
  .cta a{ display:inline-block; text-transform:uppercase; letter-spacing:2px; font-size:13px; color:#fff; background:var(--ink); padding:14px 30px; border-radius:2px; text-decoration:none; }
  .cta a:hover{ background:var(--gold); }
  footer{ text-align:center; padding:52px 24px 72px; border-top:1px solid var(--line); margin-top:44px; }
  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; }
  .player{ position:relative; }
  .vchip{ position:absolute; top:12px; right:12px; display:flex; gap:8px; z-index:5; }
  .vchip button{ font:600 13px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; letter-spacing:.02em; color:#fff; background:rgba(20,20,20,.72); border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:7px 12px; cursor:pointer; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
  .vchip button:hover{ background:rgba(20,20,20,.92); }
</style></head><body>
  <header class="banner"><div class="bg"></div><div class="scrim"></div>
    <div class="inner"><div class="kicker">Designer Wallcoverings</div><h1>Maya Romanoff</h1>
      <div class="sub">A Study in Materials</div><div class="rule"></div></div></header>
  <div class="wrap"><div class="section-label">The Flip Book · narrated</div>
    <div class="film"><div class="player">
      <video id="fbvid" controls playsinline preload="metadata" poster="/public/collections/maya-romanoff-poster.jpg">
      <source src="/reels/maya-romanoff-flipbook.mp4" type="video/mp4"></video>
      <div class="vchip">
        <button type="button" id="fbspeed" title="Playback speed" aria-label="Adjust playback speed">⏩ 1×</button>
        <button type="button" id="fbsound" title="Sound on/off" aria-label="Toggle sound">🔊</button>
      </div></div>
      <div class="note">🔊 <b>Sound on</b> — adjust <b>speed</b> &amp; <b>sound</b> with the controls on the video. Narrated in Steve Abrams' voice.</div></div></div>
    <script>(function(){var v=document.getElementById('fbvid');if(!v)return;
      var sp=document.getElementById('fbspeed'),sd=document.getElementById('fbsound');
      var rates=[1,1.25,1.5,0.5,0.75],ri=0;
      sp.addEventListener('click',function(){ri=(ri+1)%rates.length;v.playbackRate=rates[ri];sp.textContent='⏩ '+rates[ri]+'×';});
      function paint(){sd.textContent=v.muted||v.volume===0?'🔇':'🔊';}
      sd.addEventListener('click',function(){v.muted=!v.muted;if(!v.muted&&v.volume===0)v.volume=1;paint();});
      v.addEventListener('volumechange',paint);paint();
    })();</script>
  <div class="cta"><a href="https://www.designerwallcoverings.com/collections/all?filter.p.vendor=Maya+Romanoff">Shop the collection →</a></div>
  <footer><div class="mark">Designer Wallcoverings</div><a href="https://designerwallcoverings.com">designerwallcoverings.com →</a></footer>
</body></html>