← back to Wallpaperwednesday
public/index.html
653 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>Wallpaper Wednesday — Every Week, Today's Pick | Designer Wallcoverings</title>
<meta name="description" content="Free memo samples, trade pricing, and expert service. Every Wednesday Designer Wallcoverings reveals one wallpaper pick — botanical, textural, or boldly graphic.">
<meta property="og:title" content="Wallpaper Wednesday | Designer Wallcoverings">
<meta property="og:description" content="One wallpaper, every Wednesday. Free memo samples. Trade service.">
<meta property="og:image" content="https://wallpaperwednesday.com/hero-bg.jpg">
<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": "Wallpaper Wednesday by Designer Wallcoverings",
"url": "https://wallpaperwednesday.com",
"email": "info@wallpaperwednesday.com",
"sameAs": ["https://designerwallcoverings.com"]
}
</script>
<style>
/* ── TOKENS ──────────────────────────────────────── */
:root {
--bg: #090d09;
--ink: #e8f0e8;
--ink-soft: rgba(232,240,232,0.70);
--ink-faint: rgba(232,240,232,0.35);
--line: rgba(232,240,232,0.08);
--card-bg: rgba(232,240,232,0.04);
--header-bg: rgba(9,13,9,0.92);
/* Botanical green — constant */
--accent: #5a7a52;
--accent-light: #8ab080;
--accent-mid: #5a7a52;
--accent-dark: #3a5232;
--accent-glow: rgba(90,122,82,0.30);
}
[data-theme="light"] {
--bg: #f3f7f2;
--ink: #0d1a0d;
--ink-soft: rgba(13,26,13,0.70);
--ink-faint: rgba(13,26,13,0.40);
--line: rgba(13,26,13,0.10);
--card-bg: rgba(13,26,13,0.04);
--header-bg: rgba(243,247,242,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,240,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-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(90,122,82,0.12);
backdrop-filter: blur(12px);
border: 1px solid rgba(138,176,128,0.28);
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 — vertical scroll + pinned reveal ──────── */
.hero-wrapper {
position: relative; height: 100vh; min-height: 600px;
overflow: hidden;
}
.hero-bg {
position: absolute; inset: 0;
background-image: url('/images/agra-3.jpg');
background-size: cover; background-position: center;
transform: scale(1.08);
transition: transform 0.05s linear;
}
.hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(to right, rgba(9,13,9,0.88) 0%, rgba(9,13,9,0.30) 55%, rgba(9,13,9,0.05) 100%);
}
.hero-content {
position: absolute; inset: 0; display: flex; align-items: center;
padding: 0 4rem;
}
.hero-glass {
max-width: 540px;
padding: 3rem;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
background: rgba(9,13,9,0.55);
border: 1px solid rgba(232,240,232,0.10);
border-radius: 4px;
}
.hero-eyebrow { margin-bottom: 1.25rem; }
.hero-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(3rem, 5.5vw, 5rem); font-weight: 300;
line-height: 0.97; color: var(--ink); margin-bottom: 1rem;
}
.hero-title em { font-style: italic; color: var(--accent-light); display: block; }
.hero-sub { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.65; margin-bottom: 2rem; }
.hero-cta {
display: inline-block; padding: 13px 30px; border-radius: 2px;
background: var(--accent); color: var(--ink);
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); }
/* Pinned horizontal reveal panel — appears on scroll */
.reveal-strip {
position: sticky; top: 60px; z-index: 10;
background: var(--card-bg);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 1.5rem;
padding: 0.75rem 2rem;
overflow: hidden;
}
.reveal-strip-label { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-light); white-space: nowrap; flex-shrink: 0; }
.reveal-strip-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.1rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reveal-strip-vendor { font-size: 0.7rem; color: var(--ink-faint); margin-left: auto; white-space: nowrap; flex-shrink: 0; }
.reveal-strip a {
padding: 7px 18px; border: 1px solid var(--accent); color: var(--accent-light); border-radius: 2px;
font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
white-space: nowrap; flex-shrink: 0; transition: background 0.2s;
}
.reveal-strip a:hover { background: var(--accent); color: var(--ink); }
/* ── 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 ─────────────────────────────────────────── */
.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.5rem, 2.8vw, 2.1rem); font-weight: 300; font-style: italic;
line-height: 1.3; color: var(--ink); border-left: 2px solid var(--accent); padding-left: 1.5rem;
}
/* ── 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; 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,240,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: 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); }
.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>
<!-- corner-nav disabled (UL-hamburger rebuild) -->
<style id="ns-modal-css">
/* ── Contact modal (.ns-modal) — added by fanout-12 ── */
.ns-modal {
display: none;
position: fixed; inset: 0; z-index: 1000;
background: rgba(10,10,10,0.78);
backdrop-filter: blur(6px);
align-items: center; justify-content: center;
padding: 24px;
font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
}
.ns-modal.show { display: flex; }
.ns-modal-card {
position: relative;
background: #f5f1e8;
color: #0a0a0a;
width: 100%; max-width: 480px;
padding: 36px 32px 32px;
border-radius: 4px;
box-shadow: 0 30px 80px rgba(0,0,0,0.55);
animation: nsModalIn 220ms cubic-bezier(.2,.7,.2,1);
}
@keyframes nsModalIn { from { opacity:0; transform: translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
.ns-modal-card .close-x {
position: absolute; top: 10px; right: 12px;
width: 32px; height: 32px;
background: transparent; border: 0; cursor: pointer;
font-size: 22px; line-height: 1; color: #6e6e68;
}
.ns-modal-card .close-x:hover { color: #0a0a0a; }
.ns-modal-card h3 {
margin: 0 0 4px;
font: 300 22px/1.2 -apple-system, "SF Pro Display", system-ui, sans-serif;
letter-spacing: -0.005em;
color: #0a0a0a;
}
.ns-modal-card .sub {
margin: 0 0 22px;
font: 13px/1.45 -apple-system, "SF Pro Text", system-ui, sans-serif;
color: #6e6e68;
letter-spacing: 0.005em;
}
.ns-actions { display: flex; flex-direction: column; gap: 10px; }
.ns-action {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px;
background: #ffffff;
border: 1px solid rgba(10,10,10,0.08);
border-radius: 3px;
color: #0a0a0a !important;
text-decoration: none !important;
font: 400 14px/1.3 -apple-system, "SF Pro Text", system-ui, sans-serif;
cursor: pointer;
}
.ns-action:hover { background: #fffdf7; border-color: rgba(10,10,10,0.18); }
.ns-action .ico {
flex-shrink: 0;
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(10,10,10,0.04);
border-radius: 50%;
font-size: 18px;
}
.ns-action .txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ns-action .txt b { font-weight: 500; font-size: 14px; color: #0a0a0a; }
.ns-action .txt span {
font-weight: 400; font-size: 12px; color: #6e6e68;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 480px) {
.ns-modal { padding: 14px; }
.ns-modal-card { padding: 28px 22px 22px; }
}
[data-theme="dark"] .ns-modal-card { background: #14110c; color: #f5f1e8; }
[data-theme="dark"] .ns-modal-card h3 { color: #f5f1e8; }
[data-theme="dark"] .ns-modal-card .sub { color: #a39c8b; }
[data-theme="dark"] .ns-action { background: rgba(245,241,232,0.04); border-color: rgba(245,241,232,0.10); color: #f5f1e8 !important; }
[data-theme="dark"] .ns-action:hover { background: rgba(245,241,232,0.08); border-color: rgba(245,241,232,0.22); }
[data-theme="dark"] .ns-action .ico { background: rgba(245,241,232,0.08); }
[data-theme="dark"] .ns-action .txt b { color: #f5f1e8; }
[data-theme="dark"] .ns-action .txt span { color: #a39c8b; }
</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('ww-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">Wallpaper<span>Wednesday</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>
<!-- Pinned reveal strip (shows product summary while reading) -->
<div class="reveal-strip">
<span class="reveal-strip-label">Wednesday · 2026-05-06</span>
<span class="reveal-strip-title">Agra Okra — Indienne</span>
<span class="reveal-strip-vendor">Designer Wallcovering</span>
<a href="https://designerwallcoverings.com/products/agra-okra-arte-international#sample" target="_blank" rel="noopener noreferrer">Free Memo</a>
</div>
<!-- SECTION 1: HERO — full-screen with left-anchored glass panel -->
<div class="hero-wrapper" id="hero">
<div class="hero-bg" id="heroBg"></div>
<div class="hero-overlay"></div>
<div class="hero-content">
<div class="hero-glass">
<div class="hero-eyebrow">
<span class="day-chip">Wednesday · 2026-05-06</span>
</div>
<h1 class="hero-title">Today's<br><em>Wallpaper Pick</em></h1>
<p class="hero-sub">Agra Okra — Indienne Collection. Hand-blocked botanical on non-woven substrate — 200 years of Dutch block-print tradition, rewoven for today's rooms.</p>
<a href="https://designerwallcoverings.com/products/agra-okra-arte-international#sample" class="hero-cta" target="_blank" rel="noopener noreferrer">Order Memo Sample (free)</a>
</div>
</div>
</div>
<!-- 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>Agra Okra comes from the Indienne collection — a reference to the centuries-old practice of Dutch and French houses commissioning block-print designs from Indian artisans for the European market. What Indienne now means today is something more considered: the original archive pattern has been digitally redrawn and translated to a non-woven substrate that can be dry-stripped in a single sheet without soaking.</p>
<p>The color is the argument for Agra Okra. "Okra" is not the vegetable's green but a reference to an archaic textile term for a warm amber-ochre — the color that ochre takes when thinned to near-transparency over a cream ground. The result in a room is sunlight that didn't need to show up: warmth already baked into the wall itself.</p>
<p>From Designer Wallcoverings, trade accounts receive net pricing and full rollage. The free memo sample arrives rolled, not folded, so the hand is preserved at shipping. The full roll covers a standard single-drop of 10.05 metres.</p>
</div>
<blockquote class="why-pullquote">
"There are wallpapers that decorate and wallpapers that transform. Agra Okra transforms. The room it touches is no longer the same room."
</blockquote>
</div>
</section>
<!-- SECTION 3: DETAIL SHOTS -->
<section id="shots">
<div class="section-eyebrow">Detail</div>
<h2 class="section-title">Three Scales of the Pattern</h2>
<div class="shots-grid">
<div class="shot-card">
<img src="/images/agra-1.jpg"
alt="Room install — Agra Okra in a full room setting" loading="lazy">
<div class="shot-label">Room Install</div>
</div>
<div class="shot-card">
<img src="/images/agra-langsat-arte.jpg"
alt="Wide angle — Agra Okra full-wall installation" loading="lazy">
<div class="shot-label">Wide Angle</div>
</div>
<div class="shot-card">
<img src="/images/agra-3.jpg"
alt="Mood board — Agra Okra color and material story" loading="lazy">
<div class="shot-label">Mood Study</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 Wednesday, One Wallpaper</h2>
<p style="color:var(--ink-faint); font-size:0.85rem; margin-bottom:1rem;">Twelve weeks of features. Every pick comes with a free memo sample from Designer Wallcoverings.</p>
</div>
<div class="archive-scroll" id="archiveScroll"></div>
</section>
<!-- SECTION 5: SUBSCRIBE -->
<section id="subscribe">
<div class="section-eyebrow">Never Miss a Wednesday</div>
<div class="subscribe-panel">
<h2>The Wednesday Wallpaper</h2>
<p>One email. One wallpaper. Every Wednesday morning — with a direct link to request the free memo sample. No catalog browsing required.</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">Wallpaper<span>Wednesday</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@wallpaperwednesday.com">info@wallpaperwednesday.com</a>
<a href="#subscribe">Subscribe</a>
</nav>
<small>© 2026 Designer Wallcoverings — wallpaperwednesday.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('ww-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 hero on scroll
const heroBg = document.getElementById('heroBg');
window.addEventListener('scroll', () => {
const y = window.scrollY;
if (heroBg) heroBg.style.transform = `scale(1.08) translateY(${y * 0.25}px)`;
}, { passive: true });
// Archive
const archive = [
{ handle: "agra-langsat-arte", title: "Agra Langsat — Botanical Cream", vendor: "Designer Wallcovering", img: "/images/agra-langsat-arte.jpg", week: "Feb 4" },
{ handle: "poona-stone-arte", title: "Poona Stone — Coral Geometry", vendor: "Designer Wallcovering", img: "/images/poona-stone-arte.jpg", week: "Feb 11" },
{ handle: "horus-bone-arte", title: "Horus Bone — Luxor Essentials", vendor: "Designer Wallcovering", img: "/images/horus-bone-arte.jpg", week: "Feb 18" },
{ handle: "poona-cinnamon-arte", title: "Poona Cinnamon — Spice Tones", vendor: "Designer Wallcovering", img: "/images/poona-cinnamon-arte.jpg", week: "Feb 25" },
{ handle: "dwkk-ge157df51", title: "Marion Print — Indigo Botanical", vendor: "Designer Wallcovering", img: "/images/dwkk-ge157df51.jpg", week: "Mar 4" },
{ handle: "dwkk-g21eeb3da", title: "Chinese Lantern — Coral Print", vendor: "Designer Wallcovering", img: "/images/dwkk-g21eeb3da.jpg", week: "Mar 11" },
{ handle: "dwkk-140832", title: "Danakil Tape — Red/Blue Multi", vendor: "Designer Wallcovering", img: "/images/dwkk-140832.jpg", week: "Mar 18" },
{ handle: "dwkk-140831", title: "Danakil Tape — Cocoa/Ebony", vendor: "Designer Wallcovering", img: "/images/dwkk-140831.jpg", week: "Mar 25" },
{ handle: "dwkk-140829", title: "Danakil Tape — Seafoam/Grey", vendor: "Designer Wallcovering", img: "/images/dwkk-140829.jpg", week: "Apr 1" },
{ handle: "dwkk-140830", title: "Danakil Tape — Blue/Slate", vendor: "Designer Wallcovering", img: "/images/dwkk-140830.jpg", week: "Apr 8" },
{ handle: "dwkk-g60746833", title: "Entoto Stripe — Ivory Flax", vendor: "Designer Wallcovering", img: "/images/dwkk-g60746833.jpg", week: "Apr 16" },
{ handle: "dwkk-g7057da14", title: "Brink — Delft Indigo Chenille", vendor: "Designer Wallcovering", img: "/images/dwkk-g7057da14.jpg", week: "Apr 23" }
];
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(90,122,82,0.08)';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>
<!-- Contact modal — invisible until nsContactOpen() adds .show class. Added by fanout-12. -->
<div class="ns-modal" id="nsContactModal" role="dialog" aria-modal="true" aria-labelledby="nsContactTitle" onclick="if(event.target===this)nsContactClose()">
<div class="ns-modal-card">
<button type="button" class="close-x" onclick="nsContactClose()" aria-label="Close">×</button>
<h3 id="nsContactTitle">How can we help?</h3>
<p class="sub">Trade-account replies within one business day.</p>
<div class="ns-actions">
<a class="ns-action" href="mailto:info@wallpaperwednesday.com?subject=Wallpaperwednesday%20inquiry"><span class="ico">✉</span><div class="txt"><b>Email Us</b><span>info@wallpaperwednesday.com</span></div></a>
<a class="ns-action" href="tel:888-373-4564"><span class="ico">📞</span><div class="txt"><b>Call Us</b><span>(888) 373-4564 · M–F, 9–5 PT</span></div></a>
</div>
</div>
</div>
<script>
if (typeof window.nsContactOpen !== 'function') {
window.nsContactOpen = function () { var m = document.getElementById('nsContactModal'); if (m) m.classList.add('show'); };
window.nsContactClose = function () { var m = document.getElementById('nsContactModal'); if (m) m.classList.remove('show'); };
}
</script>
<script>window.DwHeaderConfig={siteName:"Wallpaperwednesday",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>