`templates/page.styles.liquid`

67 lines
{% comment %}
  page.brands.liquid — SELF-HEALING "Shop by Brand" directory.
  Each tile pulls its background image LIVE from the linked collection at render
  time (collection.image -> first product image), so images can never rot when a
  CDN file is purged. Brands with no collection render as a clean text tile (never
  a broken image). Assign a Page to the "brands" template in Shopify admin.
  Scoped under #dwb-root so it can never collide with theme CSS.
{% endcomment %}
<div id="dwb-root">
<style>
  #dwb-root{max-width:1220px;margin:0 auto;padding:8px 0 48px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;color:#1a1a1a}
  #dwb-root *{box-sizing:border-box}
  #dwb-root .dwb-head{text-align:center;padding:22px 16px 10px}
  #dwb-root .dwb-head h1{margin:0;font-weight:300;letter-spacing:.18em;text-transform:uppercase;font-size:22px}
  #dwb-root .dwb-head p{margin:6px 0 0;color:#7a7266;font-size:13px;letter-spacing:.04em}
  #dwb-root .dwb-tools{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;padding:8px 16px 18px}
  #dwb-root .dwb-search{width:min(420px,90%);height:40px;border:1px solid #e6e0d6;border-radius:999px;padding:0 18px;font-size:14px;outline:none}
  #dwb-root .dwb-search:focus{border-color:#b9892f}
  #dwb-root .dwb-range{display:flex;align-items:center;gap:8px;color:#7a7266;font-size:12px}
  #dwb-root .dwb-grid{--cols:5;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:16px;padding:0 16px}
  @media(max-width:900px){#dwb-root .dwb-grid{--cols:3}}
  @media(max-width:560px){#dwb-root .dwb-grid{--cols:2}}
  #dwb-root .dwb-card{position:relative;aspect-ratio:4/3;border:1px solid #e6e0d6;border-radius:12px;overflow:hidden;
    text-decoration:none;color:inherit;background:#f5f2ec;display:flex;align-items:flex-end;transition:box-shadow .15s,transform .15s}
  #dwb-root .dwb-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.12);transform:translateY(-2px)}
  #dwb-root .dwb-bg{position:absolute;inset:0;z-index:0}
  #dwb-root .dwb-bg img{width:100%;height:100%;object-fit:cover;display:block}
  #dwb-root .dwb-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55))}
  #dwb-root .dwb-name{position:relative;z-index:2;width:100%;padding:12px 14px;color:#fff;font-size:14px;font-weight:600;letter-spacing:.02em;text-shadow:0 1px 4px rgba(0,0,0,.4)}
  #dwb-root .dwb-card.dwb-noimg{background:linear-gradient(135deg,#2a2724,#4a453d)}
  #dwb-root .dwb-card.dwb-noimg::after{display:none}
  #dwb-root .dwb-msg{grid-column:1/-1;text-align:center;color:#9a9276;padding:36px;font-size:14px}
</style>
<div class="dwb-head"><h1>Shop by Style</h1><p>Browse by design style — from traditional to modern.</p></div>
<div class="dwb-tools">
  <input class="dwb-search" id="dwbSearch" type="search" placeholder="Search…" aria-label="Search brands">
  <span class="dwb-range">Size <input id="dwbRange" type="range" min="3" max="7" value="5" aria-label="Grid density"></span>
</div>
<div class="dwb-grid" id="dwbGrid">
{% assign brands = "Abstract::/collections/abstract-durable-vinyl~Acoustical::/collections/acoustical~Animal Skin::/collections/animal-skin~Animal Print::/collections/animal-print-wallpaper~Arabesque::/collections/ogee-wallpaper~Art Deco::/collections/decoglass-wallpaper~Art Nouveau::/collections/art-nouveau-wallpaper~Arts & Crafts::/collections/arts-and-crafts-wallpaper~Baroque::/collections/baroque-wallpaper~Bohemian::/collections/bohemian-wallpaper~Botanicals & Florals::/collections/botanicals-and-florals~Chevron::/collections/chevron-herringbone-wallpaper-collection~Children's::/collections/kids-wallpaper~Chinoiserie::/collections/chinoiserie~Coastal::/collections/coastal-nautical-1~Contemporary::/collections/contemporary~Cork::/collections/cork-wallpaper-collection~Crypton::/collections/crypton~Damask::/collections/damasks-1~Embossed::/collections/embossed~Farmhouse::/collections/farmhouse-wallpaper~Faux Glass Bead::/collections/glass-bead~Faux Grasscloth::/collections/faux-grasscloth-wallpaper-collection~Faux Leather::/collections/faux-leather~Faux Silk & Linen::/collections/faux-silk~Faux Suede::/collections/suede-faux-suede-fabric~Flocked Velvet::/collections/flocked-velvet-wallpaper-collection~Florals & Flowers::/collections/florals-and-flowers~French Country::/collections/french-country-wallpaper-collection~Fretwork::/collections/fretwork-wallpaper~Geometric::/collections/geometric~Georgian::/collections/damask-traditional~Glass Beads::/collections/glass-beaded-walls~Gothic::/collections/moody-dark~Greek Key::/collections/greek-key-wallpaper~Ikat::/collections/ikat-wallpaper~Industrial::/collections/industrial~Japonisme::/collections/japonisme-wallpaper~Lincrusta::/collections/vendors?q=Lincrusta~Lattice::/collections/lattice-wallpaper~Leaf::/collections/leaf-pattern-wallpaper~Madagascar Cloth::/collections/madagascar-cloth~Maximalist::/collections/maximalist-wallpaper~Medallion::/collections/medallion-wallpaper~Mediterranean::/collections/mediterranean-wallpaper~Metallic::/collections/metallic-wallpaper-collections~Mica::/collections/art-deco-metallics-1~Mid Century Modern::/collections/mid-century-modern-1~Minimalist::/collections/minimalist~Modern::/collections/modern~Murals::/collections/murals~Neoclassical::/collections/neoclassical-wallpaper~Novelty::/collections/novelty-wallpaper-collection~Ombre::/collections/ombre~Paisley::/collections/paisley-wallpaper~Paperweaves::/collections/fine-paper~Renaissance::/collections/renaissance-wallpaper~Retro & Vintage::/collections/retro-walls~Rustic::/collections/rustic-charm-wallpaper-collection~Scandinavian::/collections/scandinavian-wallpaper~Scenic::/collections/scenic-wallpaper~Stripe & Plaid::/collections/stripe-plaid~Textured::/collections/textured-wallpaper~Toile::/collections/toile-wallpaper~Traditional::/collections/traditional~Transitional::/collections/transitional-wallpaper~Trellis::/collections/trellis~Tropical::/collections/tropical-prints~Type 2 Vinyl::/collections/type-2-commercial-wallcovering~Vegan Crocodile::/collections/vegan-crocodile-wallpaper~Victorian::/collections/victorian-wallpaper~Vine::/collections/vine-pattern-wallpaper~Vintage::/collections/vintage~1940s::/collections/authentic-1940s-reproduction-vintage-wallcoverings~1950s::/collections/authentic-1950s-reproduction-vintage-wallcoverings~1960s::/collections/authentic-1960s-reproduction-vintage-wallcoverings~1970s::/collections/authentic-1970s-reproduction-vintage-wallcoverings" | split: "~" %}
{% for b in brands %}
  {% assign parts = b | split: "::" %}
  {% assign title = parts[0] %}
  {% assign href = parts[1] %}
  {% assign chandle = href | remove: "/collections/" %}
  {% assign coll = collections[chandle] %}
  {% assign img = coll.image %}
  {% unless img %}{% assign img = coll.products.first.featured_image %}{% endunless %}
  <a class="dwb-card{% unless img %} dwb-noimg{% endunless %}" href="{{ href }}" title="{{ title | escape }}" data-name="{{ title | downcase | escape }}">
    {% if img %}<span class="dwb-bg"><img src="{{ img | image_url: width: 600 }}" alt="{{ title | escape }}" loading="lazy"></span>{% endif %}
    <span class="dwb-name">{{ title }}</span>
  </a>
{% endfor %}
</div>
</div>
<script>
(function(){
  var grid=document.getElementById('dwbGrid'),q=document.getElementById('dwbSearch'),r=document.getElementById('dwbRange');
  var cards=[].slice.call(grid.querySelectorAll('.dwb-card'));
  var KEY='dwb-cols';
  function applyCols(v){grid.style.setProperty('--cols',v);try{localStorage.setItem(KEY,v);}catch(e){}}
  try{var s=localStorage.getItem(KEY);if(s){r.value=s;applyCols(s);}}catch(e){}
  r.addEventListener('input',function(){applyCols(this.value);});
  q.addEventListener('input',function(){var t=this.value.trim().toLowerCase();
    cards.forEach(function(c){c.style.display=!t||c.getAttribute('data-name').indexOf(t)>=0?'':'none';});});
})();
</script>