← back to Newmor Onboard
data/live-2026-09-09/theme/sections/dw-collection-films.liquid
105 lines
{%- comment -%}
DW Collection Films — homepage video band featuring the flip-book lookbooks.
TK-10427. Three cards: Maya Romanoff / Glitter Walls / Majilite Metallics.
SECTION-FILE form: carries a schema block, so it can be wired into
templates/index.json by API — no theme-editor paste required. The identical
markup also exists as a Custom-Liquid paste blob in PATH-B-paste-3card.liquid.
Self-contained: all styles are .dwcf-prefixed, no theme objects, no
per-section settings. Videos + posters served from
marketing.designerwallcoverings.com; Shop CTAs are same-domain relative links
to live, published collections.
{%- endcomment -%}
<style>
.dwcf { max-width: 1280px; margin: 0 auto; padding: 56px 20px; font-family: inherit; }
.dwcf__head { text-align: center; margin-bottom: 34px; }
.dwcf__eyebrow { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: #9a8f80; margin: 0 0 10px; }
.dwcf__title { font-size: clamp(26px, 4vw, 40px); font-weight: 400; letter-spacing: .01em; margin: 0; color: #1a1a1a; }
/* auto-fit + centered so the grid stays balanced at 2 OR 3 cards (no orphan column when a card is held) */
.dwcf__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 384px)); justify-content: center; gap: 24px; margin-top: 34px; }
@media (max-width: 680px){ .dwcf__grid { grid-template-columns: minmax(0, 420px); } }
.dwcf__card { position: relative; border-radius: 6px; overflow: hidden; background: #efe9df; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.dwcf__vidwrap { position: relative; aspect-ratio: 16/9; background:#000; }
.dwcf__vidwrap video { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; display:block; }
.dwcf__play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; cursor:pointer; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35)); transition: opacity .25s; border:0; padding:0; width:100%; }
.dwcf__play:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.dwcf__play svg { width:64px; height:64px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.dwcf__meta { padding: 18px 20px 22px; }
.dwcf__name { font-size: 20px; margin: 0 0 4px; color:#1a1a1a; }
.dwcf__sub { font-size: 13px; color:#8a8072; margin: 0 0 14px; letter-spacing:.02em; }
.dwcf__cta { display:inline-block; font-size: 12px; letter-spacing:.16em; text-transform:uppercase; color:#1a1a1a; text-decoration:none; border-bottom:1px solid #1a1a1a; padding-bottom:2px; }
.dwcf__cta:hover { color:#7a6f5f; border-color:#7a6f5f; }
</style>
<section class="dwcf">
<div class="dwcf__head">
<p class="dwcf__eyebrow">Collection Films</p>
<h2 class="dwcf__title">Leaf Through Our Lookbooks</h2>
</div>
<div class="dwcf__grid">
<div class="dwcf__card">
<div class="dwcf__vidwrap">
<video preload="none" playsinline controls
poster="https://marketing.designerwallcoverings.com/public/collections/maya-romanoff-poster.jpg">
<source src="https://marketing.designerwallcoverings.com/reels/maya-romanoff-flipbook.mp4" type="video/mp4">
</video>
<button type="button" class="dwcf__play" onclick="var v=this.previousElementSibling; v.play(); this.style.display='none';" aria-label="Play video">
<svg viewBox="0 0 64 64" fill="none" aria-hidden="true"><circle cx="32" cy="32" r="31" fill="rgba(255,255,255,.92)"/><path d="M26 20l20 12-20 12z" fill="#1a1a1a"/></svg>
</button>
</div>
<div class="dwcf__meta">
<h3 class="dwcf__name">Maya Romanoff</h3>
<p class="dwcf__sub">A Study in Materials — beadwork, marquetry, metallic luster & natural fiber</p>
<a class="dwcf__cta" href="/collections/maya-romanoff">Shop the Collection</a>
</div>
</div>
<div class="dwcf__card">
<div class="dwcf__vidwrap">
<video preload="none" playsinline controls
poster="https://marketing.designerwallcoverings.com/public/collections/glitter-walls-poster.jpg">
<source src="https://marketing.designerwallcoverings.com/reels/glitter-walls-flipbook.mp4" type="video/mp4">
</video>
<button type="button" class="dwcf__play" onclick="var v=this.previousElementSibling; v.play(); this.style.display='none';" aria-label="Play video">
<svg viewBox="0 0 64 64" fill="none" aria-hidden="true"><circle cx="32" cy="32" r="31" fill="rgba(255,255,255,.92)"/><path d="M26 20l20 12-20 12z" fill="#1a1a1a"/></svg>
</button>
</div>
<div class="dwcf__meta">
<h3 class="dwcf__name">Glitter Walls</h3>
<p class="dwcf__sub">Bring the Sparkle Home — sequins & glass beads in gold, silver, black & jewel tones</p>
<a class="dwcf__cta" href="/collections/glitter-walls">Shop the Collection</a>
</div>
</div>
<div class="dwcf__card">
<div class="dwcf__vidwrap">
<video preload="none" playsinline controls
poster="https://marketing.designerwallcoverings.com/public/collections/majilite-metallics-poster.jpg">
<source src="https://marketing.designerwallcoverings.com/reels/majilite-metallics-flipbook.mp4" type="video/mp4">
</video>
<button type="button" class="dwcf__play" onclick="var v=this.previousElementSibling; v.play(); this.style.display='none';" aria-label="Play video">
<svg viewBox="0 0 64 64" fill="none" aria-hidden="true"><circle cx="32" cy="32" r="31" fill="rgba(255,255,255,.92)"/><path d="M26 20l20 12-20 12z" fill="#1a1a1a"/></svg>
</button>
</div>
<div class="dwcf__meta">
<h3 class="dwcf__name">Majilite Metallics</h3>
<p class="dwcf__sub">A Colorway Story in Four Metals — faux-leather metallics on walls & furniture</p>
<a class="dwcf__cta" href="/collections/majilite">Shop the Collection</a>
</div>
</div>
</div>
</section>
{% schema %}
{
"name": "Collection Films",
"class": "dwcf-section",
"settings": [],
"presets": [{ "name": "Collection Films" }]
}
{% endschema %}