← back to Fabricfriday
public/index.html
592 lines
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fabric Friday — Every Week, One Exceptional Fabric | Designer Wallcoverings</title>
<meta name="description" content="Free memo samples, trade pricing, and expert hands-on service. Every Friday we spotlight one extraordinary fabric — curated from the world's finest mills by Designer Wallcoverings.">
<meta property="og:title" content="Fabric Friday | Designer Wallcoverings">
<meta property="og:description" content="One exceptional fabric, every Friday. Free memo samples. Trade service.">
<meta property="og:image" content="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/room-hotel_lobby-2017143-116-0.jpg?v=1775081808">
<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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap" rel="stylesheet">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Fabric Friday by Designer Wallcoverings",
"url": "https://fabricfriday.com",
"email": "info@fabricfriday.com",
"sameAs": ["https://designerwallcoverings.com"]
}
</script>
<style>
/* ── TOKENS ──────────────────────────────────────── */
:root {
--bg: #0a0a0a;
--ink: #f5f1e8;
--ink-soft: rgba(245,241,232,0.70);
--ink-faint: rgba(245,241,232,0.35);
--line: rgba(245,241,232,0.08);
--card-bg: rgba(245,241,232,0.05);
--header-bg: rgba(10,10,10,0.92);
/* Saffron accent — stays constant across themes */
--accent: #e09b3e;
--accent-light: #f5c06a;
--accent-mid: #e09b3e;
--accent-dark: #b37420;
--accent-glow: rgba(224,155,62,0.30);
}
[data-theme="light"] {
--bg: #faf8f4;
--ink: #1a1714;
--ink-soft: rgba(26,23,20,0.70);
--ink-faint: rgba(26,23,20,0.40);
--line: rgba(26,23,20,0.10);
--card-bg: rgba(26,23,20,0.04);
--header-bg: rgba(250,248,244,0.92);
}
/* ── RESET ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
background: var(--bg);
color: var(--ink);
font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
transition: background 0.3s, color 0.3s;
overflow-x: hidden;
}
/* ── HEADER ──────────────────────────────────────── */
.header {
position: sticky; top: 0; z-index: 100;
background: var(--header-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
display: flex; align-items: center; justify-content: space-between;
padding: 0 2rem; height: 60px;
}
.header-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-dot {
width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
background: radial-gradient(circle at 35% 35%, var(--accent-light) 0%, var(--accent-mid) 60%, var(--accent-dark) 100%);
box-shadow: 0 0 0 1px rgba(245,241,232,0.10), 0 2px 12px var(--accent-glow);
}
.brand-name {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.25rem; font-weight: 500; letter-spacing: 0.06em;
color: var(--ink); text-transform: uppercase;
}
.brand-name span { color: var(--accent); }
.header-nav { display: flex; align-items: center; gap: 1.5rem; }
.header-nav a {
color: var(--ink-soft); font-size: 0.78rem; letter-spacing: 0.12em;
text-transform: uppercase; text-decoration: none;
transition: color 0.2s;
}
.header-nav a:hover { color: var(--accent); }
.theme-toggle {
background: none; border: 1px solid var(--line); border-radius: 50%;
width: 34px; height: 34px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: var(--ink-soft); transition: border-color 0.2s, color 0.2s;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { width: 16px; height: 16px; }
/* ── DAY MARKER CHIP ─────────────────────────────── */
.day-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px; border-radius: 999px;
background: rgba(224,155,62,0.12);
backdrop-filter: blur(12px);
border: 1px solid rgba(224,155,62,0.25);
font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--accent); font-weight: 600;
}
.day-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* ── HERO — full-screen scroll-snap ─────────────── */
.hero {
position: relative; height: 100vh; min-height: 600px;
display: flex; flex-direction: column; justify-content: flex-end;
overflow: hidden;
cursor: none;
}
.hero-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
background-image: url('https://cdn.shopify.com/s/files/1/0015/4117/7456/files/room-hotel_lobby-2017143-116-0.jpg?v=1775081808');
transform: scale(1.06);
transition: transform 0.1s linear;
}
.hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.20) 60%, transparent 100%);
}
.hero-glass {
position: relative; z-index: 2;
margin: 0 2rem 3.5rem;
padding: 2.5rem 2.5rem 2rem;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
background: rgba(10,10,10,0.55);
border: 1px solid rgba(245,241,232,0.10);
border-radius: 4px;
max-width: 680px;
}
.hero-eyebrow { margin-bottom: 1rem; }
.hero-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 300;
line-height: 1.05; letter-spacing: -0.01em;
color: var(--ink); margin-bottom: 0.75rem;
}
.hero-title em { font-style: italic; color: var(--accent); }
.hero-sub {
font-size: 0.9rem; color: var(--ink-soft); letter-spacing: 0.04em;
margin-bottom: 1.5rem; line-height: 1.5;
}
.hero-cta {
display: inline-block;
padding: 12px 28px; border-radius: 2px;
background: var(--accent); color: #0a0a0a;
font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
text-decoration: none; transition: background 0.2s, transform 0.15s;
}
.hero-cta:hover { background: var(--accent-light); transform: translateY(-1px); }
.drag-cursor {
position: fixed; width: 64px; height: 64px; border-radius: 50%;
background: var(--accent-glow); backdrop-filter: blur(4px);
border: 1px solid rgba(224,155,62,0.4);
display: flex; align-items: center; justify-content: center;
pointer-events: none; z-index: 9999; opacity: 0;
transform: translate(-50%, -50%);
font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--accent); transition: opacity 0.2s;
}
/* ── SECTION SCAFFOLD ────────────────────────────── */
section { padding: 6rem 2rem; max-width: 1200px; margin: 0 auto; }
.section-eyebrow {
font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--accent); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 12px;
}
.section-eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--line); }
h2.section-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; color: var(--ink);
margin-bottom: 2rem;
}
/* ── WHY THIS PICK ───────────────────────────────── */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
@media (max-width: 768px) { .why-grid { grid-template-columns: 1fr; } }
.why-body p {
font-size: 1.05rem; line-height: 1.75; color: var(--ink-soft);
margin-bottom: 1.25rem;
}
.why-pullquote {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 300;
font-style: italic; line-height: 1.3; color: var(--ink);
border-left: 2px solid var(--accent); padding-left: 1.5rem;
margin: 0;
}
/* ── DETAIL SHOTS ────────────────────────────────── */
.shots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 768px) { .shots-grid { grid-template-columns: 1fr; } }
.shot-card {
border-radius: 3px; overflow: hidden;
backdrop-filter: blur(16px);
background: var(--card-bg);
border: 1px solid var(--line);
transition: transform 0.3s, box-shadow 0.3s;
}
.shot-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
.shot-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.shot-label {
padding: 1rem 1.25rem;
font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-faint);
}
/* ── ARCHIVE ─────────────────────────────────────── */
.archive-section { padding: 6rem 0; overflow: hidden; max-width: 100%; }
.archive-header { padding: 0 2rem; margin-bottom: 2rem; }
.archive-scroll {
display: flex; gap: 1.5rem; overflow-x: auto; padding: 1rem 2rem 2rem;
scrollbar-width: thin; scrollbar-color: var(--accent) transparent;
scroll-snap-type: x mandatory;
}
.archive-scroll::-webkit-scrollbar { height: 3px; }
.archive-scroll::-webkit-scrollbar-track { background: transparent; }
.archive-scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }
.archive-card {
flex: 0 0 240px; border-radius: 3px; overflow: hidden;
background: var(--card-bg); border: 1px solid var(--line);
scroll-snap-align: start;
transition: transform 0.25s, border-color 0.25s;
cursor: pointer;
text-decoration: none;
}
.archive-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.archive-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.archive-meta { padding: 0.9rem 1rem; }
.archive-week { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.archive-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 0.95rem; color: var(--ink); line-height: 1.35; }
.archive-vendor { font-size: 0.68rem; color: var(--ink-faint); margin-top: 4px; }
/* ── SUBSCRIBE ───────────────────────────────────── */
.subscribe-panel {
backdrop-filter: blur(16px);
background: var(--card-bg);
border: 1px solid var(--line);
border-radius: 4px;
padding: 3.5rem; text-align: center; max-width: 560px; margin: 0 auto;
}
.subscribe-panel h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.25rem; font-weight: 300; margin-bottom: 1rem; }
.subscribe-panel p { color: var(--ink-soft); margin-bottom: 2rem; line-height: 1.6; }
.subscribe-form { display: flex; gap: 0; max-width: 420px; margin: 0 auto; }
.subscribe-form input {
flex: 1; padding: 12px 16px;
background: rgba(245,241,232,0.06); border: 1px solid var(--line);
border-right: none; border-radius: 2px 0 0 2px;
color: var(--ink); font-size: 0.9rem; outline: none;
transition: border-color 0.2s;
}
.subscribe-form input::placeholder { color: var(--ink-faint); }
.subscribe-form input:focus { border-color: var(--accent); }
.subscribe-form button {
padding: 12px 24px; background: var(--accent); color: #0a0a0a;
border: none; border-radius: 0 2px 2px 0;
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
cursor: pointer; transition: background 0.2s; white-space: nowrap;
}
.subscribe-form button:hover { background: var(--accent-light); }
.subscribe-msg { margin-top: 1rem; font-size: 0.85rem; color: var(--accent); min-height: 1.2em; }
/* ── FOOTER ──────────────────────────────────────── */
footer {
border-top: 1px solid var(--line);
padding: 3rem 2rem;
display: flex; flex-direction: column; align-items: center; gap: 1rem;
text-align: center;
}
.footer-logo { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.footer-logo span { color: var(--accent); }
.footer-links { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.footer-links a { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--accent); }
footer small { font-size: 0.7rem; color: var(--ink-faint); }
</style>
<!-- Meta Pixel — INERT until set-fb-pixel.sh is run (does NOT load fbevents.js or hit Meta until flipped) -->
<script>
(function(){
var PIXEL_ID = '{{FACEBOOK_PIXEL_ID}}';
// Inert until flipped — the brace check prevents BOTH the loader IIFE
// AND the init call from running, so fbevents.js is never fetched.
if (PIXEL_ID.indexOf('{{') !== -1) return;
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', PIXEL_ID);
fbq('track', 'PageView');
})();
</script>
<!-- noscript fallback is added by set-fb-pixel.sh on flip (omitted here to avoid unflipped img phone-home) -->
<!-- End Meta Pixel -->
<!-- corner-nav disabled (UL-hamburger rebuild) -->
</head>
<body>
<!-- Theme toggle (theme1 / theme2) — query-param-gated preview surface
(Steve 2026-05-29). ?theme=2 in URL flips to theme2 and persists in
localStorage. Toggle UI hidden until theme2 mode active. Same key
('wallco-page-theme') as wallco.ai for cross-site continuity. -->
<script>
(function(){
var qs = new URLSearchParams(location.search);
var fromUrl = qs.get('theme');
var saved = null; try { saved = localStorage.getItem('wallco-page-theme'); } catch(e){}
var theme = null;
if (fromUrl === '2' || fromUrl === 'theme2') theme = 'theme2';
else if (fromUrl === '1' || fromUrl === 'theme1') theme = 'theme1';
else if (saved === 'theme2' || saved === 'theme1') theme = saved;
if (theme) {
document.documentElement.setAttribute('data-page-theme', theme);
if (fromUrl) { try { localStorage.setItem('wallco-page-theme', theme); } catch(e){} }
}
})();
</script>
<style id="page-theme-css-fleet">
[data-page-theme="theme2"] body{
background:#fff !important; color:#0a0a0a !important;
}
[data-page-theme="theme2"] h1,
[data-page-theme="theme2"] h2,
[data-page-theme="theme2"] h3{ letter-spacing:-0.01em; font-weight:500; }
[data-page-theme="theme2"] .card,
[data-page-theme="theme2"] [class*="card"]{
background:#fafafa !important; border:1px solid #e5e5e5 !important; box-shadow:none !important;
}
#page-theme-toggle{ display:none; }
[data-page-theme] #page-theme-toggle{ display:inline-flex; }
#page-theme-toggle{
position:fixed; top:96px; right:14px; z-index:90;
gap:0; align-items:center;
background:rgba(255,255,255,.92); border:1px solid #d8d2c5;
border-radius:999px; padding:3px; backdrop-filter:blur(6px);
box-shadow:0 2px 10px rgba(0,0,0,.08);
font:600 11px ui-sans-serif,system-ui; letter-spacing:.06em; text-transform:uppercase;
}
#page-theme-toggle button{
border:0; background:transparent; color:#5a5048; cursor:pointer;
padding:6px 14px; border-radius:999px; font:inherit; transition:all .15s;
}
#page-theme-toggle button[aria-pressed="true"]{ background:#1a1714; color:#faf7f2; }
#page-theme-toggle button:hover:not([aria-pressed="true"]){ color:#1a1714; }
</style>
<div id="page-theme-toggle" role="group" aria-label="Page theme">
<button type="button" data-theme="theme1" aria-pressed="false">Theme 1</button>
<button type="button" data-theme="theme2" aria-pressed="false">Theme 2</button>
</div>
<script>
(function(){
var cur = document.documentElement.getAttribute('data-page-theme') || 'theme1';
var btns = document.querySelectorAll('#page-theme-toggle button');
function sync(t){ btns.forEach(function(b){ b.setAttribute('aria-pressed', b.dataset.theme === t ? 'true' : 'false'); }); }
sync(cur);
btns.forEach(function(b){
b.addEventListener('click', function(){
var t = b.dataset.theme;
document.documentElement.setAttribute('data-page-theme', t);
try { localStorage.setItem('wallco-page-theme', t); } catch(e){}
sync(t);
});
});
})();
</script>
<!-- Anti-flash inline theme script -->
<script>
(function(){
var t = localStorage.getItem('ff-theme') || 'dark';
document.documentElement.setAttribute('data-theme', t);
})();
</script>
<!-- Drag cursor -->
<div class="drag-cursor" id="dragCursor">DRAG</div>
<!-- Header -->
<header class="header">
<a href="/" class="header-brand">
<div class="brand-dot"></div>
<span class="brand-name">Fabric<span>Friday</span></span>
</a>
<nav class="header-nav">
<a href="#picks">Archive</a>
<a href="#subscribe">Subscribe</a>
<a href="https://designerwallcoverings.com" target="_blank" rel="noopener noreferrer">Shop DW</a>
<button class="theme-toggle" id="themeToggle" aria-label="Toggle dark/light mode">
<!-- Sun -->
<svg id="iconSun" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="4"/><line x1="12" y1="2" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="22"/>
<line x1="4.22" y1="4.22" x2="6.34" y2="6.34"/><line x1="17.66" y1="17.66" x2="19.78" y2="19.78"/>
<line x1="2" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="22" y2="12"/>
<line x1="4.22" y1="19.78" x2="6.34" y2="17.66"/><line x1="17.66" y1="6.34" x2="19.78" y2="4.22"/>
</svg>
<!-- Moon -->
<svg id="iconMoon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" style="display:none">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
</svg>
</button>
</nav>
</header>
<!-- SECTION 1: HERO -->
<section class="hero" id="hero">
<div class="hero-bg" id="heroBg"></div>
<div class="hero-overlay"></div>
<div class="hero-glass">
<div class="hero-eyebrow">
<span class="day-chip">Friday · 2026-05-08</span>
</div>
<h1 class="hero-title">This Week's<br><em>Fabric Pick</em></h1>
<p class="hero-sub">Entoto Stripe — Ivory & Flax Beige • Breckenridge Collection • Hand-loomed Ethiopian cotton, 55” wide</p>
<a href="https://designerwallcoverings.com/products/dwkk-g60746833#sample" class="hero-cta" target="_blank" rel="noopener noreferrer">Order Memo Sample (free)</a>
</div>
</section>
<!-- SECTION 2: WHY THIS PICK -->
<section id="why">
<div class="section-eyebrow">Editorial</div>
<div class="why-grid">
<div class="why-body">
<h2 class="section-title">Why This Pick</h2>
<p>The Entoto Stripe arrives from the Breckenridge collection with a story rooted in East African craft tradition. Woven in the highlands outside Addis Ababa, each stripe is the product of a hand-tensioned loom where the ivory warp threads are carefully counted against a warm flax weft — a technique unchanged across three generations of the same weaving family.</p>
<p>What sets this fabric apart is the intentional irregularity in the stripe width. At exactly 55 inches, it's built for generous upholstery yardage, yet the optical weight reads far lighter than its cotton-heavy content suggests. The ivory-to-flax color story functions as a genuine neutral: neither too warm for a coastal room nor too cool for a darker library scheme.</p>
<p>Designer Wallcoverings carries full bolt and memo sample — one free, shipped within two business days. Trade pricing is available immediately on account application.</p>
</div>
<blockquote class="why-pullquote">
"The best fabrics carry their geography in every thread. This one smells like altitude and morning light."
</blockquote>
</div>
</section>
<!-- SECTION 3: THREE DETAIL SHOTS -->
<section id="shots">
<div class="section-eyebrow">Detail</div>
<h2 class="section-title">Three Ways of Seeing</h2>
<div class="shots-grid">
<div class="shot-card">
<img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/room-hotel_lobby-2017143-116-0.jpg?v=1775081808"
alt="Room install — Entoto Stripe in a hotel lobby setting" loading="lazy">
<div class="shot-label">Room Install</div>
</div>
<div class="shot-card">
<img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/2017143_116_bf8f13ed-4c49-44bf-9dc7-fb8ac9aebb92.jpg?v=1726797466"
alt="Macro weave — close-up textile detail of Entoto Stripe" loading="lazy">
<div class="shot-label">Macro Weave</div>
</div>
<div class="shot-card">
<img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/room-living_room-Entoto-Stripe---Ivory-Flax-Beige-By-Lee.png?v=1775100774"
alt="Scale detail — Entoto Stripe in a living room context" loading="lazy">
<div class="shot-label">Scale Detail</div>
</div>
</div>
</section>
<!-- SECTION 4: ARCHIVE -->
<section class="archive-section" id="picks">
<div class="archive-header">
<div class="section-eyebrow">Past Picks</div>
<h2 class="section-title" style="margin-bottom:0.5rem">Every Friday, One Fabric</h2>
<p style="color:var(--ink-faint); font-size:0.85rem; margin-bottom:1rem;">Scroll to browse twelve weeks of previous features.</p>
</div>
<div class="archive-scroll" id="archiveScroll"></div>
</section>
<!-- SECTION 5: SUBSCRIBE -->
<section id="subscribe">
<div class="section-eyebrow">Never Miss a Friday</div>
<div class="subscribe-panel">
<h2>The Friday Fabric</h2>
<p>One email. One exceptional fabric. Every Friday morning. Free memo sample always available for every pick.</p>
<form class="subscribe-form" id="subForm">
<input type="email" id="subEmail" placeholder="your@email.com" autocomplete="email" required>
<button type="submit">Subscribe</button>
</form>
<div class="subscribe-msg" id="subMsg"></div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer-logo">Fabric<span>Friday</span> · by Designer Wallcoverings</div>
<nav class="footer-links">
<a href="https://designerwallcoverings.com" target="_blank" rel="noopener noreferrer">Shop DW</a>
<a href="https://designerwallcoverings.com/pages/trade" target="_blank" rel="noopener noreferrer">Trade Program</a>
<a href="mailto:info@fabricfriday.com">info@fabricfriday.com</a>
<a href="#subscribe">Subscribe</a>
</nav>
<small>© 2026 Designer Wallcoverings — fabricfriday.com — All images © respective vendors via DW catalog</small>
</footer>
<script>
// ── Theme toggle ──────────────────────────────────
const root = document.documentElement;
const btn = document.getElementById('themeToggle');
const sun = document.getElementById('iconSun');
const moon = document.getElementById('iconMoon');
function applyTheme(t) {
root.setAttribute('data-theme', t);
localStorage.setItem('ff-theme', t);
if (t === 'dark') { sun.style.display = ''; moon.style.display = 'none'; }
else { sun.style.display = 'none'; moon.style.display = ''; }
}
applyTheme(root.getAttribute('data-theme') || 'dark');
btn.addEventListener('click', () => applyTheme(root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'));
// ── Parallax drag cursor ──────────────────────────
const cursor = document.getElementById('dragCursor');
const hero = document.getElementById('hero');
const heroBg = document.getElementById('heroBg');
let mouseX = 0, mouseY = 0;
hero.addEventListener('mouseenter', () => cursor.style.opacity = '1');
hero.addEventListener('mouseleave', () => cursor.style.opacity = '0');
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX; mouseY = e.clientY;
cursor.style.left = mouseX + 'px';
cursor.style.top = mouseY + 'px';
// Parallax: move bg slightly opposite to cursor
const rect = hero.getBoundingClientRect();
if (rect.height > 0) {
const rx = (e.clientX - rect.left) / rect.width - 0.5;
const ry = (e.clientY - rect.top) / rect.height - 0.5;
heroBg.style.transform = `scale(1.06) translate(${rx * -18}px, ${ry * -12}px)`;
}
});
// ── Archive ───────────────────────────────────────
const archive = [
{ handle: "dwkk-g7057da14", title: "Brink — Delft Indigo Chenille", vendor: "Designer Wallcovering", img: "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/GWF-3733_151_8c242f7c-5c7d-4f82-878d-09235ca6ae41.jpg?v=1726797466", week: "Feb 6" },
{ handle: "dwkk-ga47c675d", title: "Blyth Weave — Navy Herringbone", vendor: "Designer Wallcovering", img: "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/2020108_50_2afea9fc-ad82-4485-8dce-e1fed6676b2a.jpg?v=1726797466", week: "Feb 13" },
{ handle: "dwkk-g778c767f", title: "Seaford Weave — Diamond Ivory", vendor: "Designer Wallcovering", img: "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/2020106_1_04b30aa2-2cba-4f92-94f6-f4d200a15cfe.jpg?v=1726797466", week: "Feb 20" },
{ handle: "dwkk-g37826aec", title: "Maldon Weave — Fog Grey", vendor: "Designer Wallcovering", img: "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/2020102_11_7d6fa794-8480-4b38-8ee5-1b0c8f53b22e.jpg?v=1726797466", week: "Feb 27" },
{ handle: "dwkk-gdc6143f9", title: "Bale — Radicchio Bouclé", vendor: "Designer Wallcovering", img: "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/2019155_710_95e89ba7-f723-451b-8611-47aa1d4aa06e.jpg?v=1726797466", week: "Mar 6" },
{ handle: "dwkk-gb60bfc9c", title: "Levens Velvet — Leaf Green", vendor: "Designer Wallcovering", img: "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/2019118_3_104d33bf-4a11-4708-b90f-0d274e118a5a.jpg?v=1726797466", week: "Mar 13" },
{ handle: "dwkk-134918", title: "Gemma Velvet — Pacific Turquoise", vendor: "Designer Wallcovering", img: "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/2018148_135_79ba2f07-1ec7-45f0-841c-87b4c84cc2fd.jpg?v=1726797466", week: "Mar 20" },
{ handle: "dwkk-g0933c476", title: "Boutique Floral — Delft Blue Linen", vendor: "Designer Wallcovering", img: "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/2022101_5_060796c6-a8c9-450d-a5b7-c0e35f41109a.jpg?v=1726530286", week: "Mar 27" },
{ handle: "dwkk-ge157df51", title: "Marion Print — Indigo Botanical", vendor: "Designer Wallcovering", img: "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/2020205_50_a98ae134-3d4e-44a9-91a1-1e0e93c34ae7.jpg?v=1726797466", week: "Apr 3" },
{ handle: "dwkk-g21eeb3da", title: "Chinese Lantern — Coral Print", vendor: "Designer Wallcovering", img: "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/2006101_517_86aa6f6e-b809-41ef-903c-7aa4fd878ef5.jpg?v=1726797466", week: "Apr 10" },
{ handle: "dwkk-140832", title: "Danakil Tape — Red/Blue Multi", vendor: "Designer Wallcovering", img: "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/TL10169_965_380212c8-6464-4a24-9792-eae1fc082a0c.jpg?v=1726797466", week: "Apr 17" },
{ handle: "dwkk-140830", title: "Danakil Tape — Blue Slate Braid", vendor: "Designer Wallcovering", img: "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/TL10169_515_db906396-623b-40d9-90e7-6d6e4ebad975.jpg?v=1726797466", week: "Apr 24" }
];
const scroll = document.getElementById('archiveScroll');
archive.forEach(p => {
const a = document.createElement('a');
a.href = `https://designerwallcoverings.com/products/${p.handle}#sample`;
a.target = '_blank'; a.rel = 'noopener noreferrer';
a.className = 'archive-card';
a.innerHTML = `
<img src="${p.img}" alt="${p.title}" loading="lazy" onerror="this.style.background='rgba(224,155,62,0.08)';this.style.minHeight='200px'">
<div class="archive-meta">
<div class="archive-week">${p.week}</div>
<div class="archive-title">${p.title}</div>
<div class="archive-vendor">${p.vendor}</div>
</div>`;
scroll.appendChild(a);
});
// ── Subscribe form ────────────────────────────────
document.getElementById('subForm').addEventListener('submit', async (e) => {
e.preventDefault();
const email = document.getElementById('subEmail').value;
const msg = document.getElementById('subMsg');
try {
const r = await fetch('/api/subscribe', {
method: 'POST', headers: {'Content-Type':'application/json'},
body: JSON.stringify({ email })
});
const d = await r.json();
msg.textContent = d.message || d.error || 'Done.';
} catch(err) {
msg.textContent = 'Something went wrong. Try again.';
}
});
</script>
<script>window.DwHeaderConfig={siteName:"Fabricfriday",accent:"#9B7B4F",navLinks:[{name:'Home',url:'/'},{name:'Collections',url:'#shop'},{name:'About',url:'/about'},{name:'Care',url:'/care.html'},{name:'History',url:'/history.html'}],adminLinks:[{name:'Shopify admin',url:'https://admin.shopify.com',external:true},{name:'Edit hero',url:'#'},{name:'Analytics',url:'#'}]};</script>
<script src="/dw-header.js" defer></script>
</body>
</html>