`preview-standalone.html`

154 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Designer Wallcoverings — Warm Sand</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=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
  /* ============================================================
     Designer Wallcoverings — "Warm Sand" front page (#4)
     Sidebar rail (centered logo + full category list + search + cart)
     + huge hero with real product imagery. No horizontal nav.
     Rail collapses to a top stack on mobile; all colors are CSS vars.
     ============================================================ */
  :root{
    --rail-bg:#efe6d6; --rail-tx:#3a3025; --rail-mut:#8a7c66; --act-bg:#e4d7c1; --accent:#a9773f;
    --div:#ddcfb6; --mono-bg:#a9773f; --mono-fg:#ffffff;
    --hero-tx:#3a3025; --hero-sub:#6f6152;
    --ed-tx:#ffffff; --cta-bg:#3a3025; --cta-tx:#efe6d6;
    --foot-bg:#3a3025; --foot-tx:#d8cfc2; --rail-w:300px;
    /* real DW catalog imagery — HIGH-END LINES ONLY (never Brewster/York/WallQuest prints) */
    /* hero: Maya Romanoff "Ajiro Burst of Happiness" — glass-bead / metallic marquetry */
    --hero-img:url('https://cdn.shopify.com/s/files/1/0015/4117/7456/files/mr-abh-1177-Maya_Romanoff_3.jpg');
    /* wallcoverings block: Thibaut Montado Cork — metallic gold */
    --ed1-img:url('https://cdn.shopify.com/s/files/1/0015/4117/7456/files/T75107.jpg');
    /* grasscloth block: Thibaut Jindo Grass — real natural textile */
    --ed2-img:url('https://cdn.shopify.com/s/files/1/0015/4117/7456/files/T75111_70b8dbaa-4a4c-4660-b503-0df6999bad94.jpg');
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Inter',sans-serif;background:#e7dcc8;color:var(--hero-tx)}
  a{color:inherit;text-decoration:none}

  .layout{display:grid;grid-template-columns:var(--rail-w) 1fr;min-height:100vh}

  /* ---------- RAIL ---------- */
  .rail{background:var(--rail-bg);color:var(--rail-tx);display:flex;flex-direction:column;
    border-right:1px solid var(--div);position:sticky;top:0;height:100vh}
  .rail-head{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 22px 18px;text-align:center}
  .mono{width:56px;height:56px;border-radius:11px;background:var(--mono-bg);color:var(--mono-fg);
    display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:600;font-size:22px}
  .brand{font-family:'Playfair Display',serif;font-weight:600;font-size:19px;line-height:1.1}
  .tag{font-size:10.5px;letter-spacing:1.6px;color:var(--rail-mut)}
  .search{width:100%;display:flex;align-items:center;gap:8px;margin-top:6px;
    background:rgba(255,255,255,.55);border:1px solid var(--div);border-radius:999px;padding:9px 14px}
  .search input{border:0;background:transparent;outline:none;font:inherit;font-size:12.5px;color:var(--rail-tx);width:100%}
  .search input::placeholder{color:var(--rail-mut)}
  .search svg{flex:none;stroke:var(--rail-mut)}
  .rail hr{border:0;border-top:1px solid var(--div)}
  .cats{flex:1;overflow:auto;padding:6px 0}
  .cats a{display:flex;align-items:center;justify-content:space-between;padding:12.5px 26px;font-size:14.5px;
    border-bottom:1px solid var(--div);transition:background .15s}
  .cats a .ch{color:var(--rail-mut);font-size:15px}
  .cats a:hover{background:var(--act-bg)}
  .cats a.on{background:var(--act-bg);color:var(--accent);font-weight:600}
  .cats a:last-child{border-bottom:0}
  .rail-foot{padding:16px 26px 22px;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--div)}
  .rail-foot .u{display:flex;gap:18px;align-items:center;font-size:13px;color:var(--rail-mut)}
  .rail-foot .cart{display:inline-flex;align-items:center;gap:6px;color:var(--rail-tx)}
  .rail-foot .cart .b{background:var(--accent);color:#fff;border-radius:999px;font-size:10px;font-weight:600;
    min-width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
  .rail-foot .tl{font-size:12px;font-weight:600;letter-spacing:1px;color:var(--accent)}

  /* ---------- MAIN ---------- */
  .hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;gap:22px;padding:80px 40px;background:var(--hero-img) center/cover no-repeat;isolation:isolate}
  .hero::before{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(rgba(231,220,200,.82),rgba(231,220,200,.62))}
  .hero .ey{font-size:13px;letter-spacing:4px;color:var(--accent);font-weight:600}
  .hero h1{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(42px,6vw,84px);line-height:1.02;max-width:820px}
  .hero p{color:var(--hero-sub);font-size:17px;line-height:1.55;max-width:520px}
  .cta{margin-top:8px;display:inline-block;background:var(--cta-bg);color:var(--cta-tx);border-radius:999px;
    padding:15px 34px;font-size:13px;font-weight:500;letter-spacing:1.5px}
  .ed{position:relative;min-height:500px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
    gap:14px;padding:44px;color:var(--ed-tx);text-align:center;background-size:cover;background-position:center;isolation:isolate}
  .ed::before{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(rgba(58,48,37,.15),rgba(58,48,37,.72))}
  .ed.a{background-image:var(--ed1-img)} .ed.b{background-image:var(--ed2-img)}
  .ed h2{font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(28px,3.4vw,42px)}
  .ed .pill{border:1px solid rgba(255,255,255,.85);color:#fff;border-radius:999px;padding:11px 24px;font-size:12px;letter-spacing:1.5px}
  .foot{background:var(--foot-bg);color:var(--foot-tx);display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:14px;padding:36px 48px;font-size:13px}
  .foot b{font-family:'Playfair Display',serif;font-weight:600;font-size:20px;color:#fff}
  .foot .lnk{display:flex;gap:24px}

  /* ---------- MOBILE: rail → top; ALL categories revealed on scroll ---------- */
  @media(max-width:860px){
    .layout{grid-template-columns:1fr}
    .rail{position:static;height:auto;border-right:0;border-bottom:1px solid var(--div)}
    .rail-head{padding:26px 22px 16px}
    .cats{overflow:visible}
    .hero{min-height:64vh}
    .rail-foot{flex-direction:row;justify-content:space-between;align-items:center}
    .foot{padding:28px 22px}
  }
</style>
</head>
<body>
  <div class="layout">
    <!-- RAIL: centered logo + name, search, FULL category list, cart -->
    <aside class="rail">
      <div class="rail-head">
        <div class="mono">DW</div>
        <div class="brand">Designer<br>Wallcoverings</div>
        <div class="tag">TO THE TRADE, SINCE 1998</div>
        <form class="search" action="/search" role="search">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
          <input type="search" name="q" placeholder="Search patterns, colors…">
        </form>
      </div>
      <nav class="cats">
        <a class="on" href="/collections/wallcoverings">Wallcoverings <span class="ch">&rsaquo;</span></a>
        <a href="/collections/fabrics">Fabrics <span class="ch">&rsaquo;</span></a>
        <a href="/collections/grasscloth-natural">Grasscloth &amp; Natural <span class="ch">&rsaquo;</span></a>
        <a href="/collections/murals-panoramic">Murals &amp; Panoramic <span class="ch">&rsaquo;</span></a>
        <a href="/collections/commercial">Commercial <span class="ch">&rsaquo;</span></a>
        <a href="/pages/shop-by-color">Shop by Color <span class="ch">&rsaquo;</span></a>
        <a href="/pages/shop-by-style">Shop by Style <span class="ch">&rsaquo;</span></a>
        <a href="/pages/brands">Brands &amp; Designers <span class="ch">&rsaquo;</span></a>
        <a href="/collections">Collections <span class="ch">&rsaquo;</span></a>
        <a href="/collections/new-arrivals">New Arrivals <span class="ch">&rsaquo;</span></a>
        <a href="/pages/trade-only-benefits">Trade Program <span class="ch">&rsaquo;</span></a>
        <a href="/pages/samples">Samples <span class="ch">&rsaquo;</span></a>
      </nav>
      <div class="rail-foot">
        <div class="u">
          <a href="/account">Account</a>
          <a class="cart" href="/cart">Cart <span class="b">2</span></a>
        </div>
        <a class="tl" href="/pages/trade-only-benefits">TRADE LOGIN &rarr;</a>
      </div>
    </aside>

    <!-- MAIN: huge hero (real texture) + editorial blocks (real photos) + footer -->
    <main>
      <section class="hero">
        <div class="ey">SPRING 2026</div>
        <h1>The Spring Collection</h1>
        <p>The season's most beautiful walls, delivered as samples to your studio.</p>
        <a class="cta" href="/collections/new-arrivals">DISCOVER</a>
      </section>
      <section class="ed a"><h2>Wallcoverings</h2><a class="pill" href="/collections/wallcoverings">DISCOVER</a></section>
      <section class="ed b"><h2>Fabrics &amp; Grasscloth</h2><a class="pill" href="/collections/grasscloth-natural">DISCOVER</a></section>
      <footer class="foot">
        <b>Designer Wallcoverings</b>
        <div class="lnk"><a href="/pages/trade-only-benefits">Trade</a><a href="/blogs/journal">Journal</a><a href="/pages/contact">Contact</a><a href="#">Instagram</a></div>
        <span>&copy; 2026</span>
      </footer>
    </main>
  </div>
</body>
</html>