← back to Textiletuesday
public/index.html
549 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>Textile Tuesday — Every Week, One Remarkable Textile | Designer Wallcoverings</title>
<meta name="description" content="Free memo samples, trade pricing, and specialist guidance. Every Tuesday Designer Wallcoverings spotlights one remarkable textile — weave, linen, grasscloth, and beyond.">
<meta property="og:title" content="Textile Tuesday | Designer Wallcoverings">
<meta property="og:description" content="One remarkable textile, every Tuesday. Free memo samples. Trade service.">
<meta property="og:image" content="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/room-hotel_lobby-2022101-5-0.jpg?v=1775086481">
<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": "Textile Tuesday by Designer Wallcoverings",
"url": "https://textiletuesday.com",
"email": "info@textiletuesday.com",
"sameAs": ["https://designerwallcoverings.com"]
}
</script>
<style>
/* ── TOKENS ──────────────────────────────────────── */
:root {
--bg: #0a0c12;
--ink: #e8edf5;
--ink-soft: rgba(232,237,245,0.70);
--ink-faint: rgba(232,237,245,0.35);
--line: rgba(232,237,245,0.08);
--card-bg: rgba(232,237,245,0.04);
--header-bg: rgba(10,12,18,0.92);
/* Indigo workshop blue — constant */
--accent: #3a5a78;
--accent-light: #5b8ab0;
--accent-mid: #3a5a78;
--accent-dark: #243d54;
--accent-glow: rgba(58,90,120,0.35);
}
[data-theme="light"] {
--bg: #f4f6fa;
--ink: #10181f;
--ink-soft: rgba(16,24,31,0.70);
--ink-faint: rgba(16,24,31,0.40);
--line: rgba(16,24,31,0.10);
--card-bg: rgba(16,24,31,0.04);
--header-bg: rgba(244,246,250,0.92);
}
*, *::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(232,237,245,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-light); }
.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-light); }
.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-light); color: var(--accent-light); }
.theme-toggle svg { width: 16px; height: 16px; }
/* ── DAY CHIP ────────────────────────────────────── */
.day-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px; border-radius: 999px;
background: rgba(58,90,120,0.15);
backdrop-filter: blur(12px);
border: 1px solid rgba(91,138,176,0.30);
font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--accent-light); font-weight: 600;
}
.day-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-light); }
/* ── HERO — editorial magazine split ────────────── */
.hero {
display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh;
}
@media (max-width: 768px) { .hero { grid-template-columns: 1fr; } }
.hero-image-side {
position: relative; overflow: hidden;
}
@media (max-width: 768px) { .hero-image-side { min-height: 60vw; } }
.hero-img-main {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.6s ease;
}
.hero-image-side:hover .hero-img-main { transform: scale(1.04); }
.hero-image-overlay {
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(10,12,18,0.3) 0%, transparent 60%);
}
.hero-text-side {
display: flex; flex-direction: column; justify-content: center;
padding: 5rem 3.5rem; background: var(--bg);
position: relative;
}
.hero-eyebrow { margin-bottom: 2rem; }
.hero-label {
font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
color: var(--ink-faint); margin-bottom: 0.5rem; display: block;
}
.hero-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(2.75rem, 4vw, 4.5rem); font-weight: 300;
line-height: 1.04; color: var(--ink); margin-bottom: 1rem;
}
.hero-title em { font-style: italic; color: var(--accent-light); }
.hero-divider { width: 48px; height: 1px; background: var(--accent); margin: 1.5rem 0; }
.hero-sub { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.65; margin-bottom: 2rem; }
.hero-cta {
display: inline-block; padding: 14px 32px; border-radius: 2px;
border: 1px solid var(--accent); color: var(--accent-light);
font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
text-decoration: none; transition: background 0.2s, color 0.2s;
align-self: flex-start;
}
.hero-cta:hover { background: var(--accent); color: var(--ink); }
/* Weave-detail zoom panel */
.hero-zoom {
position: absolute; bottom: 2rem; right: 2rem;
width: 140px; height: 140px; border-radius: 3px; overflow: hidden;
border: 1px solid var(--line);
backdrop-filter: blur(8px);
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.hero-zoom img { width: 100%; height: 100%; object-fit: cover; }
.hero-zoom-label {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 6px 8px; font-size: 0.58rem; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-faint);
background: rgba(10,12,18,0.7); backdrop-filter: blur(4px);
}
/* ── SECTIONS ────────────────────────────────────── */
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-light); 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 — side-by-side editorial ───────────────── */
.why-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 5rem; 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.4rem, 2.5vw, 1.9rem); font-weight: 300; font-style: italic;
line-height: 1.35; color: var(--ink); border-left: 2px solid var(--accent); padding-left: 1.5rem;
}
/* ── DETAIL SHOTS — macro/wide side by side ──────── */
.shots-magazine {
display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto;
gap: 1.5rem;
}
@media (max-width: 768px) { .shots-magazine { grid-template-columns: 1fr; } }
.shot-main { grid-row: 1 / 3; }
.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%; object-fit: cover; display: block; }
.shot-main img { aspect-ratio: 3/4; }
.shot-secondary img { aspect-ratio: 4/3; }
.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; color: inherit;
}
.archive-card:hover { transform: translateY(-4px); border-color: var(--accent-light); }
.archive-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; background: var(--card-bg); }
.archive-meta { padding: 0.9rem 1rem; }
.archive-week { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-light); 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; max-width: 420px; margin: 0 auto; }
.subscribe-form input {
flex: 1; padding: 12px 16px;
background: rgba(232,237,245,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: var(--ink);
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); color: #0a0c12; }
.subscribe-msg { margin-top: 1rem; font-size: 0.85rem; color: var(--accent-light); 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-light); }
.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-light); }
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 -->
</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>
<script>
(function(){
var t = localStorage.getItem('tt-theme') || 'dark';
document.documentElement.setAttribute('data-theme', t);
})();
</script>
<header class="header">
<a href="/" class="header-brand">
<div class="brand-dot"></div>
<span class="brand-name">Textile<span>Tuesday</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">
<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>
<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 — editorial magazine split -->
<section class="hero" id="hero" style="padding:0; max-width:100%; margin:0;">
<div class="hero-image-side">
<img class="hero-img-main"
src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/room-hotel_lobby-2022101-5-0.jpg?v=1775086481"
alt="Boutique Floral in a hotel lobby room setting">
<div class="hero-image-overlay"></div>
</div>
<div class="hero-text-side">
<div class="hero-eyebrow">
<span class="day-chip">Tuesday · 2026-05-05</span>
</div>
<span class="hero-label">This Week's Textile</span>
<h1 class="hero-title">Boutique<br><em>Floral</em></h1>
<div class="hero-divider"></div>
<p class="hero-sub">Delft Dark Blue — Sarah Bartholomew. Pure botanical linen woven at 54 inches, with a hand-drawn floral motif that navigates the line between antique document and living garden wall.</p>
<a href="https://designerwallcoverings.com/products/dwkk-g0933c476#sample" class="hero-cta" target="_blank" rel="noopener noreferrer">Order Memo Sample (free)</a>
<!-- Weave-detail zoom -->
<div class="hero-zoom">
<img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/2022101_5_060796c6-a8c9-450d-a5b7-c0e35f41109a.jpg?v=1726530286" alt="Macro weave detail of Boutique Floral linen">
<div class="hero-zoom-label">Macro Detail</div>
</div>
</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>Sarah Bartholomew's botanical linen is the rare textile that demands to be read. Every repeat tells a story assembled from pressed specimens — field botanicals rendered at life scale, inked in a Delft-adjacent blue that refuses to read as simply navy. At certain lights it's almost teal; at dusk, it deepens to near-black.</p>
<p>The linen substrate is where craft discipline shows. The base cloth is Belgian, woven to a gauge that allows the printed design to float rather than sink into the fiber. That tactile clarity — the sense of a drawing sitting on a surface rather than soaking in — is a signature of proper botanical printing on quality linen.</p>
<p>For trade clients, the sample program from Designer Wallcoverings means you can study the drape and hand at scale before committing to drapery or upholstery yardage. The free memo is here for a reason — this textile earns its invoice only once you've spent time with it.</p>
</div>
<blockquote class="why-pullquote">
"Good botanical linen carries the drafting room and the greenhouse at once. You can smell both in this one."
</blockquote>
</div>
</section>
<!-- SECTION 3: DETAIL SHOTS — magazine layout -->
<section id="shots">
<div class="section-eyebrow">Studio</div>
<h2 class="section-title">Three Scales of Looking</h2>
<div class="shots-magazine">
<div class="shot-card shot-main">
<img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/room-living_room-2022101-5-0.png?v=1775100774"
alt="Living room install — Boutique Floral linen drapery" loading="lazy">
<div class="shot-label">Wide Room Install</div>
</div>
<div class="shot-card shot-secondary">
<img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/2022101_5_060796c6-a8c9-450d-a5b7-c0e35f41109a.jpg?v=1726530286"
alt="Macro weave — close-up textile grain of Boutique Floral" loading="lazy">
<div class="shot-label">Macro Weave</div>
</div>
<div class="shot-card shot-secondary">
<img src="https://cdn.shopify.com/s/files/1/0015/4117/7456/files/room-hotel_lobby-2022101-5-0.jpg?v=1775086481"
alt="Hotel lobby scale — Boutique Floral full installation" loading="lazy">
<div class="shot-label">Contract Scale</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 Tuesday, One Textile</h2>
<p style="color:var(--ink-faint); font-size:0.85rem; margin-bottom:1rem;">Twelve weeks of features, available on demand as free memo samples.</p>
</div>
<div class="archive-scroll" id="archiveScroll"></div>
</section>
<!-- SECTION 5: SUBSCRIBE -->
<section id="subscribe">
<div class="section-eyebrow">The Weekly Brief</div>
<div class="subscribe-panel">
<h2>The Tuesday Textile</h2>
<p>One email every Tuesday morning. One textile chosen for its craft, provenance, or sheer audacity. Free memo sample always included 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">Textile<span>Tuesday</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@textiletuesday.com">info@textiletuesday.com</a>
<a href="#subscribe">Subscribe</a>
</nav>
<small>© 2026 Designer Wallcoverings — textiletuesday.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('tt-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'));
// Archive
const archive = [
{ handle: "eatonville-faux-linen-durable-walls-xwt-53320", title: "Eatonville Faux Linen — Natural", vendor: "Hollywood Wallcoverings", img: "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Indienne_Agra_18310_Roomshot_Web_LR-medium-two-thirds.jpg?v=17756", week: "Feb 3" },
{ handle: "lenox-faux-linen-finish-durable-walls-xwf-52283", title: "Lenox Faux Linen — Durable", vendor: "Hollywood Wallcoverings", img: "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Indienne_Agra_18310_Roomshot_Web_LR-og_454a2c91-eb5e-448a-a0a0-51a5edd39c0d.jpg?v=1726527977", week: "Feb 10" },
{ handle: "baja-grasscloth-vinyl-wallpaper-xbg-44017", title: "Baja Grasscloth Vinyl", vendor: "Hollywood Wallcoverings", img: "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Indienne_Poona_18300_Roomshot_Web_LR-og_2018d80a-6abd-474c-94e2-11ae8e06b5c9.jpg?v=1726528019", week: "Feb 17" },
{ handle: "le-embossed-faux-grasscloth-xgr-6215", title: "Embossed Faux Grasscloth", vendor: "Hollywood Wallcoverings", img: "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/EssentialsLuxor_Horus_19436_Roomshot_Web_LR-og_f71ec1c4-c1eb-4a62-8ff1-18d47f9cb1b3.jpg?v=1726527783", week: "Feb 24" },
{ handle: "faux-wild-rice-fwr-9373", title: "Faux Wild Rice Weave", vendor: "Hollywood Wallcoverings", img: "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Indienne_Poona_18300_Roomshot_Web_LR-medium-two-thirds_7fe2f949-1a67-4e36-bfff-b31bfe82d37a.jpg?v=1726528019", week: "Mar 3" },
{ 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: "Mar 10" },
{ 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: "Mar 17" },
{ 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 24" },
{ 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: "Mar 31" },
{ 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: "Apr 7" },
{ handle: "canal-texture-durable-walls-xwd-52104", title: "Canal Texture — Durable Weave", vendor: "Hollywood Wallcoverings", img: "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Indienne_Agra_18310_Mood_Web_LR-hero_ba3526ae-673b-4a34-912d-e41a5d8eb5e2.jpg?v=1726527977", week: "Apr 14" },
{ 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: "Apr 22" }
];
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(58,90,120,0.10)';this.style.minHeight='180px'">
<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
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 { msg.textContent = 'Something went wrong. Try again.'; }
});
</script>
<script>window.DwHeaderConfig={siteName:"Textiletuesday",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>